This is the Standard reference for adjustments.
It follows the authored TeaCSS vocabulary at source revision
fa3709a for package version 0.7.1.
Each value list gives finite examples and named values for its prefixes. A
bracket or variable example demonstrates that open form for the same prefix;
the listed arbitrary literals are samples, not every accepted literal. Check
the Storybook token reference for more examples,
and do not infer support from a different prefix.
cursor
Interactive example.
Prefixes: cursor. Example: cursor:auto. It emits cursor:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (38)
auto, default, none, context-menu, help, pointer, progress, wait, cell, crosshair, text, vertical-text,
alias, copy, move, no-drop, not-allowed, grab, grabbing, all-scroll, col-resize, row-resize, n-resize, e-resize,
s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize, ew-resize, ns-resize, nesw-resize, nwse-resize, zoom-in, zoom-out,
[url(cursor.svg)_4_12,_pointer], $cursor
pointer-events
Interactive example.
Prefixes: pointer-events. Example: pointer-events:auto. It emits pointer-events:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (13)
auto, none, visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, bounding-box, [visiblePainted],
$pointerEvents
user-select
Interactive example.
Prefixes: user-select. Example: user-select:auto. It emits user-select:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (7)
auto, text, none, contain, all, [contain], $userSelect
touch-action
Interactive example.
Prefixes: touch-action. Example: touch-action:auto. It emits touch-action:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (12)
auto, none, pan-x, pan-y, pan-left, pan-right, pan-up, pan-down, pinch-zoom, manipulation, [pan-x_pinch-zoom], $touchAction
resize
Interactive example.
Prefixes: resize. Example: resize:none. It emits resize:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
none, both, horizontal, vertical, block, inline, [block], $resize
interactivity
Interactive example.
Prefixes: interactivity. Example: interactivity:auto. It emits interactivity:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
auto, inert, [inert], $interactivity
interest-delay-start
Interactive example.
Prefixes: interest-delay-start. Example: interest-delay-start:normal. It emits interest-delay-start:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
normal, 100, 200, [0.4s], $interestDelayStart
interest-delay-end
Interactive example.
Prefixes: interest-delay-end. Example: interest-delay-end:normal. It emits interest-delay-end:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
normal, 100, 200, [0.4s], $interestDelayEnd
window-drag
Interactive example. Maturity: experimental. Browser support: window-drag is experimental and is not broadly supported by browsers.
Prefixes: window-drag. Example: window-drag:none. It emits window-drag:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
none, move, [move], $windowDrag
appearance
Interactive example.
Prefixes: appearance. Example: appearance:none. It emits appearance:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (17)
none, auto, base, base-select, textfield, menulist-button, button, searchfield, textarea, checkbox, radio, menulist,
listbox, meter, progress-bar, [base-select], $appearance
field-sizing
Interactive example. Maturity: experimental. Browser support: CSS Forms Level 1 field sizing has limited browser support.
Prefixes: field-sizing. Example: field-sizing:fixed. It emits field-sizing:fixed;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
fixed, content, [content], $fieldSizing
accent-color
Interactive example.
Prefixes: accent-color. Example: accent-color:auto. It emits accent-color:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (477)
auto, ink-100, ink-150, ink-200, ink-300, ink-400, ink-500, ink-600, ink-700, ink-800, ink-850, ink-900,
ink-950, gray-100, gray-150, gray-200, gray-300, gray-400, gray-500, gray-600, gray-700, gray-800, gray-850, gray-900,
gray-950, mauve-100, mauve-150, mauve-200, mauve-300, mauve-400, mauve-500, mauve-600, mauve-700, mauve-800, mauve-850, mauve-900,
mauve-950, slate-100, slate-150, slate-200, slate-300, slate-400, slate-500, slate-600, slate-700, slate-800, slate-850, slate-900,
slate-950, sage-100, sage-150, sage-200, sage-300, sage-400, sage-500, sage-600, sage-700, sage-800, sage-850, sage-900,
sage-950, olive-100, olive-150, olive-200, olive-300, olive-400, olive-500, olive-600, olive-700, olive-800, olive-850, olive-900,
olive-950, sand-100, sand-150, sand-200, sand-300, sand-400, sand-500, sand-600, sand-700, sand-800, sand-850, sand-900,
sand-950, tomato-100, tomato-150, tomato-200, tomato-300, tomato-400, tomato-500, tomato-600, tomato-700, tomato-800, tomato-850, tomato-900,
tomato-950, red-100, red-150, red-200, red-300, red-400, red-500, red-600, red-700, red-800, red-850, red-900,
red-950, ruby-100, ruby-150, ruby-200, ruby-300, ruby-400, ruby-500, ruby-600, ruby-700, ruby-800, ruby-850, ruby-900,
ruby-950, crimson-100, crimson-150, crimson-200, crimson-300, crimson-400, crimson-500, crimson-600, crimson-700, crimson-800, crimson-850, crimson-900,
crimson-950, pink-100, pink-150, pink-200, pink-300, pink-400, pink-500, pink-600, pink-700, pink-800, pink-850, pink-900,
pink-950, plum-100, plum-150, plum-200, plum-300, plum-400, plum-500, plum-600, plum-700, plum-800, plum-850, plum-900,
plum-950, purple-100, purple-150, purple-200, purple-300, purple-400, purple-500, purple-600, purple-700, purple-800, purple-850, purple-900,
purple-950, violet-100, violet-150, violet-200, violet-300, violet-400, violet-500, violet-600, violet-700, violet-800, violet-850, violet-900,
violet-950, iris-100, iris-150, iris-200, iris-300, iris-400, iris-500, iris-600, iris-700, iris-800, iris-850, iris-900,
iris-950, indigo-100, indigo-150, indigo-200, indigo-300, indigo-400, indigo-500, indigo-600, indigo-700, indigo-800, indigo-850, indigo-900,
indigo-950, blue-100, blue-150, blue-200, blue-300, blue-400, blue-500, blue-600, blue-700, blue-800, blue-850, blue-900,
blue-950, cyan-100, cyan-150, cyan-200, cyan-300, cyan-400, cyan-500, cyan-600, cyan-700, cyan-800, cyan-850, cyan-900,
cyan-950, teal-100, teal-150, teal-200, teal-300, teal-400, teal-500, teal-600, teal-700, teal-800, teal-850, teal-900,
teal-950, jade-100, jade-150, jade-200, jade-300, jade-400, jade-500, jade-600, jade-700, jade-800, jade-850, jade-900,
jade-950, green-100, green-150, green-200, green-300, green-400, green-500, green-600, green-700, green-800, green-850, green-900,
green-950, grass-100, grass-150, grass-200, grass-300, grass-400, grass-500, grass-600, grass-700, grass-800, grass-850, grass-900,
grass-950, brown-100, brown-150, brown-200, brown-300, brown-400, brown-500, brown-600, brown-700, brown-800, brown-850, brown-900,
brown-950, bronze-100, bronze-150, bronze-200, bronze-300, bronze-400, bronze-500, bronze-600, bronze-700, bronze-800, bronze-850, bronze-900,
bronze-950, gold-100, gold-150, gold-200, gold-300, gold-400, gold-500, gold-600, gold-700, gold-800, gold-850, gold-900,
gold-950, sky-100, sky-150, sky-200, sky-300, sky-400, sky-500, sky-600, sky-700, sky-800, sky-850, sky-900,
sky-950, mint-100, mint-150, mint-200, mint-300, mint-400, mint-500, mint-600, mint-700, mint-800, mint-850, mint-900,
mint-950, lime-100, lime-150, lime-200, lime-300, lime-400, lime-500, lime-600, lime-700, lime-800, lime-850, lime-900,
lime-950, yellow-100, yellow-150, yellow-200, yellow-300, yellow-400, yellow-500, yellow-600, yellow-700, yellow-800, yellow-850, yellow-900,
yellow-950, amber-100, amber-150, amber-200, amber-300, amber-400, amber-500, amber-600, amber-700, amber-800, amber-850, amber-900,
amber-950, orange-100, orange-150, orange-200, orange-300, orange-400, orange-500, orange-600, orange-700, orange-800, orange-850, orange-900,
orange-950, primary-100, primary-150, primary-200, primary-300, primary-400, primary-500, primary-600, primary-700, primary-800, primary-850, primary-900,
primary-950, neutral-100, neutral-150, neutral-200, neutral-300, neutral-400, neutral-500, neutral-600, neutral-700, neutral-800, neutral-850, neutral-900,
neutral-950, focused-100, focused-150, focused-200, focused-300, focused-400, focused-500, focused-600, focused-700, focused-800, focused-850, focused-900,
focused-950, success-100, success-150, success-200, success-300, success-400, success-500, success-600, success-700, success-800, success-850, success-900,
success-950, warning-100, warning-150, warning-200, warning-300, warning-400, warning-500, warning-600, warning-700, warning-800, warning-850, warning-900,
warning-950, failure-100, failure-150, failure-200, failure-300, failure-400, failure-500, failure-600, failure-700, failure-800, failure-850, failure-900,
failure-950, general-100, general-150, general-200, general-300, general-400, general-500, general-600, general-700, general-800, general-850, general-900,
general-950, transparent, current, black, white, [#abc], $color, $color|white, red-500/50
caret-color
Interactive example.
Prefixes: caret-color. Example: caret-color:auto. It emits caret-color:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (478)
auto, ink-100, ink-150, ink-200, ink-300, ink-400, ink-500, ink-600, ink-700, ink-800, ink-850, ink-900,
ink-950, gray-100, gray-150, gray-200, gray-300, gray-400, gray-500, gray-600, gray-700, gray-800, gray-850, gray-900,
gray-950, mauve-100, mauve-150, mauve-200, mauve-300, mauve-400, mauve-500, mauve-600, mauve-700, mauve-800, mauve-850, mauve-900,
mauve-950, slate-100, slate-150, slate-200, slate-300, slate-400, slate-500, slate-600, slate-700, slate-800, slate-850, slate-900,
slate-950, sage-100, sage-150, sage-200, sage-300, sage-400, sage-500, sage-600, sage-700, sage-800, sage-850, sage-900,
sage-950, olive-100, olive-150, olive-200, olive-300, olive-400, olive-500, olive-600, olive-700, olive-800, olive-850, olive-900,
olive-950, sand-100, sand-150, sand-200, sand-300, sand-400, sand-500, sand-600, sand-700, sand-800, sand-850, sand-900,
sand-950, tomato-100, tomato-150, tomato-200, tomato-300, tomato-400, tomato-500, tomato-600, tomato-700, tomato-800, tomato-850, tomato-900,
tomato-950, red-100, red-150, red-200, red-300, red-400, red-500, red-600, red-700, red-800, red-850, red-900,
red-950, ruby-100, ruby-150, ruby-200, ruby-300, ruby-400, ruby-500, ruby-600, ruby-700, ruby-800, ruby-850, ruby-900,
ruby-950, crimson-100, crimson-150, crimson-200, crimson-300, crimson-400, crimson-500, crimson-600, crimson-700, crimson-800, crimson-850, crimson-900,
crimson-950, pink-100, pink-150, pink-200, pink-300, pink-400, pink-500, pink-600, pink-700, pink-800, pink-850, pink-900,
pink-950, plum-100, plum-150, plum-200, plum-300, plum-400, plum-500, plum-600, plum-700, plum-800, plum-850, plum-900,
plum-950, purple-100, purple-150, purple-200, purple-300, purple-400, purple-500, purple-600, purple-700, purple-800, purple-850, purple-900,
purple-950, violet-100, violet-150, violet-200, violet-300, violet-400, violet-500, violet-600, violet-700, violet-800, violet-850, violet-900,
violet-950, iris-100, iris-150, iris-200, iris-300, iris-400, iris-500, iris-600, iris-700, iris-800, iris-850, iris-900,
iris-950, indigo-100, indigo-150, indigo-200, indigo-300, indigo-400, indigo-500, indigo-600, indigo-700, indigo-800, indigo-850, indigo-900,
indigo-950, blue-100, blue-150, blue-200, blue-300, blue-400, blue-500, blue-600, blue-700, blue-800, blue-850, blue-900,
blue-950, cyan-100, cyan-150, cyan-200, cyan-300, cyan-400, cyan-500, cyan-600, cyan-700, cyan-800, cyan-850, cyan-900,
cyan-950, teal-100, teal-150, teal-200, teal-300, teal-400, teal-500, teal-600, teal-700, teal-800, teal-850, teal-900,
teal-950, jade-100, jade-150, jade-200, jade-300, jade-400, jade-500, jade-600, jade-700, jade-800, jade-850, jade-900,
jade-950, green-100, green-150, green-200, green-300, green-400, green-500, green-600, green-700, green-800, green-850, green-900,
green-950, grass-100, grass-150, grass-200, grass-300, grass-400, grass-500, grass-600, grass-700, grass-800, grass-850, grass-900,
grass-950, brown-100, brown-150, brown-200, brown-300, brown-400, brown-500, brown-600, brown-700, brown-800, brown-850, brown-900,
brown-950, bronze-100, bronze-150, bronze-200, bronze-300, bronze-400, bronze-500, bronze-600, bronze-700, bronze-800, bronze-850, bronze-900,
bronze-950, gold-100, gold-150, gold-200, gold-300, gold-400, gold-500, gold-600, gold-700, gold-800, gold-850, gold-900,
gold-950, sky-100, sky-150, sky-200, sky-300, sky-400, sky-500, sky-600, sky-700, sky-800, sky-850, sky-900,
sky-950, mint-100, mint-150, mint-200, mint-300, mint-400, mint-500, mint-600, mint-700, mint-800, mint-850, mint-900,
mint-950, lime-100, lime-150, lime-200, lime-300, lime-400, lime-500, lime-600, lime-700, lime-800, lime-850, lime-900,
lime-950, yellow-100, yellow-150, yellow-200, yellow-300, yellow-400, yellow-500, yellow-600, yellow-700, yellow-800, yellow-850, yellow-900,
yellow-950, amber-100, amber-150, amber-200, amber-300, amber-400, amber-500, amber-600, amber-700, amber-800, amber-850, amber-900,
amber-950, orange-100, orange-150, orange-200, orange-300, orange-400, orange-500, orange-600, orange-700, orange-800, orange-850, orange-900,
orange-950, primary-100, primary-150, primary-200, primary-300, primary-400, primary-500, primary-600, primary-700, primary-800, primary-850, primary-900,
primary-950, neutral-100, neutral-150, neutral-200, neutral-300, neutral-400, neutral-500, neutral-600, neutral-700, neutral-800, neutral-850, neutral-900,
neutral-950, focused-100, focused-150, focused-200, focused-300, focused-400, focused-500, focused-600, focused-700, focused-800, focused-850, focused-900,
focused-950, success-100, success-150, success-200, success-300, success-400, success-500, success-600, success-700, success-800, success-850, success-900,
success-950, warning-100, warning-150, warning-200, warning-300, warning-400, warning-500, warning-600, warning-700, warning-800, warning-850, warning-900,
warning-950, failure-100, failure-150, failure-200, failure-300, failure-400, failure-500, failure-600, failure-700, failure-800, failure-850, failure-900,
failure-950, general-100, general-150, general-200, general-300, general-400, general-500, general-600, general-700, general-800, general-850, general-900,
general-950, transparent, current, black, white, [#abc], $color, $color|white, red-500/50, [black_white]
caret-shape
Interactive example.
Prefixes: caret-shape. Example: caret-shape:auto. It emits caret-shape:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
auto, bar, block, underscore, [bar], $caretShape
caret-animation
Interactive example.
Prefixes: caret-animation. Example: caret-animation:auto. It emits caret-animation:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
auto, manual, [manual], $caretAnimation
color-scheme
Interactive example.
Prefixes: color-scheme. Example: color-scheme:normal. It emits color-scheme:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
normal, dark, light, light-dark, dark-light, only-dark, only-light, [light_dark_only], $colorScheme
forced-color-adjust
Interactive example.
Prefixes: forced-color-adjust. Example: forced-color-adjust:auto. It emits forced-color-adjust:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
auto, none, preserve-parent-color, [preserve-parent-color], $forcedColorAdjust
print-color-adjust
Interactive example.
Prefixes: print-color-adjust. Example: print-color-adjust:economy. It emits print-color-adjust:economy;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
economy, exact, [exact], $printColorAdjust