From 866cf8f1dd7f2dffa53dfb4ab94b4f06b659e6db Mon Sep 17 00:00:00 2001 From: Nora Krantz Date: Wed, 1 Sep 2021 13:12:02 -0400 Subject: [PATCH] chore(tokens): update text tokens --- .changeset/little-poets-pay.md | 6 +++ .../__snapshots__/index.test.tsx.snap | 26 +++++------ .../tokens/global/text-color.yml | 46 ++++++++++++++----- .../themes/console/global/text-color.yml | 12 +++++ .../themes/dark/global/background-color.yml | 6 +-- 5 files changed, 68 insertions(+), 28 deletions(-) create mode 100644 .changeset/little-poets-pay.md diff --git a/.changeset/little-poets-pay.md b/.changeset/little-poets-pay.md new file mode 100644 index 0000000000..7b4a70c2b0 --- /dev/null +++ b/.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. diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap index 6b73ebe602..2b241d669e 100644 --- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap +++ b/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\\", diff --git a/packages/paste-design-tokens/tokens/global/text-color.yml b/packages/paste-design-tokens/tokens/global/text-color.yml index 57ce692e75..2fc1f119ca 100644 --- a/packages/paste-design-tokens/tokens/global/text-color.yml +++ b/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. diff --git a/packages/paste-design-tokens/tokens/themes/console/global/text-color.yml b/packages/paste-design-tokens/tokens/themes/console/global/text-color.yml index 566cba2a95..b3aaa6a6b7 100644 --- a/packages/paste-design-tokens/tokens/themes/console/global/text-color.yml +++ b/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. diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml index 395fd202dd..f0972c3d1a 100644 --- a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml +++ b/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}"