Added Status to Text Component (#3375)

jpmorganchase · May 16, 2024 · fe5c364 · fe5c364
1 parent 39bf281
commit fe5c364
Show file tree

Hide file tree

Showing 31 changed files with 338 additions and 355 deletions.
diff --git a/.changeset/dry-jokes-carry.md b/.changeset/dry-jokes-carry.md
@@ -0,0 +1,84 @@
+---
+"@salt-ds/theme": minor
+---
+
+## Characteristics
+
+Added decorative and informative status foreground tokens. This ensures contrast requirements are met for both text and non-text elements.
+
+```diff
++  --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
++  --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
++  --salt-status-warning-foreground-decorative: var(--salt-palette-warning-foreground-decorative);
++  --salt-status-success-foreground-decorative: var(--salt-palette-success-foreground-decorative);
++
++  --salt-status-info-foreground-informative: var(--salt-palette-info-foreground-informative);
++  --salt-status-error-foreground-informative: var(--salt-palette-error-foreground-informative);
++  --salt-status-warning-foreground-informative: var(--salt-palette-warning-foreground-informative);
++  --salt-status-success-foreground-informative: var(--salt-palette-success-foreground-informative);
+```
+
+Deprecated status foreground tokens.
+
+| Name                             | Replacement                                 |
+| -------------------------------- | ------------------------------------------- |
+| --salt-status-info-foreground    | --salt-status-info-foreground-decorative    |
+| --salt-status-error-foreground   | --salt-status-error-foreground-decorative   |
+| --salt-status-warning-foreground | --salt-status-warning-foreground-decorative |
+| --salt-status-success-foreground | --salt-status-success-foreground-decorative |
+
+## Palette
+
+Added decorative and informative info, error, warning and success foreground tokens.
+
+### Light
+
+```diff
++  --salt-palette-info-foreground-decorative: var(--salt-color-blue-500);
++  --salt-palette-info-foreground-informative: var(--salt-color-blue-600);
++  --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
++  --salt-palette-error-foreground-informative: var(--salt-color-red-600);
++  --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700);
++  --salt-palette-warning-foreground-informative: var(--salt-color-orange-850);
++  --salt-palette-success-foreground-decorative: var(--salt-color-green-500);
++  --salt-palette-success-foreground-informative: var(--salt-color-green-600);
+```
+
+### Dark
+
+```diff
++  --salt-palette-info-foreground-decorative: var(--salt-color-blue-100);
++  --salt-palette-info-foreground-informative: var(--salt-color-blue-200);
++  --salt-palette-error-foreground-decorative: var(--salt-color-red-400);
++  --salt-palette-error-foreground-informative: var(--salt-color-red-200);
++  --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500);
++  --salt-palette-warning-foreground-informative: var(--salt-color-orange-400);
++  --salt-palette-success-foreground-decorative: var(--salt-color-green-400);
++  --salt-palette-success-foreground-informative: var(--salt-color-green-200);
+```
+
+Updated info and error border tokens.
+
+```diff
+-  --salt-palette-info-border: var(--salt-color-blue-500);
++  --salt-palette-info-border: var(--salt-color-blue-400);
+-  --salt-palette-error-border: var(--salt-color-red-500);
++  --salt-palette-error-border: var(--salt-color-red-400);
+```
+
+Deprecated status foreground tokens.
+
+| Name                              | Replacement                                  |
+| --------------------------------- | -------------------------------------------- |
+| --salt-palette-info-foreground    | --salt-palette-info-foreground-decorative    |
+| --salt-palette-error-foreground   | --salt-palette-error-foreground-decorative   |
+| --salt-palette-warning-foreground | --salt-palette-warning-foreground-decorative |
+| --salt-palette-success-foreground | --salt-palette-success-foreground-decorative |
+
+## Foundations
+
+Added `--salt-color-orange-850`:
+
+```diff
++  --salt-color-orange-850: rgb(194, 52, 7);
+```
diff --git a/.changeset/early-feet-complain.md b/.changeset/early-feet-complain.md
@@ -0,0 +1,19 @@
+---
+"@salt-ds/core": minor
+---
+
+Added status color support to Text.
+
+```tsx
+    <Text color="info">This is error color of Text</Text>
+    <Text color="error">This is error color of Text</Text>
+    <Text color="warning">This is warning color of Text</Text>
+    <Text color="success">This is success color of Text</Text>
+```
+
+- Checkbox will now have the correct border color on focus when it is in an error or warning state.
+- Checkbox now uses `--salt-status-error-foreground-decorative` and `--salt-status-warning-foreground-decorative` instead of `--salt-status-error-foreground` and `--salt-status-warning-foreground`.
+- RadioButton will now have the correct border color on focus when it is in an error or warning state.
+- RadioButton now uses `--salt-status-error-foreground-decorative` and `--salt-status-warning-foreground-decorative` instead of `--salt-status-error-foreground` and `--salt-status-warning-foreground`.
+- StatusAdornment now uses `--salt-status-error-foreground-decorative`, `--salt-status-warning-foreground-decorative` and `--salt-status-success-foreground-decorative` instead of `--salt-status-error-foreground`, `--salt-status-warning-foreground` and `--salt-status-success-foreground`.
+- StatusIndicator now uses `--salt-status-info-foreground-decorative`, `--salt-status-error-foreground-decorative`, `--salt-status-warning-foreground-decorative` and `--salt-status-success-foreground-decorative` instead of `--salt-status-info-foreground`, `--salt-status-error-foreground`, `--salt-status-warning-foreground`, `--salt-status-success-foreground`.
diff --git a/.changeset/nice-singers-matter.md b/.changeset/nice-singers-matter.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/lab": minor
+---
+
+TrackerStep now uses `--salt-status-success-foreground-decorative` and `--salt-status-info-foreground-decorative` instead of `--salt-status-success-foreground` and `--salt-status-info-foreground`.
diff --git a/packages/core/src/checkbox/Checkbox.css b/packages/core/src/checkbox/Checkbox.css
@@ -47,15 +47,15 @@
 }
 
 .saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {
-  outline-color: var(--salt-status-error-foreground);
-  border-color: var(--salt-status-error-foreground);
-  color: var(--salt-status-error-foreground);
+  outline-color: var(--salt-status-error-foreground-decorative);
+  border-color: var(--salt-status-error-borderColor);
+  color: var(--salt-status-error-foreground-decorative);
 }
 
 .saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {
-  outline-color: var(--salt-status-warning-foreground);
-  border-color: var(--salt-status-warning-foreground);
-  color: var(--salt-status-warning-foreground);
+  outline-color: var(--salt-status-warning-foreground-decorative);
+  border-color: var(--salt-status-warning-borderColor);
+  color: var(--salt-status-warning-foreground-decorative);
 }
 
 /* Styles applied to input element */

