export TS theme

buildo · Nov 24, 2023 · 3056ce5 · 3056ce5
1 parent 1b25fba
commit 3056ce5
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 5 deletions.
diff --git a/packages/configuration-builder/src/MyTheme.tsx b/packages/configuration-builder/src/MyTheme.tsx
@@ -32,6 +32,7 @@ import {
   IconDiamondsFour,
   IconSwatches,
 } from "./PhosphorIcons";
+import { useConfigurationExporter } from "./utils/useConfigurationExporter";
 
 const numberImages = [image1, image2, image3];
 
@@ -94,6 +95,7 @@ export function MyTheme() {
 
   const { sections } = useConfiguratorStatusContext();
   const navigate = useNavigate();
+  const exportTS = useConfigurationExporter();
 
   return (
     <Box display="flex" flexGrow={1} overflowY="auto" flexDirection="column">
@@ -199,7 +201,10 @@ export function MyTheme() {
                 kind="solid"
                 hierarchy="primary"
                 label={t("Theme.Export.React.action")}
-                onPress={() => {}}
+                onPress={() => {
+                  const ts = exportTS();
+                  console.log(ts);
+                }}
               />
             </Inline>
           </Stack>

diff --git a/packages/configuration-builder/src/utils/colorUtils.ts b/packages/configuration-builder/src/utils/colorUtils.ts
@@ -101,5 +101,9 @@ export function HexToRGB(hex: HexColor): RGB {
 
 export function withAlpha(color: HexColor, alpha: number) {
   const rgb = HexToRGB(color);
-  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha / 100})`;
+  if (alpha === 100) {
+    return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+  } else {
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha / 100})`;
+  }
 }
diff --git a/packages/configuration-builder/src/utils/paletteUtils.ts b/packages/configuration-builder/src/utils/paletteUtils.ts
@@ -1,6 +1,6 @@
 import { match } from "ts-pattern";
 import { ColorConfig, LightnessInterpolation } from "../ColorEditor/ColorEditor";
-import { HSLToHex, withAlpha } from "./colorUtils";
+import { HSLToHex, HexColor, withAlpha } from "./colorUtils";
 import { ThemeConfig } from "../ConfiguratorStatusContext";
 
 export type PaletteName =
@@ -84,10 +84,10 @@ export type ColorToken = {
 export function colorTokenToRGBA(colors: ThemeConfig["colors"]) {
   return (colorToken: ColorToken): string | undefined => {
     if (colorToken.colorKey === "black") {
-      return `rgba(0, 0, 0, ${colorToken.alpha / 100})`;
+      return withAlpha("#000000" as HexColor, colorToken.alpha);
     }
     if (colorToken.colorKey === "white") {
-      return `rgba(255, 255, 255, ${colorToken.alpha / 100})`;
+      return withAlpha("#FFFFFF" as HexColor, colorToken.alpha);
     }
     const [paletteName, step] = colorToken.colorKey.split("-");
     const keyColor = getPaletteKeyColor(paletteName as PaletteName, colors);

diff --git a/packages/configuration-builder/src/utils/useConfigurationExporter.ts b/packages/configuration-builder/src/utils/useConfigurationExporter.ts
@@ -0,0 +1,46 @@
+import { useConfiguratorStatusContext } from "../ConfiguratorStatusContext";
+import { ColorToken, colorTokenToRGBA as _colorTokenToRGBA } from "./paletteUtils";
+
+function colorTokenToVarName(colorToken: ColorToken): string {
+  const tokenPart = `${colorToken.colorKey.replace("-", "")}`;
+  if (colorToken.alpha === 100) {
+    return tokenPart;
+  }
+  return `${tokenPart}_${colorToken.alpha}`;
+}
+
+export function useConfigurationExporter(): () => string {
+  const { tokens, colors } = useConfiguratorStatusContext().theme;
+  const colorTokenToRGBA = _colorTokenToRGBA(colors);
+  return () => {
+    const prelude = `import { BentoTheme } from "@buildo/bento-design-system";`;
+
+    const usedColors: Record<string, string> = {};
+    Object.entries(tokens).forEach(([_, tokensSection]) => {
+      Object.entries(tokensSection).forEach(([_, colorToken]) => {
+        const rgba = colorTokenToRGBA(colorToken);
+        if (rgba) {
+          usedColors[colorTokenToVarName(colorToken)] = rgba;
+        }
+      });
+    });
+
+    const colorConsts = Object.entries(usedColors)
+      .reduce((acc, [colorKey, color]) => {
+        return [...acc, `const ${colorKey} = "${color}";`];
+      }, [] as string[])
+      .join("\n");
+
+    let themeCode = "export const theme: BentoTheme = {\n";
+    Object.entries(tokens).forEach(([key, tokensSection]) => {
+      themeCode += `   ${key}: {\n`;
+      Object.entries(tokensSection).forEach(([key2, colorToken]) => {
+        themeCode += `    ${key2}: ${colorTokenToVarName(colorToken)},\n`;
+      });
+      themeCode += "  },\n";
+    });
+    themeCode += "};";
+
+    return [prelude, colorConsts, themeCode].join("\n\n");
+  };
+}