Skip to content
TeaCSS documentation

Adjustments

Appearance, colour adjustment, and interaction details. TeaCSS Standard reference.

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

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