From 0c9ce784fbe5cdc17554cf1dd245746160850625 Mon Sep 17 00:00:00 2001
From: Vincenzo Guerrisi <vincenzo@buildo.io>
Date: Thu, 7 Dec 2023 14:12:34 +0100
Subject: [PATCH] Export boxShadows for outlineColors + fix export

---
 .../src/utils/useConfigGeneratorTS.ts         | 30 +++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/configuration-builder/src/utils/useConfigGeneratorTS.ts b/packages/configuration-builder/src/utils/useConfigGeneratorTS.ts
index 8e4b524c8..7d35b64c0 100644
--- a/packages/configuration-builder/src/utils/useConfigGeneratorTS.ts
+++ b/packages/configuration-builder/src/utils/useConfigGeneratorTS.ts
@@ -23,11 +23,13 @@ function elevationToVarName(elevation: "small" | "medium" | "large"): string {
 export function useConfigGeneratorTS(): () => string {
   const { tokens, colors, elevations } = useConfiguratorStatusContext().theme;
   const colorTokenToValue = _colorTokenToValue(colors);
+
   function elevationToValue(elevation: ElevationConfig): string {
-    return `${elevation.x}px ${elevation.y}px ${elevation.blur}px ${colorTokenToValue(
+    return `${elevation.x}px ${elevation.y}px ${elevation.blur}px \${${colorTokenToVarName(
       elevation.color
-    )}`;
+    )}}`;
   }
+
   return () => {
     const prelude = `import { BentoTheme } from "@buildo/bento-design-system";`;
 
@@ -40,6 +42,12 @@ export function useConfigGeneratorTS(): () => string {
         }
       });
     });
+    Object.entries(elevations).forEach(([_, elevation]) => {
+      const rgba = colorTokenToValue(elevation.color);
+      if (rgba) {
+        usedColors[colorTokenToVarName(elevation.color)] = rgba;
+      }
+    });
 
     const colorConsts = Object.entries(usedColors)
       .reduce((acc, [colorKey, color]) => {
@@ -56,10 +64,22 @@ export function useConfigGeneratorTS(): () => string {
       themeCode += "},";
     });
     themeCode += `boxShadow: {`;
+    Object.entries(tokens.outlineColor).forEach(([key, colorToken]) => {
+      themeCode += `${key}: \`inset 0px 0px 0px 1px \${${colorTokenToVarName(colorToken)}}\`,`;
+    });
+    themeCode += `outlineInteractiveBottom: \`inset 0px 0px -1px 0px \${${colorTokenToVarName(
+      tokens.outlineColor.outlineInteractive
+    )}}\`,`;
+    themeCode += `outlineDecorativeBottom: \`inset 0px 0px -1px 0px \${${colorTokenToVarName(
+      tokens.outlineColor.outlineDecorative
+    )}}\`,`;
+    themeCode += `outlineNegativeStrong: \`inset 0px 0px 0px 2px \${${colorTokenToVarName(
+      tokens.outlineColor.outlineNegative
+    )}}\`,`;
     Object.entries(elevations).forEach(([key, value]) => {
-      themeCode += `${elevationToVarName(key as "small" | "medium" | "large")}: "${elevationToValue(
-        value
-      )}",`;
+      themeCode += `${elevationToVarName(
+        key as "small" | "medium" | "large"
+      )}: \`${elevationToValue(value)}\`,`;
     });
     themeCode += `}};`;