Will using vars that import createGlobalThemeContract multiple times in a Monorepo project cause performance loss?

[1111mp]

I have a Monorepo project and this is my directory structure:

|-- public
    |-- .gitignore
    |-- LICENSE
    |-- README.md
    |-- package.json
    |-- pnpm-lock.yaml
    |-- pnpm-workspace.yaml
    |-- tsconfig.json
    |-- turbo.json
    |-- packages
        |-- components
        |   |-- button
        |       |-- package.json
        |       |-- tsconfig.json
        |       |-- src
        |       |   |-- button.tsx
        |       |   |-- index.ts
        |   |-- link
        |       |-- package.json
        |       |-- tsconfig.json
        |       |-- src
        |       |   |-- link.tsx
        |       |   |-- index.ts
        |-- core
        |   |-- react
        |       |-- package.json
        |       |-- tsconfig.json
        |       |-- src
        |       |   |-- button.css.ts
        |       |   |-- link.css.ts
        |       |   |-- index.ts
        |       |   |-- theme.css.ts

Code in core/react project:
theme.css.ts:

import {
  createGlobalTheme,
  createGlobalThemeContract,
} from "@vanilla-extract/css";
import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles";
import { commonColors, semanticColors } from "../colors";
import { flattenThemeObject } from "../utils/object";

const flatCommonColors = flattenThemeObject(commonColors) as Record<
  string,
  string
>;
const commonColorsVars = Object.keys(flatCommonColors).reduce<
  Record<string, string>
>((acc, cur) => {
  acc[cur] = `color-${cur}`;

  return acc;
}, {});

const { light, dark } = semanticColors;

const flatLightColors = flattenThemeObject(light) as Record<string, string>;
const flatDarkColors = flattenThemeObject(dark) as Record<string, string>;
const semanticColorsVars = Object.keys(flatLightColors).reduce<
  Record<string, string>
>((acc, cur) => {
  acc[cur] = `color-${cur}`;

  return acc;
}, {});

const themeVars = createGlobalThemeContract(
  {
    colors: {
      ...commonColorsVars,
      ...semanticColorsVars,
    },
    radius: {
      small: "radius-small",
      medium: "radius-medium",
      large: "radius-large",
    },
  },
  (value) => `blankui-${value}`,
);

console.log(222222);

createGlobalTheme(":root,.light", themeVars, {
  colors: {
    ...flatCommonColors,
    ...flatLightColors,
  },
  radius: {
    small: "4px",
    medium: "6px",
    large: "8px",
  },
});

createGlobalTheme(".dark", themeVars, {
  colors: {
    ...flatCommonColors,
    ...flatDarkColors,
  },
  radius: {
    small: "4px",
    medium: "6px",
    large: "8px",
  },
});

const foreground = defineProperties({
    properties: {
      color: themeVars.colors,
      backgroundColor: themeVars.colors,
    },
  });

const sprinkles = createSprinkles(foreground);

export { themeVars, sprinkles};

button.css.ts:

import { RecipeVariants, recipe } from "@vanilla-extract/recipes";
import { initSprinkles } from "../theme.css";

const sprinkles = initSprinkles();

const button = recipe({
  base: {
    borderRadius: 4,
    outline: "none",
    borderWidth: 0,
  },

  variants: {
    color: {
      default: sprinkles({
        color: "default-foreground",
        backgroundColor: "default",
      }),
      primary: sprinkles({
        color: "primary-foreground",
        backgroundColor: "primary",
      }),
      secondary: sprinkles({
        color: "secondary-foreground",
        backgroundColor: "secondary",
      }),
      success: sprinkles({
        color: "success-foreground",
        backgroundColor: "success",
      }),
      warning: sprinkles({
        color: "warning-foreground",
        backgroundColor: "warning",
      }),
      danger: sprinkles({
        color: "danger-foreground",
        backgroundColor: "danger",
      }),
    },

    size: {
      sm: {
        padding: "4px 8px",
      },
      md: {
        padding: "6px 12px",
      },
      lg: {
        padding: "8px 16px",
      },
    },
  },

  defaultVariants: {
    color: "default",
    size: "md",
  },
});

