v156 · @property
Token sheet, before and after
A design system registers a lot of tokens. Written the old way, most of the lines are inherits: false; repeated. Here is a real token sheet both ways, with both sets of rules applied to the same component so you can confirm the rendering is identical while the sheet gets a third shorter.
The same tokens, two sheets
Only syntax earns its place on most tokens: it is what makes a value typed, animatable, and rejected when it is wrong. inherits: false is the default an omitted descriptor no longer gives you — dropping it means these tokens now inherit, which for a design system is usually what you wanted anyway.
Before — every descriptor spelled out
After — only what departs from the default
- Lines saved
- —
- Characters saved
- —
- Reduction
- —
Both applied to the same component
Each card is styled entirely from the registered tokens. If the two sheets are equivalent, the cards are indistinguishable.
Styled from the "before" sheet
Padding, radius, border width and colour all come from registered custom properties.
Styled from the "after" sheet
Padding, radius, border width and colour all come from registered custom properties.