CSS Value Functions
Yamada UI provides various functions that make CSS value functions more convenient.
Calculation & Comparison
Yamada UI provides functions that make CSS calculation and comparison functions more convenient.
calc
You can use CSS's calc to reference and calculate tokens from the theme.
<Center w="calc(lg / 2)" bg="bg.contrast" color="fg.contrast" p="md">
Calc
</Center>
<Center w="calc(xs + {spaces.2})" bg="bg.contrast" color="fg.contrast" p="md">
Use interpolated token
</Center>
{} (see interpolation).min
Use CSS's min to set the smallest value from the given arguments.
If there is only one argument, a second value of "100%" is set.
<VStack>
<Center w="min(100%, lg)" bg="bg.contrast" color="fg.contrast" p="md">
Min
</Center>
<Center w="min(md)" bg="bg.contrast" color="fg.contrast" p="md">
Omitted Min
</Center>
</VStack>
max
Use CSS's max to set the largest value from the given arguments.
If there is only one argument, a second value of "100%" is set.
<VStack>
<Center w="max(100%, 2xs)" bg="bg.contrast" color="fg.contrast" p="md">
Max
</Center>
<Center w="max(xs)" bg="bg.contrast" color="fg.contrast" p="md">
Omitted Max
</Center>
</VStack>
clamp
Use CSS's clamp to constrain a value between an upper and lower bound.
If there are two arguments, a recommended value of "100%" is set.
<VStack>
<Center w="clamp(sm, 100%, xl)" bg="bg.contrast" color="fg.contrast" p="md">
Clamp
</Center>
<Center w="clamp(sm, lg)" bg="bg.contrast" color="fg.contrast" p="md">
Omitted Clamp
</Center>
</VStack>
Color
Yamada UI provides functions that easily mix colors together, lighten, and darken colors.
mix
Use CSS's color-mix to mix colors together.
You can specify two or three arguments. The method can be omitted, and the default is in srgb.
<Center bg="mix(red.500, blue.500)" p="md" color="white">
"in srgb" + "red.500" + "blue.500"
</Center>
You can change the ratio by specifying a percentage.
<Center bg="mix(in lab, orange.500 80%, purple.500 20%)" p="md" color="white">
"in lab" + "orange.500 80%" + "purple.500 20%"
</Center>
100%.tint
Use mix to lighten a color by mixing it with #FFFFFF.
<Center preview bg="tint(purple.500, 50%)" p="md" color="white">
Tint color
</Center>
shade
Use mix to darken a color by mixing it with #000000.
<Center bg="shade(yellow.500, 50%)" p="md" color="white">
Shade color
</Center>
transparentize
Use mix to make a color transparent by mixing it with transparent. A shorthand notation like bg="red.500 / 50" is also available.
<Center bg="transparentize(red.500, 50%)" p="md" color="white">
Transparentize color
</Center>
tone
Use mix to create a color based on a specified color and tone.
<VStack>
{TONES.map((tone) => (
<Center key={tone} bg={`tone(purple.500, ${tone})`} p="md" color="white">
<Text
color={`tone(purple.500, ${tone})`}
as="span"
filter="invert(100%) grayscale(100%) contrast(100)"
>
Tone {tone}
</Text>
</Center>
))}
</VStack>
Gradient
Yamada UI provides functions that easily create gradients. To add a gradient, set functions and values to bgGradient.
linear(<direction>, <from>, <to>)radial(<from>, <to>)
You can also use other CSS gradient functions like repeating-linear or conic.
Shortcuts are available for <direction>.
{
'to-t': 'to top',
'to-tr': 'to top right',
'to-r': 'to right',
'to-br': 'to bottom right',
'to-b': 'to bottom',
'to-bl': 'to bottom left',
'to-l': 'to left',
'to-tl': 'to top left',
}
<Box h="2xs" bgGradient="linear(to-r, green.200, pink.500)" h="2xs" />
Customize Colors
You can use both theme tokens and CSS color values.
<Box h="2xs" bgGradient="linear(to-r, #59a9e1, #f37bdf)" h="2xs" />
Text Gradient
To add a gradient to text, set bgGradient and bgClip to text.
クリリンのことか……クリリンのことかーーーっ！！！！！
<Heading
size="xl"
bgGradient="linear(to-r, orange.400, red.500)"
bgClip="text"
truncated
>
クリリンのことか……クリリンのことかーーーっ！！！！！
</Heading>