diff --git a/.changeset/fair-tools-sniff.md b/.changeset/fair-tools-sniff.md new file mode 100644 index 0000000000..028f21673c --- /dev/null +++ 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 new file mode 100644 index 0000000000..6c72c9943d --- /dev/null +++ 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 index e0cf4cdbe9..2c362966e9 100644 --- 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 index 217b8591ad..f812d87275 100644 --- 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 index e0cf4cdbe9..2c362966e9 100644 --- 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 index 236256067b..c85692fe32 100644 --- 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 index d6e6ca896c..5ede7cd985 100644 --- 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 index a6d898d7be..909c28961b 100644 --- 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: