chore(tokens): update text tokens

.changeset/little-poets-pay.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/design-tokens': patch
+'@twilio-paste/core': patch
+---
+
+[Design tokens] Text, background, and icon color tokens are updated to meet accessibility guidelines.

packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap

@@ -316,11 +316,11 @@ exports[`Design Tokens matches the Console theme 1`] = `
   \\"color-text-link-destructive-weak\\": \\"rgb(236, 182, 182)\\",
   \\"color-text-link-stronger\\": \\"rgb(3, 44, 94)\\",
   \\"color-text-link-destructive\\": \\"rgb(226, 37, 37)\\",
-  \\"color-text-icon-success\\": \\"rgb(14, 124, 58)\\",
+  \\"color-text-icon-success\\": \\"rgb(0, 153, 74)\\",
   \\"color-text-warning\\": \\"rgb(228, 98, 22)\\",
-  \\"color-text-icon-neutral\\": \\"rgb(0, 20, 137)\\",
+  \\"color-text-icon-neutral\\": \\"rgb(0, 62, 130)\\",
   \\"color-text-new\\": \\"rgb(109, 46, 209)\\",
-  \\"color-text-icon-error\\": \\"rgb(214, 31, 31)\\",
+  \\"color-text-icon-error\\": \\"rgb(226, 37, 37)\\",
   \\"color-text-inverse-weak\\": \\"rgb(200, 204, 207)\\",
   \\"color-text-link-destructive-stronger\\": \\"rgb(96, 1, 1)\\",
   \\"color-text-icon-brand-inverse\\": \\"rgb(255, 255, 255)\\",
@@ -344,7 +344,7 @@ exports[`Design Tokens matches the Console theme 1`] = `
   \\"color-text-inverse\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-weaker\\": \\"rgb(200, 204, 207)\\",
   \\"color-text-warning-strong\\": \\"rgb(168, 62, 0)\\",
-  \\"color-text-icon-warning\\": \\"rgb(227, 106, 25)\\",
+  \\"color-text-icon-warning\\": \\"rgb(228, 98, 22)\\",
   \\"color-text-link-destructive-strong\\": \\"rgb(178, 6, 0)\\",
   \\"color-text-link-darker\\": \\"rgb(3, 44, 94)\\",
   \\"color-text-link-destructive-darker\\": \\"rgb(96, 1, 1)\\",
@@ -371,8 +371,8 @@ exports[`Design Tokens matches the Console theme 1`] = `
 exports[`Design Tokens matches the Dark theme 1`] = `
 "{
   \\"color-background-user\\": \\"rgb(88, 23, 189)\\",
-  \\"color-background-trial\\": \\"rgb(56, 14, 120)\\",
-  \\"color-background-subaccount\\": \\"rgb(255, 221, 53)\\",
+  \\"color-background-trial\\": \\"rgb(13, 58, 31)\\",
+  \\"color-background-subaccount\\": \\"rgb(84, 51, 8)\\",
   \\"color-background-primary-stronger\\": \\"rgb(235, 244, 255)\\",
   \\"color-background-destructive-stronger\\": \\"rgb(254, 236, 236)\\",
   \\"color-background-primary-weaker\\": \\"rgba(255, 255, 255, 0.2)\\",
@@ -399,7 +399,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-error\\": \\"rgb(235, 86, 86)\\",
   \\"color-background-neutral-weakest\\": \\"rgb(3, 11, 93)\\",
   \\"color-background-available\\": \\"rgb(20, 176, 83)\\",
-  \\"color-background-error-weakest\\": \\"rgb(74, 11, 11)\\",
+  \\"color-background-error-weakest\\": \\"rgb(49, 12, 12)\\",
   \\"color-background-required\\": \\"rgb(235, 86, 86)\\",
   \\"color-background-body\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-primary-strong\\": \\"rgb(204, 228, 255)\\",