// Get the type
export type ButtonVariantProps = RecipeVariants<typeof button>;

export { button };

link.css.ts:

import { RecipeVariants, recipe } from "@vanilla-extract/recipes";
import { initSprinkles } from "../theme.css";

const sprinkles = initSprinkles();

const link = recipe({
  base: {
    borderRadius: 4,
    outline: "none",
    borderWidth: 0,
  },

  variants: {
    color: {
      default: sprinkles({
        color: "default",
      }),
      primary: sprinkles({
        color: "primary",
      }),
      secondary: sprinkles({
        color: "secondary",
      }),
      success: sprinkles({
        color: "success",
      }),
      warning: sprinkles({
        color: "warning",
      }),
      danger: sprinkles({
        color: "danger",
      }),
    },
  },

  defaultVariants: {
    color: "default",
  },
});

// Get the type
export type LinkVariantProps = RecipeVariants<typeof link>;

export { link };

Then introduce the corresponding variants into the project of button and link components.

// button

import React, { useMemo } from "react";
// "@blankui-org/theme" it is the corresponding `core/react` project
import { button, ButtonVariantProps } from "@blankui-org/theme";

export type ButtonProps = ButtonVariantProps & {
  children: React.ReactNode;
  /**
   * The native button click event handler.
   */
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
};

export const Button: React.FC<ButtonProps> = ({
  color,
  size,
  children,
  ...props
}) => {
  const styles = useMemo(() => button({ color, size }), [color, size]);

  return (
    <button type="button" className={styles} {...props}>
      {children}
    </button>
  );
};

// link

import React, { useMemo } from "react";
// "@blankui-org/theme" it is the corresponding `core/react` project
import { link, LinkVariantProps } from "@blankui-org/theme";

export type LinkProps = LinkVariantProps & {
  children: React.ReactNode;
};

export const Link: React.FC<LinkProps> = ({ color, children, ...props }) => {
  const styles = useMemo(() => link({ color }), [color]);

  return (
    <a className={styles} {...props}>
      {children}
    </a>
  );
};

Button & Link components both rely on sprinkles, which will cause theme.css.ts to be executed multiple times (console.log(222222); will be executed multiple times). But the topic will not be created multiple times:

Will this cause a performance penalty?

I can avoid this this way (change button.css.ts file):

import { RecipeVariants, recipe } from "@vanilla-extract/recipes";
import { initSprinkles } from "../theme";

const sprinkles = initSprinkles();

const button = recipe({
  base: {
    borderRadius: 4,
    outline: "none",
    borderWidth: 0,
  },

  // Directly use pre-created `CSS` variable names
  variants: {
    color: {
      default: {
        color: "var(--blankui-color-default-foreground)",
        backgroundColor: "var(--blankui-color-default)",
      },
      primary: {
        color: "var(--blankui-color-primary-foreground)",
        backgroundColor: "var(--blankui-color-primary)",
      },
      secondary: {
        color: "var(--blankui-color-secondary-foreground)",
        backgroundColor: "var(--blankui-color-secondary)",
      },
      success: {
        color: "var(--blankui-color-success-foreground)",
        backgroundColor: "var(--blankui-color-success)",
      },
      warning: {
        color: "var(--blankui-color-warning-foreground)",
        backgroundColor: "var(--blankui-color-warning)",
      },
      danger: {
        color: "var(--blankui-color-danger-foreground)",
        backgroundColor: "var(--blankui-color-danger)",
      },
    },

    size: {
      sm: {
        padding: "4px 8px",
      },
      md: {
        padding: "6px 12px",
      },
      lg: {
        padding: "8px 16px",
      },
    },
  },

  defaultVariants: {
    color: "default",
    size: "md",
  },
});

// Get the type
export type ButtonVariantProps = RecipeVariants<typeof button>;

export { button };

To put it simply, the component's variants have nothing to do with themeVars. Do you have any better suggestions?

I just came into contact with vanilla-extract.style not long ago, please feel free to correct me if I am wrong. Thank you so much.

