Bug 1868412 - Introduce red tokens for form input error state (descri…

…ptive error text and focus outline) r=reusable-components-reviewers,desktop-theme-reviewers,accessibility-frontend-reviewers,morgan,hjones,dao

Added
- `--color-red-20`
- `--color-error-outline`
- `--text-color-error`
- `.text-error` helper class

Differential Revision: https://phabricator.services.mozilla.com/D195568

toolkit/themes/shared/design-system/text-and-typography.css

@@ -32,6 +32,11 @@ h2,
   color: var(--text-color-deemphasized);
 }
 
+.text-error {
+  color: var(--text-color-error);
+  font-weight: var(--font-weight-bold);
+}
+
 .text-truncated-ellipsis {
   /* Will not work on `display: flex` items
     unless you wrap its contents with another element that has this class. */

toolkit/themes/shared/design-system/tokens-shared.css

@@ -30,6 +30,7 @@
   --color-green-50: #017a40;
   --color-green-80: #004725;
   --color-red-05: #ffe8e8;
+  --color-red-20: #ff9aa2;
   --color-red-30: #f37f98;
   --color-red-50: #d7264c;
   --color-red-80: #690f22;
@@ -103,13 +104,17 @@
     --color-background-success: light-dark(var(--color-green-05), var(--color-green-80));
     --color-background-warning: light-dark(var(--color-yellow-05), var(--color-yellow-80));
     --color-background-critical: light-dark(var(--color-red-05), var(--color-red-80));
+    --color-error-outline: light-dark(var(--color-red-50), var(--color-red-20));
 
     /** Icon **/
     --icon-color: light-dark(var(--color-gray-70), var(--color-gray-05));
     --icon-color-information: light-dark(var(--color-blue-50), var(--color-blue-30));
     --icon-color-success: light-dark(var(--color-green-50), var(--color-green-30));
     --icon-color-warning: light-dark(var(--color-yellow-50), var(--color-yellow-30));
     --icon-color-critical: light-dark(var(--color-red-50), var(--color-red-30));
+
+    /** Text **/
+    --text-color-error: light-dark(var(--color-red-50), var(--color-red-20));
   }
 }
 
@@ -148,6 +153,7 @@
     /* FIXME(emilio): These seem rather sketchy */
     --color-accent-primary-hover: ButtonText;
     --color-accent-primary-active: ButtonText;
+    --color-error-outline: var(--border-color);
 
     /** Icon **/
     --icon-color: var(--text-color);
@@ -158,6 +164,7 @@
 
     /** Text **/
     --text-color: CanvasText;
+    --text-color-error: inherit;
     --text-color-deemphasized: inherit;
   }