@@ -994,14 +994,14 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-text-link-stronger\\": \\"rgb(3, 11, 93)\\",
   \\"color-text-link-destructive\\": \\"rgb(214, 31, 31)\\",
   \\"color-text-icon-success\\": \\"rgb(14, 124, 58)\\",
-  \\"color-text-warning\\": \\"rgb(244, 124, 34)\\",
+  \\"color-text-warning\\": \\"rgb(141, 49, 24)\\",
   \\"color-text-icon-neutral\\": \\"rgb(0, 20, 137)\\",
   \\"color-text-new\\": \\"rgb(109, 46, 209)\\",
   \\"color-text-icon-error\\": \\"rgb(214, 31, 31)\\",
   \\"color-text-inverse-weak\\": \\"rgb(174, 178, 193)\\",
   \\"color-text-link-destructive-stronger\\": \\"rgb(74, 11, 11)\\",
   \\"color-text-icon-brand-inverse\\": \\"rgb(255, 255, 255)\\",
-  \\"color-text-success\\": \\"rgb(20, 176, 83)\\",
+  \\"color-text-success\\": \\"rgb(14, 124, 58)\\",
   \\"color-text-weak\\": \\"rgb(96, 107, 133)\\",
   \\"color-text-icon\\": \\"rgb(96, 107, 133)\\",
   \\"color-text-link\\": \\"rgb(2, 99, 224)\\",
@@ -1020,7 +1020,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-text-inverse-weaker\\": \\"rgb(96, 107, 133)\\",
   \\"color-text-inverse\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-weaker\\": \\"rgb(174, 178, 193)\\",
-  \\"color-text-warning-strong\\": \\"rgb(195, 83, 35)\\",
+  \\"color-text-warning-strong\\": \\"rgb(141, 49, 24)\\",
   \\"color-text-icon-warning\\": \\"rgb(227, 106, 25)\\",
   \\"color-text-link-destructive-strong\\": \\"rgb(173, 17, 17)\\",
   \\"z-index-0\\": \\"0\\",
@@ -1294,14 +1294,14 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-text-link-stronger\\": \\"rgb(3, 11, 93)\\",
   \\"color-text-link-destructive\\": \\"rgb(214, 31, 31)\\",
   \\"color-text-icon-success\\": \\"rgb(14, 124, 58)\\",
-  \\"color-text-warning\\": \\"rgb(244, 124, 34)\\",
+  \\"color-text-warning\\": \\"rgb(141, 49, 24)\\",
   \\"color-text-icon-neutral\\": \\"rgb(0, 20, 137)\\",
   \\"color-text-new\\": \\"rgb(109, 46, 209)\\",
   \\"color-text-icon-error\\": \\"rgb(214, 31, 31)\\",
   \\"color-text-inverse-weak\\": \\"rgb(174, 178, 193)\\",
   \\"color-text-link-destructive-stronger\\": \\"rgb(74, 11, 11)\\",
   \\"color-text-icon-brand-inverse\\": \\"rgb(255, 255, 255)\\",
-  \\"color-text-success\\": \\"rgb(20, 176, 83)\\",
+  \\"color-text-success\\": \\"rgb(14, 124, 58)\\",
   \\"color-text-weak\\": \\"rgb(96, 107, 133)\\",
   \\"color-text-icon\\": \\"rgb(96, 107, 133)\\",
   \\"color-text-link\\": \\"rgb(2, 99, 224)\\",
@@ -1320,7 +1320,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-text-inverse-weaker\\": \\"rgb(96, 107, 133)\\",
   \\"color-text-inverse\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-weaker\\": \\"rgb(174, 178, 193)\\",
-  \\"color-text-warning-strong\\": \\"rgb(195, 83, 35)\\",
+  \\"color-text-warning-strong\\": \\"rgb(141, 49, 24)\\",
   \\"color-text-icon-warning\\": \\"rgb(227, 106, 25)\\",
   \\"color-text-link-destructive-strong\\": \\"rgb(173, 17, 17)\\",
   \\"z-index-0\\": \\"0\\",

