Style Macro
The style macro supports a constrained set of values per property that conform to Spectrum 2.
Colors
All Spectrum 2 color tokens are available across color properties (e.g., backgroundColor, color, borderColor).
The color property supports the following values, in addition to the semantic and global colors. These colors are specifically chosen to be used as text colors, so prefer them over global colors where possible.
The following values are available across all color properties. Prefer to use semantic colors over global colors when they represent a specific meaning.
The following values are available across all color properties.
The backgroundColor property supports the following values, in addition to the semantic and global colors. These colors are specifically chosen to be used as backgrounds, so prefer them over global colors where possible.
The following values are available across all color properties. Prefer to use semantic colors over global colors when they represent a specific meaning.
The following values are available across all color properties.
Values
'negative' | 'disabled' | baseColorsbaseColors consists of the following values below:
The following values are available across all color properties. Prefer to use semantic colors over global colors when they represent a specific meaning.
The following values are available across all color properties.
Values
'focus-ring' | baseColorsbaseColors consists of the following values below:
The following values are available across all color properties. Prefer to use semantic colors over global colors when they represent a specific meaning.
The following values are available across all color properties.
Values
'none' | 'currentColor' | 'accent' | 'neutral' | 'negative' | 'informative' | 'positive' | 'notice' | 'gray' | 'red' | 'orange' | 'yellow' | 'chartreuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver' | baseColorsbaseColors consists of the following values below:
The following values are available across all color properties. Prefer to use semantic colors over global colors when they represent a specific meaning.
The following values are available across all color properties.
Values
'none' | 'currentColor' | baseColorsbaseColors consists of the following values below:
The following values are available across all color properties. Prefer to use semantic colors over global colors when they represent a specific meaning.
The following values are available across all color properties.
Dimensions
Values
baseSpacingbaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Values
'auto' | 'full' | number | LengthPercentagenumber
A numeric value in pixels e.g. 20. Will be converted to rem and scaled on touch devices.
LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'text-to-control' | 'text-to-visual' | 'edge-to-text' | 'pill' | baseSpacing'text-to-control'
Default spacing between text and a control (e.g., label and input). Scales with font size.
'text-to-visual'
Default spacing between text and a visual element (e.g., icon). Scales with font size.
'edge-to-text'
Default spacing between the edge of a control and its text. Relative to control height.
'pill'
Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
baseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Values
'text-to-control' | 'text-to-visual' | 'edge-to-text' | 'pill' | baseSpacing'text-to-control'
Default spacing between text and a control (e.g., label and input). Scales with font size.
'text-to-visual'
Default spacing between text and a visual element (e.g., icon). Scales with font size.
'edge-to-text'
Default spacing between the edge of a control and its text. Relative to control height.
'pill'
Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
baseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Values
'auto' | 'full' | 'min' | 'max' | 'fit' | 'screen' | number | LengthPercentagenumber
A numeric value in pixels e.g. 20. Will be converted to rem and scaled on touch devices.
LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'auto' | 'full' | 'min' | 'max' | 'fit' | 'screen' | number | LengthPercentagenumber
A numeric value in pixels e.g. 20. Will be converted to rem and scaled on touch devices.
LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'auto' | 'full' | 'min' | 'max' | 'fit' | 'screen' | number | LengthPercentagenumber
A numeric value in pixels e.g. 20. Will be converted to rem and scaled on touch devices.
LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'auto' | 'full' | 'min' | 'max' | 'fit' | 'screen' | number | LengthPercentagenumber
A numeric value in pixels e.g. 20. Will be converted to rem and scaled on touch devices.
LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'auto' | 'full' | 'min' | 'max' | 'fit' | 'screen' | number | LengthPercentagenumber
A numeric value in pixels e.g. 20. Will be converted to rem and scaled on touch devices.
LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'auto' | 'full' | 'min' | 'max' | 'fit' | 'screen' | 'none' | number | LengthPercentagenumber
A numeric value in pixels e.g. 20. Will be converted to rem and scaled on touch devices.
LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'auto' | 'full' | 'min' | 'max' | 'fit' | 'screen' | number | LengthPercentagenumber
A numeric value in pixels e.g. 20. Will be converted to rem and scaled on touch devices.
LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'auto' | 'full' | 'min' | 'max' | 'fit' | 'screen' | 'none' | number | LengthPercentagenumber
A numeric value in pixels e.g. 20. Will be converted to rem and scaled on touch devices.
LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'0' | '1' | '2' | '4'Values
'0' | '1' | '2' | '4'Values
'0' | '1' | '2' | '4'Values
'0' | '1' | '2' | '4'Values
'solid' | 'dashed' | 'dotted' | 'double' | 'hidden' | 'none'Values
'0' | '1' | '2'Values
'auto' | baseSpacing | negativeSpacing | LengthPercentagebaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'negativeSpacing
Negative spacing values in pixels, following a 4px grid. Will be converted to rem.
'-2' | '-4' | '-8' | '-12' | '-16' | '-20' | '-24' | '-28' | '-32' | '-36' | '-40' | '-44' | '-48' | '-56' | '-64' | '-80' | '-96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'auto' | baseSpacing | negativeSpacing | LengthPercentagebaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'negativeSpacing
Negative spacing values in pixels, following a 4px grid. Will be converted to rem.
'-2' | '-4' | '-8' | '-12' | '-16' | '-20' | '-24' | '-28' | '-32' | '-36' | '-40' | '-44' | '-48' | '-56' | '-64' | '-80' | '-96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'auto' | baseSpacing | negativeSpacing | LengthPercentagebaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'negativeSpacing
Negative spacing values in pixels, following a 4px grid. Will be converted to rem.
'-2' | '-4' | '-8' | '-12' | '-16' | '-20' | '-24' | '-28' | '-32' | '-36' | '-40' | '-44' | '-48' | '-56' | '-64' | '-80' | '-96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'auto' | baseSpacing | negativeSpacing | LengthPercentagebaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'negativeSpacing
Negative spacing values in pixels, following a 4px grid. Will be converted to rem.
'-2' | '-4' | '-8' | '-12' | '-16' | '-20' | '-24' | '-28' | '-32' | '-36' | '-40' | '-44' | '-48' | '-56' | '-64' | '-80' | '-96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'text-to-control' | 'text-to-visual' | 'edge-to-text' | 'pill' | baseSpacing | LengthPercentage'text-to-control'
Default spacing between text and a control (e.g., label and input). Scales with font size.
'text-to-visual'
Default spacing between text and a visual element (e.g., icon). Scales with font size.
'edge-to-text'
Default spacing between the edge of a control and its text. Relative to control height.
'pill'
Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
baseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'text-to-control' | 'text-to-visual' | 'edge-to-text' | 'pill' | baseSpacing | LengthPercentage'text-to-control'
Default spacing between text and a control (e.g., label and input). Scales with font size.
'text-to-visual'
Default spacing between text and a visual element (e.g., icon). Scales with font size.
'edge-to-text'
Default spacing between the edge of a control and its text. Relative to control height.
'pill'
Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
baseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'text-to-control' | 'text-to-visual' | 'edge-to-text' | 'pill' | baseSpacing | LengthPercentage'text-to-control'
Default spacing between text and a control (e.g., label and input). Scales with font size.
'text-to-visual'
Default spacing between text and a visual element (e.g., icon). Scales with font size.
'edge-to-text'
Default spacing between the edge of a control and its text. Relative to control height.
'pill'
Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
baseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'text-to-control' | 'text-to-visual' | 'edge-to-text' | 'pill' | baseSpacing | LengthPercentage'text-to-control'
Default spacing between text and a control (e.g., label and input). Scales with font size.
'text-to-visual'
Default spacing between text and a visual element (e.g., icon). Scales with font size.
'edge-to-text'
Default spacing between the edge of a control and its text. Relative to control height.
'pill'
Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
baseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
baseSpacingbaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Values
baseSpacingbaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Values
baseSpacingbaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Values
baseSpacingbaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Values
baseSpacingbaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Values
baseSpacingbaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Values
baseSpacingbaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Values
baseSpacingbaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Values
baseSpacing | LengthPercentagebaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'full' | baseSpacing | negativeSpacing | LengthPercentagebaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'negativeSpacing
Negative spacing values in pixels, following a 4px grid. Will be converted to rem.
'-2' | '-4' | '-8' | '-12' | '-16' | '-20' | '-24' | '-28' | '-32' | '-36' | '-40' | '-44' | '-48' | '-56' | '-64' | '-80' | '-96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'full' | baseSpacing | negativeSpacing | LengthPercentagebaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'negativeSpacing
Negative spacing values in pixels, following a 4px grid. Will be converted to rem.
'-2' | '-4' | '-8' | '-12' | '-16' | '-20' | '-24' | '-28' | '-32' | '-36' | '-40' | '-44' | '-48' | '-56' | '-64' | '-80' | '-96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
number | '${number}deg' | '${number}rad' | '${number}grad' | '${number}turn'Values
number | '${number}%'Values
number | '${number}%'Values
stringValues
'absolute' | 'fixed' | 'relative' | 'sticky' | 'static'Values
'auto' | 'full' | baseSpacing | negativeSpacing | LengthPercentagebaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'negativeSpacing
Negative spacing values in pixels, following a 4px grid. Will be converted to rem.
'-2' | '-4' | '-8' | '-12' | '-16' | '-20' | '-24' | '-28' | '-32' | '-36' | '-40' | '-44' | '-48' | '-56' | '-64' | '-80' | '-96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'auto' | 'full' | baseSpacing | negativeSpacing | LengthPercentagebaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'negativeSpacing
Negative spacing values in pixels, following a 4px grid. Will be converted to rem.
'-2' | '-4' | '-8' | '-12' | '-16' | '-20' | '-24' | '-28' | '-32' | '-36' | '-40' | '-44' | '-48' | '-56' | '-64' | '-80' | '-96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'auto' | 'full' | baseSpacing | negativeSpacing | LengthPercentagebaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'negativeSpacing
Negative spacing values in pixels, following a 4px grid. Will be converted to rem.
'-2' | '-4' | '-8' | '-12' | '-16' | '-20' | '-24' | '-28' | '-32' | '-36' | '-40' | '-44' | '-48' | '-56' | '-64' | '-80' | '-96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'auto' | 'full' | baseSpacing | negativeSpacing | LengthPercentagebaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'negativeSpacing
Negative spacing values in pixels, following a 4px grid. Will be converted to rem.
'-2' | '-4' | '-8' | '-12' | '-16' | '-20' | '-24' | '-28' | '-32' | '-36' | '-40' | '-44' | '-48' | '-56' | '-64' | '-80' | '-96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'auto' | 'full' | baseSpacing | negativeSpacing | LengthPercentagebaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'negativeSpacing
Negative spacing values in pixels, following a 4px grid. Will be converted to rem.
'-2' | '-4' | '-8' | '-12' | '-16' | '-20' | '-24' | '-28' | '-32' | '-36' | '-40' | '-44' | '-48' | '-56' | '-64' | '-80' | '-96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'auto' | 'full' | baseSpacing | negativeSpacing | LengthPercentagebaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'negativeSpacing
Negative spacing values in pixels, following a 4px grid. Will be converted to rem.
'-2' | '-4' | '-8' | '-12' | '-16' | '-20' | '-24' | '-28' | '-32' | '-36' | '-40' | '-44' | '-48' | '-56' | '-64' | '-80' | '-96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Values
'auto' | 'square' | 'video' | 'number / number'Text
Spectrum 2 typography can be applied via the font shorthand, which sets fontFamily, fontSize, fontWeight, lineHeight, and color. You can override any of these individually.
Note that font should be applied on a per element basis rather than globally so as to properly conform with Spectrum designs.
<main>
<h1 className={style({font: 'heading-xl'})}>Heading</h1>
<p className={style({font: 'body'})}>Body</p>
<ul className={style({font: 'body-sm', fontWeight: 'bold'})}>
<li>List item</li>
</ul>
</main>
Values
'sans' | 'serif' | 'code'Values
'ui-xs' | 'ui-sm' | 'ui' | 'ui-lg' | 'ui-xl' | 'ui-2xl' | 'ui-3xl' | 'heading-2xs' | 'heading-xs' | 'heading-sm' | 'heading' | 'heading-lg' | 'heading-xl' | 'heading-2xl' | 'heading-3xl' | 'title-xs' | 'title-sm' | 'title' | 'title-lg' | 'title-xl' | 'title-2xl' | 'title-3xl' | 'body-2xs' | 'body-xs' | 'body-sm' | 'body' | 'body-lg' | 'body-xl' | 'body-2xl' | 'body-3xl' | 'detail-sm' | 'detail' | 'detail-lg' | 'detail-xl' | 'code-xs' | 'code-sm' | 'code' | 'code-lg' | 'code-xl'There are several different type scales.
- UI – use within interactive UI components.
- Body – use for the content of pages that are primarily text.
- Heading – use for headings in content pages.
- Title – use for titles within UI components such as cards or panels.
- Detail – use for less important metadata.
- Code – use for source code.
Each type scale has a default size, and several t-shirt size modifiers for additional sizes.
- ui-xs
- ui-sm
- ui
- ui-lg
- ui-xl
- ui-2xl
- ui-3xl
- body-2xs
- body-xs
- body-sm
- body
- body-lg
- body-xl
- body-2xl
- body-3xl
- heading-2xs
- heading-xs
- heading-sm
- heading
- heading-lg
- heading-xl
- heading-2xl
- heading-3xl
- title-xs
- title-sm
- title
- title-lg
- title-xl
- title-2xl
- title-3xl
- detail-sm
- detail
- detail-lg
- detail-xl
- code-sm
- code
- code-lg
- code-xl
Values
'normal' | 'medium' | 'bold' | 'extra-bold' | 'black' | 'heading' | 'title' | 'detail'Values
'ui' | 'heading' | 'title' | 'body' | 'detail' | 'code''ui'
Use within interactive UI components.
'heading'
Use for headings in content pages.
'title'
Use for titles within UI components such as cards or panels.
'body'
Use for the content of pages that are primarily text.
'detail'
Use for less important metadata.
'code'
Use for source code.
Values
'none' | 'disc' | 'decimal'Values
'inside' | 'outside'Values
'uppercase' | 'lowercase' | 'capitalize' | 'none'Values
'start' | 'center' | 'end' | 'justify'Values
'baseline' | 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'sub' | 'super'Values
'none' | 'underline' | 'overline' | 'line-through'Values
'ellipsis' | 'clip'Values
numberValues
'none' | 'manual' | 'auto'Values
'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap' | 'break-spaces'Values
'wrap' | 'nowrap' | 'balance' | 'pretty'Values
'normal' | 'break-all' | 'keep-all' | 'break-word'Values
'normal' | 'anywhere' | 'break-word'Values
'slice' | 'clone'Effects
Values
'emphasized' | 'elevated' | 'dragged' | 'none'Values
'emphasized' | 'elevated' | 'dragged' | 'none'Values
'none' | 'sm' | 'default' | 'lg' | 'xl' | 'full' | 'pill''pill'
Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
Values
'none' | 'sm' | 'default' | 'lg' | 'xl' | 'full' | 'pill''pill'
Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
Values
'none' | 'sm' | 'default' | 'lg' | 'xl' | 'full' | 'pill''pill'
Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
Values
'none' | 'sm' | 'default' | 'lg' | 'xl' | 'full' | 'pill''pill'
Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
Values
'auto' | 'none'Values
'light' | 'dark' | 'light dark'Values
string | 'LinearGradient'Values
'bottom' | 'center' | 'left' | 'left bottom' | 'left top' | 'right' | 'right bottom' | 'right top' | 'top'Values
'auto' | 'cover' | 'contain'Values
'fixed' | 'local' | 'scroll'Values
'border-box' | 'padding-box' | 'content-box' | 'text'Values
'repeat' | 'no-repeat' | 'repeat-x' | 'repeat-y' | 'round' | 'space'Values
'border-box' | 'padding-box' | 'content-box'Values
'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity'Values
'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity' | 'plus-darker' | 'plus-lighter'Values
numberValues
'none' | 'solid' | 'dashed' | 'dotted' | 'double' | 'inset'Values
numberValues
'0' | '1' | '2' | '4'Values
'default' | 'colors' | 'opacity' | 'shadow' | 'transform' | 'all' | 'none'Values
'default' | 'linear' | 'in' | 'out' | 'in-out'Values
stringValues
'normal' | 'reverse' | 'alternate' | 'alternate-reverse'Values
'none' | 'forwards' | 'backwards' | 'both'Values
'default' | 'linear' | 'in' | 'out' | 'in-out'Values
'paused' | 'running'Layout
Values
'block' | 'inline-block' | 'inline' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'contents' | 'list-item' | 'none'Values
'normal' | 'center' | 'start' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | 'baseline' | 'stretch'Values
'start' | 'end' | 'center' | 'baseline' | 'stretch'Values
'normal' | 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch'Values
'start' | 'end' | 'center' | 'stretch'Values
'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline'Values
'auto' | 'start' | 'end' | 'center' | 'stretch'Values
'row' | 'column' | 'row-reverse' | 'column-reverse'Values
'wrap' | 'wrap-reverse' | 'nowrap'Values
numberValues
numberValues
stringValues
stringValues
stringValues
stringValues
'row' | 'column' | 'dense' | 'row dense' | 'column dense'Values
'auto' | 'min-content' | 'max-content' | '${number}fr' | 'minmax(${string}, ${string})' | string | baseSpacingbaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Values
'auto' | 'min-content' | 'max-content' | '${number}fr' | 'minmax(${string}, ${string})' | string | baseSpacingbaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Values
'auto' | 'min-content' | 'max-content' | '${number}fr' | 'minmax(${string}, ${string})' | 'none' | 'subgrid' | string | baseSpacingbaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Values
'auto' | 'min-content' | 'max-content' | '${number}fr' | 'minmax(${string}, ${string})' | 'none' | 'subgrid' | string | baseSpacingbaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Values
'string[]'Values
'inline-start' | 'inline-end' | 'right' | 'left' | 'none'Values
'inline-start' | 'inline-end' | 'left' | 'right' | 'both' | 'none'Values
'none' | 'strict' | 'content' | 'size' | 'inline-size' | 'layout' | 'style' | 'paint'Values
'border-box' | 'content-box'Values
'auto' | 'fixed'Values
'top' | 'bottom'Values
'collapse' | 'separate'Values
'auto' | 'avoid' | 'all' | 'avoid-page' | 'page' | 'left' | 'right' | 'column'Values
'auto' | 'avoid' | 'avoid-page' | 'avoid-column'Values
'auto' | 'avoid' | 'all' | 'avoid-page' | 'page' | 'left' | 'right' | 'column'Values
'auto' | 'hidden' | 'clip' | 'visible' | 'scroll'Values
'auto' | 'hidden' | 'clip' | 'visible' | 'scroll'Values
'auto' | 'contain' | 'none'Values
'auto' | 'contain' | 'none'Values
'auto' | 'smooth'Values
numberMisc
Values
'none' | 'auto'Values
'auto' | 'none' | 'pan-x' | 'pan-y' | 'manipulation' | 'pinch-zoom'Values
'none' | 'text' | 'all' | 'auto'Values
'visible' | 'hidden' | 'collapse'Values
'isolate' | 'auto'Values
'center' | 'top' | 'top right' | 'right' | 'bottom right' | 'bottom' | 'bottom left' | 'left' | 'top right'Values
'auto' | 'default' | 'pointer' | 'wait' | 'text' | 'move' | 'help' | 'not-allowed' | 'none' | 'context-menu' | 'progress' | 'cell' | 'crosshair' | 'vertical-text' | 'alias' | 'copy' | 'no-drop' | 'grab' | 'grabbing' | 'all-scroll' | 'col-resize' | 'row-resize' | 'n-resize' | 'e-resize' | 's-resize' | 'w-resize' | 'ne-resize' | 'nw-resize' | 'se-resize' | 'ew-resize' | 'ns-resize' | 'nesw-resize' | 'nwse-resize' | 'zoom-in' | 'zoom-out'Values
'none' | 'vertical' | 'horizontal' | 'both'Values
'x' | 'y' | 'both' | 'x mandatory' | 'y mandatory' | 'both mandatory'Values
'start' | 'end' | 'center' | 'none'Values
'normal' | 'always'Values
'none' | 'auto'Values
'contain' | 'cover' | 'fill' | 'none' | 'scale-down'Values
'bottom' | 'center' | 'left' | 'left bottom' | 'left top' | 'right' | 'right bottom' | 'right top' | 'top'Values
'auto' | 'scroll-position' | 'contents' | 'transform'Values
numberValues
'true'Values
'normal' | 'embed' | 'bidi-override' | 'isolate' | 'isolate-override' | 'plaintext'Values
'auto' | 'transparent'Shorthands
Shorthands apply their provided value to commonly grouped properties.
Values
'text-to-control' | 'text-to-visual' | 'edge-to-text' | 'pill' | baseSpacing | LengthPercentage'text-to-control'
Default spacing between text and a control (e.g., label and input). Scales with font size.
'text-to-visual'
Default spacing between text and a visual element (e.g., icon). Scales with font size.
'edge-to-text'
Default spacing between the edge of a control and its text. Relative to control height.
'pill'
Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
baseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Maps to
paddingTop, paddingBottom, paddingStart, paddingEndValues
'text-to-control' | 'text-to-visual' | 'edge-to-text' | 'pill' | baseSpacing | LengthPercentage'text-to-control'
Default spacing between text and a control (e.g., label and input). Scales with font size.
'text-to-visual'
Default spacing between text and a visual element (e.g., icon). Scales with font size.
'edge-to-text'
Default spacing between the edge of a control and its text. Relative to control height.
'pill'
Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
baseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Maps to
paddingStart, paddingEndValues
'text-to-control' | 'text-to-visual' | 'edge-to-text' | 'pill' | baseSpacing | LengthPercentage'text-to-control'
Default spacing between text and a control (e.g., label and input). Scales with font size.
'text-to-visual'
Default spacing between text and a visual element (e.g., icon). Scales with font size.
'edge-to-text'
Default spacing between the edge of a control and its text. Relative to control height.
'pill'
Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
baseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Maps to
paddingTop, paddingBottomValues
'auto' | baseSpacing | negativeSpacing | LengthPercentagebaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'negativeSpacing
Negative spacing values in pixels, following a 4px grid. Will be converted to rem.
'-2' | '-4' | '-8' | '-12' | '-16' | '-20' | '-24' | '-28' | '-32' | '-36' | '-40' | '-44' | '-48' | '-56' | '-64' | '-80' | '-96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Maps to
marginTop, marginBottom, marginStart, marginEndValues
'auto' | baseSpacing | negativeSpacing | LengthPercentagebaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'negativeSpacing
Negative spacing values in pixels, following a 4px grid. Will be converted to rem.
'-2' | '-4' | '-8' | '-12' | '-16' | '-20' | '-24' | '-28' | '-32' | '-36' | '-40' | '-44' | '-48' | '-56' | '-64' | '-80' | '-96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Maps to
marginStart, marginEndValues
'auto' | baseSpacing | negativeSpacing | LengthPercentagebaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'negativeSpacing
Negative spacing values in pixels, following a 4px grid. Will be converted to rem.
'-2' | '-4' | '-8' | '-12' | '-16' | '-20' | '-24' | '-28' | '-32' | '-36' | '-40' | '-44' | '-48' | '-56' | '-64' | '-80' | '-96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Maps to
marginTop, marginBottomValues
baseSpacingbaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Maps to
scrollPaddingTop, scrollPaddingBottom, scrollPaddingStart, scrollPaddingEndValues
baseSpacingbaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Maps to
scrollPaddingStart, scrollPaddingEndValues
baseSpacingbaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Maps to
scrollPaddingTop, scrollPaddingBottomValues
baseSpacingbaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Maps to
scrollMarginTop, scrollMarginBottom, scrollMarginStart, scrollMarginEndValues
baseSpacingbaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Maps to
scrollMarginStart, scrollMarginEndValues
baseSpacingbaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Maps to
scrollMarginTop, scrollMarginBottomValues
'0' | '1' | '2' | '4'Maps to
borderTopWidth, borderBottomWidth, borderStartWidth, borderEndWidthValues
'0' | '1' | '2' | '4'Maps to
borderStartWidth, borderEndWidthValues
'0' | '1' | '2' | '4'Maps to
borderTopWidth, borderBottomWidthValues
'none' | 'sm' | 'default' | 'lg' | 'xl' | 'full' | 'pill''pill'
Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
Maps to
borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadiusValues
'none' | 'sm' | 'default' | 'lg' | 'xl' | 'full' | 'pill''pill'
Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
Maps to
borderTopStartRadius, borderTopEndRadiusValues
'none' | 'sm' | 'default' | 'lg' | 'xl' | 'full' | 'pill''pill'
Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
Maps to
borderBottomStartRadius, borderBottomEndRadiusValues
'none' | 'sm' | 'default' | 'lg' | 'xl' | 'full' | 'pill''pill'
Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
Maps to
borderTopStartRadius, borderBottomStartRadiusValues
'none' | 'sm' | 'default' | 'lg' | 'xl' | 'full' | 'pill''pill'
Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
Maps to
borderTopEndRadius, borderBottomEndRadiusValues
'full' | baseSpacing | negativeSpacing | LengthPercentagebaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'negativeSpacing
Negative spacing values in pixels, following a 4px grid. Will be converted to rem.
'-2' | '-4' | '-8' | '-12' | '-16' | '-20' | '-24' | '-28' | '-32' | '-36' | '-40' | '-44' | '-48' | '-56' | '-64' | '-80' | '-96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Maps to
translateX, translateYValues
'auto' | 'full' | baseSpacing | negativeSpacing | LengthPercentagebaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'negativeSpacing
Negative spacing values in pixels, following a 4px grid. Will be converted to rem.
'-2' | '-4' | '-8' | '-12' | '-16' | '-20' | '-24' | '-28' | '-32' | '-36' | '-40' | '-44' | '-48' | '-56' | '-64' | '-80' | '-96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Maps to
top, bottom, insetStart, insetEndValues
'auto' | 'full' | baseSpacing | negativeSpacing | LengthPercentagebaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'negativeSpacing
Negative spacing values in pixels, following a 4px grid. Will be converted to rem.
'-2' | '-4' | '-8' | '-12' | '-16' | '-20' | '-24' | '-28' | '-32' | '-36' | '-40' | '-44' | '-48' | '-56' | '-64' | '-80' | '-96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Maps to
insetStart, insetEndValues
'auto' | 'full' | baseSpacing | negativeSpacing | LengthPercentagebaseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'negativeSpacing
Negative spacing values in pixels, following a 4px grid. Will be converted to rem.
'-2' | '-4' | '-8' | '-12' | '-16' | '-20' | '-24' | '-28' | '-32' | '-36' | '-40' | '-44' | '-48' | '-56' | '-64' | '-80' | '-96'LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Maps to
top, bottomValues
'start' | 'end' | 'center' | 'stretch'Maps to
alignItems, justifyItemsValues
'normal' | 'center' | 'start' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | 'baseline' | 'stretch'Maps to
alignContent, justifyContentValues
'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline'Maps to
alignSelf, justifySelfValues
'text-to-control' | 'text-to-visual' | 'edge-to-text' | 'pill' | baseSpacing'text-to-control'
Default spacing between text and a control (e.g., label and input). Scales with font size.
'text-to-visual'
Default spacing between text and a visual element (e.g., icon). Scales with font size.
'edge-to-text'
Default spacing between the edge of a control and its text. Relative to control height.
'pill'
Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
baseSpacing
Base spacing values in pixels, following a 4px grid. Will be converted to rem.
'0' | '2' | '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40' | '44' | '48' | '56' | '64' | '80' | '96'Maps to
rowGap, columnGapValues
'auto' | 'full' | 'min' | 'max' | 'fit' | 'screen' | number | LengthPercentagenumber
A numeric value in pixels e.g. 20. Will be converted to rem and scaled on touch devices.
LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Maps to
width, heightValues
'auto' | 'full' | 'min' | 'max' | 'fit' | 'screen' | number | LengthPercentagenumber
A numeric value in pixels e.g. 20. Will be converted to rem and scaled on touch devices.
LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Maps to
minWidth, minHeightValues
'auto' | 'full' | 'min' | 'max' | 'fit' | 'screen' | 'none' | number | LengthPercentagenumber
A numeric value in pixels e.g. 20. Will be converted to rem and scaled on touch devices.
LengthPercentage
A CSS length value with percentage or viewport units. e.g. '50%', '100vw', '50vh'
Maps to
maxWidth, maxHeightValues
'auto' | 'hidden' | 'clip' | 'visible' | 'scroll'Maps to
overflowX, overflowYValues
'auto' | 'contain' | 'none'Maps to
overscrollBehaviorX, overscrollBehaviorYValues
stringMaps to
gridColumnStart, gridColumnEnd, gridRowStart, gridRowEndValues
'default' | 'colors' | 'opacity' | 'shadow' | 'transform' | 'all' | 'none'Maps to
transition, transitionDuration, transitionTimingFunctionValues
stringMaps to
animation, animationDuration, animationTimingFunctionValues
'true'Maps to
overflowX, overflowY, textOverflow, whiteSpaceValues
'ui-xs' | 'ui-sm' | 'ui' | 'ui-lg' | 'ui-xl' | 'ui-2xl' | 'ui-3xl' | 'heading-2xs' | 'heading-xs' | 'heading-sm' | 'heading' | 'heading-lg' | 'heading-xl' | 'heading-2xl' | 'heading-3xl' | 'title-xs' | 'title-sm' | 'title' | 'title-lg' | 'title-xl' | 'title-2xl' | 'title-3xl' | 'body-2xs' | 'body-xs' | 'body-sm' | 'body' | 'body-lg' | 'body-xl' | 'body-2xl' | 'body-3xl' | 'detail-sm' | 'detail' | 'detail-lg' | 'detail-xl' | 'code-xs' | 'code-sm' | 'code' | 'code-lg' | 'code-xl'There are several different type scales.
- UI – use within interactive UI components.
- Body – use for the content of pages that are primarily text.
- Heading – use for headings in content pages.
- Title – use for titles within UI components such as cards or panels.
- Detail – use for less important metadata.
- Code – use for source code.
Each type scale has a default size, and several t-shirt size modifiers for additional sizes.
- ui-xs
- ui-sm
- ui
- ui-lg
- ui-xl
- ui-2xl
- ui-3xl
- body-2xs
- body-xs
- body-sm
- body
- body-lg
- body-xl
- body-2xl
- body-3xl
- heading-2xs
- heading-xs
- heading-sm
- heading
- heading-lg
- heading-xl
- heading-2xl
- heading-3xl
- title-xs
- title-sm
- title
- title-lg
- title-xl
- title-2xl
- title-3xl
- detail-sm
- detail
- detail-lg
- detail-xl
- code-sm
- code
- code-lg
- code-xl
Maps to
fontFamily, fontSize, fontWeight, lineHeight, colorConditions
Values
'@media (forced-colors: active)'Values
'@media not ((hover: hover) and (pointer: fine))'Values
'@media (min-width: ${pxToRem(640)})'Values
'@media (min-width: ${pxToRem(768)})'Values
'@media (min-width: ${pxToRem(1024)})'Values
'@media (min-width: ${pxToRem(1280)})'Values
'@media (min-width: ${pxToRem(1536)})'