@webority/theme 0.127.0 → 0.129.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.127.0",
+  "version": "0.129.0",
   "description": "Webority shared design system — Bootstrap 5.3 SCSS overrides, --wui-* tokens, and shared component CSS. The single source of brand chrome for React portals and Razor sites.",
   "license": "SEE LICENSE IN LICENSE",
   "publishConfig": {
@@ -47,7 +47,7 @@
     "postcss": "^8.5.31"
   },
   "devDependencies": {
-    "@webority/tokens": "0.127.0",
+    "@webority/tokens": "0.129.0",
     "bootstrap": "5.3.3",
     "country-flag-icons": "^1.6.20",
     "sass-embedded": "^1.97.0",

package/scss/_bootstrap.generated.scss

@@ -1,4 +1,4 @@
-// Generated by @webority/tokens 0.127.0 from its token source. Do not edit; run webority brand --library.
+// Generated by @webority/tokens 0.129.0 from its token source. Do not edit; run webority brand --library.
 $body-color: #252f4a !default;
 $body-secondary-color: #4b5675 !default;
 $body-tertiary-color: #626a82 !default;

package/scss/_components.scss

@@ -8,8 +8,10 @@
 // retained because it's a tactile signal, not a depth cue.
 // A button is exactly as tall as a field of the same size (the --wui-control-md ladder, 32/36/44px), so a
 // button beside an input lines up in every form row. Heights are min-height with the label flex-centred; sm/lg
-// set theirs in their size blocks below.
-.btn:not(.btn-sm):not(.btn-lg):not(.btn-pill):not(.btn-pill-sm):not(.u-action):not(.btn-icon) {
+// set theirs in their size blocks below, and so does a button sized by its group (.btn-group-sm/-lg).
+.btn:not(.btn-sm):not(.btn-lg):not(.btn-group-sm > .btn):not(.btn-group-lg > .btn):not(.btn-pill):not(.btn-pill-sm):not(.u-action):not(
+        .btn-icon
+    ) {
     // The height is the field height and the label is flex-centred, so no vertical padding: it
     // would push a button past its field height.
     --bs-btn-padding-y: 0;
@@ -229,6 +231,24 @@
     --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
 }
 
+// Light button: a raised surface in both themes. Bootstrap compiles btn-light from $light, so it
+// stayed near-white on a dark page; these read the meaning tokens, and the border is a soft line.
+.btn-light {
+    --bs-btn-color: var(--color-text);
+    --bs-btn-bg: var(--color-surface);
+    --bs-btn-border-color: var(--color-border);
+    --bs-btn-hover-color: var(--color-text);
+    --bs-btn-hover-bg: var(--color-bg-muted);
+    --bs-btn-hover-border-color: var(--color-border);
+    --bs-btn-active-color: var(--color-text);
+    --bs-btn-active-bg: var(--color-border);
+    --bs-btn-active-border-color: var(--color-border);
+    --bs-btn-disabled-color: var(--color-text-muted);
+    --bs-btn-disabled-bg: var(--color-surface);
+    --bs-btn-disabled-border-color: var(--color-border);
+    --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
+}
+
 // Light outline for a dark banner/hero CTA, where .btn-outline-primary's brand-coloured
 // border/text would disappear against a dark background. White is used directly (not a
 // token) because it's the one colour that reads on any dark surface, brand-independent.
@@ -291,6 +311,8 @@
 .btn-text.is-loading.disabled,
 .btn-neutral.is-loading:disabled,
 .btn-neutral.is-loading.disabled,
+.btn-light.is-loading:disabled,
+.btn-light.is-loading.disabled,
 .btn-outline-primary.is-loading:disabled,
 .btn-outline-primary.is-loading.disabled,
 .btn-outline-danger.is-loading:disabled,
@@ -877,8 +899,9 @@
 // compiled $card-border-radius. Background is an ELEVATED surface, not the page
 // colour — so a card stays visible on a tinted page, and flips correctly in dark
 // mode because --color-surface is themed in the alias layer.
+// A brand that draws rounder cards than its controls sets --wui-card-radius in its token file.
 .card {
-    --bs-card-border-radius: var(--wui-radius-lg);
+    --bs-card-border-radius: var(--wui-card-radius, var(--wui-radius-lg));
     --bs-card-bg: var(--color-surface);
 }
 
@@ -897,6 +920,13 @@
     align-items: center;
     gap: 0.5rem;
     margin-left: auto;
+    // Natural width: a long title wraps beside the actions instead of squeezing a button. The cap keeps
+    // wide actions (a segmented filter) inside a phone-width header, where they shrink as before.
+    flex: 0 0 auto;
+    max-width: 100%;
+}
+.card-header-actions .btn {
+    white-space: nowrap;
 }
 
 // Close button (React `onClose` / Razor `dismissible`): the last control in the header, pushed

package/scss/_tokens.generated.scss

@@ -1,4 +1,4 @@
-// Generated by @webority/tokens 0.127.0 from its token source. Do not edit; run webority brand --library.
+// Generated by @webority/tokens 0.129.0 from its token source. Do not edit; run webority brand --library.
 
 :root {
     --wui-primary: #4F46E5;
@@ -170,6 +170,7 @@
     --wui-font-display: "Webority Serif", Cambria, Georgia, "Times New Roman", "Noto Serif", serif;
     --wui-font-mono: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
     --wui-shadow-card: none;
+    --wui-shadow-elevated: 0px 2px 8px -2px rgba(7, 20, 55, 0.10);
     --wui-shadow-popover: 0px 8px 28px -6px rgba(7, 20, 55, 0.14);
     --wui-shadow-modal: 0px 24px 60px -16px rgba(7, 20, 55, 0.28);
     --wui-shadow-drawer: 0px 24px 60px -16px rgba(7, 20, 55, 0.28);
@@ -210,6 +211,10 @@
     --color-surface-inverse: var(--wui-text-heading);
     --color-surface-inverse-raised: color-mix(in srgb, var(--color-text-inverse) 5%, var(--color-surface-inverse));
     --color-surface-inverse-elevated: color-mix(in srgb, var(--color-text-inverse) 9%, var(--color-surface-inverse));
+    --color-surface-inverse-wash-4: color-mix(in srgb, var(--color-text-inverse) 4%, transparent);
+    --color-surface-inverse-wash-8: color-mix(in srgb, var(--color-text-inverse) 8%, transparent);
+    --color-surface-inverse-wash-12: color-mix(in srgb, var(--color-text-inverse) 12%, transparent);
+    --color-surface-inverse-wash-24: color-mix(in srgb, var(--color-text-inverse) 24%, transparent);
     --color-surface-dark: var(--wui-text-heading);
     --color-surface-dark-border: color-mix(in srgb, var(--wui-bg-light) 14%, var(--wui-text-heading));
     --color-on-surface-dark: var(--wui-bg-light);
@@ -228,6 +233,7 @@
     --color-field-border-hover: var(--wui-field-border-hover);
     --color-field-border-focus: var(--wui-primary-30);
     --color-focus-ring: var(--color-primary-text);
+    --color-focus-ring-soft: color-mix(in srgb, var(--color-focus-ring) 25%, transparent);
     --color-scrim: color-mix(in srgb, var(--wui-text-heading) 45%, transparent);
     --color-scrim-strong: color-mix(in srgb, var(--wui-text-heading) 62%, transparent);
     --color-on-scrim: var(--wui-bg-light);
@@ -317,22 +323,32 @@
     --wui-lh-heading: 1.2;
     --wui-lh-body: 1.55;
     --wui-lh-display: 1.05;
-    --wui-field-sm-radius: var(--wui-radius-sm);
-    --wui-field-md-radius: var(--wui-radius-sm);
-    --wui-field-lg-radius: var(--wui-radius-sm);
+    --wui-field-sm-radius: var(--wui-radius-md);
+    --wui-field-md-radius: var(--wui-radius-md);
+    --wui-field-lg-radius: var(--wui-radius-md);
     --wui-focus-ring-width: var(--wui-space-xxs);
     --wui-focus-ring-offset: var(--wui-space-xxs);
     --wui-focus-ring-shadow: 0 0 0 2px var(--color-primary-soft);
+    --wui-focus-ring-soft-shadow: 0 0 0 var(--wui-focus-ring-width) var(--color-focus-ring-soft);
     --wui-press-scale: 0.96;
     --wui-press-duration: 80ms;
     --wui-press-opacity: 0.5;
     --wui-thumb-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
     --wui-thumb-shadow-hover: 0 2px 12px rgba(0, 0, 0, 0.2);
+    --wui-card-pad: 20px;
+    --wui-card-title-fs: 16px;
+    --wui-card-title-lh: 1.3;
     --wui-card-shadow-lifted: none;
     --wui-card-shadow-lifted-hover: none;
     --wui-table-md-padding-x: var(--wui-table-pad);
+    --wui-modal-max-width: 440px;
+    --wui-drawer-max: 90;
+    --wui-step-tile-size: 34px;
+    --wui-kpi-value-size: 24px;
+    --wui-nav-menu-current-bg: transparent;
     --wui-container-md-padding-x: var(--wui-container-pad);
     --wui-disabled-opacity: 0.5;
+    --wui-toast-edge-offset: var(--wui-space-lg);
 }
 
 @media (min-width: 768px) {
@@ -387,6 +403,7 @@
     --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);
+    --wui-shadow-elevated: 0px 2px 8px -2px rgba(0, 0, 0, 0.45);
     --wui-shadow-popover: 0px 8px 28px -6px rgba(0, 0, 0, 0.55);
     --wui-shadow-modal: 0px 24px 60px -16px rgba(0, 0, 0, 0.7);
     --color-bg: var(--wui-dark-bg-page);
@@ -499,6 +516,11 @@
     --bs-secondary-bg-rgb: 24, 27, 35;
     --bs-tertiary-bg-rgb: 35, 39, 51;
     --bs-border-color-rgb: 42, 47, 58;
+    --bs-secondary-rgb: 180, 185, 198;
+    --bs-link-color: var(--color-link);
+    --bs-link-color-rgb: 149, 144, 239;
+    --bs-link-hover-color: var(--color-primary-hover);
+    --bs-link-hover-color-rgb: 162, 157, 241;
     color-scheme: dark;
 }
 
