Raw values live at the bottom. Bone, ink, and vermilion are the numbers. Semantic names alias them: --surface, --ink, and --action. Components use only those names. A button asks for --action. It does not ask for a hex, and it does not ask for stone.900.
Dark mode changes the aliases, not the component. In the dark theme, --surface points at the dark ground and --ink points at the light text. --action still points at vermilion, shifted only so it stays clear on that ground. Flipping every colour on the page is not a theme. That flip also flips pictures and the contrast you already checked, and it can turn the accent into something that is no longer vermilion.
The demo stacks the same three names in Light and in Dark. The values change. The action stays vermilion against the surface.
How to check it
- Search the component CSS for a hex. Surface and text come from --surface and --ink.
- Switch theme and open the component file again. It did not change. The alias file did.
- Look at the accent after the switch. It is still vermilion, not a flipped blue or a muddy brown.
:root {
--stone-900: #16150f;
--bone: #f4f1e8;
--vermilion: #c0300f;
--surface: var(--bone);
--ink: var(--stone-900);
--action: var(--vermilion);
}
[data-theme="dark"] {
--surface: #14130e;
--ink: #ece7d8;
--action: #ff5a30;
}