packages/paste-design-tokens/tokens/global/text-color.yml

@@ -52,6 +52,15 @@ props:
   color-text-weakest:
     value: "{!palette-gray-0}"
     comment: Weakest body text for visual hierarchy. Inaccessible unless used on disabled controls.
+    text_contrast_pairing:
+      - color-background-primary
+      - color-background-primary-strong
+      - color-background-primary-stronger
+      - color-background-primary-strongest
+      - color-background-destructive
+      - color-background-destructive-strong
+      - color-background-destructive-stronger
+      - color-background-destructive-strongest
   color-text-inverse:
     value: "{!palette-gray-0}"
     comment: Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.
@@ -247,31 +256,44 @@ props:
       - color-background-primary-weakest
       - color-background-destructive-weakest
   color-text-success:
-    value: "{!palette-green-60}"
+    value: "{!palette-green-70}"
     comment: Text color for success text.
+    text_contrast_pairing:
+      - color-background
+      - color-background-body
+      - color-background-success-weakest
+      - color-background-row-striped
     uicontrol_contrast_pairing:
-      # - color-background
-      # - color-background-body
-      - color-background-body-inverse
-      # - color-background-row-striped
+      - color-background
+      - color-background-body
+      - color-background-success-weakest
+      - color-background-row-striped
   color-text-warning:
-    value: "{!palette-orange-60}"
+    value: "{!palette-orange-80}"
     comment: Color for warning text.
+    text_contrast_pairing:
+      - color-background
+      - color-background-body
+      - color-background-warning-weakest
+      - color-background-row-striped
     uicontrol_contrast_pairing:
-      # - color-background
-      # - color-background-body
-      - color-background-body-inverse
-      # - color-background-row-striped
+      - color-background
+      - color-background-body
+      - color-background-warning-weakest
+      - color-background-row-striped
   color-text-warning-strong:
-    value: "{!palette-orange-70}"
+    value: "{!palette-orange-80}"
     comment: Color for dark warning text.
     text_contrast_pairing:
+      - color-background
       - color-background-body
+      - color-background-row-striped
+      - color-background-warning-weakest
     uicontrol_contrast_pairing:
       - color-background
       - color-background-body
-      - color-background-body-inverse
       - color-background-row-striped
+      - color-background-warning-weakest
   color-text-new:
     value: "{!palette-purple-60}"
     comment: Color for text indicating a new status.

packages/paste-design-tokens/tokens/themes/console/global/text-color.yml

@@ -91,3 +91,15 @@ props:
   color-text-icon-inverse:
     value: "{!palette-gray-50}"
     comment: Default icon color for inverse backgrounds.
+  color-text-icon-error:
+    value: "{!palette-red-60}"
+    comment: Icon color for indicating an error.
+  color-text-icon-success:
+    value: "{!palette-green-60}"
+    comment: Icon color for indicating success.
+  color-text-icon-warning:
+    value: "{!palette-orange-60}"
+    comment: Icon color for indicating a warning.
+  color-text-icon-neutral:
+    value: "{!palette-blue-80}"
+    comment: Icon color for being neutral.

packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml

@@ -50,10 +50,10 @@ props:
 
   # account backgrounds
   color-background-subaccount:
-    value: "{!palette-yellow-40}"
+    value: "{!palette-yellow-90}"
     comment: Subaccount background color
   color-background-trial:
-    value: "{!palette-purple-80}"
+    value: "{!palette-green-90}"
     comment: Trial account background color
 
   # page body
@@ -87,7 +87,7 @@ props:
     value: "{!palette-red-50}"
     comment: Error background color
   color-background-error-weakest:
-    value: "{!palette-red-90}"
+    value: "{!palette-red-100}"
     comment: Weakest error background color
   color-background-new:
     value: "{!palette-purple-80}"