/* ========================================================================== COLOUR FOLLOWS THE ROW — DEC-0063, TASK-0098. The operator sets a colour scheme on the ROW. Everything our components draw inside that row follows it, and nothing has to be matched by hand. ── WHY THIS IS SIX TOKEN DECLARATIONS AND NOT 290 EDITS ───────────────── The audit found ~290 colour declarations across our 18 in-row stylesheets, and they are not 290 different colours. They are a handful of TOKENS used over and over: `--ms-navy` 35 times, `--ms-rule` 24, `--ms-navy-60` 7, `--ms-navy-40` 9. Every one of those is navy, or navy at an alpha. So the scheme is wired in at the TOKEN, once, instead of at each call site. A stylesheet that never mentions a colour scheme still follows one. ── WHY IT IS DECLARED ON [data-dw-colorscheme] AND NOT ON :root ───────── THIS IS THE WHOLE MECHANISM AND IT IS EASY TO GET WRONG. A custom property is substituted at the element where it is DECLARED, not where it is used. Declaring :root { --ms-ink: var(--dw-color-foreground, #0A2979); } resolves `--dw-color-foreground` AT :root, where no scheme applies, so it computes to the fallback once and that single value inherits into every row. It would look correct and would never track anything. Declaring it on `[data-dw-colorscheme]` instead re-resolves it on every element that carries a scheme — `main`, each `section`, each column — so each row computes its own value and passes it down. That is why the selector is an attribute selector and not `:root`. The `:root` block below exists only to give the tokens a value OUTSIDE any scheme-bearing element. It is the fallback, not the mechanism. ── WHY NOTHING CHANGES AT REST ────────────────────────────────────────── Read from Files/System/Styles/ColorSchemes/mouldshop.css, which DW generates from the admin colour schemes: scheme --dw-color-background --dw-color-foreground ---------- ---------------------- --------------------- default #ffffff #0A2979 light_1 #efefef #0A2979 medium_1/2 #6CB2DE #efefef dark_1/2 #0A2979 #efefef `default`'s foreground IS `--ms-navy`, and `
` carries data-dw-colorscheme="default" from the area (AreaColorSchemeId=default, read from the database). A row with no scheme of its own inherits that. So on every row that has no scheme set, these tokens compute to exactly the literals they replace — #0A2979 and rgba(10, 41, 121, a). DEC-0063 point 3 ("no scheme on the row = the look stays as today") is satisfied by arithmetic rather than by a second set of rules. The rgb() triples come from DW too: it emits `--dw-color-foreground-rgb: 10, 41, 121` beside every colour, which is what makes the alpha variants derivable at all. ── WHAT DELIBERATELY DOES NOT INHERIT (DEC-0063 point 5) ──────────────── Brand fills that carry their own text colour keep their fixed colours: the navy BUY NOW, the light blue SPECIFICATION, the filled variant-table badge, the hero and slide overlays whose white text sits on a photograph. Those are readable on every scheme because the fill travels with the text, and making them follow the row would break the pair. `--ms-white` is untouched for the same reason. It is never text on the row's ground in our stylesheets — it is always text on one of those fills. ========================================================================== */ :root { /* Outside any scheme-bearing element. Identical to the literals these tokens replace, so chrome and anything else off the grid is unaffected. */ --ms-ink: var(--ms-navy, #0A2979); } [data-dw-colorscheme] { /* Text on the row's own ground. */ --ms-ink: var(--dw-color-foreground, #0A2979); /* Rules, dividers, muted text and disabled states: the same ink at alpha. These four token names are already used 40 times across our stylesheets, so re-pointing them here is what carries most of this packet. */ --ms-rule: rgba(var(--dw-color-foreground-rgb, 10, 41, 121), .35); --ms-navy-40: rgba(var(--dw-color-foreground-rgb, 10, 41, 121), .40); --ms-navy-60: rgba(var(--dw-color-foreground-rgb, 10, 41, 121), .60); --ms-navy-80: rgba(var(--dw-color-foreground-rgb, 10, 41, 121), .80); } /* ========================================================================== TASK-0099 — THE THREE COLOURS TASK-0098 LISTED RATHER THAN GUESSED. These could not use the `--ms-ink` mechanism above, and the reason is arithmetic. `--ms-ink` works because `default`'s foreground IS `--ms-navy`, so re-pointing it changes nothing at rest. The accent blue (#6CB2DE) and the muted grey (#55607a) are NOT any scheme's foreground, so the same substitution would repaint them on every row including the ones nobody has touched. So these tokens are CONDITIONAL: they change only on a row that has a scheme explicitly set and not `default`. :root the value as it is today [data-dw-colorscheme] still today's value -- `default` and the empty attribute both fall through to :root ...:not(""):not(default) the row's foreground The empty attribute has to be excluded as well as `default`. DW writes `data-dw-colorscheme=""` on every column and on every row with no scheme chosen, so matching bare `[data-dw-colorscheme]` would repaint the whole site -- and a column nested inside a dark row would RESET the token its parent had just set, which is the subtler half of the same bug. ── WHAT THIS COSTS, said rather than discovered later ─────────────────── On a non-default row the accent and the ink become THE SAME COLOUR, because both resolve to the row's foreground. The buy box's "Manufacturer:" label and its value, and the price against the body text, then differ by WEIGHT ALONE rather than by weight and hue. That is what "take the row's foreground" means and it is the packet's instruction; it is recorded here because it is a visible change to the design on coloured rows, and if it reads wrong the fix is a design call, not a bug. ========================================================================== */ :root { --ms-accent-ink: var(--ms-blue, #6CB2DE); --ms-muted-ink: var(--ms-muted, #55607a); } [data-dw-colorscheme]:not([data-dw-colorscheme=""]):not([data-dw-colorscheme="default"]) { --ms-accent-ink: var(--dw-color-foreground, #6CB2DE); --ms-muted-ink: rgba(var(--dw-color-foreground-rgb, 85, 96, 122), .70); }