first commit

calcom/packages/ui/styles/useCalcomTheme.tsx

@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+
+type CssVariables = Record<string, string>;
+
+// Sets up CSS Variables based on brand colours
+const useCalcomTheme = (theme: Record<string, CssVariables>) => {
+  useEffect(() => {
+    Object.entries(theme).forEach(([key, value]) => {
+      if (key === "root") {
+        const root = document.documentElement;
+        Object.entries(value).forEach(([key, value]) => {
+          root.style.setProperty(`--${key}`, value);
+        });
+        return;
+      }
+
+      const elements = document.querySelectorAll(`.${key}`);
+      const nestedEntries = Object.entries(value);
+      nestedEntries.forEach(([nestedKey, nestedValue]) => {
+        elements.forEach((element) => {
+          (element as HTMLElement).style.setProperty(`--${nestedKey}`, nestedValue);
+        });
+      });
+    });
+  }, [theme]);
+};
+
+export { useCalcomTheme };