Design tokens
How Orvio extracts tokens from a product's source, and why the source stays the authority.
Design tokens are a product's named values: colours, type, spacing, radii. Orvio finds them in the source and lists them with their values and where they are defined.
Where tokens come from#
Orvio reads the product's source. For a static product, that is its CSS custom properties, such as --sotto-blush: #F2D2C8. The list is in design-system/tokens.json in the release, and the read_tokens tool serves it.
Each token has:
- a name as written in the source,
- a category, such as
color, - a value: the raw text and, when Orvio understands it, a normalised form (a colour as a hex),
- the file and line that define it,
- how it was found (
extracted).
A token whose value refers to another token is an alias. Its value names the target.
The source stays authoritative#
The token index lists facts Orvio extracted. If it and the source ever disagree, the source wins. read_tokens returns the files that define the tokens beside the list, so you can check.
Themes#
A product can have several themes, for example light and dark. When it does, each token knows its theme and read_tokens accepts a theme.
Ask for tokens#
In the tool#
See read_tokens for the inputs and a result.
Honest limits#
The extraction records what it finds. If a product has no tokens, the result says "The package records no tokens." and lists any limitations of the extraction.