Pick the job before the value. A token is text, a surface, a stroke, or an action. State comes after that job, and only for a state that can happen. The raw colour sits at the bottom of the chain. Components do not call it.
stone.900 is a raw value. ink is the semantic name for text. button.label is the component token, and it points at ink. Change the theme by pointing ink somewhere else. Do not walk through every button looking for a hex.
Do not publish a token because the value looks like a colour. A number is not a colour, and a colour is not a duration. Do not publish pairs that cannot happen. Disabled and hover do not exist together, so disabled-hover is not a token. If the state matrix has no cell, the chain has no name.
The demo draws that chain as three lines: stone.900, then ink, then button.label.
How to check it
- Open a component style. It uses button.label, not a hex and not stone.900.
- Find a token whose name is only a value, such as blue or 400. Rename it to the job, or delete it.
- Search for disabled-hover and for any other pair the matrix marks as impossible.
:root {
--stone-900: #16150f;
--ink: var(--stone-900);
--button-label: var(--ink);
}
.button {
color: var(--button-label);
}