[askoufis]

There are potential performance issues with importing sprinkles in lots of .css.ts files, however if you don't define too many (I've only noticed issues under synthetic load, around a few thousand to tens of thousands of classes) sprinkles and/or conditions, you should be fine.

Looking at your code, I would suggest separating your themeVars and sprinkles into separate files, That way you can import themeVars by itself. I would also suggest just using your themeVars colors in your recipe definitions rather than sprinkles classes, again so you can avoid importing sprinkles.

I will stress, you likely won't run into any noticeable performance issues using sprinkles. If you do, then you've probably over-invested into sprinkles and should consider leaning into build-time classes more.

[1111mp]

First of all, thank you very much for your prompt reply. 🌹

Looking at your code, I would suggest separating your themeVars and sprinkles into separate files, That way you can import themeVars by itself.

Yes, themeVars and sprinkles are in different files, the previous code is just for convenience of displaying the code.

theme.css.ts( I have a unified color configuration file, so I need to read the data from there and convert it into the format required by createGlobalThemeContract. If this all happened at runtime then I'd be worried about the performance hit.):

import {
  createGlobalTheme,
  createGlobalThemeContract,
} from "@vanilla-extract/css";
import { commonColors, semanticColors } from "../colors";
import { flattenThemeObject } from "../utils/object";

// I have a unified color configuration file, so I need to read the data from there 
// and convert it into the format required by `createGlobalThemeContract`.
// If this all happened at runtime then I'd be worried about the performance hit
const flatCommonColors = flattenThemeObject(commonColors) as Record<
  string,
  string
>;
const commonColorsVars = Object.keys(flatCommonColors).reduce<
  Record<string, string>
>((acc, cur) => {
  acc[cur] = `color-${cur}`;

  return acc;
}, {});

const { light, dark } = semanticColors;

const flatLightColors = flattenThemeObject(light) as Record<string, string>;
const flatDarkColors = flattenThemeObject(dark) as Record<string, string>;
const semanticColorsVars = Object.keys(flatLightColors).reduce<
  Record<string, string>
>((acc, cur) => {
  acc[cur] = `color-${cur}`;

  return acc;
}, {});

const themeVars = createGlobalThemeContract(
  {
    colors: {
      ...commonColorsVars,
      ...semanticColorsVars,
    },
    radius: {
      small: "radius-small",
      medium: "radius-medium",
      large: "radius-large",
    },
  },
  (value) => `blankui-${value}`,
);

console.log(222222);

createGlobalTheme(":root,.light", themeVars, {
  colors: {
    ...flatCommonColors,
    ...flatLightColors,
  },
  radius: {
    small: "4px",
    medium: "6px",
    large: "8px",
  },
});

createGlobalTheme(".dark", themeVars, {
  colors: {
    ...flatCommonColors,
    ...flatDarkColors,
  },
  radius: {
    small: "4px",
    medium: "6px",
    large: "8px",
  },
});

export { themeVars};

I would also suggest just using your themeVars colors in your recipe definitions rather than sprinkles classes, again so you can avoid importing sprinkles.

Do you mean to introduce themeVars directly in link.css.ts? Like this:

import { RecipeVariants, recipe } from "@vanilla-extract/recipes";
import { themeVars } from "../theme";

const link = recipe({
  base: {
    borderRadius: 4,
    outline: "none",
    borderWidth: 0,
  },

  variants: {
    color: {
      default: {
        color: themeVars.colors.default,
      },
      primary: {
        color: themeVars.colors.primary,
      },
      secondary: {
        color: themeVars.colors.secondary,
      },
      success: {
        color: themeVars.colors.success,
      },
      warning: {
        color: themeVars.colors.warning,
      },
      danger: {
        color: themeVars.colors.danger,
      },
    },
  },

  defaultVariants: {
    color: "default",
  },
});

// Get the type
export type LinkVariantProps = RecipeVariants<typeof link>;

export { link };

If so does this all run at build-time?

I will stress, you likely won't run into any noticeable performance issues using sprinkles. If you do, then you've probably over-invested into sprinkles and should consider leaning into build-time classes more.

Can I understand it so simply: sprinkles is executed at runtime ?

Generate a static set of custom utility classes and compose them either statically at build time, or dynamically at runtime, without the usual style generation overhead of CSS-in-JS.

Maybe it can also be run at build-time... I just don't know how to use it yet.

But after using sprinkles I found that I really like it. Can I combine multiple styles into the same class name:
sprinkles.css.ts:

import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles";
import { themeVars } from "./contract.css";

const { colors, layouts } = themeVars;

type LayoutProperties = {
  borderRadius: Record<string, string>;
  lineHeight: Record<string, string>;
  fontSize: Record<string, string>;
  opacity: Record<string, string>;
  spacingUnit: Record<string, string>;
};

// some layout properties
const {
  spacingUnit,
  fontSize,
  lineHeight,
  borderRadius,
  opacity,
  ...layoutProperties
} = Object.entries(layouts).reduce<LayoutProperties>(
  (acc, [key, value]) => {
    if (key.startsWith("radius")) {
      acc["borderRadius"][key] = value;
    }

    if (key.startsWith("line-height")) {
      acc["lineHeight"][key] = value;
    }

    if (key.startsWith("font-size")) {
      acc["fontSize"][key] = value;
    }

    if (key.endsWith("opacity")) {
      acc["opacity"][key] = value;
    }

    if (key.startsWith("spacing-unit")) {
      acc["spacingUnit"][key] = value;
    }

    return acc;
  },
  {
    borderRadius: {},
    lineHeight: {},
    fontSize: {},
    opacity: {},
    spacingUnit: {},
  },
);

const opacityProperties = defineProperties({
  conditions: {
    hover: { selector: "&:hover" },
    disabled: { selector: "&:disabled" },
  },
  defaultCondition: false,
  properties: {
    opacity,
  },
});

const commonProperties = defineProperties({
  properties: {
    ...layoutProperties,

    color: colors,
    backgroundColor: colors,

    borderRadius,

    paddingTop: spacingUnit,
    paddingBottom: spacingUnit,
    paddingLeft: spacingUnit,
    paddingRight: spacingUnit,

    minWidth: spacingUnit,
    minHeight: spacingUnit,

    width: spacingUnit,
    height: spacingUnit,

    fontSize,
    lineHeight,

    boxColor: {
      default: {
        color: colors["default-foreground"],
        backgroundColor: colors["default"],
      },
      primary: {
        color: colors["primary-foreground"],
        backgroundColor: colors["primary"],
      },
      secondary: {
        color: colors["secondary-foreground"],
        backgroundColor: colors["secondary"],
      },
      success: {
        color: colors["success-foreground"],
        backgroundColor: colors["success"],
      },
      warning: {
        color: colors["warning-foreground"],
        backgroundColor: colors["warning"],
      },
      danger: {
        color: colors["danger-foreground"],
        backgroundColor: colors["danger"],
      },
    },

    buttonSize: {
      sm: {
        minWidth: spacingUnit["spacing-unit-16"],
        height: spacingUnit["spacing-unit-8"],
        paddingLeft: spacingUnit["spacing-unit-3"],
        paddingRight: spacingUnit["spacing-unit-3"],
        fontSize: fontSize["font-size-tiny"],
        lineHeight: lineHeight["line-height-tiny"],
      },
      md: {
        minWidth: spacingUnit["spacing-unit-20"],
        height: spacingUnit["spacing-unit-10"],
        paddingLeft: spacingUnit["spacing-unit-4"],
        paddingRight: spacingUnit["spacing-unit-4"],
        fontSize: fontSize["font-size-small"],
        lineHeight: lineHeight["line-height-small"],
      },
      lg: {
        minWidth: spacingUnit["spacing-unit-24"],
        height: spacingUnit["spacing-unit-12"],
        paddingLeft: spacingUnit["spacing-unit-6"],
        paddingRight: spacingUnit["spacing-unit-6"],
        fontSize: fontSize["font-size-medium"],
        lineHeight: lineHeight["line-height-medium"],
      },
    },
  },

  shorthands: {
    padding: ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
    paddingX: ["paddingLeft", "paddingRight"],
    paddingY: ["paddingTop", "paddingBottom"],
  },
});

export const sprinkles = createSprinkles(commonProperties, opacityProperties);

button.css.ts:

import { RecipeVariants, recipe } from "@vanilla-extract/recipes";
import { sprinkles } from "../theme";

const button = recipe({
  base: [
    {
      outline: "none",
      borderWidth: 0,
      cursor: "pointer",
      transitionProperty:
        "transform,color,background,background-color,border-color,text-decoration-color,fill,stroke,opacity",
      transitionDuration: "0.25s",
      transitionTimingFunction: "ease",
    },
    sprinkles({
      opacity: {
        hover: "hover-opacity",
      },
    }),
    {
      ":active": {
        transform: "scale(0.97)",
      },
    },
  ],

  variants: {
    color: {
      default: sprinkles({
        boxColor: "default",
      }),
      primary: sprinkles({
        boxColor: "primary",
      }),
      secondary: sprinkles({
        boxColor: "secondary",
      }),
      success: sprinkles({
        boxColor: "success",
      }),
      warning: sprinkles({
        boxColor: "warning",
      }),
      danger: sprinkles({
        boxColor: "danger",
      }),
    },

    radius: {
      sm: sprinkles({
        borderRadius: "radius-small",
      }),
      md: sprinkles({
        borderRadius: "radius-medium",
      }),
      lg: sprinkles({
        borderRadius: "radius-large",
      }),
    },

    size: {
      sm: sprinkles({
        buttonSize: "sm",
      }),
      md: sprinkles({
        buttonSize: "md",
      }),
      lg: sprinkles({
        buttonSize: "lg",
      }),
    },
  },

  defaultVariants: {
    color: "default",
    radius: "md",
    size: "md",
  },
});

// Get the type
export type ButtonVariantProps = RecipeVariants<typeof button>;

export { button };

[askoufis]

To put it simply: anything inside a .css.ts file will occur only at build time. sprinkles can be run both at build time and at run time, it just depends what file you use it in. If you use sprinkles at run time, it's just doing a lookup of the classname, it's not re-creating the entire sprinkles definition.

Do you mean to introduce themeVars directly in link.css.ts? Like this:
Yes, just like the code you wrote. There's no reason to use sprinkles to access a colour when your theme variables already define it.

[1111mp]

I have always been worried that some code will happen at runtime, until I just did a test in the production environment and confirmed that the situation I was worried about will not happen, and these codes will all happen at build-time:

// theme.css.ts
import {
  createGlobalTheme,
  createGlobalThemeContract,
} from "@vanilla-extract/css";
import mapKeys from "lodash.mapkeys";
import kebabCase from "lodash.kebabCase";

import { semanticColors } from "../colors";
import { lightLayout, darkLayout } from "./layout";
import { flattenThemeObject, generateSpacingScale } from "../utils";

// these codes...
const flatLightLayout = Object.entries(
  mapKeys(lightLayout, (_value, key) => kebabCase(key)) as Record<
    string,
    string | object
  >,
).reduce<Record<string, string>>((acc, [key, value]) => {
  if (typeof value === "object") {
    for (const [nestedKey, nestedValue] of Object.entries(value)) {
      const nestedLayoutVariable = `${key}-${nestedKey}`;
      acc[nestedLayoutVariable] = nestedValue;
    }
    return acc;
  }

  if (key === "spacing-unit") {
    acc[key] = value; // Add the base unit

    const spacingScale = generateSpacingScale(Number(value));

    for (const [scaleKey, scaleValue] of Object.entries(spacingScale)) {
      const spacingVariable = `${key}-${scaleKey}`;

      acc[spacingVariable] = scaleValue!;
    }
    return acc;
  }

  acc[key] = value;
  return acc;
}, {});

const flatDarkLayout = Object.entries(
  mapKeys(darkLayout, (_value, key) => kebabCase(key)) as Record<
    string,
    string | object
  >,
).reduce<Record<string, string>>((acc, [key, value]) => {
  if (typeof value === "object") {
    for (const [nestedKey, nestedValue] of Object.entries(value)) {
      const nestedLayoutVariable = `${key}-${nestedKey}`;
      acc[nestedLayoutVariable] = nestedValue;
    }
    return acc;
  }

  if (key === "spacing-unit") {
    acc[key] = value; // Add the base unit

    const spacingScale = generateSpacingScale(Number(value));

    for (const [scaleKey, scaleValue] of Object.entries(spacingScale)) {
      const spacingVariable = `${key}-${scaleKey}`;

      acc[spacingVariable] = scaleValue!;
    }
    return acc;
  }

  acc[key] = value;
  return acc;
}, {});

// const flatCommonColors = flattenThemeObject(commonColors) as Record<
//   string,
//   string
// >;
// const commonColorsVars = Object.keys(flatCommonColors).reduce<
//   Record<string, string>
// >((acc, cur) => {
//   acc[cur] = `color-${cur}`;

//   return acc;
// }, {});

const { light, dark } = semanticColors;


// these codes...
const flatLightColors = flattenThemeObject(light) as Record<string, string>;
const flatDarkColors = flattenThemeObject(dark) as Record<string, string>;
const semanticColorsVars = Object.keys(flatLightColors).reduce<
  Record<string, string>
>((acc, cur) => {
  acc[cur] = `color-${cur}`;

  return acc;
}, {});

console.log(222222222);

const themeVars = createGlobalThemeContract(
  {
    colors: {
      // ...commonColorsVars,
      ...semanticColorsVars,
    },
    layouts: Object.keys(flatLightLayout).reduce<Record<string, string>>(
      (acc, cur) => {
        acc[cur] = cur;

        return acc;
      },
      {},
    ),
  },
  (value) => `blankui-${value}`,
);

createGlobalTheme(":root,.light", themeVars, {
  colors: {
    // ...flatCommonColors,
    ...flatLightColors,
  },
  layouts: flatLightLayout,
});

createGlobalTheme(".dark", themeVars, {
  colors: {
    // ...flatCommonColors,
    ...flatDarkColors,
  },
  layouts: flatDarkLayout,
});

export { themeVars };

// sprinkless.css.ts
import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles";
import { themeVars } from "./contract.css";

const { colors, layouts } = themeVars;

type LayoutProperties = {
  borderRadius: Record<string, string>;
  lineHeight: Record<string, string>;
  fontSize: Record<string, string>;
  opacity: Record<string, string>;
  spacingUnit: Record<string, string>;
};

// these codes...
const {
  spacingUnit,
  fontSize,
  lineHeight,
  borderRadius,
  opacity,
  ...layoutProperties
} = Object.entries(layouts).reduce<LayoutProperties>(
  (acc, [key, value]) => {
    if (key.startsWith("radius")) {
      acc["borderRadius"][key] = value;
    }

    if (key.startsWith("line-height")) {
      acc["lineHeight"][key] = value;
    }

    if (key.startsWith("font-size")) {
      acc["fontSize"][key] = value;
    }

    if (key.endsWith("opacity")) {
      acc["opacity"][key] = value;
    }

    if (key.startsWith("spacing-unit")) {
      acc["spacingUnit"][key] = value;
    }

    return acc;
  },
  {
    borderRadius: {},
    lineHeight: {},
    fontSize: {},
    opacity: {},
    spacingUnit: {},
  },
);

const opacityProperties = defineProperties({
  conditions: {
    hover: { selector: "&:hover" },
    disabled: { selector: "&:disabled" },
  },
  defaultCondition: false,
  properties: {
    opacity,
  },
});

const commonProperties = defineProperties({
  properties: {
    ...layoutProperties,

    color: colors,
    backgroundColor: colors,

    borderRadius,

    paddingTop: spacingUnit,
    paddingBottom: spacingUnit,
    paddingLeft: spacingUnit,
    paddingRight: spacingUnit,

    minWidth: spacingUnit,
    minHeight: spacingUnit,

    width: spacingUnit,
    height: spacingUnit,

    fontSize,
    lineHeight,

    boxColor: {
      default: {
        color: colors["default-foreground"],
        backgroundColor: colors["default"],
      },
      primary: {
        color: colors["primary-foreground"],
        backgroundColor: colors["primary"],
      },
      secondary: {
        color: colors["secondary-foreground"],
        backgroundColor: colors["secondary"],
      },
      success: {
        color: colors["success-foreground"],
        backgroundColor: colors["success"],
      },
      warning: {
        color: colors["warning-foreground"],
        backgroundColor: colors["warning"],
      },
      danger: {
        color: colors["danger-foreground"],
        backgroundColor: colors["danger"],
      },
    },

    buttonSize: {
      sm: {
        minWidth: spacingUnit["spacing-unit-16"],
        height: spacingUnit["spacing-unit-8"],
        paddingLeft: spacingUnit["spacing-unit-3"],
        paddingRight: spacingUnit["spacing-unit-3"],
        fontSize: fontSize["font-size-tiny"],
        lineHeight: lineHeight["line-height-tiny"],
      },
      md: {
        minWidth: spacingUnit["spacing-unit-20"],
        height: spacingUnit["spacing-unit-10"],
        paddingLeft: spacingUnit["spacing-unit-4"],
        paddingRight: spacingUnit["spacing-unit-4"],
        fontSize: fontSize["font-size-small"],
        lineHeight: lineHeight["line-height-small"],
      },
      lg: {
        minWidth: spacingUnit["spacing-unit-24"],
        height: spacingUnit["spacing-unit-12"],
        paddingLeft: spacingUnit["spacing-unit-6"],
        paddingRight: spacingUnit["spacing-unit-6"],
        fontSize: fontSize["font-size-medium"],
        lineHeight: lineHeight["line-height-medium"],
      },
    },
  },

  shorthands: {
    padding: ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
    paddingX: ["paddingLeft", "paddingRight"],
    paddingY: ["paddingTop", "paddingBottom"],
  },
});

export const sprinkles = createSprinkles(commonProperties, opacityProperties);

// button.css.ts
import { RecipeVariants, recipe } from "@vanilla-extract/recipes";
import { sprinkles } from "../theme";

const button = recipe({
  base: [
    {
      outline: "none",
      borderWidth: 0,
      cursor: "pointer",
      transitionProperty:
        "transform,color,background,background-color,border-color,text-decoration-color,fill,stroke,opacity",
      transitionDuration: "0.25s",
      transitionTimingFunction: "ease",
    },
    sprinkles({
      opacity: {
        hover: "hover-opacity",
      },
    }),
    {
      ":active": {
        transform: "scale(0.97)",
      },
    },
  ],

  variants: {
    color: {
      default: sprinkles({
        boxColor: "default",
      }),
      primary: sprinkles({
        boxColor: "primary",
      }),
      secondary: sprinkles({
        boxColor: "secondary",
      }),
      success: sprinkles({
        boxColor: "success",
      }),
      warning: sprinkles({
        boxColor: "warning",
      }),
      danger: sprinkles({
        boxColor: "danger",
      }),
    },

    radius: {
      sm: sprinkles({
        borderRadius: "radius-small",
      }),
      md: sprinkles({
        borderRadius: "radius-medium",
      }),
      lg: sprinkles({
        borderRadius: "radius-large",
      }),
    },

    size: {
      sm: sprinkles({
        buttonSize: "sm",
      }),
      md: sprinkles({
        buttonSize: "md",
      }),
      lg: sprinkles({
        buttonSize: "lg",
      }),
    },
  },

  defaultVariants: {
    color: "default",
    radius: "md",
    size: "md",
  },
});

// Get the type
export type ButtonVariantProps = RecipeVariants<typeof button>;

export { button };

All this is because I don’t know enough about vanilla-extract.style. I’m very sorry. I should spend some time to learn about vanilla-extract.style. I will close this question. Thanks.