From 02dbb29e6b7971960edffd0bf38151006aa27048 Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Mon, 22 Jan 2024 16:19:37 -0800
Subject: [PATCH] feat: adding css and js token stories, scripts and css data

---
 docs/BrandColors.mdx                          |   2 +-
 docs/BrandColors.stories.tsx                  |  28 +-
 docs/ThemeColors.mdx                          |   4 +-
 docs/ThemeColors.stories.tsx                  | 137 +++++++++-
 .../ColorSwatch/ColorSwatch.stories.tsx       |  23 ++
 docs/components/ColorSwatch/ColorSwatch.tsx   |   1 +
 .../ColorSwatchGroup.stories.tsx              |  36 +++
 docs/components/Text/Text.stories.tsx         |   2 +-
 docs/data/brandColors.json                    | 258 ++++++++++++++++++
 docs/data/darkTheme.json                      | 210 ++++++++++++++
 docs/data/lightTheme.json                     | 242 ++++++++++++++++
 package.json                                  |   1 +
 scripts/extractCssColors.js                   |  59 ++++
 13 files changed, 990 insertions(+), 13 deletions(-)
 create mode 100644 docs/components/ColorSwatch/ColorSwatch.stories.tsx
 create mode 100644 docs/components/ColorSwatchGroup/ColorSwatchGroup.stories.tsx
 create mode 100644 docs/data/brandColors.json
 create mode 100644 docs/data/darkTheme.json
 create mode 100644 docs/data/lightTheme.json
 create mode 100644 scripts/extractCssColors.js

diff --git a/docs/BrandColors.mdx b/docs/BrandColors.mdx
index eb64f52a..4641a38a 100644
--- a/docs/BrandColors.mdx
+++ b/docs/BrandColors.mdx
@@ -17,7 +17,7 @@ _The majority of our brand color progressions were generated using the [0to255](
 
 ## Brand colors
 
-<Canvas of={BrandColorStories.DefaultStory} />
+<Canvas of={BrandColorStories.Figma} />
 
 ## Best Practices
 
diff --git a/docs/BrandColors.stories.tsx b/docs/BrandColors.stories.tsx
index 7c5a8ee2..80d5eb06 100644
--- a/docs/BrandColors.stories.tsx
+++ b/docs/BrandColors.stories.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+
 import tokens from '../src/figma/tokens.json';
-import { ColorSwatchGroup } from './components';
+import brandColors from './data/brandColors.json';
+import { ColorSwatchGroup, ColorSwatch, Text } from './components';
+
 import README from './BrandColors.mdx';
 
 const meta: Meta<typeof ColorSwatchGroup> = {
@@ -18,7 +21,26 @@ export default meta;
 
 type Story = StoryObj<typeof ColorSwatchGroup>;
 
-export const DefaultStory: Story = {
+export const Figma: Story = {
   render: () => <ColorSwatchGroup swatchData={tokens.global.brandColors} />,
-  name: 'Default',
+};
+
+export const CSS: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gap: '16px',
+        gridTemplateColumns: 'repeat(auto-fill, 300px)',
+      }}
+    >
+      {Object.values(brandColors).map(({ color, name }) => (
+        <ColorSwatch key={name} color={color} name={name} />
+      ))}
+    </div>
+  ),
+};
+
+export const JS: Story = {
+  render: () => <h1>Coming soon</h1>,
 };
diff --git a/docs/ThemeColors.mdx b/docs/ThemeColors.mdx
index 5da45b2e..e42830f2 100644
--- a/docs/ThemeColors.mdx
+++ b/docs/ThemeColors.mdx
@@ -16,13 +16,13 @@ For most use cases, these function-based color tokens should be your first choic
 
 The light theme colors are designed to be used in the styles for MetaMask UI when the light theme is active
 
-<Canvas of={ThemeColorStories.LightThemeColors} />
+<Canvas of={ThemeColorStories.FigmaLightTheme} />
 
 ## Dark theme colors
 
 The dark theme colors are designed for MetaMask UI when the dark theme is active. They have the same names as the light theme colors but different values. If you are using the light theme colors for their intended purpose, your UI will automatically be compatible with the dark theme.
 
-<Canvas of={ThemeColorStories.DarkThemeColors} />
+<Canvas of={ThemeColorStories.FigmaDarkTheme} />
 
 ## Best practices
 
diff --git a/docs/ThemeColors.stories.tsx b/docs/ThemeColors.stories.tsx
index 6e94fc8b..1a1c840c 100644
--- a/docs/ThemeColors.stories.tsx
+++ b/docs/ThemeColors.stories.tsx
@@ -1,8 +1,16 @@
 import React from 'react';
-import tokens from '../src/figma/tokens.json';
-import { ColorSwatchGroup } from './components';
+
+import { ColorSwatchGroup, ColorSwatch } from './components';
 import README from './ThemeColors.mdx';
 
