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..7a6fe823 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 brandColors from './data/brandColors.json'; + +import { ColorSwatchGroup, ColorSwatch, Text } from './components'; + import README from './BrandColors.mdx'; const meta: Meta = { @@ -18,7 +22,75 @@ export default meta; type Story = StoryObj; -export const DefaultStory: Story = { +export const Figma: Story = { render: () => , - name: 'Default', +}; + +// Define a type for the brand colors +type BrandColors = { + [key: string]: { + color: string; + name: string; + }; +}; + +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.style)) + .filter((varName) => varName.startsWith('--brand-colors')); + + const brandColors: BrandColors = {}; + + // 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..c25bd664 --- /dev/null +++ b/docs/utils/getThemeColorsFromStylesheet.ts @@ -0,0 +1,48 @@ +// Define a type for the theme colors +interface ThemeColors { + [key: string]: { + color: string; + name: string; + }; +} + +/** + * Retrieves theme colors from the stylesheet. + * + * @returns An object containing the retrieved theme colors. + */ +function getThemeColorsFromStylesheet(): ThemeColors { + const themeColors: ThemeColors = {}; + + 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;