@webority/theme 0.7.2 → 0.7.4

package/index.scss

@@ -0,0 +1,15 @@
+// Default-brand full chain — compiled to dist/webority-theme.css (the RCL static
+// asset + the zero-toolchain convenience build). Consumers who want brand-exact
+// output import the partials individually with their OWN _variables before bootstrap.
+//
+// Load order is LOAD-BEARING — never reorder:
+//   variables (before bootstrap) -> bootstrap -> tokens -> aliases -> components -> wui-components
+// Flags are NOT imported here: _wui-components already imports them (the phone control needs
+// them), and legacy @import does not dedupe, so a second import emitted all ~245 flag classes
+// twice (≈490 selectors) and bloated the bundle.
+@import "scss/variables";
+@import "bootstrap/scss/bootstrap";
+@import "scss/tokens";
+@import "scss/wui-aliases";
+@import "scss/components";
+@import "scss/wui-components";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.7.2",
+  "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": {
@@ -13,6 +13,7 @@
     "directory": "packages/theme"
   },
   "files": [
+    "index.scss",
     "scss",
     "dist"
   ],

package/scss/_components.scss

@@ -121,6 +121,69 @@
     --bs-btn-disabled-border-color: var(--wui-danger-strong);
 }
 
+// Outline variants — tokenized like the solid buttons above so they follow a product's
+// RUNTIME --wui-* brand instead of Bootstrap's compile-time colours. Resting = brand outline
+// on a transparent fill; hover fills with the brand and flips the label to the on-brand text
+// token; active deepens to the pressed fill.
+.btn-outline-primary {
+    --bs-btn-color:                 var(--color-primary);
+    --bs-btn-border-color:          var(--color-primary);
+    --bs-btn-hover-color:           var(--wui-primary-text);
+    --bs-btn-hover-bg:              var(--color-primary);
+    --bs-btn-hover-border-color:    var(--color-primary);
+    --bs-btn-active-color:          var(--wui-primary-text);
+    --bs-btn-active-bg:             var(--wui-primary-pressed);
+    --bs-btn-active-border-color:   var(--wui-primary-pressed);
+    --bs-btn-disabled-color:        var(--color-primary);
+    --bs-btn-disabled-border-color: var(--color-primary);
+}
+
+// Outline danger uses the deepened --wui-danger-strong (5.80:1, carries white) that solid
+// .btn-danger uses, so an outline-danger hover reads identically to solid danger.
+.btn-outline-danger {
+    --bs-btn-color:                 var(--wui-danger-strong);
+    --bs-btn-border-color:          var(--wui-danger-strong);
+    --bs-btn-hover-color:           #fff;
+    --bs-btn-hover-bg:              var(--wui-danger-strong);
+    --bs-btn-hover-border-color:    var(--wui-danger-strong);
+    --bs-btn-active-color:          #fff;
+    --bs-btn-active-bg:             var(--wui-danger-strong-hover);
+    --bs-btn-active-border-color:   var(--wui-danger-strong-hover);
+    --bs-btn-disabled-color:        var(--wui-danger-strong);
+    --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
@@ -148,6 +211,9 @@
 // sm/lg are re-asserted so they keep their own rung instead of the base value.
 .btn {
     --bs-btn-border-radius: var(--wui-radius);
+    // 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,
 .btn-group-sm > .btn {
@@ -164,6 +230,10 @@
 // padding, an icon–label gap, a rounded hover highlight tinted with the brand,
 // and a danger variant so a row-action menu reads as one considered control.
 .dropdown-menu {
+    // Elevated surface (like .card), not Bootstrap's default page --bs-body-bg: otherwise the
+    // menu blends into a tinted page and, in dark mode, resolves to the page colour instead of
+    // the elevated surface.
+    --bs-dropdown-bg:               var(--color-surface);
     --bs-dropdown-min-width:        12rem;
     --bs-dropdown-padding-x:        0.375rem;
     --bs-dropdown-padding-y:        0.375rem;
@@ -232,7 +302,7 @@
 //
 // Reference values:
 //   - height       : 48px         (h-12 = 3rem)
-//   - radius       : 16px          (matches `.btn-squircle` literal)
+//   - radius       : 16px          (--wui-radius-xl)
 //   - font         : 14px / 500    (text-sm font-medium)
 //   - padding-x    : 20px (px-5)   default — Watch demo / outline-dark
 //                    Primary CTA overrides to 24px (px-6) inline
@@ -247,7 +317,7 @@
     --bs-btn-font-size:     0.875rem;   // 14px
     --bs-btn-font-weight:   500;
     --bs-btn-line-height:   1.25;
-    --bs-btn-border-radius: 16px;       // matches .btn-squircle exactly
+    --bs-btn-border-radius: var(--wui-radius-xl);   // 16px
     min-height: 3rem;                   // 48px (h-12)
 
 
@@ -318,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 {
@@ -358,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) ------------------------
@@ -424,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%;
@@ -462,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;
@@ -546,16 +575,21 @@ button.wui-input-leading:focus-visible {
 }
 
 
-// ---- Squircle corners (iOS-style) -----------------------------------
-// Named opt-in utilities for a specific squircle radius without relying
-// on Bootstrap's $border-radius. A consuming product can layer a global
-// `corner-shape: squircle` rule on top (Chrome 138+ / Safari 16+; older
-// browsers fall back to the plain border-radius — no breakage).
-.btn-squircle {
-    border-radius: 16px;
+// ---- Radius step utilities ------------------------------------------
+// Every .btn is already a squircle (see base .btn above), so a button that
+// wants a larger corner only needs a bigger radius — hence .btn-radius-xl,
+// named for what it does (an xl radius step) rather than the corner shape.
+.btn-radius-xl {
+    --bs-btn-border-radius: var(--wui-radius-xl);   // 16px
 }
+
+// Generic (non-button) squircle rounding. Unlike .btn, an arbitrary element
+// gets no corner-shape from the base rules, so this utility sets it itself —
+// otherwise the name would lie and it'd render a plain 32px arc. Older
+// browsers fall back to that arc (Chrome 138+ / Safari 16+ for the squircle).
 .rounded-squircle {
     border-radius: 32px;
+    corner-shape: squircle;
 }
 
 
@@ -737,39 +771,31 @@ button.wui-input-leading:focus-visible {
 }
 
 
-// ---- Refined native scrollbars --------------------------------------
-// Mirrors the locked design's always-visible scrollbar treatment:
-//
-//   - 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.
+// ---- 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).
 //
-// `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;
@@ -778,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

@@ -51,20 +51,18 @@
     // Easing curves — match locked design's CSS / Framer Motion exports
     --wui-ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
     --wui-ease-ui:        cubic-bezier(0.32, 0.72, 0, 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);
+    // Elastic / spring — overshoots the target then settles (the y > 1 control point).
+    // 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 (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
@@ -108,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
@@ -220,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)