+// Figma
+import tokens from '../src/figma/tokens.json';
+// JS
+import { lightTheme, darkTheme } from '../src';
+// CSS
+import lightThemeCss from './data/lightTheme.json';
+import darkThemeCss from './data/darkTheme.json';
+
 export default {
   title: 'Colors/Theme Colors',
   component: ColorSwatchGroup,
@@ -13,8 +21,8 @@ export default {
   },
 };
 
-export const LightThemeColors = {
-  render: () => <ColorSwatchGroup {...LightThemeColors.args} />,
+export const FigmaLightTheme = {
+  render: () => <ColorSwatchGroup {...FigmaLightTheme.args} />,
   args: {
     swatchData: tokens.light.colors,
     borderColor: tokens.light.colors.border.muted.value,
@@ -23,7 +31,7 @@ export const LightThemeColors = {
   },
 };
 
-export const DarkThemeColors = {
+export const FigmaDarkTheme = {
   render: () => (
     <div
       style={{
@@ -32,7 +40,7 @@ export const DarkThemeColors = {
         padding: '1rem',
       }}
     >
-      <ColorSwatchGroup {...DarkThemeColors.args} />
+      <ColorSwatchGroup {...FigmaDarkTheme.args} />
     </div>
   ),
   args: {
@@ -50,3 +58,120 @@ export const DarkThemeColors = {
     },
   },
 };
+
+export const CSSLightTheme = {
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gap: '16px',
+        gridTemplateColumns: 'repeat(auto-fill, 300px)',
+      }}
+    >
+      {Object.entries(lightThemeCss).map(
+        ([name, { color, name: colorName }]) => (
+          <ColorSwatch key={name} color={color} name={colorName} />
+        ),
+      )}
+    </div>
+  ),
+};
+
+export const CSSDarkTheme = {
+  render: () => (
+    <div
+      style={{
+        backgroundColor: darkTheme.colors.background.default,
+        margin: '-1rem',
+        padding: '1rem',
+      }}
+      data-theme="dark"
+    >
+      <div
+        style={{
+          display: 'grid',
+          gap: '16px',
+          gridTemplateColumns: 'repeat(auto-fill, 300px)',
+        }}
+      >
+        {Object.entries(darkThemeCss).map(
+          ([name, { color, name: colorName }]) => (
+            <ColorSwatch
+              key={name}
+              color={color}
+              name={colorName}
+              borderColor="var(--color-border-muted)"
+              textBackgroundColor="var(--color-background-default)"
+              textColor="var(--color-text-default)"
+            />
+          ),
+        )}
+      </div>
+    </div>
+  ),
+  backgrounds: {
+    default: 'dark',
+    values: [{ name: 'dark', value: darkTheme.colors.background.default }],
+  },
+};
+
+export const JSLightTheme = {
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gap: '16px',
+        gridTemplateColumns: 'repeat(auto-fill, 300px)',
+      }}
+    >
+      {Object.entries(lightTheme.colors).flatMap(([category, colorObj]) =>
+        Object.entries(colorObj).map(([name, color]) => (
+          <ColorSwatch
+            key={`${category}-${name}`}
+            color={color}
+            name={`color.${category}.${name}`}
+          />
+        )),
+      )}
+    </div>
+  ),
+};
+
+export const JSDarkTheme = {
+  render: () => (
+    <div
+      style={{
+        backgroundColor: darkTheme.colors.background.default,
+        margin: '-1rem',
+        padding: '1rem',
+      }}
+    >
+      <div
+        style={{
+          display: 'grid',
+          gap: '16px',
+          gridTemplateColumns: 'repeat(auto-fill, 300px)',
+        }}
+      >
+        {Object.entries(darkTheme.colors).flatMap(([category, colorObj]) =>
+          Object.entries(colorObj).map(([name, color]) => (
+            <ColorSwatch
+              key={`${category}-${name}`}
+              color={color}
+              name={`color.${category}.${name}`}
+              borderColor={darkTheme.colors.border.muted}
+              textBackgroundColor={darkTheme.colors.background.default}
+              textColor={darkTheme.colors.text.default}
+            />
+          )),
+        )}
+      </div>
+    </div>
+  ),
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [{ name: 'dark', value: darkTheme.colors.background.default }],
+    },
+  },
+};
diff --git a/docs/components/ColorSwatch/ColorSwatch.stories.tsx b/docs/components/ColorSwatch/ColorSwatch.stories.tsx
new file mode 100644
index 00000000..67a50c65
--- /dev/null
+++ b/docs/components/ColorSwatch/ColorSwatch.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ColorSwatch } from './ColorSwatch';
+
+const meta: Meta<typeof ColorSwatch> = {
+  title: 'Documentation Components/ColorSwatch',
+  component: ColorSwatch,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ColorSwatch>;
+
+export const Default: Story = {
+  render: () => (
+    <ColorSwatch
+      color="#007bff"
+      borderColor="#ced4da"
+      textBackgroundColor="#f8f9fa"
+      textColor="#212529"
+      name="Primary Default"
+    />
+  ),
+};
diff --git a/docs/components/ColorSwatch/ColorSwatch.tsx b/docs/components/ColorSwatch/ColorSwatch.tsx
index ac1f52fb..a190a368 100644
--- a/docs/components/ColorSwatch/ColorSwatch.tsx
+++ b/docs/components/ColorSwatch/ColorSwatch.tsx
@@ -49,6 +49,7 @@ export const ColorSwatch: FunctionComponent<ColorSwatchProps> = ({
           backgroundColor: textBackgroundColor,
           padding: 8,
           borderRadius: '0 0 8px 8px',
+          color: textColor,
         }}
       >
         <strong style={{ display: 'block', marginBottom: '8px' }}>
diff --git a/docs/components/ColorSwatchGroup/ColorSwatchGroup.stories.tsx b/docs/components/ColorSwatchGroup/ColorSwatchGroup.stories.tsx
new file mode 100644
index 00000000..ea714957
--- /dev/null
+++ b/docs/components/ColorSwatchGroup/ColorSwatchGroup.stories.tsx
@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ColorSwatchGroup } from './ColorSwatchGroup';
+
+const meta: Meta<typeof ColorSwatchGroup> = {
+  title: 'Documentation Components/ColorSwatchGroup',
+  component: ColorSwatchGroup,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ColorSwatchGroup>;
+
+export const Default: Story = {
+  render: () => (
+    <ColorSwatchGroup
+      swatchData={{
+        white: {
+          white000: {
+            value: '#FFFFFF',
+            description: '(HEX: #FFFFFF)',
+            type: 'color',
+          },
+          white010: {
+            value: '#FCFCFC',
+            description: '(HEX: #FCFCFC)',
+            type: 'color',
+          },
+        },
+      }}
+      borderColor="#ced4da"
+      textBackgroundColor="#f8f9fa"
+      textColor="#212529"
+      name="Color Swatch Group"
+    />
+  ),
+};
diff --git a/docs/components/Text/Text.stories.tsx b/docs/components/Text/Text.stories.tsx
index e0dd6cbb..b4ae5cd6 100644
--- a/docs/components/Text/Text.stories.tsx
+++ b/docs/components/Text/Text.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { Text } from '.';
 
 export default {
-  title: 'Doc components/Text',
+  title: 'Documentation Components/Text',
   argTypes: {
     children: {
       control: 'text',
diff --git a/docs/data/brandColors.json b/docs/data/brandColors.json
new file mode 100644
index 00000000..06471195
--- /dev/null
+++ b/docs/data/brandColors.json
@@ -0,0 +1,258 @@
+{
+  "white-white000": {
+    "color": "#ffffff",
+    "name": "var(--brand-colors-white-white000)"
+  },
+  "white-white010": {
+    "color": "#fcfcfc",
+    "name": "var(--brand-colors-white-white010)"
+  },
+  "black-black000": {
+    "color": "#000000",
+    "name": "var(--brand-colors-black-black000)"
+  },
+  "grey-grey030": {
+    "color": "#fafbfc",
+    "name": "var(--brand-colors-grey-grey030)"
+  },
+  "grey-grey040": {
+    "color": "#f2f4f6",
+    "name": "var(--brand-colors-grey-grey040)"
+  },
+  "grey-grey100": {
+    "color": "#d6d9dc",
+    "name": "var(--brand-colors-grey-grey100)"
+  },
+  "grey-grey200": {
+    "color": "#bbc0c5",
+    "name": "var(--brand-colors-grey-grey200)"
+  },
+  "grey-grey300": {
+    "color": "#9fa6ae",
+    "name": "var(--brand-colors-grey-grey300)"
+  },
+  "grey-grey400": {
+    "color": "#848c96",
+    "name": "var(--brand-colors-grey-grey400)"
+  },
+  "grey-grey500": {
+    "color": "#6a737d",
+    "name": "var(--brand-colors-grey-grey500)"
+  },
+  "grey-grey600": {
+    "color": "#535a61",
+    "name": "var(--brand-colors-grey-grey600)"
+  },
+  "grey-grey700": {
+    "color": "#3b4046",
+    "name": "var(--brand-colors-grey-grey700)"
+  },
+  "grey-grey750": {
+    "color": "#2e3339",
+    "name": "var(--brand-colors-grey-grey750)"
+  },
+  "grey-grey800": {
+    "color": "#24272a",
+    "name": "var(--brand-colors-grey-grey800)"
+  },
+  "grey-grey900": {
+    "color": "#141618",
+    "name": "var(--brand-colors-grey-grey900)"
+  },
+  "blue-blue000": {
+    "color": "#eaf6ff",
+    "name": "var(--brand-colors-blue-blue000)"
+  },
+  "blue-blue100": {
+    "color": "#a7d9fe",
+    "name": "var(--brand-colors-blue-blue100)"
+  },
+  "blue-blue200": {
+    "color": "#75c4fd",
+    "name": "var(--brand-colors-blue-blue200)"
+  },
+  "blue-blue300": {
+    "color": "#43aefc",
+    "name": "var(--brand-colors-blue-blue300)"
+  },
+  "blue-blue400": {
+    "color": "#1098fc",
+    "name": "var(--brand-colors-blue-blue400)"
+  },
+  "blue-blue500": {
+    "color": "#0376c9",
+    "name": "var(--brand-colors-blue-blue500)"
+  },
+  "blue-blue600": {
+    "color": "#0260a4",
+    "name": "var(--brand-colors-blue-blue600)"
+  },
+  "blue-blue700": {
+    "color": "#024272",
+    "name": "var(--brand-colors-blue-blue700)"
+  },
+  "blue-blue800": {
+    "color": "#01253f",
+    "name": "var(--brand-colors-blue-blue800)"
+  },
+  "blue-blue900": {
+    "color": "#00080d",
+    "name": "var(--brand-colors-blue-blue900)"
+  },
+  "orange-orange000": {
+    "color": "#fef5ef",
+    "name": "var(--brand-colors-orange-orange000)"
+  },
+  "orange-orange100": {
+    "color": "#fde2cf",
+    "name": "var(--brand-colors-orange-orange100)"
+  },
+  "orange-orange200": {
+    "color": "#fbc49d",
+    "name": "var(--brand-colors-orange-orange200)"
+  },
+  "orange-orange300": {
+    "color": "#faa66c",
+    "name": "var(--brand-colors-orange-orange300)"
+  },
+  "orange-orange400": {
+    "color": "#f8883b",
+    "name": "var(--brand-colors-orange-orange400)"
+  },
+  "orange-orange500": {
+    "color": "#f66a0a",
+    "name": "var(--brand-colors-orange-orange500)"
+  },
+  "orange-orange600": {
+    "color": "#c65507",
+    "name": "var(--brand-colors-orange-orange600)"
+  },
+  "orange-orange700": {
+    "color": "#954005",
+    "name": "var(--brand-colors-orange-orange700)"
+  },
+  "orange-orange800": {
+    "color": "#632b04",
+    "name": "var(--brand-colors-orange-orange800)"
+  },
+  "orange-orange900": {
+    "color": "#321602",
+    "name": "var(--brand-colors-orange-orange900)"
+  },
+  "green-green000": {
+    "color": "#f3fcf5",
+    "name": "var(--brand-colors-green-green000)"
+  },
+  "green-green100": {
+    "color": "#d6ffdf",
+    "name": "var(--brand-colors-green-green100)"
+  },
+  "green-green200": {
+    "color": "#afecbd",
+    "name": "var(--brand-colors-green-green200)"
+  },
+  "green-green300": {
+    "color": "#86e29b",
+    "name": "var(--brand-colors-green-green300)"
+  },
+  "green-green400": {
+    "color": "#5dd879",
+    "name": "var(--brand-colors-green-green400)"
+  },
+  "green-green500": {
+    "color": "#28a745",
+    "name": "var(--brand-colors-green-green500)"
+  },
+  "green-green600": {
+    "color": "#1e7e34",
+    "name": "var(--brand-colors-green-green600)"
+  },
+  "green-green700": {
+    "color": "#145523",
+    "name": "var(--brand-colors-green-green700)"
+  },
+  "green-green800": {
+    "color": "#0a2c12",
+    "name": "var(--brand-colors-green-green800)"
+  },
+  "green-green900": {
+    "color": "#041007",
+    "name": "var(--brand-colors-green-green900)"
+  },
+  "red-red000": {
+    "color": "#fcf2f3",
+    "name": "var(--brand-colors-red-red000)"
+  },
+  "red-red100": {
+    "color": "#f7d5d8",
+    "name": "var(--brand-colors-red-red100)"
+  },
+  "red-red200": {
+    "color": "#f1b9be",
+    "name": "var(--brand-colors-red-red200)"
+  },
+  "red-red300": {
+    "color": "#e88f97",
+    "name": "var(--brand-colors-red-red300)"
+  },
+  "red-red400": {
+    "color": "#e06470",
+    "name": "var(--brand-colors-red-red400)"
+  },
+  "red-red500": {
+    "color": "#d73847",
+    "name": "var(--brand-colors-red-red500)"
+  },
+  "red-red600": {
+    "color": "#b92534",
+    "name": "var(--brand-colors-red-red600)"
+  },
+  "red-red700": {
+    "color": "#8e1d28",
+    "name": "var(--brand-colors-red-red700)"
+  },
+  "red-red800": {
+    "color": "#64141c",
+    "name": "var(--brand-colors-red-red800)"
+  },
+  "red-red900": {
+    "color": "#3a0c10",
+    "name": "var(--brand-colors-red-red900)"
+  },
+  "purple-purple500": {
+    "color": "#8b45b6",
+    "name": "var(--brand-colors-purple-purple500)"
+  },
+  "violet-violet300": {
+    "color": "#cfb5f0",
+    "name": "var(--brand-colors-violet-violet300)"
+  },
+  "yellow-yellow000": {
+    "color": "#fffdf8",
+    "name": "var(--brand-colors-yellow-yellow000)"
+  },
+  "yellow-yellow100": {
+    "color": "#fefcde",
+    "name": "var(--brand-colors-yellow-yellow100)"
+  },
+  "yellow-yellow200": {
+    "color": "#fff2c5",
+    "name": "var(--brand-colors-yellow-yellow200)"
+  },
+  "yellow-yellow300": {
+    "color": "#ffeaa3",
+    "name": "var(--brand-colors-yellow-yellow300)"
+  },
+  "yellow-yellow400": {
+    "color": "#ffdf70",
+    "name": "var(--brand-colors-yellow-yellow400)"
+  },
+  "yellow-yellow500": {
+    "color": "#ffd33d",
+    "name": "var(--brand-colors-yellow-yellow500)"
+  },
+  "yellow-yellow600": {
+    "color": "#ffc70a",
+    "name": "var(--brand-colors-yellow-yellow600)"
+  }
+}
\ No newline at end of file
diff --git a/docs/data/darkTheme.json b/docs/data/darkTheme.json
new file mode 100644
index 00000000..cf43fb9e
--- /dev/null
+++ b/docs/data/darkTheme.json
@@ -0,0 +1,210 @@
+{
+  "background-default": {
+    "color": "var(--brand-colors-grey-grey800)",
+    "name": "var(--color-background-default)"
+  },
+  "background-default-hover": {
+    "color": "#282b2e",
+    "name": "var(--color-background-default-hover)"
+  },
+  "background-default-pressed": {
+    "color": "#36383b",
+    "name": "var(--color-background-default-pressed)"
+  },
+  "background-alternative": {
+    "color": "var(--brand-colors-grey-grey900)",
+    "name": "var(--color-background-alternative)"
+  },
+  "background-alternative-hover": {
+    "color": "#191b1d",
+    "name": "var(--color-background-alternative-hover)"
+  },
+  "background-alternative-pressed": {
+    "color": "#27292a",
+    "name": "var(--color-background-alternative-pressed)"
+  },
+  "background-hover": {
+    "color": "#ffffff05",
+    "name": "var(--color-background-hover)"
+  },
+  "background-pressed": {
+    "color": "#ffffff14",
+    "name": "var(--color-background-pressed)"
+  },
+  "text-default": {
+    "color": "var(--brand-colors-white-white000)",
+    "name": "var(--color-text-default)"
+  },
+  "text-alternative": {
+    "color": "var(--brand-colors-grey-grey100)",
+    "name": "var(--color-text-alternative)"
+  },
+  "text-muted": {
+    "color": "var(--brand-colors-grey-grey400)",
+    "name": "var(--color-text-muted)"
+  },
+  "icon-default": {
+    "color": "var(--brand-colors-white-white000)",
+    "name": "var(--color-icon-default)"
+  },
+  "icon-alternative": {
+    "color": "var(--brand-colors-grey-grey200)",
+    "name": "var(--color-icon-alternative)"
+  },
+  "icon-muted": {
+    "color": "var(--brand-colors-grey-grey400)",
+    "name": "var(--color-icon-muted)"
+  },
+  "border-default": {
+    "color": "var(--brand-colors-grey-grey400)",
+    "name": "var(--color-border-default)"
+  },
+  "border-muted": {
+    "color": "var(--brand-colors-grey-grey700)",
+    "name": "var(--color-border-muted)"
+  },
+  "overlay-default": {
+    "color": "#00000099",
+    "name": "var(--color-overlay-default)"
+  },
+  "overlay-alternative": {
+    "color": "#000000cc",
+    "name": "var(--color-overlay-alternative)"
+  },
+  "shadow-default": {
+    "color": "#00000080",
+    "name": "var(--color-shadow-default)"
+  },
+  "overlay-inverse": {
+    "color": "var(--brand-colors-white-white010)",
+    "name": "var(--color-overlay-inverse)"
+  },
+  "primary-default": {
+    "color": "var(--brand-colors-blue-blue400)",
+    "name": "var(--color-primary-default)"
+  },
+  "primary-alternative": {
+    "color": "var(--brand-colors-blue-blue300)",
+    "name": "var(--color-primary-alternative)"
+  },
+  "primary-muted": {
+    "color": "#1098fc26",
+    "name": "var(--color-primary-muted)"
+  },
+  "primary-inverse": {
+    "color": "var(--brand-colors-white-white010)",
+    "name": "var(--color-primary-inverse)"
+  },
+  "primary-disabled": {
+    "color": "#1098fc80",
+    "name": "var(--color-primary-disabled)"
+  },
+  "primary-shadow": {
+    "color": "#0376c933",
+    "name": "var(--color-primary-shadow)"
+  },
+  "secondary-default": {
+    "color": "var(--brand-colors-orange-orange400)",
+    "name": "var(--color-secondary-default)"
+  },
+  "secondary-alternative": {
+    "color": "var(--brand-colors-orange-orange300)",
+    "name": "var(--color-secondary-alternative)"
+  },
+  "secondary-muted": {
+    "color": "#f8883b26",
+    "name": "var(--color-secondary-muted)"
+  },
+  "secondary-inverse": {
+    "color": "var(--brand-colors-white-white010)",
+    "name": "var(--color-secondary-inverse)"
+  },
+  "secondary-disabled": {
+    "color": "#f8883b80",
+    "name": "var(--color-secondary-disabled)"
+  },
+  "error-default": {
+    "color": "var(--brand-colors-red-red500)",
+    "name": "var(--color-error-default)"
+  },
+  "error-alternative": {
+    "color": "var(--brand-colors-red-red400)",
+    "name": "var(--color-error-alternative)"
+  },
+  "error-muted": {
+    "color": "#d7384726",
+    "name": "var(--color-error-muted)"
+  },
+  "error-inverse": {
+    "color": "var(--brand-colors-white-white010)",
+    "name": "var(--color-error-inverse)"
+  },
+  "error-disabled": {
+    "color": "#d7384780",
+    "name": "var(--color-error-disabled)"
+  },
+  "error-shadow": {
+    "color": "#d7384766",
+    "name": "var(--color-error-shadow)"
+  },
+  "warning-default": {
+    "color": "var(--brand-colors-yellow-yellow500)",
+    "name": "var(--color-warning-default)"
+  },
+  "warning-alternative": {
+    "color": "var(--brand-colors-yellow-yellow400)",
+    "name": "var(--color-warning-alternative)"
+  },
+  "warning-muted": {
+    "color": "#ffd33d26",
+    "name": "var(--color-warning-muted)"
+  },
+  "warning-inverse": {
+    "color": "var(--brand-colors-grey-grey900)",
+    "name": "var(--color-warning-inverse)"
+  },
+  "warning-disabled": {
+    "color": "#ffd33d80",
+    "name": "var(--color-warning-disabled)"
+  },
+  "success-default": {
+    "color": "var(--brand-colors-green-green500)",
+    "name": "var(--color-success-default)"
+  },
+  "success-alternative": {
+    "color": "var(--brand-colors-green-green400)",
+    "name": "var(--color-success-alternative)"
+  },
+  "success-muted": {
+    "color": "#28a74526",
+    "name": "var(--color-success-muted)"
+  },
+  "success-inverse": {
+    "color": "var(--brand-colors-white-white010)",
+    "name": "var(--color-success-inverse)"
+  },
+  "success-disabled": {
+    "color": "#28a74580",
+    "name": "var(--color-success-disabled)"
+  },
+  "info-default": {
+    "color": "var(--brand-colors-blue-blue400)",
+    "name": "var(--color-info-default)"
+  },
+  "info-alternative": {
+    "color": "var(--brand-colors-blue-blue300)",
+    "name": "var(--color-info-alternative)"
+  },
+  "info-muted": {
+    "color": "#1098fc26",
+    "name": "var(--color-info-muted)"
+  },
+  "info-inverse": {
+    "color": "var(--brand-colors-white-white010)",
+    "name": "var(--color-info-inverse)"
+  },
+  "info-disabled": {
+    "color": "#0376c980",
+    "name": "var(--color-info-disabled)"
+  }
+}
\ No newline at end of file
diff --git a/docs/data/lightTheme.json b/docs/data/lightTheme.json
new file mode 100644
index 00000000..70fd10c7
--- /dev/null
+++ b/docs/data/lightTheme.json
@@ -0,0 +1,242 @@
+{
+  "background-default": {
+    "color": "var(--brand-colors-white-white000)",
+    "name": "var(--color-background-default)"
+  },
+  "background-default-hover": {
+    "color": "#fafafa",
+    "name": "var(--color-background-default-hover)"
+  },
+  "background-default-pressed": {
+    "color": "#ebebeb",
+    "name": "var(--color-background-default-pressed)"
+  },
+  "background-alternative": {
+    "color": "var(--brand-colors-grey-grey040)",
+    "name": "var(--color-background-alternative)"
+  },
+  "background-alternative-hover": {
+    "color": "#edeff1",
+    "name": "var(--color-background-alternative-hover)"
+  },
+  "background-alternative-pressed": {
+    "color": "#dfe0e2",
+    "name": "var(--color-background-alternative-pressed)"
+  },
+  "background-hover": {
+    "color": "#00000005",
+    "name": "var(--color-background-hover)"
+  },
+  "background-pressed": {
+    "color": "#00000014",
+    "name": "var(--color-background-pressed)"
+  },
+  "text-default": {
+    "color": "var(--brand-colors-grey-grey800)",
+    "name": "var(--color-text-default)"
+  },
+  "text-alternative": {
+    "color": "var(--brand-colors-grey-grey600)",
+    "name": "var(--color-text-alternative)"
+  },
+  "text-muted": {
+    "color": "var(--brand-colors-grey-grey200)",
+    "name": "var(--color-text-muted)"
+  },
+  "icon-default": {
+    "color": "var(--brand-colors-grey-grey800)",
+    "name": "var(--color-icon-default)"
+  },
+  "icon-alternative": {
+    "color": "var(--brand-colors-grey-grey500)",
+    "name": "var(--color-icon-alternative)"
+  },
+  "icon-muted": {
+    "color": "var(--brand-colors-grey-grey200)",
+    "name": "var(--color-icon-muted)"
+  },
+  "border-default": {
+    "color": "var(--brand-colors-grey-grey200)",
+    "name": "var(--color-border-default)"
+  },
+  "border-muted": {
+    "color": "var(--brand-colors-grey-grey100)",
+    "name": "var(--color-border-muted)"
+  },
+  "overlay-default": {
+    "color": "#00000099",
+    "name": "var(--color-overlay-default)"
+  },
+  "overlay-alternative": {
+    "color": "#000000cc",
+    "name": "var(--color-overlay-alternative)"
+  },
+  "overlay-inverse": {
+    "color": "var(--brand-colors-white-white010)",
+    "name": "var(--color-overlay-inverse)"
+  },
+  "shadow-default": {
+    "color": "#0000001a",
+    "name": "var(--color-shadow-default)"
+  },
+  "primary-default": {
+    "color": "var(--brand-colors-blue-blue500)",
+    "name": "var(--color-primary-default)"
+  },
+  "primary-alternative": {
+    "color": "var(--brand-colors-blue-blue600)",
+    "name": "var(--color-primary-alternative)"
+  },
+  "primary-muted": {
+    "color": "#0376c919",
+    "name": "var(--color-primary-muted)"
+  },
+  "primary-inverse": {
+    "color": "var(--brand-colors-white-white010)",
+    "name": "var(--color-primary-inverse)"
+  },
+  "primary-disabled": {
+    "color": "#0376c980",
+    "name": "var(--color-primary-disabled)"
+  },
+  "primary-shadow": {
+    "color": "#0376c933",
+    "name": "var(--color-primary-shadow)"
+  },
+  "secondary-default": {
+    "color": "var(--brand-colors-orange-orange500)",
+    "name": "var(--color-secondary-default)"
+  },
+  "secondary-alternative": {
+    "color": "var(--brand-colors-orange-orange600)",
+    "name": "var(--color-secondary-alternative)"
+  },
+  "secondary-muted": {
+    "color": "#f66a0a19",
+    "name": "var(--color-secondary-muted)"
+  },
+  "secondary-inverse": {
+    "color": "var(--brand-colors-white-white010)",
+    "name": "var(--color-secondary-inverse)"
+  },
+  "secondary-disabled": {
+    "color": "#f66a0a80",
+    "name": "var(--color-secondary-disabled)"
+  },
+  "error-default": {
+    "color": "var(--brand-colors-red-red500)",
+    "name": "var(--color-error-default)"
+  },
+  "error-alternative": {
+    "color": "var(--brand-colors-red-red600)",
+    "name": "var(--color-error-alternative)"
+  },
+  "error-muted": {
+    "color": "#d7384719",
+    "name": "var(--color-error-muted)"
+  },
+  "error-inverse": {
+    "color": "var(--brand-colors-white-white010)",
+    "name": "var(--color-error-inverse)"
+  },
+  "error-disabled": {
+    "color": "#d7384780",
+    "name": "var(--color-error-disabled)"
+  },
+  "error-shadow": {
+    "color": "#d7384766",
+    "name": "var(--color-error-shadow)"
+  },
+  "warning-default": {
+    "color": "var(--brand-colors-orange-orange500)",
+    "name": "var(--color-warning-default)"
+  },
+  "warning-alternative": {
+    "color": "var(--brand-colors-yellow-yellow600)",
+    "name": "var(--color-warning-alternative)"
+  },
+  "warning-muted": {
+    "color": "#ffd33d19",
+    "name": "var(--color-warning-muted)"
+  },
+  "warning-inverse": {
+    "color": "var(--brand-colors-white-white010)",
+    "name": "var(--color-warning-inverse)"
+  },
+  "warning-disabled": {
+    "color": "#ffd33d80",
+    "name": "var(--color-warning-disabled)"
+  },
+  "success-default": {
+    "color": "var(--brand-colors-green-green500)",
+    "name": "var(--color-success-default)"
+  },
+  "success-alternative": {
+    "color": "var(--brand-colors-green-green500)",
+    "name": "var(--color-success-alternative)"
+  },
+  "success-muted": {
+    "color": "#28a74519",
+    "name": "var(--color-success-muted)"
+  },
+  "success-inverse": {
+    "color": "var(--brand-colors-white-white010)",
+    "name": "var(--color-success-inverse)"
+  },
+  "success-disabled": {
+    "color": "#28a74580",
+    "name": "var(--color-success-disabled)"
+  },
+  "info-default": {
+    "color": "var(--brand-colors-blue-blue500)",
+    "name": "var(--color-info-default)"
+  },
+  "info-alternative": {
+    "color": "var(--brand-colors-blue-blue600)",
+    "name": "var(--color-info-alternative)"
+  },
+  "info-muted": {
+    "color": "#0376c919",
+    "name": "var(--color-info-muted)"
+  },
+  "info-inverse": {
+    "color": "var(--brand-colors-white-white010)",
+    "name": "var(--color-info-inverse)"
+  },
+  "info-disabled": {
+    "color": "#0376c980",
+    "name": "var(--color-info-disabled)"
+  },
+  "network-goerli-default": {
+    "color": "var(--brand-colors-blue-blue400)",
+    "name": "var(--color-network-goerli-default)"
+  },
+  "network-goerli-inverse": {
+    "color": "var(--brand-colors-white-white010)",
+    "name": "var(--color-network-goerli-inverse)"
+  },
+  "network-localhost-default": {
+    "color": "var(--brand-colors-grey-grey200)",
+    "name": "var(--color-network-localhost-default)"
+  },
+  "network-localhost-inverse": {
+    "color": "var(--brand-colors-white-white010)",
+    "name": "var(--color-network-localhost-inverse)"
+  },
+  "network-sepolia-default": {
+    "color": "var(--brand-colors-violet-violet300)",
+    "name": "var(--color-network-sepolia-default)"
+  },
+  "network-sepolia-inverse": {
+    "color": "var(--brand-colors-white-white010)",
+    "name": "var(--color-network-sepolia-inverse)"
+  },
+  "flask-default": {
+    "color": "var(--brand-colors-purple-purple500)",
+    "name": "var(--color-flask-default)"
+  },
+  "flask-inverse": {
+    "color": "var(--brand-colors-white-white010)",
+    "name": "var(--color-flask-inverse)"
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 6eff3371..6ffc36a2 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "build": "tsc --project .",
     "build-storybook": "storybook build",
     "build:clean": "rimraf dist && yarn build",
+    "build:docs:css": "node scripts/extractCssColors.js",
     "lint": "yarn lint:eslint && yarn lint:misc --check",
     "lint:eslint": "eslint . --cache --ext js,ts",
     "lint:fix": "yarn lint:eslint --fix && yarn lint:misc --write",
diff --git a/scripts/extractCssColors.js b/scripts/extractCssColors.js
new file mode 100644
index 00000000..1c85c28d
--- /dev/null
+++ b/scripts/extractCssColors.js
@@ -0,0 +1,59 @@
+const fs = require('fs');
+const path = require('path');
+
+const cssFilePath = path.join(__dirname, '../src/css/design-tokens.css');
+const outputDir = path.join(__dirname, '../docs/data');
+
+const cssVars = fs.readFileSync(cssFilePath, 'utf-8');
+
+const brandColors = {};
+const lightTheme = {};
+const darkTheme = {};
+
+let isDarkTheme = false;
+
+cssVars.split('\n').forEach((line) => {
+  if (line.includes("[data-theme='dark']")) {
+    isDarkTheme = true;
+  }
+
+  const match = line.match(/--(.*): (.*);/);
+  if (match) {
+    const varName = match[1];
+    const color = match[2];
+
+    if (varName.startsWith('brand-colors')) {
+      const name = varName.split('-').slice(2).join('-');
+      brandColors[name] = {
+        color: color,
+        name: `var(--${varName})`,
+      };
+    } else if (varName.startsWith('color')) {
+      const name = varName.split('-').slice(1).join('-');
+      if (isDarkTheme) {
+        darkTheme[name] = {
+          color: color,
+          name: `var(--${varName})`,
+        };
+      } else {
+        lightTheme[name] = {
+          color: color,
+          name: `var(--${varName})`,
+        };
+      }
+    }
+  }
+});
+
+fs.writeFileSync(
+  path.join(outputDir, 'brandColors.json'),
+  JSON.stringify(brandColors, null, 2),
+);
+fs.writeFileSync(
+  path.join(outputDir, 'lightTheme.json'),
+  JSON.stringify(lightTheme, null, 2),
+);
+fs.writeFileSync(
+  path.join(outputDir, 'darkTheme.json'),
+  JSON.stringify(darkTheme, null, 2),
+);