Semantic Tokens

---

tags: [tokens]

Semantic Tokens

Semantic and Semantic tier tokens define design patterns shared across the system. The calcite component background scale color.foreground.1, color.foreground.2, color.foreground.3 is an example of Semantic tokens. While Semantic and Semantic tokens can be considered somewhat interchangeable, only Semantic tokens have compound values for specific context-modes like "light" and "dark". Semantic tokens always have a single value that is a reference to either a Semantic or Core token. The most common use case is for setting the system defaults. Semantic and Semantic tokens are used throughout the Calcite components either directly or through component tokens like button.color.background.

corner-radius.default = corner-radius.none

That way, if the system ever needs to adjust the exact value of corner-radius.default we can do so without causing major breaking changes.

New Semantic Tokens

Due to the cascade of effects changes to Semantic tier tokens will cause, updates must go through a long approval process. Please loop in Matt, Skye, and Franco.