Update Winter logos & use CSS variables for backend colour

[LukeTowers]

Core's backend colours were hard-coded as literals across ~90 LESS files, so dark mode or any theming meant hunting down every rule that painted something. This routes them through a single token block and fixes the accessibility problems that surfaced while reviewing the result.

How the tokenisation works

Every rewrite keeps the original value as the var() fallback:

color: #666666;   ->   color: var(--wn-text, #666666);

So compiled output is unchanged if the token block is ever absent, and the change can be reversed exactly.

653 colour sites across 83 LESS files now resolve through 169 tokens in modules/system/assets/ui/less/tokens.less. That file is imported by storm.less, so the :root block ships in storm.css. The tokens fall into these groups:

group	count	values
Neutral scale, snapped onto the design system's slate/indigo ramps	28	changed
Identity colours (flash, callout, chart, file-type icons…), named from the LESS variable they already sat on	68	preserved exactly
Inline colours with no variable to borrow a name from, named by source file + role	69	preserved exactly
Focus indicators, chosen by backdrop	2	new
Fancy tab colours derived at runtime via color-mix	2	new, see below

tokens.less is maintained directly, and each entry records the literal it replaced.

What stays literal, and why

87 hex literals remain, each one deliberately:

• Compile-time locked (~52): LESS evaluates darken()/mix()/saturate() at build time, so a variable feeding one cannot become a var(). These are concentrated in global.variables.less, global.mixins.gradient.less and the other *.variables.less/mixin files. For example, @color-list-selection-text feeds a darken() on hover.
• Rich editor (27): richeditor.less imports the DRM-gated Froala vendor LESS, so its CSS can't be rebuilt from core. The .fr-view styles in _base_styles.less and editorsetting/default_styles.less are rendered inside Froala's iframe, where :root custom properties from the parent document never reach.
• Print (7): site.print.less forces backgrounds transparent, so a dark theme redefining the tokens would print near-white text onto white paper.
• Dead fallback (1): .tt-dropdown-menu in install.less declares its border twice, and the rgba() line always overrides the hex one.

Also left alone:

• Mail brand stylesheet: it renders into email, where custom properties don't reach, and a client that doesn't understand var() discards the whole declaration.
• rgba() shadows and overlays: a token pass over these was tried and reverted. Tokenising the channel triplet lets a theme change a shadow's hue but not its strength, and strength is what dark mode actually needs. Role tokens holding a complete rgba() are the better shape, and belong with the dark-mode pass.

What actually changes colour

• The 28 neutral-scale tokens. The backend shifts from neutral grey toward blue-slate; the largest single change is body text #666666 -> #445a6b.
• The fancy-layout tab colours. See the accessibility section.

Everything else (identity and inline colours) is byte-identical to before.

Accessibility fixes

Reviewing the result surfaced three pre-existing problems in the fancy form layout:

• Tabs had no usable focus indicator. The visible tab is not the anchor's box: it is span.title plus two pseudo-elements skewed ±20° hanging off either end, so the browser's outline drew a rectangle through the angled corners. Replaced with an inset bar on the three pieces that form the shape.
• Toolbar buttons had no focus styling at all. They are transparent and text-only, box-shadow is removed, and only opacity changed on :hover. .btn carries a global outline: none !important, so the ring is drawn with box-shadow.
• Focusing a tab shifted the strip up 2px, permanently. The strip is overflow: hidden, which still makes it a scroll container. The browser scrolled the tab's intentional overhang into view, and the offset survived blur. Fixed with a negative scroll-margin.

Focus colour is chosen by backdrop: white on the dark master strip, and #103141 on the brand strip, where white reaches only 2.8:1, below the 3:1 that WCAG 1.4.11 asks of a focus indicator.

Separately, the fancy tab strip, inactive tab and active tab sat within ΔE 2.3–4.4 of each other, leaving the inactive tab nearly invisible. They now derive from the brand colour via color-mix at ~11 ΔE steps, which also means they follow custom branding at runtime instead of baking a darken() in at compile time. Those tokens are declared inside @supports, so where color-mix is unsupported the token stays undefined and each use site falls back to its literal. The inactive tab label alpha also goes from .35 to .8.

Other changes

• Refreshed backend brand assets (logos, favicon, icons).
• The fancy delete button only renders a visible label when it actually has a title.
• Table error rows get their own --wn-surface-error / --wn-table-error instead of borrowing a neutral hover token.
• Rebuilt the compiled CSS for export, import, relation and mediafinder. These aren't registered bundles, so winter:util compile less never touches them, and without a rebuild the LESS changes would have been inert. The rebuild also picks up older drift: import.css still had @brand-danger's old #ab2a1c baked in.

Verification

• Structural: collapsing the tokens back out of the compiled CSS and diffing against a pristine build shows no selector painting a different colour set, other than the expected neutral-scale and fancy-tab changes. No rule was dropped, added or malformed. The only text-level differences are cssnano repacking shorthands once a rewrite made two values textually equal. (Re-run after merging develop: the only new selectors are develop's own .list-selection rules from Add "select all records matching this query" to list bulk actions #1542.)
• Contrast: WCAG 2.1, measured across the 27 text/background token pairs that genuinely co-occur on an element. No pair that passed AA now fails. Body text improves (5.74 → 7.19 on inputs, 5.27 → 6.55 on hover surfaces). Nine pairs lose some contrast: six stay comfortably above AA (e.g. heading text 11.0 → 10.0), and three were already failing. In total, 11 pairs were failing before this work, and none are fixed here.
• Focus behaviour: verified in-browser with real keyboard navigation on both tab variants. The indicator follows the tab shape, there's no UA ring on mouse click, and the strip no longer shifts.
• Both asset pipelines (winter:util compile less for winter.css, Mix for storm.css) compile clean. Every var(--wn-*) reference resolves to a definition, and no token is unused.

Known follow-ups

• The ~52 compile-time-locked literals need either color-mix or precomputed pairs before dark mode can be a pure token redefinition.
• Shadows and overlays need role tokens (--wn-shadow-sm, --wn-overlay-backdrop, …) as part of the dark-mode pass.
• The 11 pre-existing contrast failures (datepicker selected state, progress bar, flash default, loading indicator, file-upload progress, …) are now each a one-line fix in tokens.less.

Summary by CodeRabbit

• New Features

  • Added theme-aware color customization across administration screens, forms, tables, lists, media tools, editors, notifications, and dialogs while preserving default colors.
  • Added clearer keyboard focus indicators for tabs and form controls.
  • Added dedicated styling for table error states and updated standard logo assets.

• Style

  • Refined import colors, media finder visuals, tab focus behavior, and selected-state presentation.
  • Improved print styling to remain independent of screen themes.