From 5ae8202bdff4184f8aa02a12b48c33cb4087a5c0 Mon Sep 17 00:00:00 2001
From: Ben Elan <no-reply@benelan.dev>
Date: Wed, 25 Sep 2024 13:10:08 -0700
Subject: [PATCH] feat(text-area): add border-color-invalid component-scoped
 token

---
 .../src/components/text-area/text-area.scss        | 14 +++++++++-----
 .../src/custom-theme/text-area.ts                  |  1 +
 .../calcite-components/src/demos/text-area.html    |  2 ++
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/text-area/text-area.scss b/packages/calcite-components/src/components/text-area/text-area.scss
index 77c8cf070f0..a6388a70de1 100644
--- a/packages/calcite-components/src/components/text-area/text-area.scss
+++ b/packages/calcite-components/src/components/text-area/text-area.scss
@@ -5,12 +5,13 @@
  *
  * @prop --calcite-text-area-background-color: Specifies the background color of the component.
  * @prop --calcite-text-area-border-color: Specifies the border color of the text area.
+ * @prop --calcite-text-area-border-color-invalid: Specifies the border color of the text area when the status is invalid.
  * @prop --calcite-text-area-character-limit-text-color: Specifies the color of the character limit text displayed in footer of the component.
  * @prop --calcite-text-area-divider-color: Specifies the color of the divider between the text area and footer.
- * @prop --calcite-text-area-font-size: Specifies the font size of the thext area and footer.
- * @prop --calcite-text-area-max-height: Specifies the the maximum height of the text area in the component.
+ * @prop --calcite-text-area-font-size: Specifies the font size of the text area and footer.
+ * @prop --calcite-text-area-max-height: Specifies the maximum height of the text area in the component.
  * @prop --calcite-text-area-min-height: Specifies the minimum height of the text area in the component.
- * @prop --calcite-text-area-max-width: Specifies the the maximum width of the text area in the component.
+ * @prop --calcite-text-area-max-width: Specifies the maximum width of the text area in the component.
  * @prop --calcite-text-area-min-width: Specifies the minimum width of the text area in the component.
  * @prop --calcite-text-area-text-color: Specifies the color of text in the component.
  * @prop --calcite-text-area-footer-border-color: Specifies the border color of the footer.
@@ -63,7 +64,7 @@
 
   &.text-area--invalid {
     --calcite-internal-text-area-border-color: var(
-      --calcite-text-area-border-color,
+      --calcite-text-area-border-color-invalid,
       var(--calcite-color-status-danger)
     );
 
@@ -192,7 +193,10 @@
 }
 
 :host([status="invalid"]) {
-  --calcite-internal-text-area-border-color: var(--calcite-text-area-border-color, var(--calcite-color-status-danger));
+  --calcite-internal-text-area-border-color: var(
+    --calcite-text-area-border-color-invalid,
+    var(--calcite-color-status-danger)
+  );
 
   .text-area:focus {
     @apply focus-inset-danger;
diff --git a/packages/calcite-components/src/custom-theme/text-area.ts b/packages/calcite-components/src/custom-theme/text-area.ts
index b29df775832..a709708f230 100644
--- a/packages/calcite-components/src/custom-theme/text-area.ts
+++ b/packages/calcite-components/src/custom-theme/text-area.ts
@@ -3,6 +3,7 @@ import { html } from "../../support/formatting";
 export const textAreaTokens = {
   calciteTextAreaBackgroundColor: "",
   calciteTextAreaBorderColor: "",
+  calciteTextAreaBorderColorInvalid: "",
   calciteTextAreaCharacterLimitTextColor: "",
   calciteTextAreaDividerColor: "",
   calciteTextAreaFontSize: "",
diff --git a/packages/calcite-components/src/demos/text-area.html b/packages/calcite-components/src/demos/text-area.html
index 3eba8e74515..a550f03d228 100644
--- a/packages/calcite-components/src/demos/text-area.html
+++ b/packages/calcite-components/src/demos/text-area.html
@@ -14,6 +14,7 @@
         --calcite-text-area-font-size: 25px;
         --calcite-text-area-background-color: cadetblue;
         --calcite-text-area-border-color: magenta;
+        --calcite-text-area-border-color-invalid: pink;
         --calcite-text-area-character-limit-text-color: magenta;
         --calcite-text-area-divider-color: yellow;
         --calcite-text-area-text-color: brown;
@@ -251,6 +252,7 @@
         tokens="
         --calcite-text-area-background-color,
         --calcite-text-area-border-color,
+        --calcite-text-area-border-color-invalid,
         --calcite-text-area-character-limit-text-color,
         --calcite-text-area-divider-color,
         --calcite-text-area-font-size,