From 76df8dbdb6da96d0d87dd750fdb461e3003cadc8 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Mon, 22 Jan 2024 19:26:11 -0800 Subject: [PATCH 1/7] feat: adding css and js token stories --- docs/BrandColors.mdx | 2 +- docs/BrandColors.stories.tsx | 72 ++++++++- docs/ThemeColors.mdx | 4 +- docs/ThemeColors.stories.tsx | 151 +++++++++++++++++- .../ColorSwatch/ColorSwatch.stories.tsx | 23 +++ docs/components/ColorSwatch/ColorSwatch.tsx | 1 + .../ColorSwatchGroup.stories.tsx | 36 +++++ docs/components/Text/Text.stories.tsx | 2 +- docs/utils/getThemeColorsFromStylesheet.ts | 48 ++++++ 9 files changed, 326 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/utils/getThemeColorsFromStylesheet.ts 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 - + ## Best Practices diff --git a/docs/BrandColors.stories.tsx b/docs/BrandColors.stories.tsx index 7c5a8ee2..10d1b849 100644 --- a/docs/BrandColors.stories.tsx +++ b/docs/BrandColors.stories.tsx @@ -1,7 +1,11 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; + import tokens from '../src/figma/tokens.json'; -import { ColorSwatchGroup } from './components'; +import { Color } from './utils/getThemeColorsFromStylesheet'; + +import { ColorSwatchGroup, ColorSwatch } from './components'; + import README from './BrandColors.mdx'; const meta: Meta = { @@ -18,7 +22,67 @@ export default meta; type Story = StoryObj; -export const DefaultStory: Story = { +export const Figma: Story = { render: () => , - name: 'Default', +}; + +export const CSS: Story = { + render: () => { + // Using useState hook to manage brandColors state + const [brandColors, setBrandColors] = useState({}); + + useEffect(() => { + // Using useEffect hook to run the code after the component mounts + + // Getting all CSS variables that start with '--brand-colors' from all stylesheets + const cssVars = Array.from(document.styleSheets) + .flatMap((styleSheet) => { + try { + return Array.from(styleSheet.cssRules); + } catch (err) { + return []; + } + }) + .filter((cssRule) => cssRule.type === CSSRule.STYLE_RULE) + .flatMap((cssRule) => Array.from((cssRule as CSSStyleRule).style)) + .filter((varName) => varName.startsWith('--brand-colors')); + + const brandColors: Color = {}; + + // Looping through each CSS variable and getting its value + cssVars.forEach((varName) => { + const name = varName.split('-').slice(2).join('-'); + const color = getComputedStyle(document.documentElement) + .getPropertyValue(varName) + .trim(); + brandColors[name] = { + color: `var(${varName})`, + name: color, + }; + }); + + // Updating the state with the new brandColors + setBrandColors(brandColors); + }, []); + + // Rendering the component + return ( +
+ {/* Mapping through each brand color and rendering a ColorSwatch component for it */} + {Object.values(brandColors).map(({ color, name }) => ( + + ))} +
+ ); + }, +}; + +export const JS: Story = { + render: () =>

Coming soon

, }; 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 - + ## 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. - + ## Best practices diff --git a/docs/ThemeColors.stories.tsx b/docs/ThemeColors.stories.tsx index 6e94fc8b..1c3c747c 100644 --- 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 getThemeColorsFromStylesheet from './utils/getThemeColorsFromStylesheet'; +import { ColorSwatchGroup, ColorSwatch } from './components'; import README from './ThemeColors.mdx'; export default { @@ -13,8 +17,8 @@ export default { }, }; -export const LightThemeColors = { - render: () => , +export const FigmaLightTheme = { + render: () => , 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: () => (
- +
), args: { @@ -50,3 +54,140 @@ export const DarkThemeColors = { }, }, }; + +export const CSSLightTheme = { + render: () => { + const lightThemeColors = getThemeColorsFromStylesheet(); + + return ( +
+ {Object.entries(lightThemeColors).map( + ([name, { color, name: colorName }]) => ( + + ), + )} +
+ ); + }, +}; + +export const CSSDarkTheme = { + render: () => { + const darkThemeColors = getThemeColorsFromStylesheet(); + console.log('darkThemeColors', darkThemeColors); + return ( +
+
+ {Object.entries(darkThemeColors).map( + ([name, { color, name: colorName }]) => ( + + ), + )} +
+
+ ); + }, + backgrounds: { + default: 'dark', + values: [{ name: 'dark', value: 'var(--color-background-default)' }], + }, + decorators: [ + // eslint-disable-next-line no-unused-vars + (StoryFn) => { + // Check if document object is available + if (typeof document !== 'undefined') { + // Add the data-theme attribute to the root element + // eslint-disable-next-line no-undef + document.documentElement.setAttribute('data-theme', 'dark'); + } + // Render the story + return ; + }, + ], +}; + +export const JSLightTheme = { + render: () => ( +
+ {Object.entries(lightTheme.colors).flatMap(([category, colorObj]) => + Object.entries(colorObj).map(([name, color]) => ( + + )), + )} +
+ ), +}; + +export const JSDarkTheme = { + render: () => ( +
+
+ {Object.entries(darkTheme.colors).flatMap(([category, colorObj]) => + Object.entries(colorObj).map(([name, color]) => ( + + )), + )} +
+
+ ), + 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 = { + title: 'Documentation Components/ColorSwatch', + component: ColorSwatch, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + ), +}; 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 = ({ backgroundColor: textBackgroundColor, padding: 8, borderRadius: '0 0 8px 8px', + color: textColor, }} > 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 = { + title: 'Documentation Components/ColorSwatchGroup', + component: ColorSwatchGroup, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + ), +}; 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/utils/getThemeColorsFromStylesheet.ts b/docs/utils/getThemeColorsFromStylesheet.ts new file mode 100644 index 00000000..4cf1bda7 --- /dev/null +++ b/docs/utils/getThemeColorsFromStylesheet.ts @@ -0,0 +1,48 @@ +// Define a type for the theme colors +export interface Color { + [key: string]: { + color: string; + name: string; + }; +} + +/** + * Retrieves theme colors from the stylesheet. + * + * @returns An object containing the retrieved theme colors. + */ +function getThemeColorsFromStylesheet(): Color { + const themeColors: Color = {}; + + Array.from(document.styleSheets) + .flatMap((styleSheet) => { + try { + return Array.from(styleSheet.cssRules); + } catch (err) { + return []; + } + }) + .filter((cssRule) => cssRule.type === CSSRule.STYLE_RULE) + .filter( + (cssRule: CSSRule) => (cssRule as CSSStyleRule).selectorText === ':root', + ) + .flatMap( + (cssRule: CSSRule) => + Array.from((cssRule as CSSStyleRule).style) as string[], + ) + .filter((varName) => varName.startsWith('--color-')) + .forEach((varName) => { + const name = varName.split('-').slice(2).join('-'); + const color = getComputedStyle(document.documentElement) + .getPropertyValue(varName) + .trim(); + themeColors[name] = { + color, + name: `var(${varName})`, + }; + }); + + return themeColors; +} + +export default getThemeColorsFromStylesheet; From ee701ca7beb396ad6ffa3e2f4bcd346841eb11da Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Mon, 22 Jan 2024 21:06:44 -0800 Subject: [PATCH 2/7] fix: order of color and name in swatch --- docs/BrandColors.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/BrandColors.stories.tsx b/docs/BrandColors.stories.tsx index 10d1b849..f8ca4adc 100644 --- a/docs/BrandColors.stories.tsx +++ b/docs/BrandColors.stories.tsx @@ -56,8 +56,8 @@ export const CSS: Story = { .getPropertyValue(varName) .trim(); brandColors[name] = { - color: `var(${varName})`, - name: color, + color: color, + name: `var(${varName})`, }; }); From 68504fb3be7b786f2aba23b873c197d2155b7903 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 23 Jan 2024 09:03:17 -0800 Subject: [PATCH 3/7] fix: improving comments and removing console.log --- docs/BrandColors.stories.tsx | 5 +---- docs/ThemeColors.stories.tsx | 1 - docs/utils/getThemeColorsFromStylesheet.ts | 4 ++-- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/docs/BrandColors.stories.tsx b/docs/BrandColors.stories.tsx index f8ca4adc..c790f021 100644 --- a/docs/BrandColors.stories.tsx +++ b/docs/BrandColors.stories.tsx @@ -28,12 +28,9 @@ export const Figma: Story = { export const CSS: Story = { render: () => { - // Using useState hook to manage brandColors state const [brandColors, setBrandColors] = useState({}); useEffect(() => { - // Using useEffect hook to run the code after the component mounts - // Getting all CSS variables that start with '--brand-colors' from all stylesheets const cssVars = Array.from(document.styleSheets) .flatMap((styleSheet) => { @@ -65,7 +62,7 @@ export const CSS: Story = { setBrandColors(brandColors); }, []); - // Rendering the component + // Rendering the color swatches return (
{ const darkThemeColors = getThemeColorsFromStylesheet(); - console.log('darkThemeColors', darkThemeColors); return (
Date: Tue, 23 Jan 2024 09:30:06 -0800 Subject: [PATCH 4/7] fix:setting default text color for shadows bug fix --- docs/components/Text/Text.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/docs/components/Text/Text.tsx b/docs/components/Text/Text.tsx index 74cedf1d..022306f0 100644 --- a/docs/components/Text/Text.tsx +++ b/docs/components/Text/Text.tsx @@ -5,7 +5,7 @@ interface Props { /** * 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 { * The style prop of the Text component */ style?: object; + /** + * The color prop of the Text component + */ + color?: string; } type TextProps = Props & @@ -23,10 +27,17 @@ export const Text = ({ style, children, as, + color, }: TextProps) => { const Component = as || 'span'; return ( - + {children} ); From a6a6567261bb879ec6e20e5d6445165939717c46 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 23 Jan 2024 14:37:10 -0800 Subject: [PATCH 5/7] refactor: refactoring get css variable function to work for both brand and theme tokens --- docs/BrandColors.stories.tsx | 40 ++----------------- docs/ThemeColors.stories.tsx | 9 ++--- ...et.ts => getCSSVariablesFromStylesheet.ts} | 17 ++++---- 3 files changed, 15 insertions(+), 51 deletions(-) rename docs/utils/{getThemeColorsFromStylesheet.ts => getCSSVariablesFromStylesheet.ts} (66%) diff --git a/docs/BrandColors.stories.tsx b/docs/BrandColors.stories.tsx index c790f021..234326af 100644 --- a/docs/BrandColors.stories.tsx +++ b/docs/BrandColors.stories.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import tokens from '../src/figma/tokens.json'; -import { Color } from './utils/getThemeColorsFromStylesheet'; +import getCSSVariablesFromStylesheet from './utils/getCSSVariablesFromStylesheet'; import { ColorSwatchGroup, ColorSwatch } from './components'; @@ -28,41 +28,7 @@ export const Figma: Story = { export const CSS: Story = { render: () => { - const [brandColors, setBrandColors] = useState({}); - - useEffect(() => { - // Getting all CSS variables that start with '--brand-colors' from all stylesheets - const cssVars = Array.from(document.styleSheets) - .flatMap((styleSheet) => { - try { - return Array.from(styleSheet.cssRules); - } catch (err) { - return []; - } - }) - .filter((cssRule) => cssRule.type === CSSRule.STYLE_RULE) - .flatMap((cssRule) => Array.from((cssRule as CSSStyleRule).style)) - .filter((varName) => varName.startsWith('--brand-colors')); - - const brandColors: Color = {}; - - // Looping through each CSS variable and getting its value - cssVars.forEach((varName) => { - const name = varName.split('-').slice(2).join('-'); - const color = getComputedStyle(document.documentElement) - .getPropertyValue(varName) - .trim(); - brandColors[name] = { - color: color, - name: `var(${varName})`, - }; - }); - - // Updating the state with the new brandColors - setBrandColors(brandColors); - }, []); - - // Rendering the color swatches + const cssBrandColors = getCSSVariablesFromStylesheet('--brand-colors'); return (
{/* Mapping through each brand color and rendering a ColorSwatch component for it */} - {Object.values(brandColors).map(({ color, name }) => ( + {Object.values(cssBrandColors).map(({ color, name }) => ( ))}
diff --git a/docs/ThemeColors.stories.tsx b/docs/ThemeColors.stories.tsx index 9382c371..06db7241 100644 --- a/docs/ThemeColors.stories.tsx +++ b/docs/ThemeColors.stories.tsx @@ -3,7 +3,7 @@ import React from 'react'; import tokens from '../src/figma/tokens.json'; import { lightTheme, darkTheme } from '../src'; -import getThemeColorsFromStylesheet from './utils/getThemeColorsFromStylesheet'; +import getCSSVariablesFromStylesheet from './utils/getCSSVariablesFromStylesheet'; import { ColorSwatchGroup, ColorSwatch } from './components'; import README from './ThemeColors.mdx'; @@ -57,8 +57,7 @@ export const FigmaDarkTheme = { export const CSSLightTheme = { render: () => { - const lightThemeColors = getThemeColorsFromStylesheet(); - + const lightThemeColors = getCSSVariablesFromStylesheet('--color-'); return (
{ - const darkThemeColors = getThemeColorsFromStylesheet(); + const darkThemeColors = getCSSVariablesFromStylesheet('--color-'); return (
{ // Check if document object is available if (typeof document !== 'undefined') { // Add the data-theme attribute to the root element - // eslint-disable-next-line no-undef document.documentElement.setAttribute('data-theme', 'dark'); } // Render the story diff --git a/docs/utils/getThemeColorsFromStylesheet.ts b/docs/utils/getCSSVariablesFromStylesheet.ts similarity index 66% rename from docs/utils/getThemeColorsFromStylesheet.ts rename to docs/utils/getCSSVariablesFromStylesheet.ts index e3639852..6a4f56a5 100644 --- a/docs/utils/getThemeColorsFromStylesheet.ts +++ b/docs/utils/getCSSVariablesFromStylesheet.ts @@ -7,12 +7,13 @@ export interface Color { } /** - * Retrieves CSS color variables from the stylesheet. + * Retrieves CSS variables from the stylesheet. * - * @returns An object containing the retrieved theme color CSS variables. + * @param varPrefix - The prefix of the CSS variables to retrieve. + * @returns An object containing the retrieved CSS variables. */ -function getThemeColorsFromStylesheet(): Color { - const themeColors: Color = {}; +function getCSSVariablesFromStylesheet(varPrefix: string): Color { + const cssVariables: Color = {}; Array.from(document.styleSheets) .flatMap((styleSheet) => { @@ -30,19 +31,19 @@ function getThemeColorsFromStylesheet(): Color { (cssRule: CSSRule) => Array.from((cssRule as CSSStyleRule).style) as string[], ) - .filter((varName) => varName.startsWith('--color-')) + .filter((varName) => varName.startsWith(varPrefix)) .forEach((varName) => { const name = varName.split('-').slice(2).join('-'); const color = getComputedStyle(document.documentElement) .getPropertyValue(varName) .trim(); - themeColors[name] = { + cssVariables[name] = { color, name: `var(${varName})`, }; }); - return themeColors; + return cssVariables; } -export default getThemeColorsFromStylesheet; +export default getCSSVariablesFromStylesheet; From ab1c5301a45e47944230be0fef521b3ffea52ca7 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 23 Jan 2024 14:39:46 -0800 Subject: [PATCH 6/7] chore: adjusting line breaks --- docs/BrandColors.stories.tsx | 1 - docs/ThemeColors.stories.tsx | 4 ++-- docs/utils/getCSSVariablesFromStylesheet.ts | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/docs/BrandColors.stories.tsx b/docs/BrandColors.stories.tsx index 234326af..39967fb3 100644 --- a/docs/BrandColors.stories.tsx +++ b/docs/BrandColors.stories.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; - import tokens from '../src/figma/tokens.json'; import getCSSVariablesFromStylesheet from './utils/getCSSVariablesFromStylesheet'; diff --git a/docs/ThemeColors.stories.tsx b/docs/ThemeColors.stories.tsx index 06db7241..200da606 100644 --- a/docs/ThemeColors.stories.tsx +++ b/docs/ThemeColors.stories.tsx @@ -1,10 +1,10 @@ import React from 'react'; - import tokens from '../src/figma/tokens.json'; import { lightTheme, darkTheme } from '../src'; - import getCSSVariablesFromStylesheet from './utils/getCSSVariablesFromStylesheet'; + import { ColorSwatchGroup, ColorSwatch } from './components'; + import README from './ThemeColors.mdx'; export default { diff --git a/docs/utils/getCSSVariablesFromStylesheet.ts b/docs/utils/getCSSVariablesFromStylesheet.ts index 6a4f56a5..e404569f 100644 --- a/docs/utils/getCSSVariablesFromStylesheet.ts +++ b/docs/utils/getCSSVariablesFromStylesheet.ts @@ -1,4 +1,4 @@ -// Define a type for the theme colors +// Define a type for the color object export interface Color { [key: string]: { color: string; From 7fea178cf2d50aa29f5be78b8dfdd3585e05267e Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Wed, 24 Jan 2024 11:37:08 -0800 Subject: [PATCH 7/7] fix: updating brand colors to latest updates --- src/js/brandColor/brandColor.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/brandColor/brandColor.ts b/src/js/brandColor/brandColor.ts index 1608011c..a50f3ef0 100644 --- a/src/js/brandColor/brandColor.ts +++ b/src/js/brandColor/brandColor.ts @@ -37,7 +37,7 @@ export const brandColor: BrandColor = { orange300: '#faa66c', orange400: '#f8883b', orange500: '#f66a0a', - orange600: '#c65507', + orange600: '#bf5208', orange700: '#954005', orange800: '#632b04', orange900: '#321602', @@ -48,7 +48,7 @@ export const brandColor: BrandColor = { green300: '#86e29b', green400: '#5dd879', green500: '#28a745', - green600: '#1e7e34', + green600: '#1c8234', green700: '#145523', green800: '#0a2c12', green900: '#041007',