ADR-0138 The flat surface yields to the tier where they share a name
#Context
The helm display, set in Storybook in field-night, drew its panels in #2b3035, a dark grey, where the theme draws near-black. The colour came from wolf-rayet.css, the flat surface the grouped components were built on, not from the four-theme tier.
Five names are declared by both: --wr-surface-raised, --wr-border-subtle, --wr-family-display, --wr-family-body and --wr-family-mono. The tier declares them on [data-wr-theme="…"]. The flat surface declares them on :root and, for dark, on :root[data-theme="dark"], which is the more specific selector. So in every dark page the flat value replaced the tier's, and in a light page whichever stylesheet loaded last won. ADR-0017 keeps the tier's own name sets disjoint and checks it; nothing checked the tier against the flat surface.
Four of the five are the same role under one name, and the interior values already agree: the flat light and dark surface-raised are the tier's interior values to within a unit. The fifth is not. The flat --wr-border-subtle is a translucent divider the grouped components draw between rows, sections and split buttons; the tier's is an opaque rule role. Nine reads in button.css, content.css, forms.css and overlays.css mean the divider. The docs site's 25 reads sit among tier roles (text-primary, surface-page, surface-inset) and mean the tier's.
#Decision
Where the flat surface and the tier are one role, the tier wins wherever a theme is set. The flat declarations of surface-raised and the three families move to :where() blocks at the end of wolf-rayet.css, at no specificity. A page with a tier theme reads the tier; a page with none still reads the flat value.
Where they are two roles, they get two names. The flat divider is --wr-divider, and the nine grouped reads use it. --wr-border-subtle is the tier's alone.
After this no name is declared by both at normal specificity.
#Rejected options
Delete the four duplicates from the flat surface. The tier would own them outright. It lost because a page that loads the flat surface without a tier theme would lose them, and the flat surface exists to serve exactly that page.
Raise the tier selector's specificity instead. One change in the generator. It lost because it would reach every tier name, not these five, and would make the tier outrank anything a consumer writes at :root.
Point the grouped components at the tier's border-subtle. One name for one idea, eventually. It lost because the grouped components were measured against the translucent divider, and moving nine reads to an opaque grey is a redesign of those components, not a repair of a name.
#Consequences
Field night in Storybook draws its own panels. The docs site's dark borders become the tier's grey rather than the translucent divider, which is what its stylesheet asked for.
Four unthemed and nine themed scenes moved on darwin-arm64, by at most 3e-5, and no verdict changed. They are the three data table scenes, their siblings and one proof screen, whose row dividers are the grouped divider again.
Adds one check to tokens:verify, beside ADR-0017's: no name is declared by both the flat surface and the tier at normal specificity.