Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.1

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.

Editable example

<Center w="calc(lg / 2)" bg="primary" p="md" rounded="md" color="white">
  Calc
</Center>
Copied!

Also, if the token name is a number, like the tokens in theme's spaces, you reference it using $ (interpolation).

Editable example

<Center
  w="calc(2xs + $spaces.2)"
  bg="secondary"
  p="md"
  rounded="md"
  color="white"
>
  Use "$"
</Center>
Copied!

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.

Editable example

<VStack>
  <Center w="min(100%, lg)" bg="primary" p="md" rounded="md" color="white">
    Min
  </Center>

  <Center w="min(md)" bg="secondary" p="md" rounded="md" color="white">
    Omitted Min
  </Center>
</VStack>
Copied!

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.

Editable example

<VStack>
  <Center w="max(100%, 2xs)" bg="primary" p="md" rounded="md" color="white">
    Max
  </Center>

  <Center w="max(xs)" bg="secondary" p="md" rounded="md" color="white">
    Omitted Max
  </Center>
</VStack>
Copied!

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.

Editable example

<VStack>
  <Center
    w="clamp(xs, 100%, sm)"
    bg="primary"
    p="md"
    rounded="md"
    color="white"
  >
    Clamp
  </Center>

  <Center w="clamp(xs, sm)" bg="secondary" p="md" rounded="md" color="white">
    Omitted Clamp
  </Center>
</VStack>
Copied!

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.

Editable example

<Center
  bg="mix(red.500, blue.500)"
  w="full"
  height="xs"
  p="md"
  rounded="md"
  color="white"
>
  "in srgb" + "red.500" + "blue.500"
</Center>
Copied!

You can change the ratio by specifying a percentage.

Editable example

<Center
  bg="mix(in lab, orange.500 80%, purple.500 20%)"
  w="full"
  height="xs"
  p="md"
  rounded="md"
  color="white"
>
  "in lab" + "orange.500 80%" + "purple.500 20%"
</Center>
Copied!

tint

Use mix to lighten a color by mixing it with #FFFFFF.

Editable example

<Center
  bg="tint(purple.500, 50%)"
  w="full"
  height="xs"
  p="md"
  rounded="md"
  color="white"
>
  Tint color
</Center>
Copied!

shade

Use mix to darken a color by mixing it with #000000.

Editable example

<Center
  bg="shade(yellow.500, 50%)"
  w="full"
  height="xs"
  p="md"
  rounded="md"
  color="white"
>
  Shade color
</Center>
Copied!

transparentize

Use mix to make a color transparent by mixing it with transparent.

Editable example

<Center
  bg="transparentize(red.500, 50%)"
  w="full"
  height="xs"
  p="md"
  rounded="md"
  color="white"
>
  Transparentize color
</Center>
Copied!

tone

Use mix to create a color based on a specified color and tone.

Editable example

<VStack>
  {TONES.map((tone) => (
    <Center
      key={tone}
      bg={`tone(purple.500, ${tone})`}
      w="full"
      height="5xs"
      p="md"
      rounded="md"
      color="white"
    >
      <Text
        color={`tone(purple.500, ${tone})`}
        as="span"
        filter="invert(100%) grayscale(100%) contrast(100)"
      >
        Tone {tone}
      </Text>
    </Center>
  ))}
</VStack>
Copied!

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',
}
Copied!

Editable example

<Box w="full" h="xs" bgGradient="linear(to-r, purple.500, blue.400)" />
Copied!

Customizing Colors

The API can use both color tokens and CSS color values.

Editable example

<Box w="full" h="xs" bgGradient="linear(to-r, #59a9e1, #f37bdf)" />
Copied!

Gradient Tokens

Gradient tokens can be defined in the theme.

import { ThemeTokens } from "@yamada-ui/react"


export const gradients: ThemeTokens = {
  blue: "linear(to-r, #132293, #2375b4)",
}
Copied!

Editable example

<Box w="full" h="xs" bgGradient="blue" />
Copied!

Text Gradient

To add a gradient to text, set bgGradient and bgClip to text.

Editable example

<Heading
  size="2xl"
  bgGradient="linear(to-r, orange.400, red.500)"
  bgClip="text"
  isTruncated
>
  クリリンのことか……クリリンのことかーーーっ！！！！！
</Heading>
Copied!

Responsive Gradient

Pass an object to bgGradient to support responsive styles.

Editable example

<Box
  w="full"
  h="xs"
  bgGradient={{
    base: "linear(to-tr, teal.300, yellow.400)",
    lg: "linear(to-t, blue.200, teal.500)",
    md: "linear(to-b, orange.100, purple.300)",
  }}
/>
Copied!

Edit this page on GitHub

PreviousCSS Custom Properties (Variables)NextAt-Rules