This is the Standard reference for adjustments.
The vocabulary comes from the teacss-ts Storybook at revision
9de266d for package version 0.10.11.
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 (516)
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, ink-000, gray-100, gray-150, gray-200, gray-300, gray-400, gray-500, gray-600, gray-700, gray-800, gray-850,
gray-900, gray-950, gray-000, mauve-100, mauve-150, mauve-200, mauve-300, mauve-400, mauve-500, mauve-600, mauve-700, mauve-800,
mauve-850, mauve-900, mauve-950, mauve-000, slate-100, slate-150, slate-200, slate-300, slate-400, slate-500, slate-600, slate-700,
slate-800, slate-850, slate-900, slate-950, slate-000, sage-100, sage-150, sage-200, sage-300, sage-400, sage-500, sage-600,
sage-700, sage-800, sage-850, sage-900, sage-950, sage-000, olive-100, olive-150, olive-200, olive-300, olive-400, olive-500,
olive-600, olive-700, olive-800, olive-850, olive-900, olive-950, olive-000, sand-100, sand-150, sand-200, sand-300, sand-400,
sand-500, sand-600, sand-700, sand-800, sand-850, sand-900, sand-950, sand-000, tomato-100, tomato-150, tomato-200, tomato-300,
tomato-400, tomato-500, tomato-600, tomato-700, tomato-800, tomato-850, tomato-900, tomato-950, tomato-000, red-100, red-150, red-200,
red-300, red-400, red-500, red-600, red-700, red-800, red-850, red-900, red-950, red-000, ruby-100, ruby-150,
ruby-200, ruby-300, ruby-400, ruby-500, ruby-600, ruby-700, ruby-800, ruby-850, ruby-900, ruby-950, ruby-000, crimson-100,
crimson-150, crimson-200, crimson-300, crimson-400, crimson-500, crimson-600, crimson-700, crimson-800, crimson-850, crimson-900, crimson-950, crimson-000,
pink-100, pink-150, pink-200, pink-300, pink-400, pink-500, pink-600, pink-700, pink-800, pink-850, pink-900, pink-950,
pink-000, plum-100, plum-150, plum-200, plum-300, plum-400, plum-500, plum-600, plum-700, plum-800, plum-850, plum-900,
plum-950, plum-000, purple-100, purple-150, purple-200, purple-300, purple-400, purple-500, purple-600, purple-700, purple-800, purple-850,
purple-900, purple-950, purple-000, violet-100, violet-150, violet-200, violet-300, violet-400, violet-500, violet-600, violet-700, violet-800,
violet-850, violet-900, violet-950, violet-000, iris-100, iris-150, iris-200, iris-300, iris-400, iris-500, iris-600, iris-700,
iris-800, iris-850, iris-900, iris-950, iris-000, indigo-100, indigo-150, indigo-200, indigo-300, indigo-400, indigo-500, indigo-600,
indigo-700, indigo-800, indigo-850, indigo-900, indigo-950, indigo-000, blue-100, blue-150, blue-200, blue-300, blue-400, blue-500,
blue-600, blue-700, blue-800, blue-850, blue-900, blue-950, blue-000, cyan-100, cyan-150, cyan-200, cyan-300, cyan-400,
cyan-500, cyan-600, cyan-700, cyan-800, cyan-850, cyan-900, cyan-950, cyan-000, teal-100, teal-150, teal-200, teal-300,
teal-400, teal-500, teal-600, teal-700, teal-800, teal-850, teal-900, teal-950, teal-000, jade-100, jade-150, jade-200,
jade-300, jade-400, jade-500, jade-600, jade-700, jade-800, jade-850, jade-900, jade-950, jade-000, green-100, green-150,
green-200, green-300, green-400, green-500, green-600, green-700, green-800, green-850, green-900, green-950, green-000, grass-100,
grass-150, grass-200, grass-300, grass-400, grass-500, grass-600, grass-700, grass-800, grass-850, grass-900, grass-950, grass-000,
brown-100, brown-150, brown-200, brown-300, brown-400, brown-500, brown-600, brown-700, brown-800, brown-850, brown-900, brown-950,
brown-000, bronze-100, bronze-150, bronze-200, bronze-300, bronze-400, bronze-500, bronze-600, bronze-700, bronze-800, bronze-850, bronze-900,
bronze-950, bronze-000, gold-100, gold-150, gold-200, gold-300, gold-400, gold-500, gold-600, gold-700, gold-800, gold-850,
gold-900, gold-950, gold-000, sky-100, sky-150, sky-200, sky-300, sky-400, sky-500, sky-600, sky-700, sky-800,
sky-850, sky-900, sky-950, sky-000, mint-100, mint-150, mint-200, mint-300, mint-400, mint-500, mint-600, mint-700,
mint-800, mint-850, mint-900, mint-950, mint-000, lime-100, lime-150, lime-200, lime-300, lime-400, lime-500, lime-600,
lime-700, lime-800, lime-850, lime-900, lime-950, lime-000, yellow-100, yellow-150, yellow-200, yellow-300, yellow-400, yellow-500,
yellow-600, yellow-700, yellow-800, yellow-850, yellow-900, yellow-950, yellow-000, amber-100, amber-150, amber-200, amber-300, amber-400,
amber-500, amber-600, amber-700, amber-800, amber-850, amber-900, amber-950, amber-000, orange-100, orange-150, orange-200, orange-300,
orange-400, orange-500, orange-600, orange-700, orange-800, orange-850, orange-900, orange-950, orange-000, primary-100, primary-150, primary-200,
primary-300, primary-400, primary-500, primary-600, primary-700, primary-800, primary-850, primary-900, primary-950, primary-000, neutral-100, neutral-150,
neutral-200, neutral-300, neutral-400, neutral-500, neutral-600, neutral-700, neutral-800, neutral-850, neutral-900, neutral-950, neutral-000, focused-100,
focused-150, focused-200, focused-300, focused-400, focused-500, focused-600, focused-700, focused-800, focused-850, focused-900, focused-950, focused-000,
success-100, success-150, success-200, success-300, success-400, success-500, success-600, success-700, success-800, success-850, success-900, success-950,
success-000, warning-100, warning-150, warning-200, warning-300, warning-400, warning-500, warning-600, warning-700, warning-800, warning-850, warning-900,
warning-950, warning-000, failure-100, failure-150, failure-200, failure-300, failure-400, failure-500, failure-600, failure-700, failure-800, failure-850,
failure-900, failure-950, failure-000, general-100, general-150, general-200, general-300, general-400, general-500, general-600, general-700, general-800,
general-850, general-900, general-950, general-000, 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 (517)
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, ink-000, gray-100, gray-150, gray-200, gray-300, gray-400, gray-500, gray-600, gray-700, gray-800, gray-850,
gray-900, gray-950, gray-000, mauve-100, mauve-150, mauve-200, mauve-300, mauve-400, mauve-500, mauve-600, mauve-700, mauve-800,
mauve-850, mauve-900, mauve-950, mauve-000, slate-100, slate-150, slate-200, slate-300, slate-400, slate-500, slate-600, slate-700,
slate-800, slate-850, slate-900, slate-950, slate-000, sage-100, sage-150, sage-200, sage-300, sage-400, sage-500, sage-600,
sage-700, sage-800, sage-850, sage-900, sage-950, sage-000, olive-100, olive-150, olive-200, olive-300, olive-400, olive-500,
olive-600, olive-700, olive-800, olive-850, olive-900, olive-950, olive-000, sand-100, sand-150, sand-200, sand-300, sand-400,
sand-500, sand-600, sand-700, sand-800, sand-850, sand-900, sand-950, sand-000, tomato-100, tomato-150, tomato-200, tomato-300,
tomato-400, tomato-500, tomato-600, tomato-700, tomato-800, tomato-850, tomato-900, tomato-950, tomato-000, red-100, red-150, red-200,
red-300, red-400, red-500, red-600, red-700, red-800, red-850, red-900, red-950, red-000, ruby-100, ruby-150,
ruby-200, ruby-300, ruby-400, ruby-500, ruby-600, ruby-700, ruby-800, ruby-850, ruby-900, ruby-950, ruby-000, crimson-100,
crimson-150, crimson-200, crimson-300, crimson-400, crimson-500, crimson-600, crimson-700, crimson-800, crimson-850, crimson-900, crimson-950, crimson-000,
pink-100, pink-150, pink-200, pink-300, pink-400, pink-500, pink-600, pink-700, pink-800, pink-850, pink-900, pink-950,
pink-000, plum-100, plum-150, plum-200, plum-300, plum-400, plum-500, plum-600, plum-700, plum-800, plum-850, plum-900,
plum-950, plum-000, purple-100, purple-150, purple-200, purple-300, purple-400, purple-500, purple-600, purple-700, purple-800, purple-850,
purple-900, purple-950, purple-000, violet-100, violet-150, violet-200, violet-300, violet-400, violet-500, violet-600, violet-700, violet-800,
violet-850, violet-900, violet-950, violet-000, iris-100, iris-150, iris-200, iris-300, iris-400, iris-500, iris-600, iris-700,
iris-800, iris-850, iris-900, iris-950, iris-000, indigo-100, indigo-150, indigo-200, indigo-300, indigo-400, indigo-500, indigo-600,
indigo-700, indigo-800, indigo-850, indigo-900, indigo-950, indigo-000, blue-100, blue-150, blue-200, blue-300, blue-400, blue-500,
blue-600, blue-700, blue-800, blue-850, blue-900, blue-950, blue-000, cyan-100, cyan-150, cyan-200, cyan-300, cyan-400,
cyan-500, cyan-600, cyan-700, cyan-800, cyan-850, cyan-900, cyan-950, cyan-000, teal-100, teal-150, teal-200, teal-300,
teal-400, teal-500, teal-600, teal-700, teal-800, teal-850, teal-900, teal-950, teal-000, jade-100, jade-150, jade-200,
jade-300, jade-400, jade-500, jade-600, jade-700, jade-800, jade-850, jade-900, jade-950, jade-000, green-100, green-150,
green-200, green-300, green-400, green-500, green-600, green-700, green-800, green-850, green-900, green-950, green-000, grass-100,
grass-150, grass-200, grass-300, grass-400, grass-500, grass-600, grass-700, grass-800, grass-850, grass-900, grass-950, grass-000,
brown-100, brown-150, brown-200, brown-300, brown-400, brown-500, brown-600, brown-700, brown-800, brown-850, brown-900, brown-950,
brown-000, bronze-100, bronze-150, bronze-200, bronze-300, bronze-400, bronze-500, bronze-600, bronze-700, bronze-800, bronze-850, bronze-900,
bronze-950, bronze-000, gold-100, gold-150, gold-200, gold-300, gold-400, gold-500, gold-600, gold-700, gold-800, gold-850,
gold-900, gold-950, gold-000, sky-100, sky-150, sky-200, sky-300, sky-400, sky-500, sky-600, sky-700, sky-800,
sky-850, sky-900, sky-950, sky-000, mint-100, mint-150, mint-200, mint-300, mint-400, mint-500, mint-600, mint-700,
mint-800, mint-850, mint-900, mint-950, mint-000, lime-100, lime-150, lime-200, lime-300, lime-400, lime-500, lime-600,
lime-700, lime-800, lime-850, lime-900, lime-950, lime-000, yellow-100, yellow-150, yellow-200, yellow-300, yellow-400, yellow-500,
yellow-600, yellow-700, yellow-800, yellow-850, yellow-900, yellow-950, yellow-000, amber-100, amber-150, amber-200, amber-300, amber-400,
amber-500, amber-600, amber-700, amber-800, amber-850, amber-900, amber-950, amber-000, orange-100, orange-150, orange-200, orange-300,
orange-400, orange-500, orange-600, orange-700, orange-800, orange-850, orange-900, orange-950, orange-000, primary-100, primary-150, primary-200,
primary-300, primary-400, primary-500, primary-600, primary-700, primary-800, primary-850, primary-900, primary-950, primary-000, neutral-100, neutral-150,
neutral-200, neutral-300, neutral-400, neutral-500, neutral-600, neutral-700, neutral-800, neutral-850, neutral-900, neutral-950, neutral-000, focused-100,
focused-150, focused-200, focused-300, focused-400, focused-500, focused-600, focused-700, focused-800, focused-850, focused-900, focused-950, focused-000,
success-100, success-150, success-200, success-300, success-400, success-500, success-600, success-700, success-800, success-850, success-900, success-950,
success-000, warning-100, warning-150, warning-200, warning-300, warning-400, warning-500, warning-600, warning-700, warning-800, warning-850, warning-900,
warning-950, warning-000, failure-100, failure-150, failure-200, failure-300, failure-400, failure-500, failure-600, failure-700, failure-800, failure-850,
failure-900, failure-950, failure-000, general-100, general-150, general-200, general-300, general-400, general-500, general-600, general-700, general-800,
general-850, general-900, general-950, general-000, 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