chore: resolving conflicts from main

CHANGELOG.md

@@ -7,6 +7,36 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [3.0.0]
+
+### Added
+
+- Enabled MetaMask security code scanner ([#635](https://github.com/MetaMask/design-tokens/pull/635)).
+- Added initial JSON generated from Figma ([#665](https://github.com/MetaMask/design-tokens/pull/665)).
+
+### Changed
+
+- Refactored color swatch component and CSS stories to use CSS variables instead of hex values ([#696](https://github.com/MetaMask/design-tokens/pull/696)).
+- Upgraded Storybook to 8.1.2 ([#690](https://github.com/MetaMask/design-tokens/pull/690)).
+- Updated README to add tooling section that links to eslint-plugin ([#689](https://github.com/MetaMask/design-tokens/pull/689)).
+- Cleaned JSON token names ([#679](https://github.com/MetaMask/design-tokens/pull/679)).
+- Refactored CSS and improved build to adhere to workspace conventions ([#676](https://github.com/MetaMask/design-tokens/pull/676)).
+- Upgraded Storybook to version 8 ([#674](https://github.com/MetaMask/design-tokens/pull/674)).
+- Added initial JSON generated from Figma variables ([#673](https://github.com/MetaMask/design-tokens/pull/673)).
+- Upgraded LavaMoat ([#670](https://github.com/MetaMask/design-tokens/pull/670)).
+- Aligned release docs with the latest standards ([#634](https://github.com/MetaMask/design-tokens/pull/634)).
+
+### Fixed
+
+- Fixed CSS theme variables doc display ([#672](https://github.com/MetaMask/design-tokens/pull/672)).
+- Fixed build to align with module template ([#667](https://github.com/MetaMask/design-tokens/pull/667)).
+
+### Security
+
+- Bumped `webpack-dev-middleware` from 6.1.1 to 6.1.2 ([#636](https://github.com/MetaMask/design-tokens/pull/636)).
+- Bumped `express` from 4.18.2 to 4.19.2 ([#638](https://github.com/MetaMask/design-tokens/pull/638)).
+- Bumped `tar` from 6.2.0 to 6.2.1 ([#652](https://github.com/MetaMask/design-tokens/pull/652)).
+
 ## [2.1.1]
 
 ### Changed
@@ -260,7 +290,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Initial release.
 
-[Unreleased]: https://github.com/MetaMask/design-tokens/compare/v2.1.1...HEAD
+[Unreleased]: https://github.com/MetaMask/design-tokens/compare/v3.0.0...HEAD
+[3.0.0]: https://github.com/MetaMask/design-tokens/compare/v2.1.1...v3.0.0
 [2.1.1]: https://github.com/MetaMask/design-tokens/compare/v2.1.0...v2.1.1
 [2.1.0]: https://github.com/MetaMask/design-tokens/compare/v2.0.3...v2.1.0
 [2.0.3]: https://github.com/MetaMask/design-tokens/compare/v2.0.2...v2.0.3

docs/BrandColors.stories.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { brandColor as brandColorJS } from '../src/js';
 import {
   getCSSVariablesFromStylesheet,
   getContrastYIQ,
   useJsonColor,
 } from './utils';
 import { ColorSwatchGroup, ColorSwatch } from './components';
 import README from './BrandColors.mdx';
-import { brandColor as brandColorJS } from '../src/js/brandColor';
 
 const meta: Meta<typeof ColorSwatchGroup> = {
   title: 'Colors/Brand Colors',
@@ -26,7 +26,7 @@ type Story = StoryObj<typeof ColorSwatchGroup>;
 export const Figma: Story = {
   render: () => {
     const { brandColor } = useJsonColor();
-    console.log(brandColor);
+    console.log('brandColor JSON', brandColor);
     return <ColorSwatchGroup swatchData={brandColor} />;
   },
 };

docs/ThemeColors.stories.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import brandColor from '../src/figma/brandColors.json';
 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,
   getContrastYIQ,
+  getJSColors,
   useJsonColor,
 } from './utils';
 
@@ -146,57 +147,59 @@ export const CSSDarkTheme = {
 };
 
 export const JSLightTheme = {
-  render: () => (
-    <div
-      style={{
-        display: 'grid',
-        gap: '16px',
-        gridTemplateColumns: 'repeat(auto-fill, 300px)',
-      }}
-    >
-      {Object.entries(lightThemeJS.colors).flatMap(([category, colorObj]) =>
-        Object.entries(colorObj).map(([name, color]) => (
+  render: () => {
+    const colors = getJSColors(lightThemeJS.colors);
+    return (
+      <div
+        style={{
+          display: 'grid',
+          gap: '16px',
+          gridTemplateColumns: 'repeat(auto-fill, 300px)',
+        }}
+      >
+        {colors.map(({ name, color }) => (
           <ColorSwatch
-            key={`${category}-${name}`}
+            key={name}
             color={color}
             textBackgroundColor="transparent"
             textColor={getContrastYIQ(
               color,
               lightThemeJS.colors.background.default,
             )}
-            name={`color.${category}.${name}`}
+            name={name}
           />
-        )),
-      )}
-    </div>
-  ),
+        ))}
+      </div>
+    );
+  },
 };
 export const JSDarkTheme = {
-  render: () => (
-    <div
-      style={{
-        display: 'grid',
-        gap: '16px',
-        gridTemplateColumns: 'repeat(auto-fill, 300px)',
-        padding: '1rem',
-        margin: '-1rem', // negates storybook padding and removes white border
-        backgroundColor: darkThemeJS.colors.background.default,
-      }}
-    >
-      {Object.entries(darkThemeJS.colors).flatMap(([category, colorObj]) =>
-        Object.entries(colorObj).map(([name, color]) => (
+  render: () => {
+    const colors = getJSColors(darkThemeJS.colors);
+    return (
+      <div
+        style={{
+          display: 'grid',
+          gap: '16px',
+          gridTemplateColumns: 'repeat(auto-fill, 300px)',
+          padding: '1rem',
+          margin: '-1rem', // negates storybook padding and removes white border
+          backgroundColor: darkThemeJS.colors.background.default,
+        }}
+      >
+        {colors.map(({ name, color }) => (
           <ColorSwatch
-            key={`${category}-${name}`}
+            key={name}
             color={color}
             textBackgroundColor="transparent"
             textColor={getContrastYIQ(
               color,
               darkThemeJS.colors.background.default,
             )}
-            name={`color.${category}.${name}`}
+            name={name}
           />
-        )),
-      )}
-    </div>
-  ),
+        ))}
+      </div>
+    );
+  },
 };

docs/components/ColorSwatchGroup/ColorSwatchGroup.tsx

@@ -24,7 +24,7 @@ function toCamelCase(str: string) {
     return str;
   }
   return str.replace(/-([a-z])/gi, function (g) {
-    return g[1].toUpperCase();
+    return (g[1] ?? '').toUpperCase();
   });
 }
 
@@ -112,13 +112,14 @@ export const ColorSwatchGroup: React.FC<ColorSwatchGroupProps> = ({
               }}
             >
               {sortedColorKeys.map(({ originalKey, camelCaseKey }) => {
-                const { value, description } = colors[originalKey];
+                const colorDetails = colors[originalKey];
+                const { value = '', description } = colorDetails || {};
                 return (
                   <div key={camelCaseKey}>
                     <ColorSwatch
                       color={value}
                       name={`${category}.${camelCaseKey}`}
-                      textColor={getContrastYIQ(value, theme)}
+                      textColor={getContrastYIQ(value ?? '', theme)}
                       {...{ textBackgroundColor }}
                     />
                     {description && (

docs/utils/getJSColors.ts

@@ -0,0 +1,19 @@
+/**
+ * Recursively collects color values and their names from a JavaScript color object using dot notation.
+ *
+ * @param obj - The color object to traverse.
+ * @param parentKey - The parent key to use for dot notation.
+ * @returns An array of objects containing color value and name.
+ */
+export const getJSColors = (
+  obj: any,
+  parentKey = '',
+): { name: string; color: string }[] => {
+  return Object.entries(obj).flatMap(([key, value]) => {
+    const newKey = parentKey ? `${parentKey}.${key}` : key;
+    if (typeof value === 'string') {
+      return [{ name: newKey, color: value }];
+    }
+    return getJSColors(value, newKey);
+  });
+};

docs/utils/index.ts

@@ -1,3 +1,4 @@
 export { getCSSVariablesFromStylesheet } from './getCSSVariablesFromStylesheet';
 export { getContrastYIQ } from './getContrastYIQ';
+export { getJSColors } from './getJSColors';
 export { useJsonColor } from './useJsonColor';

docs/utils/useJsonColor.ts

@@ -16,7 +16,7 @@ export type ColorPalette = {
 };
 
 export type Theme = {
-  [colorName: string]: ColorPalette;
+  [colorName: string]: ColorPalette | ColorDetails;
 };
 
 type CompiledColors = {
@@ -58,6 +58,7 @@ export const useJsonColor = (): CompiledColors => {
       }
       return value; // Return the direct value if not a reference.
     };
+
     /**
      * Compiles color themes from provided JSON theme definitions.
      * Each color value is checked and potentially resolved using parseColorValue.
@@ -70,47 +71,53 @@ export const useJsonColor = (): CompiledColors => {
     }): CompiledColors => {
       const compiledColors: CompiledColors = {};
       Object.entries(themes).forEach(([themeName, theme]) => {
-        compiledColors[themeName] = {};
+        const tempThemeColors: Theme = {};
         Object.entries(theme).forEach(([colorName, colorValues]) => {
-          compiledColors[themeName][colorName] = {};
-          // catches single color entries like white and black
-          if (colorValues.value) {
-            compiledColors[themeName][colorName] = {
+          if (typeof colorValues.value === 'string') {
+            tempThemeColors[colorName] = {
               ...colorValues,
-              value: colorValues.value,
-              description: colorValues.description,
+              value: parseColorValue(colorValues.value, figmaBrandColors),
             };
           } else {
+            const tempThemeColorPalette: ColorPalette = {};
             Object.entries(colorValues).forEach(([shade, details]) => {
-              const { value, description } = details;
-              let resolvedValue = parseColorValue(value, figmaBrandColors);
+              let resolvedValue = parseColorValue(
+                details.value,
+                figmaBrandColors,
+              );
               if (!isHexColor(resolvedValue)) {
                 const cleanResolvedValue = resolvedValue
                   .slice(1, -1)
                   .split('.'); // Split the reference into parts
                 const category = cleanResolvedValue[0]; // Get the category (e.g., 'text')
                 const key = cleanResolvedValue[1]; // Get the key (e.g., 'default')
-
-                if (theme[category]?.[key]) {
-                  resolvedValue = parseColorValue(
-                    theme[category][key].value,
-                    figmaBrandColors,
-                  );
-                } else {
-                  console.error('Invalid reference:', resolvedValue);
+                if (category) {
+                  if (theme[category]?.[key]) {
+                    resolvedValue = parseColorValue(
+                      theme[category][key].value,
+                      figmaBrandColors,
+                    );
+                  } else {
+                    console.error('Invalid reference:', resolvedValue);
+                  }
                 }
               }
 
-              compiledColors[themeName][colorName][shade] = {
+              const description: string = details.description ?? '';
+              const valueAsString = String(details.value);
+              const additionalDescription: string =
+                details.value === resolvedValue ? '' : ` ${valueAsString}`;
+
+              tempThemeColorPalette[shade] = {
                 ...details,
                 value: resolvedValue,
-                description:
-                  (description ?? '') +
-                  (value === resolvedValue ? '' : ` (was ${value})`),
+                description: description + additionalDescription,
               };
             });
+            tempThemeColors[colorName] = tempThemeColorPalette;
           }
         });
+        compiledColors[themeName] = tempThemeColors;
       });
 
       return compiledColors;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask/design-tokens",
-  "version": "2.1.1",
+  "version": "3.0.0",
   "description": "Design tokens to be used throughout MetaMask products",
   "keywords": [
     "MetaMask",