This is the Standard reference for graphics.
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.
aspect-ratio
Interactive example.
Prefixes: aspect-ratio. Example: aspect-ratio:auto. It emits aspect-ratio:auto;.
Documented values (4)
auto, square, video, [auto_16/9]
object-fit
Interactive example.
Prefixes: object-fit. Example: object-fit:contain. It emits object-fit:contain;.
Documented values (6)
contain, cover, fill, none, scale-down, [scale-down]
object-position
Interactive example.
Prefixes: object-position. Example: object-position:top. It emits object-position:top;.
Documented values (10)
top, bottom, left, right, center, top-left, top-right, bottom-left, bottom-right, [25%_75%]
will-change
Interactive example.
Prefixes: will-change. Example: will-change:auto. It emits will-change:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
auto, scroll-position, contents, transform, [transform,opacity]
dynamic-range-limit
Interactive example.
Prefixes: dynamic-range-limit. Example: dynamic-range-limit:standard. It emits dynamic-range-limit:standard;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
standard, no-limit, constrained, [dynamic-range-limit-mix(standard_40%,no-limit_60%)]
text-rendering
Interactive example.
Prefixes: text-rendering. Example: text-rendering:auto. It emits text-rendering:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
auto, optimizeSpeed, optimizeLegibility, geometricPrecision
image-rendering
Interactive example.
Prefixes: image-rendering. Example: image-rendering:auto. It emits image-rendering:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
auto, crisp-edges, pixelated, smooth, high-quality
image-resolution
Interactive example.
Prefixes: image-resolution. Example: image-resolution:from-image. It emits image-resolution:from-image;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
from-image, 1dppx, 2dppx, 96dpi, 300dpi