CSS Custom Properties (Variables)
You can create and reference CSS custom properties (variables) with Style Props in Yamada UI.
In most cases, you do not need custom properties when using the Yamada UI style system. This feature is useful when you want to reference Yamada UI theme tokens in components from other libraries.
Usage
Use the vars from Style Props to create CSS custom properties (variables).
name: The name of the custom property.token: The token to retrieve the value of the custom property.value: The value of the custom property.
vars={[{ name: "bg", token: "colors", value: "primary" }]}
The above code will generate the following CSS:
.Box {--ui-bg: var(--ui-colors-primary);}
The prefix (ui) of the custom property can be changed by customizing the config.
For more details, please check here.
To reference a custom property, use CSS's var or the style system's $ (interpolation).
Editable example
<Box p="md" rounded="md" vars={[ { name: "bg", token: "colors", value: "primary" }, { name: "color", token: "colors", value: "white" }, ]} bg="var(--ui-bg)" color="$color" > Box </Box>
Custom properties set with vars will only apply to the children of the element they are set on.
Edit this page on GitHub