fix(tokens): point tier 3 tokens to relevant tier 2 token values

chanzuckerberg · Aug 14, 2023 · 037acd4 · 037acd4
1 parent 5eb3dc0
commit 037acd4
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 51 deletions.
diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
@@ -438,20 +438,20 @@
   "eds-theme-color-form-background": "#FFFFFF",
   "eds-theme-color-form-background-hover": "#F4F6F8",
   "eds-theme-color-form-label": "#383C43",
-  "eds-theme-color-link-brand-text": "var(--eds-theme-color-text-link-neutral)",
-  "eds-theme-color-link-brand-text-hover": "var(--eds-theme-color-text-link-brand)",
+  "eds-theme-color-link-brand-text": "var(--eds-theme-color-text-neutral-strong)",
+  "eds-theme-color-link-brand-text-hover": "var(--eds-theme-color-text-brand-default)",
   "eds-theme-color-link-brand-text-focus": "var(--eds-theme-color-text-neutral-default-inverse)",
-  "eds-theme-color-link-brand-text-decoration": "var(--eds-theme-color-border-link-brand)",
-  "eds-theme-color-link-brand-text-decoration-hover": "var(--eds-theme-color-border-link-brand)",
+  "eds-theme-color-link-brand-text-decoration": "var(--eds-theme-color-text-brand-default)",
+  "eds-theme-color-link-brand-text-decoration-hover": "var(--eds-theme-color-text-brand-default)",
   "eds-theme-color-link-brand-text-decoration-focus": "var(--eds-theme-color-text-neutral-default-inverse)",
-  "eds-theme-color-link-brand-background-focus": "var(--eds-theme-color-border-link-brand)",
-  "eds-theme-color-link-neutral-text": "var(--eds-theme-color-text-link-neutral)",
-  "eds-theme-color-link-neutral-text-hover": "var(--eds-theme-color-text-link-brand)",
+  "eds-theme-color-link-brand-background-focus": "var(--eds-theme-color-text-brand-default)",
+  "eds-theme-color-link-neutral-text": "var(--eds-theme-color-text-neutral-strong)",
+  "eds-theme-color-link-neutral-text-hover": "var(--eds-theme-color-text-brand-default)",
   "eds-theme-color-link-neutral-text-focus": "var(--eds-theme-color-text-neutral-default-inverse)",
-  "eds-theme-color-link-neutral-text-decoration": "var(--eds-theme-color-border-link-neutral)",
-  "eds-theme-color-link-neutral-text-decoration-hover": "var(--eds-theme-color-border-link-brand)",
+  "eds-theme-color-link-neutral-text-decoration": "var(--eds-theme-color-text-neutral-strong)",
+  "eds-theme-color-link-neutral-text-decoration-hover": "var(--eds-theme-color-text-brand-default)",
   "eds-theme-color-link-neutral-text-decoration-focus": "var(--eds-theme-color-text-neutral-default-inverse)",
-  "eds-theme-color-link-neutral-background-focus": "var(--eds-theme-color-border-link-neutral)",
+  "eds-theme-color-link-neutral-background-focus": "var(--eds-theme-color-text-neutral-default)",
   "eds-theme-color-modal-brand-header-background": "#8984E8",
   "eds-theme-color-progress-bar-background": "#E7E8EA",
   "eds-theme-color-progress-bar-border": "#E7E8EA",

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -11,5 +11,25 @@
   "typescript.validate.enable": true,
   "javascript.validate.enable": true,
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#93e6fc",
+    "activityBar.background": "#93e6fc",
+    "activityBar.foreground": "#15202b",
+    "activityBar.inactiveForeground": "#15202b99",
+    "activityBarBadge.background": "#fa45d4",
+    "activityBarBadge.foreground": "#15202b",
+    "commandCenter.border": "#15202b99",
+    "sash.hoverBorder": "#93e6fc",
+    "statusBar.background": "#61dafb",
+    "statusBar.foreground": "#15202b",
+    "statusBarItem.hoverBackground": "#2fcefa",
+    "statusBarItem.remoteBackground": "#61dafb",
+    "statusBarItem.remoteForeground": "#15202b",
+    "titleBar.activeBackground": "#61dafb",
+    "titleBar.activeForeground": "#15202b",
+    "titleBar.inactiveBackground": "#61dafb99",
+    "titleBar.inactiveForeground": "#15202b99"
+  },
+  "peacock.color": "#61dafb"
 }
