feat: add new grey tone to fix accessibility issues (#2873)

* feat: new design token added (color-neutral-50) * fix: update color for tertiary text to reach AA contrast goal on default bg colors
commercetools · Aug 5, 2024 · 82e5e2a · 82e5e2a
1 parent ea4a283
commit 82e5e2a
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 1 deletion.
diff --git a/.changeset/fair-tools-sniff.md b/.changeset/fair-tools-sniff.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/design-system': minor
+---
+
+new color token color-neutral-50 added
diff --git a/.changeset/perfect-games-nail.md b/.changeset/perfect-games-nail.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/text': patch
+---
+
+fixed insufficient fg to bg contrast-ratio when using text with tertiary tone
diff --git a/design-system/materials/custom-properties.css b/design-system/materials/custom-properties.css
@@ -58,6 +58,7 @@
   --color-neutral-05: hsl(0deg 0% 80% / 5%);
   --color-neutral-10: hsl(0deg 0% 80% / 10%);
   --color-neutral-40: hsl(232, 18%, 40%);
+  --color-neutral-50: hsl(233, 18%, 50%);
   --color-neutral-60: hsl(232, 18%, 60%);
   --color-neutral-85: hsl(232, 18%, 85%);
   --color-neutral-90: hsl(232, 18%, 90%);

diff --git a/design-system/materials/custom-properties.json b/design-system/materials/custom-properties.json
@@ -51,6 +51,7 @@
   "--color-neutral-05": "hsl(0deg 0% 80% / 5%)",
   "--color-neutral-10": "hsl(0deg 0% 80% / 10%)",
   "--color-neutral-40": "hsl(232, 18%, 40%)",
+  "--color-neutral-50": "hsl(233, 18%, 50%)",
   "--color-neutral-60": "hsl(232, 18%, 60%)",
   "--color-neutral-85": "hsl(232, 18%, 85%)",
   "--color-neutral-90": "hsl(232, 18%, 90%)",

diff --git a/design-system/materials/custom-properties_default.css b/design-system/materials/custom-properties_default.css
@@ -58,6 +58,7 @@
   --color-neutral-05: hsl(0deg 0% 80% / 5%);
   --color-neutral-10: hsl(0deg 0% 80% / 10%);
   --color-neutral-40: hsl(232, 18%, 40%);
+  --color-neutral-50: hsl(233, 18%, 50%);
   --color-neutral-60: hsl(232, 18%, 60%);
   --color-neutral-85: hsl(232, 18%, 85%);
   --color-neutral-90: hsl(232, 18%, 90%);

diff --git a/design-system/materials/internals/definition.yaml b/design-system/materials/internals/definition.yaml
@@ -88,6 +88,7 @@ choiceGroupsByTheme:
         color-neutral-05: 'hsl(0deg 0% 80% / 5%)'
         color-neutral-10: 'hsl(0deg 0% 80% / 10%)'
         color-neutral-40: 'hsl(232, 18%, 40%)'
+        color-neutral-50: 'hsl(233, 18%, 50%)'
         color-neutral-60: 'hsl(232, 18%, 60%)'
         color-neutral-85: 'hsl(232, 18%, 85%)'
         color-neutral-90: 'hsl(232, 18%, 90%)'
@@ -301,6 +302,8 @@ variants:
     description: 'To differentiate component big size'
   secondary:
     description: 'To differentiate component secondary type'
+  tertiary:
+    description: 'To differentiate component tertiary type'
   '10':
     description: 'To differentiate component small size'
   '20':

diff --git a/design-system/src/design-tokens.ts b/design-system/src/design-tokens.ts
@@ -57,6 +57,7 @@ export const themes = {
     colorNeutral05: 'hsl(0deg 0% 80% / 5%)',
     colorNeutral10: 'hsl(0deg 0% 80% / 10%)',
     colorNeutral40: 'hsl(232, 18%, 40%)',
+    colorNeutral50: 'hsl(233, 18%, 50%)',
     colorNeutral60: 'hsl(232, 18%, 60%)',
     colorNeutral85: 'hsl(232, 18%, 85%)',
     colorNeutral90: 'hsl(232, 18%, 90%)',
@@ -287,6 +288,7 @@ const designTokens = {
   colorNeutral05: 'var(--color-neutral-05, hsl(0deg 0% 80% / 5%))',
   colorNeutral10: 'var(--color-neutral-10, hsl(0deg 0% 80% / 10%))',
   colorNeutral40: 'var(--color-neutral-40, hsl(232, 18%, 40%))',
+  colorNeutral50: 'var(--color-neutral-50, hsl(233, 18%, 50%))',
   colorNeutral60: 'var(--color-neutral-60, hsl(232, 18%, 60%))',
   colorNeutral85: 'var(--color-neutral-85, hsl(232, 18%, 85%))',
   colorNeutral90: 'var(--color-neutral-90, hsl(232, 18%, 90%))',

diff --git a/packages/components/text/src/text.styles.ts b/packages/components/text/src/text.styles.ts
@@ -55,7 +55,7 @@ const getTone = (tone: string) => {
     case 'critical':
       return `color: ${designTokens.colorError40};`;
     case 'tertiary':
-      return `color: ${designTokens.colorNeutral60};`;
+      return `color: ${designTokens.colorNeutral50};`;
     case 'inherit':
       return 'color: inherit;';
     default: