feat: added conversion scripts for json to css

scripts/brandColors.jsonToCss.js

@@ -0,0 +1,49 @@
+/* eslint-disable guard-for-in */
+/* eslint-disable n/no-sync */
+/* eslint-disable import/unambiguous */
+const fs = require('fs');
+const path = require('path');
+
+const brandColorsPath = path.resolve(
+  __dirname,
+  '../src/figma/brandColors.json',
+);
+const brandColorsCSSPath = path.resolve(
+  __dirname,
+  '../src/css/brand-colors.css',
+);
+
+const brandColors = JSON.parse(fs.readFileSync(brandColorsPath, 'utf8'));
+
+let cssContent = `/**
+ * Brand Colors
+ * Do not use "--brand-colors" in your code
+ * Instead use the "--color-" variables to ensure
+ * theme compatible styles
+ */
+
+:root {
+`;
+
+for (const color in brandColors) {
+  if (color !== 'white' && color !== 'black') {
+    cssContent += `  /* ${color.charAt(0).toUpperCase() + color.slice(1)} */\n`;
+    for (const shade in brandColors[color]) {
+      const variableName = `--brand-colors-${color}-${color}${shade.padStart(
+        3,
+        '0',
+      )}`;
+      const colorValue = brandColors[color][shade].value;
+      cssContent += `  ${variableName}: ${colorValue};\n`;
+    }
+  } else {
+    const variableName = `--brand-colors-${color}`;
+    const colorValue = brandColors[color].value;
+    cssContent += `  ${variableName}: ${colorValue};\n`;
+  }
+}
+
+cssContent += `}\n`;
+
+fs.writeFileSync(brandColorsCSSPath, cssContent, 'utf8');
+console.log('Brand colors CSS file generated successfully.');

scripts/themedColors.jsonToCss.js

@@ -0,0 +1,56 @@
+/* eslint-disable guard-for-in */
+/* eslint-disable jsdoc/require-jsdoc */
+/* eslint-disable n/no-sync */
+/* eslint-disable import/unambiguous */
+const fs = require('fs');
+const path = require('path');
+
+const lightThemePath = path.resolve(__dirname, '../src/figma/lightTheme.json');
+const darkThemePath = path.resolve(__dirname, '../src/figma/darkTheme.json');
+const lightThemeCSSPath = path.resolve(
+  __dirname,
+  '../src/css/light-theme-colors.css',
+);
+const darkThemeCSSPath = path.resolve(
+  __dirname,
+  '../src/css/dark-theme-colors.css',
+);
+
+const lightTheme = JSON.parse(fs.readFileSync(lightThemePath, 'utf8'));
+const darkTheme = JSON.parse(fs.readFileSync(darkThemePath, 'utf8'));
+
+function generateThemeCSS(theme, themeName) {
+  let cssContent = `/*
+ * ${themeName} Theme Colors
+ * Use these css variables in your code.
+ * This will ensure theme compatibility
+ */
+
+${
+  themeName === 'Light' ? ":root, [data-theme='light']" : "[data-theme='dark']"
+} {
+`;
+
+  for (const section in theme) {
+    for (const key in theme[section]) {
+      const variableName = `--color-${section}-${key.replace(/_/gu, '-')}`;
+      const { value } = theme[section][key];
+      const { description } = theme[section][key];
+      const cssValue = value.startsWith('{')
+        ? `var(--brand-colors-${value.slice(1, -1).replace('.', '-')})`
+        : value;
+      cssContent += `  /* ${description} */\n  ${variableName}: ${cssValue};\n`;
+    }
+  }
+
+  cssContent += `}\n`;
+  return cssContent;
+}
+
+fs.writeFileSync(
+  lightThemeCSSPath,
+  generateThemeCSS(lightTheme, 'Light'),
+  'utf8',
+);
+fs.writeFileSync(darkThemeCSSPath, generateThemeCSS(darkTheme, 'Dark'), 'utf8');
+console.log('Theme colors CSS files generated successfully.');

src/css/brand-colors.css

@@ -1,10 +1,10 @@
 /**
- * @deprecated these brand colors have been deprecated in favor of the new brand colors
  * Brand Colors
  * Do not use "--brand-colors" in your code
  * Instead use the "--color-" variables to ensure
  * theme compatible styles
  */
+
 :root {
   /* Grey */
   --brand-colors-grey-grey100: #d6d9dc;
@@ -104,7 +104,6 @@
   --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;
 }