@@ -542,6 +564,7 @@
     --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);
+    --wui-shadow-elevated: 0px 2px 8px -2px rgba(0, 0, 0, 0.45);
     --wui-shadow-popover: 0px 8px 28px -6px rgba(0, 0, 0, 0.55);
     --wui-shadow-modal: 0px 24px 60px -16px rgba(0, 0, 0, 0.7);
     --color-bg: var(--wui-dark-bg-page);
@@ -654,6 +677,11 @@
     --bs-secondary-bg-rgb: 24, 27, 35;
     --bs-tertiary-bg-rgb: 35, 39, 51;
     --bs-border-color-rgb: 42, 47, 58;
+    --bs-secondary-rgb: 180, 185, 198;
+    --bs-link-color: var(--color-link);
+    --bs-link-color-rgb: 149, 144, 239;
+    --bs-link-hover-color: var(--color-primary-hover);
+    --bs-link-hover-color-rgb: 162, 157, 241;
 }
 
 // Zero specificity, so a component's own class on a themed section or inside it keeps its colour.
@@ -670,25 +698,26 @@ $wui-dark-layer-names: (
     wui-danger-5, 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, wui-shadow-popover, wui-shadow-modal, color-bg, color-bg-subtle,
-    color-bg-muted, color-surface, color-surface-inverse, color-text, color-text-body, color-text-muted,
-    color-text-subtle, color-text-inverse, color-link, color-border, color-border-subtle, color-border-strong,
-    color-field-bg, color-field-border, color-field-border-hover, color-field-border-focus, color-scrim, color-scrim-strong,
-    color-progress-track, color-progress-label, color-thumb, color-scrollbar, color-scrollbar-hover, color-scrollbar-active,
-    color-primary, color-primary-hover, color-primary-soft, color-primary-text, color-on-primary, color-success,
-    color-success-pressed, color-success-soft, color-success-border, color-success-text, color-success-text-on-soft, color-success-strong,
-    color-on-success, color-on-success-strong, color-warning, color-warning-pressed, color-warning-soft, color-warning-border,
-    color-warning-text, color-warning-text-on-soft, color-warning-strong, color-warning-strong-hover, color-on-warning, color-on-warning-strong,
-    color-danger, color-danger-pressed, color-danger-soft, color-danger-border, color-danger-text, color-danger-text-on-soft,
-    color-danger-strong, color-danger-strong-hover, color-on-danger, color-on-danger-strong, color-info, color-info-pressed,
-    color-info-soft, color-info-border, color-info-text, color-info-text-on-soft, color-info-strong, color-on-info,
-    color-on-info-strong, color-chart-1, color-chart-2, color-chart-3, color-chart-4, color-chart-5,
-    color-chart-6, color-chart-7, color-chart-8, color-chart-seq-0, color-chart-seq-1, color-chart-seq-2,
-    color-chart-seq-3, color-chart-seq-4, color-chart-seq-5, color-chart-seq-6, color-chart-diverging-low, color-chart-diverging-mid,
-    color-chart-diverging-high, color-chart-neutral, wui-close-filter, wui-thumb-shadow, wui-thumb-shadow-hover, bs-body-color,
-    bs-emphasis-color, bs-secondary-color, bs-tertiary-color, bs-heading-color, bs-body-bg, bs-border-color,
-    bs-secondary-bg, bs-tertiary-bg, bs-primary, bs-body-bg-rgb, bs-primary-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
+    wui-chart-diverging-high, wui-chart-neutral, wui-shadow-elevated, wui-shadow-popover, wui-shadow-modal, color-bg,
+    color-bg-subtle, color-bg-muted, color-surface, color-surface-inverse, color-text, color-text-body,
+    color-text-muted, color-text-subtle, color-text-inverse, color-link, color-border, color-border-subtle,
+    color-border-strong, color-field-bg, color-field-border, color-field-border-hover, color-field-border-focus, color-scrim,
+    color-scrim-strong, color-progress-track, color-progress-label, color-thumb, color-scrollbar, color-scrollbar-hover,
+    color-scrollbar-active, color-primary, color-primary-hover, color-primary-soft, color-primary-text, color-on-primary,
+    color-success, color-success-pressed, color-success-soft, color-success-border, color-success-text, color-success-text-on-soft,
+    color-success-strong, color-on-success, color-on-success-strong, color-warning, color-warning-pressed, color-warning-soft,
+    color-warning-border, color-warning-text, color-warning-text-on-soft, color-warning-strong, color-warning-strong-hover, color-on-warning,
+    color-on-warning-strong, color-danger, color-danger-pressed, color-danger-soft, color-danger-border, color-danger-text,
+    color-danger-text-on-soft, color-danger-strong, color-danger-strong-hover, color-on-danger, color-on-danger-strong, color-info,
+    color-info-pressed, color-info-soft, color-info-border, color-info-text, color-info-text-on-soft, color-info-strong,
+    color-on-info, color-on-info-strong, color-chart-1, color-chart-2, color-chart-3, color-chart-4,
+    color-chart-5, color-chart-6, color-chart-7, color-chart-8, color-chart-seq-0, color-chart-seq-1,
+    color-chart-seq-2, color-chart-seq-3, color-chart-seq-4, color-chart-seq-5, color-chart-seq-6, color-chart-diverging-low,
+    color-chart-diverging-mid, color-chart-diverging-high, color-chart-neutral, wui-close-filter, wui-thumb-shadow, wui-thumb-shadow-hover,
+    bs-body-color, bs-emphasis-color, bs-secondary-color, bs-tertiary-color, bs-heading-color, bs-body-bg,
+    bs-border-color, bs-secondary-bg, bs-tertiary-bg, bs-primary, bs-body-bg-rgb, bs-primary-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, bs-secondary-rgb, bs-link-color, bs-link-color-rgb, bs-link-hover-color, bs-link-hover-color-rgb
 );
 
 // var() resolves where a name is declared, so the html copies keep the light values for a light box.
