Add subtle on-strong foreground color tokens (#2302)

sumup-oss · Nov 22, 2023 · 815ae9d · 815ae9d · vercel · Nov 22, 2023
1 parent 38cbcb5
commit 815ae9d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 0 deletions.
diff --git a/.changeset/famous-masks-heal.md b/.changeset/famous-masks-heal.md
@@ -0,0 +1,5 @@
+---
+'@sumup/design-tokens': minor
+---
+
+Added the `--cui-fg-on-strong-subtle`, `--cui-fg-on-strong-subtle-hovered`, `--cui-fg-on-strong-subtle-pressed`, and `--cui-fg-on-strong-subtle-disabled` color tokens. Use them for secondary content that provides additional information on backgrounds ending with `-strong` in order to achieve the necessary contrast for accessibility.
diff --git a/packages/design-tokens/themes/light.ts b/packages/design-tokens/themes/light.ts
@@ -383,6 +383,26 @@ export const light = [
     value: 'rgba(255, 255, 255, 0.4)',
     type: 'color',
   },
+  {
+    name: '--cui-fg-on-strong-subtle',
+    value: 'rgba(255, 255, 255, 0.7)',
+    type: 'color',
+  },
+  {
+    name: '--cui-fg-on-strong-subtle-hovered',
+    value: 'rgba(255, 255, 255, 0.8)',
+    type: 'color',
+  },
+  {
+    name: '--cui-fg-on-strong-subtle-pressed',
+    value: 'rgba(255, 255, 255, 0.8)',
+    type: 'color',
+  },
+  {
+    name: '--cui-fg-on-strong-subtle-disabled',
+    value: 'rgba(255, 255, 255, 0.4)',
+    type: 'color',
+  },
   /* Accent foregrounds */
   {
     name: '--cui-fg-accent',

diff --git a/packages/design-tokens/themes/schema.ts b/packages/design-tokens/themes/schema.ts
@@ -95,6 +95,10 @@ export const schema = [
   { name: '--cui-fg-on-strong-hovered', type: 'color' },
   { name: '--cui-fg-on-strong-pressed', type: 'color' },
   { name: '--cui-fg-on-strong-disabled', type: 'color' },
+  { name: '--cui-fg-on-strong-subtle', type: 'color' },
+  { name: '--cui-fg-on-strong-subtle-hovered', type: 'color' },
+  { name: '--cui-fg-on-strong-subtle-pressed', type: 'color' },
+  { name: '--cui-fg-on-strong-subtle-disabled', type: 'color' },
   /* Accent foregrounds */
   { name: '--cui-fg-accent', type: 'color' },
   { name: '--cui-fg-accent-hovered', type: 'color' },