@webority/theme 0.7.2 → 0.7.4

package/scss/_variables.scss

@@ -11,14 +11,16 @@
 // ---- Brand colors ---------------------------------------------------
 // Neutral indigo default. The full ramp lives in _tokens.scss as CSS
 // variables since Bootstrap only consumes the named theme colors.
-$primary:      #4F46E5;
-$secondary:    #4B5675;  // foreground-3 — quiet text + secondary buttons
-$success:      #04B440;
-$info:         #056EE9;
-$warning:      #DFA000;
-$danger:       #E82646;
-$light:        #F9FBFC;  // surface-mute
-$dark:         #071437;  // text-heading
+// `!default` so a product that sets these in its own _variables BEFORE importing this file
+// (the documented override path) wins — a plain assignment here would clobber the brand.
+$primary:      #4F46E5 !default;
+$secondary:    #4B5675 !default;  // foreground-3 — quiet text + secondary buttons
+$success:      #04B440 !default;
+$info:         #056EE9 !default;
+$warning:      #DFA000 !default;
+$danger:       #E82646 !default;
+$light:        #F9FBFC !default;  // surface-mute
+$dark:         #071437 !default;  // text-heading
 
 // Override `$theme-colors` so Bootstrap's $theme-colors map includes
 // our brand. Anything we add here gets utility classes generated
@@ -35,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";
@@ -49,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;
@@ -68,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 --------------------------------------------------------
@@ -160,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;
@@ -197,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;
 
 
@@ -222,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;