Semantic Tokens

Yamada UI supports semantic tokens of all scales (such as color and font size).

Semantic tokens are terms used in design systems, referring to variables or tokens that abstract design attributes such as color and font size. These tokens are named so that their function and meaning can be intuitively understood from their names.

The values that are actually set are as follows.

export const semantics: ThemeSemantics = {
  colors: {
    primary: "blue.500",
    secondary: "violet.500",
    info: "blue.500",
    success: "green.500",
    warning: "orange.500",
    danger: "red.500",
    link: "blue.500",
  },
  colorSchemes: {
    primary: "blue",
    secondary: "violet",
    info: "blue",
    success: "green",
    warning: "orange",
    danger: "red",
    link: "blue",
  },
  spaces: {
    xs: "1",
    sm: "2",
    md: "4",
    normal: "6",
    lg: "8",
    xl: "12",
    "2xl": "16",
    "3xl": "24",
    "4xl": "32",
  },
}

Copied!

The values that can be selected in colorSchemes are only tokens where Tone (from 50 to 950) is defined in the theme's colors.

Semantic tokens are defined in the theme's semantics.

import { UIProvider, extendTheme } from "@yamada-ui/react"

const semantics = {
  colors: {
    brand: "violet.500",
  },
}

const customTheme = extendTheme({ semantics })()

const App = () => {
  return (
    <UIProvider theme={customTheme}>
      <YourApplication />
    </UIProvider>
  )
}

Copied!

<Text color="brand">This is Brand color</Text>

Copied!

This generates a semantic token called brand for colors.violet.500 defined in the Default Theme.

If you want to learn more about themes, please check Customize Theme and Component Styles.

Edit this page on GitHub

PreviousCustomize Config NextResponsive Styles