Semantic colours

Semantic roles that map to primitives per mode

Each colour here has a role, like "page background" or "error border", and maps to a different primitive value depending on whether the UI is in light or dark mode. Components only reference these roles, so switching themes is just swapping which primitives each role points to. Toggle the mode above to see the values change.