refactor(link)!: remove text-link tokens for link t3 tokens (#1639)

* refactor(link): add background t3 tokens * refactor(link): point t3 tokens to t2 temp * refactor(link)!: point t3 to t1 tokens * refactor!: remove deprecated tokens * fix(tabs): use correct color token * refactor(link): re-remove text-link tokens re-added in rebase * fix(tokens): point tier 3 tokens to relevant tier 2 token values --------- Co-authored-by: Jin Lee <jin.lee@chanzuckerberg.com> Co-authored-by: Andrew Holloway <booc0mtaco@users.noreply.github.com>
chanzuckerberg · Aug 14, 2023 · d35cfe4 · d35cfe4
1 parent 985b5f7
commit d35cfe4
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 92 deletions.
diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
@@ -210,8 +210,6 @@
   "eds-theme-color-background-grade-stop-default": "#D41E52",
   "eds-theme-color-background-grade-stop-subtle": "#FFF0F4",
   "eds-theme-color-background-disabled": "#C0C4C8",
-  "eds-theme-color-border-link-neutral": "#21272D",
-  "eds-theme-color-border-link-brand": "#5751D2",
   "eds-theme-color-border-neutral-subtle": "#E7E8EA",
   "eds-theme-color-border-neutral-subtle-hover": "#C0C4C8",
   "eds-theme-color-border-neutral-default": "#C0C4C8",
@@ -265,8 +263,6 @@
   "eds-theme-color-text-neutral-default-inverse": "#FFFFFF",
   "eds-theme-color-text-neutral-strong": "#21272D",
   "eds-theme-color-text-neutral-subtle": "#5D6369",
-  "eds-theme-color-text-link-neutral": "#21272D",
-  "eds-theme-color-text-link-brand": "#5751D2",
   "eds-theme-color-text-utility-success": "#007249",
   "eds-theme-color-text-utility-warning": "#AC3400",
   "eds-theme-color-text-utility-error": "#BD0044",
@@ -429,20 +425,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/components/Tabs/Tabs.module.css b/src/components/Tabs/Tabs.module.css
@@ -110,7 +110,7 @@
    * Tabs link within active tabs item
    */
   .tabs__item.eds-is-active & {
-    color: var(--eds-theme-color-text-link-brand);
+    color: var(--eds-theme-color-text-brand-default);
     box-shadow: inset 0 calc(var(--eds-border-width-md) * -1) 0 0
       var(--eds-theme-color-border-brand-primary-strong);
   }

diff --git a/src/design-tokens/tier-2-usage/colors-border.json b/src/design-tokens/tier-2-usage/colors-border.json
@@ -3,16 +3,6 @@
     "theme": {
       "color": {
         "border": {
-          "link": {
-            "neutral": {
-              "value": "{eds.color.neutral.800}",
-              "comment": "@deprecated This token is deprecated. Please use eds-theme-color-link-brand-text-decoration-hover, or eds-theme-color-link-neutral-text-decoration-hover instead"
-            },
-            "brand": {
-              "value": "{eds.color.brand.grape.700}",
-              "comment": "@deprecated This token is deprecated. Please use eds-theme-color-link-brand-background-focus, eds-theme-color-link-brand-text-decoration, eds-theme-color-link-brand-text-decoration-hover, or eds-theme-color-link-neutral-text-decoration-hover instead"
-            }
-          },
           "neutral": {
             "subtle": {
               "@": {

diff --git a/src/design-tokens/tier-2-usage/colors-text.json b/src/design-tokens/tier-2-usage/colors-text.json
@@ -19,16 +19,6 @@
               "value": "{eds.color.neutral.600}"
             }
           },
-          "link": {
-            "neutral": {
-              "value": "{eds.color.neutral.800}",
-              "comment": "@deprecated This token is deprecated. Please use eds-theme-color-link-neutral-text-decoration or eds-theme-color-link-neutral-background instead."
-            },
-            "brand": {
-              "value": "{eds.color.brand.grape.700}",
-              "comment": "@deprecated This token is deprecated. Please use eds-theme-color-link-brand-text-hover or eds-theme-color-link-neutral-text-hover instead."
-            }
-          },
           "utility": {
             "success": { "value": "{eds.color.other.mint.700}" },
             "warning": { "value": "{eds.color.other.orange.700}" },

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-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-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
@@ -210,8 +210,6 @@
   --eds-theme-color-background-grade-stop-default: #D41E52;
   --eds-theme-color-background-grade-stop-subtle: #FFF0F4;
   --eds-theme-color-background-disabled: #C0C4C8;
-  --eds-theme-color-border-link-neutral: #21272D; /* @deprecated This token is deprecated. Please use eds-theme-color-link-brand-text-decoration-hover, or eds-theme-color-link-neutral-text-decoration-hover instead */
-  --eds-theme-color-border-link-brand: #5751D2; /* @deprecated This token is deprecated. Please use eds-theme-color-link-brand-background-focus, eds-theme-color-link-brand-text-decoration, eds-theme-color-link-brand-text-decoration-hover, or eds-theme-color-link-neutral-text-decoration-hover instead */
   --eds-theme-color-border-neutral-subtle: #E7E8EA;
   --eds-theme-color-border-neutral-subtle-hover: #C0C4C8;
   --eds-theme-color-border-neutral-default: #C0C4C8;
@@ -265,8 +263,6 @@
   --eds-theme-color-text-neutral-default-inverse: #FFFFFF;
   --eds-theme-color-text-neutral-strong: #21272D;
   --eds-theme-color-text-neutral-subtle: #5D6369;
-  --eds-theme-color-text-link-neutral: #21272D; /* @deprecated This token is deprecated. Please use eds-theme-color-link-neutral-text-decoration or eds-theme-color-link-neutral-background instead. */
-  --eds-theme-color-text-link-brand: #5751D2; /* @deprecated This token is deprecated. Please use eds-theme-color-link-brand-text-hover or eds-theme-color-link-neutral-text-hover instead. */
   --eds-theme-color-text-utility-success: #007249;
   --eds-theme-color-text-utility-warning: #AC3400;
   --eds-theme-color-text-utility-error: #BD0044;
@@ -429,20 +425,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
@@ -354,10 +354,6 @@
           "disabled": "#C0C4C8"
         },
         "border": {
-          "link": {
-            "neutral": "#21272D",
-            "brand": "#5751D2"
-          },
           "neutral": {
             "subtle": {
               "@": "#E7E8EA",
@@ -475,10 +471,6 @@
             "strong": "#21272D",
             "subtle": "#5D6369"
           },
-          "link": {
-            "neutral": "#21272D",
-            "brand": "#5751D2"
-          },
           "utility": {
             "success": "#007249",
             "warning": "#AC3400",
@@ -791,32 +783,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
@@ -70,8 +70,6 @@ export const EdsThemeColorBackgroundGradeReviseSubtle = '#FDF1D0';
 export const EdsThemeColorBackgroundGradeStopDefault = '#D41E52';
 export const EdsThemeColorBackgroundGradeStopSubtle = '#FFF0F4';
 export const EdsThemeColorBackgroundDisabled = '#C0C4C8';
-export const EdsThemeColorBorderLinkNeutral = '#21272D'; // @deprecated This token is deprecated. Please use eds-theme-color-link-brand-text-decoration-hover, or eds-theme-color-link-neutral-text-decoration-hover instead
-export const EdsThemeColorBorderLinkBrand = '#5751D2'; // @deprecated This token is deprecated. Please use eds-theme-color-link-brand-background-focus, eds-theme-color-link-brand-text-decoration, eds-theme-color-link-brand-text-decoration-hover, or eds-theme-color-link-neutral-text-decoration-hover instead
 export const EdsThemeColorBorderNeutralSubtle = '#E7E8EA';
 export const EdsThemeColorBorderNeutralSubtleHover = '#C0C4C8';
 export const EdsThemeColorBorderNeutralDefault = '#C0C4C8';
@@ -126,8 +124,6 @@ export const EdsThemeColorTextNeutralDefault = '#383C43';
 export const EdsThemeColorTextNeutralDefaultInverse = '#FFFFFF';
 export const EdsThemeColorTextNeutralStrong = '#21272D';
 export const EdsThemeColorTextNeutralSubtle = '#5D6369';
-export const EdsThemeColorTextLinkNeutral = '#21272D'; // @deprecated This token is deprecated. Please use eds-theme-color-link-neutral-text-decoration or eds-theme-color-link-neutral-background instead.
-export const EdsThemeColorTextLinkBrand = '#5751D2'; // @deprecated This token is deprecated. Please use eds-theme-color-link-brand-text-hover or eds-theme-color-link-neutral-text-hover instead.
 export const EdsThemeColorTextUtilitySuccess = '#007249';
 export const EdsThemeColorTextUtilityWarning = '#AC3400';
 export const EdsThemeColorTextUtilityError = '#BD0044';
@@ -292,33 +288,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';