diff --git a/src/design-tokens/tier-3-component/link.json b/src/design-tokens/tier-3-component/link.json
@@ -6,58 +6,58 @@
           "brand": {
             "text": {
               "@": {
-                "value": "var(--eds-theme-color-text-link-neutral)"
+                "value": "var(--eds-theme-color-text-neutral-strong)"
               },
               "hover": {
-                "value": "var(--eds-theme-color-text-link-brand)"
+                "value": "var(--eds-theme-color-text-brand-default)"
               },
               "focus": {
                 "value": "var(--eds-theme-color-text-neutral-default-inverse)"
               }
             },
             "text-decoration": {
               "@": {
-                "value": "var(--eds-theme-color-border-link-brand)"
+                "value": "var(--eds-theme-color-text-brand-default)"
               },
               "hover": {
-                "value": "var(--eds-theme-color-border-link-brand)"
+                "value": "var(--eds-theme-color-text-brand-default)"
               },
               "focus": {
                 "value": "var(--eds-theme-color-text-neutral-default-inverse)"
               }
             },
             "background": {
               "focus": {
-                "value": "var(--eds-theme-color-border-link-brand)"
+                "value": "var(--eds-theme-color-text-brand-default)"
               }
             }
           },
           "neutral": {
             "text": {
               "@": {
-                "value": "var(--eds-theme-color-text-link-neutral)"
+                "value": "var(--eds-theme-color-text-neutral-strong)"
               },
               "hover": {
-                "value": "var(--eds-theme-color-text-link-brand)"
+                "value": "var(--eds-theme-color-text-brand-default)"
               },
               "focus": {
                 "value": "var(--eds-theme-color-text-neutral-default-inverse)"
               }
             },
             "text-decoration": {
               "@": {
-                "value": "var(--eds-theme-color-border-link-neutral)"
+                "value": "var(--eds-theme-color-text-neutral-strong)"
               },
               "hover": {
-                "value": "var(--eds-theme-color-border-link-brand)"
+                "value": "var(--eds-theme-color-text-brand-default)"
               },
               "focus": {
                 "value": "var(--eds-theme-color-text-neutral-default-inverse)"
               }
             },
             "background": {
               "focus": {
-                "value": "var(--eds-theme-color-border-link-neutral)"
+                "value": "var(--eds-theme-color-text-neutral-default)"
               }
             }
           }

diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css
@@ -438,20 +438,20 @@
   --eds-theme-color-form-background: #FFFFFF;
   --eds-theme-color-form-background-hover: #F4F6F8;
   --eds-theme-color-form-label: #383C43;
-  --eds-theme-color-link-brand-text: var(--eds-theme-color-text-link-neutral);
-  --eds-theme-color-link-brand-text-hover: var(--eds-theme-color-text-link-brand);
+  --eds-theme-color-link-brand-text: var(--eds-theme-color-text-neutral-strong);
+  --eds-theme-color-link-brand-text-hover: var(--eds-theme-color-text-brand-default);
   --eds-theme-color-link-brand-text-focus: var(--eds-theme-color-text-neutral-default-inverse);
-  --eds-theme-color-link-brand-text-decoration: var(--eds-theme-color-border-link-brand);
-  --eds-theme-color-link-brand-text-decoration-hover: var(--eds-theme-color-border-link-brand);
+  --eds-theme-color-link-brand-text-decoration: var(--eds-theme-color-text-brand-default);
+  --eds-theme-color-link-brand-text-decoration-hover: var(--eds-theme-color-text-brand-default);
   --eds-theme-color-link-brand-text-decoration-focus: var(--eds-theme-color-text-neutral-default-inverse);
-  --eds-theme-color-link-brand-background-focus: var(--eds-theme-color-border-link-brand);
-  --eds-theme-color-link-neutral-text: var(--eds-theme-color-text-link-neutral);
-  --eds-theme-color-link-neutral-text-hover: var(--eds-theme-color-text-link-brand);
+  --eds-theme-color-link-brand-background-focus: var(--eds-theme-color-text-brand-default);
+  --eds-theme-color-link-neutral-text: var(--eds-theme-color-text-neutral-strong);
+  --eds-theme-color-link-neutral-text-hover: var(--eds-theme-color-text-brand-default);
   --eds-theme-color-link-neutral-text-focus: var(--eds-theme-color-text-neutral-default-inverse);
-  --eds-theme-color-link-neutral-text-decoration: var(--eds-theme-color-border-link-neutral);
-  --eds-theme-color-link-neutral-text-decoration-hover: var(--eds-theme-color-border-link-brand);
+  --eds-theme-color-link-neutral-text-decoration: var(--eds-theme-color-text-neutral-strong);
+  --eds-theme-color-link-neutral-text-decoration-hover: var(--eds-theme-color-text-brand-default);
   --eds-theme-color-link-neutral-text-decoration-focus: var(--eds-theme-color-text-neutral-default-inverse);
-  --eds-theme-color-link-neutral-background-focus: var(--eds-theme-color-border-link-neutral);
+  --eds-theme-color-link-neutral-background-focus: var(--eds-theme-color-text-neutral-default);
   --eds-theme-color-modal-brand-header-background: #8984E8;
   --eds-theme-color-progress-bar-background: #E7E8EA;
   --eds-theme-color-progress-bar-border: #E7E8EA;

diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json
@@ -800,32 +800,32 @@
         "link": {
           "brand": {
             "text": {
-              "@": "var(--eds-theme-color-text-link-neutral)",
-              "hover": "var(--eds-theme-color-text-link-brand)",
+              "@": "var(--eds-theme-color-text-neutral-strong)",
+              "hover": "var(--eds-theme-color-text-brand-default)",
               "focus": "var(--eds-theme-color-text-neutral-default-inverse)"
             },
             "text-decoration": {
-              "@": "var(--eds-theme-color-border-link-brand)",
-              "hover": "var(--eds-theme-color-border-link-brand)",
+              "@": "var(--eds-theme-color-text-brand-default)",
+              "hover": "var(--eds-theme-color-text-brand-default)",
               "focus": "var(--eds-theme-color-text-neutral-default-inverse)"
             },
             "background": {
-              "focus": "var(--eds-theme-color-border-link-brand)"
+              "focus": "var(--eds-theme-color-text-brand-default)"
             }
           },
           "neutral": {
             "text": {
-              "@": "var(--eds-theme-color-text-link-neutral)",
-              "hover": "var(--eds-theme-color-text-link-brand)",
+              "@": "var(--eds-theme-color-text-neutral-strong)",
+              "hover": "var(--eds-theme-color-text-brand-default)",
               "focus": "var(--eds-theme-color-text-neutral-default-inverse)"
             },
             "text-decoration": {
-              "@": "var(--eds-theme-color-border-link-neutral)",
-              "hover": "var(--eds-theme-color-border-link-brand)",
+              "@": "var(--eds-theme-color-text-neutral-strong)",
+              "hover": "var(--eds-theme-color-text-brand-default)",
               "focus": "var(--eds-theme-color-text-neutral-default-inverse)"
             },
             "background": {
-              "focus": "var(--eds-theme-color-border-link-neutral)"
+              "focus": "var(--eds-theme-color-text-neutral-default)"
             }
           }
         },

diff --git a/src/tokens-dist/ts/colors.ts b/src/tokens-dist/ts/colors.ts
@@ -301,33 +301,33 @@ export const EdsThemeColorFormBackground = '#FFFFFF';
 export const EdsThemeColorFormBackgroundHover = '#F4F6F8';
 export const EdsThemeColorFormLabel = '#383C43';
 export const EdsThemeColorLinkBrandText =
-  'var(--eds-theme-color-text-link-neutral)';
+  'var(--eds-theme-color-text-neutral-strong)';
 export const EdsThemeColorLinkBrandTextHover =
-  'var(--eds-theme-color-text-link-brand)';
+  'var(--eds-theme-color-text-brand-default)';
 export const EdsThemeColorLinkBrandTextFocus =
   'var(--eds-theme-color-text-neutral-default-inverse)';
 export const EdsThemeColorLinkBrandTextDecoration =
-  'var(--eds-theme-color-border-link-brand)';
+  'var(--eds-theme-color-text-brand-default)';
 export const EdsThemeColorLinkBrandTextDecorationHover =
-  'var(--eds-theme-color-border-link-brand)';
+  'var(--eds-theme-color-text-brand-default)';
 export const EdsThemeColorLinkBrandTextDecorationFocus =
   'var(--eds-theme-color-text-neutral-default-inverse)';
 export const EdsThemeColorLinkBrandBackgroundFocus =
-  'var(--eds-theme-color-border-link-brand)';
+  'var(--eds-theme-color-text-brand-default)';
 export const EdsThemeColorLinkNeutralText =
-  'var(--eds-theme-color-text-link-neutral)';
+  'var(--eds-theme-color-text-neutral-strong)';
 export const EdsThemeColorLinkNeutralTextHover =
-  'var(--eds-theme-color-text-link-brand)';
+  'var(--eds-theme-color-text-brand-default)';
 export const EdsThemeColorLinkNeutralTextFocus =
   'var(--eds-theme-color-text-neutral-default-inverse)';
 export const EdsThemeColorLinkNeutralTextDecoration =
-  'var(--eds-theme-color-border-link-neutral)';
+  'var(--eds-theme-color-text-neutral-strong)';
 export const EdsThemeColorLinkNeutralTextDecorationHover =
-  'var(--eds-theme-color-border-link-brand)';
+  'var(--eds-theme-color-text-brand-default)';
 export const EdsThemeColorLinkNeutralTextDecorationFocus =
   'var(--eds-theme-color-text-neutral-default-inverse)';
 export const EdsThemeColorLinkNeutralBackgroundFocus =
-  'var(--eds-theme-color-border-link-neutral)';
+  'var(--eds-theme-color-text-neutral-default)';
 export const EdsThemeColorModalBrandHeaderBackground = '#8984E8';
 export const EdsThemeColorProgressBarBackground = '#E7E8EA';
 export const EdsThemeColorProgressBarBorder = '#E7E8EA';