@webority/theme 0.7.3 → 0.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "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": {

package/scss/_components.scss

@@ -153,6 +153,37 @@
     --bs-btn-disabled-border-color: var(--wui-danger-strong);
 }
 
+// Soft neutral tinted button — a quieter alternative to .btn-light for a secondary
+// action that shouldn't compete with a primary/danger CTA in the same row.
+.btn-subtle {
+    --bs-btn-bg:                    var(--color-bg-muted);
+    --bs-btn-color:                 var(--color-text);
+    --bs-btn-border-color:          transparent;
+    --bs-btn-hover-bg:              var(--color-border);
+    --bs-btn-hover-color:           var(--color-text);
+    --bs-btn-hover-border-color:    transparent;
+    --bs-btn-active-bg:             var(--color-border-strong);
+    --bs-btn-active-color:          var(--color-text);
+    --bs-btn-active-border-color:   transparent;
+}
+
+// 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.
+.btn-outline-light {
+    --bs-btn-color:                 #fff;
+    --bs-btn-bg:                    transparent;
+    --bs-btn-border-color:          rgba(255, 255, 255, 0.6);
+    --bs-btn-hover-color:           #fff;
+    --bs-btn-hover-bg:              rgba(255, 255, 255, 0.15);
+    --bs-btn-hover-border-color:    #fff;
+    --bs-btn-active-color:          #fff;
+    --bs-btn-active-bg:             rgba(255, 255, 255, 0.25);
+    --bs-btn-active-border-color:   #fff;
+    --bs-btn-disabled-color:        rgba(255, 255, 255, 0.5);
+    --bs-btn-disabled-border-color: rgba(255, 255, 255, 0.3);
+}
+
 // Themed disabled state (fleet default). Bootstrap's own disabled look is just the
 // variant's colour at --bs-btn-disabled-opacity (.65) — barely different from the active
 // button on a tinted brand palette. Give the ordinary case a real desaturated/muted look
@@ -180,9 +211,8 @@
 // sm/lg are re-asserted so they keep their own rung instead of the base value.
 .btn {
     --bs-btn-border-radius: var(--wui-radius);
-    // Smooth iOS-style corners so buttons match the squircle geometry every other
-    // control in the system already uses (inputs, selects, pills). Older browsers
-    // fall back to the plain border-radius arc — no breakage.
+    // Progressive enhancement only (Chrome/Safari recent). Unsupported engines
+    // keep a plain border-radius arc — not a cross-browser design contract.
     corner-shape: squircle;
 }
 .btn-sm,
@@ -358,11 +388,10 @@
 }
 
 
-// ---- Card "lifted" (shadowless) -------------------------------------
-// Previously a soft drop-shadow card; now flat. The `.card-lifted`
-// class is preserved so existing call sites don't break — it now
-// expresses elevation only via the 1px hover translate (kept as a
-// tactile signal, not a depth cue). No box-shadow, here or on hover.
+// ---- Card hover-lift (name is historical) -----------------------------
+// `.card-lifted` does NOT cast a shadow — in-page cards stay flat. It only
+// nudges 1px on hover (tactile signal). API prop stays `lifted` / class
+// `card-lifted` so call sites don't break (TASK-06086).
 .card-lifted {
     transition: transform 0.2s var(--wui-ease-out-quart);
     &:hover {
@@ -398,50 +427,9 @@
 
 
 // ---- Inputs ---------------------------------------------------------
-// 5 locked states — default / hover / focus / disabled / error —
-// matching the reference `<Input>` component. Bootstrap drives the base
-// look via $input-* vars in _variables.scss; these blocks add the
-// hover-border-darken cue and the leading/trailing-slot wrapper.
-//
-// The error state is driven by `aria-invalid="true"` (NOT by Bootstrap's
-// .is-invalid class) so accessibility tooling and visual cue stay in
-// sync without extra markup.
-
-.form-control,
-.form-select {
-    // Radius follows the token ladder (see component-radii note) rather than the
-    // compiled $input-border-radius, so a product's --wui-radius override reaches
-    // the raw Bootstrap inputs the way it already reaches the .input primitive.
-    border-radius: var(--wui-radius);
-    transition: border-color 0.15s ease;
-}
-.form-control:hover:not(:focus):not(:disabled):not([readonly]):not([aria-invalid="true"]),
-.form-select:hover:not(:focus):not(:disabled):not([aria-invalid="true"]) {
-    border-color: var(--color-border-strong);   // --wui-text-3 @ 60%
-}
-.form-control[aria-invalid="true"],
-.form-select[aria-invalid="true"] {
-    border-color: var(--bs-danger);
-}
-.form-control[aria-invalid="true"]:focus,
-.form-select[aria-invalid="true"]:focus {
-    border-color: var(--bs-danger);
-    box-shadow: none;
-}
-
-// Optional helper class for forms that prefer the explicit Bootstrap
-// validation pattern. Mirrors aria-invalid styling.
-.form-control.is-invalid,
-.form-select.is-invalid {
-    border-color: var(--bs-danger);
-    background-image: none;     // kill Bootstrap's exclamation-mark SVG
-    padding-right: 0.875rem;
-}
-.form-control.is-invalid:focus,
-.form-select.is-invalid:focus {
-    border-color: var(--bs-danger);
-    box-shadow: none;
-}
+// Field chrome (height, hover, focus, invalid) lives in wui/_controls.scss on
+// `.form-control` / `.form-select` with `.input` as an alias — one skin, not two
+// (TASK-06079). This partial only keeps the marketing-side input-group shell.
 
 
 // ---- Input group (leading / trailing slots) ------------------------
@@ -464,33 +452,32 @@
     align-items: center;
     gap: 0.5rem;
     padding-inline: 0.875rem;
-    height: calc(2.5rem + 2px);          // 40px box + 1px border each side
-    background: var(--wui-bg-light, #FFFFFF);
-    border: 1px solid var(--bs-border-color);
-    border-radius: var(--radius);        // matches the bare input radius
+    height: var(--wui-control-height);
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
     transition: border-color 0.15s ease;
-
-
 }
 .wui-input-group:hover:not(:focus-within):not(.is-disabled) {
-    border-color: rgba(120, 130, 157, 0.6);
+    border-color: var(--color-border-strong);
 }
 .wui-input-group:focus-within {
-    border-color: var(--wui-primary);
+    border-color: var(--color-primary);
 }
 .wui-input-group.is-disabled,
 .wui-input-group:has(input:disabled) {
-    background: var(--wui-bg-muted);
+    background: var(--color-bg-muted);
     cursor: not-allowed;
-    border-color: var(--bs-border-color);
+    border-color: var(--color-border);
 }
 .wui-input-group.has-error,
 .wui-input-group:has(input[aria-invalid="true"]) {
-    border-color: var(--bs-danger);
+    border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-surface));
 }
 
 // Strip the bare input's own chrome — the wrapper carries it all.
