Leave Yamada UI a star

Star
Yamada UIYamada UIv1.3.9

Semantic Tokens

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

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",
  },
}

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>
  )
}
<Text color="brand">This is Brand color</Text>

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

Edit this page on GitHub

PreviousGradientNextText and Layer Styles