Documentation for the Styling of Yamada UI v2. # Overview ## Overview The list of major concepts provided by the library is as follows. - [Style Props](https://yamada-ui.com/docs/styling/style-props.md) - [Conditional Styles](https://yamada-ui.com/docs/styling/conditional-styles.md) - [Responsive Design](https://yamada-ui.com/docs/styling/responsive-design.md) - [Color Mode](https://yamada-ui.com/docs/styling/color-mode.md) - [Color Scheme](https://yamada-ui.com/docs/styling/color-scheme.md) - [CSS Value Functions](https://yamada-ui.com/docs/styling/css-value-functions.md) - [Interpolation](https://yamada-ui.com/docs/styling/interpolation.md) - [Animation](https://yamada-ui.com/docs/styling/animation.md) - [Focus Ring](https://yamada-ui.com/docs/styling/focus-ring.md) - [Global Styles](https://yamada-ui.com/docs/styling/global-styles.md) - [Reset Styles](https://yamada-ui.com/docs/styling/reset-styles.md) - [Layer Styles](https://yamada-ui.com/docs/styling/layer-styles.md) - [Text Styles](https://yamada-ui.com/docs/styling/text-styles.md) - [At-Rules](https://yamada-ui.com/docs/styling/at-rules.md) - [Cascade Layers](https://yamada-ui.com/docs/styling/cascade-layers.md) ## Usage [Style Props](https://yamada-ui.com/docs/styling/style-props.md) allow you to apply styles to elements using props. Style Props conform to the [CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Properties) and provide all properties in camelCase. ```tsx Box ``` :::note [Style Props](https://yamada-ui.com/docs/styling/style-props.md) uses [@mdn/browser-compat-data](https://github.com/mdn/browser-compat-data). When the library is updated, Style Props is also updated periodically. ::: # Animation ## Usage ```tsx Box ``` You can also use [theme](https://yamada-ui.com/docs/theming.md) [keyframes](https://yamada-ui.com/docs/theming/tokens/keyframes.md) to apply common keyframes throughout your application. Using `animationName` or `_keyframes` is recommended. ```tsx Box ``` ### Use Theme Tokens To use [theme](https://yamada-ui.com/docs/theming.md) [animations](https://yamada-ui.com/docs/theming/tokens/animations.md), set the `animation` property. ```tsx Box ``` :::warning By default, no animation tokens are defined. ::: ## Components Yamada UI provides components that make animations easier to implement. - [Motion](https://yamada-ui.com/docs/components/motion.md): A convenient component that extends the Yamada UI [Style Props](https://yamada-ui.com/docs/styling/style-props.md) to [Motion](https://motion.dev/). - [Airy](https://yamada-ui.com/docs/components/airy.md): A component that provides an animation that smoothly switches between two elements. - [Collapse](https://yamada-ui.com/docs/components/collapse.md): A component that expands or collapses an element to display it. - [FadeScale](https://yamada-ui.com/docs/components/fade-scale.md): A component that gradually expands or shrinks an element to display or hide it. - [Fade](https://yamada-ui.com/docs/components/fade.md): A component that gradually displays or hides an element. - [Flip](https://yamada-ui.com/docs/components/flip.md): A component that provides an animation that flips between two elements. - [Ripple](https://yamada-ui.com/docs/components/ripple.md): A component that provides a ripple effect to an element to recognize if the user has clicked it. - [Rotate](https://yamada-ui.com/docs/components/rotate.md): A component that provides an animation that rotates between two elements. - [Skeleton](https://yamada-ui.com/docs/components/skeleton.md): A component that functions as a placeholder until the content is loaded. - [SlideFade](https://yamada-ui.com/docs/components/slide-fade.md): A component that gradually displays or hides an element from a specified position. - [Slide](https://yamada-ui.com/docs/components/slide.md): A component that displays or hides an element from the corner of the page. ## Hooks Yamada UI provides convenient custom hooks for animations. - [useAnimation](https://yamada-ui.com/docs/hooks/use-animation.md): A custom hook that implements animations similar to CSS `keyframes`. - [useDynamicAnimation](https://yamada-ui.com/docs/hooks/use-dynamic-animation.md): A custom hook that is used to switch animations. # At-Rules ## Overview You can configure CSS [at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) by using [Style Props](https://yamada-ui.com/docs/styling/style-props.md). ## @media [@media](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) to apply styles based on specific conditions, use `_media`. ```tsx Print me ``` `print` and other media types have a convenient shortcut. ```tsx Print me ``` :::note Available @media are [here](https://yamada-ui.com/docs/styling/style-props.md#at-rules). ::: ### Use multiple queries To use multiple queries, set multiple values in an array. ```tsx Box ``` ### Use arbitrary queries To use arbitrary queries, use `query`. ```tsx Box ``` ## @container [@container](https://developer.mozilla.org/en-US/docs/Web/CSS/@container) to apply styles based on the size or conditions of a specific container, use `_container`. ```tsx Resize me ``` ### Specify container name ```tsx Resize me ``` ## @supports [@supports](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) to apply styles based on conditions, use `_supports`. ```tsx Supported flex ``` ## @keyframes [@keyframes](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) to apply intermediate states of an animation, use `_keyframes`. ```tsx Box ``` :::note Animations have their own documentation. See [Animations](https://yamada-ui.com/docs/styling/animation.md) for more details. ::: ## Arbitrary at-rules To use arbitrary at-rules, use `css`. ```tsx (RULE)": { // Define the style you want to customize. }, }} > Box ``` # Cascade Layers ## Overview Yamada UI uses CSS [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to set the priority between [themes](https://yamada-ui.com/docs/theming.md) and [Style Props](https://yamada-ui.com/docs/styling/style-props.md). This priority plays an important role in component styling. ## Layer Types The layer types are as follows. - `tokens`: [themes](https://yamada-ui.com/docs/theming.md) tokens. - `reset`: [reset styles](https://yamada-ui.com/docs/styling/reset-styles.md). - `global`: [global styles](https://yamada-ui.com/docs/styling/global-styles.md). - `base`: [base style](https://yamada-ui.com/docs/components/styled.md#base-style) of components. - `size`: [size style](https://yamada-ui.com/docs/components/styled.md#size-style) of components. - `variant`: [variant style](https://yamada-ui.com/docs/components/styled.md#variant-style) of components. - `props`: [props style](https://yamada-ui.com/docs/components/styled.md#props-style) of components. - `compounds`: [compounds style](https://yamada-ui.com/docs/components/styled.md#compounds-style) of components. ## Layer Order The order of the generated layers is as follows. The same property is overridden in order of priority. ```css @layer tokens, reset, global, base, size, variant, props, compounds; ``` :::note [Style Props](https://yamada-ui.com/docs/styling/style-props.md) is always prioritized unless [!important](https://developer.mozilla.org/en-US/docs/Web/CSS/important) is applied because it is not set in the layer. ::: ## 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 }, }) ``` # Color Mode ## Overview Yamada UI has built-in support for managing the application's color mode, allowing you to easily switch between light and dark modes. All provided components also support dark mode. :::info If you want to change the default color mode, please see [here](https://yamada-ui.com/docs/theming/color-mode.md). ::: ## Usage To apply color mode to [Style Props](https://yamada-ui.com/docs/styling/style-props.md), set an array. - Set the value for light mode as the first element. - Set the value for dark mode as the last element. ```tsx This is Box ``` ## Utilities Yamada UI provides useful custom hooks for color mode. - [useColorMode](https://yamada-ui.com/docs/hooks/use-color-mode.md): A custom hook that returns the current color mode. - [useColorModeValue](https://yamada-ui.com/docs/hooks/use-color-mode-value.md): A custom hook that returns the value of the current color mode from the provided values. # Color Scheme ## Overview Color scheme generates color contexts for components based on values. This improves color consistency. When a value is set to the color scheme, the following properties are generated. These values are set in the [semantic tokens](https://yamada-ui.com/docs/theming/tokens/colors.md#semantic-tokens) of the [theme](https://yamada-ui.com/docs/theming.md). - `colorScheme.solid`: The solid color used for background etc. - `colorScheme.bg`: The faint color used for background etc. - `colorScheme.ghost`: The faint color used for background etc. - `colorScheme.fg`: The color used for text etc. - `colorScheme.outline`: The color used for border etc. - `colorScheme.contrast`: The text color used for `colorScheme.solid`. - `colorScheme.subtle`: The color with higher contrast than `colorScheme.bg`. - `colorScheme.muted`: The color with higher contrast than `colorScheme.subtle`. - `colorScheme.emphasized`: The color with higher contrast than `colorScheme.muted`. Also, [tone colors](https://yamada-ui.com/docs/theming/tokens/colors.md#tokens) from `colorScheme.50` to `colorScheme.950` are generated. :::note In Yamada UI, the `colorScheme` is set to `"mono"` for the `body` in the [global styles](https://yamada-ui.com/docs/styling/global-styles.md). If you want to change the `colorScheme` for the entire application, please refer to [customization](https://yamada-ui.com/docs/theming/styles/global-styles.md#customize). ::: ## 使い方 ```tsx Solid Subtle ``` Color scheme inherits the color scheme of the parent element. ```tsx Provided by Parent Child ``` # Conditional Styles ## Overview By using conditional styles, you can apply styles for [pseudo-elements](https://yamada-ui.com/docs/styling/style-props.md#pseudo-elements), [pseudo-classes](https://yamada-ui.com/docs/styling/style-props.md#pseudo-classes), and [selectors](https://yamada-ui.com/docs/styling/style-props.md#selectors). ## Pseudo Elements To apply styles to the `::before` pseudo-element, use `_before`. ```tsx Box ``` :::note Available pseudo-elements are [here](https://yamada-ui.com/docs/styling/style-props.md#pseudo-elements). ::: ## Pseudo Classes To apply styles to the `:hover` pseudo-class, use `_hover`. ```tsx Hover me ``` You can also apply multiple values together. ```tsx Hover me ``` You can also combine multiple conditions. ```tsx Hover and focus me ``` :::note Available pseudo-classes are [here](https://yamada-ui.com/docs/styling/style-props.md#pseudo-classes). ::: ## Selectors To apply styles based on the `data-orientation` attribute, use `_horizontal` or `_vertical`. ```tsx horizontal ``` :::note Available selectors are [here](https://yamada-ui.com/docs/styling/style-props.md#selectors). ::: ### Group Selectors To apply styles to an element based on the state or attribute of the parent element, add the `"group"` or `"data-group"` role to the parent element and use the `_group*` conditional styles for the child elements. ```tsx Hover me ``` :::note Available group selectors are [here](https://yamada-ui.com/docs/styling/style-props.md#selectors). ::: ### Peer Selectors To apply styles to an element based on the state or attribute of the peer element, add the `data-peer` to the peer element and use the `_peer*` conditional styles. ```tsx Focus the peer Focus me! ``` :::note Available peer selectors are [here](https://yamada-ui.com/docs/styling/style-props.md#selectors). ::: ### Any Selectors To use any selectors, use `css` to apply styles. ```tsx Closed ``` # CSS Custom Properties ## Usage To create a [CSS custom property (variable)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), set a property with the `--` prefix in either props or `css`. ```tsx ``` To reference custom properties, use CSS [var](https://developer.mozilla.org/en-US/docs/Web/CSS/var) or `{}` ([interpolation](https://yamada-ui.com/docs/styling/interpolation.md)). ```tsx Box ``` :::warning Custom properties you set will only apply to child elements of the element where they are defined. ::: Additionally, custom properties can reference [theme](https://yamada-ui.com/docs/theming.md) tokens. ```tsx Box ``` # CSS Value Functions :::note Function arguments can reference tokens from the [theme](https://yamada-ui.com/docs/theming.md). ::: ## Calculation & Comparison Yamada UI provides functions that make CSS calculation and comparison functions more convenient. ### calc You can use CSS's [calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) to reference and calculate tokens from the [theme](https://yamada-ui.com/docs/theming.md). ```tsx Calc ``` ```tsx Use interpolated token ``` :::warning If the token name is a number, such as the [spaces](https://yamada-ui.com/docs/theming/tokens/spaces.md) tokens in the [theme](https://yamada-ui.com/docs/theming.md), reference it using `{}` (see [interpolation](https://yamada-ui.com/docs/styling/interpolation.md)). ::: ### min Use CSS's [min](https://developer.mozilla.org/en-US/docs/Web/CSS/min) to set the smallest value from the given arguments. If there is only one argument, a second value of `"100%"` is set. ```tsx Min Omitted Min ``` ### max Use CSS's [max](https://developer.mozilla.org/en-US/docs/Web/CSS/max) to set the largest value from the given arguments. If there is only one argument, a second value of `"100%"` is set. ```tsx Max Omitted Max ``` ### clamp Use CSS's [clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp) to constrain a value between an upper and lower bound. If there are two arguments, a recommended value of `"100%"` is set. ```tsx Clamp Omitted Clamp ``` ## Color Yamada UI provides functions that easily mix colors together, lighten, and darken colors. ### mix Use CSS's [color-mix](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) to mix colors together. You can specify two or three arguments. The [method](https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method) can be omitted, and the default is `in srgb`. ```tsx "in srgb" + "red.500" + "blue.500" ``` You can change the ratio by specifying a percentage. ```tsx "in lab" + "orange.500 80%" + "purple.500 20%" ``` :::warning Make sure the percentages add up to `100%`. ::: ### tint Use [mix](#mix) to lighten a color by mixing it with `#FFFFFF`. ```tsx Tint color ``` ### shade Use [mix](#mix) to darken a color by mixing it with `#000000`. ```tsx Shade color ``` ### transparentize Use [mix](#mix) to make a color transparent by mixing it with `transparent`. A shorthand notation like `bg="red.500 / 50"` is also available. ```tsx Transparentize color ``` ### tone Use [mix](#mix) to create a color based on a specified color and tone. ```tsx preview {TONES.map((tone) => ( Tone {tone} ))} ``` ## Gradient Yamada UI provides functions that easily create gradients. To add a gradient, set functions and values to `bgGradient`. - `linear(, , )` - `radial(, )` You can also use other CSS gradient functions like `repeating-linear` or `conic`. Shortcuts are available for ``. ```ts { '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', } ``` ```tsx ``` ### Customize Colors You can use both theme [tokens](https://yamada-ui.com/docs/theming/tokens/colors.md) and [CSS color values](https://developer.mozilla.org/en-US/docs/Web/CSS/color). ```tsx ``` ### Text Gradient To add a gradient to text, set `bgGradient` and `bgClip` to `text`. ```tsx クリリンのことか……クリリンのことかーーーっ！！！！！ ``` # Focus Ring ## Overview A focus ring is used to identify the element that is currently focused. Yamada UI provides `focusRing` and `focusVisibleRing` to easily configure the style of the focus ring. ## Usage ### focusRing `focusRing` is applied to `&:is(:focus, [data-focus])`. ```tsx Button ``` ### focusVisibleRing `focusVisibleRing` is applied to `&:is(:focus-visible, [data-focus-visible])`. ```tsx Button ``` :::note By default, Yamada UI sets `focusVisibleRing="outline"` for all elements via [global styles](https://yamada-ui.com/docs/styling/global-styles.md). Therefore, you do not need to set `focusVisibleRing` individually for each element. ::: ## Customize ### Change Variant ```tsx {(value, index) => ( {toTitleCase(value)} )} ``` ### Change Color To change the color, set a value to `focusRingColor`. ```tsx Button ``` ### Change Width To change the width, set a value to `focusRingWidth`. ```tsx Button ``` ### Change Style To change the style, set a value to `focusRingStyle`. ```tsx Button ``` ### Change Offset To change the offset, set a value to `focusRingOffset`. ```tsx Button ``` # 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 ( ) } ``` # Interpolation ## Overview Interpolation is a feature for referencing [CSS custom properties (variables)](https://yamada-ui.com/docs/styling/css-custom-properties.md) or tokens from the [theme](https://yamada-ui.com/docs/theming.md). ## Usage You can reference the property name set with [CSS custom properties (variables)](https://yamada-ui.com/docs/styling/css-custom-properties.md) using `{custom-property-name}`. ```tsx Box ``` ### Reference Theme Tokens Yamada UI [Style Props](https://yamada-ui.com/docs/styling/style-props.md) only reference the corresponding tokens from the [theme](https://yamada-ui.com/docs/theming.md). For example, `borderRadius` references tokens from `radii`, but not from `spaces`. By using `{}`, you can reference tokens outside of the corresponding ones. ```tsx Box Box ``` Additionally, by using `{}` within strings, you can reference tokens from the [theme](https://yamada-ui.com/docs/theming.md). This is useful for [shorthand properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) such as [border](https://developer.mozilla.org/en-US/docs/Web/CSS/border). ```tsx Box ``` # 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 ( ) } ``` # Responsive Design :::tip By default, responsive design using `@media(max-width)` media queries is adopted. If you want to use `@media(min-width)` media queries, please refer to [here](https://yamada-ui.com/docs/theming/breakpoints.md#media-queries). ::: ## Overview Responsive design refers to the breakpoints defined in the theme. Yamada UI has a Default Theme where [breakpoints](https://yamada-ui.com/docs/theming/tokens/breakpoints.md) are defined. :::note If you want to change the breakpoints, please check theme's [Breakpoints](https://yamada-ui.com/docs/theming/breakpoints.md). ::: ## Usage To set responsive design to [Style Props](https://yamada-ui.com/docs/styling/style-props.md), set an object with the breakpoints as the key. - The keys of the object define the keys set in the theme's [Breakpoints](https://yamada-ui.com/docs/theming/tokens/breakpoints.md). - The values of the object define the values of the styles set by the key. ```tsx Box ``` The above code generates the following CSS: ```css .Box { background: var(--ui-colors-bg-contrast); @media screen and (max-width: 768px) { background: var(--ui-colors-success); } } ``` ## Utilities Yamada UI provides useful custom hooks for building responsive layouts. - [useBreakpoint](https://yamada-ui.com/docs/hooks/use-breakpoint.md): A custom hook that returns the current breakpoint. This hook monitors the window size and returns the appropriate value. - [useBreakpointEffect](https://yamada-ui.com/docs/hooks/use-breakpoint-effect.md): A custom hook that executes a specific callback function when the breakpoint changes. - [useUpdateBreakpointEffect](https://yamada-ui.com/docs/hooks/use-update-breakpoint-effect.md): A custom hook that skips the side effect on the initial render and executes a specific callback function when the breakpoint changes. - [useBreakpointState](https://yamada-ui.com/docs/hooks/use-breakpoint-state.md): A custom hook that returns the current breakpoint from the provided object as the initial value. - [useBreakpointValue](https://yamada-ui.com/docs/hooks/use-breakpoint-value.md): A custom hook that returns the value of the current breakpoint from the provided object. This hook monitors changes in the window size and returns the appropriate value. # Style Props Here's a list of all the Style Props available in the library. | Prop | CSS Property | Theme Token | | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | | `accent` | [`accent-color`](https://developer.mozilla.org/docs/Web/CSS/accent-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `accentColor` | [`accent-color`](https://developer.mozilla.org/docs/Web/CSS/accent-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `alignContent` | [`align-content`](https://developer.mozilla.org/docs/Web/CSS/align-content) | - | | `alignItems` | [`align-items`](https://developer.mozilla.org/docs/Web/CSS/align-items) | - | | `alignmentBaseline` | [`alignment-baseline`](https://developer.mozilla.org/docs/Web/CSS/alignment-baseline) | - | | `alignSelf` | [`align-self`](https://developer.mozilla.org/docs/Web/CSS/align-self) | - | | `all` | [`all`](https://developer.mozilla.org/docs/Web/CSS/all) | - | | `anchorName` | [`anchor-name`](https://developer.mozilla.org/docs/Web/CSS/anchor-name) | - | | `anchorScope` | [`anchor-scope`](https://drafts.csswg.org/css-anchor-position-1/#propdef-anchor-scope) | - | | `animation` | [`animation`](https://developer.mozilla.org/docs/Web/CSS/animation) | [`animations`](https://yamada-ui.com/docs/theming/tokens/animations.md) | | `animationComposition` | [`animation-composition`](https://developer.mozilla.org/docs/Web/CSS/animation-composition) | - | | `animationDelay` | [`animation-delay`](https://developer.mozilla.org/docs/Web/CSS/animation-delay) | - | | `animationDirection` | [`animation-direction`](https://developer.mozilla.org/docs/Web/CSS/animation-direction) | - | | `animationDuration` | [`animation-duration`](https://developer.mozilla.org/docs/Web/CSS/animation-duration) | [`durations`](https://yamada-ui.com/docs/theming/tokens/durations.md) | | `animationFillMode` | [`animation-fill-mode`](https://developer.mozilla.org/docs/Web/CSS/animation-fill-mode) | - | | `animationIterationCount` | [`animation-iteration-count`](https://developer.mozilla.org/docs/Web/CSS/animation-iteration-count) | - | | `animationName` | [`animation-name`](https://developer.mozilla.org/docs/Web/CSS/animation-name) | [`keyframes`](https://yamada-ui.com/docs/theming/tokens/keyframes.md) | | `animationPlayState` | [`animation-play-state`](https://developer.mozilla.org/docs/Web/CSS/animation-play-state) | - | | `animationRange` | [`animation-range`](https://developer.mozilla.org/docs/Web/CSS/animation-range) | - | | `animationRangeEnd` | [`animation-range-end`](https://developer.mozilla.org/docs/Web/CSS/animation-range-end) | - | | `animationRangeStart` | [`animation-range-start`](https://developer.mozilla.org/docs/Web/CSS/animation-range-start) | - | | `animationTimeline` | [`animation-timeline`](https://developer.mozilla.org/docs/Web/CSS/animation-timeline) | - | | `animationTimingFunction` | [`animation-timing-function`](https://developer.mozilla.org/docs/Web/CSS/animation-timing-function) | [`easings`](https://yamada-ui.com/docs/theming/tokens/easings.md) | | `appearance` | [`appearance`](https://developer.mozilla.org/docs/Web/CSS/appearance) | - | | `apply` | - | - | | `aspectRatio` | [`aspect-ratio`](https://developer.mozilla.org/docs/Web/CSS/aspect-ratio) | [`aspectRatios`](https://yamada-ui.com/docs/theming/tokens/aspect-ratios.md) | | `backdropBlur` | `--backdrop-blur` | [`blurs`](https://yamada-ui.com/docs/theming/tokens/blurs.md) | | `backdropBrightness` | `--backdrop-brightness` | - | | `backdropContrast` | `--backdrop-contrast` | - | | `backdropDropShadow` | `--backdrop-drop-shadow` | [`shadows`](https://yamada-ui.com/docs/theming/tokens/shadows.md) | | `backdropFilter` | [`backdrop-filter`](https://developer.mozilla.org/docs/Web/CSS/backdrop-filter) | - | | `backdropGrayscale` | `--backdrop-grayscale` | - | | `backdropHueRotate` | `--backdrop-hue-rotate` | - | | `backdropInvert` | `--backdrop-invert` | - | | `backdropSaturate` | `--backdrop-saturate` | - | | `backdropSepia` | `--backdrop-sepia` | - | | `backfaceVisibility` | [`backface-visibility`](https://developer.mozilla.org/docs/Web/CSS/backface-visibility) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `background` | [`background`](https://developer.mozilla.org/docs/Web/CSS/background) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `backgroundAttachment` | [`background-attachment`](https://developer.mozilla.org/docs/Web/CSS/background-attachment) | - | | `backgroundBlendMode` | [`background-blend-mode`](https://developer.mozilla.org/docs/Web/CSS/background-blend-mode) | - | | `backgroundClip` | [`background-clip`](https://developer.mozilla.org/docs/Web/CSS/background-clip) | - | | `backgroundColor` | [`background-color`](https://developer.mozilla.org/docs/Web/CSS/background-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `backgroundImage` | [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image) | [`gradients`](https://yamada-ui.com/docs/theming/tokens/gradients.md) | | `backgroundOrigin` | [`background-origin`](https://developer.mozilla.org/docs/Web/CSS/background-origin) | - | | `backgroundPosition` | [`background-position`](https://developer.mozilla.org/docs/Web/CSS/background-position) | - | | `backgroundPositionX` | [`background-position-x`](https://developer.mozilla.org/docs/Web/CSS/background-position-x) | - | | `backgroundPositionY` | [`background-position-y`](https://developer.mozilla.org/docs/Web/CSS/background-position-y) | - | | `backgroundRepeat` | [`background-repeat`](https://developer.mozilla.org/docs/Web/CSS/background-repeat) | - | | `backgroundRepeatX` | [`background-repeat-x`](https://drafts.csswg.org/css-backgrounds-4/#background-repeat-longhands) | - | | `backgroundRepeatY` | [`background-repeat-y`](https://drafts.csswg.org/css-backgrounds-4/#background-repeat-longhands) | - | | `backgroundSize` | [`background-size`](https://developer.mozilla.org/docs/Web/CSS/background-size) | - | | `baselineShift` | [`baseline-shift`](https://drafts.csswg.org/css-inline/#baseline-shift-property) | - | | `baselineSource` | [`baseline-source`](https://drafts.csswg.org/css-inline/#baseline-source) | - | | `bg` | [`background`](https://developer.mozilla.org/docs/Web/CSS/background) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `bgAttachment` | [`background-attachment`](https://developer.mozilla.org/docs/Web/CSS/background-attachment) | - | | `bgBlendMode` | [`background-blend-mode`](https://developer.mozilla.org/docs/Web/CSS/background-blend-mode) | - | | `bgClip` | [`background-clip`](https://developer.mozilla.org/docs/Web/CSS/background-clip) | - | | `bgColor` | [`background-color`](https://developer.mozilla.org/docs/Web/CSS/background-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `bgGradient` | [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image) | [`gradients`](https://yamada-ui.com/docs/theming/tokens/gradients.md) | | `bgImage` | [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image) | [`gradients`](https://yamada-ui.com/docs/theming/tokens/gradients.md) | | `bgImg` | [`background-image`](https://developer.mozilla.org/docs/Web/CSS/background-image) | [`gradients`](https://yamada-ui.com/docs/theming/tokens/gradients.md) | | `bgOrigin` | [`background-origin`](https://developer.mozilla.org/docs/Web/CSS/background-origin) | - | | `bgPosition` | [`background-position`](https://developer.mozilla.org/docs/Web/CSS/background-position) | - | | `bgPositionX` | [`background-position-x`](https://developer.mozilla.org/docs/Web/CSS/background-position-x) | - | | `bgPositionY` | [`background-position-y`](https://developer.mozilla.org/docs/Web/CSS/background-position-y) | - | | `bgPosX` | [`background-position-x`](https://developer.mozilla.org/docs/Web/CSS/background-position-x) | - | | `bgPosY` | [`background-position-y`](https://developer.mozilla.org/docs/Web/CSS/background-position-y) | - | | `bgRepeat` | [`background-repeat`](https://developer.mozilla.org/docs/Web/CSS/background-repeat) | - | | `bgSize` | [`background-size`](https://developer.mozilla.org/docs/Web/CSS/background-size) | - | | `blendMode` | [`mix-blend-mode`](https://developer.mozilla.org/docs/Web/CSS/mix-blend-mode) | - | | `blockSize` | [`block-size`](https://developer.mozilla.org/docs/Web/CSS/block-size) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `blur` | `--blur` | [`blurs`](https://yamada-ui.com/docs/theming/tokens/blurs.md) | | `border` | [`border`](https://developer.mozilla.org/docs/Web/CSS/border) | [`borders`](https://yamada-ui.com/docs/theming/tokens/borders.md) | | `borderBlock` | [`border-block`](https://developer.mozilla.org/docs/Web/CSS/border-block) | [`borders`](https://yamada-ui.com/docs/theming/tokens/borders.md) | | `borderBlockColor` | [`border-block-color`](https://developer.mozilla.org/docs/Web/CSS/border-block-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `borderBlockEnd` | [`border-block-end`](https://developer.mozilla.org/docs/Web/CSS/border-block-end) | [`borders`](https://yamada-ui.com/docs/theming/tokens/borders.md) | | `borderBlockEndColor` | [`border-block-end-color`](https://developer.mozilla.org/docs/Web/CSS/border-block-end-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `borderBlockEndStyle` | [`border-block-end-style`](https://developer.mozilla.org/docs/Web/CSS/border-block-end-style) | - | | `borderBlockEndWidth` | [`border-block-end-width`](https://developer.mozilla.org/docs/Web/CSS/border-block-end-width) | - | | `borderBlockStart` | [`border-block-start`](https://developer.mozilla.org/docs/Web/CSS/border-block-start) | [`borders`](https://yamada-ui.com/docs/theming/tokens/borders.md) | | `borderBlockStartColor` | [`border-block-start-color`](https://developer.mozilla.org/docs/Web/CSS/border-block-start-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `borderBlockStartStyle` | [`border-block-start-style`](https://developer.mozilla.org/docs/Web/CSS/border-block-start-style) | - | | `borderBlockStartWidth` | [`border-block-start-width`](https://developer.mozilla.org/docs/Web/CSS/border-block-start-width) | - | | `borderBlockStyle` | [`border-block-style`](https://developer.mozilla.org/docs/Web/CSS/border-block-style) | - | | `borderBlockWidth` | [`border-block-width`](https://developer.mozilla.org/docs/Web/CSS/border-block-width) | - | | `borderBottom` | [`border-bottom`](https://developer.mozilla.org/docs/Web/CSS/border-bottom) | [`borders`](https://yamada-ui.com/docs/theming/tokens/borders.md) | | `borderBottomColor` | [`border-bottom-color`](https://developer.mozilla.org/docs/Web/CSS/border-bottom-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `borderBottomEndRadius` | [`border-end-end-radius`](https://developer.mozilla.org/docs/Web/CSS/border-end-end-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderBottomLeftRadius` | [`border-bottom-left-radius`](https://developer.mozilla.org/docs/Web/CSS/border-bottom-left-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderBottomRadius` | [`border-bottom-left-radius`](https://developer.mozilla.org/docs/Web/CSS/border-bottom-left-radius), [`border-bottom-right-radius`](https://developer.mozilla.org/docs/Web/CSS/border-bottom-right-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderBottomRightRadius` | [`border-bottom-right-radius`](https://developer.mozilla.org/docs/Web/CSS/border-bottom-right-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderBottomStartRadius` | [`border-end-start-radius`](https://developer.mozilla.org/docs/Web/CSS/border-end-start-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderBottomStyle` | [`border-bottom-style`](https://developer.mozilla.org/docs/Web/CSS/border-bottom-style) | - | | `borderBottomWidth` | [`border-bottom-width`](https://developer.mozilla.org/docs/Web/CSS/border-bottom-width) | - | | `borderCollapse` | [`border-collapse`](https://developer.mozilla.org/docs/Web/CSS/border-collapse) | - | | `borderColor` | [`border-color`](https://developer.mozilla.org/docs/Web/CSS/border-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `borderEnd` | [`border-inline-end`](https://developer.mozilla.org/docs/Web/CSS/border-inline-end) | [`borders`](https://yamada-ui.com/docs/theming/tokens/borders.md) | | `borderEndColor` | [`border-inline-end-color`](https://developer.mozilla.org/docs/Web/CSS/border-inline-end-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `borderEndEndRadius` | [`border-end-end-radius`](https://developer.mozilla.org/docs/Web/CSS/border-end-end-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderEndRadius` | [`border-end-start-radius`](https://developer.mozilla.org/docs/Web/CSS/border-end-start-radius), [`border-end-end-radius`](https://developer.mozilla.org/docs/Web/CSS/border-end-end-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderEndStartRadius` | [`border-end-start-radius`](https://developer.mozilla.org/docs/Web/CSS/border-end-start-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderEndStyle` | [`border-inline-end-style`](https://developer.mozilla.org/docs/Web/CSS/border-inline-end-style) | - | | `borderEndWidth` | [`border-inline-end-width`](https://developer.mozilla.org/docs/Web/CSS/border-inline-end-width) | - | | `borderImage` | [`border-image`](https://developer.mozilla.org/docs/Web/CSS/border-image) | [`borders`](https://yamada-ui.com/docs/theming/tokens/borders.md) | | `borderImageOutset` | [`border-image-outset`](https://developer.mozilla.org/docs/Web/CSS/border-image-outset) | - | | `borderImageRepeat` | [`border-image-repeat`](https://developer.mozilla.org/docs/Web/CSS/border-image-repeat) | - | | `borderImageSlice` | [`border-image-slice`](https://developer.mozilla.org/docs/Web/CSS/border-image-slice) | - | | `borderImageSource` | [`border-image-source`](https://developer.mozilla.org/docs/Web/CSS/border-image-source) | [`gradients`](https://yamada-ui.com/docs/theming/tokens/gradients.md) | | `borderImageWidth` | [`border-image-width`](https://developer.mozilla.org/docs/Web/CSS/border-image-width) | - | | `borderInline` | [`border-inline`](https://developer.mozilla.org/docs/Web/CSS/border-inline) | [`borders`](https://yamada-ui.com/docs/theming/tokens/borders.md) | | `borderInlineColor` | [`border-inline-color`](https://developer.mozilla.org/docs/Web/CSS/border-inline-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `borderInlineEnd` | [`border-inline-end`](https://developer.mozilla.org/docs/Web/CSS/border-inline-end) | [`borders`](https://yamada-ui.com/docs/theming/tokens/borders.md) | | `borderInlineEndColor` | [`border-inline-end-color`](https://developer.mozilla.org/docs/Web/CSS/border-inline-end-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `borderInlineEndRadius` | [`border-end-start-radius`](https://developer.mozilla.org/docs/Web/CSS/border-end-start-radius), [`border-end-end-radius`](https://developer.mozilla.org/docs/Web/CSS/border-end-end-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderInlineEndStyle` | [`border-inline-end-style`](https://developer.mozilla.org/docs/Web/CSS/border-inline-end-style) | - | | `borderInlineEndWidth` | [`border-inline-end-width`](https://developer.mozilla.org/docs/Web/CSS/border-inline-end-width) | - | | `borderInlineStart` | [`border-inline-start`](https://developer.mozilla.org/docs/Web/CSS/border-inline-start) | [`borders`](https://yamada-ui.com/docs/theming/tokens/borders.md) | | `borderInlineStartColor` | [`border-inline-start-color`](https://developer.mozilla.org/docs/Web/CSS/border-inline-start-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `borderInlineStartRadius` | [`border-start-start-radius`](https://developer.mozilla.org/docs/Web/CSS/border-start-start-radius), [`border-start-end-radius`](https://developer.mozilla.org/docs/Web/CSS/border-start-end-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderInlineStartStyle` | [`border-inline-start-style`](https://developer.mozilla.org/docs/Web/CSS/border-inline-start-style) | - | | `borderInlineStartWidth` | [`border-inline-start-width`](https://developer.mozilla.org/docs/Web/CSS/border-inline-start-width) | - | | `borderInlineStyle` | [`border-inline-style`](https://developer.mozilla.org/docs/Web/CSS/border-inline-style) | - | | `borderInlineWidth` | [`border-inline-width`](https://developer.mozilla.org/docs/Web/CSS/border-inline-width) | - | | `borderLeft` | [`border-left`](https://developer.mozilla.org/docs/Web/CSS/border-left) | [`borders`](https://yamada-ui.com/docs/theming/tokens/borders.md) | | `borderLeftColor` | [`border-left-color`](https://developer.mozilla.org/docs/Web/CSS/border-left-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `borderLeftRadius` | [`border-top-left-radius`](https://developer.mozilla.org/docs/Web/CSS/border-top-left-radius), [`border-bottom-left-radius`](https://developer.mozilla.org/docs/Web/CSS/border-bottom-left-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderLeftStyle` | [`border-left-style`](https://developer.mozilla.org/docs/Web/CSS/border-left-style) | - | | `borderLeftWidth` | [`border-left-width`](https://developer.mozilla.org/docs/Web/CSS/border-left-width) | - | | `borderRadius` | [`border-radius`](https://developer.mozilla.org/docs/Web/CSS/border-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderRight` | [`border-right`](https://developer.mozilla.org/docs/Web/CSS/border-right) | [`borders`](https://yamada-ui.com/docs/theming/tokens/borders.md) | | `borderRightColor` | [`border-right-color`](https://developer.mozilla.org/docs/Web/CSS/border-right-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `borderRightRadius` | [`border-top-right-radius`](https://developer.mozilla.org/docs/Web/CSS/border-top-right-radius), [`border-bottom-right-radius`](https://developer.mozilla.org/docs/Web/CSS/border-bottom-right-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderRightStyle` | [`border-right-style`](https://developer.mozilla.org/docs/Web/CSS/border-right-style) | - | | `borderRightWidth` | [`border-right-width`](https://developer.mozilla.org/docs/Web/CSS/border-right-width) | - | | `borderSpacing` | [`border-spacing`](https://developer.mozilla.org/docs/Web/CSS/border-spacing) | - | | `borderStart` | [`border-inline-start`](https://developer.mozilla.org/docs/Web/CSS/border-inline-start) | [`borders`](https://yamada-ui.com/docs/theming/tokens/borders.md) | | `borderStartColor` | [`border-inline-start-color`](https://developer.mozilla.org/docs/Web/CSS/border-inline-start-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `borderStartEndRadius` | [`border-start-end-radius`](https://developer.mozilla.org/docs/Web/CSS/border-start-end-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderStartRadius` | [`border-start-start-radius`](https://developer.mozilla.org/docs/Web/CSS/border-start-start-radius), [`border-start-end-radius`](https://developer.mozilla.org/docs/Web/CSS/border-start-end-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderStartStartRadius` | [`border-start-start-radius`](https://developer.mozilla.org/docs/Web/CSS/border-start-start-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderStartStyle` | [`border-inline-start-style`](https://developer.mozilla.org/docs/Web/CSS/border-inline-start-style) | - | | `borderStartWidth` | [`border-inline-start-width`](https://developer.mozilla.org/docs/Web/CSS/border-inline-start-width) | - | | `borderStyle` | [`border-style`](https://developer.mozilla.org/docs/Web/CSS/border-style) | - | | `borderTop` | [`border-top`](https://developer.mozilla.org/docs/Web/CSS/border-top) | [`borders`](https://yamada-ui.com/docs/theming/tokens/borders.md) | | `borderTopColor` | [`border-top-color`](https://developer.mozilla.org/docs/Web/CSS/border-top-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `borderTopEndRadius` | [`border-start-end-radius`](https://developer.mozilla.org/docs/Web/CSS/border-start-end-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderTopLeftRadius` | [`border-top-left-radius`](https://developer.mozilla.org/docs/Web/CSS/border-top-left-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderTopRadius` | [`border-top-left-radius`](https://developer.mozilla.org/docs/Web/CSS/border-top-left-radius), [`border-top-right-radius`](https://developer.mozilla.org/docs/Web/CSS/border-top-right-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderTopRightRadius` | [`border-top-right-radius`](https://developer.mozilla.org/docs/Web/CSS/border-top-right-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderTopStartRadius` | [`border-start-start-radius`](https://developer.mozilla.org/docs/Web/CSS/border-start-start-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `borderTopStyle` | [`border-top-style`](https://developer.mozilla.org/docs/Web/CSS/border-top-style) | - | | `borderTopWidth` | [`border-top-width`](https://developer.mozilla.org/docs/Web/CSS/border-top-width) | - | | `borderWidth` | [`border-width`](https://developer.mozilla.org/docs/Web/CSS/border-width) | - | | `borderX` | [`border-left`](https://developer.mozilla.org/docs/Web/CSS/border-left), [`border-right`](https://developer.mozilla.org/docs/Web/CSS/border-right) | [`borders`](https://yamada-ui.com/docs/theming/tokens/borders.md) | | `borderY` | [`border-top`](https://developer.mozilla.org/docs/Web/CSS/border-top), [`border-bottom`](https://developer.mozilla.org/docs/Web/CSS/border-bottom) | [`borders`](https://yamada-ui.com/docs/theming/tokens/borders.md) | | `bottom` | [`bottom`](https://developer.mozilla.org/docs/Web/CSS/bottom) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `boxAlign` | [`box-align`](https://developer.mozilla.org/docs/Web/CSS/box-align) | - | | `boxDecorationBreak` | [`box-decoration-break`](https://developer.mozilla.org/docs/Web/CSS/box-decoration-break) | - | | `boxDirection` | [`box-direction`](https://developer.mozilla.org/docs/Web/CSS/box-direction) | - | | `boxFlex` | [`box-flex`](https://developer.mozilla.org/docs/Web/CSS/box-flex) | - | | `boxFlexGroup` | [`box-flex-group`](https://developer.mozilla.org/docs/Web/CSS/box-flex-group) | - | | `boxLines` | [`box-lines`](https://developer.mozilla.org/docs/Web/CSS/box-lines) | - | | `boxOrdinalGroup` | [`box-ordinal-group`](https://developer.mozilla.org/docs/Web/CSS/box-ordinal-group) | - | | `boxOrient` | [`box-orient`](https://developer.mozilla.org/docs/Web/CSS/box-orient) | - | | `boxPack` | [`box-pack`](https://developer.mozilla.org/docs/Web/CSS/box-pack) | - | | `boxShadow` | [`box-shadow`](https://developer.mozilla.org/docs/Web/CSS/box-shadow) | [`shadows`](https://yamada-ui.com/docs/theming/tokens/shadows.md) | | `boxSize` | [`width`](https://developer.mozilla.org/docs/Web/CSS/width), [`height`](https://developer.mozilla.org/docs/Web/CSS/height) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `boxSizing` | [`box-sizing`](https://developer.mozilla.org/docs/Web/CSS/box-sizing) | - | | `breakAfter` | [`break-after`](https://developer.mozilla.org/docs/Web/CSS/break-after) | - | | `breakBefore` | [`break-before`](https://developer.mozilla.org/docs/Web/CSS/break-before) | - | | `breakInside` | [`break-inside`](https://developer.mozilla.org/docs/Web/CSS/break-inside) | - | | `brightness` | `--brightness` | - | | `captionSide` | [`caption-side`](https://developer.mozilla.org/docs/Web/CSS/caption-side) | - | | `caret` | [`caret-color`](https://developer.mozilla.org/docs/Web/CSS/caret-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `caretAnimation` | [`caret-animation`](https://developer.mozilla.org/docs/Web/CSS/caret-animation) | - | | `caretColor` | [`caret-color`](https://developer.mozilla.org/docs/Web/CSS/caret-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `caretShape` | [`caret-shape`](https://developer.mozilla.org/docs/Web/CSS/caret-shape) | - | | `clear` | [`clear`](https://developer.mozilla.org/docs/Web/CSS/clear) | - | | `clip` | [`clip`](https://developer.mozilla.org/docs/Web/CSS/clip) | - | | `clipPath` | [`clip-path`](https://developer.mozilla.org/docs/Web/CSS/clip-path) | - | | `clipRule` | [`clip-rule`](https://developer.mozilla.org/docs/Web/CSS/clip-rule) | - | | `color` | [`color`](https://developer.mozilla.org/docs/Web/CSS/color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `colorAdjust` | [`color-adjust`](https://drafts.csswg.org/css-color-adjust-1/#color-adjust) | - | | `colorInterpolation` | [`color-interpolation`](https://developer.mozilla.org/docs/Web/CSS/color-interpolation) | - | | `colorInterpolationFilters` | [`color-interpolation-filters`](https://developer.mozilla.org/docs/Web/CSS/color-interpolation-filters) | - | | `colorMode` | [`color-scheme`](https://developer.mozilla.org/docs/Web/CSS/color-scheme) | - | | `colorScheme` | - | - | | `columnCount` | [`column-count`](https://developer.mozilla.org/docs/Web/CSS/column-count) | - | | `columnFill` | [`column-fill`](https://developer.mozilla.org/docs/Web/CSS/column-fill) | - | | `columnGap` | [`column-gap`](https://developer.mozilla.org/docs/Web/CSS/column-gap) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `columnRule` | [`column-rule`](https://developer.mozilla.org/docs/Web/CSS/column-rule) | - | | `columnRuleColor` | [`column-rule-color`](https://developer.mozilla.org/docs/Web/CSS/column-rule-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `columnRuleStyle` | [`column-rule-style`](https://developer.mozilla.org/docs/Web/CSS/column-rule-style) | - | | `columnRuleWidth` | [`column-rule-width`](https://developer.mozilla.org/docs/Web/CSS/column-rule-width) | - | | `columns` | [`columns`](https://developer.mozilla.org/docs/Web/CSS/columns) | - | | `columnSpan` | [`column-span`](https://developer.mozilla.org/docs/Web/CSS/column-span) | - | | `columnWidth` | [`column-width`](https://developer.mozilla.org/docs/Web/CSS/column-width) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `contain` | [`contain`](https://developer.mozilla.org/docs/Web/CSS/contain) | - | | `container` | [`container`](https://developer.mozilla.org/docs/Web/CSS/container) | - | | `containerName` | [`container-name`](https://developer.mozilla.org/docs/Web/CSS/container-name) | - | | `containerType` | [`container-type`](https://developer.mozilla.org/docs/Web/CSS/container-type) | - | | `containIntrinsicBlockSize` | [`contain-intrinsic-block-size`](https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-block-size) | - | | `containIntrinsicHeight` | [`contain-intrinsic-height`](https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-height) | - | | `containIntrinsicInlineSize` | [`contain-intrinsic-inline-size`](https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-inline-size) | - | | `containIntrinsicSize` | [`contain-intrinsic-size`](https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-size) | - | | `containIntrinsicWidth` | [`contain-intrinsic-width`](https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-width) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `content` | [`content`](https://developer.mozilla.org/docs/Web/CSS/content) | - | | `contentVisibility` | [`content-visibility`](https://developer.mozilla.org/docs/Web/CSS/content-visibility) | - | | `contrast` | `--contrast` | - | | `cornerBlockEndShape` | [`corner-block-end-shape`](https://developer.mozilla.org/docs/Web/CSS/corner-block-end-shape) | - | | `cornerBlockStartShape` | [`corner-block-start-shape`](https://developer.mozilla.org/docs/Web/CSS/corner-block-start-shape) | - | | `cornerBottomLeftShape` | [`corner-bottom-left-shape`](https://developer.mozilla.org/docs/Web/CSS/corner-bottom-left-shape) | - | | `cornerBottomRightShape` | [`corner-bottom-right-shape`](https://developer.mozilla.org/docs/Web/CSS/corner-bottom-right-shape) | - | | `cornerBottomShape` | [`corner-bottom-shape`](https://developer.mozilla.org/docs/Web/CSS/corner-bottom-shape) | - | | `cornerEndEndShape` | [`corner-end-end-shape`](https://developer.mozilla.org/docs/Web/CSS/corner-end-end-shape) | - | | `cornerEndStartShape` | [`corner-end-start-shape`](https://developer.mozilla.org/docs/Web/CSS/corner-end-start-shape) | - | | `cornerInlineEndShape` | [`corner-inline-end-shape`](https://developer.mozilla.org/docs/Web/CSS/corner-inline-end-shape) | - | | `cornerInlineStartShape` | [`corner-inline-start-shape`](https://developer.mozilla.org/docs/Web/CSS/corner-inline-start-shape) | - | | `cornerLeftShape` | [`corner-left-shape`](https://developer.mozilla.org/docs/Web/CSS/corner-left-shape) | - | | `cornerRightShape` | [`corner-right-shape`](https://developer.mozilla.org/docs/Web/CSS/corner-right-shape) | - | | `cornerShape` | [`corner-shape`](https://developer.mozilla.org/docs/Web/CSS/corner-shape) | - | | `cornerStartEndShape` | [`corner-start-end-shape`](https://developer.mozilla.org/docs/Web/CSS/corner-start-end-shape) | - | | `cornerStartStartShape` | [`corner-start-start-shape`](https://developer.mozilla.org/docs/Web/CSS/corner-start-start-shape) | - | | `cornerTopLeftShape` | [`corner-top-left-shape`](https://developer.mozilla.org/docs/Web/CSS/corner-top-left-shape) | - | | `cornerTopRightShape` | [`corner-top-right-shape`](https://developer.mozilla.org/docs/Web/CSS/corner-top-right-shape) | - | | `cornerTopShape` | [`corner-top-shape`](https://developer.mozilla.org/docs/Web/CSS/corner-top-shape) | - | | `counterIncrement` | [`counter-increment`](https://developer.mozilla.org/docs/Web/CSS/counter-increment) | - | | `counterReset` | [`counter-reset`](https://developer.mozilla.org/docs/Web/CSS/counter-reset) | - | | `counterSet` | [`counter-set`](https://developer.mozilla.org/docs/Web/CSS/counter-set) | - | | `cursor` | [`cursor`](https://developer.mozilla.org/docs/Web/CSS/cursor) | - | | `cx` | [`cx`](https://developer.mozilla.org/docs/Web/CSS/cx) | - | | `cy` | [`cy`](https://developer.mozilla.org/docs/Web/CSS/cy) | - | | `d` | [`d`](https://developer.mozilla.org/docs/Web/CSS/d) | - | | `direction` | [`direction`](https://developer.mozilla.org/docs/Web/CSS/direction) | - | | `display` | - | - | | `dominantBaseline` | [`dominant-baseline`](https://developer.mozilla.org/docs/Web/CSS/dominant-baseline) | - | | `dropShadow` | `--drop-shadow` | [`shadows`](https://yamada-ui.com/docs/theming/tokens/shadows.md) | | `dynamicRangeLimit` | [`dynamic-range-limit`](https://developer.mozilla.org/docs/Web/CSS/dynamic-range-limit) | - | | `emptyCells` | [`empty-cells`](https://developer.mozilla.org/docs/Web/CSS/empty-cells) | - | | `fieldSizing` | [`field-sizing`](https://developer.mozilla.org/docs/Web/CSS/field-sizing) | - | | `fill` | [`fill`](https://developer.mozilla.org/docs/Web/CSS/fill) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `fillOpacity` | [`fill-opacity`](https://developer.mozilla.org/docs/Web/CSS/fill-opacity) | - | | `fillRule` | [`fill-rule`](https://developer.mozilla.org/docs/Web/CSS/fill-rule) | - | | `filter` | [`filter`](https://developer.mozilla.org/docs/Web/CSS/filter) | - | | `flex` | [`flex`](https://developer.mozilla.org/docs/Web/CSS/flex) | - | | `flexBasis` | [`flex-basis`](https://developer.mozilla.org/docs/Web/CSS/flex-basis) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `flexDir` | [`flex-direction`](https://developer.mozilla.org/docs/Web/CSS/flex-direction) | - | | `flexDirection` | [`flex-direction`](https://developer.mozilla.org/docs/Web/CSS/flex-direction) | - | | `flexFlow` | [`flex-flow`](https://developer.mozilla.org/docs/Web/CSS/flex-flow) | - | | `flexGrow` | [`flex-grow`](https://developer.mozilla.org/docs/Web/CSS/flex-grow) | - | | `flexShrink` | [`flex-shrink`](https://developer.mozilla.org/docs/Web/CSS/flex-shrink) | - | | `flexWrap` | [`flex-wrap`](https://developer.mozilla.org/docs/Web/CSS/flex-wrap) | - | | `float` | [`float`](https://developer.mozilla.org/docs/Web/CSS/float) | - | | `floodColor` | [`flood-color`](https://developer.mozilla.org/docs/Web/CSS/flood-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `floodOpacity` | [`flood-opacity`](https://developer.mozilla.org/docs/Web/CSS/flood-opacity) | - | | `focusRing` | - | - | | `focusRingColor` | `--focus-ring-color` | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `focusRingOffset` | `--focus-ring-offset` | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `focusRingStyle` | `--focus-ring-style` | - | | `focusRingWidth` | `--focus-ring-width` | - | | `focusVisibleRing` | - | - | | `font` | [`font`](https://developer.mozilla.org/docs/Web/CSS/font) | - | | `fontFamily` | [`font-family`](https://developer.mozilla.org/docs/Web/CSS/font-family) | [`fonts`](https://yamada-ui.com/docs/theming/tokens/fonts.md) | | `fontFeatureSettings` | [`font-feature-settings`](https://developer.mozilla.org/docs/Web/CSS/font-feature-settings) | - | | `fontKerning` | [`font-kerning`](https://developer.mozilla.org/docs/Web/CSS/font-kerning) | - | | `fontLanguageOverride` | [`font-language-override`](https://developer.mozilla.org/docs/Web/CSS/font-language-override) | - | | `fontOpticalSizing` | [`font-optical-sizing`](https://developer.mozilla.org/docs/Web/CSS/font-optical-sizing) | - | | `fontPalette` | [`font-palette`](https://developer.mozilla.org/docs/Web/CSS/font-palette) | - | | `fontSize` | [`font-size`](https://developer.mozilla.org/docs/Web/CSS/font-size) | [`fontSizes`](https://yamada-ui.com/docs/theming/tokens/font-sizes.md) | | `fontSizeAdjust` | [`font-size-adjust`](https://developer.mozilla.org/docs/Web/CSS/font-size-adjust) | - | | `fontSmooth` | [`font-smooth`](https://developer.mozilla.org/docs/Web/CSS/font-smooth) | - | | `fontStretch` | [`font-stretch`](https://developer.mozilla.org/docs/Web/CSS/font-stretch) | - | | `fontStyle` | [`font-style`](https://developer.mozilla.org/docs/Web/CSS/font-style) | - | | `fontSynthesis` | [`font-synthesis`](https://developer.mozilla.org/docs/Web/CSS/font-synthesis) | - | | `fontSynthesisPosition` | [`font-synthesis-position`](https://developer.mozilla.org/docs/Web/CSS/font-synthesis-position) | - | | `fontSynthesisSmallCaps` | [`font-synthesis-small-caps`](https://developer.mozilla.org/docs/Web/CSS/font-synthesis-small-caps) | - | | `fontSynthesisStyle` | [`font-synthesis-style`](https://developer.mozilla.org/docs/Web/CSS/font-synthesis-style) | - | | `fontSynthesisWeight` | [`font-synthesis-weight`](https://developer.mozilla.org/docs/Web/CSS/font-synthesis-weight) | - | | `fontVariant` | [`font-variant`](https://developer.mozilla.org/docs/Web/CSS/font-variant) | - | | `fontVariantAlternates` | [`font-variant-alternates`](https://developer.mozilla.org/docs/Web/CSS/font-variant-alternates) | - | | `fontVariantCaps` | [`font-variant-caps`](https://developer.mozilla.org/docs/Web/CSS/font-variant-caps) | - | | `fontVariantEastAsian` | [`font-variant-east-asian`](https://developer.mozilla.org/docs/Web/CSS/font-variant-east-asian) | - | | `fontVariantEmoji` | [`font-variant-emoji`](https://developer.mozilla.org/docs/Web/CSS/font-variant-emoji) | - | | `fontVariantLigatures` | [`font-variant-ligatures`](https://developer.mozilla.org/docs/Web/CSS/font-variant-ligatures) | - | | `fontVariantNumeric` | [`font-variant-numeric`](https://developer.mozilla.org/docs/Web/CSS/font-variant-numeric) | - | | `fontVariantPosition` | [`font-variant-position`](https://developer.mozilla.org/docs/Web/CSS/font-variant-position) | - | | `fontVariationSettings` | [`font-variation-settings`](https://developer.mozilla.org/docs/Web/CSS/font-variation-settings) | - | | `fontWeight` | [`font-weight`](https://developer.mozilla.org/docs/Web/CSS/font-weight) | [`fontWeights`](https://yamada-ui.com/docs/theming/tokens/font-weights.md) | | `fontWidth` | [`font-width`](https://drafts.csswg.org/css-fonts/#propdef-font-width) | - | | `forcedColorAdjust` | [`forced-color-adjust`](https://developer.mozilla.org/docs/Web/CSS/forced-color-adjust) | - | | `g` | [`gap`](https://developer.mozilla.org/docs/Web/CSS/gap) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `gap` | [`gap`](https://developer.mozilla.org/docs/Web/CSS/gap) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `gapX` | [`column-gap`](https://developer.mozilla.org/docs/Web/CSS/column-gap) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `gapY` | [`row-gap`](https://developer.mozilla.org/docs/Web/CSS/row-gap) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `glyphOrientationHorizontal` | [`glyph-orientation-horizontal`](https://developer.mozilla.org/docs/Web/SVG/Reference/Attribute/glyph-orientation-horizontal) | - | | `glyphOrientationVertical` | [`glyph-orientation-vertical`](https://drafts.csswg.org/css-writing-modes-4/#glyph-orientation) | - | | `grayscale` | `--grayscale` | - | | `grid` | [`grid`](https://developer.mozilla.org/docs/Web/CSS/grid) | - | | `gridArea` | [`grid-area`](https://developer.mozilla.org/docs/Web/CSS/grid-area) | - | | `gridAutoColumns` | [`grid-auto-columns`](https://developer.mozilla.org/docs/Web/CSS/grid-auto-columns) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `gridAutoFlow` | [`grid-auto-flow`](https://developer.mozilla.org/docs/Web/CSS/grid-auto-flow) | - | | `gridAutoRows` | [`grid-auto-rows`](https://developer.mozilla.org/docs/Web/CSS/grid-auto-rows) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `gridColumn` | [`grid-column`](https://developer.mozilla.org/docs/Web/CSS/grid-column) | - | | `gridColumnEnd` | [`grid-column-end`](https://developer.mozilla.org/docs/Web/CSS/grid-column-end) | - | | `gridColumnStart` | [`grid-column-start`](https://developer.mozilla.org/docs/Web/CSS/grid-column-start) | - | | `gridRow` | [`grid-row`](https://developer.mozilla.org/docs/Web/CSS/grid-row) | - | | `gridRowEnd` | [`grid-row-end`](https://developer.mozilla.org/docs/Web/CSS/grid-row-end) | - | | `gridRowStart` | [`grid-row-start`](https://developer.mozilla.org/docs/Web/CSS/grid-row-start) | - | | `gridTemplate` | [`grid-template`](https://developer.mozilla.org/docs/Web/CSS/grid-template) | - | | `gridTemplateAreas` | [`grid-template-areas`](https://developer.mozilla.org/docs/Web/CSS/grid-template-areas) | - | | `gridTemplateColumns` | [`grid-template-columns`](https://developer.mozilla.org/docs/Web/CSS/grid-template-columns) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `gridTemplateRows` | [`grid-template-rows`](https://developer.mozilla.org/docs/Web/CSS/grid-template-rows) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `gx` | [`column-gap`](https://developer.mozilla.org/docs/Web/CSS/column-gap) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `gy` | [`row-gap`](https://developer.mozilla.org/docs/Web/CSS/row-gap) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `h` | [`height`](https://developer.mozilla.org/docs/Web/CSS/height) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `hangingPunctuation` | [`hanging-punctuation`](https://developer.mozilla.org/docs/Web/CSS/hanging-punctuation) | - | | `height` | [`height`](https://developer.mozilla.org/docs/Web/CSS/height) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `hueRotate` | `--hue-rotate` | - | | `hyphenateCharacter` | [`hyphenate-character`](https://developer.mozilla.org/docs/Web/CSS/hyphenate-character) | - | | `hyphenateLimitChars` | [`hyphenate-limit-chars`](https://developer.mozilla.org/docs/Web/CSS/hyphenate-limit-chars) | - | | `hyphens` | [`hyphens`](https://developer.mozilla.org/docs/Web/CSS/hyphens) | - | | `imageOrientation` | [`image-orientation`](https://developer.mozilla.org/docs/Web/CSS/image-orientation) | - | | `imageRendering` | [`image-rendering`](https://developer.mozilla.org/docs/Web/CSS/image-rendering) | - | | `imeMode` | [`ime-mode`](https://drafts.csswg.org/css-ui/#input-method-editor) | - | | `initialLetter` | [`initial-letter`](https://developer.mozilla.org/docs/Web/CSS/initial-letter) | - | | `inlineSize` | [`inline-size`](https://developer.mozilla.org/docs/Web/CSS/inline-size) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `inset` | [`inset`](https://developer.mozilla.org/docs/Web/CSS/inset) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `insetBlock` | [`inset-block`](https://developer.mozilla.org/docs/Web/CSS/inset-block) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `insetBlockEnd` | [`inset-block-end`](https://developer.mozilla.org/docs/Web/CSS/inset-block-end) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `insetBlockStart` | [`inset-block-start`](https://developer.mozilla.org/docs/Web/CSS/inset-block-start) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `insetEnd` | [`inset-inline-end`](https://developer.mozilla.org/docs/Web/CSS/inset-inline-end) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `insetInline` | [`inset-inline`](https://developer.mozilla.org/docs/Web/CSS/inset-inline) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `insetInlineEnd` | [`inset-inline-end`](https://developer.mozilla.org/docs/Web/CSS/inset-inline-end) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `insetInlineStart` | [`inset-inline-start`](https://developer.mozilla.org/docs/Web/CSS/inset-inline-start) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `insetStart` | [`inset-inline-start`](https://developer.mozilla.org/docs/Web/CSS/inset-inline-start) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `insetX` | [`left`](https://developer.mozilla.org/docs/Web/CSS/left), [`right`](https://developer.mozilla.org/docs/Web/CSS/right) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `insetY` | [`top`](https://developer.mozilla.org/docs/Web/CSS/top), [`bottom`](https://developer.mozilla.org/docs/Web/CSS/bottom) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `interactivity` | [`interactivity`](https://drafts.csswg.org/css-ui-4/#propdef-interactivity) | - | | `interestDelay` | [`interest-delay`](https://drafts.csswg.org/css-ui-4/#propdef-interest-delay) | - | | `interestDelayEnd` | [`interest-delay-end`](https://drafts.csswg.org/css-ui-4/#propdef-interest-delay-end) | - | | `interestDelayStart` | [`interest-delay-start`](https://drafts.csswg.org/css-ui-4/#propdef-interest-delay-start) | - | | `interpolateSize` | [`interpolate-size`](https://developer.mozilla.org/docs/Web/CSS/interpolate-size) | - | | `invert` | `--invert` | - | | `isolation` | [`isolation`](https://developer.mozilla.org/docs/Web/CSS/isolation) | - | | `justifyContent` | [`justify-content`](https://developer.mozilla.org/docs/Web/CSS/justify-content) | - | | `justifyItems` | [`justify-items`](https://developer.mozilla.org/docs/Web/CSS/justify-items) | - | | `justifySelf` | [`justify-self`](https://developer.mozilla.org/docs/Web/CSS/justify-self) | - | | `layerStyle` | - | - | | `leading` | [`line-height`](https://developer.mozilla.org/docs/Web/CSS/line-height) | [`lineHeights`](https://yamada-ui.com/docs/theming/tokens/line-heights.md) | | `left` | [`left`](https://developer.mozilla.org/docs/Web/CSS/left) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `letterSpacing` | [`letter-spacing`](https://developer.mozilla.org/docs/Web/CSS/letter-spacing) | [`letterSpacings`](https://yamada-ui.com/docs/theming/tokens/letter-spacings.md) | | `lightingColor` | [`lighting-color`](https://developer.mozilla.org/docs/Web/CSS/lighting-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `lineBreak` | [`line-break`](https://developer.mozilla.org/docs/Web/CSS/line-break) | - | | `lineClamp` | `--line-clamp` | - | | `lineHeight` | [`line-height`](https://developer.mozilla.org/docs/Web/CSS/line-height) | [`lineHeights`](https://yamada-ui.com/docs/theming/tokens/line-heights.md) | | `listStyle` | [`list-style`](https://developer.mozilla.org/docs/Web/CSS/list-style) | - | | `listStyleImage` | [`list-style-image`](https://developer.mozilla.org/docs/Web/CSS/list-style-image) | [`gradients`](https://yamada-ui.com/docs/theming/tokens/gradients.md) | | `listStyleImg` | [`list-style-image`](https://developer.mozilla.org/docs/Web/CSS/list-style-image) | [`gradients`](https://yamada-ui.com/docs/theming/tokens/gradients.md) | | `listStylePos` | [`list-style-position`](https://developer.mozilla.org/docs/Web/CSS/list-style-position) | - | | `listStylePosition` | [`list-style-position`](https://developer.mozilla.org/docs/Web/CSS/list-style-position) | - | | `listStyleType` | [`list-style-type`](https://developer.mozilla.org/docs/Web/CSS/list-style-type) | - | | `m` | [`margin`](https://developer.mozilla.org/docs/Web/CSS/margin) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `margin` | [`margin`](https://developer.mozilla.org/docs/Web/CSS/margin) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `marginBlock` | [`margin-block`](https://developer.mozilla.org/docs/Web/CSS/margin-block) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `marginBlockEnd` | [`margin-block-end`](https://developer.mozilla.org/docs/Web/CSS/margin-block-end) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `marginBlockStart` | [`margin-block-start`](https://developer.mozilla.org/docs/Web/CSS/margin-block-start) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `marginBottom` | [`margin-bottom`](https://developer.mozilla.org/docs/Web/CSS/margin-bottom) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `marginEnd` | [`margin-inline-end`](https://developer.mozilla.org/docs/Web/CSS/margin-inline-end) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `marginInline` | [`margin-inline`](https://developer.mozilla.org/docs/Web/CSS/margin-inline) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `marginInlineEnd` | [`margin-inline-end`](https://developer.mozilla.org/docs/Web/CSS/margin-inline-end) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `marginInlineStart` | [`margin-inline-start`](https://developer.mozilla.org/docs/Web/CSS/margin-inline-start) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `marginLeft` | [`margin-left`](https://developer.mozilla.org/docs/Web/CSS/margin-left) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `marginRight` | [`margin-right`](https://developer.mozilla.org/docs/Web/CSS/margin-right) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `marginStart` | [`margin-inline-start`](https://developer.mozilla.org/docs/Web/CSS/margin-inline-start) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `marginTop` | [`margin-top`](https://developer.mozilla.org/docs/Web/CSS/margin-top) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `marginTrim` | [`margin-trim`](https://developer.mozilla.org/docs/Web/CSS/margin-trim) | - | | `marginX` | [`margin-inline-start`](https://developer.mozilla.org/docs/Web/CSS/margin-inline-start), [`margin-inline-end`](https://developer.mozilla.org/docs/Web/CSS/margin-inline-end) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `marginY` | [`margin-top`](https://developer.mozilla.org/docs/Web/CSS/margin-top), [`margin-bottom`](https://developer.mozilla.org/docs/Web/CSS/margin-bottom) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `marker` | [`marker`](https://developer.mozilla.org/docs/Web/CSS/marker) | - | | `markerEnd` | [`marker-end`](https://developer.mozilla.org/docs/Web/CSS/marker-end) | - | | `markerMid` | [`marker-mid`](https://developer.mozilla.org/docs/Web/CSS/marker-mid) | - | | `markerStart` | [`marker-start`](https://developer.mozilla.org/docs/Web/CSS/marker-start) | - | | `mask` | [`mask`](https://developer.mozilla.org/docs/Web/CSS/mask) | - | | `maskBorder` | [`mask-border`](https://developer.mozilla.org/docs/Web/CSS/mask-border) | - | | `maskBorderOutset` | [`mask-border-outset`](https://developer.mozilla.org/docs/Web/CSS/mask-border-outset) | - | | `maskBorderRepeat` | [`mask-border-repeat`](https://developer.mozilla.org/docs/Web/CSS/mask-border-repeat) | - | | `maskBorderSlice` | [`mask-border-slice`](https://developer.mozilla.org/docs/Web/CSS/mask-border-slice) | - | | `maskBorderSource` | [`mask-border-source`](https://developer.mozilla.org/docs/Web/CSS/mask-border-source) | - | | `maskBorderWidth` | [`mask-border-width`](https://developer.mozilla.org/docs/Web/CSS/mask-border-width) | - | | `maskClip` | [`mask-clip`](https://developer.mozilla.org/docs/Web/CSS/mask-clip) | - | | `maskComposite` | [`mask-composite`](https://developer.mozilla.org/docs/Web/CSS/mask-composite) | - | | `maskImage` | [`mask-image`](https://developer.mozilla.org/docs/Web/CSS/mask-image) | [`gradients`](https://yamada-ui.com/docs/theming/tokens/gradients.md) | | `maskMode` | [`mask-mode`](https://developer.mozilla.org/docs/Web/CSS/mask-mode) | - | | `maskOrigin` | [`mask-origin`](https://developer.mozilla.org/docs/Web/CSS/mask-origin) | - | | `maskPosition` | [`mask-position`](https://developer.mozilla.org/docs/Web/CSS/mask-position) | - | | `maskRepeat` | [`mask-repeat`](https://developer.mozilla.org/docs/Web/CSS/mask-repeat) | - | | `maskSize` | [`mask-size`](https://developer.mozilla.org/docs/Web/CSS/mask-size) | - | | `maskType` | [`mask-type`](https://developer.mozilla.org/docs/Web/CSS/mask-type) | - | | `mathDepth` | [`math-depth`](https://developer.mozilla.org/docs/Web/CSS/math-depth) | - | | `mathShift` | [`math-shift`](https://developer.mozilla.org/docs/Web/CSS/math-shift) | - | | `mathStyle` | [`math-style`](https://developer.mozilla.org/docs/Web/CSS/math-style) | - | | `maxBlockSize` | [`max-block-size`](https://developer.mozilla.org/docs/Web/CSS/max-block-size) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `maxBoxSize` | [`max-width`](https://developer.mozilla.org/docs/Web/CSS/max-width), [`max-height`](https://developer.mozilla.org/docs/Web/CSS/max-height) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `maxH` | [`max-height`](https://developer.mozilla.org/docs/Web/CSS/max-height) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `maxHeight` | [`max-height`](https://developer.mozilla.org/docs/Web/CSS/max-height) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `maxInlineSize` | [`max-inline-size`](https://developer.mozilla.org/docs/Web/CSS/max-inline-size) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `maxW` | [`max-width`](https://developer.mozilla.org/docs/Web/CSS/max-width) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `maxWidth` | [`max-width`](https://developer.mozilla.org/docs/Web/CSS/max-width) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `mb` | [`margin-bottom`](https://developer.mozilla.org/docs/Web/CSS/margin-bottom) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `me` | [`margin-inline-end`](https://developer.mozilla.org/docs/Web/CSS/margin-inline-end) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `minBlockSize` | [`min-block-size`](https://developer.mozilla.org/docs/Web/CSS/min-block-size) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `minBoxSize` | [`min-width`](https://developer.mozilla.org/docs/Web/CSS/min-width), [`min-height`](https://developer.mozilla.org/docs/Web/CSS/min-height) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `minH` | [`min-height`](https://developer.mozilla.org/docs/Web/CSS/min-height) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `minHeight` | [`min-height`](https://developer.mozilla.org/docs/Web/CSS/min-height) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `minInlineSize` | [`min-inline-size`](https://developer.mozilla.org/docs/Web/CSS/min-inline-size) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `minW` | [`min-width`](https://developer.mozilla.org/docs/Web/CSS/min-width) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `minWidth` | [`min-width`](https://developer.mozilla.org/docs/Web/CSS/min-width) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `mixBlendMode` | [`mix-blend-mode`](https://developer.mozilla.org/docs/Web/CSS/mix-blend-mode) | - | | `ml` | [`margin-left`](https://developer.mozilla.org/docs/Web/CSS/margin-left) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `mr` | [`margin-right`](https://developer.mozilla.org/docs/Web/CSS/margin-right) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `ms` | [`margin-inline-start`](https://developer.mozilla.org/docs/Web/CSS/margin-inline-start) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `mt` | [`margin-top`](https://developer.mozilla.org/docs/Web/CSS/margin-top) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `mx` | [`margin-inline-start`](https://developer.mozilla.org/docs/Web/CSS/margin-inline-start), [`margin-inline-end`](https://developer.mozilla.org/docs/Web/CSS/margin-inline-end) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `my` | [`margin-top`](https://developer.mozilla.org/docs/Web/CSS/margin-top), [`margin-bottom`](https://developer.mozilla.org/docs/Web/CSS/margin-bottom) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `objectFit` | [`object-fit`](https://developer.mozilla.org/docs/Web/CSS/object-fit) | - | | `objectPosition` | [`object-position`](https://developer.mozilla.org/docs/Web/CSS/object-position) | - | | `objectViewBox` | [`object-view-box`](https://developer.mozilla.org/docs/Web/CSS/object-view-box) | - | | `offset` | [`offset`](https://developer.mozilla.org/docs/Web/CSS/offset) | - | | `offsetAnchor` | [`offset-anchor`](https://developer.mozilla.org/docs/Web/CSS/offset-anchor) | - | | `offsetDistance` | [`offset-distance`](https://developer.mozilla.org/docs/Web/CSS/offset-distance) | - | | `offsetPath` | [`offset-path`](https://developer.mozilla.org/docs/Web/CSS/offset-path) | - | | `offsetPosition` | [`offset-position`](https://developer.mozilla.org/docs/Web/CSS/offset-position) | - | | `offsetRotate` | [`offset-rotate`](https://developer.mozilla.org/docs/Web/CSS/offset-rotate) | - | | `opacity` | [`opacity`](https://developer.mozilla.org/docs/Web/CSS/opacity) | - | | `order` | [`order`](https://developer.mozilla.org/docs/Web/CSS/order) | - | | `orphans` | [`orphans`](https://developer.mozilla.org/docs/Web/CSS/orphans) | - | | `outline` | [`outline`](https://developer.mozilla.org/docs/Web/CSS/outline) | - | | `outlineColor` | [`outline-color`](https://developer.mozilla.org/docs/Web/CSS/outline-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `outlineOffset` | [`outline-offset`](https://developer.mozilla.org/docs/Web/CSS/outline-offset) | - | | `outlineStyle` | [`outline-style`](https://developer.mozilla.org/docs/Web/CSS/outline-style) | - | | `outlineWidth` | [`outline-width`](https://developer.mozilla.org/docs/Web/CSS/outline-width) | - | | `overflow` | [`overflow`](https://developer.mozilla.org/docs/Web/CSS/overflow) | - | | `overflowAnchor` | [`overflow-anchor`](https://developer.mozilla.org/docs/Web/CSS/overflow-anchor) | - | | `overflowBlock` | [`overflow-block`](https://developer.mozilla.org/docs/Web/CSS/overflow-block) | - | | `overflowClipMargin` | [`overflow-clip-margin`](https://developer.mozilla.org/docs/Web/CSS/overflow-clip-margin) | - | | `overflowInline` | [`overflow-inline`](https://developer.mozilla.org/docs/Web/CSS/overflow-inline) | - | | `overflowWrap` | [`overflow-wrap`](https://developer.mozilla.org/docs/Web/CSS/overflow-wrap) | - | | `overflowX` | [`overflow-x`](https://developer.mozilla.org/docs/Web/CSS/overflow-x) | - | | `overflowY` | [`overflow-y`](https://developer.mozilla.org/docs/Web/CSS/overflow-y) | - | | `overlay` | [`overlay`](https://developer.mozilla.org/docs/Web/CSS/overlay) | - | | `overscroll` | [`overscroll-behavior`](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior) | - | | `overscrollBehavior` | [`overscroll-behavior`](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior) | - | | `overscrollBehaviorBlock` | [`overscroll-behavior-block`](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior-block) | - | | `overscrollBehaviorInline` | [`overscroll-behavior-inline`](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior-inline) | - | | `overscrollBehaviorX` | [`overscroll-behavior-x`](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior-x) | - | | `overscrollBehaviorY` | [`overscroll-behavior-y`](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior-y) | - | | `overscrollX` | [`overscroll-behavior-x`](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior-x) | - | | `overscrollY` | [`overscroll-behavior-y`](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior-y) | - | | `p` | [`padding`](https://developer.mozilla.org/docs/Web/CSS/padding) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `padding` | [`padding`](https://developer.mozilla.org/docs/Web/CSS/padding) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `paddingBlock` | [`padding-block`](https://developer.mozilla.org/docs/Web/CSS/padding-block) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `paddingBlockEnd` | [`padding-block-end`](https://developer.mozilla.org/docs/Web/CSS/padding-block-end) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `paddingBlockStart` | [`padding-block-start`](https://developer.mozilla.org/docs/Web/CSS/padding-block-start) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `paddingBottom` | [`padding-bottom`](https://developer.mozilla.org/docs/Web/CSS/padding-bottom) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `paddingEnd` | [`padding-inline-end`](https://developer.mozilla.org/docs/Web/CSS/padding-inline-end) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `paddingInline` | [`padding-inline`](https://developer.mozilla.org/docs/Web/CSS/padding-inline) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `paddingInlineEnd` | [`padding-inline-end`](https://developer.mozilla.org/docs/Web/CSS/padding-inline-end) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `paddingInlineStart` | [`padding-inline-start`](https://developer.mozilla.org/docs/Web/CSS/padding-inline-start) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `paddingLeft` | [`padding-left`](https://developer.mozilla.org/docs/Web/CSS/padding-left) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `paddingRight` | [`padding-right`](https://developer.mozilla.org/docs/Web/CSS/padding-right) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `paddingStart` | [`padding-inline-start`](https://developer.mozilla.org/docs/Web/CSS/padding-inline-start) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `paddingTop` | [`padding-top`](https://developer.mozilla.org/docs/Web/CSS/padding-top) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `paddingX` | [`padding-inline-start`](https://developer.mozilla.org/docs/Web/CSS/padding-inline-start), [`padding-inline-end`](https://developer.mozilla.org/docs/Web/CSS/padding-inline-end) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `paddingY` | [`padding-top`](https://developer.mozilla.org/docs/Web/CSS/padding-top), [`padding-bottom`](https://developer.mozilla.org/docs/Web/CSS/padding-bottom) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `page` | [`page`](https://developer.mozilla.org/docs/Web/CSS/page) | - | | `pageBreakAfter` | [`page-break-after`](https://developer.mozilla.org/docs/Web/CSS/page-break-after) | - | | `pageBreakBefore` | [`page-break-before`](https://developer.mozilla.org/docs/Web/CSS/page-break-before) | - | | `pageBreakInside` | [`page-break-inside`](https://developer.mozilla.org/docs/Web/CSS/page-break-inside) | - | | `paintOrder` | [`paint-order`](https://developer.mozilla.org/docs/Web/CSS/paint-order) | - | | `pb` | [`padding-bottom`](https://developer.mozilla.org/docs/Web/CSS/padding-bottom) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `pe` | [`padding-inline-end`](https://developer.mozilla.org/docs/Web/CSS/padding-inline-end) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `perspective` | [`perspective`](https://developer.mozilla.org/docs/Web/CSS/perspective) | - | | `perspectiveOrigin` | [`perspective-origin`](https://developer.mozilla.org/docs/Web/CSS/perspective-origin) | - | | `pl` | [`padding-left`](https://developer.mozilla.org/docs/Web/CSS/padding-left) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `placeContent` | [`place-content`](https://developer.mozilla.org/docs/Web/CSS/place-content) | - | | `placeItems` | [`place-items`](https://developer.mozilla.org/docs/Web/CSS/place-items) | - | | `placeSelf` | [`place-self`](https://developer.mozilla.org/docs/Web/CSS/place-self) | - | | `pointerEvents` | [`pointer-events`](https://developer.mozilla.org/docs/Web/CSS/pointer-events) | - | | `pos` | [`position`](https://developer.mozilla.org/docs/Web/CSS/position) | - | | `position` | [`position`](https://developer.mozilla.org/docs/Web/CSS/position) | - | | `positionAnchor` | [`position-anchor`](https://developer.mozilla.org/docs/Web/CSS/position-anchor) | - | | `positionArea` | [`position-area`](https://developer.mozilla.org/docs/Web/CSS/position-area) | - | | `positionTry` | [`position-try`](https://developer.mozilla.org/docs/Web/CSS/position-try) | - | | `positionTryFallbacks` | [`position-try-fallbacks`](https://developer.mozilla.org/docs/Web/CSS/position-try-fallbacks) | - | | `positionTryOrder` | [`position-try-order`](https://developer.mozilla.org/docs/Web/CSS/position-try-order) | - | | `positionVisibility` | [`position-visibility`](https://developer.mozilla.org/docs/Web/CSS/position-visibility) | - | | `pr` | [`padding-right`](https://developer.mozilla.org/docs/Web/CSS/padding-right) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `printColorAdjust` | [`print-color-adjust`](https://developer.mozilla.org/docs/Web/CSS/print-color-adjust) | - | | `ps` | [`padding-inline-start`](https://developer.mozilla.org/docs/Web/CSS/padding-inline-start) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `pt` | [`padding-top`](https://developer.mozilla.org/docs/Web/CSS/padding-top) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `px` | [`padding-inline-start`](https://developer.mozilla.org/docs/Web/CSS/padding-inline-start), [`padding-inline-end`](https://developer.mozilla.org/docs/Web/CSS/padding-inline-end) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `py` | [`padding-top`](https://developer.mozilla.org/docs/Web/CSS/padding-top), [`padding-bottom`](https://developer.mozilla.org/docs/Web/CSS/padding-bottom) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `quotes` | [`quotes`](https://developer.mozilla.org/docs/Web/CSS/quotes) | - | | `r` | [`r`](https://developer.mozilla.org/docs/Web/CSS/r) | - | | `readingFlow` | [`reading-flow`](https://developer.mozilla.org/docs/Web/CSS/reading-flow) | - | | `readingOrder` | [`reading-order`](https://developer.mozilla.org/docs/Web/CSS/reading-order) | - | | `resize` | [`resize`](https://developer.mozilla.org/docs/Web/CSS/resize) | - | | `right` | [`right`](https://developer.mozilla.org/docs/Web/CSS/right) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `rotate` | [`rotate`](https://developer.mozilla.org/docs/Web/CSS/rotate) | - | | `rotateX` | `--rotate-x` | - | | `rotateY` | `--rotate-y` | - | | `rotateZ` | `--rotate-z` | - | | `rounded` | [`border-radius`](https://developer.mozilla.org/docs/Web/CSS/border-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `roundedBottom` | [`border-bottom-left-radius`](https://developer.mozilla.org/docs/Web/CSS/border-bottom-left-radius), [`border-bottom-right-radius`](https://developer.mozilla.org/docs/Web/CSS/border-bottom-right-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `roundedBottomEnd` | [`border-end-end-radius`](https://developer.mozilla.org/docs/Web/CSS/border-end-end-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `roundedBottomLeft` | [`border-bottom-left-radius`](https://developer.mozilla.org/docs/Web/CSS/border-bottom-left-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `roundedBottomRight` | [`border-bottom-right-radius`](https://developer.mozilla.org/docs/Web/CSS/border-bottom-right-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `roundedBottomStart` | [`border-end-start-radius`](https://developer.mozilla.org/docs/Web/CSS/border-end-start-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `roundedEnd` | [`border-end-start-radius`](https://developer.mozilla.org/docs/Web/CSS/border-end-start-radius), [`border-end-end-radius`](https://developer.mozilla.org/docs/Web/CSS/border-end-end-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `roundedLeft` | [`border-top-left-radius`](https://developer.mozilla.org/docs/Web/CSS/border-top-left-radius), [`border-bottom-left-radius`](https://developer.mozilla.org/docs/Web/CSS/border-bottom-left-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `roundedRight` | [`border-top-right-radius`](https://developer.mozilla.org/docs/Web/CSS/border-top-right-radius), [`border-bottom-right-radius`](https://developer.mozilla.org/docs/Web/CSS/border-bottom-right-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `roundedStart` | [`border-start-start-radius`](https://developer.mozilla.org/docs/Web/CSS/border-start-start-radius), [`border-start-end-radius`](https://developer.mozilla.org/docs/Web/CSS/border-start-end-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `roundedTop` | [`border-top-left-radius`](https://developer.mozilla.org/docs/Web/CSS/border-top-left-radius), [`border-top-right-radius`](https://developer.mozilla.org/docs/Web/CSS/border-top-right-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `roundedTopEnd` | [`border-start-end-radius`](https://developer.mozilla.org/docs/Web/CSS/border-start-end-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `roundedTopLeft` | [`border-top-left-radius`](https://developer.mozilla.org/docs/Web/CSS/border-top-left-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `roundedTopRight` | [`border-top-right-radius`](https://developer.mozilla.org/docs/Web/CSS/border-top-right-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `roundedTopStart` | [`border-start-start-radius`](https://developer.mozilla.org/docs/Web/CSS/border-start-start-radius) | [`radii`](https://yamada-ui.com/docs/theming/tokens/radii.md) | | `rowGap` | [`row-gap`](https://developer.mozilla.org/docs/Web/CSS/row-gap) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `rubyAlign` | [`ruby-align`](https://developer.mozilla.org/docs/Web/CSS/ruby-align) | - | | `rubyOverhang` | [`ruby-overhang`](https://developer.mozilla.org/docs/Web/CSS/ruby-overhang) | - | | `rubyPosition` | [`ruby-position`](https://developer.mozilla.org/docs/Web/CSS/ruby-position) | - | | `rx` | [`rx`](https://developer.mozilla.org/docs/Web/CSS/rx) | - | | `ry` | [`ry`](https://developer.mozilla.org/docs/Web/CSS/ry) | - | | `saturate` | `--saturate` | - | | `scale` | [`scale`](https://developer.mozilla.org/docs/Web/CSS/scale) | - | | `scaleX` | `--scale-x` | - | | `scaleY` | `--scale-y` | - | | `scaleZ` | `--scale-z` | - | | `scrollbarColor` | [`scrollbar-color`](https://developer.mozilla.org/docs/Web/CSS/scrollbar-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `scrollbarGutter` | [`scrollbar-gutter`](https://developer.mozilla.org/docs/Web/CSS/scrollbar-gutter) | - | | `scrollbarWidth` | [`scrollbar-width`](https://developer.mozilla.org/docs/Web/CSS/scrollbar-width) | - | | `scrollBehavior` | [`scroll-behavior`](https://developer.mozilla.org/docs/Web/CSS/scroll-behavior) | - | | `scrollInitialTarget` | [`scroll-initial-target`](https://drafts.csswg.org/css-scroll-snap-2/#propdef-scroll-initial-target) | - | | `scrollMargin` | [`scroll-margin`](https://developer.mozilla.org/docs/Web/CSS/scroll-margin) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `scrollMarginBlock` | [`scroll-margin-block`](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block) | - | | `scrollMarginBlockEnd` | [`scroll-margin-block-end`](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block-end) | - | | `scrollMarginBlockStart` | [`scroll-margin-block-start`](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block-start) | - | | `scrollMarginBottom` | [`scroll-margin-bottom`](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-bottom) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `scrollMarginInline` | [`scroll-margin-inline`](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline) | - | | `scrollMarginInlineEnd` | [`scroll-margin-inline-end`](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline-end) | - | | `scrollMarginInlineStart` | [`scroll-margin-inline-start`](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline-start) | - | | `scrollMarginLeft` | [`scroll-margin-left`](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-left) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `scrollMarginRight` | [`scroll-margin-right`](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-right) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `scrollMarginTop` | [`scroll-margin-top`](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-top) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `scrollMarginX` | [`scroll-margin-left`](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-left), [`scroll-margin-right`](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-right) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `scrollMarginY` | [`scroll-margin-top`](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-top), [`scroll-margin-bottom`](https://developer.mozilla.org/docs/Web/CSS/scroll-margin-bottom) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `scrollMarkerGroup` | [`scroll-marker-group`](https://developer.mozilla.org/docs/Web/CSS/scroll-marker-group) | - | | `scrollPadding` | [`scroll-padding`](https://developer.mozilla.org/docs/Web/CSS/scroll-padding) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `scrollPaddingBlock` | [`scroll-padding-block`](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block) | - | | `scrollPaddingBlockEnd` | [`scroll-padding-block-end`](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block-end) | - | | `scrollPaddingBlockStart` | [`scroll-padding-block-start`](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block-start) | - | | `scrollPaddingBottom` | [`scroll-padding-bottom`](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-bottom) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `scrollPaddingInline` | [`scroll-padding-inline`](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline) | - | | `scrollPaddingInlineEnd` | [`scroll-padding-inline-end`](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline-end) | - | | `scrollPaddingInlineStart` | [`scroll-padding-inline-start`](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline-start) | - | | `scrollPaddingLeft` | [`scroll-padding-left`](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-left) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `scrollPaddingRight` | [`scroll-padding-right`](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-right) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `scrollPaddingTop` | [`scroll-padding-top`](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-top) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `scrollPaddingX` | [`scroll-padding-left`](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-left), [`scroll-padding-right`](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-right) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `scrollPaddingY` | [`scroll-padding-top`](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-top), [`scroll-padding-bottom`](https://developer.mozilla.org/docs/Web/CSS/scroll-padding-bottom) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `scrollSnapAlign` | [`scroll-snap-align`](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-align) | - | | `scrollSnapStop` | [`scroll-snap-stop`](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-stop) | - | | `scrollSnapType` | [`scroll-snap-type`](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-type) | - | | `scrollTargetGroup` | [`scroll-target-group`](https://developer.mozilla.org/docs/Web/CSS/scroll-target-group) | - | | `scrollTimeline` | [`scroll-timeline`](https://developer.mozilla.org/docs/Web/CSS/scroll-timeline) | - | | `scrollTimelineAxis` | [`scroll-timeline-axis`](https://developer.mozilla.org/docs/Web/CSS/scroll-timeline-axis) | - | | `scrollTimelineName` | [`scroll-timeline-name`](https://developer.mozilla.org/docs/Web/CSS/scroll-timeline-name) | - | | `sepia` | `--sepia` | - | | `shadow` | [`box-shadow`](https://developer.mozilla.org/docs/Web/CSS/box-shadow) | [`shadows`](https://yamada-ui.com/docs/theming/tokens/shadows.md) | | `shapeImageThreshold` | [`shape-image-threshold`](https://developer.mozilla.org/docs/Web/CSS/shape-image-threshold) | - | | `shapeMargin` | [`shape-margin`](https://developer.mozilla.org/docs/Web/CSS/shape-margin) | - | | `shapeOutside` | [`shape-outside`](https://developer.mozilla.org/docs/Web/CSS/shape-outside) | - | | `shapeRendering` | [`shape-rendering`](https://developer.mozilla.org/docs/Web/CSS/shape-rendering) | - | | `skewX` | `--skew-x` | - | | `skewY` | `--skew-y` | - | | `speak` | [`speak`](https://drafts.csswg.org/css-speech-1/#speaking-props-speak) | - | | `speakAs` | [`speak-as`](https://developer.mozilla.org/docs/Web/CSS/speak-as) | - | | `stopColor` | [`stop-color`](https://developer.mozilla.org/docs/Web/CSS/stop-color) | - | | `stopOpacity` | [`stop-opacity`](https://developer.mozilla.org/docs/Web/CSS/stop-opacity) | - | | `stroke` | [`stroke`](https://developer.mozilla.org/docs/Web/CSS/stroke) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `strokeColor` | [`stroke-color`](https://drafts.fxtf.org/fill-stroke-3/#stroke-color) | - | | `strokeDasharray` | [`stroke-dasharray`](https://developer.mozilla.org/docs/Web/CSS/stroke-dasharray) | - | | `strokeDashoffset` | [`stroke-dashoffset`](https://developer.mozilla.org/docs/Web/CSS/stroke-dashoffset) | - | | `strokeLinecap` | [`stroke-linecap`](https://developer.mozilla.org/docs/Web/CSS/stroke-linecap) | - | | `strokeLinejoin` | [`stroke-linejoin`](https://developer.mozilla.org/docs/Web/CSS/stroke-linejoin) | - | | `strokeMiterlimit` | [`stroke-miterlimit`](https://developer.mozilla.org/docs/Web/CSS/stroke-miterlimit) | - | | `strokeOpacity` | [`stroke-opacity`](https://developer.mozilla.org/docs/Web/CSS/stroke-opacity) | - | | `strokeWidth` | [`stroke-width`](https://developer.mozilla.org/docs/Web/CSS/stroke-width) | - | | `tableLayout` | [`table-layout`](https://developer.mozilla.org/docs/Web/CSS/table-layout) | - | | `tabSize` | [`tab-size`](https://developer.mozilla.org/docs/Web/CSS/tab-size) | - | | `text` | [`font-size`](https://developer.mozilla.org/docs/Web/CSS/font-size) | [`fontSizes`](https://yamada-ui.com/docs/theming/tokens/font-sizes.md) | | `textAlign` | [`text-align`](https://developer.mozilla.org/docs/Web/CSS/text-align) | - | | `textAlignLast` | [`text-align-last`](https://developer.mozilla.org/docs/Web/CSS/text-align-last) | - | | `textAnchor` | [`text-anchor`](https://developer.mozilla.org/docs/Web/CSS/text-anchor) | - | | `textAutospace` | [`text-autospace`](https://developer.mozilla.org/docs/Web/CSS/text-autospace) | - | | `textBox` | [`text-box`](https://developer.mozilla.org/docs/Web/CSS/text-box) | - | | `textBoxEdge` | [`text-box-edge`](https://developer.mozilla.org/docs/Web/CSS/text-box-edge) | - | | `textBoxTrim` | [`text-box-trim`](https://developer.mozilla.org/docs/Web/CSS/text-box-trim) | - | | `textColor` | [`color`](https://developer.mozilla.org/docs/Web/CSS/color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `textCombineUpright` | [`text-combine-upright`](https://developer.mozilla.org/docs/Web/CSS/text-combine-upright) | - | | `textDecor` | [`text-decoration`](https://developer.mozilla.org/docs/Web/CSS/text-decoration) | - | | `textDecoration` | [`text-decoration`](https://developer.mozilla.org/docs/Web/CSS/text-decoration) | - | | `textDecorationColor` | [`text-decoration-color`](https://developer.mozilla.org/docs/Web/CSS/text-decoration-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `textDecorationLine` | [`text-decoration-line`](https://developer.mozilla.org/docs/Web/CSS/text-decoration-line) | - | | `textDecorationSkip` | [`text-decoration-skip`](https://developer.mozilla.org/docs/Web/CSS/text-decoration-skip) | - | | `textDecorationSkipInk` | [`text-decoration-skip-ink`](https://developer.mozilla.org/docs/Web/CSS/text-decoration-skip-ink) | - | | `textDecorationStyle` | [`text-decoration-style`](https://developer.mozilla.org/docs/Web/CSS/text-decoration-style) | - | | `textDecorationThickness` | [`text-decoration-thickness`](https://developer.mozilla.org/docs/Web/CSS/text-decoration-thickness) | - | | `textEmphasis` | [`text-emphasis`](https://developer.mozilla.org/docs/Web/CSS/text-emphasis) | - | | `textEmphasisColor` | [`text-emphasis-color`](https://developer.mozilla.org/docs/Web/CSS/text-emphasis-color) | [`colors`](https://yamada-ui.com/docs/theming/tokens/colors.md) | | `textEmphasisPosition` | [`text-emphasis-position`](https://developer.mozilla.org/docs/Web/CSS/text-emphasis-position) | - | | `textEmphasisStyle` | [`text-emphasis-style`](https://developer.mozilla.org/docs/Web/CSS/text-emphasis-style) | - | | `textIndent` | [`text-indent`](https://developer.mozilla.org/docs/Web/CSS/text-indent) | - | | `textJustify` | [`text-justify`](https://developer.mozilla.org/docs/Web/CSS/text-justify) | - | | `textOrientation` | [`text-orientation`](https://developer.mozilla.org/docs/Web/CSS/text-orientation) | - | | `textOverflow` | [`text-overflow`](https://developer.mozilla.org/docs/Web/CSS/text-overflow) | - | | `textRendering` | [`text-rendering`](https://developer.mozilla.org/docs/Web/CSS/text-rendering) | - | | `textShadow` | [`text-shadow`](https://developer.mozilla.org/docs/Web/CSS/text-shadow) | [`shadows`](https://yamada-ui.com/docs/theming/tokens/shadows.md) | | `textSizeAdjust` | [`text-size-adjust`](https://developer.mozilla.org/docs/Web/CSS/text-size-adjust) | - | | `textSpacingTrim` | [`text-spacing-trim`](https://developer.mozilla.org/docs/Web/CSS/text-spacing-trim) | - | | `textStyle` | - | - | | `textTransform` | [`text-transform`](https://developer.mozilla.org/docs/Web/CSS/text-transform) | - | | `textUnderlineOffset` | [`text-underline-offset`](https://developer.mozilla.org/docs/Web/CSS/text-underline-offset) | - | | `textUnderlinePosition` | [`text-underline-position`](https://developer.mozilla.org/docs/Web/CSS/text-underline-position) | - | | `textWrap` | [`text-wrap`](https://developer.mozilla.org/docs/Web/CSS/text-wrap) | - | | `textWrapMode` | [`text-wrap-mode`](https://developer.mozilla.org/docs/Web/CSS/text-wrap-mode) | - | | `textWrapStyle` | [`text-wrap-style`](https://developer.mozilla.org/docs/Web/CSS/text-wrap-style) | - | | `timelineScope` | [`timeline-scope`](https://developer.mozilla.org/docs/Web/CSS/timeline-scope) | - | | `top` | [`top`](https://developer.mozilla.org/docs/Web/CSS/top) | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `touchAction` | [`touch-action`](https://developer.mozilla.org/docs/Web/CSS/touch-action) | - | | `tracking` | [`letter-spacing`](https://developer.mozilla.org/docs/Web/CSS/letter-spacing) | [`letterSpacings`](https://yamada-ui.com/docs/theming/tokens/letter-spacings.md) | | `transform` | [`transform`](https://developer.mozilla.org/docs/Web/CSS/transform) | - | | `transformBox` | [`transform-box`](https://developer.mozilla.org/docs/Web/CSS/transform-box) | - | | `transformOrigin` | [`transform-origin`](https://developer.mozilla.org/docs/Web/CSS/transform-origin) | - | | `transformStyle` | [`transform-style`](https://developer.mozilla.org/docs/Web/CSS/transform-style) | - | | `transition` | - | - | | `transitionBehavior` | [`transition-behavior`](https://developer.mozilla.org/docs/Web/CSS/transition-behavior) | - | | `transitionDelay` | [`transition-delay`](https://developer.mozilla.org/docs/Web/CSS/transition-delay) | - | | `transitionDuration` | [`transition-duration`](https://developer.mozilla.org/docs/Web/CSS/transition-duration) | [`durations`](https://yamada-ui.com/docs/theming/tokens/durations.md) | | `transitionProperty` | - | - | | `transitionTimingFunction` | [`transition-timing-function`](https://developer.mozilla.org/docs/Web/CSS/transition-timing-function) | [`easings`](https://yamada-ui.com/docs/theming/tokens/easings.md) | | `translateX` | `--translate-x` | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `translateY` | `--translate-y` | [`spaces`](https://yamada-ui.com/docs/theming/tokens/spaces.md) | | `translateZ` | `--translate-z` | - | | `truncated` | - | - | | `unicodeBidi` | [`unicode-bidi`](https://developer.mozilla.org/docs/Web/CSS/unicode-bidi) | - | | `userModify` | [`user-modify`](https://developer.mozilla.org/docs/Web/CSS/user-modify) | - | | `userSelect` | [`user-select`](https://developer.mozilla.org/docs/Web/CSS/user-select) | - | | `vectorEffect` | [`vector-effect`](https://developer.mozilla.org/docs/Web/CSS/vector-effect) | - | | `verticalAlign` | [`vertical-align`](https://developer.mozilla.org/docs/Web/CSS/vertical-align) | - | | `viewTimeline` | [`view-timeline`](https://developer.mozilla.org/docs/Web/CSS/view-timeline) | - | | `viewTimelineAxis` | [`view-timeline-axis`](https://developer.mozilla.org/docs/Web/CSS/view-timeline-axis) | - | | `viewTimelineInset` | [`view-timeline-inset`](https://developer.mozilla.org/docs/Web/CSS/view-timeline-inset) | - | | `viewTimelineName` | [`view-timeline-name`](https://developer.mozilla.org/docs/Web/CSS/view-timeline-name) | - | | `viewTransitionClass` | [`view-transition-class`](https://developer.mozilla.org/docs/Web/CSS/view-transition-class) | - | | `viewTransitionGroup` | [`view-transition-group`](https://drafts.csswg.org/css-view-transitions-2/#view-transition-group-prop) | - | | `viewTransitionName` | [`view-transition-name`](https://developer.mozilla.org/docs/Web/CSS/view-transition-name) | - | | `visibility` | [`visibility`](https://developer.mozilla.org/docs/Web/CSS/visibility) | - | | `w` | [`width`](https://developer.mozilla.org/docs/Web/CSS/width) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `whiteSpace` | [`white-space`](https://developer.mozilla.org/docs/Web/CSS/white-space) | - | | `whiteSpaceCollapse` | [`white-space-collapse`](https://developer.mozilla.org/docs/Web/CSS/white-space-collapse) | - | | `widows` | [`widows`](https://developer.mozilla.org/docs/Web/CSS/widows) | - | | `width` | [`width`](https://developer.mozilla.org/docs/Web/CSS/width) | [`sizes`](https://yamada-ui.com/docs/theming/tokens/sizes.md) | | `willChange` | [`will-change`](https://developer.mozilla.org/docs/Web/CSS/will-change) | - | | `wordBreak` | [`word-break`](https://developer.mozilla.org/docs/Web/CSS/word-break) | - | | `wordSpacing` | [`word-spacing`](https://developer.mozilla.org/docs/Web/CSS/word-spacing) | - | | `writingMode` | [`writing-mode`](https://developer.mozilla.org/docs/Web/CSS/writing-mode) | - | | `x` | [`x`](https://developer.mozilla.org/docs/Web/CSS/x) | - | | `y` | [`y`](https://developer.mozilla.org/docs/Web/CSS/y) | - | | `z` | [`z-index`](https://developer.mozilla.org/docs/Web/CSS/z-index) | [`zIndices`](https://yamada-ui.com/docs/theming/tokens/z-indices.md) | | `zIndex` | [`z-index`](https://developer.mozilla.org/docs/Web/CSS/z-index) | [`zIndices`](https://yamada-ui.com/docs/theming/tokens/z-indices.md) | | `zoom` | [`zoom`](https://developer.mozilla.org/docs/Web/CSS/zoom) | - | ## At-Rules | Prop | CSS Property | Theme Token | | -------------------- | ------------ | --------------------------------------------------------------------- | | `_container` | @container | - | | `_keyframes` | @keyframes | [`keyframes`](https://yamada-ui.com/docs/theming/tokens/keyframes.md) | | `_landscape` | @media | - | | `_media` | @media | - | | `_mediaDark` | @media | - | | `_mediaLight` | @media | - | | `_mediaReduceMotion` | @media | - | | `_portrait` | @media | - | | `_print` | @media | - | | `_supports` | @supports | - | ## Pseudo Elements | Prop | CSS Property | | ---------------------- | ----------------------------------------- | | `_after` | `&::after` | | `_backdrop` | `&::backdrop` | | `_before` | `&::before` | | `_cue` | `&::cue` | | `_cueRegion` | `&::cue-region` | | `_fileSelector` | `&::file-selector-button` | | `_firstLetter` | `&::first-letter` | | `_firstLine` | `&::first-line` | | `_marker` | `&::marker` | | `_placeholder` | `&::placeholder, &[data-placeholder]` | | `_scrollbar` | `&::-webkit-scrollbar, &[data-scrollbar]` | | `_scrollbarButton` | `&::-webkit-scrollbar-button` | | `_scrollbarCorner` | `&::-webkit-scrollbar-corner` | | `_scrollbarThumb` | `&::-webkit-scrollbar-thumb` | | `_scrollbarTrack` | `&::-webkit-scrollbar-track` | | `_scrollbarTrackPiece` | `&::-webkit-scrollbar-track-piece` | | `_selection` | `&::selection` | ## Pseudo Classes | Prop | CSS Property | | --------------------- | ------------------------------------------------------------------------------------------------ | | `_active` | `&:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])` | | `_activedescendant` | `&:is([data-activedescendant])` | | `_anyLink` | `&:is(:any-link, [data-any-link])` | | `_autofill` | `&:autofill` | | `_blank` | `&:is(:blank, [data-blank])` | | `_checked` | `&:is(:checked, [data-checked], [aria-checked=true])` | | `_child` | `& > *` | | `_default` | `&:default` | | `_disabled` | `&:is(:disabled, [disabled], [data-disabled])` | | `_empty` | `&:empty` | | `_enabled` | `&:is(:enabled, [data-enabled])` | | `_even` | `&:nth-of-type(even)` | | `_first` | `&:first-of-type` | | `_firstChild` | `& > *:first-child` | | `_focus` | `&:is(:focus, [data-focus])` | | `_focusVisible` | `&:is(:focus-visible, [data-focus-visible])` | | `_focusWithin` | `&:not(:focus-within, [data-focus-within])` | | `_fullScreen` | `&:fullscreen` | | `_horizontal` | `&:is([data-orientation=horizontal], [aria-orientation=horizontal])` | | `_hover` | `&:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])` | | `_icon` | `&:where(svg:not([data-loading])), & > [data-icon]` | | `_indeterminate` | `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed])` | | `_inRange` | `&:is(:in-range, [data-in-range])` | | `_invalid` | `&:is([data-invalid], [aria-invalid=true])` | | `_last` | `&:last-of-type` | | `_lastChild` | `& > *:last-child` | | `_link` | `&:is(:link, [data-link])` | | `_modal` | `&:modal` | | `_nativeActive` | `&:active` | | `_nativeChecked` | `&:checked` | | `_nativeDisabled` | `&:is(disabled, [disabled])` | | `_nativeFocus` | `&:focus` | | `_nativeFocusVisible` | `&:focus-visible` | | `_nativeFocusWithin` | `&:focus-within` | | `_nativeHover` | `&:hover` | | `_nativeReadOnly` | `&:is([readonly], [aria-readonly=true])` | | `_nativeTarget` | `&:target` | | `_nativeValid` | `&:valid` | | `_notChecked` | `&:not(:checked):not([data-checked]):not([aria-checked=true])` | | `_notEmpty` | `&:not(:empty)` | | `_notFirst` | `&:not(:first-of-type)` | | `_notFirstChild` | `& > *:not(:first-child)` | | `_notLast` | `&:not(:last-of-type)` | | `_notLastChild` | `& > *:not(:last-child)` | | `_notTarget` | `&:not(:target)` | | `_odd` | `&:nth-of-type(odd)` | | `_only` | `&:only-of-type` | | `_onlyChild` | `&:only-child` | | `_optional` | `&:is(:optional, [data-optional])` | | `_outRange` | `&:is(:out-of-range, [data-out-of-range])` | | `_paused` | `&:is(:paused, [data-paused])` | | `_picture` | `&:picture-in-picture` | | `_placeholderShown` | `&:placeholder-shown` | | `_playing` | `&:is(:playing, [data-playing])` | | `_readOnly` | `&:is([readonly], [data-readonly], [aria-readonly=true])` | | `_readWrite` | `&:is(:read-write, [data-read-write])` | | `_required` | `&:is(:required, [required])` | | `_target` | `&:is(:target, [data-target])` | | `_userInvalid` | `&:is(:user-invalid, [data-user-invalid])` | | `_valid` | `&:is(:valid, [data-valid])` | | `_vertical` | `&:is([data-orientation=vertical], [aria-orientation=vertical])` | | `_visited` | `&:visited` | ## Selectors | Prop | CSS Property | | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `_accept` | `&[data-accept]` | | `_between` | `&[data-between]` | | `_complete` | `&[data-complete]` | | `_current` | `&:is([aria-current], [data-current]):not([aria-current='false'])` | | `_dark` | `.dark &:not([data-mode]), [data-mode=dark] &:not([data-mode]), &[data-mode=dark]` | | `_end` | `&:is([data-end], [data-group-end])` | | `_expanded` | `&:is([data-expanded], [aria-expanded=true])` | | `_fallback` | `&[data-fallback]` | | `_filled` | `&[data-filled]` | | `_grabbed` | `&:is([data-grabbed], [aria-grabbed=true])` | | `_grid` | `&:is([role=grid], [data-grid])` | | `_groupAccept` | `[role=group][data-accept] &, [data-group][data-accept] &, .group[data-accept] &` | | `_groupActive` | `[role=group]:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) &, [data-group]:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) &, .group:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) &` | | `_groupActivedescendant` | `[role=group]:is([data-activedescendant]) &, [data-group]:is([data-activedescendant]) &, .group:is([data-activedescendant]) &` | | `_groupBlank` | `[role=group]:is(:blank, [data-blank]) &, [data-group]:is(:blank, [data-blank]) &, .group:is(:blank, [data-blank]) &` | | `_groupChecked` | `[role=group]:is(:checked, [data-checked], [aria-checked=true]) &, [data-group]:is(:checked, [data-checked], [aria-checked=true]) &, .group:is(:checked, [data-checked], [aria-checked=true]) &` | | `_groupComplete` | `[role=group][data-complete] &, [data-group][data-complete] &, .group[data-complete] &` | | `_groupCurrent` | `[role=group]:is([aria-current], [data-current]):not([aria-current='false']) &, [data-group]:is([aria-current], [data-current]):not([aria-current='false']) &, .group:is([aria-current], [data-current]):not([aria-current='false']) &` | | `_groupDisabled` | `[role=group]:is(:disabled, [disabled], [data-disabled]) &, [data-group]:is(:disabled, [disabled], [data-disabled]) &, .group:is(:disabled, [disabled], [data-disabled]) &` | | `_groupEnabled` | `[role=group]:is(:enabled, [data-enabled]) &, [data-group]:is(:enabled, [data-enabled]) &, .group:is(:enabled, [data-enabled]) &` | | `_groupExpanded` | `[role=group]:is([data-expanded], [aria-expanded=true]) &, [data-group]:is([data-expanded], [aria-expanded=true]) &, .group:is([data-expanded], [aria-expanded=true]) &` | | `_groupFocus` | `[role=group]:is(:focus, [data-focus]) &, [data-group]:is(:focus, [data-focus]) &, .group:is(:focus, [data-focus]) &` | | `_groupFocusVisible` | `[role=group]:is(:focus-visible, [data-focus-visible]) &, [data-group]:is(:focus-visible, [data-focus-visible]) &, .group:is(:focus-visible, [data-focus-visible]) &` | | `_groupFocusWithin` | `[role=group]:not(:focus-within, [data-focus-within]) &, [data-group]:not(:focus-within, [data-focus-within]) &, .group:not(:focus-within, [data-focus-within]) &` | | `_groupGrabbed` | `[role=group]:is([data-grabbed], [aria-grabbed=true]) &, [data-group]:is([data-grabbed], [aria-grabbed=true]) &, .group:is([data-grabbed], [aria-grabbed=true]) &` | | `_groupHorizontal` | `[role=group]:is([data-orientation=horizontal], [aria-orientation=horizontal]) &, [data-group]:is([data-orientation=horizontal], [aria-orientation=horizontal]) &, .group:is([data-orientation=horizontal], [aria-orientation=horizontal]) &` | | `_groupHover` | `[role=group]:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) &, [data-group]:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) &, .group:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) &` | | `_groupIdle` | `[role=group][data-idle] &, [data-group][data-idle] &, .group[data-idle] &` | | `_groupIncomplete` | `[role=group][data-incomplete] &, [data-group][data-incomplete] &, .group[data-incomplete] &` | | `_groupInvalid` | `[role=group]:is([data-invalid], [aria-invalid=true]) &, [data-group]:is([data-invalid], [aria-invalid=true]) &, .group:is([data-invalid], [aria-invalid=true]) &` | | `_groupLoaded` | `[role=group][data-loaded] &, [data-group][data-loaded] &, .group[data-loaded] &` | | `_groupLoading` | `[role=group]:is([data-loading], [aria-busy=true]) &, [data-group]:is([data-loading], [aria-busy=true]) &, .group:is([data-loading], [aria-busy=true]) &` | | `_groupOptional` | `[role=group]:is(:optional, [data-optional]) &, [data-group]:is(:optional, [data-optional]) &, .group:is(:optional, [data-optional]) &` | | `_groupPlaceholderShown` | `[role=group]:placeholder-shown &, [data-group]:placeholder-shown &, .group:placeholder-shown &` | | `_groupPressed` | `[role=group]:is([data-pressed], [aria-pressed=true]) &, [data-group]:is([data-pressed], [aria-pressed=true]) &, .group:is([data-pressed], [aria-pressed=true]) &` | | `_groupRange` | `[role=group]:is([data-range]) &, [data-group]:is([data-range]) &, .group:is([data-range]) &` | | `_groupReadOnly` | `[role=group]:is([readonly], [data-readonly], [aria-readonly=true]) &, [data-group]:is([readonly], [data-readonly], [aria-readonly=true]) &, .group:is([readonly], [data-readonly], [aria-readonly=true]) &` | | `_groupReadWrite` | `[role=group]:is(:read-write, [data-read-write]) &, [data-group]:is(:read-write, [data-read-write]) &, .group:is(:read-write, [data-read-write]) &` | | `_groupReject` | `[role=group][data-reject] &, [data-group][data-reject] &, .group[data-reject] &` | | `_groupRequired` | `[role=group]:is(:required, [required]) &, [data-group]:is(:required, [required]) &, .group:is(:required, [required]) &` | | `_groupSelected` | `[role=group]:is([data-selected], [aria-selected=true]) &, [data-group]:is([data-selected], [aria-selected=true]) &, .group:is([data-selected], [aria-selected=true]) &` | | `_groupUserInvalid` | `[role=group]:is(:user-invalid, [data-user-invalid]) &, [data-group]:is(:user-invalid, [data-user-invalid]) &, .group:is(:user-invalid, [data-user-invalid]) &` | | `_groupValid` | `[role=group]:is(:valid, [data-valid]) &, [data-group]:is(:valid, [data-valid]) &, .group:is(:valid, [data-valid]) &` | | `_groupVertical` | `[role=group]:is([data-orientation=vertical], [aria-orientation=vertical]) &, [data-group]:is([data-orientation=vertical], [aria-orientation=vertical]) &, .group:is([data-orientation=vertical], [aria-orientation=vertical]) &` | | `_hasIcon` | `&:has(> [data-icon])` | | `_hidden` | `&:is([hidden], [data-hidden])` | | `_idle` | `&[data-idle]` | | `_incomplete` | `&[data-incomplete]` | | `_light` | `.light &:not([data-mode]), [data-mode=light] &:not([data-mode]), &[data-mode=light]` | | `_loaded` | `&[data-loaded]` | | `_loading` | `&:is([data-loading], [aria-busy=true])` | | `_ltr` | `[dir=ltr] &` | | `_nativeHidden` | `&[hidden]` | | `_never` | `&[data-never]` | | `_notAllowed` | `&[data-not-allowed]` | | `_notCurrent` | `&:not([aria-current], [data-current]), &[aria-current='false']` | | `_notFallback` | `&:not([data-fallback])` | | `_notSelected` | `&:not([data-selected]):not([aria-selected=true])` | | `_numeric` | `&[data-numeric]` | | `_peerAccept` | `&:has(~ [data-peer][data-accept]), [data-peer][data-accept] ~ &, &:has(~ .peer[data-accept]), .peer[data-accept] ~ &, &:has(~ [data-peer] *[data-accept]), [data-peer]:has(*[data-accept]) ~ &, &:has(~ .peer *[data-accept]), .peer:has(*[data-accept]) ~ &` | | `_peerActive` | `&:has(~ [data-peer]:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])), [data-peer]:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) ~ &, &:has(~ .peer:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])), .peer:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) ~ &, &:has(~ [data-peer] *:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])), [data-peer]:has(*:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])) ~ &, &:has(~ .peer *:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])), .peer:has(*:is(:active, [data-active]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])) ~ &` | | `_peerBlank` | `&:has(~ [data-peer]:is(:blank, [data-blank])), [data-peer]:is(:blank, [data-blank]) ~ &, &:has(~ .peer:is(:blank, [data-blank])), .peer:is(:blank, [data-blank]) ~ &, &:has(~ [data-peer] *:is(:blank, [data-blank])), [data-peer]:has(*:is(:blank, [data-blank])) ~ &, &:has(~ .peer *:is(:blank, [data-blank])), .peer:has(*:is(:blank, [data-blank])) ~ &` | | `_peerChecked` | `&:has(~ [data-peer]:is(:checked, [data-checked], [aria-checked=true])), [data-peer]:is(:checked, [data-checked], [aria-checked=true]) ~ &, &:has(~ .peer:is(:checked, [data-checked], [aria-checked=true])), .peer:is(:checked, [data-checked], [aria-checked=true]) ~ &, &:has(~ [data-peer] *:is(:checked, [data-checked], [aria-checked=true])), [data-peer]:has(*:is(:checked, [data-checked], [aria-checked=true])) ~ &, &:has(~ .peer *:is(:checked, [data-checked], [aria-checked=true])), .peer:has(*:is(:checked, [data-checked], [aria-checked=true])) ~ &` | | `_peerComplete` | `&:has(~ [data-peer][data-complete]), [data-peer][data-complete] ~ &, &:has(~ .peer[data-complete]), .peer[data-complete] ~ &, &:has(~ [data-peer] *[data-complete]), [data-peer]:has(*[data-complete]) ~ &, &:has(~ .peer *[data-complete]), .peer:has(*[data-complete]) ~ &` | | `_peerCurrent` | `&:has(~ [data-peer]:is([aria-current], [data-current]):not([aria-current='false'])), [data-peer]:is([aria-current], [data-current]):not([aria-current='false']) ~ &, &:has(~ .peer:is([aria-current], [data-current]):not([aria-current='false'])), .peer:is([aria-current], [data-current]):not([aria-current='false']) ~ &, &:has(~ [data-peer] *:is([aria-current], [data-current]):not([aria-current='false'])), [data-peer]:has(*:is([aria-current], [data-current]):not([aria-current='false'])) ~ &, &:has(~ .peer *:is([aria-current], [data-current]):not([aria-current='false'])), .peer:has(*:is([aria-current], [data-current]):not([aria-current='false'])) ~ &` | | `_peerDisabled` | `&:has(~ [data-peer]:is(:disabled, [disabled], [data-disabled])), [data-peer]:is(:disabled, [disabled], [data-disabled]) ~ &, &:has(~ .peer:is(:disabled, [disabled], [data-disabled])), .peer:is(:disabled, [disabled], [data-disabled]) ~ &, &:has(~ [data-peer] *:is(:disabled, [disabled], [data-disabled])), [data-peer]:has(*:is(:disabled, [disabled], [data-disabled])) ~ &, &:has(~ .peer *:is(:disabled, [disabled], [data-disabled])), .peer:has(*:is(:disabled, [disabled], [data-disabled])) ~ &` | | `_peerEnabled` | `&:has(~ [data-peer]:is(:enabled, [data-enabled])), [data-peer]:is(:enabled, [data-enabled]) ~ &, &:has(~ .peer:is(:enabled, [data-enabled])), .peer:is(:enabled, [data-enabled]) ~ &, &:has(~ [data-peer] *:is(:enabled, [data-enabled])), [data-peer]:has(*:is(:enabled, [data-enabled])) ~ &, &:has(~ .peer *:is(:enabled, [data-enabled])), .peer:has(*:is(:enabled, [data-enabled])) ~ &` | | `_peerExpanded` | `&:has(~ [data-peer]:is([data-expanded], [aria-expanded=true])), [data-peer]:is([data-expanded], [aria-expanded=true]) ~ &, &:has(~ .peer:is([data-expanded], [aria-expanded=true])), .peer:is([data-expanded], [aria-expanded=true]) ~ &, &:has(~ [data-peer] *:is([data-expanded], [aria-expanded=true])), [data-peer]:has(*:is([data-expanded], [aria-expanded=true])) ~ &, &:has(~ .peer *:is([data-expanded], [aria-expanded=true])), .peer:has(*:is([data-expanded], [aria-expanded=true])) ~ &` | | `_peerFocus` | `&:has(~ [data-peer]:is(:focus, [data-focus])), [data-peer]:is(:focus, [data-focus]) ~ &, &:has(~ .peer:is(:focus, [data-focus])), .peer:is(:focus, [data-focus]) ~ &, &:has(~ [data-peer] *:is(:focus, [data-focus])), [data-peer]:has(*:is(:focus, [data-focus])) ~ &, &:has(~ .peer *:is(:focus, [data-focus])), .peer:has(*:is(:focus, [data-focus])) ~ &` | | `_peerFocusVisible` | `&:has(~ [data-peer]:is(:focus-visible, [data-focus-visible])), [data-peer]:is(:focus-visible, [data-focus-visible]) ~ &, &:has(~ .peer:is(:focus-visible, [data-focus-visible])), .peer:is(:focus-visible, [data-focus-visible]) ~ &, &:has(~ [data-peer] *:is(:focus-visible, [data-focus-visible])), [data-peer]:has(*:is(:focus-visible, [data-focus-visible])) ~ &, &:has(~ .peer *:is(:focus-visible, [data-focus-visible])), .peer:has(*:is(:focus-visible, [data-focus-visible])) ~ &` | | `_peerFocusWithin` | `&:has(~ [data-peer]:not(:focus-within, [data-focus-within])), [data-peer]:not(:focus-within, [data-focus-within]) ~ &, &:has(~ .peer:not(:focus-within, [data-focus-within])), .peer:not(:focus-within, [data-focus-within]) ~ &, &:has(~ [data-peer] *:not(:focus-within, [data-focus-within])), [data-peer]:has(*:not(:focus-within, [data-focus-within])) ~ &, &:has(~ .peer *:not(:focus-within, [data-focus-within])), .peer:has(*:not(:focus-within, [data-focus-within])) ~ &` | | `_peerGrabbed` | `&:has(~ [data-peer]:is([data-grabbed], [aria-grabbed=true])), [data-peer]:is([data-grabbed], [aria-grabbed=true]) ~ &, &:has(~ .peer:is([data-grabbed], [aria-grabbed=true])), .peer:is([data-grabbed], [aria-grabbed=true]) ~ &, &:has(~ [data-peer] *:is([data-grabbed], [aria-grabbed=true])), [data-peer]:has(*:is([data-grabbed], [aria-grabbed=true])) ~ &, &:has(~ .peer *:is([data-grabbed], [aria-grabbed=true])), .peer:has(*:is([data-grabbed], [aria-grabbed=true])) ~ &` | | `_peerHorizontal` | `&:has(~ [data-peer]:is([data-orientation=horizontal], [aria-orientation=horizontal])), [data-peer]:is([data-orientation=horizontal], [aria-orientation=horizontal]) ~ &, &:has(~ .peer:is([data-orientation=horizontal], [aria-orientation=horizontal])), .peer:is([data-orientation=horizontal], [aria-orientation=horizontal]) ~ &, &:has(~ [data-peer] *:is([data-orientation=horizontal], [aria-orientation=horizontal])), [data-peer]:has(*:is([data-orientation=horizontal], [aria-orientation=horizontal])) ~ &, &:has(~ .peer *:is([data-orientation=horizontal], [aria-orientation=horizontal])), .peer:has(*:is([data-orientation=horizontal], [aria-orientation=horizontal])) ~ &` | | `_peerHover` | `&:has(~ [data-peer]:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])), [data-peer]:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) ~ &, &:has(~ .peer:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])), .peer:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled]) ~ &, &:has(~ [data-peer] *:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])), [data-peer]:has(*:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])) ~ &, &:has(~ .peer *:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])), .peer:has(*:is(:hover, [data-hover]):not(:disabled, [disabled], [aria-disabled=true], [data-disabled])) ~ &` | | `_peerIdle` | `&:has(~ [data-peer][data-idle]), [data-peer][data-idle] ~ &, &:has(~ .peer[data-idle]), .peer[data-idle] ~ &, &:has(~ [data-peer] *[data-idle]), [data-peer]:has(*[data-idle]) ~ &, &:has(~ .peer *[data-idle]), .peer:has(*[data-idle]) ~ &` | | `_peerIncomplete` | `&:has(~ [data-peer][data-incomplete]), [data-peer][data-incomplete] ~ &, &:has(~ .peer[data-incomplete]), .peer[data-incomplete] ~ &, &:has(~ [data-peer] *[data-incomplete]), [data-peer]:has(*[data-incomplete]) ~ &, &:has(~ .peer *[data-incomplete]), .peer:has(*[data-incomplete]) ~ &` | | `_peerInvalid` | `&:has(~ [data-peer]:is([data-invalid], [aria-invalid=true])), [data-peer]:is([data-invalid], [aria-invalid=true]) ~ &, &:has(~ .peer:is([data-invalid], [aria-invalid=true])), .peer:is([data-invalid], [aria-invalid=true]) ~ &, &:has(~ [data-peer] *:is([data-invalid], [aria-invalid=true])), [data-peer]:has(*:is([data-invalid], [aria-invalid=true])) ~ &, &:has(~ .peer *:is([data-invalid], [aria-invalid=true])), .peer:has(*:is([data-invalid], [aria-invalid=true])) ~ &` | | `_peerLoaded` | `&:has(~ [data-peer][data-loaded]), [data-peer][data-loaded] ~ &, &:has(~ .peer[data-loaded]), .peer[data-loaded] ~ &, &:has(~ [data-peer] *[data-loaded]), [data-peer]:has(*[data-loaded]) ~ &, &:has(~ .peer *[data-loaded]), .peer:has(*[data-loaded]) ~ &` | | `_peerLoading` | `&:has(~ [data-peer]:is([data-loading], [aria-busy=true])), [data-peer]:is([data-loading], [aria-busy=true]) ~ &, &:has(~ .peer:is([data-loading], [aria-busy=true])), .peer:is([data-loading], [aria-busy=true]) ~ &, &:has(~ [data-peer] *:is([data-loading], [aria-busy=true])), [data-peer]:has(*:is([data-loading], [aria-busy=true])) ~ &, &:has(~ .peer *:is([data-loading], [aria-busy=true])), .peer:has(*:is([data-loading], [aria-busy=true])) ~ &` | | `_peerOptional` | `&:has(~ [data-peer]:is(:optional, [data-optional])), [data-peer]:is(:optional, [data-optional]) ~ &, &:has(~ .peer:is(:optional, [data-optional])), .peer:is(:optional, [data-optional]) ~ &, &:has(~ [data-peer] *:is(:optional, [data-optional])), [data-peer]:has(*:is(:optional, [data-optional])) ~ &, &:has(~ .peer *:is(:optional, [data-optional])), .peer:has(*:is(:optional, [data-optional])) ~ &` | | `_peerPlaceholderShown` | `&:has(~ [data-peer]:placeholder-shown), [data-peer]:placeholder-shown ~ &, &:has(~ .peer:placeholder-shown), .peer:placeholder-shown ~ &, &:has(~ [data-peer] *:placeholder-shown), [data-peer]:has(*:placeholder-shown) ~ &, &:has(~ .peer *:placeholder-shown), .peer:has(*:placeholder-shown) ~ &` | | `_peerPressed` | `&:has(~ [data-peer]:is([data-pressed], [aria-pressed=true])), [data-peer]:is([data-pressed], [aria-pressed=true]) ~ &, &:has(~ .peer:is([data-pressed], [aria-pressed=true])), .peer:is([data-pressed], [aria-pressed=true]) ~ &, &:has(~ [data-peer] *:is([data-pressed], [aria-pressed=true])), [data-peer]:has(*:is([data-pressed], [aria-pressed=true])) ~ &, &:has(~ .peer *:is([data-pressed], [aria-pressed=true])), .peer:has(*:is([data-pressed], [aria-pressed=true])) ~ &` | | `_peerRange` | `&:has(~ [data-peer]:is([data-range])), [data-peer]:is([data-range]) ~ &, &:has(~ .peer:is([data-range])), .peer:is([data-range]) ~ &, &:has(~ [data-peer] *:is([data-range])), [data-peer]:has(*:is([data-range])) ~ &, &:has(~ .peer *:is([data-range])), .peer:has(*:is([data-range])) ~ &` | | `_peerReadOnly` | `&:has(~ [data-peer]:is([readonly], [data-readonly], [aria-readonly=true])), [data-peer]:is([readonly], [data-readonly], [aria-readonly=true]) ~ &, &:has(~ .peer:is([readonly], [data-readonly], [aria-readonly=true])), .peer:is([readonly], [data-readonly], [aria-readonly=true]) ~ &, &:has(~ [data-peer] *:is([readonly], [data-readonly], [aria-readonly=true])), [data-peer]:has(*:is([readonly], [data-readonly], [aria-readonly=true])) ~ &, &:has(~ .peer *:is([readonly], [data-readonly], [aria-readonly=true])), .peer:has(*:is([readonly], [data-readonly], [aria-readonly=true])) ~ &` | | `_peerReadWrite` | `&:has(~ [data-peer]:is(:read-write, [data-read-write])), [data-peer]:is(:read-write, [data-read-write]) ~ &, &:has(~ .peer:is(:read-write, [data-read-write])), .peer:is(:read-write, [data-read-write]) ~ &, &:has(~ [data-peer] *:is(:read-write, [data-read-write])), [data-peer]:has(*:is(:read-write, [data-read-write])) ~ &, &:has(~ .peer *:is(:read-write, [data-read-write])), .peer:has(*:is(:read-write, [data-read-write])) ~ &` | | `_peerReject` | `&:has(~ [data-peer][data-reject]), [data-peer][data-reject] ~ &, &:has(~ .peer[data-reject]), .peer[data-reject] ~ &, &:has(~ [data-peer] *[data-reject]), [data-peer]:has(*[data-reject]) ~ &, &:has(~ .peer *[data-reject]), .peer:has(*[data-reject]) ~ &` | | `_peerRequired` | `&:has(~ [data-peer]:is(:required, [required])), [data-peer]:is(:required, [required]) ~ &, &:has(~ .peer:is(:required, [required])), .peer:is(:required, [required]) ~ &, &:has(~ [data-peer] *:is(:required, [required])), [data-peer]:has(*:is(:required, [required])) ~ &, &:has(~ .peer *:is(:required, [required])), .peer:has(*:is(:required, [required])) ~ &` | | `_peerSelected` | `&:has(~ [data-peer]:is([data-selected], [aria-selected=true])), [data-peer]:is([data-selected], [aria-selected=true]) ~ &, &:has(~ .peer:is([data-selected], [aria-selected=true])), .peer:is([data-selected], [aria-selected=true]) ~ &, &:has(~ [data-peer] *:is([data-selected], [aria-selected=true])), [data-peer]:has(*:is([data-selected], [aria-selected=true])) ~ &, &:has(~ .peer *:is([data-selected], [aria-selected=true])), .peer:has(*:is([data-selected], [aria-selected=true])) ~ &` | | `_peerUserInvalid` | `&:has(~ [data-peer]:is(:user-invalid, [data-user-invalid])), [data-peer]:is(:user-invalid, [data-user-invalid]) ~ &, &:has(~ .peer:is(:user-invalid, [data-user-invalid])), .peer:is(:user-invalid, [data-user-invalid]) ~ &, &:has(~ [data-peer] *:is(:user-invalid, [data-user-invalid])), [data-peer]:has(*:is(:user-invalid, [data-user-invalid])) ~ &, &:has(~ .peer *:is(:user-invalid, [data-user-invalid])), .peer:has(*:is(:user-invalid, [data-user-invalid])) ~ &` | | `_peerValid` | `&:has(~ [data-peer]:is(:valid, [data-valid])), [data-peer]:is(:valid, [data-valid]) ~ &, &:has(~ .peer:is(:valid, [data-valid])), .peer:is(:valid, [data-valid]) ~ &, &:has(~ [data-peer] *:is(:valid, [data-valid])), [data-peer]:has(*:is(:valid, [data-valid])) ~ &, &:has(~ .peer *:is(:valid, [data-valid])), .peer:has(*:is(:valid, [data-valid])) ~ &` | | `_peerVertical` | `&:has(~ [data-peer]:is([data-orientation=vertical], [aria-orientation=vertical])), [data-peer]:is([data-orientation=vertical], [aria-orientation=vertical]) ~ &, &:has(~ .peer:is([data-orientation=vertical], [aria-orientation=vertical])), .peer:is([data-orientation=vertical], [aria-orientation=vertical]) ~ &, &:has(~ [data-peer] *:is([data-orientation=vertical], [aria-orientation=vertical])), [data-peer]:has(*:is([data-orientation=vertical], [aria-orientation=vertical])) ~ &, &:has(~ .peer *:is([data-orientation=vertical], [aria-orientation=vertical])), .peer:has(*:is([data-orientation=vertical], [aria-orientation=vertical])) ~ &` | | `_pressed` | `&:is([data-pressed], [aria-pressed=true])` | | `_range` | `&:is([data-range])` | | `_reject` | `&[data-reject]` | | `_ripple` | `& .ui-ripple` | | `_rtl` | `[dir=rtl] &` | | `_selected` | `&:is([data-selected], [aria-selected=true])` | | `_start` | `&:is([data-start], [data-group-start])` | # 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 ```