From 23df042d78d0b0ba71efe8d03ed04fb8eb64a800 Mon Sep 17 00:00:00 2001
From: Cam Wiegert <cam@camwiegert.com>
Date: Fri, 5 Oct 2018 14:01:47 -0500
Subject: [PATCH] fix(input): add and document custom properties

references #14850
---
 core/src/components/input/input.scss | 20 ++++++++++++++++++--
 core/src/components/input/readme.md  | 16 ++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index 7704c6bfa1..418a393aec 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -4,6 +4,18 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --background: Background of the input
+   * @prop --color: Color of the input text
+   * @prop --padding-top: Top padding of the input
+   * @prop --padding-end: End padding of the input
+   * @prop --padding-bottom: Bottom padding of the input
+   * @prop --padding-start: Start padding of the input
+   * @prop --placeholder-color: Color of the input placeholder text
+   * @prop --placeholder-font-style: Font style of the input placeholder text
+   * @prop --placeholder-font-weight: Font weight of the input placeholder text
+   * @prop --placeholder-opacity: Opacity of the input placeholder text
+   */
   --placeholder-color: currentColor;
   --placeholder-font-style: inherit;
   --placeholder-font-weight: inherit;
@@ -12,7 +24,8 @@
   --padding-end: 0;
   --padding-bottom: 0;
   --padding-start: 0;
-  --border-radius: 0;
+  --background: transparent;
+  --color: inherit;
 
   display: flex;
   position: relative;
@@ -22,6 +35,9 @@
 
   width: 100%;
 
+  background: var(--background);
+  color: var(--color);
+
   /* stylelint-disable */
   /* TODO: find a better solution in padding.css, that does not require !important, */
   padding: 0 !important;
@@ -31,7 +47,7 @@
 }
 
 :host(.ion-color) {
-  color: #{current-color(base)};
+  color: current-color(base);
 }
 
 // Native Text Input
diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md
index 36f89717ef..1ef57260a4 100644
--- a/core/src/components/input/readme.md
+++ b/core/src/components/input/readme.md
@@ -62,6 +62,22 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email
 | `setFocus` |             |
 
 
+## CSS Custom Properties
+
+| Name                        | Description                               |
+| --------------------------- | ----------------------------------------- |
+| `--background`              | Background of the input                   |
+| `--color`                   | Color of the input text                   |
+| `--padding-bottom`          | Bottom padding of the input               |
+| `--padding-end`             | End padding of the input                  |
+| `--padding-start`           | Start padding of the input                |
+| `--padding-top`             | Top padding of the input                  |
+| `--placeholder-color`       | Color of the input placeholder text       |
+| `--placeholder-font-style`  | Font style of the input placeholder text  |
+| `--placeholder-font-weight` | Font weight of the input placeholder text |
+| `--placeholder-opacity`     | Opacity of the input placeholder text     |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*