- update textarea css vars;

- add styles for disabled textarea;
- add styles for readonly textarea;

Author: JoaoFerreira-FrontEnd

core/src/components/textarea/textarea.ionic.scss

@@ -6,9 +6,10 @@
 // --------------------------------------------------
 
 :host {
+  --border-color: #{globals.$ion-primitives-neutral-500};
   --color: #{globals.$ion-primitives-neutral-1200};
-  --highlight-color-valid: #{globals.$ion-semantics-success-base};
-  --highlight-color-invalid: #{globals.$ion-semantics-danger-base};
+  --highlight-color-valid: #{globals.$ion-semantics-success-900};
+  --highlight-color-invalid: #{globals.$ion-semantics-danger-800};
   --placeholder-color: #{globals.$ion-primitives-neutral-800};
   --placeholder-opacity: 1;
   --background: #{globals.$ion-primitives-base-white};
@@ -138,6 +139,13 @@ ion-icon {
   --border-width: #{globals.$ion-border-size-025};
 }
 
+// Textarea - Readonly
+// ----------------------------------------------------------------
+
+:host(.textarea-readonly) {
+  --background: #{globals.$ion-primitives-neutral-100};
+}
+
 // Textarea Highlight
 // ----------------------------------------------------------------
 
@@ -166,3 +174,41 @@ ion-icon {
 :host(.has-focus) .textarea-highlight {
   transform: scale(1);
 }
+
+// Textarea - Disabled
+// ----------------------------------------------------------------
+
+:host(.textarea-disabled) {
+  // color for the text within the textarea
+  --color: #{globals.$ion-primitives-neutral-500};
+  --background: #{globals.$ion-primitives-neutral-100};
+  --border-color: #{globals.$ion-primitives-neutral-300};
+  --placeholder-color: #{globals.$ion-primitives-neutral-500};
+
+  pointer-events: none;
+}
+
+:host(.textarea-disabled:not(.ion-valid)) .textarea-bottom .helper-text,
+:host(.textarea-disabled) .textarea-bottom .counter,
+:host(.textarea-disabled) .label-text-wrapper {
+  color: globals.$ion-primitives-neutral-500;
+}
+
+:host(.textarea-disabled.has-focus.ion-valid) {
+  --border-color: rgba(#{globals.$ion-semantics-success-base-rgb}, 0.6);
+}
+
+:host(.textarea-disabled.ion-touched.ion-invalid) {
+  --border-color: rgba(#{globals.$ion-semantics-danger-base-rgb}, 0.6);
+}
+
+:host(.textarea-disabled.ion-color) {
+  --border-color: #{current-color(base, 0.6)};
+}
+
+:host(.textarea-disabled.has-focus.ion-valid) .textarea-bottom .helper-text,
+:host(.textarea-disabled.ion-touched.ion-invalid) .error-text,
+:host(.textarea-disabled.ion-color) .textarea-bottom .helper-text,
+:host(.textarea-disabled.ion-color) .helper-text {
+  opacity: 0.6;
+}

core/src/components/textarea/textarea.tsx

@@ -676,7 +676,7 @@ export class Textarea implements ComponentInterface {
   }
 
   render() {
-    const { inputId, disabled, size, labelPlacement, el, hasFocus } = this;
+    const { inputId, disabled, readonly, size, labelPlacement, el, hasFocus } = this;
     const fill = this.getFill();
     const theme = getIonTheme(this);
     const shape = this.getShape();
@@ -719,6 +719,7 @@ export class Textarea implements ComponentInterface {
           [`textarea-size-${size}`]: true,
           [`textarea-label-placement-${labelPlacement}`]: true,
           'textarea-disabled': disabled,
+          'textarea-readonly': readonly,
         })}
       >
         {/**