@@ -756,6 +785,7 @@ html {
         --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);
+        --wui-shadow-elevated: 0px 2px 8px -2px rgba(0, 0, 0, 0.45);
         --wui-shadow-popover: 0px 8px 28px -6px rgba(0, 0, 0, 0.55);
         --wui-shadow-modal: 0px 24px 60px -16px rgba(0, 0, 0, 0.7);
         --color-bg: var(--wui-dark-bg-page);
@@ -868,6 +898,348 @@ html {
         --bs-secondary-bg-rgb: 24, 27, 35;
         --bs-tertiary-bg-rgb: 35, 39, 51;
         --bs-border-color-rgb: 42, 47, 58;
+        --bs-secondary-rgb: 180, 185, 198;
+        --bs-link-color: var(--color-link);
+        --bs-link-color-rgb: 149, 144, 239;
+        --bs-link-hover-color: var(--color-primary-hover);
+        --bs-link-hover-color-rgb: 162, 157, 241;
         color-scheme: dark;
     }
 }
+
+// A light box under a dark page root takes literal light values: var() would resolve against the dark root.
+
+:root[data-theme="dark"] [data-theme="light"],
+:root[data-theme="dark"] [data-bs-theme="light"],
+:root[data-bs-theme="dark"] [data-theme="light"],
+:root[data-bs-theme="dark"] [data-bs-theme="light"] {
+    --wui-primary-50: #818CF8;
+    --wui-primary-30: #A5B4FC;
+    --wui-primary-20: #C7D2FE;
+    --wui-primary-15: #DDE1FD;
+    --wui-primary-10: #E0E7FF;
+    --wui-primary-5: #EEF2FF;
+    --wui-surface-soft: #F2EFFE;
+    --wui-surface-violet-soft: #FCFCFC;
+    --wui-surface-mute: #F9FBFC;
+    --wui-neutral-bg-dark: #F5F6FA;
+    --wui-neutral-bg-light: #F9FBFC;
+    --wui-info-10: #E9F3FF;
+    --wui-info-5: #F3F9FF;
+    --wui-success-10: #E8FAEE;
+    --wui-success-5: #F3FCF6;
+    --wui-warning-10: #FFF8E6;
+    --wui-warning-5: #FEFBF2;
+    --wui-danger-10: #FFEAEF;
+    --wui-danger-5: #FEF4F6;
+    --wui-chart-1: var(--wui-primary);
+    --wui-chart-2: #eb6834;
+    --wui-chart-3: #1baf7a;
+    --wui-chart-4: #eda100;
+    --wui-chart-5: #e87ba4;
+    --wui-chart-6: #008300;
+    --wui-chart-7: #2a78d6;
+    --wui-chart-8: #e34948;
+    --wui-chart-seq-0: var(--wui-bg-muted);
+    --wui-chart-seq-1: var(--wui-primary-10);
+    --wui-chart-seq-2: var(--wui-primary-20);
+    --wui-chart-seq-3: var(--wui-primary-30);
+    --wui-chart-seq-4: var(--wui-primary-50);
+    --wui-chart-seq-5: var(--wui-primary-hover);
+    --wui-chart-seq-6: var(--wui-primary-pressed);
+    --wui-chart-diverging-low: #e34948;
+    --wui-chart-diverging-mid: #c4cada;
+    --wui-chart-diverging-high: #2a78d6;
+    --wui-chart-neutral: #99a1b7;
+    --wui-shadow-elevated: 0px 2px 8px -2px rgba(7, 20, 55, 0.10);
+    --wui-shadow-popover: 0px 8px 28px -6px rgba(7, 20, 55, 0.14);
+    --wui-shadow-modal: 0px 24px 60px -16px rgba(7, 20, 55, 0.28);
+    --color-bg: var(--wui-bg-page);
+    --color-bg-subtle: var(--wui-bg-elevated);
+    --color-bg-muted: var(--wui-bg-muted);
+    --color-surface: var(--wui-bg-light);
+    --color-surface-inverse: var(--wui-text-heading);
+    --color-text: var(--wui-text-heading);
+    --color-text-body: var(--wui-text-1);
+    --color-text-muted: var(--wui-text-2);
+    --color-text-subtle: var(--wui-text-3);
+    --color-text-inverse: var(--wui-bg-light);
+    --color-link: var(--wui-primary-ink);
+    --color-border: var(--wui-border-light);
+    --color-border-subtle: var(--wui-border-soft);
+    --color-border-strong: var(--wui-border-strong);
+    --color-field-bg: var(--wui-field-bg);
+    --color-field-border: var(--wui-field-border);
+    --color-field-border-hover: var(--wui-field-border-hover);
+    --color-field-border-focus: var(--wui-primary-30);
+    --color-scrim: color-mix(in srgb, var(--wui-text-heading) 45%, transparent);
+    --color-scrim-strong: color-mix(in srgb, var(--wui-text-heading) 62%, transparent);
+    --color-progress-track: var(--wui-progress-track);
+    --color-progress-label: var(--wui-bg-light);
+    --color-thumb: var(--wui-bg-light);
+    --color-scrollbar: var(--wui-scrollbar);
+    --color-scrollbar-hover: var(--wui-scrollbar-hover);
+    --color-scrollbar-active: var(--wui-scrollbar-active);
+    --color-primary: var(--wui-primary);
+    --color-primary-hover: var(--wui-primary-pressed);
+    --color-primary-soft: var(--wui-primary-10);
+    --color-primary-text: var(--wui-primary-ink);
+    --color-on-primary: var(--wui-primary-text);
+    --color-success: var(--wui-success);
+    --color-success-pressed: var(--wui-success-active);
+    --color-success-soft: var(--wui-success-10);
+    --color-success-border: var(--wui-success-30);
+    --color-success-text: var(--wui-success-text);
+    --color-success-text-on-soft: var(--wui-success-text);
+    --color-success-strong: var(--wui-success-strong);
+    --color-on-success: #FFFFFF;
+    --color-on-success-strong: #FFFFFF;
+    --color-warning: var(--wui-warning);
+    --color-warning-pressed: var(--wui-warning-active);
+    --color-warning-soft: var(--wui-warning-10);
+    --color-warning-border: var(--wui-warning-30);
+    --color-warning-text: var(--wui-warning-text);
+    --color-warning-text-on-soft: var(--wui-warning-text);
+    --color-warning-strong: var(--wui-warning-strong);
+    --color-warning-strong-hover: var(--wui-warning-strong-hover);
+    --color-on-warning: #FFFFFF;
+    --color-on-warning-strong: #FFFFFF;
+    --color-danger: var(--wui-danger);
+    --color-danger-pressed: var(--wui-danger-active);
+    --color-danger-soft: var(--wui-danger-10);
+    --color-danger-border: var(--wui-danger-30);
+    --color-danger-text: var(--wui-danger-text);
+    --color-danger-text-on-soft: var(--wui-danger-text);
+    --color-danger-strong: var(--wui-danger-strong);
+    --color-danger-strong-hover: var(--wui-danger-strong-hover);
+    --color-on-danger: #FFFFFF;
+    --color-on-danger-strong: #FFFFFF;
+    --color-info: var(--wui-info);
+    --color-info-pressed: var(--wui-info-active);
+    --color-info-soft: var(--wui-info-10);
+    --color-info-border: var(--wui-info-30);
+    --color-info-text: var(--wui-info-text);
+    --color-info-text-on-soft: var(--wui-info-text);
+    --color-info-strong: var(--wui-info-active);
+    --color-on-info: #FFFFFF;
+    --color-on-info-strong: #FFFFFF;
+    --color-chart-1: var(--wui-primary);
+    --color-chart-2: var(--wui-chart-2);
+    --color-chart-3: var(--wui-chart-3);
+    --color-chart-4: var(--wui-chart-4);
+    --color-chart-5: var(--wui-chart-5);
+    --color-chart-6: var(--wui-chart-6);
+    --color-chart-7: var(--wui-chart-7);
+    --color-chart-8: var(--wui-chart-8);
+    --color-chart-seq-0: var(--wui-bg-muted);
+    --color-chart-seq-1: var(--wui-primary-10);
+    --color-chart-seq-2: var(--wui-primary-20);
+    --color-chart-seq-3: var(--wui-primary-30);
+    --color-chart-seq-4: var(--wui-primary-50);
+    --color-chart-seq-5: var(--wui-primary-hover);
+    --color-chart-seq-6: var(--wui-primary-pressed);
+    --color-chart-diverging-low: var(--wui-chart-diverging-low);
+    --color-chart-diverging-mid: var(--wui-chart-diverging-mid);
+    --color-chart-diverging-high: var(--wui-chart-diverging-high);
+    --color-chart-neutral: var(--wui-chart-neutral);
+    --wui-close-filter: none;
+    --wui-thumb-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    --wui-thumb-shadow-hover: 0 2px 12px rgba(0, 0, 0, 0.2);
+    --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-heading-color: var(--color-text);
+    --bs-body-bg: var(--color-bg);
+    --bs-border-color: var(--color-border);
+    --bs-secondary-bg: var(--color-surface);
+    --bs-tertiary-bg: var(--color-bg-muted);
+    --bs-primary: var(--color-primary);
+    --bs-body-bg-rgb: 244, 246, 248;
+    --bs-primary-rgb: 79, 70, 229;
+    --bs-body-color-rgb: 7, 20, 55;
+    --bs-emphasis-color-rgb: 7, 20, 55;
+    --bs-secondary-color-rgb: 75, 86, 117;
+    --bs-tertiary-color-rgb: 98, 106, 130;
+    --bs-secondary-bg-rgb: 255, 255, 255;
+    --bs-tertiary-bg-rgb: 245, 246, 250;
+    --bs-border-color-rgb: 235, 237, 243;
+    --bs-link-color: var(--color-link);
+    --bs-link-color-rgb: 79, 70, 229;
+    --bs-link-hover-color: var(--color-primary-hover);
+    --bs-link-hover-color-rgb: 67, 56, 202;
+}
+
+:where(:root[data-theme="dark"] [data-theme="light"]),
+:where(:root[data-theme="dark"] [data-bs-theme="light"]),
+:where(:root[data-bs-theme="dark"] [data-theme="light"]),
+:where(:root[data-bs-theme="dark"] [data-bs-theme="light"]) {
+    color-scheme: light;
+    color: var(--color-text);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root[data-theme="auto"] [data-theme="light"],
+    :root[data-theme="auto"] [data-bs-theme="light"] {
+        --wui-primary-50: #818CF8;
+        --wui-primary-30: #A5B4FC;
+        --wui-primary-20: #C7D2FE;
+        --wui-primary-15: #DDE1FD;
+        --wui-primary-10: #E0E7FF;
+        --wui-primary-5: #EEF2FF;
+        --wui-surface-soft: #F2EFFE;
+        --wui-surface-violet-soft: #FCFCFC;
+        --wui-surface-mute: #F9FBFC;
+        --wui-neutral-bg-dark: #F5F6FA;
+        --wui-neutral-bg-light: #F9FBFC;
+        --wui-info-10: #E9F3FF;
+        --wui-info-5: #F3F9FF;
+        --wui-success-10: #E8FAEE;
+        --wui-success-5: #F3FCF6;
+        --wui-warning-10: #FFF8E6;
+        --wui-warning-5: #FEFBF2;
+        --wui-danger-10: #FFEAEF;
+        --wui-danger-5: #FEF4F6;
+        --wui-chart-1: var(--wui-primary);
+        --wui-chart-2: #eb6834;
+        --wui-chart-3: #1baf7a;
+        --wui-chart-4: #eda100;
+        --wui-chart-5: #e87ba4;
+        --wui-chart-6: #008300;
+        --wui-chart-7: #2a78d6;
+        --wui-chart-8: #e34948;
+        --wui-chart-seq-0: var(--wui-bg-muted);
+        --wui-chart-seq-1: var(--wui-primary-10);
+        --wui-chart-seq-2: var(--wui-primary-20);
+        --wui-chart-seq-3: var(--wui-primary-30);
+        --wui-chart-seq-4: var(--wui-primary-50);
+        --wui-chart-seq-5: var(--wui-primary-hover);
+        --wui-chart-seq-6: var(--wui-primary-pressed);
+        --wui-chart-diverging-low: #e34948;
+        --wui-chart-diverging-mid: #c4cada;
+        --wui-chart-diverging-high: #2a78d6;
+        --wui-chart-neutral: #99a1b7;
+        --wui-shadow-elevated: 0px 2px 8px -2px rgba(7, 20, 55, 0.10);
+        --wui-shadow-popover: 0px 8px 28px -6px rgba(7, 20, 55, 0.14);
+        --wui-shadow-modal: 0px 24px 60px -16px rgba(7, 20, 55, 0.28);
+        --color-bg: var(--wui-bg-page);
+        --color-bg-subtle: var(--wui-bg-elevated);
+        --color-bg-muted: var(--wui-bg-muted);
+        --color-surface: var(--wui-bg-light);
+        --color-surface-inverse: var(--wui-text-heading);
+        --color-text: var(--wui-text-heading);
+        --color-text-body: var(--wui-text-1);
+        --color-text-muted: var(--wui-text-2);
+        --color-text-subtle: var(--wui-text-3);
+        --color-text-inverse: var(--wui-bg-light);
+        --color-link: var(--wui-primary-ink);
+        --color-border: var(--wui-border-light);
+        --color-border-subtle: var(--wui-border-soft);
+        --color-border-strong: var(--wui-border-strong);
+        --color-field-bg: var(--wui-field-bg);
+        --color-field-border: var(--wui-field-border);
+        --color-field-border-hover: var(--wui-field-border-hover);
+        --color-field-border-focus: var(--wui-primary-30);
+        --color-scrim: color-mix(in srgb, var(--wui-text-heading) 45%, transparent);
+        --color-scrim-strong: color-mix(in srgb, var(--wui-text-heading) 62%, transparent);
+        --color-progress-track: var(--wui-progress-track);
+        --color-progress-label: var(--wui-bg-light);
+        --color-thumb: var(--wui-bg-light);
+        --color-scrollbar: var(--wui-scrollbar);
+        --color-scrollbar-hover: var(--wui-scrollbar-hover);
+        --color-scrollbar-active: var(--wui-scrollbar-active);
+        --color-primary: var(--wui-primary);
+        --color-primary-hover: var(--wui-primary-pressed);
+        --color-primary-soft: var(--wui-primary-10);
+        --color-primary-text: var(--wui-primary-ink);
+        --color-on-primary: var(--wui-primary-text);
+        --color-success: var(--wui-success);
+        --color-success-pressed: var(--wui-success-active);
+        --color-success-soft: var(--wui-success-10);
+        --color-success-border: var(--wui-success-30);
+        --color-success-text: var(--wui-success-text);
+        --color-success-text-on-soft: var(--wui-success-text);
+        --color-success-strong: var(--wui-success-strong);
+        --color-on-success: #FFFFFF;
+        --color-on-success-strong: #FFFFFF;
+        --color-warning: var(--wui-warning);
+        --color-warning-pressed: var(--wui-warning-active);
+        --color-warning-soft: var(--wui-warning-10);
+        --color-warning-border: var(--wui-warning-30);
+        --color-warning-text: var(--wui-warning-text);
+        --color-warning-text-on-soft: var(--wui-warning-text);
+        --color-warning-strong: var(--wui-warning-strong);
+        --color-warning-strong-hover: var(--wui-warning-strong-hover);
+        --color-on-warning: #FFFFFF;
+        --color-on-warning-strong: #FFFFFF;
+        --color-danger: var(--wui-danger);
+        --color-danger-pressed: var(--wui-danger-active);
+        --color-danger-soft: var(--wui-danger-10);
+        --color-danger-border: var(--wui-danger-30);
+        --color-danger-text: var(--wui-danger-text);
+        --color-danger-text-on-soft: var(--wui-danger-text);
+        --color-danger-strong: var(--wui-danger-strong);
+        --color-danger-strong-hover: var(--wui-danger-strong-hover);
+        --color-on-danger: #FFFFFF;
+        --color-on-danger-strong: #FFFFFF;
+        --color-info: var(--wui-info);
+        --color-info-pressed: var(--wui-info-active);
+        --color-info-soft: var(--wui-info-10);
+        --color-info-border: var(--wui-info-30);
+        --color-info-text: var(--wui-info-text);
+        --color-info-text-on-soft: var(--wui-info-text);
+        --color-info-strong: var(--wui-info-active);
+        --color-on-info: #FFFFFF;
+        --color-on-info-strong: #FFFFFF;
+        --color-chart-1: var(--wui-primary);
+        --color-chart-2: var(--wui-chart-2);
+        --color-chart-3: var(--wui-chart-3);
+        --color-chart-4: var(--wui-chart-4);
+        --color-chart-5: var(--wui-chart-5);
+        --color-chart-6: var(--wui-chart-6);
+        --color-chart-7: var(--wui-chart-7);
+        --color-chart-8: var(--wui-chart-8);
+        --color-chart-seq-0: var(--wui-bg-muted);
+        --color-chart-seq-1: var(--wui-primary-10);
+        --color-chart-seq-2: var(--wui-primary-20);
+        --color-chart-seq-3: var(--wui-primary-30);
+        --color-chart-seq-4: var(--wui-primary-50);
+        --color-chart-seq-5: var(--wui-primary-hover);
+        --color-chart-seq-6: var(--wui-primary-pressed);
+        --color-chart-diverging-low: var(--wui-chart-diverging-low);
+        --color-chart-diverging-mid: var(--wui-chart-diverging-mid);
+        --color-chart-diverging-high: var(--wui-chart-diverging-high);
+        --color-chart-neutral: var(--wui-chart-neutral);
+        --wui-close-filter: none;
+        --wui-thumb-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+        --wui-thumb-shadow-hover: 0 2px 12px rgba(0, 0, 0, 0.2);
+        --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-heading-color: var(--color-text);
+        --bs-body-bg: var(--color-bg);
+        --bs-border-color: var(--color-border);
+        --bs-secondary-bg: var(--color-surface);
+        --bs-tertiary-bg: var(--color-bg-muted);
+        --bs-primary: var(--color-primary);
+        --bs-body-bg-rgb: 244, 246, 248;
+        --bs-primary-rgb: 79, 70, 229;
+        --bs-body-color-rgb: 7, 20, 55;
+        --bs-emphasis-color-rgb: 7, 20, 55;
+        --bs-secondary-color-rgb: 75, 86, 117;
+        --bs-tertiary-color-rgb: 98, 106, 130;
+        --bs-secondary-bg-rgb: 255, 255, 255;
+        --bs-tertiary-bg-rgb: 245, 246, 250;
+        --bs-border-color-rgb: 235, 237, 243;
+        --bs-link-color: var(--color-link);
+        --bs-link-color-rgb: 79, 70, 229;
+        --bs-link-hover-color: var(--color-primary-hover);
+        --bs-link-hover-color-rgb: 67, 56, 202;
+    }
+    :where(:root[data-theme="auto"] [data-theme="light"]),
+    :where(:root[data-theme="auto"] [data-bs-theme="light"]) {
+        color-scheme: light;
+        color: var(--color-text);
+    }
+}

