The widget configuration
The value each token takes inside the area, keyed by token name; a token
left out or given undefined keeps whatever the cascade already gives it. A value naming a token of the same
kind stands for whatever that one carries, so an area is set from the design system rather than from a literal.
What the area holds, restyled by the tokens assigned to it and laid out as it would be without the area.
The styled area
Creates a styled area.
Assigns the tokens given to an area of the interface, so everything inside it that reads one is restyled and everything that doesn't is left alone: a token inherits, which makes an enclosing element the scope the design system is retuned over. A token assigned nearer the thing it paints wins, so an area nests inside another and settles what the wider one left.
Tokens are named through the published contract rather than as literal strings, so a renamed token breaks the build instead of silently losing its styling; a token mapped to
undefinedis left out, so a conditional override is expressed inline. A screen that already renders an element of its own assigns the same tokens to it with css, sparing the extra wrapper.The area takes no box of its own, so what it holds sits in the row, the grid or the flow around it exactly as it would without the wrapper. Having no box, it takes nothing from the box tokens,
padding,borderRadiusandboxShadow: an area to be padded, rounded or lifted is a box instead. Being an element all the same, it stands between what it holds and whatever encloses that: a rule reaching its children by> *,:first-childor:nth-child()stops at the area, and a screen styling what it holds that way reaches for a class instead.