Layer sets tokens

Legend:

• *Indicates potential component level tokens
• Highlight: name is undecided still
• Highlight: need to evaluate with new structure

Token naming convention

[element] - [role] - [set]- [state]

Terms:

• Element: the part of the ui the token is being applied to, (ie border, button).
• Roles/Variants: the different specific visual or functional purpose of a single element.
  • Roles/Variants can enforce hierarchy (ie primary, secondary) or refine the usage of the element (ie subtle, danger).
• Set: the pre-configured set of tokens that pair together. Has implied hierarchy.
• State: the interactive state (ie hover, active) being applied to its token parent.

Guidance:

• Element always comes first and is the only required "piece" of a token name.
• Variant, order, and state can be skipped if not needed