Interpolation

Interpolation is a feature for referencing CSS custom properties (variables) or tokens from the theme within the style system.

Usage

If you have created CSS custom properties (variables) using the vars from Style Props, you can reference the set name with a $.

<Box
  p="md"
  rounded="md"
  color="white"
  vars={[{ name: "bg", token: "colors", value: "primary" }]}
  bg="$bg"
>
  Box
</Box>

Referencing Theme Tokens

In Yamada UI's Style Props, only the corresponding property's tokens from the theme are referenced. For example, borderRadius references the radii tokens, but not the spaces tokens. By using $, you can reference tokens other than the corresponding ones.

<Box p="md" rounded="$spaces.3" bg="primary" color="white">
  Box
</Box>

Also, by using $ within a string, you can reference tokens from the theme. This is effective for shorthand properties such as border.

<Box p="md" rounded="md" border="1px solid $colors.primary" color="primary">
  Box
</Box>