Match interactive color tokens to default values (#2613)

sumup-oss · Jul 19, 2024 · a1f877a · a1f877a
1 parent 717d814
commit a1f877a
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 13 deletions.
diff --git a/.changeset/small-pots-think.md b/.changeset/small-pots-think.md
@@ -0,0 +1,5 @@
+---
+'@sumup/design-tokens': patch
+---
+
+Matched the interactive variants of the `fg-normal`, `fg-subtle`, `fg-on-strong`, and `fg-on-strong-subtle` color tokens to their default values.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -42,3 +42,4 @@ jobs:
           externals: |
             '.storybook/public/**'
             'packages/design-tokens/**'
+            'packages/icons/**'
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -3,10 +3,8 @@ import path from 'node:path';
 import remarkGfm from 'remark-gfm';
 import { mergeConfig } from 'vite';
 
-const toPath = (filePath: string) => path.join(process.cwd(), filePath);
-
 const config: StorybookConfig = {
-  staticDirs: [toPath('.storybook/public')],
+  staticDirs: [path.join(process.cwd(), '.storybook/public')],
   stories: [
     '../packages/circuit-ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
     '../docs/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',

diff --git a/packages/design-tokens/themes/light.ts b/packages/design-tokens/themes/light.ts
@@ -303,12 +303,12 @@ export const light = [
   },
   {
     name: '--cui-fg-normal-hovered',
-    value: '#52565d',
+    value: '#0f131a',
     type: 'color',
   },
   {
     name: '--cui-fg-normal-pressed',
-    value: '#565c65',
+    value: '#0f131a',
     type: 'color',
   },
   {
@@ -323,12 +323,12 @@ export const light = [
   },
   {
     name: '--cui-fg-subtle-hovered',
-    value: '#33373e',
+    value: '#6a737c',
     type: 'color',
   },
   {
     name: '--cui-fg-subtle-pressed',
-    value: '#0f131a',
+    value: '#6a737c',
     type: 'color',
   },
   {
@@ -343,12 +343,12 @@ export const light = [
   },
   {
     name: '--cui-fg-placeholder-hovered',
-    value: '#86929e',
+    value: '#9da7b1',
     type: 'color',
   },
   {
     name: '--cui-fg-placeholder-pressed',
-    value: '#657381',
+    value: '#9da7b1',
     type: 'color',
   },
   {
@@ -363,12 +363,12 @@ export const light = [
   },
   {
     name: '--cui-fg-on-strong-hovered',
-    value: 'rgba(255, 255, 255, 0.8000)',
+    value: '#ffffff',
     type: 'color',
   },
   {
     name: '--cui-fg-on-strong-pressed',
-    value: 'rgba(255, 255, 255, 0.8000)',
+    value: '#ffffff',
     type: 'color',
   },
   {
@@ -383,12 +383,12 @@ export const light = [
   },
   {
     name: '--cui-fg-on-strong-subtle-hovered',
-    value: 'rgba(255, 255, 255, 0.8000)',
+    value: 'rgba(255, 255, 255, 0.7000)',
     type: 'color',
   },
   {
     name: '--cui-fg-on-strong-subtle-pressed',
-    value: 'rgba(255, 255, 255, 0.8000)',
+    value: 'rgba(255, 255, 255, 0.7000)',
     type: 'color',
   },
   {