From 50a7b5937166ad80d7bcd3a75fab18aef382b251 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Wed, 11 Dec 2024 15:51:34 +0000
Subject: [PATCH] fix: all variables with camel case not working

---
 apps/web/src/app/embed/css-vars.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/embed/css-vars.ts b/apps/web/src/app/embed/css-vars.ts
index a66c173dc..bedf46c0e 100644
--- a/apps/web/src/app/embed/css-vars.ts
+++ b/apps/web/src/app/embed/css-vars.ts
@@ -1,5 +1,4 @@
 import { colord } from 'colord';
-import { toSnakeCase } from 'remeda';
 import { z } from 'zod';
 
 export const ZCssVarsSchema = z
@@ -47,7 +46,9 @@ export const toNativeCssVars = (vars: TCssVarsSchema) => {
       const color = colord(value);
       const { h, s, l } = color.toHsl();
 
-      cssVars[`--${toSnakeCase(key)}`] = `${h}deg ${s}% ${l}%`;
+      // Convert camelCase to kebab-case (e.g., mutedForeground -> muted-foreground)
+      const kebabKey = key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+      cssVars[`--${kebabKey}`] = `${h} ${s} ${l}`;
     }
   }