Documentation for the Theming of Yamada UI v2. # Overview ## Styles Here's a list of all the styles available in the library. - [Global Styles](https://yamada-ui.com/docs/theming/styles/global-styles.md) - [Reset Styles](https://yamada-ui.com/docs/theming/styles/reset-styles.md) - [Layer Styles](https://yamada-ui.com/docs/theming/styles/layer-styles.md) - [Text Styles](https://yamada-ui.com/docs/theming/styles/text-styles.md) ## Design Tokens Here's a list of all the design tokens available in the library. - [Animations](https://yamada-ui.com/docs/theming/tokens/animations.md) - [Aspect Ratios](https://yamada-ui.com/docs/theming/tokens/aspect-ratios.md) - [Blurs](https://yamada-ui.com/docs/theming/tokens/blurs.md) - [Borders](https://yamada-ui.com/docs/theming/tokens/borders.md) - [Breakpoints](https://yamada-ui.com/docs/theming/tokens/breakpoints.md) - [Colors](https://yamada-ui.com/docs/theming/tokens/colors.md) - [Color Schemes](https://yamada-ui.com/docs/theming/tokens/color-schemes.md) - [Durations](https://yamada-ui.com/docs/theming/tokens/durations.md) - [Easings](https://yamada-ui.com/docs/theming/tokens/easings.md) - [Font Sizes](https://yamada-ui.com/docs/theming/tokens/font-sizes.md) - [Font Weights](https://yamada-ui.com/docs/theming/tokens/font-weights.md) - [Fonts](https://yamada-ui.com/docs/theming/tokens/fonts.md) - [Gradients](https://yamada-ui.com/docs/theming/tokens/gradients.md) - [Keyframes](https://yamada-ui.com/docs/theming/tokens/keyframes.md) - [Letter Spacings](https://yamada-ui.com/docs/theming/tokens/letter-spacings.md) - [Line Heights](https://yamada-ui.com/docs/theming/tokens/line-heights.md) - [Radii](https://yamada-ui.com/docs/theming/tokens/radii.md) - [Shadows](https://yamada-ui.com/docs/theming/tokens/shadows.md) - [Sizes](https://yamada-ui.com/docs/theming/tokens/sizes.md) - [Spaces](https://yamada-ui.com/docs/theming/tokens/spaces.md) - [Z Indices](https://yamada-ui.com/docs/theming/tokens/z-indices.md) # Breakpoints :::tip Responsive design overview is [here](https://yamada-ui.com/docs/styling/responsive-design.md). ::: ## Overview Breakpoints are tokens used for responsive design, such as [Responsive Design](https://yamada-ui.com/docs/styling/responsive-design.md). The breakpoints defined in the theme are [here](https://github.com/yamada-ui/yamada-ui/blob/main/packages/react/src/theme/tokens/breakpoints.ts). ```tsx export const breakpoints = defineTokens.breakpoints({ sm: "30em", md: "48em", lg: "61em", xl: "80em", "2xl": "90em", }) ``` ## Customize ### Generate a Theme Use the [CLI](https://yamada-ui.com/docs/theming/cli.md) to generate a theme. :::warning Before running the following commands, you need to install `@yamada-ui/cli` and execute the `init` command. For more details, please see [here](https://yamada-ui.com/docs/get-started/cli.md). ::: ```bash pnpm yamada-cli theme ``` ```bash npm yamada-cli theme ``` ```bash yarn yamada-cli theme ``` ```bash bun yamada-cli theme ``` ### Change the Token Change the `tokens/breakpoints.ts` in the generated theme. ```tsx import { defineTokens } from "@yamada-ui/react" export const breakpoints = defineTokens.breakpoints({ sm: "27em", // [!code highlight] md: "48em", lg: "61em", xl: "80em", "2xl": "90em", }) ``` ### Update the Provider Set the generated theme to the `UIProvider`. ```tsx import { UIProvider } from "@workspaces/ui" import { theme } from "@workspace/theme" const App = () => { return ( ) } ``` ## Media Queries By default, the responsive design uses the `@media(max-width)` media query. ```tsx const config = defineConfig({ breakpoint: { direction: "up" } }) const Component: FC<{ query: string }> = ({ query }) => { const breakpoint = useBreakpoint() return ( The breakpoint when using{" "} {query} {" "} is "{breakpoint}". ) } return ( ) ``` If you want to use the `@media(min-width)` media query, set the `breakpoint.direction` to `"up"` in the config. ### Change the Config Change the `config.ts` in the generated theme. ```tsx import { defineConfig } from "@yamada-ui/react" export const config = defineConfig({ css: { varPrefix: "ui" }, breakpoint: { direction: "up", identifier: "@media screen" }, // [!code highlight] defaultColorMode: "light", defaultThemeScheme: "base", notice: { duration: 5000 }, theme: { responsive: true }, }) ``` ### Update the Provider Set the generated theme to `UIProvider`. ```tsx import { UIProvider } from "@workspaces/ui" import { theme, config } from "@workspace/theme" const App = () => { return ( ) } ``` ## Container Queries The responsive design uses the media query. If you want to use the container query, set the `breakpoint.identifier` to `"@container"` in the config. ```tsx const containerRef = useRef(null) const config = defineConfig({ breakpoint: { containerRef, identifier: "@container" }, }) const Component: FC<{ query: string }> = ({ query }) => { const breakpoint = useBreakpoint() return ( The breakpoint when using{" "} {query} {" "} is "{breakpoint}". ) } return ( ) ``` # Cascade Layers :::tip Cascade Layers overview is [here](https://yamada-ui.com/docs/styling/cascade-layers.md). ::: ## Customize ### Generate a Theme Use the [CLI](https://yamada-ui.com/docs/theming/cli.md) to generate a theme. :::warning Before running the following commands, you need to install `@yamada-ui/cli` and execute the `init` command. For more details, please see [here](https://yamada-ui.com/docs/get-started/cli.md). ::: ```bash pnpm yamada-cli theme ``` ```bash npm yamada-cli theme ``` ```bash yarn yamada-cli theme ``` ```bash bun yamada-cli theme ``` ### Change the Config Change the `config.ts` in the generated theme. ```tsx import type { LayersConfig } from "@yamada-ui/react" import { defineConfig } from "@yamada-ui/react" export const layers: LayersConfig = { tokens: { name: "tokens", order: 0 }, reset: { name: "reset", order: 1 }, global: { name: "global", order: 2 }, base: { name: "base", order: 3 }, size: { name: "size", order: 4 }, variant: { name: "variant", order: 5 }, props: { name: "props", order: 6 }, compounds: { name: "compounds", order: 7 }, } export const config = defineConfig({ css: { layers, varPrefix: "ui" }, breakpoint: { direction: "down", identifier: "@media screen" }, defaultColorMode: "dark", defaultThemeScheme: "base", notice: { duration: 5000 }, theme: { responsive: true }, }) ``` ### Update the Provider Set the generated theme to `UIProvider`. ```tsx import { UIProvider } from "@workspaces/ui" import { theme, config } from "@workspace/theme" const App = () => { return ( ) } ``` ## Disable To disable the cascade layers, set `css.layers` to `false`. ```tsx import { defineConfig } from "@yamada-ui/react" export const config = defineConfig({ css: { layers: false, varPrefix: "ui" }, // [!code highlight] breakpoint: { direction: "down", identifier: "@media screen" }, defaultColorMode: "dark", defaultThemeScheme: "base", notice: { duration: 5000 }, theme: { responsive: true }, }) ``` # CLI ## Usage :::warning Before running the following commands, you need to install `@yamada-ui/cli` and execute the `init` command. For more details, please see [here](https://yamada-ui.com/docs/get-started/cli.md). ::: ### Generate a Theme When you run the `theme` command, the theme will be generated at the specified path. ```bash pnpm yamada-cli theme ``` ```bash npm yamada-cli theme ``` ```bash yarn yamada-cli theme ``` ```bash bun yamada-cli theme ``` :::note If you don't specify a path, the theme will be generated in `./theme`. ::: ```bash Usage: pnpm yamada-cli theme [options] [path] generate theme to your project Arguments: path path to the theme directory Options: --cwd current working directory -c, --config path to the config file (default: "ui.json") -o, --overwrite overwrite existing directory. (default: false) -j, --js use js instead of ts -f, --format format the output files. -l, --lint lint the output files. -h, --help display help for command ``` ### Check the Differences When you run the `diff` command, you can check the difference between the local and remote themes. ```bash pnpm yamada-cli diff theme ``` ```bash npm yamada-cli diff theme ``` ```bash yarn yamada-cli diff theme ``` ```bash bun yamada-cli diff theme ``` ```bash Usage: pnpm yamada-cli diff [options] [component] check for updates against the registry Arguments: component component to check Options: --cwd current working directory -c, --config path to the config file (default: "ui.json") -s, --sequential run tasks sequentially. (default: false) -d, --detail show detailed changes (default: false) -h, --help display help for command ``` ### Update the theme When you run the `update` command, the theme will be updated. ```bash pnpm yamada-cli update theme ``` ```bash npm yamada-cli update theme ``` ```bash yarn yamada-cli update theme ``` ```bash bun yamada-cli update theme ``` ```bash Usage: pnpm yamada-cli update [options] [components...] update components in your project Arguments: components components to update Options: --cwd current working directory -c, --config path to the config file (default: "ui.json") -i, --install install dependencies (default: false) -s, --sequential run tasks sequentially. (default: false) -f, --format format the output files. -l, --lint lint the output files. -h, --help display help for command ``` ### Update typings When you run the `tokens` command, you can update the customized theme typings. This typings are used for [Style Props](https://yamada-ui.com/docs/styling/style-props.md). ```bash pnpm yamada-cli tokens ``` ```bash npm yamada-cli tokens ``` ```bash yarn yamada-cli tokens ``` ```bash bun yamada-cli tokens ``` :::note If you don't specify a path, the `theme.path` will be used. ::: ```bash Usage: pnpm yamada-cli tokens [options] [path] generate theme typings Arguments: path path to the theme file Options: --cwd current working directory -c, --config path to the config file (default: "ui.json") -o, --out output path -f, --format format the output file -l, --lint lint the output file -h, --help display help for command ``` # Color Mode :::tip Color Mode overview is [here](https://yamada-ui.com/docs/styling/color-mode.md). ::: ## Customize By default, the color mode is set to `"light"`. If you want to use `"dark"` or `"system"`, set the value to `config.defaultColorMode`. ### Generate a Theme Use the [CLI](https://yamada-ui.com/docs/theming/cli.md) to generate a theme. :::warning Before running the following commands, you need to install `@yamada-ui/cli` and execute the `init` command. For more details, please see [here](https://yamada-ui.com/docs/get-started/cli.md). ::: ```bash pnpm yamada-cli theme ``` ```bash npm yamada-cli theme ``` ```bash yarn yamada-cli theme ``` ```bash bun yamada-cli theme ``` ### Change the Config Change the `config.ts` in the generated theme. ```tsx import { defineConfig } from "@yamada-ui/react" export const config = defineConfig({ css: { varPrefix: "ui" }, breakpoint: { direction: "down", identifier: "@media screen" }, defaultColorMode: "dark", // [!code highlight] defaultThemeScheme: "base", notice: { duration: 5000 }, theme: { responsive: true }, }) ``` ### Update the Provider Set the generated theme to `UIProvider`. ```tsx import { UIProvider } from "@workspaces/ui" import { theme, config } from "@workspace/theme" const App = () => { return ( ) } ``` # Customization ## Setup ### Generate a Theme Use the [CLI](https://yamada-ui.com/docs/theming/cli.md) to generate a theme. :::warning Before running the following commands, you need to install `@yamada-ui/cli` and execute the `init` command. For more details, please see [here](https://yamada-ui.com/docs/get-started/cli.md). ::: ```bash pnpm yamada-cli theme ``` ```bash npm yamada-cli theme ``` ```bash yarn yamada-cli theme ``` ```bash bun yamada-cli theme ``` ### Update the Provider Set the generated theme to `UIProvider`. ```tsx import { UIProvider } from "@workspaces/ui" import { theme } from "@workspace/theme" const App = () => { return ( ) } ``` ## Change the Color Scheme To change the color scheme that is applied to the entire project, change the `styles/global-style.ts`. ```tsx import { defineStyles } from "@yamada-ui/react" export const globalStyle = defineStyles.globalStyle({ "*, *::before, *::after": { borderColor: "border", borderStyle: "solid", borderWidth: "0", focusVisibleRing: "outline", fontFeatureSettings: '"cv11"', overflowWrap: "break-word", }, "*::placeholder, *[data-placeholder]": { color: "fg.subtle", }, body: { colorScheme: "blue", // [!code highlight] bg: "bg", color: "fg", fontFamily: "body", lineHeight: "moderate", overflowX: "hidden", transitionDuration: "moderate", transitionProperty: "background-color", }, }) ``` ## Add a Color Scheme To add a color scheme that is used in the project, change the `semantic-tokens/color-schemes.ts`. ```tsx import { defineSemanticTokens } from "@yamada-ui/react" export const colorSchemes = defineSemanticTokens.colorSchemes({ accent: "cyan", // [!code highlight] danger: "red", error: "red", info: "blue", link: "blue", mono: ["black", "white"], primary: ["black", "white"], secondary: "gray", success: "green", warning: "orange", }) ``` ## Change the Background Color of the Application To change the background color of the application, change the `semantic-tokens/colors.ts`. ```tsx import { defineSemanticTokens } from "@yamada-ui/react" export const colors = defineSemanticTokens.colors({ ... black: { base: "#000000", // [!code highlight] bg: "#f8f8f8", contrast: "white", emphasized: "black.200", fg: "black.800", ghost: "black.100/50", muted: "black.100", outline: "black.900", solid: "black", subtle: "black.50", }, white: { base: "#fafafa", // [!code highlight] bg: "#161616", contrast: "black", emphasized: "white.400/50", fg: "white.900", ghost: "white.200/50", muted: "white.300/50", outline: "white.800", solid: "white", subtle: "white.200/50", }, ... }) ``` # Switching Themes ## Setup ### Generate a Theme Use the [CLI](https://yamada-ui.com/docs/theming/cli.md) to generate a theme. :::warning Before running the following commands, you need to install `@yamada-ui/cli` and execute the `init` command. For more details, please see [here](https://yamada-ui.com/docs/get-started/cli.md). ::: ```bash pnpm yamada-cli theme ``` ```bash npm yamada-cli theme ``` ```bash yarn yamada-cli theme ``` ```bash bun yamada-cli theme ``` ### Add a Theme Change the `index.ts` in the generated theme. ```tsx import { defineTheme } from "@yamada-ui/react" import { semanticTokens } from "./semantic-tokens" import { styles } from "./styles" import { tokens } from "./tokens" export { config } from "./config" export const theme = defineTheme({ styles, ...tokens, semanticTokens, themeSchemes: { blue: { semanticTokens: { colorSchemes: { primary: "blue" } } }, red: { semanticTokens: { colorSchemes: { primary: "red" } } }, green: { semanticTokens: { colorSchemes: { primary: "green" } } }, }, }) export type Theme = typeof theme ``` ### Update the Provider Set the generated theme to `UIProvider`. ```tsx import { UIProvider } from "@workspaces/ui" import { theme } from "@workspace/theme" const App = () => { return ( ) } ``` ### Add a Logic Use `useTheme` to switch themes. `useTheme` returns the `themeScheme` and `changeThemeScheme` to change the theme scheme. ```tsx const { themeScheme, changeThemeScheme } = useTheme() return ( The current scheme is "{themeScheme}" Primary Secondary Primary Secondary ) ``` ## Change the Default Theme Scheme To change the default theme scheme, set the value to `config.ts` in `defaultThemeScheme`. ### Change the Config Change the `config.ts` in the generated theme. ```tsx import { defineConfig } from "@yamada-ui/react" export const config = defineConfig({ css: { varPrefix: "ui" }, breakpoint: { direction: "down", identifier: "@media screen" }, defaultColorMode: "dark", defaultThemeScheme: "blue", // [!code highlight] notice: { duration: 5000 }, theme: { responsive: true }, }) ``` ### Update the Provider Set the generated theme to `UIProvider`. ```tsx import { UIProvider } from "@workspaces/ui" import { theme, config } from "@workspace/theme" const App = () => { return ( ) } ``` # Customization To change the prefix of CSS variables, set the value to `css.varPrefix`. ### Generate a Theme Use the [CLI](https://yamada-ui.com/docs/theming/cli.md) to generate a theme. :::warning Before running the following commands, you need to install `@yamada-ui/cli` and execute the `init` command. For more details, please see [here](https://yamada-ui.com/docs/get-started/cli.md). ::: ```bash pnpm yamada-cli theme ``` ```bash npm yamada-cli theme ``` ```bash yarn yamada-cli theme ``` ```bash bun yamada-cli theme ``` ### Change the Config Change the `config.ts` in the generated theme. ```tsx import { defineConfig } from "@yamada-ui/react" export const config = defineConfig({ css: { varPrefix: "custom" }, // [!code highlight] breakpoint: { direction: "down", identifier: "@media screen" }, defaultColorMode: "dark", defaultThemeScheme: "base", notice: { duration: 5000 }, theme: { responsive: true }, }) ``` ### Update the Provider Set the generated theme to `UIProvider`. ```tsx import { UIProvider } from "@workspaces/ui" import { theme, config } from "@workspace/theme" const App = () => { return ( ) } ``` # Overview The configuration defined in the theme are [here](https://github.com/yamada-ui/yamada-ui/blob/main/packages/react/src/theme/config.ts). ```tsx import { defineConfig } from "@yamada-ui/react" export const config = defineConfig({ css: { varPrefix: "ui" }, breakpoint: { direction: "down", identifier: "@media screen" }, defaultColorMode: "light", defaultThemeScheme: "base", notice: { duration: 5000 }, theme: { responsive: true }, }) ``` ## Properties | Property | Default | Description | | --------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `css.layers` | - | [Cascade layers](https://yamada-ui.com/docs/theming/cascade-layers.md) settings. | | `css.varPrefix` | `"ui"` | CSS variable prefix. | | `breakpoint.base` | `"9999px"` | Breakpoint base value. | | `breakpoint.containerRef` | - | [Container query](https://yamada-ui.com/docs/theming/breakpoints.md#container-query) reference when using the container query. | | `breakpoint.direction` | `"down"` | [Responsive design](https://yamada-ui.com/docs/styling/responsive-design.md) adopted [media query](https://yamada-ui.com/docs/theming/breakpoints.md#media-query). | | `breakpoint.identifier` | `"@media screen"` | Media query to use for breakpoints. | | `defaultColorMode` | `"light"` | Default [color mode](https://yamada-ui.com/docs/theming/color-mode.md). | | `defaultThemeScheme` | `"base"` | Default [theme scheme](https://yamada-ui.com/docs/theming/switching-themes.md). | | `theme.responsive` | `false` | Apply [responsive design](https://yamada-ui.com/docs/styling/responsive-design.md) to theme tokens. | | `disableTransitionOnChange` | `false` | Disable `transition` when changing the color mode or theme. | | `loading.screen.blockScrollOnMount` | `true` | Lock scrolling when [loading](https://yamada-ui.com/docs/hooks/use-loading.md) is displayed. | | `loading.screen.allowPinchZoom` | `false` | Handle zoom or pinch gestures on iOS devices when scrolling is locked. | | `loading.screen.loadingScheme` | `"oval"` | Scheme of [loading](https://yamada-ui.com/docs/hooks/use-loading.md). | | `loading.screen.duration` | `null` | Duration of [loading](https://yamada-ui.com/docs/hooks/use-loading.md). | | `loading.screen.loadingCount` | `0` | Initial count of [loading](https://yamada-ui.com/docs/hooks/use-loading.md). | | `loading.page.blockScrollOnMount` | `true` | Lock scrolling when [loading](https://yamada-ui.com/docs/hooks/use-loading.md) is displayed. | | `loading.page.allowPinchZoom` | `false` | Handle zoom or pinch gestures on iOS devices when scrolling is locked. | | `loading.page.loadingScheme` | `"oval"` | Scheme of [loading](https://yamada-ui.com/docs/hooks/use-loading.md). | | `loading.page.duration` | `null` | Duration of [loading](https://yamada-ui.com/docs/hooks/use-loading.md). | | `loading.page.loadingCount` | `0` | Initial count of [loading](https://yamada-ui.com/docs/hooks/use-loading.md). | | `loading.background.blockScrollOnMount` | `false` | Lock scrolling when [loading](https://yamada-ui.com/docs/hooks/use-loading.md) is displayed. | | `loading.background.allowPinchZoom` | `false` | Handle zoom or pinch gestures on iOS devices when scrolling is locked. | | `loading.background.loadingScheme` | `"oval"` | Scheme of [loading](https://yamada-ui.com/docs/hooks/use-loading.md). | | `loading.background.duration` | `null` | Duration of [loading](https://yamada-ui.com/docs/hooks/use-loading.md). | | `loading.background.loadingCount` | `0` | Initial count of [loading](https://yamada-ui.com/docs/hooks/use-loading.md). | | `notice.closable` | `true` | Enable to close [notice](https://yamada-ui.com/docs/hooks/use-notice.md). | | `notice.closeStrategy` | `["click", "drag"]` | Close strategy for the [notice](https://yamada-ui.com/docs/hooks/use-notice.md). | | `notice.duration` | `5000` | Duration of [notice](https://yamada-ui.com/docs/hooks/use-notice.md). | | `notice.expand` | `false` | Expand [notice](https://yamada-ui.com/docs/hooks/use-notice.md). | | `notice.limit` | `3` | Maximum number of [notice](https://yamada-ui.com/docs/hooks/use-notice.md). | | `notice.placement` | `"start"` | Placement of [notice](https://yamada-ui.com/docs/hooks/use-notice.md). | | `snacks.closable` | `true` | Enable close button on [snacks](https://yamada-ui.com/docs/hooks/use-snacks.md). | | `snacks.duration` | `5000` | Duration of [snacks](https://yamada-ui.com/docs/hooks/use-snacks.md). | | `snacks.limit` | - | Maximum number of [snacks](https://yamada-ui.com/docs/hooks/use-snacks.md). | | `snacks.placement` | `"start"` | Placement of [snacks](https://yamada-ui.com/docs/hooks/use-snacks.md). | | `snacks.startIndex` | `0` | Start `z-index` of [snacks](https://yamada-ui.com/docs/hooks/use-snacks.md). | # Global Styles ## Overview Global styles are styles that are applied to the entire application. The styles defined in the theme are [here](https://github.com/yamada-ui/yamada-ui/blob/main/packages/react/src/theme/styles/global-style.ts). ```tsx export const globalStyle = defineStyles.globalStyle({ "*, *::before, *::after": { borderColor: "border", borderStyle: "solid", borderWidth: "0", focusVisibleRing: "outline", fontFeatureSettings: '"cv11"', overflowWrap: "break-word", }, "*::placeholder, *[data-placeholder]": { color: "fg.subtle", }, body: { colorScheme: "mono", bg: "bg", color: "fg", fontFamily: "body", lineHeight: "moderate", overflowX: "hidden", transitionDuration: "moderate", transitionProperty: "background-color", }, }) ``` ## Customize ### Generate a Theme Use the [CLI](https://yamada-ui.com/docs/theming/cli.md) to generate a theme. :::warning Before running the following commands, you need to install `@yamada-ui/cli` and execute the `init` command. For more details, please see [here](https://yamada-ui.com/docs/get-started/cli.md). ::: ```bash pnpm yamada-cli theme ``` ```bash npm yamada-cli theme ``` ```bash yarn yamada-cli theme ``` ```bash bun yamada-cli theme ``` ### Change the Style Change the `styles/global-style.ts` in the generated theme. ```tsx import { defineStyles } from "@yamada-ui/react" export const globalStyle = defineStyles.globalStyle({ "*, *::before, *::after": { borderColor: "border", borderStyle: "solid", borderWidth: "0", focusVisibleRing: "outline", fontFeatureSettings: '"cv11"', overflowWrap: "break-word", }, "*::placeholder, *[data-placeholder]": { color: "fg.subtle", }, body: { colorScheme: "blue", // [!code highlight] bg: "bg", color: "fg", fontFamily: "body", lineHeight: "moderate", overflowX: "hidden", transitionDuration: "moderate", transitionProperty: "background-color", }, }) ``` ### Update the Provider Set the generated theme to `UIProvider`. ```tsx import { UIProvider } from "@workspaces/ui" import { theme } from "@workspace/theme" const App = () => { return ( ) } ``` # Layer Styles ## Overview Layer styles are tokens that are used to reuse visual styles across the project. The styles defined in the theme are [here](https://github.com/yamada-ui/yamada-ui/blob/main/packages/react/src/theme/styles/layer-styles.ts). ```tsx preview {(token, index) => ( {toTitleCase(token)} )} ``` ```tsx export const layerStyles = defineStyles.layerStyle({ active: { opacity: 1 }, disabled: { cursor: "not-allowed", opacity: 0.4, _ripple: { display: "none" }, }, ghost: { bg: "transparent", border: "1px solid transparent", color: "colorScheme.outline", }, "ghost.hover": { bg: "colorScheme.ghost", }, hover: { opacity: 0.8 }, outline: { bg: "transparent", border: "1px solid {colorScheme.muted}", color: "colorScheme.outline", }, "outline.hover": { bg: "colorScheme.ghost", }, panel: { bg: "bg.panel", borderColor: "border", borderWidth: "1px", }, readOnly: { cursor: "default", _ripple: { display: "none" }, }, solid: { bg: "colorScheme.solid", border: "1px solid transparent", color: "colorScheme.contrast", }, "solid.hover": { bg: "colorScheme.solid/80", }, subtle: { bg: "colorScheme.subtle", border: "1px solid transparent", color: "colorScheme.fg", }, "subtle.hover": { bg: "colorScheme.muted", }, surface: { bg: "colorScheme.subtle", border: "1px solid {colorScheme.muted}", color: "colorScheme.fg", }, "surface.hover": { bg: "colorScheme.muted", }, visuallyHidden: visuallyHiddenAttributes.style, }) ``` ## Customize ### Generate a Theme Use the [CLI](https://yamada-ui.com/docs/theming/cli.md) to generate a theme. :::warning Before running the following commands, you need to install `@yamada-ui/cli` and execute the `init` command. For more details, please see [here](https://yamada-ui.com/docs/get-started/cli.md). ::: ```bash pnpm yamada-cli theme ``` ```bash npm yamada-cli theme ``` ```bash yarn yamada-cli theme ``` ```bash bun yamada-cli theme ``` ### Change the Style Change the `styles/layer-styles.ts` in the generated theme. ```tsx import { defineStyles, visuallyHiddenAttributes } from "@yamada-ui/react" export const layerStyles = defineStyles.layerStyle({ dim: { opacity: 0.6 }, // [!code highlight] active: { opacity: 1 }, disabled: { cursor: "not-allowed", opacity: 0.4, _ripple: { display: "none" }, }, ghost: { bg: "transparent", border: "1px solid transparent", color: "colorScheme.outline", }, "ghost.hover": { bg: "colorScheme.ghost", }, hover: { opacity: 0.8 }, outline: { bg: "transparent", border: "1px solid {colorScheme.muted}", color: "colorScheme.outline", }, "outline.hover": { bg: "colorScheme.ghost", }, panel: { bg: "bg.panel", borderColor: "border", borderWidth: "1px", }, readOnly: { cursor: "default", _ripple: { display: "none" }, }, solid: { bg: "colorScheme.solid", border: "1px solid transparent", color: "colorScheme.contrast", }, "solid.hover": { bg: "colorScheme.solid/80", }, subtle: { bg: "colorScheme.subtle", border: "1px solid transparent", color: "colorScheme.fg", }, "subtle.hover": { bg: "colorScheme.muted", }, surface: { bg: "colorScheme.subtle", border: "1px solid {colorScheme.muted}", color: "colorScheme.fg", }, "surface.hover": { bg: "colorScheme.muted", }, visuallyHidden: visuallyHiddenAttributes.style, }) ``` ### Update the Provider Set the generated theme to `UIProvider`. ```tsx import { UIProvider } from "@workspaces/ui" import { theme } from "@workspace/theme" const App = () => { return ( ) } ``` ### Use Layer Style Set the value to `layerStyle`. ```tsx ``` # Reset Styles ## Overview Reset styles are styles that are applied to the entire application. The styles defined in the theme are [here](https://github.com/yamada-ui/yamada-ui/blob/main/packages/react/src/theme/styles/reset-style.ts). ```tsx export const resetStyle = defineStyles.resetStyle({ "*, *::before, *::after": { boxSizing: "border-box", margin: 0, padding: 0, }, "::-webkit-file-upload-button": { font: "inherit", WebkitAppearance: "button", }, "::-webkit-search-cancel-button, ::-webkit-search-decoration": { WebkitAppearance: "none", }, "[contenteditable]": { outline: "none", }, "[hidden]:where(:not([hidden='until-found']))": { display: "none !important", }, "[type='time']::-webkit-calendar-picker-indicator": { display: "none", }, a: { color: "inherit", textDecoration: "none", }, "abbr[title]": { textDecoration: "underline dotted", }, "b, strong": { fontWeight: "bolder", }, "button, input, optgroup, select, textarea": { appearance: "none", backgroundColor: "transparent", border: 0, borderRadius: 0, color: "inherit", font: "inherit", fontFeatureSettings: "inherit", fontVariationSettings: "inherit", letterSpacing: "inherit", outline: 0, WebkitAppearance: "none", }, "code, kbd, samp, pre": { fontFamily: "inherit", fontSize: "1em", }, fieldset: { border: 0, minWidth: 0, }, "h1, h2, h3, h4, h5, h6": { fontSize: "inherit", fontWeight: "inherit", }, hr: { blockSize: 0, border: "none", borderBlockStart: "1px solid", color: "inherit", overflow: "visible", }, html: { fontFamily: "system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'", lineHeight: 1.5, WebkitTapHighlightColor: "transparent", WebkitTextSizeAdjust: "100%", }, "img, svg, video, canvas, audio, iframe, embed, object": { display: "block", }, "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button": { display: "none", }, "input[type='search']": { outlineOffset: "-2px", }, legend: { display: "table", float: "left", width: "100%", }, mark: { backgroundColor: "inherit", color: "inherit", }, progress: { verticalAlign: "baseline", }, small: { fontSize: "80%", }, sub: { bottom: "-0.25em", }, "sub, sup": { fontSize: "75%", lineHeight: 0, position: "relative", verticalAlign: "baseline", }, summary: { display: "list-item", }, sup: { top: "-0.5em", }, "ul, ol": { listStyle: "none", }, "@media (prefers-reduced-motion: no-preference)": { ":where(html:focus-within)": { scrollBehavior: "smooth", }, }, ":where(html:has(dialog:modal[open]))": { overflow: "clip", }, ":where(dialog, [popover])": { background: "none", border: "none", color: "inherit", inset: "unset", maxHeight: "unset", maxWidth: "unset", overflow: "unset", }, ":where(dialog:not([open], [popover]), [popover]:not(:popover-open))": { display: "none !important", }, }) ``` ## Customize ### Generate a Theme Use the [CLI](https://yamada-ui.com/docs/theming/cli.md) to generate a theme. :::warning Before running the following commands, you need to install `@yamada-ui/cli` and execute the `init` command. For more details, please see [here](https://yamada-ui.com/docs/get-started/cli.md). ::: ```bash pnpm yamada-cli theme ``` ```bash npm yamada-cli theme ``` ```bash yarn yamada-cli theme ``` ```bash bun yamada-cli theme ``` ### Change the Style Change the `styles/reset-style.ts` in the generated theme. ```tsx import { defineStyles } from "@yamada-ui/react" export const resetStyle = defineStyles.resetStyle({ "*, *::before, *::after": { boxSizing: "content-box", // [!code highlight] margin: 0, padding: 0, }, "::-webkit-file-upload-button": { font: "inherit", WebkitAppearance: "button", }, "::-webkit-search-cancel-button, ::-webkit-search-decoration": { WebkitAppearance: "none", }, "[contenteditable]": { outline: "none", }, "[hidden]:where(:not([hidden='until-found']))": { display: "none !important", }, "[type='time']::-webkit-calendar-picker-indicator": { display: "none", }, a: { color: "inherit", textDecoration: "none", }, "abbr[title]": { textDecoration: "underline dotted", }, "b, strong": { fontWeight: "bolder", }, "button, input, optgroup, select, textarea": { appearance: "none", backgroundColor: "transparent", border: 0, borderRadius: 0, color: "inherit", font: "inherit", fontFeatureSettings: "inherit", fontVariationSettings: "inherit", letterSpacing: "inherit", outline: 0, WebkitAppearance: "none", }, "code, kbd, samp, pre": { fontFamily: "inherit", fontSize: "1em", }, fieldset: { border: 0, minWidth: 0, }, "h1, h2, h3, h4, h5, h6": { fontSize: "inherit", fontWeight: "inherit", }, hr: { blockSize: 0, border: "none", borderBlockStart: "1px solid", color: "inherit", overflow: "visible", }, html: { fontFamily: "system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'", lineHeight: 1.5, WebkitTapHighlightColor: "transparent", WebkitTextSizeAdjust: "100%", }, "img, svg, video, canvas, audio, iframe, embed, object": { display: "block", }, "input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button": { display: "none", }, "input[type='search']": { outlineOffset: "-2px", }, legend: { display: "table", float: "left", width: "100%", }, mark: { backgroundColor: "inherit", color: "inherit", }, progress: { verticalAlign: "baseline", }, small: { fontSize: "80%", }, sub: { bottom: "-0.25em", }, "sub, sup": { fontSize: "75%", lineHeight: 0, position: "relative", verticalAlign: "baseline", }, summary: { display: "list-item", }, sup: { top: "-0.5em", }, "ul, ol": { listStyle: "none", }, "@media (prefers-reduced-motion: no-preference)": { ":where(html:focus-within)": { scrollBehavior: "smooth", }, }, ":where(html:has(dialog:modal[open]))": { overflow: "clip", }, ":where(dialog, [popover])": { background: "none", border: "none", color: "inherit", inset: "unset", maxHeight: "unset", maxWidth: "unset", overflow: "unset", }, ":where(dialog:not([open], [popover]), [popover]:not(:popover-open))": { display: "none !important", }, }) ``` ### Update the Provider Set the generated theme to `UIProvider`. ```tsx import { UIProvider } from "@workspaces/ui" import { theme } from "@workspace/theme" const App = () => { return ( ) } ``` # Text Styles ## Overview Text styles are tokens that are used to reuse text styles across the project. The styles defined in the theme are [here](https://github.com/yamada-ui/yamada-ui/blob/main/packages/react/src/theme/styles/text-styles.ts). ```tsx Mono ``` ```tsx export const textStyles = defineStyles.textStyle({ ghost: { color: "colorScheme.outline", }, mono: { fontFamily: "mono", fontWeight: "medium", letterSpacing: "widest", whiteSpace: "nowrap", }, outline: { color: "colorScheme.outline", }, solid: { color: "colorScheme.contrast", }, subtle: { color: "colorScheme.fg", }, surface: { color: "colorScheme.fg", }, }) ``` ## Customize ### Generate a Theme Use the [CLI](https://yamada-ui.com/docs/theming/cli.md) to generate a theme. :::warning Before running the following commands, you need to install `@yamada-ui/cli` and execute the `init` command. For more details, please see [here](https://yamada-ui.com/docs/get-started/cli.md). ::: ```bash pnpm yamada-cli theme ``` ```bash npm yamada-cli theme ``` ```bash yarn yamada-cli theme ``` ```bash bun yamada-cli theme ``` ### Change the Style Change the `styles/text-styles.ts` in the generated theme. ```tsx import { defineStyles } from "@yamada-ui/react" export const textStyles = defineStyles.textStyle({ gradient: { bgClip: "text", bgGradient: "linear(to-l, #7928CA, #FF0080)", fontSize: "5xl", w: "full", }, ghost: { color: "colorScheme.outline", }, mono: { fontFamily: "mono", fontWeight: "medium", letterSpacing: "widest", whiteSpace: "nowrap", }, outline: { color: "colorScheme.outline", }, solid: { color: "colorScheme.contrast", }, subtle: { color: "colorScheme.fg", }, surface: { color: "colorScheme.fg", }, }) ``` ### Update the Provider Set the generated theme to `UIProvider`. ```tsx import { UIProvider } from "@workspaces/ui" import { theme } from "@workspace/theme" const App = () => { return ( ) } ``` ### Use Text Style Set the value to `textStyle`. ```tsx ``` # Animations ## Usage ```tsx ``` ## Tokens By default, no animation tokens are defined. # Aspect Ratios ## Usage ```tsx ``` ## Tokens | Token | Value | | ----------- | ------------- | | `wide` | `"16 / 9"` | | `bronze` | `"3.302 / 1"` | | `golden` | `"1.618 / 1"` | | `landscape` | `"4 / 3"` | | `portrait` | `"3 / 4"` | | `silver` | `"1.414 / 1"` | | `square` | `"1 / 1"` | | `ultrawide` | `"18 / 5"` | # Blurs ## Usage ```tsx ``` ## Tokens | Token | Value | | ----- | -------- | | `sm` | `"4px"` | | `md` | `"8px"` | | `lg` | `"12px"` | | `xl` | `"16px"` | | `2xl` | `"24px"` | | `3xl` | `"40px"` | | `4xl` | `"64px"` | # Borders ## Usage ```tsx ``` ## Tokens | Token | Value | | ----- | --------------- | | `xs` | `"0.5px solid"` | | `sm` | `"1px solid"` | | `md` | `"2px solid"` | | `lg` | `"4px solid"` | | `xl` | `"8px solid"` | # Breakpoints ## Usage ```tsx ``` ## Tokens | Token | Value | | ----- | -------- | | `sm` | `"30em"` | | `md` | `"48em"` | | `lg` | `"61em"` | | `xl` | `"80em"` | | `2xl` | `"90em"` | # Color Schemes ## Usage ```tsx ``` ## Tokens | Token | Value | | ----------- | ------------------- | | `danger` | `"red"` | | `error` | `"red"` | | `info` | `"blue"` | | `link` | `"blue"` | | `mono` | `["black","white"]` | | `primary` | `["black","white"]` | | `secondary` | `"gray"` | | `success` | `"green"` | | `warning` | `"orange"` | # Colors ## Usage ```tsx ``` ```tsx ``` ## Tokens | Token | Value | | ---------------- | --------------------------- | | `black.50` | `"tint(#000, 5)"` | | `black.100` | `"tint(#000, 10)"` | | `black.200` | `"tint(#000, 20)"` | | `black.300` | `"tint(#000, 30)"` | | `black.400` | `"tint(#000, 40)"` | | `black.500` | `"tint(#000, 50)"` | | `black.600` | `"tint(#000, 60)"` | | `black.700` | `"tint(#000, 70)"` | | `black.800` | `"tint(#000, 80)"` | | `black.900` | `"tint(#000, 90)"` | | `black.950` | `"tint(#000, 95)"` | | `blackAlpha.50` | `"rgb(0, 0, 0/ .05)"` | | `blackAlpha.100` | `"rgb(0, 0, 0/ .1)"` | | `blackAlpha.200` | `"rgb(0, 0, 0/ .2)"` | | `blackAlpha.300` | `"rgb(0, 0, 0/ .3)"` | | `blackAlpha.400` | `"rgb(0, 0, 0/ .4)"` | | `blackAlpha.500` | `"rgb(0, 0, 0/ .5)"` | | `blackAlpha.600` | `"rgb(0, 0, 0/ .6)"` | | `blackAlpha.700` | `"rgb(0, 0, 0/ .7)"` | | `blackAlpha.800` | `"rgb(0, 0, 0/ .8)"` | | `blackAlpha.900` | `"rgb(0, 0, 0/ .9)"` | | `blackAlpha.950` | `"rgb(0, 0, 0/ .95)"` | | `white.50` | `"shade(#fff, 5)"` | | `white.100` | `"shade(#fff, 10)"` | | `white.200` | `"shade(#fff, 20)"` | | `white.300` | `"shade(#fff, 30)"` | | `white.400` | `"shade(#fff, 40)"` | | `white.500` | `"shade(#fff, 50)"` | | `white.600` | `"shade(#fff, 60)"` | | `white.700` | `"shade(#fff, 70)"` | | `white.800` | `"shade(#fff, 80)"` | | `white.900` | `"shade(#fff, 90)"` | | `white.950` | `"shade(#fff, 95)"` | | `whiteAlpha.50` | `"rgb(255, 255, 255/ .05)"` | | `whiteAlpha.100` | `"rgb(255, 255, 255/ .1)"` | | `whiteAlpha.200` | `"rgb(255, 255, 255/ .2)"` | | `whiteAlpha.300` | `"rgb(255, 255, 255/ .3)"` | | `whiteAlpha.400` | `"rgb(255, 255, 255/ .4)"` | | `whiteAlpha.500` | `"rgb(255, 255, 255/ .5)"` | | `whiteAlpha.600` | `"rgb(255, 255, 255/ .6)"` | | `whiteAlpha.700` | `"rgb(255, 255, 255/ .7)"` | | `whiteAlpha.800` | `"rgb(255, 255, 255/ .8)"` | | `whiteAlpha.900` | `"rgb(255, 255, 255/ .9)"` | | `whiteAlpha.950` | `"rgb(255, 255, 255/ .95)"` | | `amber.50` | `"#fdf0d8"` | | `amber.100` | `"#fde8c4"` | | `amber.200` | `"#fbd593"` | | `amber.300` | `"#f9c367"` | | `amber.400` | `"#f7b23b"` | | `amber.500` | `"#f59f0a"` | | `amber.600` | `"#ce8509"` | | `amber.700` | `"#a26907"` | | `amber.800` | `"#764c05"` | | `amber.900` | `"#4e3303"` | | `amber.950` | `"#362302"` | | `blue.50` | `"#e2edfd"` | | `blue.100` | `"#cfe0fc"` | | `blue.200` | `"#adcbfa"` | | `blue.300` | `"#8bb5f8"` | | `blue.400` | `"#659cf6"` | | `blue.500` | `"#4387f4"` | | `blue.600` | `"#186bf2"` | | `blue.700` | `"#0c59d4"` | | `blue.800` | `"#0a47a9"` | | `blue.900` | `"#07357d"` | | `blue.950` | `"#062c6a"` | | `cyan.50` | `"#cef6fd"` | | `cyan.100` | `"#b0f1fd"` | | `cyan.200` | `"#7ee8fb"` | | `cyan.300` | `"#4de0f9"` | | `cyan.400` | `"#16d6f8"` | | `cyan.500` | `"#07b6d5"` | | `cyan.600` | `"#0590a8"` | | `cyan.700` | `"#046e81"` | | `cyan.800` | `"#034854"` | | `cyan.900` | `"#012228"` | | `cyan.950` | `"#011114"` | | `emerald.50` | `"#d0fbed"` | | `emerald.100` | `"#b4f8e2"` | | `emerald.200` | `"#80f4cd"` | | `emerald.300` | `"#4defb9"` | | `emerald.400` | `"#19eba5"` | | `emerald.500` | `"#10b77f"` | | `emerald.600` | `"#0d9165"` | | `emerald.700` | `"#096748"` | | `emerald.800` | `"#06422e"` | | `emerald.900` | `"#021710"` | | `emerald.950` | `"#000503"` | | `flashy.50` | `"#fdedf5"` | | `flashy.100` | `"#fbdaeb"` | | `flashy.200` | `"#f7b5d6"` | | `flashy.300` | `"#f390c2"` | | `flashy.400` | `"#ef6bad"` | | `flashy.500` | `"#ec4699"` | | `flashy.600` | `"#e82185"` | | `flashy.700` | `"#c6156e"` | | `flashy.800` | `"#a21159"` | | `flashy.900` | `"#780d42"` | | `flashy.950` | `"#660b38"` | | `fuchsia.50` | `"#f9e3fd"` | | `fuchsia.100` | `"#f5d0fb"` | | `fuchsia.200` | `"#eeaff8"` | | `fuchsia.300` | `"#e78af5"` | | `fuchsia.400` | `"#e069f2"` | | `fuchsia.500` | `"#d948ef"` | | `fuchsia.600` | `"#d01eeb"` | | `fuchsia.700` | `"#b112ca"` | | `fuchsia.800` | `"#900ea4"` | | `fuchsia.900` | `"#6b0b7a"` | | `fuchsia.950` | `"#5b0967"` | | `gray.50` | `"#dedede"` | | `gray.100` | `"#d4d4d4"` | | `gray.200` | `"#bababa"` | | `gray.300` | `"#a3a3a3"` | | `gray.400` | `"#8a8a8a"` | | `gray.500` | `"#737373"` | | `gray.600` | `"#5c5c5c"` | | `gray.700` | `"#474747"` | | `gray.800` | `"#303030"` | | `gray.900` | `"#1c1c1c"` | | `gray.950` | `"#0f0f0f"` | | `green.50` | `"#cff7de"` | | `green.100` | `"#b5f2cb"` | | `green.200` | `"#85eaaa"` | | `green.300` | `"#51e186"` | | `green.400` | `"#23d163"` | | `green.500` | `"#1ba14c"` | | `green.600` | `"#16833e"` | | `green.700` | `"#126932"` | | `green.800` | `"#0d4e25"` | | `green.900` | `"#083017"` | | `green.950` | `"#062311"` | | `indigo.50` | `"#e8e8fd"` | | `indigo.100` | `"#d9dafc"` | | `indigo.200` | `"#bdbef9"` | | `indigo.300` | `"#9c9ef6"` | | `indigo.400` | `"#8082f4"` | | `indigo.500` | `"#6467f2"` | | `indigo.600` | `"#3a3dee"` | | `indigo.700` | `"#1417e6"` | | `indigo.800` | `"#1114c0"` | | `indigo.900` | `"#0d0f96"` | | `indigo.950` | `"#0b0d83"` | | `lime.50` | `"#e7facc"` | | `lime.100` | `"#ddf7b5"` | | `lime.200` | `"#c7f287"` | | `lime.300` | `"#b2ee59"` | | `lime.400` | `"#9de92b"` | | `lime.500` | `"#82cb15"` | | `lime.600` | `"#6ba611"` | | `lime.700` | `"#507d0d"` | | `lime.800` | `"#385809"` | | `lime.900` | `"#1e2e05"` | | `lime.950` | `"#121c03"` | | `orange.50` | `"#fef0e6"` | | `orange.100` | `"#fee4d2"` | | `orange.200` | `"#fdc7a1"` | | `orange.300` | `"#fbac74"` | | `orange.400` | `"#fa9247"` | | `orange.500` | `"#f97415"` | | `orange.600` | `"#e06106"` | | `orange.700` | `"#b34d05"` | | `orange.800` | `"#863a03"` | | `orange.900` | `"#5e2902"` | | `orange.950` | `"#461e02"` | | `pink.50` | `"#fde8ed"` | | `pink.100` | `"#fcd9e3"` | | `pink.200` | `"#f9b9ca"` | | `pink.300` | `"#f693ad"` | | `pink.400` | `"#f37295"` | | `pink.500` | `"#f0517c"` | | `pink.600` | `"#ec275c"` | | `pink.700` | `"#d81347"` | | `pink.800` | `"#ae0f39"` | | `pink.900` | `"#880c2d"` | | `pink.950` | `"#710a25"` | | `purple.50` | `"#f0e2fe"` | | `purple.100` | `"#e9d3fd"` | | `purple.200` | `"#d7b1fb"` | | `purple.300` | `"#c994fa"` | | `purple.400` | `"#b772f8"` | | `purple.500` | `"#a855f7"` | | `purple.600` | `"#9229f5"` | | `purple.700` | `"#7e0bea"` | | `purple.800` | `"#6609be"` | | `purple.900` | `"#510797"` | | `purple.950` | `"#44067f"` | | `red.50` | `"#fdeae8"` | | `red.100` | `"#fbd9d5"` | | `red.200` | `"#f6b2ac"` | | `red.300` | `"#f28c82"` | | `red.400` | `"#ee6a5d"` | | `red.500` | `"#ea4334"` | | `red.600` | `"#de2817"` | | `red.700` | `"#b42013"` | | `red.800` | `"#8a190f"` | | `red.900` | `"#66120b"` | | `red.950` | `"#530f09"` | | `rose.50` | `"#feecef"` | | `rose.100` | `"#fdd8de"` | | `rose.200` | `"#fbb2be"` | | `rose.300` | `"#f88b9d"` | | `rose.400` | `"#f6657d"` | | `rose.500` | `"#f43e5c"` | | `rose.600` | `"#f2183c"` | | `rose.700` | `"#cf0c2d"` | | `rose.800` | `"#a40a23"` | | `rose.900` | `"#7d071b"` | | `rose.950` | `"#650616"` | | `sky.50` | `"#ddf3fd"` | | `sky.100` | `"#c5eafc"` | | `sky.200` | `"#95d9f9"` | | `sky.300` | `"#65c8f6"` | | `sky.400` | `"#35b7f3"` | | `sky.500` | `"#0da2e7"` | | `sky.600` | `"#0b87c1"` | | `sky.700` | `"#096995"` | | `sky.800` | `"#064e6f"` | | `sky.900` | `"#042f43"` | | `sky.950` | `"#032230"` | | `teal.50` | `"#cdf9f4"` | | `teal.100` | `"#b1f6ee"` | | `teal.200` | `"#7ef1e3"` | | `teal.300` | `"#51ecda"` | | `teal.400` | `"#1ee6cf"` | | `teal.500` | `"#14b8a5"` | | `teal.600` | `"#108e80"` | | `teal.700` | `"#0c6a5f"` | | `teal.800` | `"#07403a"` | | `teal.900` | `"#031c19"` | | `teal.950` | `"#010504"` | | `violet.50` | `"#eee7fe"` | | `violet.100` | `"#e3d8fd"` | | `violet.200` | `"#cbb6fb"` | | `violet.300` | `"#b699fa"` | | `violet.400` | `"#a17cf8"` | | `violet.500` | `"#895af6"` | | `violet.600` | `"#6d34f4"` | | `violet.700` | `"#500ced"` | | `violet.800` | `"#410ac2"` | | `violet.900` | `"#34089b"` | | `violet.950` | `"#2e0788"` | | `yellow.50` | `"#fef4d7"` | | `yellow.100` | `"#feefc3"` | | `yellow.200` | `"#fde290"` | | `yellow.300` | `"#fdd663"` | | `yellow.400` | `"#fcc931"` | | `yellow.500` | `"#fbbd04"` | | `yellow.600` | `"#ce9b03"` | | `yellow.700` | `"#a67d03"` | | `yellow.800` | `"#795b02"` | | `yellow.900` | `"#503d01"` | | `yellow.950` | `"#372a01"` | ## Semantic Tokens | Token | Value | | -------------------- | ------------------------------------ | | `current` | `"currentColor"` | | `transparent` | `"transparent"` | | `bg.base` | `["white","black"]` | | `bg.contrast` | `["black","white"]` | | `bg.emphasized` | `["black.200","white.300"]` | | `bg.error` | `["error.50","error.950"]` | | `bg.float` | `["white","white.bg"]` | | `bg.ghost` | `["black.50","white.50"]` | | `bg.info` | `["info.50","info.950"]` | | `bg.muted` | `["black.100","white.200"]` | | `bg.overlay` | `"blackAlpha.600"` | | `bg.panel` | `["black.bg","white.bg"]` | | `bg.subtle` | `["black.50","white.100"]` | | `bg.success` | `["success.50","success.950"]` | | `bg.warning` | `["warning.50","warning.950"]` | | `border.base` | `["black.100","white.200/70"]` | | `border.contrast` | `["black","white"]` | | `border.emphasized` | `["black.200","white.300/70"]` | | `border.error` | `["error.500","error.400"]` | | `border.info` | `["info.500","info.400"]` | | `border.muted` | `["black.100","white.200/70"]` | | `border.subtle` | `["black.50","white.100/70"]` | | `border.success` | `["success.500","success.400"]` | | `border.warning` | `["warning.500","warning.400"]` | | `fg.base` | `["#171717","#ededed"]` | | `fg.contrast` | `["#fafafa","#000000"]` | | `fg.emphasized` | `["gray.600","gray.300"]` | | `fg.error` | `["error.500","error.500"]` | | `fg.info` | `["info.500","info.500"]` | | `fg.muted` | `["gray.500","gray.400"]` | | `fg.subtle` | `["gray.400","gray.500"]` | | `fg.success` | `["success.500","success.500"]` | | `fg.warning` | `["warning.500","warning.500"]` | | `black.base` | `"#0a0b0b"` | | `black.bg` | `"#f8f8f8"` | | `black.contrast` | `"white"` | | `black.emphasized` | `"black.200"` | | `black.fg` | `"black.800"` | | `black.ghost` | `"black.100/50"` | | `black.muted` | `"black.100"` | | `black.outline` | `"black.900"` | | `black.solid` | `"black"` | | `black.subtle` | `"black.50"` | | `white.base` | `"#ffffff"` | | `white.bg` | `"#161616"` | | `white.contrast` | `"black"` | | `white.emphasized` | `"white.400/50"` | | `white.fg` | `"white.900"` | | `white.ghost` | `"white.200/50"` | | `white.muted` | `"white.300/50"` | | `white.outline` | `"white.800"` | | `white.solid` | `"white"` | | `white.subtle` | `"white.200/50"` | | `gray.base` | `"gray.500"` | | `gray.bg` | `["black.bg","white.bg"]` | | `gray.contrast` | `["white","white"]` | | `gray.emphasized` | `["black.200","white.400/50"]` | | `gray.fg` | `["black.800","white.900"]` | | `gray.ghost` | `["black.100/50","white.200/50"]` | | `gray.muted` | `["black.100","white.300/50"]` | | `gray.outline` | `["black.900","white.800"]` | | `gray.solid` | `["gray.500","gray.800"]` | | `gray.subtle` | `["black.50","white.200/50"]` | | `cyan.base` | `"cyan.500"` | | `cyan.bg` | `["cyan.50/40","cyan.400/10"]` | | `cyan.contrast` | `["black","black"]` | | `cyan.emphasized` | `["cyan.200","cyan.700"]` | | `cyan.fg` | `["cyan.800","cyan.100"]` | | `cyan.ghost` | `["cyan.50","cyan.800/50"]` | | `cyan.muted` | `["cyan.100","cyan.800"]` | | `cyan.outline` | `["cyan.600","cyan.500"]` | | `cyan.solid` | `["cyan.400","cyan.500"]` | | `cyan.subtle` | `["cyan.50","cyan.800/50"]` | | `emerald.base` | `"emerald.500"` | | `emerald.bg` | `["emerald.50/40","emerald.400/10"]` | | `emerald.contrast` | `["white","white"]` | | `emerald.emphasized` | `["emerald.200","emerald.700"]` | | `emerald.fg` | `["emerald.700","emerald.100"]` | | `emerald.ghost` | `["emerald.50","emerald.800/50"]` | | `emerald.muted` | `["emerald.100","emerald.800"]` | | `emerald.outline` | `["emerald.600","emerald.500"]` | | `emerald.solid` | `["emerald.500","emerald.600"]` | | `emerald.subtle` | `["emerald.50","emerald.800/50"]` | | `teal.base` | `"teal.500"` | | `teal.bg` | `["teal.50/40","teal.400/10"]` | | `teal.contrast` | `["white","white"]` | | `teal.emphasized` | `["teal.200","teal.700"]` | | `teal.fg` | `["teal.700","teal.100"]` | | `teal.ghost` | `["teal.50","teal.800/50"]` | | `teal.muted` | `["teal.100","teal.800"]` | | `teal.outline` | `["teal.600","teal.500"]` | | `teal.solid` | `["teal.500","teal.600"]` | | `teal.subtle` | `["teal.50","teal.800/50"]` | | `green.base` | `"green.500"` | | `green.bg` | `["green.50/40","green.400/10"]` | | `green.contrast` | `["white","white"]` | | `green.emphasized` | `["green.200","green.700"]` | | `green.fg` | `["green.700","green.100"]` | | `green.ghost` | `["green.50","green.900"]` | | `green.muted` | `["green.100","green.800"]` | | `green.outline` | `["green.600","green.500"]` | | `green.solid` | `["green.500","green.600"]` | | `green.subtle` | `["green.50","green.900"]` | | `lime.base` | `"lime.500"` | | `lime.bg` | `["lime.50/40","lime.400/10"]` | | `lime.contrast` | `["black","black"]` | | `lime.emphasized` | `["lime.200","lime.700"]` | | `lime.fg` | `["lime.800","lime.100"]` | | `lime.ghost` | `["lime.50","lime.900"]` | | `lime.muted` | `["lime.100","lime.800"]` | | `lime.outline` | `["lime.600","lime.500"]` | | `lime.solid` | `["lime.400","lime.500"]` | | `lime.subtle` | `["lime.50","lime.900"]` | | `sky.base` | `"sky.500"` | | `sky.bg` | `["sky.50/40","sky.400/10"]` | | `sky.contrast` | `["white","white"]` | | `sky.emphasized` | `["sky.200","sky.700"]` | | `sky.fg` | `["sky.700","sky.100"]` | | `sky.ghost` | `["sky.50","sky.900"]` | | `sky.muted` | `["sky.100","sky.800"]` | | `sky.outline` | `["sky.600","sky.500"]` | | `sky.solid` | `["sky.500","sky.600"]` | | `sky.subtle` | `["sky.50","sky.900"]` | | `amber.base` | `"amber.500"` | | `amber.bg` | `["amber.50/40","amber.400/10"]` | | `amber.contrast` | `["black","black"]` | | `amber.emphasized` | `["amber.200","amber.700"]` | | `amber.fg` | `["amber.800","amber.100"]` | | `amber.ghost` | `["amber.50","amber.950/50"]` | | `amber.muted` | `["amber.100","amber.800"]` | | `amber.outline` | `["amber.600","amber.500"]` | | `amber.solid` | `["amber.400","amber.500"]` | | `amber.subtle` | `["amber.50","amber.950"]` | | `blue.base` | `"blue.500"` | | `blue.bg` | `["blue.50/40","blue.400/10"]` | | `blue.contrast` | `["white","white"]` | | `blue.emphasized` | `["blue.200","blue.700"]` | | `blue.fg` | `["blue.700","blue.100"]` | | `blue.ghost` | `["blue.50","blue.950/50"]` | | `blue.muted` | `["blue.100","blue.800"]` | | `blue.outline` | `["blue.600","blue.500"]` | | `blue.solid` | `["blue.500","blue.600"]` | | `blue.subtle` | `["blue.50","blue.950"]` | | `flashy.base` | `"flashy.500"` | | `flashy.bg` | `["flashy.50/40","flashy.400/10"]` | | `flashy.contrast` | `["white","white"]` | | `flashy.emphasized` | `["flashy.200","flashy.700"]` | | `flashy.fg` | `["flashy.700","flashy.100"]` | | `flashy.ghost` | `["flashy.50","flashy.950/50"]` | | `flashy.muted` | `["flashy.100","flashy.800"]` | | `flashy.outline` | `["flashy.600","flashy.500"]` | | `flashy.solid` | `["flashy.500","flashy.600"]` | | `flashy.subtle` | `["flashy.50","flashy.950"]` | | `fuchsia.base` | `"fuchsia.500"` | | `fuchsia.bg` | `["fuchsia.50/40","fuchsia.400/10"]` | | `fuchsia.contrast` | `["white","white"]` | | `fuchsia.emphasized` | `["fuchsia.200","fuchsia.700"]` | | `fuchsia.fg` | `["fuchsia.700","fuchsia.100"]` | | `fuchsia.ghost` | `["fuchsia.50","fuchsia.950/50"]` | | `fuchsia.muted` | `["fuchsia.100","fuchsia.800"]` | | `fuchsia.outline` | `["fuchsia.600","fuchsia.500"]` | | `fuchsia.solid` | `["fuchsia.500","fuchsia.600"]` | | `fuchsia.subtle` | `["fuchsia.50","fuchsia.950"]` | | `indigo.base` | `"indigo.500"` | | `indigo.bg` | `["indigo.50/40","indigo.400/10"]` | | `indigo.contrast` | `["white","white"]` | | `indigo.emphasized` | `["indigo.200","indigo.700"]` | | `indigo.fg` | `["indigo.700","indigo.100"]` | | `indigo.ghost` | `["indigo.50","indigo.950/50"]` | | `indigo.muted` | `["indigo.100","indigo.800"]` | | `indigo.outline` | `["indigo.600","indigo.500"]` | | `indigo.solid` | `["indigo.500","indigo.600"]` | | `indigo.subtle` | `["indigo.50","indigo.950"]` | | `orange.base` | `"orange.500"` | | `orange.bg` | `["orange.50/40","orange.400/10"]` | | `orange.contrast` | `["white","white"]` | | `orange.emphasized` | `["orange.200","orange.700"]` | | `orange.fg` | `["orange.700","orange.100"]` | | `orange.ghost` | `["orange.50","orange.950/50"]` | | `orange.muted` | `["orange.100","orange.800"]` | | `orange.outline` | `["orange.600","orange.500"]` | | `orange.solid` | `["orange.500","orange.600"]` | | `orange.subtle` | `["orange.50","orange.950"]` | | `pink.base` | `"pink.500"` | | `pink.bg` | `["pink.50/40","pink.400/10"]` | | `pink.contrast` | `["white","white"]` | | `pink.emphasized` | `["pink.200","pink.700"]` | | `pink.fg` | `["pink.700","pink.100"]` | | `pink.ghost` | `["pink.50","pink.950/50"]` | | `pink.muted` | `["pink.100","pink.800"]` | | `pink.outline` | `["pink.600","pink.500"]` | | `pink.solid` | `["pink.500","pink.600"]` | | `pink.subtle` | `["pink.50","pink.950"]` | | `purple.base` | `"purple.500"` | | `purple.bg` | `["purple.50/40","purple.400/10"]` | | `purple.contrast` | `["white","white"]` | | `purple.emphasized` | `["purple.200","purple.700"]` | | `purple.fg` | `["purple.700","purple.100"]` | | `purple.ghost` | `["purple.50","purple.950/50"]` | | `purple.muted` | `["purple.100","purple.800"]` | | `purple.outline` | `["purple.600","purple.500"]` | | `purple.solid` | `["purple.500","purple.600"]` | | `purple.subtle` | `["purple.50","purple.950"]` | | `red.base` | `"red.500"` | | `red.bg` | `["red.50/40","red.400/10"]` | | `red.contrast` | `["white","white"]` | | `red.emphasized` | `["red.200","red.700"]` | | `red.fg` | `["red.700","red.100"]` | | `red.ghost` | `["red.50","red.950/50"]` | | `red.muted` | `["red.100","red.800"]` | | `red.outline` | `["red.600","red.500"]` | | `red.solid` | `["red.500","red.600"]` | | `red.subtle` | `["red.50","red.950"]` | | `rose.base` | `"rose.500"` | | `rose.bg` | `["rose.50/40","rose.400/10"]` | | `rose.contrast` | `["white","white"]` | | `rose.emphasized` | `["rose.200","rose.700"]` | | `rose.fg` | `["rose.700","rose.100"]` | | `rose.ghost` | `["rose.50","rose.950/50"]` | | `rose.muted` | `["rose.100","rose.800"]` | | `rose.outline` | `["rose.600","rose.500"]` | | `rose.solid` | `["rose.500","rose.600"]` | | `rose.subtle` | `["rose.50","rose.950"]` | | `violet.base` | `"violet.500"` | | `violet.bg` | `["violet.50/40","violet.400/10"]` | | `violet.contrast` | `["white","white"]` | | `violet.emphasized` | `["violet.200","violet.700"]` | | `violet.fg` | `["violet.700","violet.100"]` | | `violet.ghost` | `["violet.50","violet.950/50"]` | | `violet.muted` | `["violet.100","violet.800"]` | | `violet.outline` | `["violet.600","violet.500"]` | | `violet.solid` | `["violet.500","violet.600"]` | | `violet.subtle` | `["violet.50","violet.950"]` | | `yellow.base` | `"yellow.500"` | | `yellow.bg` | `["yellow.50/40","yellow.400/10"]` | | `yellow.contrast` | `["black","black"]` | | `yellow.emphasized` | `["yellow.200","yellow.700"]` | | `yellow.fg` | `["yellow.800","yellow.100"]` | | `yellow.ghost` | `["yellow.50","yellow.950/50"]` | | `yellow.muted` | `["yellow.100","yellow.800"]` | | `yellow.outline` | `["yellow.600","yellow.500"]` | | `yellow.solid` | `["yellow.400","yellow.500"]` | | `yellow.subtle` | `["yellow.50","yellow.950"]` | # Durations ## Usage ```tsx ``` ```tsx ``` ## Tokens | Token | Value | | ---------- | --------- | | `fastest` | `"50ms"` | | `faster` | `"100ms"` | | `fast` | `"150ms"` | | `moderate` | `"200ms"` | | `slow` | `"300ms"` | | `slower` | `"400ms"` | | `slowest` | `"500ms"` | # Easings ## Usage ```tsx ``` ```tsx ``` ## Tokens | Token | Value | | ---------------- | ---------------------------------- | | `ease` | `"cubic-bezier(0.25, 0, 0.25, 1)"` | | `ease-in` | `"cubic-bezier(0.42, 0, 1, 1)"` | | `ease-in-out` | `"cubic-bezier(0.42, 0, 0.58, 1)"` | | `ease-in-smooth` | `"cubic-bezier(0.32, 0.72, 0, 1)"` | | `ease-out` | `"cubic-bezier(0, 0, 0.58, 1)"` | # Font Sizes ## Usage ```tsx ``` ## Tokens | Token | Value | | ----- | ------------ | | `2xs` | `"0.625rem"` | | `xs` | `"0.75rem"` | | `sm` | `"0.875rem"` | | `md` | `"1rem"` | | `lg` | `"1.125rem"` | | `xl` | `"1.25rem"` | | `2xl` | `"1.5rem"` | | `3xl` | `"1.75rem"` | | `4xl` | `"2rem"` | | `5xl` | `"2.25rem"` | | `6xl` | `"3rem"` | | `7xl` | `"3.75rem"` | | `8xl` | `"4.5rem"` | | `9xl` | `"6rem"` | # Font Weights ## Usage ```tsx ``` ## Tokens | Token | Value | | ----------- | ----- | | `hairline` | `100` | | `thin` | `200` | | `light` | `300` | | `normal` | `400` | | `medium` | `500` | | `semibold` | `600` | | `bold` | `700` | | `extrabold` | `800` | | `black` | `900` | # Fonts ## Usage ```tsx ``` ## Tokens | Token | Value | | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `body` | `"Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', '游ゴシック体', YuGothic, 'YuGothic M', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"` | | `heading` | `"Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', '游ゴシック体', YuGothic, 'YuGothic M', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"` | | `mono` | `"Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', '游ゴシック体', YuGothic, 'YuGothic M', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"` | # Gradients ## Usage ```tsx ``` ## Tokens By default, no gradient tokens are defined. # Keyframes ## Usage ```tsx ``` ## Tokens | Token | Value | | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `bounce` | `{"0%, 100%":{ animationTimingFunction: "cubic-bezier(0.8, 0, 1, 1)", transform: "translateY(-25%)"},"50%":{ animationTimingFunction: "cubic-bezier(0, 0, 0.2, 1)", transform: "none"} }` | | `ping` | `{"75%, 100%":{ opacity: "0", transform: "scale({animation-scale, 2})"} }` | | `pulse` | `{"50%":{ opacity: "0.5"} }` | | `spin` | `{ from: { transform: "rotate(0deg)"}, to: { transform: "rotate(360deg)"} }` | | `bg-position` | `{ from: { bgPosition: "{animation-from, 1rem} 0"}, to: { bgPosition: "{animation-to, 0} 0"} }` | | `position` | `{ from: { insetBlockStart: "{animation-from-y}", insetInlineStart: "{animation-from-x}"}, to: { insetBlockStart: "{animation-to-y}", insetInlineStart: "{animation-to-x}"} }` | | `translate` | `{ from: { translate: "{animation-from-x, 0} {animation-from-y, 0}"}, to: { translate: "{animation-to-x, 0} {animation-to-y, 0}"} }` | | `fade-in` | `{ from: { opacity: "{animation-from-opacity, 0}"}, to: { opacity: "{animation-to-opacity, 1}"} }` | | `fade-out` | `{ from: { opacity: "{animation-from-opacity, 1}"}, to: { opacity: "{animation-to-opacity, 0}"} }` | | `scale-in` | `{ from: { scale: "{animation-from-scale, 0.95}"}, to: { scale: "{animation-to-scale, 1}"} }` | | `scale-out` | `{ from: { scale: "{animation-from-scale, 1}"}, to: { scale: "{animation-to-scale, 0.95}"} }` | | `collapse-height` | `{ from: { height: "{animation-height}"}, to: { height: "0"} }` | | `collapse-width` | `{ from: { width: "{animation-width}"}, to: { width: "0"} }` | | `expand-height` | `{ from: { height: "0"}, to: { height: "{animation-height}"} }` | | `expand-width` | `{ from: { width: "0"}, to: { width: "{animation-width}"} }` | | `slide-from-bottom-full` | `{ from: { translate: "0 {animation-from, 100%}"}, to: { translate: "0 {animation-to, 0}"} }` | | `slide-from-left-full` | `{ from: { translate: "{animation-from, -100%} 0"}, to: { translate: "{animation-to, 0} 0"} }` | | `slide-from-right-full` | `{ from: { translate: "{animation-from, 100%} 0"}, to: { translate: "{animation-to, 0} 0"} }` | | `slide-from-top-full` | `{ from: { translate: "0 {animation-from, -100%}"}, to: { translate: "0 {animation-to, 0}"} }` | | `slide-to-bottom-full` | `{ from: { translate: "0 {animation-from, 0}"}, to: { translate: "0 {animation-to, 100%}"} }` | | `slide-to-left-full` | `{ from: { translate: "{animation-from, 0} 0"}, to: { translate: "{animation-to, -100%} 0"} }` | | `slide-to-right-full` | `{ from: { translate: "{animation-from, 0} 0"}, to: { translate: "{animation-to, 100%} 0"} }` | | `slide-to-top-full` | `{ from: { translate: "0 {animation-from, 0}"}, to: { translate: "0 {animation-to, -100%}"} }` | | `slide-from-bottom` | `{ from: { translate: "0 {animation-from, 0.5rem}"}, to: { translate: "0 {animation-to, 0}"} }` | | `slide-from-left` | `{ from: { translate: "{animation-from, -0.5rem} 0"}, to: { translate: "{animation-to, 0} 0"} }` | | `slide-from-right` | `{ from: { translate: "{animation-from, 0.5rem} 0"}, to: { translate: "{animation-to, 0} 0"} }` | | `slide-from-top` | `{ from: { translate: "0 {animation-from, -0.5rem}"}, to: { translate: "0 {animation-to, 0}"} }` | | `slide-to-bottom` | `{ from: { translate: "0 {animation-from, 0}"}, to: { translate: "0 {animation-to, 0.5rem}"} }` | | `slide-to-left` | `{ from: { translate: "{animation-from, 0} 0"}, to: { translate: "{animation-to, -0.5rem} 0"} }` | | `slide-to-right` | `{ from: { translate: "{animation-from, 0} 0"}, to: { translate: "{animation-to, 0.5rem} 0"} }` | | `slide-to-top` | `{ from: { translate: "0 {animation-from, 0}"}, to: { translate: "0 {animation-to, -0.5rem}"} }` | # Letter Spacings ## Usage ```tsx ``` ## Tokens | Token | Value | | --------- | ------------ | | `tighter` | `"-0.05em"` | | `tight` | `"-0.025em"` | | `wide` | `"0.025em"` | | `wider` | `"0.05em"` | | `widest` | `"0.1em"` | # Line Heights ## Usage ```tsx ``` ## Tokens | Token | Value | | ---------- | ------- | | `shorter` | `1.25` | | `short` | `1.375` | | `moderate` | `1.5` | | `tall` | `1.625` | | `taller` | `2` | # Radii ## Usage ```tsx ``` ```tsx ``` ## Tokens | Token | Value | | ------ | ------------- | | `2xs` | `"0.0625rem"` | | `xs` | `"0.125rem"` | | `sm` | `"0.25rem"` | | `md` | `"0.375rem"` | | `lg` | `"0.5rem"` | | `xl` | `"0.75rem"` | | `2xl` | `"1rem"` | | `3xl` | `"1.5rem"` | | `4xl` | `"2rem"` | | `full` | `"9999px"` | ## Semantic Tokens | Token | Value | | ----- | ------- | | `l1` | `"sm"` | | `l2` | `"md"` | | `l3` | `"lg"` | | `l4` | `"xl"` | | `l5` | `"2xl"` | # Shadows ## Usage ```tsx ``` ## Tokens | Token | Value | | ------- | ------------------------------------------------------------------------------------------------------ | | `xs` | `["0 1px 2px {colors.black/20}, 0px 0px 1px {colors.black/20}","0px 1px 1px {colors.black/80}"]` | | `sm` | `["0px 2px 4px {colors.black/10}, 0px 0px 1px {colors.black/30}","0px 2px 4px {colors.black/80}"]` | | `md` | `["0px 4px 8px {colors.black/10}, 0px 0px 1px {colors.black/30}","0px 4px 8px {colors.black/80}"]` | | `lg` | `["0px 8px 16px {colors.black/10}, 0px 0px 1px {colors.black/30}","0px 8px 16px {colors.black/80}"]` | | `xl` | `["0px 16px 24px {colors.black/10}, 0px 0px 1px {colors.black/30}","0px 16px 24px {colors.black/80}"]` | | `2xl` | `["0px 24px 40px {colors.black/20}, 0px 0px 1px {colors.black/30}","0px 24px 40px {colors.black/80}"]` | | `inner` | `["inset 0 2px 4px 0 {colors.black/10}","inset 0 2px 4px 0 {colors.black/30}"]` | | `inset` | `["inset 0 0 0 1px {colors.black/5}","inset 0 0 0 1px {colors.white/5}"]` | # Sizes ## Usage ```tsx ``` ```tsx ``` ## Tokens | Token | Value | | ----- | ------------ | | `1` | `"0.25rem"` | | `2` | `"0.5rem"` | | `3` | `"0.75rem"` | | `4` | `"1rem"` | | `5` | `"1.25rem"` | | `6` | `"1.5rem"` | | `7` | `"1.75rem"` | | `8` | `"2rem"` | | `9` | `"2.25rem"` | | `10` | `"2.5rem"` | | `11` | `"2.75rem"` | | `12` | `"3rem"` | | `13` | `"3.25rem"` | | `14` | `"3.5rem"` | | `15` | `"3.75rem"` | | `16` | `"4rem"` | | `20` | `"5rem"` | | `24` | `"6rem"` | | `28` | `"7rem"` | | `32` | `"8rem"` | | `36` | `"9rem"` | | `40` | `"10rem"` | | `44` | `"11rem"` | | `48` | `"12rem"` | | `52` | `"13rem"` | | `56` | `"14rem"` | | `60` | `"15rem"` | | `64` | `"16rem"` | | `68` | `"17rem"` | | `72` | `"18rem"` | | `76` | `"19rem"` | | `80` | `"20rem"` | | `84` | `"21rem"` | | `88` | `"22rem"` | | `92` | `"23rem"` | | `96` | `"24rem"` | | `0.5` | `"0.125rem"` | | `1.5` | `"0.375rem"` | | `2.5` | `"0.625rem"` | | `3.5` | `"0.875rem"` | | `4.5` | `"1.125rem"` | | `5.5` | `"1.375rem"` | | `6.5` | `"1.625rem"` | | `7.5` | `"1.875rem"` | | `px` | `"1px"` | ## Semantic Tokens | Token | Value | | ------ | --------------- | | `fit` | `"fit-content"` | | `max` | `"max-content"` | | `min` | `"min-content"` | | `dvh` | `"100dvh"` | | `dvw` | `"100dvw"` | | `full` | `"100%"` | | `lvh` | `"100lvh"` | | `lvw` | `"100lvw"` | | `svh` | `"100svh"` | | `svw` | `"100svw"` | | `vh` | `"100vh"` | | `vw` | `"100vw"` | | `9xs` | `"1rem"` | | `8xs` | `"2rem"` | | `7xs` | `"3rem"` | | `6xs` | `"4rem"` | | `5xs` | `"6rem"` | | `4xs` | `"8rem"` | | `3xs` | `"10rem"` | | `2xs` | `"12rem"` | | `xs` | `"16rem"` | | `sm` | `"20rem"` | | `md` | `"24rem"` | | `lg` | `"28rem"` | | `xl` | `"32rem"` | | `2xl` | `"38rem"` | | `3xl` | `"44rem"` | | `4xl` | `"50rem"` | | `5xl` | `"56rem"` | | `6xl` | `"64rem"` | | `7xl` | `"72rem"` | | `8xl` | `"80rem"` | | `9xl` | `"88rem"` | ## Fractional Tokens | Token | Value | | ------- | ------------------------ | | `1/2` | `"calc(100% / 2)"` | | `1/3` | `"calc(100% / 3)"` | | `1/4` | `"calc(100% / 4)"` | | `1/5` | `"calc(100% / 5)"` | | `1/6` | `"calc(100% / 6)"` | | `1/12` | `"calc(100% / 12)"` | | `2/3` | `"calc(100% / 3 * 2)"` | | `2/5` | `"calc(100% / 5 * 2)"` | | `2/6` | `"calc(100% / 6 * 2)"` | | `2/12` | `"calc(100% / 12 * 2)"` | | `3/4` | `"calc(100% / 4 * 3)"` | | `3/5` | `"calc(100% / 5 * 3)"` | | `3/6` | `"calc(100% / 6 * 3)"` | | `3/12` | `"calc(100% / 12 * 3)"` | | `4/5` | `"calc(100% / 5 * 4)"` | | `4/6` | `"calc(100% / 6 * 4)"` | | `4/12` | `"calc(100% / 12 * 4)"` | | `5/6` | `"calc(100% / 6 * 5)"` | | `5/12` | `"calc(100% / 12 * 5)"` | | `6/12` | `"calc(100% / 12 * 6)"` | | `7/12` | `"calc(100% / 12 * 7)"` | | `8/12` | `"calc(100% / 12 * 8)"` | | `9/12` | `"calc(100% / 12 * 9)"` | | `10/12` | `"calc(100% / 12 * 10)"` | | `11/12` | `"calc(100% / 12 * 11)"` | # Spaces ## Usage ```tsx ``` ```tsx ``` ```tsx ``` ## Tokens | Token | Value | | ----- | ------------ | | `1` | `"0.25rem"` | | `2` | `"0.5rem"` | | `3` | `"0.75rem"` | | `4` | `"1rem"` | | `5` | `"1.25rem"` | | `6` | `"1.5rem"` | | `7` | `"1.75rem"` | | `8` | `"2rem"` | | `9` | `"2.25rem"` | | `10` | `"2.5rem"` | | `11` | `"2.75rem"` | | `12` | `"3rem"` | | `13` | `"3.25rem"` | | `14` | `"3.5rem"` | | `15` | `"3.75rem"` | | `16` | `"4rem"` | | `20` | `"5rem"` | | `24` | `"6rem"` | | `28` | `"7rem"` | | `32` | `"8rem"` | | `36` | `"9rem"` | | `40` | `"10rem"` | | `44` | `"11rem"` | | `48` | `"12rem"` | | `52` | `"13rem"` | | `56` | `"14rem"` | | `60` | `"15rem"` | | `64` | `"16rem"` | | `68` | `"17rem"` | | `72` | `"18rem"` | | `76` | `"19rem"` | | `80` | `"20rem"` | | `84` | `"21rem"` | | `88` | `"22rem"` | | `92` | `"23rem"` | | `96` | `"24rem"` | | `0.5` | `"0.125rem"` | | `1.5` | `"0.375rem"` | | `2.5` | `"0.625rem"` | | `3.5` | `"0.875rem"` | | `4.5` | `"1.125rem"` | | `5.5` | `"1.375rem"` | | `6.5` | `"1.625rem"` | | `7.5` | `"1.875rem"` | | `px` | `"1px"` | ## Semantic Tokens | Token | Value | | ----- | ------ | | `xs` | `"1"` | | `sm` | `"2"` | | `md` | `"4"` | | `lg` | `"6"` | | `xl` | `"8"` | | `2xl` | `"12"` | | `3xl` | `"16"` | | `4xl` | `"24"` | | `5xl` | `"32"` | # Z Indices ## Usage ```tsx ``` ## Tokens | Token | Value | | ---------- | ------ | | `yamcha` | `1` | | `kurillin` | `9` | | `nappa` | `99` | | `guldo` | `100` | | `jeice` | `110` | | `burter` | `120` | | `recoome` | `130` | | `ginyu` | `140` | | `dodoria` | `150` | | `zarbon` | `160` | | `freeza` | `9996` | | `vegeta` | `9997` | | `sonGoku` | `9998` | | `beerus` | `9999` |