component-tokens

Component-scoped CSS design tokens, layer 3 of the architecture, mapping semantic values onto the parts of a component.

Overview

What a component token is, why the extra indirection is worth it, the 27 components covered, and how to install the…

Naming

The component token naming grammar, the rules behind it, and why colors invert the usual property order.

Customizing

How to override a component token, which layer to reach for, and when a new token is warranted.

Reference

Every token for all 27 components, generated from the JSON sources so it can never drift from the shipped CSS.

DTCG format

The Design Tokens Community Group JSON format as used for component tokens, including group-level types.

Style Dictionary

How component token JSON is compiled to CSS, and how cross-package references to design-tokens are resolved.