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).
Values
black
white
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.
base
layer-1
layer-2
pasteboard
elevated
accent
accent-subtle
neutral
neutral-subdued
neutral-subtle
negative
negative-subtle
informative
informative-subtle
positive
positive-subtle
notice
notice-subtle
gray
gray-subtle
red
red-subtle
orange
orange-subtle
yellow
yellow-subtle
chartreuse
chartreuse-subtle
celery
celery-subtle
green
green-subtle
seafoam
seafoam-subtle
cyan
cyan-subtle
blue
blue-subtle
indigo
indigo-subtle
purple
purple-subtle
fuchsia
fuchsia-subtle
magenta
magenta-subtle
pink
pink-subtle
turquoise
turquoise-subtle
cinnamon
cinnamon-subtle
brown
brown-subtle
silver
silver-subtle
disabled
The following values are available across all color properties. Prefer to use semantic colors over global colors when they represent a specific meaning.
accent-100
accent-200
accent-300
accent-400
accent-500
accent-600
accent-700
accent-800
accent-900
accent-1000
accent-1100
accent-1200
accent-1300
accent-1400
accent-1500
accent-1600
informative-100
informative-200
informative-300
informative-400
informative-500
informative-600
informative-700
informative-800
informative-900
informative-1000
informative-1100
informative-1200
informative-1300
informative-1400
informative-1500
informative-1600
negative-100
negative-200
negative-300
negative-400
negative-500
negative-600
negative-700
negative-800
negative-900
negative-1000
negative-1100
negative-1200
negative-1300
negative-1400
negative-1500
negative-1600
notice-100
notice-200
notice-300
notice-400
notice-500
notice-600
notice-700
notice-800
notice-900
notice-1000
notice-1100
notice-1200
notice-1300
notice-1400
notice-1500
notice-1600
positive-100
positive-200
positive-300
positive-400
positive-500
positive-600
positive-700
positive-800
positive-900
positive-1000
positive-1100
positive-1200
positive-1300
positive-1400
positive-1500
positive-1600
The following values are available across all color properties.
gray-25
gray-50
gray-75
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
gray-1000
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
blue-1000
blue-1100
blue-1200
blue-1300
blue-1400
blue-1500
blue-1600
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
red-1000
red-1100
red-1200
red-1300
red-1400
red-1500
red-1600
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
orange-1000
orange-1100
orange-1200
orange-1300
orange-1400
orange-1500
orange-1600
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
yellow-1000
yellow-1100
yellow-1200
yellow-1300
yellow-1400
yellow-1500
yellow-1600
chartreuse-100
chartreuse-200
chartreuse-300
chartreuse-400
chartreuse-500
chartreuse-600
chartreuse-700
chartreuse-800
chartreuse-900
chartreuse-1000
chartreuse-1100
chartreuse-1200
chartreuse-1300
chartreuse-1400
chartreuse-1500
chartreuse-1600
celery-100
celery-200
celery-300
celery-400
celery-500
celery-600
celery-700
celery-800
celery-900
celery-1000
celery-1100
celery-1200
celery-1300
celery-1400
celery-1500
celery-1600
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
green-1000
green-1100
green-1200
green-1300
green-1400
green-1500
green-1600
seafoam-100
seafoam-200
seafoam-300
seafoam-400
seafoam-500
seafoam-600
seafoam-700
seafoam-800
seafoam-900
seafoam-1000
seafoam-1100
seafoam-1200
seafoam-1300
seafoam-1400
seafoam-1500
seafoam-1600
cyan-100
cyan-200
cyan-300
cyan-400
cyan-500
cyan-600
cyan-700
cyan-800
cyan-900
cyan-1000
cyan-1100
cyan-1200
cyan-1300
cyan-1400
cyan-1500
cyan-1600
indigo-100
indigo-200
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
indigo-900
indigo-1000
indigo-1100
indigo-1200
indigo-1300
indigo-1400
indigo-1500
indigo-1600
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
purple-1000
purple-1100
purple-1200
purple-1300
purple-1400
purple-1500
purple-1600
fuchsia-100
fuchsia-200
fuchsia-300
fuchsia-400
fuchsia-500
fuchsia-600
fuchsia-700
fuchsia-800
fuchsia-900
fuchsia-1000
fuchsia-1100
fuchsia-1200
fuchsia-1300
fuchsia-1400
fuchsia-1500
fuchsia-1600
magenta-100
magenta-200
magenta-300
magenta-400
magenta-500
magenta-600
magenta-700
magenta-800
magenta-900
magenta-1000
magenta-1100
magenta-1200
magenta-1300
magenta-1400
magenta-1500
magenta-1600
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900
pink-1000
pink-1100
pink-1200
pink-1300
pink-1400
pink-1500
pink-1600
turquoise-100
turquoise-200
turquoise-300
turquoise-400
turquoise-500
turquoise-600
turquoise-700
turquoise-800
turquoise-900
turquoise-1000
turquoise-1100
turquoise-1200
turquoise-1300
turquoise-1400
turquoise-1500
turquoise-1600
brown-100
brown-200
brown-300
brown-400
brown-500
brown-600
brown-700
brown-800
brown-900
brown-1000
brown-1100
brown-1200
brown-1300
brown-1400
brown-1500
brown-1600
silver-100
silver-200
silver-300
silver-400
silver-500
silver-600
silver-700
silver-800
silver-900
silver-1000
silver-1100
silver-1200
silver-1300
silver-1400
silver-1500
silver-1600
cinnamon-100
cinnamon-200
cinnamon-300
cinnamon-400
cinnamon-500
cinnamon-600
cinnamon-700
cinnamon-800
cinnamon-900
cinnamon-1000
cinnamon-1100
cinnamon-1200
cinnamon-1300
cinnamon-1400
cinnamon-1500
cinnamon-1600
These colors are useful for overlays or transparent effects.
transparent
transparent-white-25
transparent-white-50
transparent-white-75
transparent-white-100
transparent-white-200
transparent-white-300
transparent-white-400
transparent-white-500
transparent-white-600
transparent-white-700
transparent-white-800
transparent-white-900
transparent-white-1000
transparent-black-25
transparent-black-50
transparent-black-75
transparent-black-100
transparent-black-200
transparent-black-300
transparent-black-400
transparent-black-500
transparent-black-600
transparent-black-700
transparent-black-800
transparent-black-900
transparent-black-1000
transparent-overlay-25
transparent-overlay-50
transparent-overlay-75
transparent-overlay-100
transparent-overlay-200
transparent-overlay-300
transparent-overlay-400
transparent-overlay-500
transparent-overlay-600
transparent-overlay-700
transparent-overlay-800
transparent-overlay-900
transparent-overlay-1000
These colors map to system colors when forced colors mode is active.
BackgroundButtonBorderButtonFaceButtonTextFieldHighlightHighlightTextGrayTextMarkLinkText
Values
black
white
negative
disabled
The following values are available across all color properties. Prefer to use semantic colors over global colors when they represent a specific meaning.
accent-100
accent-200
accent-300
accent-400
accent-500
accent-600
accent-700
accent-800
accent-900
accent-1000
accent-1100
accent-1200
accent-1300
accent-1400
accent-1500
accent-1600
informative-100
informative-200
informative-300
informative-400
informative-500
informative-600
informative-700
informative-800
informative-900
informative-1000
informative-1100
informative-1200
informative-1300
informative-1400
informative-1500
informative-1600
negative-100
negative-200
negative-300
negative-400
negative-500
negative-600
negative-700
negative-800
negative-900
negative-1000
negative-1100
negative-1200
negative-1300
negative-1400
negative-1500
negative-1600
notice-100
notice-200
notice-300
notice-400
notice-500
notice-600
notice-700
notice-800
notice-900
notice-1000
notice-1100
notice-1200
notice-1300
notice-1400
notice-1500
notice-1600
positive-100
positive-200
positive-300
positive-400
positive-500
positive-600
positive-700
positive-800
positive-900
positive-1000
positive-1100
positive-1200
positive-1300
positive-1400
positive-1500
positive-1600
The following values are available across all color properties.
gray-25
gray-50
gray-75
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
gray-1000
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
blue-1000
blue-1100
blue-1200
blue-1300
blue-1400
blue-1500
blue-1600
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
red-1000
red-1100
red-1200
red-1300
red-1400
red-1500
red-1600
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
orange-1000
orange-1100
orange-1200
orange-1300
orange-1400
orange-1500
orange-1600
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
yellow-1000
yellow-1100
yellow-1200
yellow-1300
yellow-1400
yellow-1500
yellow-1600
chartreuse-100
chartreuse-200
chartreuse-300
chartreuse-400
chartreuse-500
chartreuse-600
chartreuse-700
chartreuse-800
chartreuse-900
chartreuse-1000
chartreuse-1100
chartreuse-1200
chartreuse-1300
chartreuse-1400
chartreuse-1500
chartreuse-1600
celery-100
celery-200
celery-300
celery-400
celery-500
celery-600
celery-700
celery-800
celery-900
celery-1000
celery-1100
celery-1200
celery-1300
celery-1400
celery-1500
celery-1600
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
green-1000
green-1100
green-1200
green-1300
green-1400
green-1500
green-1600
seafoam-100
seafoam-200
seafoam-300
seafoam-400
seafoam-500
seafoam-600
seafoam-700
seafoam-800
seafoam-900
seafoam-1000
seafoam-1100
seafoam-1200
seafoam-1300
seafoam-1400
seafoam-1500
seafoam-1600
cyan-100
cyan-200
cyan-300
cyan-400
cyan-500
cyan-600
cyan-700
cyan-800
cyan-900
cyan-1000
cyan-1100
cyan-1200
cyan-1300
cyan-1400
cyan-1500
cyan-1600
indigo-100
indigo-200
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
indigo-900
indigo-1000
indigo-1100
indigo-1200
indigo-1300
indigo-1400
indigo-1500
indigo-1600
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
purple-1000
purple-1100
purple-1200
purple-1300
purple-1400
purple-1500
purple-1600
fuchsia-100
fuchsia-200
fuchsia-300
fuchsia-400
fuchsia-500
fuchsia-600
fuchsia-700
fuchsia-800
fuchsia-900
fuchsia-1000
fuchsia-1100
fuchsia-1200
fuchsia-1300
fuchsia-1400
fuchsia-1500
fuchsia-1600
magenta-100
magenta-200
magenta-300
magenta-400
magenta-500
magenta-600
magenta-700
magenta-800
magenta-900
magenta-1000
magenta-1100
magenta-1200
magenta-1300
magenta-1400
magenta-1500
magenta-1600
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900
pink-1000
pink-1100
pink-1200
pink-1300
pink-1400
pink-1500
pink-1600
turquoise-100
turquoise-200
turquoise-300
turquoise-400
turquoise-500
turquoise-600
turquoise-700
turquoise-800
turquoise-900
turquoise-1000
turquoise-1100
turquoise-1200
turquoise-1300
turquoise-1400
turquoise-1500
turquoise-1600
brown-100
brown-200
brown-300
brown-400
brown-500
brown-600
brown-700
brown-800
brown-900
brown-1000
brown-1100
brown-1200
brown-1300
brown-1400
brown-1500
brown-1600
silver-100
silver-200
silver-300
silver-400
silver-500
silver-600
silver-700
silver-800
silver-900
silver-1000
silver-1100
silver-1200
silver-1300
silver-1400
silver-1500
silver-1600
cinnamon-100
cinnamon-200
cinnamon-300
cinnamon-400
cinnamon-500
cinnamon-600
cinnamon-700
cinnamon-800
cinnamon-900
cinnamon-1000
cinnamon-1100
cinnamon-1200
cinnamon-1300
cinnamon-1400
cinnamon-1500
cinnamon-1600
These colors are useful for overlays or transparent effects.
transparent
transparent-white-25
transparent-white-50
transparent-white-75
transparent-white-100
transparent-white-200
transparent-white-300
transparent-white-400
transparent-white-500
transparent-white-600
transparent-white-700
transparent-white-800
transparent-white-900
transparent-white-1000
transparent-black-25
transparent-black-50
transparent-black-75
transparent-black-100
transparent-black-200
transparent-black-300
transparent-black-400
transparent-black-500
transparent-black-600
transparent-black-700
transparent-black-800
transparent-black-900
transparent-black-1000
transparent-overlay-25
transparent-overlay-50
transparent-overlay-75
transparent-overlay-100
transparent-overlay-200
transparent-overlay-300
transparent-overlay-400
transparent-overlay-500
transparent-overlay-600
transparent-overlay-700
transparent-overlay-800
transparent-overlay-900
transparent-overlay-1000
These colors map to system colors when forced colors mode is active.
BackgroundButtonBorderButtonFaceButtonTextFieldHighlightHighlightTextGrayTextMarkLinkText
Values
black
white
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.
accent
neutral
neutral-subdued
negative
disabled
heading
title
body
detail
code
The following values are available across all color properties. Prefer to use semantic colors over global colors when they represent a specific meaning.
accent-100
accent-200
accent-300
accent-400
accent-500
accent-600
accent-700
accent-800
accent-900
accent-1000
accent-1100
accent-1200
accent-1300
accent-1400
accent-1500
accent-1600
informative-100
informative-200
informative-300
informative-400
informative-500
informative-600
informative-700
informative-800
informative-900
informative-1000
informative-1100
informative-1200
informative-1300
informative-1400
informative-1500
informative-1600
negative-100
negative-200
negative-300
negative-400
negative-500
negative-600
negative-700
negative-800
negative-900
negative-1000
negative-1100
negative-1200
negative-1300
negative-1400
negative-1500
negative-1600
notice-100
notice-200
notice-300
notice-400
notice-500
notice-600
notice-700
notice-800
notice-900
notice-1000
notice-1100
notice-1200
notice-1300
notice-1400
notice-1500
notice-1600
positive-100
positive-200
positive-300
positive-400
positive-500
positive-600
positive-700
positive-800
positive-900
positive-1000
positive-1100
positive-1200
positive-1300
positive-1400
positive-1500
positive-1600
The following values are available across all color properties.
gray-25
gray-50
gray-75
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
gray-1000
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
blue-1000
blue-1100
blue-1200
blue-1300
blue-1400
blue-1500
blue-1600
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
red-1000
red-1100
red-1200
red-1300
red-1400
red-1500
red-1600
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
orange-1000
orange-1100
orange-1200
orange-1300
orange-1400
orange-1500
orange-1600
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
yellow-1000
yellow-1100
yellow-1200
yellow-1300
yellow-1400
yellow-1500
yellow-1600
chartreuse-100
chartreuse-200
chartreuse-300
chartreuse-400
chartreuse-500
chartreuse-600
chartreuse-700
chartreuse-800
chartreuse-900
chartreuse-1000
chartreuse-1100
chartreuse-1200
chartreuse-1300
chartreuse-1400
chartreuse-1500
chartreuse-1600
celery-100
celery-200
celery-300
celery-400
celery-500
celery-600
celery-700
celery-800
celery-900
celery-1000
celery-1100
celery-1200
celery-1300
celery-1400
celery-1500
celery-1600
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
green-1000
green-1100
green-1200
green-1300
green-1400
green-1500
green-1600
seafoam-100
seafoam-200
seafoam-300
seafoam-400
seafoam-500
seafoam-600
seafoam-700
seafoam-800
seafoam-900
seafoam-1000
seafoam-1100
seafoam-1200
seafoam-1300
seafoam-1400
seafoam-1500
seafoam-1600
cyan-100
cyan-200
cyan-300
cyan-400
cyan-500
cyan-600
cyan-700
cyan-800
cyan-900
cyan-1000
cyan-1100
cyan-1200
cyan-1300
cyan-1400
cyan-1500
cyan-1600
indigo-100
indigo-200
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
indigo-900
indigo-1000
indigo-1100
indigo-1200
indigo-1300
indigo-1400
indigo-1500
indigo-1600
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
purple-1000
purple-1100
purple-1200
purple-1300
purple-1400
purple-1500
purple-1600
fuchsia-100
fuchsia-200
fuchsia-300
fuchsia-400
fuchsia-500
fuchsia-600
fuchsia-700
fuchsia-800
fuchsia-900
fuchsia-1000
fuchsia-1100
fuchsia-1200
fuchsia-1300
fuchsia-1400
fuchsia-1500
fuchsia-1600
magenta-100
magenta-200
magenta-300
magenta-400
magenta-500
magenta-600
magenta-700
magenta-800
magenta-900
magenta-1000
magenta-1100
magenta-1200
magenta-1300
magenta-1400
magenta-1500
magenta-1600
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900
pink-1000
pink-1100
pink-1200
pink-1300
pink-1400
pink-1500
pink-1600
turquoise-100
turquoise-200
turquoise-300
turquoise-400
turquoise-500
turquoise-600
turquoise-700
turquoise-800
turquoise-900
turquoise-1000
turquoise-1100
turquoise-1200
turquoise-1300
turquoise-1400
turquoise-1500
turquoise-1600
brown-100
brown-200
brown-300
brown-400
brown-500
brown-600
brown-700
brown-800
brown-900
brown-1000
brown-1100
brown-1200
brown-1300
brown-1400
brown-1500
brown-1600
silver-100
silver-200
silver-300
silver-400
silver-500
silver-600
silver-700
silver-800
silver-900
silver-1000
silver-1100
silver-1200
silver-1300
silver-1400
silver-1500
silver-1600
cinnamon-100
cinnamon-200
cinnamon-300
cinnamon-400
cinnamon-500
cinnamon-600
cinnamon-700
cinnamon-800
cinnamon-900
cinnamon-1000
cinnamon-1100
cinnamon-1200
cinnamon-1300
cinnamon-1400
cinnamon-1500
cinnamon-1600
These colors are useful for overlays or transparent effects.
transparent
transparent-white-25
transparent-white-50
transparent-white-75
transparent-white-100
transparent-white-200
transparent-white-300
transparent-white-400
transparent-white-500
transparent-white-600
transparent-white-700
transparent-white-800
transparent-white-900
transparent-white-1000
transparent-black-25
transparent-black-50
transparent-black-75
transparent-black-100
transparent-black-200
transparent-black-300
transparent-black-400
transparent-black-500
transparent-black-600
transparent-black-700
transparent-black-800
transparent-black-900
transparent-black-1000
transparent-overlay-25
transparent-overlay-50
transparent-overlay-75
transparent-overlay-100
transparent-overlay-200
transparent-overlay-300
transparent-overlay-400
transparent-overlay-500
transparent-overlay-600
transparent-overlay-700
transparent-overlay-800
transparent-overlay-900
transparent-overlay-1000
These colors map to system colors when forced colors mode is active.
BackgroundButtonBorderButtonFaceButtonTextFieldHighlightHighlightTextGrayTextMarkLinkText
Values
'none'currentColor
black
white
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
The following values are available across all color properties. Prefer to use semantic colors over global colors when they represent a specific meaning.
accent-100
accent-200
accent-300
accent-400
accent-500
accent-600
accent-700
accent-800
accent-900
accent-1000
accent-1100
accent-1200
accent-1300
accent-1400
accent-1500
accent-1600
informative-100
informative-200
informative-300
informative-400
informative-500
informative-600
informative-700
informative-800
informative-900
informative-1000
informative-1100
informative-1200
informative-1300
informative-1400
informative-1500
informative-1600
negative-100
negative-200
negative-300
negative-400
negative-500
negative-600
negative-700
negative-800
negative-900
negative-1000
negative-1100
negative-1200
negative-1300
negative-1400
negative-1500
negative-1600
notice-100
notice-200
notice-300
notice-400
notice-500
notice-600
notice-700
notice-800
notice-900
notice-1000
notice-1100
notice-1200
notice-1300
notice-1400
notice-1500
notice-1600
positive-100
positive-200
positive-300
positive-400
positive-500
positive-600
positive-700
positive-800
positive-900
positive-1000
positive-1100
positive-1200
positive-1300
positive-1400
positive-1500
positive-1600
The following values are available across all color properties.
gray-25
gray-50
gray-75
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
gray-1000
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
blue-1000
blue-1100
blue-1200
blue-1300
blue-1400
blue-1500
blue-1600
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
red-1000
red-1100
red-1200
red-1300
red-1400
red-1500
red-1600
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
orange-1000
orange-1100
orange-1200
orange-1300
orange-1400
orange-1500
orange-1600
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
yellow-1000
yellow-1100
yellow-1200
yellow-1300
yellow-1400
yellow-1500
yellow-1600
chartreuse-100
chartreuse-200
chartreuse-300
chartreuse-400
chartreuse-500
chartreuse-600
chartreuse-700
chartreuse-800
chartreuse-900
chartreuse-1000
chartreuse-1100
chartreuse-1200
chartreuse-1300
chartreuse-1400
chartreuse-1500
chartreuse-1600
celery-100
celery-200
celery-300
celery-400
celery-500
celery-600
celery-700
celery-800
celery-900
celery-1000
celery-1100
celery-1200
celery-1300
celery-1400
celery-1500
celery-1600
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
green-1000
green-1100
green-1200
green-1300
green-1400
green-1500
green-1600
seafoam-100
seafoam-200
seafoam-300
seafoam-400
seafoam-500
seafoam-600
seafoam-700
seafoam-800
seafoam-900
seafoam-1000
seafoam-1100
seafoam-1200
seafoam-1300
seafoam-1400
seafoam-1500
seafoam-1600
cyan-100
cyan-200
cyan-300
cyan-400
cyan-500
cyan-600
cyan-700
cyan-800
cyan-900
cyan-1000
cyan-1100
cyan-1200
cyan-1300
cyan-1400
cyan-1500
cyan-1600
indigo-100
indigo-200
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
indigo-900
indigo-1000
indigo-1100
indigo-1200
indigo-1300
indigo-1400
indigo-1500
indigo-1600
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
purple-1000
purple-1100
purple-1200
purple-1300
purple-1400
purple-1500
purple-1600
fuchsia-100
fuchsia-200
fuchsia-300
fuchsia-400
fuchsia-500
fuchsia-600
fuchsia-700
fuchsia-800
fuchsia-900
fuchsia-1000
fuchsia-1100
fuchsia-1200
fuchsia-1300
fuchsia-1400
fuchsia-1500
fuchsia-1600
magenta-100
magenta-200
magenta-300
magenta-400
magenta-500
magenta-600
magenta-700
magenta-800
magenta-900
magenta-1000
magenta-1100
magenta-1200
magenta-1300
magenta-1400
magenta-1500
magenta-1600
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900
pink-1000
pink-1100
pink-1200
pink-1300
pink-1400
pink-1500
pink-1600
turquoise-100
turquoise-200
turquoise-300
turquoise-400
turquoise-500
turquoise-600
turquoise-700
turquoise-800
turquoise-900
turquoise-1000
turquoise-1100
turquoise-1200
turquoise-1300
turquoise-1400
turquoise-1500
turquoise-1600
brown-100
brown-200
brown-300
brown-400
brown-500
brown-600
brown-700
brown-800
brown-900
brown-1000
brown-1100
brown-1200
brown-1300
brown-1400
brown-1500
brown-1600
silver-100
silver-200
silver-300
silver-400
silver-500
silver-600
silver-700
silver-800
silver-900
silver-1000
silver-1100
silver-1200
silver-1300
silver-1400
silver-1500
silver-1600
cinnamon-100
cinnamon-200
cinnamon-300
cinnamon-400
cinnamon-500
cinnamon-600
cinnamon-700
cinnamon-800
cinnamon-900
cinnamon-1000
cinnamon-1100
cinnamon-1200
cinnamon-1300
cinnamon-1400
cinnamon-1500
cinnamon-1600
These colors are useful for overlays or transparent effects.
transparent
transparent-white-25
transparent-white-50
transparent-white-75
transparent-white-100
transparent-white-200
transparent-white-300
transparent-white-400
transparent-white-500
transparent-white-600
transparent-white-700
transparent-white-800
transparent-white-900
transparent-white-1000
transparent-black-25
transparent-black-50
transparent-black-75
transparent-black-100
transparent-black-200
transparent-black-300
transparent-black-400
transparent-black-500
transparent-black-600
transparent-black-700
transparent-black-800
transparent-black-900
transparent-black-1000
transparent-overlay-25
transparent-overlay-50
transparent-overlay-75
transparent-overlay-100
transparent-overlay-200
transparent-overlay-300
transparent-overlay-400
transparent-overlay-500
transparent-overlay-600
transparent-overlay-700
transparent-overlay-800
transparent-overlay-900
transparent-overlay-1000
These colors map to system colors when forced colors mode is active.
BackgroundButtonBorderButtonFaceButtonTextFieldHighlightHighlightTextGrayTextMarkLinkText
Values
black
white
focus-ring
The following values are available across all color properties. Prefer to use semantic colors over global colors when they represent a specific meaning.
accent-100
accent-200
accent-300
accent-400
accent-500
accent-600
accent-700
accent-800
accent-900
accent-1000
accent-1100
accent-1200
accent-1300
accent-1400
accent-1500
accent-1600
informative-100
informative-200
informative-300
informative-400
informative-500
informative-600
informative-700
informative-800
informative-900
informative-1000
informative-1100
informative-1200
informative-1300
informative-1400
informative-1500
informative-1600
negative-100
negative-200
negative-300
negative-400
negative-500
negative-600
negative-700
negative-800
negative-900
negative-1000
negative-1100
negative-1200
negative-1300
negative-1400
negative-1500
negative-1600
notice-100
notice-200
notice-300
notice-400
notice-500
notice-600
notice-700
notice-800
notice-900
notice-1000
notice-1100
notice-1200
notice-1300
notice-1400
notice-1500
notice-1600
positive-100
positive-200
positive-300
positive-400
positive-500
positive-600
positive-700
positive-800
positive-900
positive-1000
positive-1100
positive-1200
positive-1300
positive-1400
positive-1500
positive-1600
The following values are available across all color properties.
gray-25
gray-50
gray-75
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
gray-1000
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
blue-1000
blue-1100
blue-1200
blue-1300
blue-1400
blue-1500
blue-1600
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
red-1000
red-1100
red-1200
red-1300
red-1400
red-1500
red-1600
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
orange-1000
orange-1100
orange-1200
orange-1300
orange-1400
orange-1500
orange-1600
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
yellow-1000
yellow-1100
yellow-1200
yellow-1300
yellow-1400
yellow-1500
yellow-1600
chartreuse-100
chartreuse-200
chartreuse-300
chartreuse-400
chartreuse-500
chartreuse-600
chartreuse-700
chartreuse-800
chartreuse-900
chartreuse-1000
chartreuse-1100
chartreuse-1200
chartreuse-1300
chartreuse-1400
chartreuse-1500
chartreuse-1600
celery-100
celery-200
celery-300
celery-400
celery-500
celery-600
celery-700
celery-800
celery-900
celery-1000
celery-1100
celery-1200
celery-1300
celery-1400
celery-1500
celery-1600
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
green-1000
green-1100
green-1200
green-1300
green-1400
green-1500
green-1600
seafoam-100
seafoam-200
seafoam-300
seafoam-400
seafoam-500
seafoam-600
seafoam-700
seafoam-800
seafoam-900
seafoam-1000
seafoam-1100
seafoam-1200
seafoam-1300
seafoam-1400
seafoam-1500
seafoam-1600
cyan-100
cyan-200
cyan-300
cyan-400
cyan-500
cyan-600
cyan-700
cyan-800
cyan-900
cyan-1000
cyan-1100
cyan-1200
cyan-1300
cyan-1400
cyan-1500
cyan-1600
indigo-100
indigo-200
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
indigo-900
indigo-1000
indigo-1100
indigo-1200
indigo-1300
indigo-1400
indigo-1500
indigo-1600
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
purple-1000
purple-1100
purple-1200
purple-1300
purple-1400
purple-1500
purple-1600
fuchsia-100
fuchsia-200
fuchsia-300
fuchsia-400
fuchsia-500
fuchsia-600
fuchsia-700
fuchsia-800
fuchsia-900
fuchsia-1000
fuchsia-1100
fuchsia-1200
fuchsia-1300
fuchsia-1400
fuchsia-1500
fuchsia-1600
magenta-100
magenta-200
magenta-300
magenta-400
magenta-500
magenta-600
magenta-700
magenta-800
magenta-900
magenta-1000
magenta-1100
magenta-1200
magenta-1300
magenta-1400
magenta-1500
magenta-1600
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900
pink-1000
pink-1100
pink-1200
pink-1300
pink-1400
pink-1500
pink-1600
turquoise-100
turquoise-200
turquoise-300
turquoise-400
turquoise-500
turquoise-600
turquoise-700
turquoise-800
turquoise-900
turquoise-1000
turquoise-1100
turquoise-1200
turquoise-1300
turquoise-1400
turquoise-1500
turquoise-1600
brown-100
brown-200
brown-300
brown-400
brown-500
brown-600
brown-700
brown-800
brown-900
brown-1000
brown-1100
brown-1200
brown-1300
brown-1400
brown-1500
brown-1600
silver-100
silver-200
silver-300
silver-400
silver-500
silver-600
silver-700
silver-800
silver-900
silver-1000
silver-1100
silver-1200
silver-1300
silver-1400
silver-1500
silver-1600
cinnamon-100
cinnamon-200
cinnamon-300
cinnamon-400
cinnamon-500
cinnamon-600
cinnamon-700
cinnamon-800
cinnamon-900
cinnamon-1000
cinnamon-1100
cinnamon-1200
cinnamon-1300
cinnamon-1400
cinnamon-1500
cinnamon-1600
These colors are useful for overlays or transparent effects.
transparent
transparent-white-25
transparent-white-50
transparent-white-75
transparent-white-100
transparent-white-200
transparent-white-300
transparent-white-400
transparent-white-500
transparent-white-600
transparent-white-700
transparent-white-800
transparent-white-900
transparent-white-1000
transparent-black-25
transparent-black-50
transparent-black-75
transparent-black-100
transparent-black-200
transparent-black-300
transparent-black-400
transparent-black-500
transparent-black-600
transparent-black-700
transparent-black-800
transparent-black-900
transparent-black-1000
transparent-overlay-25
transparent-overlay-50
transparent-overlay-75
transparent-overlay-100
transparent-overlay-200
transparent-overlay-300
transparent-overlay-400
transparent-overlay-500
transparent-overlay-600
transparent-overlay-700
transparent-overlay-800
transparent-overlay-900
transparent-overlay-1000
These colors map to system colors when forced colors mode is active.
BackgroundButtonBorderButtonFaceButtonTextFieldHighlightHighlightTextGrayTextMarkLinkText
Values
'none'currentColor
black
white
The following values are available across all color properties. Prefer to use semantic colors over global colors when they represent a specific meaning.
accent-100
accent-200
accent-300
accent-400
accent-500
accent-600
accent-700
accent-800
accent-900
accent-1000
accent-1100
accent-1200
accent-1300
accent-1400
accent-1500
accent-1600
informative-100
informative-200
informative-300
informative-400
informative-500
informative-600
informative-700
informative-800
informative-900
informative-1000
informative-1100
informative-1200
informative-1300
informative-1400
informative-1500
informative-1600
negative-100
negative-200
negative-300
negative-400
negative-500
negative-600
negative-700
negative-800
negative-900
negative-1000
negative-1100
negative-1200
negative-1300
negative-1400
negative-1500
negative-1600
notice-100
notice-200
notice-300
notice-400
notice-500
notice-600
notice-700
notice-800
notice-900
notice-1000
notice-1100
notice-1200
notice-1300
notice-1400
notice-1500
notice-1600
positive-100
positive-200
positive-300
positive-400
positive-500
positive-600
positive-700
positive-800
positive-900
positive-1000
positive-1100
positive-1200
positive-1300
positive-1400
positive-1500
positive-1600
The following values are available across all color properties.
gray-25
gray-50
gray-75
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
gray-1000
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
blue-1000
blue-1100
blue-1200
blue-1300
blue-1400
blue-1500
blue-1600
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
red-1000
red-1100
red-1200
red-1300
red-1400
red-1500
red-1600
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
orange-1000
orange-1100
orange-1200
orange-1300
orange-1400
orange-1500
orange-1600
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
yellow-1000
yellow-1100
yellow-1200
yellow-1300
yellow-1400
yellow-1500
yellow-1600
chartreuse-100
chartreuse-200
chartreuse-300
chartreuse-400
chartreuse-500
chartreuse-600
chartreuse-700
chartreuse-800
chartreuse-900
chartreuse-1000
chartreuse-1100
chartreuse-1200
chartreuse-1300
chartreuse-1400
chartreuse-1500
chartreuse-1600
celery-100
celery-200
celery-300
celery-400
celery-500
celery-600
celery-700
celery-800
celery-900
celery-1000
celery-1100
celery-1200
celery-1300
celery-1400
celery-1500
celery-1600
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
green-1000
green-1100
green-1200
green-1300
green-1400
green-1500
green-1600
seafoam-100
seafoam-200
seafoam-300
seafoam-400
seafoam-500
seafoam-600
seafoam-700
seafoam-800
seafoam-900
seafoam-1000
seafoam-1100
seafoam-1200
seafoam-1300
seafoam-1400
seafoam-1500
seafoam-1600
cyan-100
cyan-200
cyan-300
cyan-400
cyan-500
cyan-600
cyan-700
cyan-800
cyan-900
cyan-1000
cyan-1100
cyan-1200
cyan-1300
cyan-1400
cyan-1500
cyan-1600
indigo-100
indigo-200
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
indigo-900
indigo-1000
indigo-1100
indigo-1200
indigo-1300
indigo-1400
indigo-1500
indigo-1600
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
purple-1000
purple-1100
purple-1200
purple-1300
purple-1400
purple-1500
purple-1600
fuchsia-100
fuchsia-200
fuchsia-300
fuchsia-400
fuchsia-500
fuchsia-600
fuchsia-700
fuchsia-800
fuchsia-900
fuchsia-1000
fuchsia-1100
fuchsia-1200
fuchsia-1300
fuchsia-1400
fuchsia-1500
fuchsia-1600
magenta-100
magenta-200
magenta-300
magenta-400
magenta-500
magenta-600
magenta-700
magenta-800
magenta-900
magenta-1000
magenta-1100
magenta-1200
magenta-1300
magenta-1400
magenta-1500
magenta-1600
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900
pink-1000
pink-1100
pink-1200
pink-1300
pink-1400
pink-1500
pink-1600
turquoise-100
turquoise-200
turquoise-300
turquoise-400
turquoise-500
turquoise-600
turquoise-700
turquoise-800
turquoise-900
turquoise-1000
turquoise-1100
turquoise-1200
turquoise-1300
turquoise-1400
turquoise-1500
turquoise-1600
brown-100
brown-200
brown-300
brown-400
brown-500
brown-600
brown-700
brown-800
brown-900
brown-1000
brown-1100
brown-1200
brown-1300
brown-1400
brown-1500
brown-1600
silver-100
silver-200
silver-300
silver-400
silver-500
silver-600
silver-700
silver-800
silver-900
silver-1000
silver-1100
silver-1200
silver-1300
silver-1400
silver-1500
silver-1600
cinnamon-100
cinnamon-200
cinnamon-300
cinnamon-400
cinnamon-500
cinnamon-600
cinnamon-700
cinnamon-800
cinnamon-900
cinnamon-1000
cinnamon-1100
cinnamon-1200
cinnamon-1300
cinnamon-1400
cinnamon-1500
cinnamon-1600
These colors are useful for overlays or transparent effects.
transparent
transparent-white-25
transparent-white-50
transparent-white-75
transparent-white-100
transparent-white-200
transparent-white-300
transparent-white-400
transparent-white-500
transparent-white-600
transparent-white-700
transparent-white-800
transparent-white-900
transparent-white-1000
transparent-black-25
transparent-black-50
transparent-black-75
transparent-black-100
transparent-black-200
transparent-black-300
transparent-black-400
transparent-black-500
transparent-black-600
transparent-black-700
transparent-black-800
transparent-black-900
transparent-black-1000
transparent-overlay-25
transparent-overlay-50
transparent-overlay-75
transparent-overlay-100
transparent-overlay-200
transparent-overlay-300
transparent-overlay-400
transparent-overlay-500
transparent-overlay-600
transparent-overlay-700
transparent-overlay-800
transparent-overlay-900
transparent-overlay-1000
These colors map to system colors when forced colors mode is active.
BackgroundButtonBorderButtonFaceButtonTextFieldHighlightHighlightTextGrayTextMarkLinkText
Dimensions
Values
auto'square'1:1 aspect ratio.'video'16:9 aspect ratio.'number / number'
Also accepts a ratio in the format number/number (e.g., 16/9, 4/3).
Values
0 | 1 | 2 | 4These values map to pixels.
Values
0 | 1 | 2 | 4These values map to pixels.
Values
baseSpacingBase 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
0 | 1 | 2 | 4These values map to pixels.
Values
0 | 1 | 2 | 4These values map to pixels.
Maps to
borderTopWidth, borderBottomWidth, borderStartWidth, borderEndWidthValues
0 | 1 | 2 | 4Maps to
borderStartWidth, borderEndWidthValues
0 | 1 | 2 | 4Maps to
borderTopWidth, borderBottomWidthValues
0 | 1 | 2 | 4Values
auto'full'Resolves to100%.baseSpacingBase 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 | 96negativeSpacingNegative 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 | -96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Values
'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.baseSpacingBase 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'Resolves to100%.numberA numeric value in pixels e.g.20. Will be converted to rem and scaled on touch devices.lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Maps to
rowGap, columnGapValues
'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.baseSpacingBase 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
top, bottom, insetStart, insetEndValues
'auto''full'Resolves to100%.baseSpacingBase 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 | 96negativeSpacingNegative 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 | -96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Values
auto'full'Resolves to100%.baseSpacingBase 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 | 96negativeSpacingNegative 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 | -96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Values
auto'full'Resolves to100%.baseSpacingBase 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 | 96negativeSpacingNegative 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 | -96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Maps to
insetStart, insetEndValues
'auto''full'Resolves to100%.baseSpacingBase 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 | 96negativeSpacingNegative 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 | -96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Maps to
top, bottomValues
'auto''full'Resolves to100%.baseSpacingBase 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 | 96negativeSpacingNegative 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 | -96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Values
auto'full'Resolves to100%.baseSpacingBase 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 | 96negativeSpacingNegative 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 | -96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Maps to
marginTop, marginBottom, marginStart, marginEndValues
'auto'baseSpacingBase 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 | 96negativeSpacingNegative 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 | -96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Values
autobaseSpacingBase 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 | 96negativeSpacingNegative 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 | -96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Values
autobaseSpacingBase 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 | 96negativeSpacingNegative 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 | -96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Values
autobaseSpacingBase 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 | 96negativeSpacingNegative 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 | -96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Values
autobaseSpacingBase 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 | 96negativeSpacingNegative 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 | -96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Maps to
marginStart, marginEndValues
'auto'baseSpacingBase 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 | 96negativeSpacingNegative 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 | -96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Maps to
marginTop, marginBottomValues
'auto'baseSpacingBase 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 | 96negativeSpacingNegative 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 | -96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Maps to
paddingTop, paddingBottom, paddingStart, paddingEndValues
'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.baseSpacingBase 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 | 96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Values
'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.baseSpacingBase 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 | 96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Values
'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.baseSpacingBase 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 | 96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Values
'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.baseSpacingBase 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 | 96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Values
'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.baseSpacingBase 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 | 96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Maps to
paddingStart, paddingEndValues
'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.baseSpacingBase 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 | 96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Maps to
paddingTop, paddingBottomValues
'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.baseSpacingBase 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 | 96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Values
auto'full'Resolves to100%.baseSpacingBase 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 | 96negativeSpacingNegative 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 | -96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Values
number'${number}deg''${number}rad''${number}grad''${number}turn'
Accepts a number (treated as degrees) or a string with units (deg, rad, grad, turn).
Values
'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.baseSpacingBase 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
number'${number}%'
Accepts a number or percentage string.
Values
number'${number}%'
Accepts a number or percentage string.
Maps to
scrollMarginTop, scrollMarginBottom, scrollMarginStart, scrollMarginEndValues
baseSpacingBase 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
baseSpacingBase 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
baseSpacingBase 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
baseSpacingBase 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
baseSpacingBase 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
baseSpacingBase 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
baseSpacingBase 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
baseSpacingBase 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
baseSpacingBase 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
baseSpacingBase 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
baseSpacingBase 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
baseSpacingBase 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
baseSpacingBase 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
baseSpacingBase 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
0 | 1 | 2These values map to pixels.
Values
baseSpacingBase 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 | 96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Values
auto'full'Resolves to100%.baseSpacingBase 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 | 96negativeSpacingNegative 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 | -96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Values
Maps to
translateX, translateYValues
'full'Resolves to100%.baseSpacingBase 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 | 96negativeSpacingNegative 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 | -96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Values
'full'Resolves to100%.baseSpacingBase 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 | 96negativeSpacingNegative 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 | -96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
Values
'full'Resolves to100%.baseSpacingBase 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 | 96negativeSpacingNegative 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 | -96lengthPercentageA CSS length value with percentage or viewport units. e.g.'50%','100vw','50vh'
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>
Maps to
fontFamily, fontSize, fontWeight, lineHeight, colorThere 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
Accepts the same values as fontSize. The fontSize provided defines the values this shorthand sets on the mapped values.
Values
'sans''serif''code'
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'Use for headings in content pages.'title'Use for titles within UI components such as cards or panels.'detail'Use for less important metadata.
Values
Values
'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
Maps to
overflowX, overflowY, textOverflow, whiteSpaceValues
'boolean'
Accepts a boolean value. Applying this shorthand will set the required style macro properties to enable text truncation.
Effects
Maps to
animation, animationDuration, animationTimingFunctionValues
This shorthand explicitly defines duration as 150 and the timing function as "default".
Values
string'LinearGradient'
Values
'none''sm''default''lg''xl''full'Resolves to9999pxfor fully rounded corners.'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'Resolves to9999pxfor fully rounded corners.'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'Resolves to9999pxfor fully rounded corners.'pill'Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
Maps to
borderTopEndRadius, borderBottomEndRadiusValues
'none''sm''default''lg''xl''full'Resolves to9999pxfor fully rounded corners.'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'Resolves to9999pxfor fully rounded corners.'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'Resolves to9999pxfor fully rounded corners.'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'Resolves to9999pxfor fully rounded corners.'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'Resolves to9999pxfor fully rounded corners.'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'Resolves to9999pxfor fully rounded corners.'pill'Default spacing between the edge of a pill-shaped control and its text. Relative to control height.
Values
'emphasized'Shadow for emphasized states.'elevated'Shadow for elevated surfaces.'dragged'Shadow for elements being dragged.none
Values
Values
'emphasized'Shadow for emphasized states.'elevated'Shadow for elevated surfaces.'dragged'Shadow for elements being dragged.none
Values
Values
Values
0 | 1 | 2 | 4These values map to pixels.
Maps to
transition, transitionDuration, transitionTimingFunctionValues
'default'Sets transition property to color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, and backdrop-filter.'colors'Sets transition property to color, background-color, border-color, text-decoration-color, fill, and stroke.'opacity'Sets transition property to opacity.'shadow'Sets transition property to box-shadow.'transform'Sets transition property to transform, translate, scale, and rotate properties.'all'Sets transition to all animatable properties.'none'
This shorthand explicitly defines duration as 150 and the timing function as "default".
Layout
Values
Values
Values
Values
Maps to
gridColumnStart, gridColumnEnd, gridRowStart, gridRowEndValues
Values
automin-contentmax-content'${number}fr''minmax(${string}, ${string})'stringbaseSpacingBase 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
automin-contentmax-content'${number}fr''minmax(${string}, ${string})'stringbaseSpacingBase 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
Values
Values
Values
Values
Values
automin-contentmax-content'${number}fr''minmax(${string}, ${string})'nonesubgridstringbaseSpacingBase 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
automin-contentmax-content'${number}fr''minmax(${string}, ${string})'nonesubgridstringbaseSpacingBase 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
Maps to
overflowX, overflowYValues
'auto''hidden''clip''visible''scroll'
Maps to
overscrollBehaviorX, overscrollBehaviorYValues
'auto''contain''none'
Maps to
alignContent, justifyContentValues
'normal''center''start''end''space-between''space-around''space-evenly''stretch'
Maps to
alignItems, justifyItemsValues
'start''end''center''stretch'
Maps to
alignSelf, justifySelfValues
'auto''start''end''center''stretch'
Misc
Values
Values
'true'
Values
Conditions
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)})'