04
3 min
Component tokens
Semantic tokens get you close. A component still needs its own vocabulary. A button has a background, a foreground, a border, a radius.
Component tokens are the last hop. button-bg points to primary. button-radius points to radius-md. The button stays ignorant of raw values and still ends up fully specified.
This is also where variants attach. A destructive button doesn't restyle itself with a hex. It points button-bg at destructive.
Re-point any one token. Watch only that facet change.
Re-point one token. Only that facet should move. The button never reads a primitive.
You never opened the button. You changed what one of its tokens points to. The other three held.