-.wui-input-group > .form-control {
+.wui-input-group > .form-control,
+.wui-input-group > .input {
     flex: 1 1 auto;
     min-width: 0;
     height: 100%;
@@ -502,7 +489,9 @@
     border-radius: 0;
 }
 .wui-input-group > .form-control:focus,
-.wui-input-group > .form-control:hover {
+.wui-input-group > .form-control:hover,
+.wui-input-group > .input:focus,
+.wui-input-group > .input:hover {
     border: 0;
     box-shadow: none !important;
     background: transparent;
@@ -782,39 +771,31 @@ button.wui-input-leading:focus-visible {
 }
 
 
-// ---- Refined native scrollbars --------------------------------------
-// Mirrors the locked design's always-visible scrollbar treatment:
+// ---- Native scrollbars (document + opt-in) --------------------------
+// Scoped to html/body and `.wui-scroll` — never `*` (TASK-06085). Global
+// `*` restyled every nested scroller (modals, tiny panels) and fought
+// component-local rails. AppScrollbar uses `.wui-scroll` (see wui/_scrollbar).
 //
-//   - 8px thin WebKit thumb (also Firefox via `scrollbar-width: thin`)
-//   - Quiet grey-blue tint always visible at rest (~40% alpha)
-//   - Brighter on hover (~60% alpha) and active (~80%)
-//   - Pill thumb with a 2px transparent border (visual cushion)
-//   - `scrollbar-gutter: stable` on <html>/<body> so the page never
-//     shifts when scrollable content grows/shrinks. Internal containers
-//     (avatars, badges, rounded buttons) intentionally skip the gutter
-//     reservation — applying it everywhere would push centered glyphs
-//     off-center inside rounded boxes.
-//
-// `wwwroot/js/scroll-state.js` toggles `html.is-scrolling` for ~800ms
-// after each scroll event; the thumb gets an extra opacity bump while
-// the class is on, giving subtle "I'm scrolling now" feedback without
-// sacrificing the always-visible affordance.
+// `scrollbar-gutter: stable` only on the document so internal boxes do not
+// push centered glyphs off-center. `html.is-scrolling` (scroll-state.js)
+// brightens the document thumb while the page is scrolling.
 html,
 body {
     scrollbar-gutter: stable;
-}
-* {
     scrollbar-width: thin;
     scrollbar-color: var(--wui-scrollbar) transparent;
 }
-*::-webkit-scrollbar {
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
     width: 8px;
     height: 8px;
 }
-*::-webkit-scrollbar-track {
+html::-webkit-scrollbar-track,
+body::-webkit-scrollbar-track {
     background: transparent;
 }
-*::-webkit-scrollbar-thumb {
+html::-webkit-scrollbar-thumb,
+body::-webkit-scrollbar-thumb {
     background-color: var(--wui-scrollbar);
     border-radius: 9999px;
     border: 2px solid transparent;
@@ -823,29 +804,31 @@ body {
     min-width: 36px;
     transition: background-color 220ms ease;
 }
-*::-webkit-scrollbar-thumb:hover {
+html::-webkit-scrollbar-thumb:hover,
+body::-webkit-scrollbar-thumb:hover {
     background-color: var(--wui-scrollbar-hover);
     background-clip: padding-box;
 }
-*::-webkit-scrollbar-thumb:active {
+html::-webkit-scrollbar-thumb:active,
+body::-webkit-scrollbar-thumb:active {
     background-color: var(--wui-scrollbar-active);
     background-clip: padding-box;
 }
-*::-webkit-scrollbar-corner {
+html::-webkit-scrollbar-corner,
+body::-webkit-scrollbar-corner {
     background: transparent;
 }
 
-// While the page is actively scrolling, give the thumb a slight extra
-// pop so the user can track its position more easily.
-html.is-scrolling * {
+html.is-scrolling,
+html.is-scrolling body {
     scrollbar-color: var(--wui-scrollbar-hover) transparent;
 }
-html.is-scrolling *::-webkit-scrollbar-thumb {
+html.is-scrolling::-webkit-scrollbar-thumb,
+html.is-scrolling body::-webkit-scrollbar-thumb {
     background-color: var(--wui-scrollbar-hover);
 }
 
-// Utility: completely hide a scrollbar (e.g., for marquee/horizontal
-// carousels where the rail itself is visually intrusive).
+// Hide a scrollbar (marquee / horizontal carousels).
 .scrollbar-hide {
     scrollbar-width: none;
 }

package/scss/_tokens.scss

@@ -55,19 +55,14 @@
     // Used by the tab ink-bar so a tab switch springs into place rather than sliding flat.
     --wui-ease-elastic:   cubic-bezier(0.34, 1.56, 0.64, 1);
 
-    // Elevation — exposes the Bootstrap $box-shadow* SCSS vars (set in
-    // _variables.scss) as CSS vars so inline styles / JS / the portal
-    // can reach the same values Bootstrap utilities use.
-    --wui-shadow-card:               #{$box-shadow-sm};
-    --wui-shadow-card-lifted:        #{$box-shadow};
-    --wui-shadow-card-lifted-hover:  #{$box-shadow-lg};
-
-    // Overlay elevation. The rule: in-page surfaces stay FLAT (a card is a
-    // border, not a shadow); only things that float above the page lift —
-    // menus, popovers, modals. One ink (the heading navy) so every overlay
-    // casts the same light; components must never hand-roll a shadow.
-    --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);
+    // Elevation (TASK-06080). In-page card tokens are flat (none). Overlay
+    // rungs match $wui-shadow-overlay* in _variables.scss — one ink for menus,
+    // popovers, modals. Do not hand-roll a third shadow.
+    --wui-shadow-card:               none;
+    --wui-shadow-card-lifted:        none;
+    --wui-shadow-card-lifted-hover:  none;
+    --wui-shadow-overlay:    #{$wui-shadow-overlay};
+    --wui-shadow-overlay-lg: #{$wui-shadow-overlay-lg};
 
     // One height for every form control. Buttons, inputs and selects share form
     // rows, so they must line up — they were 46.8px and 45px, which reads as a
@@ -111,10 +106,10 @@
     --wui-neutral-bg-light:     #F9FBFC;
 
     // ---- Accent-dark -----------------------------------------------
-    // Link hover, focused button, deep-purple CTA underline. Matches
-    // $link-hover-color in _variables.scss but exposed as a CSS
-    // var so JS / inline styles can reach it.
-    --wui-accent-dark: #4338CA;
+    // Darker primary for pressed/hover accents in CSS (not SCSS $link-hover).
+    // Aliased onto --wui-primary-pressed so a product that rebrands the pressed
+    // token once also updates this name (was a frozen indigo hex).
+    --wui-accent-dark: var(--wui-primary-pressed);
 
     // ---- Container width + responsive padding ----------------------
     // The standalone design uses a 1512px max canvas with generous side
@@ -223,16 +218,27 @@
     --wui-font-display: var(--bs-body-font-family);
 
     // ---- Z-index scale -------------------------------------------------
-    // Bootstrap's own ladder ($zindex-dropdown etc.), exposed as CSS vars so a component
-    // or a consuming product can layer against the same scale instead of inventing values.
+    // One page-level ladder. Local stacking inside a component (1, 5, 10, 40…) is
+    // NOT on this scale — only fixed/portalled layers that compete across the page.
+    //
+    // Why not Bootstrap's raw 1040/1050 for modals? App shell sticky chrome uses
+    // 1040–1045; a BS-height modal would paint under the mobile drawer. Modals are
+    // elevated to 1500+ so the shell never covers a dialog. Portalled menus
+    // (select / date / phone / infotip) sit at 1600 so a combobox inside a modal
+    // is not trapped under the dialog. Never invent a third number in component CSS —
+    // pick a rung from this list (TASK-06078).
     --wui-z-dropdown:       1000;
     --wui-z-sticky:         1020;
     --wui-z-fixed:          1030;
-    --wui-z-modal-backdrop: 1040;
-    --wui-z-modal:          1050;
-    --wui-z-popover:        1060;
-    --wui-z-tooltip:        1070;
-    --wui-z-toast:          1080;
+    --wui-z-shell:          1040;   // splash, shell base chrome
+    --wui-z-shell-scrim:    1044;   // mobile drawer scrim
+    --wui-z-shell-drawer:   1045;   // mobile sidebar drawer
+    --wui-z-modal-backdrop: 1500;
+    --wui-z-modal:          1505;
+    --wui-z-menu:           1600;   // portalled select/date/phone menus + infotip
+    --wui-z-popover:        1600;   // same rung as --wui-z-menu (above modal)
+    --wui-z-tooltip:        1650;
+    --wui-z-toast:          1700;
 }
 
 // Bootstrap md / xl (not invented px)

package/scss/_variables.scss

@@ -37,9 +37,9 @@ $theme-colors: (
 );
 
 // Brand helper — set a product's primary ONCE and have the theme-colour map
-// (so every .btn-primary / .bg-primary / .text-primary utility) and $link-color
-// follow, instead of overriding each in turn. Call it in the product's
-// pre-bootstrap variables, BEFORE the `bootstrap/scss/bootstrap` import, e.g.:
+// (so every .btn-primary / .bg-primary / .text-primary utility), $link-color,
+// and $link-hover-color follow, instead of overriding each in turn. Call it in
+// the product's pre-bootstrap variables, BEFORE `bootstrap/scss/bootstrap`, e.g.:
 //
 //   @include wui-brand-primary(#0EA5E9);
 //   @import "bootstrap/scss/bootstrap";
@@ -51,12 +51,13 @@ $theme-colors: (
     $primary: $primary !global;
     $theme-colors: map-merge($theme-colors, ("primary": $primary)) !global;
     $link-color: $primary !global;
+    $link-hover-color: mix(black, $primary, 12%) !global;
 }
 
 
 // ---- Body / text ----------------------------------------------------
+// $body-bg left at Bootstrap's $white — do not restate pure defaults here.
 $body-color:        #252F4A;  // text-1 from locked palette
-$body-bg:           #FFFFFF;
 $body-secondary-color: #4B5675;
 $body-tertiary-color:  #687088;   // AA on white (matches --wui-text-3); #78829D was only 3.5:1
 $body-secondary-bg: #F9FBFC;
@@ -70,81 +71,71 @@ $border-color-translucent: rgba(13, 24, 43, 0.08);
 // 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.
-$border-radius:       0.5rem;     // 8px  — buttons, inputs, dropdowns
-$border-radius-sm:    0.375rem;   // 6px
-$border-radius-lg:    0.75rem;    // 12px — cards, toasts
-$border-radius-xl:    1rem;       // 16px — modals
-$border-radius-2xl:   1.5rem;     // 24px
-$border-radius-pill:  9999px;
+// 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-2xl:   1.5rem;     // 24px (BS 2rem via $border-radius-xxl)
+$border-radius-pill:  9999px;     // same visual as BS 50rem; explicit for token clarity
 
 
 // ---- Typography -----------------------------------------------------
+// Font-size base (1rem) and font-weight 300–700 match Bootstrap — not restated.
+// h1/h2/h6 match Bootstrap's $font-size-base multipliers at 1rem — not restated;
+// only h3–h5 are tighter than Bootstrap's scale.
 $font-family-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 $font-family-monospace:  'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 
-$font-size-base:    1rem;       // 16px
-$line-height-base:  1.55;
+$line-height-base:  1.55;   // BS 1.5
 
-$font-weight-light:    300;
-$font-weight-normal:   400;
-$font-weight-medium:   500;
-$font-weight-semibold: 600;
-$font-weight-bold:     700;
-
-$headings-font-weight:    600;
-$headings-line-height:    1.2;
+$headings-font-weight:    600;   // BS 500
 $headings-letter-spacing: -0.02em;
 $headings-color:          #071437;
 
 $display-font-weight:     500;
 $display-line-height:     1.05;
 
-$h1-font-size: 2.5rem;   // 40px
-$h2-font-size: 2rem;     // 32px
-$h3-font-size: 1.5rem;   // 24px
-$h4-font-size: 1.25rem;  // 20px
-$h5-font-size: 1.125rem; // 18px
-$h6-font-size: 1rem;     // 16px
+$h3-font-size: 1.5rem;   // 24px  (BS 1.75rem)
+$h4-font-size: 1.25rem;  // 20px  (BS 1.5rem)
+$h5-font-size: 1.125rem; // 18px  (BS 1.25rem)
 
 
 // ---- Spacing --------------------------------------------------------
-// Bootstrap default ladder is 0/.25/.5/1/1.5/3rem. We add 6/8/10/12
-// for hero / section padding so utility classes like `py-8` exist.
-$spacer: 1rem;
+// Bootstrap ladder is 0/.25/.5/1/1.5/3rem ($spacer = 1rem). We replace the map
+// with the same 0–5 rungs plus 6/7/8/10/12 for hero / section padding so
+// utilities like `py-8` exist. No need to restate $spacer itself.
 $spacers: (
     0:  0,
-    1:  $spacer * 0.25,    // 4px
-    2:  $spacer * 0.5,     // 8px
-    3:  $spacer,           // 16px
-    4:  $spacer * 1.5,     // 24px
-    5:  $spacer * 3,       // 48px
-    6:  $spacer * 4.5,     // 72px
-    7:  $spacer * 5,       // 80px
-    8:  $spacer * 6,       // 96px
-    10: $spacer * 8,       // 128px
-    12: $spacer * 10,      // 160px
+    1:  0.25rem,   // 4px
+    2:  0.5rem,    // 8px
+    3:  1rem,      // 16px
+    4:  1.5rem,    // 24px
+    5:  3rem,      // 48px
+    6:  4.5rem,    // 72px
+    7:  5rem,      // 80px
+    8:  6rem,      // 96px
+    10: 8rem,      // 128px
+    12: 10rem,     // 160px
 );
 
-
-// ---- Container widths -----------------------------------------------
-// The locked design uses a wider canvas (1512px max) with generous side
-// padding. Override Bootstrap's narrower default so marketing layouts
-// breathe properly on large monitors.
-$container-max-widths: (
-    sm:   540px,
-    md:   720px,
-    lg:   960px,
-    xl:  1140px,
-    xxl: 1320px,
-);
+// $container-max-widths is intentionally NOT overridden — Bootstrap's
+// 540/720/960/1140/1320 map is already what we want. The wider marketing
+// canvas (1512px) is `.container-cloves` + `--wui-container-max` in tokens,
+// not Bootstrap's stepped `.container`.
 
 
 // ---- Shadows --------------------------------------------------------
-// Mirrors the `card / card-lifted / card-lifted-hover` shadow tokens
-// from the locked design.
-$box-shadow-sm:  0 1px 2px rgba(7, 20, 55, 0.04), 0 4px 12px rgba(7, 20, 55, 0.06);
-$box-shadow:     0 0 2px 0 rgba(145, 158, 171, 0.20), 0 12px 24px -4px rgba(145, 158, 171, 0.12);
-$box-shadow-lg:  0 0 2px 0 rgba(145, 158, 171, 0.20), 0 20px 40px -4px rgba(145, 158, 171, 0.20);
+// Elevation rule (TASK-06080): 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-overlay* 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);
+
+$box-shadow-sm:  none;
+$box-shadow:     none;
+$box-shadow-lg:  none;
 
 
 // ---- Buttons --------------------------------------------------------
@@ -162,34 +153,29 @@ $btn-transition:         color 0.15s ease, background-color 0.15s ease, border-c
 
 
 // ---- Forms ----------------------------------------------------------
-// Matches the reference `<Input>` component spec (5 locked states:
-// default / hover / focus / disabled / error). The border itself is the
-// focus cue — no separate box-shadow glow. Disabled gets a muted bg.
-// Error is driven by `aria-invalid="true"` (no separate .is-invalid
-// class needed for the visual change).
+// Bootstrap `.form-control` is the field skin; post-CSS in wui/_controls.scss
+// layers shared height / hover / focus / invalid on `.form-control` and the
+// `.input` alias together (TASK-06079). Here only $input-* BS vars.
 $input-bg:                #FFFFFF;
 $input-disabled-bg:       #F5F6FA;   // --wui-bg-muted
 $input-border-color:      $border-color;
 // $input-focus-border-color is intentionally NOT overridden. Setting it to $primary here
 // captures the LIBRARY's $primary (this file compiles before a product's brand override),
-// leaking indigo into every product's raw .form-control focus. Bootstrap's !default derives
-// it from the brand $primary after the override; the library's own .input:focus uses
-// var(--wui-primary), which the product overrides at runtime.
+// leaking indigo into every product. Bootstrap's !default derives it from brand $primary;
+// post-CSS focus uses var(--color-primary) so runtime rebrand tracks.
 $input-focus-box-shadow:  none;       // border IS the focus cue
 $input-focus-color:       $body-color;
-$input-padding-y:         0.5rem;     // 8px → 40px total height with 1rem font + 1.5 line-height
-$input-padding-x:         0.875rem;   // 14px — comfortable inset for leading icon space
-$input-border-radius:     $border-radius;   // 8px — matches buttons; controls share one corner
+$input-padding-y:         0.5rem;     // filler inside --wui-control-height (44px)
+$input-padding-x:         0.875rem;   // 14px
+$input-border-radius:     $border-radius;
 $input-placeholder-color: #99A1B7;    // --wui-text-4
 
 
 // ---- Cards ----------------------------------------------------------
 $card-border-color:    $border-color;
 $card-border-radius:   $border-radius-lg;
-// Flat surfaces — no drop shadow on default .card. Depth is conveyed
-// via background tint + hairline border instead. Use .card-lifted
-// utility (in _components.scss) only when a card legitimately
-// needs to sit "above" the page (currently disabled — set to `none`).
+// Flat surfaces — no drop shadow on default .card. Depth is border + tint.
+// `.card-lifted` is a 1px hover translate only (not a shadow).
 $card-box-shadow:      none;
 $card-spacer-y:        1.5rem;
 $card-spacer-x:        1.5rem;
@@ -199,23 +185,26 @@ $card-spacer-x:        1.5rem;
 $nav-link-font-weight:   500;
 $dropdown-border-color:  $border-color;
 $dropdown-border-radius: $border-radius;
-$dropdown-box-shadow:    $box-shadow-lg;
+$dropdown-box-shadow:    $wui-shadow-overlay;
 
 
 // ---- Modals + toasts ------------------------------------------------
 $modal-content-border-color:  $border-color;
-$modal-content-border-radius: $border-radius-xl;
-$modal-content-box-shadow-xs: $box-shadow-lg;
+$modal-content-border-radius: 1rem;   // BS $border-radius-xl (1rem) — literal because we do not restate that rung
+$modal-content-box-shadow-xs: $wui-shadow-overlay-lg;
 
 $toast-border-color:    $border-color;
 $toast-border-radius:   $border-radius-lg;
-$toast-box-shadow:      $box-shadow-lg;
+$toast-box-shadow:      $wui-shadow-overlay-lg;
 
 
 // ---- Links ----------------------------------------------------------
-$link-color:           $primary;
-$link-hover-color:     #4338CA;   // accent-dark (primary pressed)
-$link-decoration:      none;
+// $link-color left at Bootstrap's default ($primary) so it tracks brand $primary.
+// Hover is a darkened mix of $primary — never a hard-coded indigo — so a product
+// that sets $primary (or calls wui-brand-primary) gets a matching hover. Approximate
+// of Bootstrap's shift-color($link-color, 20%) without importing BS functions here.
+$link-hover-color:     mix(black, $primary, 12%);
+$link-decoration:      none;      // BS default is underline
 $link-hover-decoration: underline;
 
 
@@ -224,8 +213,8 @@ $link-hover-decoration: underline;
 // LIBRARY's $primary (this file compiles before a product's brand override), so the ring
 // leaked indigo into every product. Bootstrap's !default `rgba($primary, $focus-ring-opacity)`
 // is evaluated after the brand override, so it tracks the brand correctly.
-$focus-ring-width:    3px;
-$focus-ring-blur:     0;
+// $focus-ring-blur matches BS (0) — not restated.
+$focus-ring-width:    3px;   // BS 0.25rem (4px)
 
 
 // ---- Table ----------------------------------------------------------

package/scss/_wui-aliases.scss

@@ -97,7 +97,8 @@
   --color-scrim:         color-mix(in srgb, var(--wui-text-heading) 62%, transparent);
   --color-on-scrim:      var(--wui-bg-light);
 
-  // Elevation — in-page surfaces flat (borders only); floating overlays lift.
+  // Elevation — in-page flat; only floating overlays lift (matches zeroed BS
+  // $box-shadow* utilities and --wui-shadow-card* none — TASK-06080).
   --shadow-sm: none;
   --shadow-md: none;
   --shadow-lg: none;

package/scss/wui/_choice.scss

@@ -318,7 +318,7 @@
 // scrollable modal / table card. Sits above the modal layer.
 .search-select-menu-fixed {
     position: fixed;
-    z-index: 1600;
+    z-index: var(--wui-z-menu);
     right: auto;
     top: auto;
     left: auto;
@@ -483,7 +483,7 @@
 // sits above the modal layer.
 .datepicker-pop {
     position: fixed;
-    z-index: 1600;
+    z-index: var(--wui-z-menu);
     width: 312px;
     max-width: calc(100vw - 16px);
     padding: 18px;
@@ -801,7 +801,7 @@ button.datepicker-month:hover {
 }
 .daterange-pop {
     position: fixed;
-    z-index: 1600;
+    z-index: var(--wui-z-menu);
     width: 620px;
     max-width: calc(100vw - 16px);
     padding: 18px;
@@ -998,7 +998,7 @@ button.datepicker-month:hover {
 // modal layer, matching .search-select-menu-fixed and .datepicker-pop.
 .country-dropdown-menu {
     position: fixed;
-    z-index: 1600;
+    z-index: var(--wui-z-menu);
     width: 320px;
     max-width: calc(100vw - 16px);
     padding: 4px;