From 5dfcd47b34e198cdcc8e805407d7ae4be57d235d Mon Sep 17 00:00:00 2001
From: Cam Wiegert <cam@camwiegert.com>
Date: Wed, 8 Aug 2018 15:34:53 -0500
Subject: [PATCH] fix(textarea): add and document custom properties

---
 core/src/components/textarea/readme.md        | 15 ++++++++++++
 .../textarea/test/standalone/index.html       |  8 +++++++
 core/src/components/textarea/textarea.scss    | 23 ++++++++++++++++++-
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/core/src/components/textarea/readme.md b/core/src/components/textarea/readme.md
index 9f948d68c8..e8c1524977 100644
--- a/core/src/components/textarea/readme.md
+++ b/core/src/components/textarea/readme.md
@@ -314,6 +314,21 @@ Emitted when a keyboard input ocurred.
 Emitted when the styles change.
 
 
+## CSS Custom Properties
+
+| Name                    | Description                     |
+| ----------------------- | ------------------------------- |
+| `--background`          | Background of the textarea      |
+| `--border-radius`       | Border radius of the textarea   |
+| `--color`               | Color of the text               |
+| `--padding-bottom`      | Bottom padding of the textarea  |
+| `--padding-end`         | End padding of the textarea     |
+| `--padding-start`       | Start padding of the textarea   |
+| `--padding-top`         | Top padding of the textarea     |
+| `--placeholder-color`   | Color of the placeholder text   |
+| `--placeholder-opacity` | Opacity of the placeholder text |
+| `--placeholder-weight`  | Weight of the placeholder text  |
+
 
 ----------------------------------------------
 
diff --git a/core/src/components/textarea/test/standalone/index.html b/core/src/components/textarea/test/standalone/index.html
index 873c80bf94..d09a66964d 100644
--- a/core/src/components/textarea/test/standalone/index.html
+++ b/core/src/components/textarea/test/standalone/index.html
@@ -13,5 +13,13 @@
   <ion-textarea placeholder="Textarea"></ion-textarea>
   <ion-textarea value="value"></ion-textarea>
   <ion-textarea value="44"></ion-textarea>
+  <ion-textarea placeholder="Custom" class="custom"></textarea>
+
+  <style>
+    .custom {
+      --background: papayawhip;
+      --color: blue;
+    }
+  </style>
 </body>
 </html>
diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss
index 2df3a59ffc..baaf5535d5 100644
--- a/core/src/components/textarea/textarea.scss
+++ b/core/src/components/textarea/textarea.scss
@@ -4,6 +4,20 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --background: Background of the textarea
+   * @prop --border-radius: Border radius of the textarea
+   * @prop --color: Color of the text
+   * @prop --placeholder-color: Color of the placeholder text
+   * @prop --placeholder-weight: Weight of the placeholder text
+   * @prop --placeholder-opacity: Opacity of the placeholder text
+   * @prop --padding-top: Top padding of the textarea
+   * @prop --padding-end: End padding of the textarea
+   * @prop --padding-bottom: Bottom padding of the textarea
+   * @prop --padding-start: Start padding of the textarea
+   */
+  --background: initial;
+  --color: currentColor;
   --placeholder-color: currentColor;
   --placeholder-weight: inherit;
   --placeholder-opacity: .5;
@@ -20,10 +34,16 @@
 
   width: 100%;
   box-sizing: border-box;
+
+  background: var(--background);
 }
 
 :host(.ion-color) {
-  color: #{current-color(base)};
+  background: initial;
+}
+
+:host(.ion-color) .native-textarea {
+  color: current-color(base);
 }
 
 // Textarea Within An Item
@@ -53,6 +73,7 @@
   outline: none;
 
   background: transparent;
+  color: var(--color);
 
   box-sizing: border-box;
   resize: none;