feat(tokens): add in additional table tokens (#2035)

- eds-color-blue-025 - eds-theme-color-background-tableRow-stripe-1 - eds-theme-color-background-tableRow-stripe-2 - eds-theme-color-background-tableRow-selected - add in color token stories
chanzuckerberg · Aug 15, 2024 · a698a5b · a698a5b
1 parent df84c87
commit a698a5b
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 16 deletions.
diff --git a/.storybook/components/DesignTokens/Tier2/Colors.stories.tsx b/.storybook/components/DesignTokens/Tier2/Colors.stories.tsx
@@ -54,22 +54,6 @@ export const TextUtility: StoryObj = {
   ),
 };
 
-export const IconUtility: StoryObj = {
-  render: () => (
-    <div>
-      <Section title="Icon Colors (utility)">
-        <ColorList
-          listItems={getListItems({
-            filterTerm: 'eds-theme-color-icon-utility',
-            figmaTokenHeader: 'icon',
-            tailwindClassHeader: 'text-icon-utility',
-          })}
-        />
-      </Section>
-    </div>
-  ),
-};
-
 export const BackgroundUtility: StoryObj = {
   render: () => (
     <div>

diff --git a/.storybook/components/DesignTokens/Tier3/Colors.stories.tsx b/.storybook/components/DesignTokens/Tier3/Colors.stories.tsx
@@ -0,0 +1,72 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+import filterTokens from '../../../util/filterTokens';
+import { ColorList } from '../../ColorList/ColorList';
+import Section from '../../Section';
+
+export default {
+  title: 'Design Tokens/Tier 3: Component/Colors',
+  parameters: {
+    axe: {
+      // For documentation purposes only
+      skip: true,
+    },
+  },
+};
+
+const camelCaseWarning =
+  'NOTE: table tokens have a camelCase suffix for the emphasis (e.g., tableRow)';
+
+const getListItems = ({
+  filterTerm,
+  figmaTokenHeader,
+  tailwindClassHeader,
+}: {
+  filterTerm: string;
+  figmaTokenHeader: string;
+  tailwindClassHeader: string;
+}) =>
+  filterTokens(filterTerm).map(({ name, value }) => {
+    const specifier = name.slice(
+      name.indexOf(filterTerm) + filterTerm.length + 1,
+    );
+    return {
+      name,
+      value,
+      figmaToken: figmaTokenHeader + '/' + specifier,
+      tailwindClass: tailwindClassHeader + '-' + specifier,
+    };
+  });
+
+export const IconUtility: StoryObj = {
+  render: () => (
+    <div>
+      <Section title="Icon Colors (utility)">
+        <ColorList
+          listItems={getListItems({
+            filterTerm: 'eds-theme-color-icon-utility',
+            figmaTokenHeader: 'icon',
+            tailwindClassHeader: 'text-icon-utility',
+          })}
+        />
+      </Section>
+    </div>
+  ),
+};
+
+// TODO: handle name formatting for tableRow tokens in figma and tailwind
+export const BackgroundTable: StoryObj = {
+  render: () => (
+    <div>
+      <Section description={camelCaseWarning} title="Background Colors (Table)">
+        <ColorList
+          listItems={getListItems({
+            filterTerm: 'eds-theme-color-background-table',
+            figmaTokenHeader: 'background',
+            tailwindClassHeader: 'bg-table',
+          })}
+        />
+      </Section>
+    </div>
+  ),
+};
diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
@@ -191,6 +191,9 @@
   "eds-theme-color-background-brand-purple": "#C580E7",
   "eds-theme-color-background-brand-purple-low-emphasis": "#FBF5FD",
   "eds-theme-color-background-brand-pink": "#DB458D",
+  "eds-theme-color-background-table-row-stripe-1": "#F5FAFF",
+  "eds-theme-color-background-table-row-stripe-2": "rgb(var(--eds-color-white) / 1)",
+  "eds-theme-color-background-table-row-selected": "#CEE6FF",
   "eds-theme-color-background-utility-base-1": "rgb(var(--eds-color-white) / 1)",
   "eds-theme-color-background-utility-base-2": "#FDF9F8",
   "eds-theme-color-background-utility-container": "rgb(var(--eds-color-white) / 1)",
@@ -722,6 +725,7 @@
   "eds-color-blue-850": "#0F2163",
   "eds-color-blue-900": "#0A164C",
   "eds-color-blue-950": "#060E30",
+  "eds-color-blue-025": "#F5FAFF",
   "eds-color-blue-050": "#EAF4FF",
   "eds-color-pink-350": "#E67EB0",
   "eds-color-pink-450": "#DB458D",

diff --git a/src/design-tokens/primitives.json b/src/design-tokens/primitives.json
@@ -278,6 +278,7 @@
         "950": { "value": "#05120C", "group": "color" }
       },
       "blue": {
+        "025": { "value": "#F5FAFF", "group": "color" },
         "050": { "value": "#EAF4FF", "group": "color" },
         "100": { "value": "#CEE6FF", "group": "color" },
         "150": { "value": "#B5DAFF", "group": "color" },

diff --git a/src/design-tokens/themes.json b/src/design-tokens/themes.json
@@ -221,6 +221,20 @@
               "value": "{eds.color.pink.450}"
             }
           },
