feat(text-area): add border-color-invalid component-scoped token

Esri · Sep 25, 2024 · 5ae8202 · 5ae8202
1 parent cf36299
commit 5ae8202
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 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
@@ -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
@@ -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
@@ -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,