@webority/theme 0.99.0 → 0.100.0

package/scss/_wui-aliases.scss

@@ -1,495 +0,0 @@
-// Portal component token aliases.
-//
-// The extracted component CSS (_wui-components.scss) references --color-* /
-// --radius-* / --shadow-* names. Those are aliases onto the canonical --wui-*
-// design tokens, so the component layer is self-contained: a consumer that
-// imports the theme gets the components fully styled, with no app-local token
-// layer required. Alias only — never declare a brand hex here.
-
-:root {
-  // Surfaces
-  /// meaning: Page background behind the content area.
-  --color-bg: var(--wui-bg-page);
-  /// meaning: Subtle raised background for side panels and bands.
-  --color-bg-subtle: var(--wui-bg-elevated);
-  /// meaning: Muted background for grouped areas and quiet controls.
-  --color-bg-muted: var(--wui-bg-muted);
-  /// meaning: Resting fill of input-like controls such as fields and selects.
-  --color-field-bg: var(--wui-field-bg);
-  /// meaning: Card and panel surface.
-  --color-surface: var(--wui-bg-light);
-
-  // Borders
-  /// meaning: Hairline border of cards, tables and dividers.
-  --color-border: var(--wui-border-light);
-  /// meaning: Softest border for inner dividers and list edges.
-  --color-border-light: var(--wui-border-soft);
-  /// meaning: Stronger border for emphasised separators.
-  --color-border-strong: var(--wui-border-strong);
-  // The resting and hover border of an input-like control.
-  // Decorative card and table borders stay on --color-border.
-  /// meaning: Resting border of an input-like control such as a field or select.
-  --color-field-border: var(--wui-field-border);
-  /// meaning: Hover border of an input-like control.
-  --color-field-border-hover: var(--wui-field-border-hover);
-  /// meaning: Unfilled track of a progress bar.
-  --color-progress-track: var(--wui-progress-track);
-  // Label text inside a progress bar fill.
-  /// meaning: Label text inside a progress bar fill.
-  --color-progress-label: var(--wui-bg-light);
-  // Icon ink on a solid status fill (the filled timeline dots): white in both modes, by design
-  // choice. White on the bright success and warning fills sits under the 3:1 icon floor, so the
-  // contrast gate does not measure this pair.
-  /// meaning: Icon ink on a solid status fill, such as a filled timeline dot.
-  --color-on-status-fill: #FFFFFF;
-  // Ink on a DEEP status fill (the -text tokens, used as a fill the way primary is): white in
-  // light mode, where those shades measure 5.5 to 6.2:1; near-black in dark mode, where -text is
-  // the bright fill.
-  /// meaning: Ink on a deep status fill used as a surface, such as a status badge.
-  --color-on-status-strong: #FFFFFF;
-
-  // Text ramp
-  /// meaning: Main heading and body ink.
-  --color-text: var(--wui-text-heading);
-  // Body copy on a tinted surface (alert bodies): a step softer than the heading ink.
-  /// meaning: Body copy on a tinted surface such as an alert body.
-  --color-text-body: var(--wui-text-1);
-  // A dark-ink glyph such as Bootstrap's .btn-close needs no filter on a light surface.
-  /// meaning: Filter applied to a dark-ink close glyph such as the alert close button.
-  --color-close-filter: none;
-  // The border of a focused / open / active control (input, select, OTP slot, dropzone).
-  // The soft primary tint, matching the soft resting border.
-  /// meaning: Border of a focused, open or active control such as an input or select.
-  --color-focus-border: var(--wui-primary-30);
-  // The keyboard focus ring every control draws on :focus-visible: an outline of this colour,
-  // width and offset. The primary ink clears 4.5:1 on every light surface and the dark primary
-  // on every dark one, so the ring keeps 3:1 whatever the brand. A coloured surface (a scrim, a
-  // brand hero) resets --color-focus-ring for its subtree. Inside a scroller that would clip an
-  // outer ring, the ring is drawn inset with --wui-focus-ring-inset.
-  /// meaning: Colour of the keyboard focus ring drawn on focus-visible controls.
-  --color-focus-ring: var(--color-primary-ink);
-  /// meaning: Width of the keyboard focus ring.
-  --wui-focus-ring-width: 2px;
-  /// meaning: Gap between a control and its keyboard focus ring.
-  --wui-focus-ring-offset: 2px;
-  /// meaning: Offset that draws the focus ring inside a scrolling container.
-  --wui-focus-ring-inset: calc(-1 * var(--wui-focus-ring-width));
-  // Pressed: a translucent wash of the control's own ink laid over whatever fill it has, so it
-  // reads one step deeper than hover on any surface and in either theme, with no motion.
-  /// meaning: Translucent wash laid over a control while it is pressed.
-  --color-pressed-overlay: color-mix(in srgb, currentColor 12%, transparent);
-  /// meaning: Scale a control shrinks to while it is pressed.
-  --wui-press-scale: 0.96;
-  /// meaning: Duration of the pressed feedback on a control.
-  --wui-press-duration: 80ms;
-  // Disabled: one opacity for every control that dims as a whole (a checkbox, a segmented option, a
-  // chip, a tab, an icon button). A text field does not dim; it takes the deeper disabled fill.
-  /// meaning: Opacity of a control that dims as a whole when disabled.
-  --wui-disabled-opacity: 0.5;
-  // The raised thumb that marks the selected option of a segmented control: white in light mode.
-  /// meaning: Raised thumb that marks the selected option of a segmented control.
-  --color-thumb: var(--wui-bg-light);
-  /// meaning: Secondary text for descriptions and muted copy.
-  --color-text-muted: var(--wui-text-2);
-  /// meaning: Tertiary text for hints, captions, timestamps and placeholders.
-  --color-text-subtle: var(--wui-text-3);
-
-  // Bootstrap colour vars bridged onto app tokens so un-tokenised BS text
-  // flips with data-theme.
-  --bs-body-color: var(--color-text);
-  --bs-emphasis-color: var(--color-text);
-  --bs-secondary-color: var(--color-text-muted);
-  --bs-tertiary-color: var(--color-text-subtle);
-  --bs-body-bg: var(--color-bg);
-  --bs-border-color: var(--color-border);
-
-  // Brand
-  /// meaning: Primary fill for buttons, selected states and borders.
-  --color-primary: var(--wui-primary);
-  /// meaning: Primary fill while a control is hovered or pressed.
-  --color-primary-hover: var(--wui-primary-pressed);
-  /// meaning: Soft primary tint behind selected and highlighted rows.
-  --color-primary-soft: var(--wui-primary-10);
-  // Text/icon colour for content sitting ON a solid --color-primary fill — see
-  // --wui-primary-text for why this is a different axis from the -text tokens below.
-  /// meaning: Text and icon colour on a solid primary fill.
-  --color-primary-text: var(--wui-primary-text);
-  // Label on the pressed primary fill (--color-primary-hover); the hover and press states read it.
-  /// meaning: Label on the hovered or pressed primary fill.
-  --color-primary-hover-text: var(--wui-primary-text);
-  // The primary as TEXT or a small glyph on a light surface: AA-safe whatever the brand (see
-  // --wui-primary-ink). --color-primary stays the fill, border and focus colour.
-  /// meaning: Primary as text and small glyphs on light surfaces, passing AA contrast.
-  --color-primary-ink: var(--wui-primary-ink);
-  // Ink on the primary ink used as a fill (the active step badge): the ink clears 4.5:1 against
-  // white by construction, so white in light mode; near-black on the lifted dark primary.
-  /// meaning: Ink on the primary ink used as a solid fill, such as the active step badge.
-  --color-on-primary-ink: #FFFFFF;
-
-  // Semantic status ramps
-  /// meaning: Info ink for icons and active states.
-  --color-info-active: var(--wui-info-active);
-  /// meaning: Vivid info fill for badges and dots.
-  --color-info: var(--wui-info);
-  /// meaning: Info border tone and the strongest soft info fill.
-  --color-info-50: var(--wui-info-50);
-  /// meaning: Info tint for soft fills and borders of alerts and badges.
-  --color-info-30: var(--wui-info-30);
-  /// meaning: Info tint behind info alerts and badges.
-  --color-info-20: var(--wui-info-20);
-  /// meaning: Soft background of info alerts and badges.
-  --color-info-10: var(--wui-info-10);
-  /// meaning: Faintest info wash for hover and soft backgrounds.
-  --color-info-5: var(--wui-info-5);
-  // No dedicated --wui-info-strong; active is the deepest info fill.
-  /// meaning: Deepest info fill, used where a strong info fill is needed.
-  --color-info-strong: var(--wui-info-active);
-  /// meaning: Soft info background for alerts.
-  --color-info-soft: var(--color-info-10);
-  // Use this — never --color-info — when the colour IS the text.
-  /// meaning: Info colour as text on light surfaces.
-  --color-info-text: var(--wui-info-text);
-  /// meaning: Info text on a soft info tint, such as an alert heading.
-  --color-info-text-on-soft: var(--wui-info-text);
-
-  /// meaning: Success ink for icons and active states.
-  --color-success-active: var(--wui-success-active);
-  /// meaning: Vivid success fill for badges and dots.
-  --color-success: var(--wui-success);
-  /// meaning: Success border tone and the strongest soft success fill.
-  --color-success-50: var(--wui-success-50);
-  /// meaning: Success tint for soft fills and borders of alerts and badges.
-  --color-success-30: var(--wui-success-30);
-  /// meaning: Success tint behind success alerts and badges.
-  --color-success-20: var(--wui-success-20);
-  /// meaning: Soft background of success alerts and badges.
-  --color-success-10: var(--wui-success-10);
-  /// meaning: Faintest success wash for hover and soft backgrounds.
-  --color-success-5: var(--wui-success-5);
-  /// meaning: Deep success fill behind white text, such as progress labels.
-  --color-success-strong: var(--wui-success-strong);
-  /// meaning: Soft success background for alerts.
-  --color-success-soft: var(--color-success-10);
-  // Use this — never --color-success — when the colour IS the text.
-  /// meaning: Success colour as text on light surfaces.
-  --color-success-text: var(--wui-success-text);
-  /// meaning: Success text on a soft success tint, such as an alert heading.
-  --color-success-text-on-soft: var(--wui-success-text);
-
-  /// meaning: Warning ink for icons and active states.
-  --color-warning-active: var(--wui-warning-active);
-  /// meaning: Vivid warning fill for badges and dots.
-  --color-warning: var(--wui-warning);
-  /// meaning: Warning border tone and the strongest soft warning fill.
-  --color-warning-50: var(--wui-warning-50);
-  /// meaning: Warning tint for soft fills and borders of alerts and badges.
-  --color-warning-30: var(--wui-warning-30);
-  /// meaning: Warning tint behind warning alerts and badges.
-  --color-warning-20: var(--wui-warning-20);
-  /// meaning: Soft background of warning alerts and badges.
-  --color-warning-10: var(--wui-warning-10);
-  /// meaning: Faintest warning wash for hover and soft backgrounds.
-  --color-warning-5: var(--wui-warning-5);
-  // No dedicated --wui-warning-strong; active is the deepest warning fill.
-  /// meaning: Deepest warning fill, used where a strong warning fill is needed.
-  --color-warning-strong: var(--wui-warning-active);
-  /// meaning: Soft warning background for alerts.
-  --color-warning-soft: var(--color-warning-10);
-  // Use this — never --color-warning — when the colour IS the text.
-  /// meaning: Warning colour as text on light surfaces.
-  --color-warning-text: var(--wui-warning-text);
-  /// meaning: Warning text on a soft warning tint, such as an alert heading.
-  --color-warning-text-on-soft: var(--wui-warning-text);
-
-  /// meaning: Danger ink for icons and active states.
-  --color-danger-active: var(--wui-danger-active);
-  /// meaning: Vivid danger fill for badges, dots and danger buttons.
-  --color-danger: var(--wui-danger);
-  /// meaning: Danger border tone and the strongest soft danger fill.
-  --color-danger-50: var(--wui-danger-50);
-  /// meaning: Danger tint for soft fills and borders of alerts and badges.
-  --color-danger-30: var(--wui-danger-30);
-  /// meaning: Danger tint behind danger alerts and badges.
-  --color-danger-20: var(--wui-danger-20);
-  /// meaning: Soft background of danger alerts and badges.
-  --color-danger-10: var(--wui-danger-10);
-  /// meaning: Faintest danger wash for hover and soft backgrounds.
-  --color-danger-5: var(--wui-danger-5);
-  /// meaning: Deep danger fill behind white text, such as the danger button.
-  --color-danger-strong: var(--wui-danger-strong);
-  /// meaning: Soft danger background for alerts.
-  --color-danger-soft: var(--color-danger-10);
-  // Use this — never --color-danger — when the colour IS the text.
-  /// meaning: Danger colour as text on light surfaces, such as validation messages.
-  --color-danger-text: var(--wui-danger-text);
-  /// meaning: Danger text on a soft danger tint, such as an alert heading.
-  --color-danger-text-on-soft: var(--wui-danger-text);
-
-  // Accent → warning ramp
-  /// meaning: Accent colour, aliased to the warning ramp.
-  --color-accent: var(--color-warning);
-  /// meaning: Soft accent background, aliased to the warning soft tint.
-  --color-accent-soft: var(--color-warning-soft);
-
-  // Scrim — one dim ink, two strengths: scrim for page-level backdrops
-  // (drawer, modal, shell), scrim-strong for media overlays carrying white
-  // ink (logo uploader, file previews).
-  /// meaning: Dim behind page-level backdrops such as drawers, modals and the shell.
-  --color-scrim: color-mix(in srgb, var(--wui-text-heading) 45%, transparent);
-  /// meaning: Stronger dim behind media overlays that carry white ink.
-  --color-scrim-strong: color-mix(in srgb, var(--wui-text-heading) 62%, transparent);
-  /// meaning: Ink on a scrim, such as the text of an overlay.
-  --color-on-scrim: var(--wui-bg-light);
-
-  // Elevation — in-page flat; only floating overlays lift (matches zeroed BS
-  // $box-shadow* utilities and --wui-shadow-card* none).
-  --shadow-sm: none;
-  --shadow-md: none;
-  --shadow-lg: none;
-  --shadow-overlay: var(--wui-shadow-overlay);
-  --shadow-overlay-lg: var(--wui-shadow-overlay-lg);
-
-  // Corner radii
-  --radius-sm: var(--wui-radius-sm);
-  --radius: var(--wui-radius-md);
-  --radius-lg: var(--wui-radius-lg);
-  --radius-xl: var(--wui-radius-xl);
-}
-
-// Dark mode tokens — shared by manual toggle ([data-theme="dark"], [data-bs-theme="dark"])
-// and automatic detection (@media (prefers-color-scheme: dark) when [data-theme="auto"]).
-// Extracted as a mixin to avoid duplication and ensure byte-identical output.
-@mixin wui-dark-theme {
-  // Token-level remap so every consumer of the shadow tokens flips in ALL dark
-  // paths (manual attributes and the auto media query) without per-component overrides.
-  --wui-shadow-thumb: var(--wui-dark-shadow-thumb);
-  --wui-shadow-thumb-hover: var(--wui-dark-shadow-thumb-hover);
-  --color-bg: var(--wui-dark-bg-page);
-  --color-bg-subtle: var(--wui-dark-bg-elevated);
-  --color-bg-muted: var(--wui-dark-bg-muted);
-  // Dark keeps the field on the muted fill (a light #F9FBFC would blow out the dark UI); the
-  // light-mode field-bg override lives on --wui-field-bg.
-  --color-field-bg: var(--wui-dark-bg-muted);
-  --color-surface: var(--wui-dark-bg-surface);
-  // A raised thumb is lighter than the muted track it sits on.
-  --color-thumb: color-mix(in srgb, var(--wui-dark-text) 12%, var(--wui-dark-bg-muted));
-
-  --color-border: var(--wui-dark-border);
-  --color-border-light: color-mix(in srgb, var(--wui-dark-border) 50%, transparent);
-  --color-border-strong: var(--wui-dark-border-strong);
-  --color-field-border: var(--wui-dark-field-border);
-  --color-field-border-hover: var(--wui-dark-field-border-hover);
-  --color-progress-track: var(--wui-dark-progress-track);
-  // Same near-black as --color-primary-text below: 4.97:1 or better on every bright fill.
-  --color-progress-label: #0F0F0F;
-
-  --color-text: var(--wui-dark-text);
-  --color-text-muted: var(--wui-dark-text-muted);
-  --color-text-subtle: var(--wui-dark-text-subtle);
-  --color-text-body: var(--wui-dark-text);
-  // Bootstrap's .btn-close glyph is ink-dark; on a dark surface it needs the white filter.
-  --color-close-filter: invert(1) grayscale(100%) brightness(200%);
-  // The light pastel focus border glows against a dark field; dark mode uses the dark theme's
-  // own primary (the button fill), which still clears 3:1 against every dark surface.
-  --color-focus-border: var(--wui-dark-primary);
-  // Numbered tints follow dark mode: the dark primary mixed into the dark surface, strongest at 50.
-  --wui-primary-5: color-mix(in srgb, var(--wui-dark-primary) 10%, var(--wui-dark-bg-surface));
-  --wui-primary-10: color-mix(in srgb, var(--wui-dark-primary) 16%, var(--wui-dark-bg-surface));
-  --wui-primary-15: color-mix(in srgb, var(--wui-dark-primary) 21%, var(--wui-dark-bg-surface));
-  --wui-primary-20: color-mix(in srgb, var(--wui-dark-primary) 26%, var(--wui-dark-bg-surface));
-  --wui-primary-30: color-mix(in srgb, var(--wui-dark-primary) 40%, var(--wui-dark-bg-surface));
-  --wui-primary-50: color-mix(in srgb, var(--wui-dark-primary) 62%, var(--wui-dark-bg-surface));
-  // Soft surfaces and the faintest danger tint follow dark mode as the primary tints do.
-  --wui-surface-mute: var(--wui-dark-bg-muted);
-  --wui-surface-soft: color-mix(in srgb, var(--wui-dark-primary) 10%, var(--wui-dark-bg-surface));
-  --wui-surface-violet-soft: color-mix(in srgb, var(--wui-dark-primary) 6%, var(--wui-dark-bg-surface));
-  --wui-danger-5: color-mix(in srgb, var(--wui-danger) 10%, var(--wui-dark-bg-surface));
-
-  // Re-bridge the Bootstrap colour vars onto the (now dark) app tokens so the
-  // named-var text/body/border utilities — .text-body-secondary, .text-muted,
-  // .text-body-emphasis, .border, backgrounds — flip with the theme. Declared
-  // here (not only in :root) so the dark theming is explicit and cannot be lost
-  // to a later-loading consumer rule that scopes --bs-* under [data-theme].
-  --bs-body-color: var(--color-text);
-  --bs-emphasis-color: var(--color-text);
-  --bs-secondary-color: var(--color-text-muted);
-  --bs-tertiary-color: var(--color-text-subtle);
-  --bs-body-bg: var(--color-bg);
-  --bs-border-color: var(--color-border);
-  --bs-secondary-bg: var(--wui-dark-bg-surface);
-  --bs-tertiary-bg: var(--wui-dark-bg-muted);
-  // Bootstrap's .bg-* / .text-secondary / .bg-body-tertiary utilities read the --bs-*-RGB
-  // triplets (for -opacity support), NOT the plain vars above — without these overrides they
-  // keep their compiled LIGHT triplet in dark mode (a white .bg-body on a dark portal). The
-  // triplets mirror the dark hexes in _tokens.scss (Bootstrap's own --bs-x + --bs-x-rgb pattern).
-  --bs-body-bg-rgb: 15, 17, 23; // --wui-dark-bg-page #0f1117
-  --bs-body-color-rgb: 230, 232, 238; // --wui-dark-text #e6e8ee
-  --bs-emphasis-color-rgb: 230, 232, 238; // --wui-dark-text #e6e8ee
-  --bs-secondary-color-rgb: 180, 185, 198; // --wui-dark-text-muted #b4b9c6
-  --bs-tertiary-color-rgb: 138, 144, 160; // --wui-dark-text-subtle #8a90a0
-  --bs-secondary-bg-rgb: 24, 27, 35; // --wui-dark-bg-surface #181b23
-  --bs-tertiary-bg-rgb: 35, 39, 51; // --wui-dark-bg-muted #232733
-  --bs-border-color-rgb: 42, 47, 58; // --wui-dark-border #2a2f3a
-
-  --color-primary: var(--wui-dark-primary);
-  --color-primary-hover: var(--wui-dark-primary-hover);
-  --color-primary-soft: color-mix(in srgb, var(--wui-primary) 20%, transparent);
-  // White fails on the lifted dark primary; the derivation in _variables.scss keeps this near-black
-  // at 4.5:1 or better on it.
-  --color-primary-text: #0F0F0F;
-  // White fails on the lifted dark hover fill; near-black keeps the pressed label legible on it.
-  --color-primary-hover-text: #0F0F0F;
-  // The dark primary is already lifted to clear 4.5:1 on every dark surface and tint.
-  --color-primary-ink: var(--wui-dark-primary);
-  --color-on-primary-ink: #0F0F0F;
-  --color-on-status-strong: #0F0F0F;
-
-  // On a dark surface the darkened `-text` values would sink into the background, so dark
-  // mode builds text from the fill instead, lifted with 25% white: the info and danger fills
-  // alone reach only 3.1:1 and 3.4:1 on the muted fill, and the lift clears 4.5:1 on every
-  // dark surface for all four tones.
-  --color-success-text: color-mix(in srgb, var(--wui-success) 75%, white);
-  --color-danger-text: color-mix(in srgb, var(--wui-danger) 75%, white);
-  --color-warning-text: color-mix(in srgb, var(--wui-warning) 75%, white);
-  --color-info-text: color-mix(in srgb, var(--wui-info) 75%, white);
-
-  // Text ON a soft tint (an alert heading). The bright tone alone falls under WCAG AA on its own
-  // 18% tint over the dark page (info and danger reach only ~3.8:1), so it is lifted with 30%
-  // white: every tone then clears 4.5:1 on the dark page, surface and muted fill.
-  --color-success-text-on-soft: color-mix(in srgb, var(--wui-success) 65%, white);
-  --color-danger-text-on-soft: color-mix(in srgb, var(--wui-danger) 65%, white);
-  --color-warning-text-on-soft: color-mix(in srgb, var(--wui-warning) 65%, white);
-  --color-info-text-on-soft: color-mix(in srgb, var(--wui-info) 65%, white);
-
-  // Light mode maps -strong to deep AA fills; on dark surfaces those sink into the page.
-  // Dark mode uses the lifted -text tone, since -strong is a fill that carries near-black text
-  // (progress label, bell count): the bare danger and info fills reach only 4.4:1 and 4.0:1
-  // under that ink, the lifted ones 5.7:1 or better.
-  --color-success-strong: var(--color-success-text);
-  --color-danger-strong: var(--color-danger-text);
-  --color-info-strong: var(--color-info-text);
-  --color-warning-strong: var(--color-warning-text);
-
-  --color-success-soft: color-mix(in srgb, var(--wui-success) 18%, transparent);
-  --color-success-5: color-mix(in srgb, var(--wui-success) 8%, transparent);
-  --color-success-10: color-mix(in srgb, var(--wui-success) 12%, transparent);
-  --color-warning-soft: color-mix(in srgb, var(--wui-warning) 18%, transparent);
-  --color-warning-5: color-mix(in srgb, var(--wui-warning) 8%, transparent);
-  --color-warning-10: color-mix(in srgb, var(--wui-warning) 12%, transparent);
-  --color-danger-soft: color-mix(in srgb, var(--wui-danger) 18%, transparent);
-  --color-danger-5: color-mix(in srgb, var(--wui-danger) 8%, transparent);
-  --color-danger-10: color-mix(in srgb, var(--wui-danger) 12%, transparent);
-  --color-info-soft: color-mix(in srgb, var(--wui-info) 18%, transparent);
-  --color-info-5: color-mix(in srgb, var(--wui-info) 8%, transparent);
-  --color-info-10: color-mix(in srgb, var(--wui-info) 12%, transparent);
-  // The -50 border tone: the light hex would glow on a dark page, so it becomes a translucent
-  // mix of the vivid tone that reads as a border on the dark tint.
-  --color-success-50: color-mix(in srgb, var(--wui-success) 45%, transparent);
-  --color-warning-50: color-mix(in srgb, var(--wui-warning) 45%, transparent);
-  --color-danger-50: color-mix(in srgb, var(--wui-danger) 45%, transparent);
-  --color-info-50: color-mix(in srgb, var(--wui-info) 45%, transparent);
-  --color-accent-soft: var(--color-warning-soft);
-
-  --color-scrim: color-mix(in srgb, black 45%, transparent);
-  --color-scrim-strong: color-mix(in srgb, black 62%, transparent);
-  --color-on-scrim: var(--wui-bg-light);
-
-  // Chart colours: the dark set, so every chart flips with the page.
-  --wui-chart-1: var(--wui-dark-primary);
-  --wui-chart-2: var(--wui-dark-chart-2);
-  --wui-chart-3: var(--wui-dark-chart-3);
-  --wui-chart-4: var(--wui-dark-chart-4);
-  --wui-chart-5: var(--wui-dark-chart-5);
-  --wui-chart-6: var(--wui-dark-chart-6);
-  --wui-chart-7: var(--wui-dark-chart-7);
-  --wui-chart-8: var(--wui-dark-chart-8);
-  --wui-chart-seq-0: var(--wui-dark-chart-seq-0);
-  --wui-chart-seq-1: var(--wui-dark-chart-seq-1);
-  --wui-chart-seq-2: var(--wui-dark-chart-seq-2);
-  --wui-chart-seq-3: var(--wui-dark-chart-seq-3);
-  --wui-chart-seq-4: var(--wui-dark-chart-seq-4);
-  --wui-chart-seq-5: var(--wui-dark-chart-seq-5);
-  --wui-chart-seq-6: var(--wui-dark-chart-seq-6);
-  --wui-chart-diverging-low: var(--wui-dark-chart-diverging-low);
-  --wui-chart-diverging-mid: var(--wui-dark-chart-diverging-mid);
-  --wui-chart-diverging-high: var(--wui-dark-chart-diverging-high);
-  --wui-chart-neutral: var(--wui-dark-chart-neutral);
-}
-
-// Manual dark mode — set data-theme="dark" and/or data-bs-theme="dark" on <html>
-// to flip both wui and Bootstrap native components together.
-:root[data-theme="dark"],
-:root[data-bs-theme="dark"] {
-  @include wui-dark-theme;
-  color-scheme: dark;
-}
-
-// A dark section on a light page, such as a dark band: the same attribute on any element. The meaning
-// names are declared again here, so they resolve inside the section rather than once at the root.
-// Kept apart from the root rule above because the theme exporters read dark mode by that exact selector.
-[data-theme="dark"]:not(:root),
-[data-bs-theme="dark"]:not(:root) {
-  @include wui-dark-theme;
-  color-scheme: dark;
-  color: var(--color-text);
-}
-
-// Every name wui-dark-theme sets; scripts/check-theme-modes.mjs keeps the two equal.
-$wui-dark-layer-names: (
-  wui-shadow-thumb, wui-shadow-thumb-hover,
-  color-bg, color-bg-subtle, color-bg-muted, color-field-bg, color-surface, color-thumb,
-  color-border, color-border-light, color-border-strong, color-field-border, color-field-border-hover,
-  color-progress-track, color-progress-label,
-  color-text, color-text-muted, color-text-subtle, color-text-body, color-close-filter, color-focus-border,
-  wui-primary-5, wui-primary-10, wui-primary-15, wui-primary-20, wui-primary-30, wui-primary-50,
-  wui-surface-mute, wui-surface-soft, wui-surface-violet-soft, wui-danger-5,
-  bs-body-color, bs-emphasis-color, bs-secondary-color, bs-tertiary-color, bs-body-bg, bs-border-color,
-  bs-secondary-bg, bs-tertiary-bg,
-  bs-body-bg-rgb, bs-body-color-rgb, bs-emphasis-color-rgb, bs-secondary-color-rgb, bs-tertiary-color-rgb,
-  bs-secondary-bg-rgb, bs-tertiary-bg-rgb, bs-border-color-rgb,
-  color-primary, color-primary-hover, color-primary-soft, color-primary-text, color-primary-hover-text,
-  color-primary-ink, color-on-primary-ink, color-on-status-strong,
-  color-success-text, color-danger-text, color-warning-text, color-info-text,
-  color-success-text-on-soft, color-danger-text-on-soft, color-warning-text-on-soft, color-info-text-on-soft,
-  color-success-strong, color-danger-strong, color-info-strong, color-warning-strong,
-  color-success-soft, color-success-5, color-success-10,
-  color-warning-soft, color-warning-5, color-warning-10,
-  color-danger-soft, color-danger-5, color-danger-10,
-  color-info-soft, color-info-5, color-info-10,
-  color-success-50, color-warning-50, color-danger-50, color-info-50,
-  color-accent-soft, color-scrim, color-scrim-strong, color-on-scrim,
-  wui-chart-1, wui-chart-2, wui-chart-3, wui-chart-4, wui-chart-5, wui-chart-6, wui-chart-7, wui-chart-8,
-  wui-chart-seq-0, wui-chart-seq-1, wui-chart-seq-2, wui-chart-seq-3, wui-chart-seq-4, wui-chart-seq-5,
-  wui-chart-seq-6, wui-chart-diverging-low, wui-chart-diverging-mid, wui-chart-diverging-high, wui-chart-neutral
-);
-
-// A light box inside a dark section, such as a white result table in a dark band: the same attribute set
-// to light gives it the page's light colour layer back. The page root keeps a copy of each name the dark
-// layer sets, and a var() resolves where it is declared, so each copy holds the root's light value with
-// the brand's own overrides. The copies sit on html rather than :root because the theme exporters read
-// every :root name as a token. A dark page has no light values on its root to copy, so only a light page
-// gets light boxes this way.
-html {
-  @each $name in $wui-dark-layer-names {
-    --wui-light-#{$name}: var(--#{$name});
-  }
-}
-
-[data-theme="dark"]:not(:root) [data-theme="light"],
-[data-theme="dark"]:not(:root) [data-bs-theme="light"],
-[data-bs-theme="dark"]:not(:root) [data-theme="light"],
-[data-bs-theme="dark"]:not(:root) [data-bs-theme="light"] {
-  @each $name in $wui-dark-layer-names {
-    --#{$name}: var(--wui-light-#{$name});
-  }
-  color-scheme: light;
-  color: var(--color-text);
-}
-
-// Automatic dark mode — when data-theme="auto", detect system preference and apply dark tokens.
-:root[data-theme="auto"] {
-  @media (prefers-color-scheme: dark) {
-    @include wui-dark-theme;
-    color-scheme: dark;
-  }
-}