fix(textarea): add and document custom properties

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  |
+
 
 ----------------------------------------------
 

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>

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;