diff --git a/packages/core/src/checkbox/CheckboxIcon.css b/packages/core/src/checkbox/CheckboxIcon.css
@@ -54,16 +54,16 @@
 
 .saltCheckboxIcon-error,
 .saltCheckbox:hover .saltCheckboxIcon-error {
-  color: var(--salt-status-error-foreground);
+  color: var(--salt-status-error-foreground-decorative);
   border-color: var(--salt-status-error-borderColor);
-  outline-color: var(--salt-status-error-foreground);
+  outline-color: var(--salt-status-error-foreground-decorative);
 }
 
 .saltCheckboxIcon-warning,
 .saltCheckbox:hover .saltCheckboxIcon-warning {
-  color: var(--salt-status-warning-foreground);
+  color: var(--salt-status-warning-foreground-decorative);
   border-color: var(--salt-status-warning-borderColor);
-  outline-color: var(--salt-status-warning-foreground);
+  outline-color: var(--salt-status-warning-foreground-decorative);
 }
 
 .saltCheckboxIcon-readOnly,

diff --git a/packages/core/src/radio-button/RadioButton.css b/packages/core/src/radio-button/RadioButton.css
@@ -62,13 +62,13 @@
 }
 
 .saltRadioButton-error .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {
-  outline-color: var(--salt-status-error-foreground);
-  border-color: var(--salt-status-error-foreground);
-  color: var(--salt-status-error-foreground);
+  outline-color: var(--salt-status-error-foreground-decorative);
+  border-color: var(--salt-status-error-borderColor);
+  color: var(--salt-status-error-foreground-decorative);
 }
 
 .saltRadioButton-warning .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {
-  outline-color: var(--salt-status-warning-foreground);
-  border-color: var(--salt-status-warning-foreground);
-  color: var(--salt-status-warning-foreground);
+  outline-color: var(--salt-status-warning-foreground-decorative);
+  border-color: var(--salt-status-warning-borderColor);
+  color: var(--salt-status-warning-foreground-decorative);
 }
