feat: adding css and js token stories, scripts and css data

MetaMask · Jan 23, 2024 · 02dbb29 · 02dbb29
1 parent 0e4c543
commit 02dbb29
Show file tree

Hide file tree

Showing 13 changed files with 990 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',