refactor: refactoring get css variable function to work for both brand and theme tokens

Author: georgewrmarshall

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<Color>({});
-
-    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 (
       <div
         style={{
@@ -72,7 +38,7 @@ export const CSS: Story = {
         }}
       >
         {/* Mapping through each brand color and rendering a ColorSwatch component for it */}
-        {Object.values(brandColors).map(({ color, name }) => (
+        {Object.values(cssBrandColors).map(({ color, name }) => (
           <ColorSwatch key={name} color={color} name={name} />
         ))}
       </div>

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 (
       <div
         style={{
@@ -79,7 +78,7 @@ export const CSSLightTheme = {
 
 export const CSSDarkTheme = {
   render: () => {
-    const darkThemeColors = getThemeColorsFromStylesheet();
+    const darkThemeColors = getCSSVariablesFromStylesheet('--color-');
     return (
       <div
         style={{
@@ -116,12 +115,10 @@ export const CSSDarkTheme = {
     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

docs/utils/getThemeColorsFromStylesheet.ts renamed to 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;