Fix/656/json

docs/BrandColors.stories.tsx

@@ -1,8 +1,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 { brandColor as brandColorJS } from '../src/js';
+import { getCSSVariablesFromStylesheet, useJsonColor } from './utils';
 import { ColorSwatchGroup, ColorSwatch } from './components';
 import README from './BrandColors.mdx';
 
@@ -21,7 +20,10 @@ export default meta;
 type Story = StoryObj<typeof ColorSwatchGroup>;
 
 export const Figma: Story = {
-  render: () => <ColorSwatchGroup swatchData={tokens.global.brandColors} />,
+  render: () => {
+    const { brandColor } = useJsonColor();
+    return <ColorSwatchGroup swatchData={brandColor} />;
+  },
 };
 
 export const CSS: Story = {
@@ -54,7 +56,7 @@ export const JS: Story = {
       }}
     >
       {/* Mapping through each brand color and rendering a ColorSwatch component for it */}
-      {Object.entries(brandColor).map(([name, color]) => (
+      {Object.entries(brandColorJS).map(([name, color]) => (
         <ColorSwatch key={name} color={color} name={`brandColor.${name}`} />
       ))}
     </div>

docs/ThemeColors.mdx

@@ -1,4 +1,4 @@
-import { Canvas } from '@storybook/addon-docs/blocks';
+import { Canvas } from '@storybook/blocks';
 import * as ThemeColorStories from './ThemeColors.stories';
 
 # Theme Colors (second tier)

docs/ThemeColors.stories.tsx

@@ -1,11 +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 { lightTheme as lightThemeJS, darkTheme as darkThemeJS } from '../src';
+import brandColor from '../src/figma/brandColors.json';
+import { ColorSwatch, ColorSwatchGroup } from './components';
 import README from './ThemeColors.mdx';
+import { getCSSVariablesFromStylesheet, useJsonColor } from './utils';
 
 export default {
   title: 'Colors/Theme Colors',
@@ -18,39 +17,43 @@ export default {
 };
 
 export const FigmaLightTheme = {
-  render: () => <ColorSwatchGroup {...FigmaLightTheme.args} />,
-  args: {
-    swatchData: tokens.light.colors,
-    borderColor: tokens.light.colors.border.muted.value,
-    textBackgroundColor: tokens.light.colors.background.default.value,
-    textColor: tokens.light.colors.text.default.value,
+  render: () => {
+    const { lightTheme } = useJsonColor();
+    if (!lightTheme) {
+      return null; // or some fallback component
+    }
+    console.log('lightTheme', lightTheme);
+    return <ColorSwatchGroup swatchData={lightTheme} />;
   },
 };
 
 export const FigmaDarkTheme = {
-  render: () => (
-    <div
-      style={{
-        backgroundColor: tokens.dark.colors.background.default.value,
-        margin: '-1rem',
-        padding: '1rem',
-      }}
-    >
-      <ColorSwatchGroup {...FigmaDarkTheme.args} />
-    </div>
-  ),
-  args: {
-    swatchData: tokens.dark.colors,
-    borderColor: tokens.dark.colors.border.muted.value,
-    textBackgroundColor: tokens.dark.colors.background.default.value,
-    textColor: tokens.dark.colors.text.default.value,
+  render: () => {
+    const { darkTheme } = useJsonColor();
+    console.log('darkTheme', darkTheme);
+    if (!darkTheme) {
+      return null; // or some fallback component
+    }
+    return (
+      <div
+        style={{
+          margin: '-1rem',
+          padding: '1rem',
+        }}
+      >
+        <ColorSwatchGroup
+          swatchData={darkTheme}
+          borderColor={darkTheme.border.muted.value}
+          textBackgroundColor={darkTheme.background.default.value}
+          textColor={darkTheme.text.default.value}
+        />
+      </div>
+    );
   },
   parameters: {
     backgrounds: {
       default: 'dark',
-      values: [
-        { name: 'dark', value: tokens.dark.colors.background.default.value },
-      ],
+      values: [{ name: 'dark', value: brandColor.grey[800].value }],
     },
   },
 };
@@ -136,7 +139,7 @@ export const JSLightTheme = {
         gridTemplateColumns: 'repeat(auto-fill, 300px)',
       }}
     >
-      {Object.entries(lightTheme.colors).flatMap(([category, colorObj]) =>
+      {Object.entries(lightThemeJS.colors).flatMap(([category, colorObj]) =>
         Object.entries(colorObj).map(([name, color]) => (
           <ColorSwatch
             key={`${category}-${name}`}
@@ -153,7 +156,7 @@ export const JSDarkTheme = {
   render: () => (
     <div
       style={{
-        backgroundColor: darkTheme.colors.background.default,
+        backgroundColor: darkThemeJS.colors.background.default,
         margin: '-1rem',
         padding: '1rem',
       }}
@@ -165,15 +168,15 @@ export const JSDarkTheme = {
           gridTemplateColumns: 'repeat(auto-fill, 300px)',
         }}
       >
-        {Object.entries(darkTheme.colors).flatMap(([category, colorObj]) =>
+        {Object.entries(darkThemeJS.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}
+              borderColor={darkThemeJS.colors.border.muted}
+              textBackgroundColor={darkThemeJS.colors.background.default}
+              textColor={darkThemeJS.colors.text.default}
             />
           )),
         )}
@@ -183,7 +186,7 @@ export const JSDarkTheme = {
   parameters: {
     backgrounds: {
       default: 'dark',
-      values: [{ name: 'dark', value: darkTheme.colors.background.default }],
+      values: [{ name: 'dark', value: darkThemeJS.colors.background.default }],
     },
   },
 };

docs/components/ColorSwatch/ColorSwatch.tsx

@@ -37,7 +37,7 @@ export const ColorSwatch: FunctionComponent<ColorSwatchProps> = ({
       style={{
         height: 120,
         backgroundColor: color,
-        border: `1px solid ${borderColor}`,
+        border: `2px solid ${borderColor}`,
         display: 'flex',
         flexDirection: 'column-reverse',
         borderRadius: '8px',
@@ -48,7 +48,7 @@ export const ColorSwatch: FunctionComponent<ColorSwatchProps> = ({
         style={{
           backgroundColor: textBackgroundColor,
           padding: 8,
-          borderRadius: '0 0 8px 8px',
+          borderRadius: '0 0 6px 6px',
           color: textColor,
         }}
       >

docs/components/ColorSwatchGroup/ColorSwatchGroup.tsx

@@ -1,31 +1,12 @@
 import React, { FunctionComponent } from 'react';
-
+import { Theme } from '../../utils/useJsonColor';
 import { ColorSwatch } from '..';
 
-interface ColorToken {
-  /**
-   * The value of the color can be hex or a reference to another color using
-   * the Figma Token reference syntax {colors.blue.blue500} or using maths
-   * notation rgba($colors.blue.blue500, .5)
-   */
-  value: string;
-  /**
-   * The description of the color and what is should be used for
-   */
-  description?: string;
-  /**
-   * The type of token
-   */
-  type: 'color';
-}
-
 interface ColorSwatchGroupProps {
   /**
    * The color object
    */
-  swatchData: {
-    [key: string]: ColorToken;
-  };
+  swatchData: Theme;
   /**
    * The color of text background that contains the name of the color defaults to background.default
    */

docs/utils/getCSSVariablesFromStylesheet.ts

@@ -12,7 +12,7 @@ export type Color = {
  * @param varPrefix - The prefix of the CSS variables to retrieve.
  * @returns An object containing the retrieved CSS variables.
  */
-function getCSSVariablesFromStylesheet(varPrefix: string): Color {
+export const getCSSVariablesFromStylesheet = (varPrefix: string): Color => {
   const cssVariables: Color = {};
 
   Array.from(document.styleSheets)
@@ -41,6 +41,4 @@ function getCSSVariablesFromStylesheet(varPrefix: string): Color {
     });
 
   return cssVariables;
-}
-
-export default getCSSVariablesFromStylesheet;
+};

docs/utils/index.ts

@@ -0,0 +1,2 @@
+export { getCSSVariablesFromStylesheet } from './getCSSVariablesFromStylesheet';
+export { useJsonColor } from './useJsonColor';

docs/utils/useJsonColor.ts

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react';
+
+import figmaBrandColors from '../../src/figma/brandColors.json';
+import figmaDarkTheme from '../../src/figma/darkTheme.json';
+import figmaLightTheme from '../../src/figma/lightTheme.json';
+
+export type ColorDetails = {
+  value: string;
+  type: string;
+  parent: string;
+  description: string;
+};
+
+export type ColorPalette = {
+  [shade: string]: ColorDetails;
+};
+
+export type Theme = {
+  [colorName: string]: ColorPalette;
+};
+
+type CompiledColors = {
+  [themeName: string]: Theme;
+};
+
+export const useJsonColor = (): CompiledColors => {
+  const [colors, setColors] = useState<CompiledColors>({});
+
+  useEffect(() => {
+    const parseColorValue = (value: string, theme: Theme): string => {
+      if (value.startsWith('{') && value.endsWith('}')) {
+        const path = value.slice(1, -1).split('.');
+        let current: any = theme;
+        for (const segment of path) {
+          current = current[segment];
+          if (!current) {
+            return value; // If unresolved alias, return as is.
+          }
+        }
+        return current.value; // Resolved alias value.
+      }
+      return value;
+    };
+
+    const compileColors = (themes: {
+      [key: string]: Theme;
+    }): CompiledColors => {
+      const compiledColors: CompiledColors = {};
+      Object.entries(themes).forEach(([themeName, theme]) => {
+        compiledColors[themeName] = {};
+        Object.entries(theme).forEach(([colorName, colorValues]) => {
+          compiledColors[themeName][colorName] = {};
+          Object.entries(colorValues).forEach(([shade, details]) => {
+            const { value, description } = details;
+            const resolvedValue = parseColorValue(value, figmaBrandColors);
+            compiledColors[themeName][colorName][shade] = {
+              ...details,
+              value: resolvedValue,
+              description:
+                description +
+                (value !== resolvedValue ? ` Alias: ${value}` : ''),
+            };
+          });
+        });
+      });
+      return compiledColors;
+    };
+
+    const allColors = compileColors({
+      brandColor: { ...figmaBrandColors },
+      lightTheme: figmaLightTheme,
+      darkTheme: figmaDarkTheme,
+    });
+    setColors(allColors);
+  }, []);
+
+  return colors;
+};