This is the Standard reference for svgs.
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.
fill-color
Interactive example.
Prefixes: fill-color. Example: fill-color:ink-100. It emits fill:var(--color-ink-100);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (476)
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
fill-opacity
Interactive example.
Prefixes: fill-opacity. Example: fill-opacity:0. It emits fill-opacity:0%;.
Documented values (15)
0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80,
90, 95, 100
fill-rule
Interactive example.
Prefixes: fill-rule. Example: fill-rule:nonzero. It emits fill-rule:nonzero;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (2)
nonzero, evenodd
stroke-color
Interactive example.
Prefixes: stroke-color. Example: stroke-color:ink-100. It emits stroke:var(--color-ink-100);. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (476)
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
stroke-width
Interactive example.
Prefixes: stroke-width. Example: stroke-width:0. It emits stroke-width:0px;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (14)
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1/2, [2px],
[2px,_10%], $strokeWidth
stroke-opacity
Interactive example.
Prefixes: stroke-opacity. Example: stroke-opacity:0. It emits stroke-opacity:0%;.
Documented values (15)
0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80,
90, 95, 100
stroke-dasharray
Interactive example.
Prefixes: stroke-dasharray. Example: stroke-dasharray:none. It emits stroke-dasharray:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (12)
none, 1, 2, 3, 4, 5, 6, 7, 8, 9, [4px_2px], $dasharray
stroke-dashoffset
Interactive example.
Prefixes: stroke-dashoffset. Example: stroke-dashoffset:0. It emits stroke-dashoffset:0px;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (13)
0, -2, 1, 2, 3, 4, 5, 6, 7, 8, 9, [2px],
$dashoffset
stroke-linecap
Interactive example.
Prefixes: stroke-linecap. Example: stroke-linecap:butt. It emits stroke-linecap:butt;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (3)
butt, round, square
stroke-linejoin
Interactive example.
Prefixes: stroke-linejoin. Example: stroke-linejoin:miter. It emits stroke-linejoin:miter;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (7)
miter, round, bevel, crop, arcs, fallback, [miter_round]
stroke-miterlimit
Interactive example.
Prefixes: stroke-miterlimit. Example: stroke-miterlimit:1. It emits stroke-miterlimit:1;.
Documented values (4)
1, 2, 4, 10
clip-rule
Interactive example.
Prefixes: clip-rule. Example: clip-rule:nonzero. It emits clip-rule:nonzero;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (2)
nonzero, evenodd
paint-order
Interactive example.
Prefixes: paint-order. Example: paint-order:normal. It emits paint-order:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
normal, fill, stroke, markers
marker-start
Interactive example.
Prefixes: marker-start. Example: marker-start:none. It emits marker-start:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (3)
none, url(#arrow-start), [url(#arrow-start)]
marker-mid
Interactive example.
Prefixes: marker-mid. Example: marker-mid:none. It emits marker-mid:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (3)
none, url(#marker-dot), [url(#marker-dot)]
marker-end
Interactive example.
Prefixes: marker-end. Example: marker-end:none. It emits marker-end:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (3)
none, url(#arrow-end), [url(#arrow-end)]