+          "tableRow": {
+            "stripe": {
+              "1": {
+                "value": "{eds.color.blue.025}",
+                "group": "color"
+              },
+              "2": {
+                "value": "{eds.theme.color.background.utility.base.1}"
+              }
+            },
+            "selected": {
+              "value": "{eds.color.blue.100}"
+            }
+          },
           "utility": {
             "base": {
               "1": {

diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css
@@ -98,6 +98,7 @@
   --eds-color-pink-450: #DB458D;
   --eds-color-pink-350: #E67EB0;
   --eds-color-blue-050: #EAF4FF;
+  --eds-color-blue-025: #F5FAFF;
   --eds-color-blue-950: #060E30;
   --eds-color-blue-900: #0A164C;
   --eds-color-blue-850: #0F2163;
@@ -754,6 +755,9 @@
   --eds-theme-color-background-utility-container-active: var(--eds-color-neutral-100);
   --eds-theme-color-background-utility-container-hover: var(--eds-color-neutral-050);
   --eds-theme-color-background-utility-base-2: var(--eds-color-neutral-025);
+  --eds-theme-color-background-table-row-selected: var(--eds-color-blue-100);
+  --eds-theme-color-background-table-row-stripe-2: var(--eds-theme-color-background-utility-base-1);
+  --eds-theme-color-background-table-row-stripe-1: var(--eds-color-blue-025);
   --eds-theme-color-background-brand-pink: var(--eds-color-pink-450);
   --eds-theme-color-background-brand-purple-low-emphasis: var(--eds-color-purple-050);
   --eds-theme-color-background-brand-purple: var(--eds-color-purple-350);

diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json
@@ -395,6 +395,13 @@
             },
             "pink": "#DB458D"
           },
+          "tableRow": {
+            "stripe": {
+              "1": "#F5FAFF",
+              "2": "rgb(var(--eds-color-white) / 1)"
+            },
+            "selected": "#CEE6FF"
+          },
           "utility": {
             "base": {
               "1": "rgb(var(--eds-color-white) / 1)",
@@ -1345,6 +1352,7 @@
         "850": "#0F2163",
         "900": "#0A164C",
         "950": "#060E30",
+        "025": "#F5FAFF",
         "050": "#EAF4FF"
       },
       "pink": {

diff --git a/src/tokens-dist/ts/colors.ts b/src/tokens-dist/ts/colors.ts
@@ -26,6 +26,10 @@ export const EdsThemeColorBackgroundBrandBlueLowEmphasis = '#EAF4FF';
 export const EdsThemeColorBackgroundBrandPurple = '#C580E7';
 export const EdsThemeColorBackgroundBrandPurpleLowEmphasis = '#FBF5FD';
 export const EdsThemeColorBackgroundBrandPink = '#DB458D';
+export const EdsThemeColorBackgroundTableRowStripe1 = '#F5FAFF';
+export const EdsThemeColorBackgroundTableRowStripe2 =
+  'rgb(var(--eds-color-white) / 1)';
+export const EdsThemeColorBackgroundTableRowSelected = '#CEE6FF';
 export const EdsThemeColorBackgroundUtilityBase1 =
   'rgb(var(--eds-color-white) / 1)';
 export const EdsThemeColorBackgroundUtilityBase2 = '#FDF9F8';
@@ -591,6 +595,7 @@ export const EdsColorBlue800 = '#152D76';
 export const EdsColorBlue850 = '#0F2163';
 export const EdsColorBlue900 = '#0A164C';
 export const EdsColorBlue950 = '#060E30';
+export const EdsColorBlue025 = '#F5FAFF';
 export const EdsColorBlue050 = '#EAF4FF';
 export const EdsColorPink350 = '#E67EB0';
 export const EdsColorPink450 = '#DB458D';