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

Author: zettca

packages/core/src/Typography/Typography.tsx

@@ -18,6 +18,9 @@ import {
 
 export { staticClasses as typographyClasses };
 
+/** extend this interface with your custom typography variants */
+export interface HvCustomTypographyVariants {}
+
 export type HvTypographyClasses = ExtractNames<typeof useClasses>;
 
 const HvTypographyMap = {
@@ -62,7 +65,11 @@ export type HvTypographyProps<C extends React.ElementType = "p"> =
     C,
     {
       /** Use the variant prop to change the visual style of the Typography. */
-      variant?: HvTypographyVariants | HvTypographyLegacyVariants;
+      variant?:
+        | HvTypographyVariants
+        | HvTypographyLegacyVariants
+        | keyof HvCustomTypographyVariants
+        | (string & {});
       /** If `true` the typography will display the look of a link. */
       link?: boolean;
       /** If `true` the typography will display the look of a disabled state. */
@@ -95,10 +102,10 @@ export const HvTypography = fixedForwardRef(function HvTypography<
     component: ComponentProp,
     classes: classesProp,
     variant: variantProp = "body",
-    link = false,
-    noWrap = false,
-    paragraph = false,
-    disabled = false,
+    link,
+    noWrap,
+    paragraph,
+    disabled,
     ...others
   } = useDefaultProps("HvTypography", props);
   const { classes, css, cx } = useClasses(classesProp);

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/themes/pentahoPlus.ts

@@ -16,6 +16,13 @@ import {
 
 const pentahoPlus = makeTheme((theme) => ({
   name: "pentahoPlus",
+  otherColors: {
+    gray: {
+      strong: "lightgray",
+      subtle: "gainsboro",
+      dimmed: "darkgray",
+    },
+  },
   colors: makeColors({
     brand: blue[600],
     catastrophic: [rose[800], pink[600]],
@@ -27,6 +34,8 @@ const pentahoPlus = makeTheme((theme) => ({
     shadow: `0px 2px 4px -1px ${theme.alpha(slate[700], 0.08)}`,
     shad1: theme.alpha(slate[700], 0.08),
 
+    veryPurple: "rebeccapurple",
+
     primary: [blue[600], blue[500]],
     primaryStrong: [blue[700], blue[600]],
     primaryDeep: [blue[800], blue[700]],
@@ -95,6 +104,15 @@ const pentahoPlus = makeTheme((theme) => ({
       fontSize: theme.fontSizes.xl3,
       lineHeight: theme.lineHeights.xl3,
       letterSpacing: "0.00384em",
+      backgroundColor: "red",
+    },
+    title1Label: {
+      color: "white",
+      fontWeight: theme.fontWeights.bold,
+      fontSize: theme.fontSizes.xl3,
+      lineHeight: theme.lineHeights.xl3,
+      letterSpacing: "0.00384em",
+      backgroundColor: "red",
     },
     title2: {
       color: theme.colors.secondary,
@@ -103,6 +121,14 @@ const pentahoPlus = makeTheme((theme) => ({
       lineHeight: theme.lineHeights.xl2,
       letterSpacing: "0.00288em",
     },
+    title2Label: {
+      color: "white",
+      fontWeight: theme.fontWeights.bold,
+      fontSize: theme.fontSizes.xl2,
+      lineHeight: theme.lineHeights.xl2,
+      letterSpacing: "0.00288em",
+      backgroundColor: "red",
+    },
     title3: {
       color: theme.colors.secondary,
       fontWeight: theme.fontWeights.semibold,

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;
 };