diff --git a/packages/core/src/radio-button/RadioButtonIcon.css b/packages/core/src/radio-button/RadioButtonIcon.css
@@ -40,16 +40,16 @@
 
 .saltRadioButtonIcon-error,
 .saltRadioButton:hover .saltRadioButtonIcon-error {
-  color: var(--salt-status-error-foreground);
+  color: var(--salt-status-error-foreground-decorative);
   border-color: var(--salt-status-error-borderColor);
-  outline-color: var(--salt-status-error-foreground);
+  outline-color: var(--salt-status-error-foreground-decorative);
 }
 
 .saltRadioButtonIcon-warning,
 .saltRadioButton:hover .saltRadioButtonIcon-warning {
-  color: var(--salt-status-warning-foreground);
+  color: var(--salt-status-warning-foreground-decorative);
   border-color: var(--salt-status-warning-borderColor);
-  outline-color: var(--salt-status-warning-foreground);
+  outline-color: var(--salt-status-warning-foreground-decorative);
 }
 
 .saltRadioButtonIcon-readOnly,

diff --git a/packages/core/src/status-adornment/StatusAdornment.css b/packages/core/src/status-adornment/StatusAdornment.css
@@ -9,13 +9,13 @@
 }
 
 .saltStatusAdornment-error {
-  --statusAdornment-color: var(--salt-status-error-foreground);
+  --statusAdornment-color: var(--salt-status-error-foreground-decorative);
 }
 
 .saltStatusAdornment-warning {
-  --statusAdornment-color: var(--salt-status-warning-foreground);
+  --statusAdornment-color: var(--salt-status-warning-foreground-decorative);
 }
 
 .saltStatusAdornment-success {
-  --statusAdornment-color: var(--salt-status-success-foreground);
+  --statusAdornment-color: var(--salt-status-success-foreground-decorative);
 }
diff --git a/packages/core/src/status-indicator/StatusIndicator.css b/packages/core/src/status-indicator/StatusIndicator.css
@@ -1,8 +1,8 @@
 .saltStatusIndicator {
-  --statusIndicator-warning-color: var(--salt-status-warning-foreground);
-  --statusIndicator-info-color: var(--salt-status-info-foreground);
-  --statusIndicator-success-color: var(--salt-status-success-foreground);
-  --statusIndicator-error-color: var(--salt-status-error-foreground);
+  --statusIndicator-warning-color: var(--salt-status-warning-foreground-decorative);
+  --statusIndicator-info-color: var(--salt-status-info-foreground-decorative);
+  --statusIndicator-success-color: var(--salt-status-success-foreground-decorative);
+  --statusIndicator-error-color: var(--salt-status-error-foreground-decorative);
   color: var(--saltStatusIndicator-color, var(--statusIndicator-Color));
 }
 

diff --git a/packages/core/src/text/Text.css b/packages/core/src/text/Text.css
@@ -44,6 +44,26 @@
   --text-color: var(--salt-content-secondary-foreground-disabled);
 }
 
+/* Info color */
+.saltText-info {
+  --text-color: var(--salt-status-info-foreground-informative);
+}
+
+/* Error color */
+.saltText-error {
+  --text-color: var(--salt-status-error-foreground-informative);
+}
+
+/* Warning color */
+.saltText-warning {
+  --text-color: var(--salt-status-warning-foreground-informative);
+}
+
+/* Success color */
+.saltText-success {
+  --text-color: var(--salt-status-success-foreground-informative);
+}
+
 /* Body emphasis strong */
 .saltText strong {
   font-weight: var(--salt-text-fontWeight-strong);

diff --git a/packages/core/src/text/Text.tsx b/packages/core/src/text/Text.tsx
@@ -9,6 +9,7 @@ import { ElementType, forwardRef, ReactElement } from "react";
 import textCss from "./Text.css";
 import { useWindow } from "@salt-ds/window";
 import { useComponentCssInjection } from "@salt-ds/styles";
+import { ValidationStatus } from "../status-indicator";
 
 export type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<
   T,
@@ -44,7 +45,7 @@ export type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<
     /*
      * The color of the text. Defaults to "primary".
      */
-    color?: "inherit" | "primary" | "secondary";
+    color?: "inherit" | "primary" | "secondary" | ValidationStatus;
   }
 >;