package/scss/_variables.scss

@@ -179,23 +179,26 @@ $link-color: $wui-primary-ink !default;
     $link-hover-color: mix(black, $wui-primary-ink, 12%) !global;
 }
 
+// Bootstrap $ defaults generated from the token source (`corepack pnpm run tokens`). Imported here, before the first
+// read of $body-color, $border-color, $border-radius* and $wui-shadow-overlay* below, because a !default value is
+// only visible to lines after it. Every value is !default, so a brand $ set before this file still wins; this file
+// must not reassign them (scripts/check-theme-shadow.mjs).
+@import "bootstrap.generated";
+
 
 // ---- Body / text ----------------------------------------------------
 // $body-bg left at Bootstrap's $white — do not restate pure defaults here.
-$body-color: #252F4A; // text-1 from locked palette
+// $body-color comes from bootstrap.generated (color.text-body).
 
 
 // ---- Borders --------------------------------------------------------
-$border-color: #EBEDF3;
+// $border-color comes from bootstrap.generated (token source).
 
 // One ladder; every component derives from it (Bootstrap's own model). Set a
 // component's radius by pointing it at a rung, never by hardcoding a px value —
 // that is what let buttons drift to ~3x Bootstrap's.
-// Only rungs that DIFFER from Bootstrap 5.3 are set: BS is 0.375/0.25/0.5/1/2rem;
-// $border-radius-xl (1rem) and the font-weight ladder match BS and are left alone.
-$border-radius: 0.5rem; // 8px — buttons, inputs, dropdowns (BS 0.375)
-$border-radius-sm: 0.375rem; // 6px (BS 0.25)
-$border-radius-lg: 0.75rem; // 12px — cards, toasts (BS 0.5)
+// $border-radius, -sm, -lg and -pill come from bootstrap.generated (token source radius.md, sm, lg, pill);
+// only $border-radius-2xl is set here.
 $border-radius-2xl: 1.5rem; // 24px (BS 2rem via $border-radius-xxl)
 
 
