Adding CSS and JS token display in storybook (#594)

* feat: adding css and js token stories * fix: order of color and name in swatch * fix: improving comments and removing console.log * fix:setting default text color for shadows bug fix * refactor: refactoring get css variable function to work for both brand and theme tokens * chore: adjusting line breaks * fix: updating brand colors to latest updates
MetaMask · Jan 24, 2024 · 34bb957 · 34bb957
1 parent 9bb60a2
commit 34bb957
Show file tree

Hide file tree

Showing 11 changed files with 292 additions and 15 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
@@ -2,6 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import tokens from '../src/figma/tokens.json';
 import { brandColor } from '../src/js';
+import getCSSVariablesFromStylesheet from './utils/getCSSVariablesFromStylesheet';
 import { ColorSwatchGroup, ColorSwatch } from './components';
 import README from './BrandColors.mdx';
 
@@ -19,9 +20,28 @@ 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: () => {
+    const cssBrandColors = getCSSVariablesFromStylesheet('--brand-colors');
+    return (
+      <div
+        style={{
+          display: 'grid',
+          gap: '16px',
+          gridTemplateColumns: 'repeat(auto-fill, 300px)',
+        }}
+      >
+        {/* Mapping through each brand color and rendering a ColorSwatch component for it */}
+        {Object.values(cssBrandColors).map(({ color, name }) => (
+          <ColorSwatch key={name} color={color} name={name} />
+        ))}
+      </div>
+    );
+  },
 };
 
 export const JS: Story = {

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,6 +1,10 @@
 import React from 'react';
 import tokens from '../src/figma/tokens.json';
-import { ColorSwatchGroup } from './components';
+import { lightTheme, darkTheme } from '../src';
+import getCSSVariablesFromStylesheet from './utils/getCSSVariablesFromStylesheet';
+
+import { ColorSwatchGroup, ColorSwatch } from './components';
+
 import README from './ThemeColors.mdx';
 
 export default {
@@ -13,8 +17,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 +27,7 @@ export const LightThemeColors = {
   },
 };
 
-export const DarkThemeColors = {
+export const FigmaDarkTheme = {
   render: () => (
     <div
       style={{
@@ -32,7 +36,7 @@ export const DarkThemeColors = {
         padding: '1rem',
       }}
     >
-      <ColorSwatchGroup {...DarkThemeColors.args} />
+      <ColorSwatchGroup {...FigmaDarkTheme.args} />
     </div>
   ),
   args: {
@@ -50,3 +54,136 @@ export const DarkThemeColors = {
     },
   },
 };
+
+export const CSSLightTheme = {
+  render: () => {
+    const lightThemeColors = getCSSVariablesFromStylesheet('--color-');
+    return (
+      <div
+        style={{
+          display: 'grid',
+          gap: '16px',
+          gridTemplateColumns: 'repeat(auto-fill, 300px)',
+        }}
+      >
+        {Object.entries(lightThemeColors).map(
+          ([name, { color, name: colorName }]) => (
+            <ColorSwatch key={name} color={color} name={colorName} />
+          ),
+        )}
+      </div>
+    );
+  },
+};
+
+export const CSSDarkTheme = {
+  render: () => {
+    const darkThemeColors = getCSSVariablesFromStylesheet('--color-');
+    return (
+      <div
+        style={{
+          backgroundColor: 'var(--color-background-default)',
+          margin: '-1rem',
+          padding: '1rem',
+        }}
+      >
+        <div
+          style={{
+            display: 'grid',
+            gap: '16px',
+            gridTemplateColumns: 'repeat(auto-fill, 300px)',
+          }}
+        >
+          {Object.entries(darkThemeColors).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: 'var(--color-background-default)' }],
+  },
+  decorators: [
+    (StoryFn) => {
+      // Check if document object is available
+      if (typeof document !== 'undefined') {
+        // Add the data-theme attribute to the root element
+        document.documentElement.setAttribute('data-theme', 'dark');
+      }
+      // Render the story
+      return <StoryFn />;
+    },
+  ],
+};
+
+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',

diff --git a/docs/components/Text/Text.tsx b/docs/components/Text/Text.tsx
@@ -5,7 +5,7 @@ interface Props<C extends React.ElementType> {
   /**
    * The children or content of the Text component
    */
-  children?: React.ReactChild;
+  children?: React.ReactNode;
   /**
    * Polymorphic prop to change the html root element of the component
    */
@@ -14,6 +14,10 @@ interface Props<C extends React.ElementType> {
    * The style prop of the Text component
    */
   style?: object;
+  /**
+   * The color prop of the Text component
+   */
+  color?: string;
 }
 
 type TextProps<C extends React.ElementType> = Props<C> &
@@ -23,10 +27,17 @@ export const Text = <C extends React.ElementType = 'span'>({
   style,
   children,
   as,
+  color,
 }: TextProps<C>) => {
   const Component = as || 'span';
   return (
-    <Component style={{ fontFamily: fontFamilies.euclidCircularB, ...style }}>
+    <Component
+      style={{
+        fontFamily: fontFamilies.euclidCircularB,
+        color: 'var(--color-text-default)',
+        ...style,
+      }}
+    >
       {children}
     </Component>
   );