Section tones

data-tone pins a subtree to a tonal palette by remapping the semantic surface, text, border and focus tokens, plus the status and flag pills (ADR 0013, ADR 0010). Any component inside adapts, because a component only ever reads the semantic layer — there is no tone-aware code in any block.

The tone is fixed and the shade shifts per site mode, so a tone reads as itself in both modes while still feeling native to each.dark and light hold their tone in both;inverse is whatever opposes the page; accent is the gentle same-tone raise; garden is the brand mint on a light site and the native dark surface on a dark one, because pale mint on a dark page reads wrong (ADR 0014).

Toggle the theme to watch each shade shift. Every component entry carries a tone switcher for the same reason this page exists.