feat: deprecate color highlight tokens (#1636)

- remove from storybook view - mark as deprecated in code (for later deletion)
chanzuckerberg · May 26, 2023 · 8975315 · 8975315
1 parent a3cda57
commit 8975315
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 22 deletions.
diff --git a/.storybook/components/DesignTokens/Tier1/Colors.jsx b/.storybook/components/DesignTokens/Tier1/Colors.jsx
@@ -23,10 +23,6 @@ export class Tier1Colors extends Component {
         <Section title="Other Colors">
           <ColorList listItems={filterTokens(`eds-color-other`)} />
         </Section>
-
-        <Section title="Highlight Colors">
-          <ColorList listItems={filterTokens(`eds-color-highlight`)} />
-        </Section>
       </div>
     );
   }

diff --git a/src/design-tokens/tier-1-definitions/colors.json b/src/design-tokens/tier-1-definitions/colors.json
@@ -76,12 +76,30 @@
         }
       },
       "highlight": {
-        "100": { "value": "#FF9FEC" },
-        "200": { "value": "#FFBEAA" },
-        "300": { "value": "#FCFF00" },
-        "400": { "value": "#9DFFA4" },
-        "500": { "value": "#00F1FF" },
-        "600": { "value": "#CFC9FF" }
+        "100": {
+          "value": "#FF9FEC",
+          "comment": "@deprecated This token has been deprecated and will be removed in a future EDS release."
+        },
+        "200": {
+          "value": "#FFBEAA",
+          "comment": "@deprecated This token has been deprecated and will be removed in a future EDS release."
+        },
+        "300": {
+          "value": "#FCFF00",
+          "comment": "@deprecated This token has been deprecated and will be removed in a future EDS release."
+        },
+        "400": {
+          "value": "#9DFFA4",
+          "comment": "@deprecated This token has been deprecated and will be removed in a future EDS release."
+        },
+        "500": {
+          "value": "#00F1FF",
+          "comment": "@deprecated This token has been deprecated and will be removed in a future EDS release."
+        },
+        "600": {
+          "value": "#CFC9FF",
+          "comment": "@deprecated This token has been deprecated and will be removed in a future EDS release."
+        }
       },
       "info": {
         "100": {

diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css
@@ -66,12 +66,12 @@
   --eds-color-other-ruby-600: #D41E52;
   --eds-color-other-ruby-700: #BD0044;
   --eds-color-other-ruby-800: #8F0134;
-  --eds-color-highlight-100: #FF9FEC;
-  --eds-color-highlight-200: #FFBEAA;
-  --eds-color-highlight-300: #FCFF00;
-  --eds-color-highlight-400: #9DFFA4;
-  --eds-color-highlight-500: #00F1FF;
-  --eds-color-highlight-600: #CFC9FF;
+  --eds-color-highlight-100: #FF9FEC; /* @deprecated This token has been deprecated and will be removed in a future EDS release. */
+  --eds-color-highlight-200: #FFBEAA; /* @deprecated This token has been deprecated and will be removed in a future EDS release. */
+  --eds-color-highlight-300: #FCFF00; /* @deprecated This token has been deprecated and will be removed in a future EDS release. */
+  --eds-color-highlight-400: #9DFFA4; /* @deprecated This token has been deprecated and will be removed in a future EDS release. */
+  --eds-color-highlight-500: #00F1FF; /* @deprecated This token has been deprecated and will be removed in a future EDS release. */
+  --eds-color-highlight-600: #CFC9FF; /* @deprecated This token has been deprecated and will be removed in a future EDS release. */
   --eds-color-info-100: #F1F9FF; /* legacy token, will be removed */
   --eds-color-info-200: #B0D5FF; /* legacy token, will be removed */
   --eds-color-info-300: #7FB9FD; /* legacy token, will be removed */

diff --git a/src/tokens-dist/ts/colors.ts b/src/tokens-dist/ts/colors.ts
@@ -50,12 +50,12 @@ export const EdsColorOtherRuby500 = '#F1497B';
 export const EdsColorOtherRuby600 = '#D41E52';
 export const EdsColorOtherRuby700 = '#BD0044';
 export const EdsColorOtherRuby800 = '#8F0134';
-export const EdsColorHighlight100 = '#FF9FEC';
-export const EdsColorHighlight200 = '#FFBEAA';
-export const EdsColorHighlight300 = '#FCFF00';
-export const EdsColorHighlight400 = '#9DFFA4';
-export const EdsColorHighlight500 = '#00F1FF';
-export const EdsColorHighlight600 = '#CFC9FF';
+export const EdsColorHighlight100 = '#FF9FEC'; // @deprecated This token has been deprecated and will be removed in a future EDS release.
+export const EdsColorHighlight200 = '#FFBEAA'; // @deprecated This token has been deprecated and will be removed in a future EDS release.
+export const EdsColorHighlight300 = '#FCFF00'; // @deprecated This token has been deprecated and will be removed in a future EDS release.
+export const EdsColorHighlight400 = '#9DFFA4'; // @deprecated This token has been deprecated and will be removed in a future EDS release.
+export const EdsColorHighlight500 = '#00F1FF'; // @deprecated This token has been deprecated and will be removed in a future EDS release.
+export const EdsColorHighlight600 = '#CFC9FF'; // @deprecated This token has been deprecated and will be removed in a future EDS release.
 export const EdsColorInfo100 = '#F1F9FF'; // legacy token, will be removed
 export const EdsColorInfo200 = '#B0D5FF'; // legacy token, will be removed
 export const EdsColorInfo300 = '#7FB9FD'; // legacy token, will be removed