fix: disambiguate old token colors (#1913)

- pull in old token values for the v1 components - this avoids the cases where old token names were redefined
chanzuckerberg · Apr 4, 2024 · 758eb2d · 758eb2d
1 parent 4e3b684
commit 758eb2d
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 60 deletions.
diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
@@ -163,14 +163,14 @@
   "eds-theme-form-border-radius": "4px",
   "eds-theme-size-slider-track-height": "0.5rem",
   "eds-theme-size-slider-thumb": "1.5rem",
-  "eds-theme-color-body-background": "#EEE7E4",
+  "eds-theme-color-body-background": "#F4F6F8",
   "eds-theme-color-body-background-inverted": "#383C43",
   "eds-theme-color-background-input": "rgb(var(--eds-color-white) / 1)",
   "eds-theme-color-background-neutral-default": "#FFFFFF",
-  "eds-theme-color-background-neutral-default-hover": "#EEE7E4",
+  "eds-theme-color-background-neutral-default-hover": "#F4F6F8",
   "eds-theme-color-background-neutral-subtle": "#F4F6F8",
-  "eds-theme-color-background-neutral-subtle-hover": "#CFC9C7",
-  "eds-theme-color-background-neutral-medium": "#CFC9C7",
+  "eds-theme-color-background-neutral-subtle-hover": "#E7E8EA",
+  "eds-theme-color-background-neutral-medium": "#E7E8EA",
   "eds-theme-color-background-neutral-medium-hover": "#C0C4C8",
   "eds-theme-color-background-brand-primary-default": "#F0F0FC",
   "eds-theme-color-background-brand-primary-subtle": "#F0F0FC",
@@ -241,7 +241,7 @@
   "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-neutral-subtle": "#CFC9C7",
+  "eds-theme-color-border-neutral-subtle": "#E7E8EA",
   "eds-theme-color-border-neutral-subtle-hover": "#C0C4C8",
   "eds-theme-color-border-neutral-default": "#C0C4C8",
   "eds-theme-color-border-neutral-default-hover": "#999EA3",
@@ -325,7 +325,7 @@
   "eds-theme-color-button-secondary-brand-icon-hover": "#FFFFFF",
   "eds-theme-color-button-secondary-brand-icon-active": "#FFFFFF",
   "eds-theme-color-button-secondary-neutral-background": "rgba(0, 0, 0, 0)",
-  "eds-theme-color-button-secondary-neutral-background-hover": "#CFC9C7",
+  "eds-theme-color-button-secondary-neutral-background-hover": "#E7E8EA",
   "eds-theme-color-button-secondary-neutral-background-active": "#383C43",
   "eds-theme-color-button-secondary-neutral-border": "#5D6369",
   "eds-theme-color-button-secondary-neutral-border-hover": "#5D6369",
@@ -388,10 +388,10 @@
   "eds-theme-color-button-icon-neutral-hover": "#5D6369",
   "eds-theme-color-button-icon-neutral-active": "#FFFFFF",
   "eds-theme-color-button-icon-neutral-background": "rgba(0, 0, 0, 0)",
-  "eds-theme-color-button-icon-neutral-background-hover": "#CFC9C7",
+  "eds-theme-color-button-icon-neutral-background-hover": "#E7E8EA",
   "eds-theme-color-button-icon-neutral-background-active": "#5D6369",
   "eds-theme-color-button-icon-neutral-border": "rgba(0, 0, 0, 0)",
-  "eds-theme-color-button-icon-neutral-border-hover": "#CFC9C7",
+  "eds-theme-color-button-icon-neutral-border-hover": "#E7E8EA",
   "eds-theme-color-button-icon-neutral-border-active": "#5D6369",
   "eds-theme-color-button-icon-neutral-text": "#5D6369",
   "eds-theme-color-button-icon-neutral-text-hover": "#5D6369",
@@ -433,14 +433,14 @@
   "eds-theme-color-button-icon-error-text-hover": "#BD0044",
   "eds-theme-color-button-icon-error-text-active": "#FFFFFF",
   "eds-theme-color-checkbox-brand-background": "#8984E8",
-  "eds-theme-color-data-bar-background": "#EEE7E4",
+  "eds-theme-color-data-bar-background": "#F4F6F8",
   "eds-theme-color-data-bar-border": "#C0C4C8",
   "eds-theme-color-focus-ring": "#6B65E2",
   "eds-theme-color-focus-ring-inverted": "#FFFFFF",
   "eds-theme-color-form-border": "#878C90",
   "eds-theme-color-form-border-hover": "#333231",
   "eds-theme-color-form-background": "#FFFFFF",
-  "eds-theme-color-form-background-hover": "#EEE7E4",
+  "eds-theme-color-form-background-hover": "#F4F6F8",
   "eds-theme-color-form-label": "#383C43",
   "eds-theme-color-icon-neutral-default": "#5D6369",
   "eds-theme-color-icon-neutral-default-inverse": "#FFFFFF",
@@ -481,8 +481,8 @@
   "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-text-neutral-default)",
   "eds-theme-color-modal-brand-header-background": "#8984E8",
-  "eds-theme-color-progress-bar-background": "#CFC9C7",
-  "eds-theme-color-progress-bar-border": "#CFC9C7",
+  "eds-theme-color-progress-bar-background": "#E7E8EA",
+  "eds-theme-color-progress-bar-border": "#E7E8EA",
   "eds-theme-color-radio-brand-background": "#8984E8",
   "eds-theme-color-text-neutral-default": "#383C43",
   "eds-theme-color-text-neutral-default-inverse": "#FFFFFF",

diff --git a/src/design-tokens/themes.json b/src/design-tokens/themes.json
@@ -78,7 +78,7 @@
         "body": {
           "background": {
             "@": {
-              "value": "{eds.color.neutral.100}",
+              "value": "#F4F6F8",
               "group": "color"
             },
             "inverted": {
@@ -98,7 +98,7 @@
                 "group": "color"
               },
               "hover": {
-                "value": "{eds.color.neutral.100}",
+                "value": "#F4F6F8",
                 "group": "color"
               }
             },
@@ -109,13 +109,13 @@
                 "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
               },
               "hover": {
-                "value": "{eds.color.neutral.200}",
+                "value": "#E7E8EA",
                 "group": "color"
               }
             },
             "medium": {
               "@": {
-                "value": "{eds.color.neutral.200}",
+                "value": "#E7E8EA",
                 "group": "color"
               },
               "hover": {
@@ -427,7 +427,7 @@
           "neutral": {
             "subtle": {
               "@": {
-                "value": "{eds.color.neutral.200}",
+                "value": "#E7E8EA",
                 "group": "color"
               },
               "hover": {
@@ -821,7 +821,7 @@
                   "group": "color"
                 },
                 "hover": {
-                  "value": "{eds.color.neutral.200}",
+                  "value": "#E7E8EA",
                   "group": "color"
                 },
                 "active": {
@@ -1123,7 +1123,7 @@
                   "group": "color"
                 },
                 "hover": {
-                  "value": "{eds.color.neutral.200}",
+                  "value": "#E7E8EA",
                   "group": "color"
                 },
                 "active": {
@@ -1137,7 +1137,7 @@
                   "group": "color"
                 },
                 "hover": {
-                  "value": "{eds.color.neutral.200}",
+                  "value": "#E7E8EA",
                   "group": "color"
                 },
                 "active": {
@@ -1342,7 +1342,7 @@
         },
         "data-bar": {
           "background": {
-            "value": "{eds.color.neutral.100}",
+            "value": "#F4F6F8",
             "group": "color",
             "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS."
           },
@@ -1379,7 +1379,7 @@
               "group": "color"
             },
             "hover": {
-              "value": "{eds.color.neutral.100}",
+              "value": "#F4F6F8",
               "group": "color"
             }
           },
@@ -1612,10 +1612,10 @@
         },
         "progress-bar": {
           "background": {
-            "value": "{eds.color.neutral.200}"
+            "value": "#E7E8EA"
           },
           "border": {
-            "value": "{eds.color.neutral.200}"
+            "value": "#E7E8EA"
           }
         },
         "radio": {

diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css
@@ -226,6 +226,8 @@
   --eds-theme-color-text-brand-default: var(--eds-theme-color-text-brand-primary);
   --eds-theme-color-text-utility-inverse-disabled: rgb(var(--eds-color-white) / 0.5);
   --eds-theme-color-text-utility-inverse: rgb(var(--eds-color-white) / 1);
+  --eds-theme-color-progress-bar-border: #E7E8EA;
+  --eds-theme-color-progress-bar-background: #E7E8EA;
   --eds-theme-color-link-neutral-background-focus: var(--eds-theme-color-text-neutral-default);
   --eds-theme-color-link-neutral-text-decoration-focus: var(--eds-theme-color-text-neutral-default-inverse);
   --eds-theme-color-link-neutral-text-decoration-hover: var(--eds-theme-color-text-brand-default);
@@ -240,9 +242,15 @@
   --eds-theme-color-link-brand-text-focus: var(--eds-theme-color-text-neutral-default-inverse);
   --eds-theme-color-link-brand-text-hover: var(--eds-theme-color-text-brand-default);
   --eds-theme-color-link-brand-text: var(--eds-theme-color-text-neutral-strong);
+  --eds-theme-color-form-background-hover: #F4F6F8;
+  --eds-theme-color-data-bar-background: #F4F6F8; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-button-icon-neutral-border-hover: #E7E8EA;
+  --eds-theme-color-button-icon-neutral-background-hover: #E7E8EA;
+  --eds-theme-color-button-secondary-neutral-background-hover: #E7E8EA;
   --eds-theme-color-border-utility-inverse-disabled: rgb(var(--eds-color-white) / 0.5);
   --eds-theme-color-border-utility-inverse: rgb(var(--eds-color-white) / 1);
   --eds-theme-color-border-brand-primary-default: var(--eds-theme-color-border-brand-primary);
+  --eds-theme-color-border-neutral-subtle: #E7E8EA;
   --eds-theme-color-background-utility-inverse-disabled: rgb(var(--eds-color-white) / 0.5);
   --eds-theme-color-background-utility-inverse-high-emphasis: rgb(var(--eds-color-white) / 1);
   --eds-theme-color-background-utility-inverse-no-emphasis-active: rgb(var(--eds-color-white) / 0.3);
@@ -254,8 +262,12 @@
   --eds-theme-color-background-utility-default-no-emphasis: transparent;
   --eds-theme-color-background-utility-container: rgb(var(--eds-color-white) / 1);
   --eds-theme-color-background-utility-base-0: rgb(var(--eds-color-white) / 1);
+  --eds-theme-color-background-neutral-medium: #E7E8EA;
+  --eds-theme-color-background-neutral-subtle-hover: #E7E8EA;
   --eds-theme-color-background-neutral-subtle: #F4F6F8; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
+  --eds-theme-color-background-neutral-default-hover: #F4F6F8;
   --eds-theme-color-background-input: rgb(var(--eds-color-white) / 1);
+  --eds-theme-color-body-background: #F4F6F8;
   --eds-theme-typography-tag: var(--eds-typography-preset-009);
   --eds-theme-typography-tab-sm-active: var(--eds-typography-preset-009);
   --eds-theme-typography-tab-sm: var(--eds-typography-preset-008-light);
@@ -447,8 +459,6 @@
   --eds-theme-color-text-neutral-default-inverse: var(--eds-color-neutral-white);
   --eds-theme-color-text-neutral-default: var(--eds-color-neutral-700);
   --eds-theme-color-radio-brand-background: var(--eds-color-brand-grape-500);
-  --eds-theme-color-progress-bar-border: var(--eds-color-neutral-200);
-  --eds-theme-color-progress-bar-background: var(--eds-color-neutral-200);
   --eds-theme-color-modal-brand-header-background: var(--eds-color-brand-grape-500);
   --eds-theme-color-icon-disabled: var(--eds-color-neutral-300);
   --eds-theme-color-icon-grade-stop-hover: var(--eds-color-other-ruby-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
@@ -475,14 +485,12 @@
   --eds-theme-color-icon-neutral-default-inverse: var(--eds-color-neutral-white);
   --eds-theme-color-icon-neutral-default: var(--eds-color-neutral-600);
   --eds-theme-color-form-label: var(--eds-color-neutral-700);
-  --eds-theme-color-form-background-hover: var(--eds-color-neutral-100);
   --eds-theme-color-form-background: var(--eds-color-neutral-white);
   --eds-theme-color-form-border-hover: var(--eds-color-neutral-800);
   --eds-theme-color-form-border: var(--eds-color-neutral-500);
   --eds-theme-color-focus-ring-inverted: var(--eds-color-neutral-white);
   --eds-theme-color-focus-ring: var(--eds-color-brand-grape-600);
   --eds-theme-color-data-bar-border: var(--eds-color-neutral-300); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
-  --eds-theme-color-data-bar-background: var(--eds-color-neutral-100); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-checkbox-brand-background: var(--eds-color-brand-grape-500);
   --eds-theme-color-button-icon-error-text-active: var(--eds-color-neutral-white);
   --eds-theme-color-button-icon-error-text-hover: var(--eds-color-other-ruby-700);
@@ -524,10 +532,8 @@
   --eds-theme-color-button-icon-neutral-text-hover: var(--eds-color-neutral-600);
   --eds-theme-color-button-icon-neutral-text: var(--eds-color-neutral-600);
   --eds-theme-color-button-icon-neutral-border-active: var(--eds-color-neutral-600);
-  --eds-theme-color-button-icon-neutral-border-hover: var(--eds-color-neutral-200);
   --eds-theme-color-button-icon-neutral-border: var(--eds-theme-color-transparent-black-0);
   --eds-theme-color-button-icon-neutral-background-active: var(--eds-color-neutral-600);
-  --eds-theme-color-button-icon-neutral-background-hover: var(--eds-color-neutral-200);
   --eds-theme-color-button-icon-neutral-background: var(--eds-theme-color-transparent-black-0);
   --eds-theme-color-button-icon-neutral-active: var(--eds-color-neutral-white);
   --eds-theme-color-button-icon-neutral-hover: var(--eds-color-neutral-600);
@@ -590,7 +596,6 @@
   --eds-theme-color-button-secondary-neutral-border-hover: var(--eds-color-neutral-600);
   --eds-theme-color-button-secondary-neutral-border: var(--eds-color-neutral-600);
   --eds-theme-color-button-secondary-neutral-background-active: var(--eds-color-neutral-700);
-  --eds-theme-color-button-secondary-neutral-background-hover: var(--eds-color-neutral-200);
   --eds-theme-color-button-secondary-neutral-background: var(--eds-theme-color-transparent-black-0);
   --eds-theme-color-button-secondary-brand-icon-active: var(--eds-color-neutral-white);
   --eds-theme-color-button-secondary-brand-icon-hover: var(--eds-color-neutral-white);
@@ -671,7 +676,6 @@
   --eds-theme-color-border-neutral-default-hover: var(--eds-color-neutral-400);
   --eds-theme-color-border-neutral-default: var(--eds-color-neutral-300);
   --eds-theme-color-border-neutral-subtle-hover: var(--eds-color-neutral-300);
-  --eds-theme-color-border-neutral-subtle: var(--eds-color-neutral-200);
   --eds-theme-color-background-disabled: var(--eds-color-neutral-300);
   --eds-theme-color-background-grade-stop-subtle: var(--eds-color-other-ruby-100); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
   --eds-theme-color-background-grade-stop-default: var(--eds-color-other-ruby-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */
@@ -731,12 +735,8 @@
   --eds-theme-color-background-brand-primary-subtle: var(--eds-color-brand-grape-100);
   --eds-theme-color-background-brand-primary-default: var(--eds-color-brand-grape-100);
   --eds-theme-color-background-neutral-medium-hover: var(--eds-color-neutral-300);
-  --eds-theme-color-background-neutral-medium: var(--eds-color-neutral-200);
-  --eds-theme-color-background-neutral-subtle-hover: var(--eds-color-neutral-200);
-  --eds-theme-color-background-neutral-default-hover: var(--eds-color-neutral-100);
   --eds-theme-color-background-neutral-default: var(--eds-color-neutral-white);
   --eds-theme-color-body-background-inverted: var(--eds-color-neutral-700);
-  --eds-theme-color-body-background: var(--eds-color-neutral-100);
   --eds-theme-size-slider-thumb: var(--eds-size-3);
   --eds-theme-size-slider-track-height: var(--eds-size-1);
   --eds-theme-form-border-radius: var(--eds-border-radius-md);

diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json
@@ -332,7 +332,7 @@
       "color": {
         "body": {
           "background": {
-            "@": "#EEE7E4",
+            "@": "#F4F6F8",
             "inverted": "#383C43"
           }
         },
@@ -341,14 +341,14 @@
           "neutral": {
             "default": {
               "@": "#FFFFFF",
-              "hover": "#EEE7E4"
+              "hover": "#F4F6F8"
             },
             "subtle": {
               "@": "#F4F6F8",
-              "hover": "#CFC9C7"
+              "hover": "#E7E8EA"
             },
             "medium": {
-              "@": "#CFC9C7",
+              "@": "#E7E8EA",
               "hover": "#C0C4C8"
             }
           },
@@ -493,7 +493,7 @@
         "border": {
           "neutral": {
             "subtle": {
-              "@": "#CFC9C7",
+              "@": "#E7E8EA",
               "hover": "#C0C4C8"
             },
             "default": {
@@ -650,7 +650,7 @@
             "neutral": {
               "background": {
                 "@": "rgba(0, 0, 0, 0)",
-                "hover": "#CFC9C7",
+                "hover": "#E7E8EA",
                 "active": "#383C43"
               },
               "border": {
@@ -763,12 +763,12 @@
               "active": "#FFFFFF",
               "background": {
                 "@": "rgba(0, 0, 0, 0)",
-                "hover": "#CFC9C7",
+                "hover": "#E7E8EA",
                 "active": "#5D6369"
               },
               "border": {
                 "@": "rgba(0, 0, 0, 0)",
-                "hover": "#CFC9C7",
+                "hover": "#E7E8EA",
                 "active": "#5D6369"
               },
               "text": {
@@ -847,7 +847,7 @@
           }
         },
         "data-bar": {
-          "background": "#EEE7E4",
+          "background": "#F4F6F8",
           "border": "#C0C4C8"
         },
         "focus-ring": {
@@ -861,7 +861,7 @@
           },
           "background": {
             "@": "#FFFFFF",
-            "hover": "#EEE7E4"
+            "hover": "#F4F6F8"
           },
           "label": "#383C43"
         },
@@ -965,8 +965,8 @@
           }
         },
         "progress-bar": {
-          "background": "#CFC9C7",
-          "border": "#CFC9C7"
+          "background": "#E7E8EA",
+          "border": "#E7E8EA"
         },
         "radio": {
           "brand": {