feat(styles): add theme .vars to access any variable

Author: zettca

packages/styles/src/makeTheme.ts

@@ -4,6 +4,23 @@ import { colors, HvThemeColors, type ColorTokens } from "./tokens/colors";
 import type { HvCustomTheme, HvThemeStructure } from "./types";
 import { mergeTheme } from "./utils";
 
+const getKey = (...keys: string[]) => keys.filter(Boolean).join("-");
+
+/** Uses a Proxy to output the CSS Vars based on the `themeObject` */
+const makeVarsProxy = (themeObject: Record<string, any>, parentKey = "") => {
+  return new Proxy(themeObject, {
+    get(target, prop) {
+      if (prop === "vars" || typeof prop !== "string") return null;
+
+      if (typeof target[prop] === "object" && target[prop] != null) {
+        return makeVarsProxy(target[prop], getKey(parentKey, prop));
+      }
+
+      return `var(--${getKey("uikit", parentKey, prop)})`;
+    },
+  });
+};
+
 /**
  * Generate a theme base on the options received.
  * Takes an incomplete theme object and adds the missing parts.
@@ -17,6 +34,9 @@ export const makeTheme = <Mode extends string = string>(
   const customTheme = typeof options === "function" ? options(theme) : options;
   const newTheme = mergeTheme(baseTheme, customTheme);
 
+  // @ts-expect-error type this correctly
+  newTheme.vars = makeVarsProxy(newTheme);
+
   return newTheme;
 };
 

packages/styles/src/types.ts

@@ -147,6 +147,7 @@ export interface HvThemeStructure<Mode extends string = string>
   colors: {
     modes: Record<Mode, HvThemeColorModeStructure>;
   };
+  vars: HvThemeVars;
 }
 
 // Custom theme

packages/styles/src/utils.ts

@@ -149,7 +149,7 @@ export const getThemesList = (themes: Record<string, any>) => {
 };
 
 export const getThemesVars = (themes: HvThemeStructure[]) => {
-  const vars: Record<string, any> = {};
+  const cssVars: Record<string, any> = {};
 
   themes.forEach((theme) => {
     const colorModes = Object.keys(theme.colors.modes);
@@ -160,19 +160,20 @@ export const getThemesVars = (themes: HvThemeStructure[]) => {
 
       // extract properties that shouldn't be mapped to CSS variables
       // @ts-expect-error align HvTheme <-> HvThemeStructure?
-      const { base, components, name, colors, palette, icons, ...rest } = theme;
+      const { base, components, name, colors, palette, icons, vars, ...rest } =
+        theme;
 
-      vars[styleName] = toCSSVars({
+      cssVars[styleName] = toCSSVars({
         colors: {
           ...colors.modes[colorMode],
         },
       });
 
-      vars[themeName] = toCSSVars({
+      cssVars[themeName] = toCSSVars({
         ...rest,
       });
     });
   });
 
-  return vars;
+  return cssVars;
 };