Comment by charrondev a day ago
What do you mean by semantic tokens?
This exact type of functionality has caused a major project a work on to use CSS in JS (for relative colors and contrast colors.
I’m glad to see this type of thing coming around the corner and look forward to it being widely available in a couple years.
Aren't there many, many schemes for naming tokens in design systems? Aren't you being a bit forward in presenting this as a general practice?
https://medium.com/eightshapes-llc/naming-tokens-in-design-s...
Nathan is talking about naming schemes within each tier I mentioned, not different tiers. That blog is detailing naming schemes for the semantic and component layer.
The primitive/semantic/component set of tiers are a general practice. Naming within them heavily differs (and should!). The names you use for the individual tokens depend on goals and intent - ie Google’s material’s semantic layer uses a naming schema that’s designed for colorful variety of themes (albeit at the expense of clarity of how they should be used), whereas Apple uses a far more simplified naming schema since the design of their apps has far fewer design differences.
Not parent, but the generalization is true. There’s usually a base layer (red/300, etc) and a more semantic layer (.text-danger).
As your link covers, there’s then a million different ways to implement/extend that based on whatever theming and systems you’re implementing on top.
With regards to color on the web, semantic tokens refer to css variables that are named in a way that describes their use, ie:
* bg-brand (this would be used whenever you need your brand color as a background)
* text-danger (likely a red text color)
* icon-warning-hover (likely a dark yellow-orange that's slightly different from icon-warning)
Generally speaking, there are three "levels" of tokens: primitive, semantic, and component. Primitive tokens describe the value. In the case of color, this might be a color ramp. IE red/100, red/200, red/300. Semantic tokens reference primitive tokens. IE bg-brand might have its value set to blue/300. This layer is sometimes called a "reference" layer because of this, but I'm not a fan of that nomenclature since the component layer also references the semantic layer. The component layer is one that describes where in a component the token should be used, ie button-bg or button-text. I highly, HIGHLY recommend against using a component layer though in all but the most extreme multi-brand situation. If you aren't unilever, you should never use component tokens.