@@ -247,10 +250,8 @@ $spacers: (
 // Elevation rule: in-page surfaces are FLAT (borders only).
 // Bootstrap utility ladder (.shadow / .shadow-sm / .shadow-lg) is zeroed so
 // products cannot reintroduce random depth. Floating UI (dropdown / modal /
-// toast) uses the overlay rungs — same values as --wui-shadow-popover in tokens.
-$wui-shadow-overlay: 0 8px 28px -6px rgba(7, 20, 55, 0.14);
-$wui-shadow-overlay-lg: 0 24px 60px -16px rgba(7, 20, 55, 0.28);
-
+// toast) uses the overlay rungs, $wui-shadow-overlay and $wui-shadow-overlay-lg, which
+// come from bootstrap.generated (shadow.popover, shadow.modal).
 $box-shadow-sm: none;
 $box-shadow: none;
 $box-shadow-lg: none;
@@ -370,7 +371,3 @@ $zindex-toast: 1700;
 // `--bs-table-color` / `--bs-table-bg`; see the base `.table` rules.)
 $table-cell-padding-y: 0.75rem; // 12px
 $table-cell-padding-x: 0.75rem; // 12px
-
-// Bootstrap $ defaults generated from the token source. Every value is !default, so a brand $ set
-// before or after this file still wins.
-@import "bootstrap.generated";