Feat/brand colors figma variables

MIGRATION.md

@@ -3,6 +3,7 @@
 This guide provides detailed instructions for migrating your project from one version of the `@metamask/design-tokens` to another.
 
 - [From version 2.1.1 to 3.0.0](#from-version-211-to-300)
+- [From version 3.0.0 to 4.0.0](#from-version-300-to-400)
 
 ## From version 2.1.1 to 3.0.0
 
@@ -29,3 +30,91 @@ import '../../node_modules/@metamask/design-tokens/dist/styles.css';
 ```
 
 This new path points to the `dist` directory, ensuring that you're importing the most optimized and production-ready version of the stylesheet.
+
+## From version 3.0.0 to 4.0.0
+
+## Migration from Version 3.0.0 to 4.0.0
+
+### Changes to Color Tokens (Breaking Changes)
+
+In this version, significant updates have been made to color tokens, including additions, modifications, and removals. To upgrade to version 4, ensure that the following tokens are not present in your codebase:
+
+### Removed
+
+#### CSS
+
+```
+--brand-colors-grey-grey030
+--brand-colors-grey-grey040
+--brand-colors-grey-grey750
+--brand-colors-blue-blue000
+--brand-colors-green-green000
+--brand-colors-red-red000
+--brand-colors-yellow-yellow000
+--brand-colors-orange-orange000
+--brand-colors-violet
+--brand-colors-white-white010
+--color-overlay-inverse
+--color-primary-shadow
+--color-primary-disabled
+--color-secondary
+--color-error-shadow
+--color-error-disabled
+--color-warning-alternative
+--color-warning-disabled
+--color-success-alternative
+--color-success-disabled
+--color-info-alternative
+--color-info-disabled
+--color-network-
+```
+
+#### JS
+
+```
+brandColor.grey030
+brandColor.grey040
+brandColor.grey750
+brandColor.blue000
+brandColor.green000
+brandColor.red000
+brandColor.yellow000
+brandColor.orange000
+brandColor.violet
+brandColor.white010
+```
+
+### Changed
+
+#### CSS
+
+```
+--brand-colors-white-white000 to --brand-colors-white
+--brand-colors-black-black000 to --brand-colors-black
+```
+
+#### JS
+
+```
+brandColor.white000` to `brandColor.white
+brandColor.black000` to `brandColor.black
+```
+
+### Themed Colors
+
+- overlay-inverse removed
+- primary-shadow removed
+- primary-disabled removed
+- secondary colors removed
+- error-shadow removed
+- error-disabled removed
+- warning-alternative removed
+- warning-disabled removed
+- success-alternative removed
+- success-disabled removed
+- info-alternative removed
+- info-disabled removed
+- network colors removed
+- shadow-primary added
+- shadow-error added
+- button colors removed

automation-scripts/brandColor.js

@@ -0,0 +1,67 @@
+// Script not used in build process, but can be run manually `node brandColor.js` to generate TypeScript types and JavaScript object mapping for brand colors based on a JSON file.
+// Followed by manual steps to transpile the JSON to JS tokens
+const fs = require('fs').promises;
+
+/**
+ * Generate TypeScript types and JavaScript object mapping for brand colors based on a JSON file.
+ * @param {string} inputFilePath - The path to the JSON file containing color definitions.
+ * @param {string} typesOutputFilePath - The path where the TypeScript types file should be written.
+ * @param {string} colorsOutputFilePath - The path where the JavaScript colors object file should be written.
+ */
+async function generateBrandColorFiles(
+  inputFilePath,
+  typesOutputFilePath,
+  colorsOutputFilePath,
+) {
+  try {
+    const data = await fs.readFile(inputFilePath, 'utf8');
+    const colorData = JSON.parse(data);
+    let tsOutput = 'export type BrandColor = {\n';
+    let jsOutput =
+      "import type { BrandColor } from './brandColor.types';\n\nexport const brandColor: BrandColor = {\n";
+
+    Object.entries(colorData).forEach(([colorFamily, shades]) => {
+      Object.entries(shades).forEach(([shade, details]) => {
+        // Skip shades with a dash followed by numbers and a percent sign (e.g., "500-10%")
+        if (!/-\d+%/u.test(shade)) {
+          const comment = `/** ${colorFamily}/${colorFamily}${shade}: ${details.value} */`;
+          const tsLine = `  ${colorFamily}${shade}: string;`;
+          tsOutput += `  ${comment}\n  ${tsLine}\n`;
+
+          // Add color definition to jsOutput
+          const jsComment = `  // ${
+            colorFamily.charAt(0).toUpperCase() + colorFamily.slice(1)
+          }\n`;
+          const jsLine = `  ${colorFamily}${shade}: '${details.value}',\n`;
+          jsOutput += jsComment + jsLine;
+        }
+      });
+    });
+
+    tsOutput += '};\n';
+    jsOutput += '};\n';
+
+    // Write the TypeScript types file
+    await fs.writeFile(typesOutputFilePath, tsOutput);
+    console.log(
+      `TypeScript types file has been created successfully at ${typesOutputFilePath}.`,
+    );
+
+    // Write the JavaScript colors file
+    await fs.writeFile(colorsOutputFilePath, jsOutput);
+    console.log(
+      `JavaScript colors file has been created successfully at ${colorsOutputFilePath}.`,
+    );
+  } catch (error) {
+    console.error('Failed to read or write files:', error);
+  }
+}
+
+const inputFilePath = '../src/figma/brandColors.json';
+const typesOutputFilePath = '../src/js/brandColor/brandColor.types.ts';
+const colorsOutputFilePath = '../src/js/brandColor/brandColor.ts';
+generateBrandColorFiles(
+  inputFilePath,
+  typesOutputFilePath,
+  colorsOutputFilePath,
+);

automation-scripts/themeColors.js

@@ -0,0 +1,73 @@
+// Script not used in build process, but can be run manually `node themeColors.js` to generate TypeScript types and JavaScript object mapping for brand colors based on a JSON file.
+// Followed by manual steps to transpile the JSON to JS tokens
+const fs = require('fs').promises;
+
+/**
+ * Generate JavaScript object mapping for light theme colors based on a JSON file.
+ * @param {string} inputFilePath - The path to the JSON file containing light theme color definitions.
+ * @param {string} colorsOutputFilePath - The path where the JavaScript colors object file should be written.
+ */
+async function generateThemeFiles(inputFilePath, colorsOutputFilePath) {
+  try {
+    const data = await fs.readFile(inputFilePath, 'utf8');
+    const colorData = JSON.parse(data);
+    let jsOutput = "import { brandColor } from '../../brandColor';\n";
+    jsOutput += "import type { ThemeColors } from '../types';\n\n";
+    jsOutput += 'export const colors: ThemeColors = {\n';
+
+    Object.entries(colorData).forEach(([colorCategory, colorDetails]) => {
+      jsOutput += `  ${colorCategory}: {\n`;
+
+      Object.entries(colorDetails).forEach(([shade, details]) => {
+        // Remove asterisks, convert kebab-case to camelCase, and simplify certain names
+        let cleanShade = shade
+          .replace(/\*/gu, '')
+          .replace(/-([a-z])/giu, (_, p1) => p1.toUpperCase());
+        cleanShade = cleanShade.replace(/\s*\(strong\)\s*/giu, '');
+
+        let valueReference;
+        // Match patterns with and without percentage modifiers
+        if (details.value.match(/^\{.*?\..*?\}(-\d+%)?$/u)) {
+          valueReference = details.value.replace(
+            /\{(.*?)\.(.*?)(-\d+%)?\}/u,
+            (_, p1, p2, p3) => {
+              // Replace "-" with "_" and remove "%" for percentage-based modifiers
+              return `brandColor.${p1}${p2}${
+                p3 ? p3.replace(/-/gu, '_').replace(/%/gu, '') : ''
+              }`;
+            },
+          );
+        } else if (details.value.match(/^#[0-9A-Fa-f]{6,8}$/u)) {
+          // If the value is a hex color, ensure it is in quotes
+          valueReference = `'${details.value}'`;
+        } else {
+          valueReference = details.value;
+        }
+        const jsLine = `    ${cleanShade}: ${valueReference},  // ${details.description}\n`;
+        jsOutput += jsLine;
+      });
+
+      jsOutput += '  },\n';
+    });
+
+    jsOutput += '};\n';
+
+    // Write the JavaScript colors file
+    await fs.writeFile(colorsOutputFilePath, jsOutput);
+    console.log(
+      `JavaScript colors file has been created successfully at ${colorsOutputFilePath}. There are some manual steps to complete in the output files.`,
+    );
+  } catch (error) {
+    console.error('Failed to read or write files:', error);
+  }
+}
+
+// Light Theme
+const inputFilePathLight = '../src/figma/lightTheme.json';
+const colorsOutputFilePathLight = '../src/js/themes/lightTheme/colors.ts';
+generateThemeFiles(inputFilePathLight, colorsOutputFilePathLight);
+
+// Dark Theme
+const inputFilePathDark = '../src/figma/darkTheme.json';
+const colorsOutputFilePathDark = '../src/js/themes/darkTheme/colors.ts';
+generateThemeFiles(inputFilePathDark, colorsOutputFilePathDark);

