Adding CSS and JS token display in storybook #594

georgewrmarshall · 2024-01-23T00:51:54Z

Description

Previously, we didn't have a way to visualize the changes in CSS, and JavaScript color tokens. The current storybook renders the Figma token json. So we had to manually ensure that the hex values were the same across all these platforms. This process was prone to errors and inconsistencies.

This PR introduces a rudimentary visualization of the CSS and JS color tokens along with the Figma token json. Now, we can visually check that any token updates are correctly reflected across all token formats. This will help us maintain consistency and catch any discrepancies early.

How it works

JS token stories use the available lightTheme and darkTheme objects. Brand colors will be added in the near future
CSS token stories are generated from the CSS variables taken from the stylesheet rendered in storybook

Fixes: #595

Screenshots/Screencasts

Before

before720.mov

After

after720.mov

Manual Testing

To manually test the changes, check the Storybook build in this PR. You can also pull the branch and run the following command to run the script and generate the JSON data:

node scripts/extractCssColors.js

This will create a JSON file in the docs/data directory. You can then use this data in your Storybook stories to visualize the color tokens.

This PR helps us maintain consistency across our color tokens and makes it easier to update and verify these tokens.

georgewrmarshall · 2024-01-23T00:52:47Z

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} />


Updating reference to brand color story in MDX docs so it still renders

docs/BrandColors.stories.tsx

georgewrmarshall · 2024-01-23T00:53:58Z

docs/BrandColors.stories.tsx

@@ -18,7 +21,26 @@ export default meta;

 type Story = StoryObj<typeof ColorSwatchGroup>;

-export const DefaultStory: Story = {
+export const Figma: Story = {


Renaming stories to align with their format Figma, CSS, JS

georgewrmarshall · 2024-01-23T00:54:22Z

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} />


Updating story name references in MDX so they still render as intended

georgewrmarshall · 2024-01-23T01:14:43Z

docs/ThemeColors.stories.tsx

+// CSS
+import lightThemeCss from './data/lightTheme.json';
+import darkThemeCss from './data/darkTheme.json';
+


Imports all the different token data for each format

georgewrmarshall · 2024-01-23T01:26:43Z

docs/components/ColorSwatch/ColorSwatch.stories.tsx

+      name="Primary Default"
+    />
+  ),
+};


Adding missing ColorSwatch story for doc components

georgewrmarshall · 2024-01-23T01:27:16Z

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,


including text color so we can adjust the display of swatches for dark mode

georgewrmarshall · 2024-01-23T01:27:52Z

docs/components/ColorSwatchGroup/ColorSwatchGroup.stories.tsx

+      name="Color Swatch Group"
+    />
+  ),
+};


Including missing ColorSwatchGroup story for doc components

metamaskbot · 2024-01-23T03:23:04Z

Builds ready [6798d5b]

Storybook: Storybook

metamaskbot · 2024-01-23T03:28:24Z

Builds ready [76df8db]

Storybook: Storybook

metamaskbot · 2024-01-23T05:10:48Z

Builds ready [ee701ca]

Storybook: Storybook

metamaskbot · 2024-01-23T17:05:51Z

Builds ready [68504fb]

Storybook: Storybook

georgewrmarshall · 2024-01-23T17:14:08Z

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',


Just updating "Doc" to "Documentation" as it's bumped to 2 lines anyway

georgewrmarshall · 2024-01-23T17:30:50Z

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;


Updating deprecated ReactChild

georgewrmarshall · 2024-01-23T17:32:54Z

docs/components/Text/Text.tsx

+  /**
+   * The color prop of the Text component
+   */
+  color?: string;


Adding color prop and setting the default to text/default to fix bug with shadows with this inclusion of CSS variable stories

Before

before.text.mov

After

after.text.mov

metamaskbot · 2024-01-23T17:33:46Z

Builds ready [5abc7de]

Storybook: Storybook

docs/BrandColors.stories.tsx

…d and theme tokens

metamaskbot · 2024-01-23T22:39:15Z

Builds ready [a6a6567]

Storybook: Storybook

metamaskbot · 2024-01-23T22:43:31Z

Builds ready [ab1c530]

Storybook: Storybook

garrettbear

LGTM just need to fix that merge conflict

metamaskbot · 2024-01-24T19:33:05Z

Builds ready [86cde74]

Storybook: Storybook

metamaskbot · 2024-01-24T19:39:27Z

Builds ready [7fea178]

Storybook: Storybook

georgewrmarshall · 2024-01-24T19:42:43Z

src/js/brandColor/brandColor.ts

