Overview

Four layers, and every one of them is data rather than a decision made in a component. Primitives set the scales, roles give them meaning, derived values follow the roles by formula, and per-component tokens fine-tune a single component without touching the rest.

• A primitive does not depend on the theme: there is no dark version of a gap. A role does: it is what changes when the theme switches.
• Derived values are never written down. --gr-primary-hover is a formula over --gr-primary, so repainting the role moves its states with it.
• The tables here are generated from tokens/*.json of the installed package. They cannot drift from the library, because there is nothing to drift: this page has no copy of the values.

This section has no token group of its own: it explains the system rather than listing values.

Source: @feugene/granularity 0.41.0, tokens/*.json