src/css/brand-colors.css

@@ -6,22 +6,21 @@
  * theme compatible styles
  */
 :root {
-  --brand-colors-white-white000: #ffffff;
-  --brand-colors-white-white010: #fcfcfc;
-  --brand-colors-black-black000: #000000;
-  --brand-colors-grey-grey030: #fafbfc;
-  --brand-colors-grey-grey040: #f2f4f6;
+  /* Grey */
   --brand-colors-grey-grey100: #d6d9dc;
   --brand-colors-grey-grey200: #bbc0c5;
   --brand-colors-grey-grey300: #9fa6ae;
   --brand-colors-grey-grey400: #848c96;
   --brand-colors-grey-grey500: #6a737d;
   --brand-colors-grey-grey600: #535a61;
   --brand-colors-grey-grey700: #3b4046;
-  --brand-colors-grey-grey750: #2e3339;
   --brand-colors-grey-grey800: #24272a;
   --brand-colors-grey-grey900: #141618;
-  --brand-colors-blue-blue000: #eaf6ff;
+  --brand-colors-grey-grey1000: #000000;
+  --brand-colors-grey-grey050: #f2f4f6;
+  --brand-colors-grey-grey000: #ffffff;
+  --brand-colors-grey-grey025: #fafbfc;
+  /* Blue */
   --brand-colors-blue-blue100: #a7d9fe;
   --brand-colors-blue-blue200: #75c4fd;
   --brand-colors-blue-blue300: #43aefc;
@@ -31,43 +30,81 @@
   --brand-colors-blue-blue700: #024272;
   --brand-colors-blue-blue800: #01253f;
   --brand-colors-blue-blue900: #00080d;
-  --brand-colors-orange-orange000: #fef5ef;
-  --brand-colors-orange-orange100: #fde2cf;
-  --brand-colors-orange-orange200: #fbc49d;
-  --brand-colors-orange-orange300: #faa66c;
-  --brand-colors-orange-orange400: #f8883b;
-  --brand-colors-orange-orange500: #f66a0a;
-  --brand-colors-orange-orange600: #bf5208;
-  --brand-colors-orange-orange700: #954005;
-  --brand-colors-orange-orange800: #632b04;
-  --brand-colors-orange-orange900: #321602;
-  --brand-colors-green-green000: #f3fcf5;
-  --brand-colors-green-green100: #d6ffdf;
-  --brand-colors-green-green200: #afecbd;
-  --brand-colors-green-green300: #86e29b;
-  --brand-colors-green-green400: #5dd879;
-  --brand-colors-green-green500: #28a745;
-  --brand-colors-green-green600: #1c8234;
+  --brand-colors-blue-blue050: #eaf6ff;
+  --brand-colors-blue-blue025: #eaf6ff;
+  /* Green */
+  --brand-colors-green-green100: #afecbd;
+  --brand-colors-green-green200: #5dd879;
+  --brand-colors-green-green300: #28a745;
+  --brand-colors-green-green400: #28a745;
+  --brand-colors-green-green500: #1c8234;
+  --brand-colors-green-green600: #145523;
   --brand-colors-green-green700: #145523;
   --brand-colors-green-green800: #0a2c12;
   --brand-colors-green-green900: #041007;
-  --brand-colors-red-red000: #fcf2f3;
+  --brand-colors-green-green050: #d6ffdf;
+  --brand-colors-green-green025: #f3fcf5;
+  /* Red */
   --brand-colors-red-red100: #f7d5d8;
   --brand-colors-red-red200: #f1b9be;
   --brand-colors-red-red300: #e88f97;
   --brand-colors-red-red400: #e06470;
   --brand-colors-red-red500: #d73847;
-  --brand-colors-red-red600: #b92534;
-  --brand-colors-red-red700: #8e1d28;
-  --brand-colors-red-red800: #64141c;
+  --brand-colors-red-red600: #8e1d28;
+  --brand-colors-red-red700: #64141c;
+  --brand-colors-red-red800: #3a0c10;
   --brand-colors-red-red900: #3a0c10;
+  --brand-colors-red-red050: #fcf2f3;
+  --brand-colors-red-red025: #fcf2f3;
+  /* Yellow */
+  --brand-colors-yellow-yellow100: #ffdf70;
+  --brand-colors-yellow-yellow200: #ffc70a;
+  --brand-colors-yellow-yellow300: #f8883b;
+  --brand-colors-yellow-yellow400: #f66a0a;
+  --brand-colors-yellow-yellow500: #bf5208;
+  --brand-colors-yellow-yellow600: #954005;
+  --brand-colors-yellow-yellow700: #632b04;
+  --brand-colors-yellow-yellow800: #321602;
+  --brand-colors-yellow-yellow900: #321602;
+  --brand-colors-yellow-yellow050: #fff2c5;
+  --brand-colors-yellow-yellow025: #fefcde;
+  /* Orange */
+  --brand-colors-orange-orange100: #fbc49d;
+  --brand-colors-orange-orange200: #faa66c;
+  --brand-colors-orange-orange300: #f8883b;
+  --brand-colors-orange-orange400: #f66a0a;
+  --brand-colors-orange-orange500: #bf5208;
+  --brand-colors-orange-orange600: #954005;
+  --brand-colors-orange-orange700: #632b04;
+  --brand-colors-orange-orange800: #321602;
+  --brand-colors-orange-orange900: #321602;
+  --brand-colors-orange-orange050: #fde2cf;
+  --brand-colors-orange-orange025: #fef5ef;
+  /* Purple */
+  --brand-colors-purple-purple100: #efd2ff;
+  --brand-colors-purple-purple200: #cfb5f0;
+  --brand-colors-purple-purple300: #d27dff;
+  --brand-colors-purple-purple400: #b864f5;
   --brand-colors-purple-purple500: #8b45b6;
-  --brand-colors-violet-violet300: #cfb5f0;
-  --brand-colors-yellow-yellow000: #fffdf8;
-  --brand-colors-yellow-yellow100: #fefcde;
-  --brand-colors-yellow-yellow200: #fff2c5;
-  --brand-colors-yellow-yellow300: #ffeaa3;
-  --brand-colors-yellow-yellow400: #ffdf70;
-  --brand-colors-yellow-yellow500: #ffd33d;
-  --brand-colors-yellow-yellow600: #ffc70a;
+  --brand-colors-purple-purple600: #6c2ab2;
+  --brand-colors-purple-purple700: #4c1178;
+  --brand-colors-purple-purple800: #32054d;
+  --brand-colors-purple-purple900: #280a00;
+  --brand-colors-purple-purple050: #fbf2ff;
+  --brand-colors-purple-purple025: #fcf6ff;
+  /* Lime */
+  --brand-colors-lime-lime100: #b8ef4a;
+  --brand-colors-lime-lime200: #95ca45;
+  --brand-colors-lime-lime300: #7ab040;
+  --brand-colors-lime-lime400: #64993d;
+  --brand-colors-lime-lime500: #457a39;
+  --brand-colors-lime-lime600: #275b35;
+  --brand-colors-lime-lime700: #093a31;
+  --brand-colors-lime-lime800: #022321;
+  --brand-colors-lime-lime900: #011515;
+  --brand-colors-lime-lime025: #effed9;
+  --brand-colors-lime-lime050: #e3febd;
+  /* White and Black */
+  --brand-colors-white: #ffffff;
+  --brand-colors-black: #000000;
 }