@@ -37,7 +37,7 @@ export const brandColor: BrandColor = {
  orange300: '#faa66c',
  orange400: '#f8883b',
  orange500: '#f66a0a',
-  orange600: '#c65507',
+  orange600: '#bf5208',


Thank goodness for tests. This fixes some wrong color values after #586 got merged and fixes failing test on main https://github.com/MetaMask/design-tokens/actions/runs/7644751686/job/20829744608

georgewrmarshall self-assigned this Jan 23, 2024

georgewrmarshall added documentation Improvements or additions to documentation and removed documentation Improvements or additions to documentation labels Jan 23, 2024

georgewrmarshall commented Jan 23, 2024

View reviewed changes

docs/BrandColors.stories.tsx Outdated Show resolved Hide resolved

georgewrmarshall commented Jan 23, 2024

View reviewed changes

georgewrmarshall force-pushed the fix/css-js-token-docs-display branch from 02dbb29 to 6798d5b Compare January 23, 2024 03:20

feat: adding css and js token stories

76df8db

georgewrmarshall force-pushed the fix/css-js-token-docs-display branch from 6798d5b to 76df8db Compare January 23, 2024 03:26

fix: order of color and name in swatch

ee701ca

fix: improving comments and removing console.log

68504fb

georgewrmarshall marked this pull request as ready for review January 23, 2024 17:03

georgewrmarshall requested a review from a team as a code owner January 23, 2024 17:03

georgewrmarshall commented Jan 23, 2024

View reviewed changes

fix:setting default text color for shadows bug fix

5abc7de

georgewrmarshall commented Jan 23, 2024

View reviewed changes

georgewrmarshall requested review from brianacnguyen and garrettbear January 23, 2024 17:33

brianacnguyen reviewed Jan 23, 2024

View reviewed changes

docs/BrandColors.stories.tsx Outdated Show resolved Hide resolved

refactor: refactoring get css variable function to work for both bran…

a6a6567

…d and theme tokens

chore: adjusting line breaks

ab1c530

georgewrmarshall requested a review from brianacnguyen January 23, 2024 22:46

garrettbear previously approved these changes Jan 24, 2024

View reviewed changes

fix: resolving merge conflict in brand color stories

86cde74

georgewrmarshall dismissed garrettbear’s stale review via 86cde74 January 24, 2024 19:30

fix: updating brand colors to latest updates

7fea178

georgewrmarshall requested a review from garrettbear January 24, 2024 19:41

georgewrmarshall commented Jan 24, 2024

View reviewed changes

garrettbear approved these changes Jan 24, 2024

View reviewed changes

garrettbear merged commit 34bb957 into main Jan 24, 2024
7 checks passed

garrettbear deleted the fix/css-js-token-docs-display branch January 24, 2024 20:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding CSS and JS token display in storybook #594

Adding CSS and JS token display in storybook #594

georgewrmarshall commented Jan 23, 2024 •

edited

Loading

georgewrmarshall Jan 23, 2024

georgewrmarshall Jan 23, 2024

georgewrmarshall Jan 23, 2024

georgewrmarshall Jan 23, 2024 •

edited

Loading

georgewrmarshall Jan 23, 2024

georgewrmarshall Jan 23, 2024

georgewrmarshall Jan 23, 2024

metamaskbot commented Jan 23, 2024

metamaskbot commented Jan 23, 2024

metamaskbot commented Jan 23, 2024

metamaskbot commented Jan 23, 2024

georgewrmarshall Jan 23, 2024 •

edited

Loading

georgewrmarshall Jan 23, 2024

georgewrmarshall Jan 23, 2024

metamaskbot commented Jan 23, 2024

metamaskbot commented Jan 23, 2024

metamaskbot commented Jan 23, 2024

garrettbear left a comment •

edited

Loading

metamaskbot commented Jan 24, 2024

metamaskbot commented Jan 24, 2024

georgewrmarshall Jan 24, 2024 •

edited

Loading

Adding CSS and JS token display in storybook #594

Adding CSS and JS token display in storybook #594

Conversation

georgewrmarshall commented Jan 23, 2024 • edited Loading

Description

How it works

Screenshots/Screencasts

Before

After

Manual Testing

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

georgewrmarshall Jan 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

metamaskbot commented Jan 23, 2024

metamaskbot commented Jan 23, 2024

metamaskbot commented Jan 23, 2024

metamaskbot commented Jan 23, 2024

georgewrmarshall Jan 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Before

After

metamaskbot commented Jan 23, 2024

metamaskbot commented Jan 23, 2024

metamaskbot commented Jan 23, 2024

garrettbear left a comment • edited Loading

Choose a reason for hiding this comment

metamaskbot commented Jan 24, 2024

metamaskbot commented Jan 24, 2024

georgewrmarshall Jan 24, 2024 • edited Loading

Choose a reason for hiding this comment

georgewrmarshall commented Jan 23, 2024 •

edited

Loading

georgewrmarshall Jan 23, 2024 •

edited

Loading

georgewrmarshall Jan 23, 2024 •

edited

Loading

garrettbear left a comment •

edited

Loading

georgewrmarshall Jan 24, 2024 •

edited

Loading