Component

A tier of token meant to describe a specific interface concept. The naming of this token will consider a single user interface pattern, and then name according to that pattern.

The responsibility of these tokens is typically matched to the component owner to which the token is assigned. The value assigned to these tokens can be permanent or reference another token as an alias.

Examples

checkbox.checked.bgColor = color.blue.500
modal.bgColor = surface.elevated.bgColor

These tokens are helpful for following reasons:

1. These tokens support changes meant to affect very specific parts of the interface, opposed to more generic concepts that a semantic token would handle.