ConstReads a design system token.
Gives the reference a CSS value takes a token through, so a consumer paints with the design system wherever a value is written by hand rather than by a rule: an inline style, an SVG presentation attribute, a length handed to a widget that takes one.
<span style={{ backgroundColor: css.var(tile.colorStrong) }}/>
The reference resolves wherever it is read, so it carries whatever an app overrode and whichever colour scheme is in force, which a copy of the default value would not. Assigning a token for a subtree goes through css itself instead, and a consumer that cannot count on the stylesheet being loaded at all writes the reference by hand, naming in it the fallback it wants.
The custom property of the token to be read, as given by tile
A var() reference resolving to the value property carries on the element reading it
The value each token takes, keyed by token name
An immutable style declaration assigning the custom property of each token
given a defined value in tokens its text form, or a reference to the token it names, and applying the CSS
property as well for the typography and the colours the page carries its own defaults in, and for the box tokens
Overrides design system tokens for a subtree.
Assigns each named token its value, restyling the elements that read it and leaving the rest untouched:
A value naming a token stands for whatever that token carries, so one token is set from another without spelling out the reference, and an editor offers the names that belong where it is assigned, a colour offering colours and a text size the type and scaling ladders:
Anything else is a CSS value of the shape the token carries, so a colour where a length goes is rejected here rather than assigned and left to resolve to nothing. A number is converted to its CSS text form, sparing a scalar token the restatement as a string; a token mapped to
undefinedis left out, so a conditional override is expressed inline.The face, the size, the weight and the leading a page is written in are applied to the area as well as assigned to it, since the page states each of them once and nothing below reads them again; an area given one of the four is therefore written in it, rather than assigning a value nothing would consult. What an area holds inherits them as it inherits any other, so a size stated on an area compounds with a size stated on an area inside it, exactly as CSS has it. The text and background colours are applied the same way, so an area given either is painted in it.
The box tokens,
padding,borderRadiusandboxShadow, are read by no rule at all, and are applied to the element they are assigned to alone, padding, rounding or lifting it without reaching what it holds:Reading a token where a CSS value is written by hand goes through css.var instead.