Level three

Component Tokens

Component tokens have the most specific scope.

Each component token will ideally be applied in a single place (the element of the component that the token corresponds to). This can be identified via the naming schema

eg. colors.button.label.hover or typography.text-input.label.active

For this reason, component tokens are very rarely changed and are not included as a part of the “theme file”. It may be helpful to think of component tokens as a kind of reference point or anchor to certain areas of your design and components.

These tokens are usually assigned a Context token as their value, however sometimes it may be necessary to assign a Foundation token (eg. if the component token value should remain static when themes are changed)

Example: