@webority/theme 0.7.7 → 0.7.9

package/package.json

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

@@ -6,14 +6,15 @@
 // ---- Button polish (used by both Razor + React) ---------------------
 // Flat buttons — no drop shadow. Active-press feedback (1px nudge) is
 // retained because it's a tactile signal, not a depth cue.
-// Default-size buttons match the shared control height so a button next to an
-// input in a filter bar or form row lines up exactly. sm/lg opt out — they are
-// deliberately a different size.
+// Button heights are fixed to the design reference — large 55px, medium 45px,
+// small 35px — via min-height, with the label flex-centred. (These are button-
+// specific and intentionally a touch taller than the shared --wui-control-height
+// input ladder; sm/lg pin their own height 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) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-height: var(--wui-control-height);
+    min-height: 45px;
 }
 
 // Tactile press feedback — every variant AND every size (sm/md/lg). Kept
@@ -37,7 +38,24 @@
     --bs-btn-color: var(--wui-primary-text);
     --bs-btn-hover-color: var(--wui-primary-text);
     --bs-btn-active-color: var(--wui-primary-text);
-    --bs-btn-disabled-color: var(--wui-primary-text);
+}
+
+// Secondary — a soft brand tint (matches the design reference's secondary): a
+// low-alpha wash of the brand rather than an opaque fill, so it reads as a
+// quieter companion to the solid primary. Colour comes from the brand token;
+// only the TRANSPARENCY is taken from the reference — the tint deepens on hover
+// then press. No border (the tint carries the shape). Disabled is the shared
+// neutral-grey state below, like every other variant.
+.btn-secondary {
+    --bs-btn-color: var(--color-primary);
+    --bs-btn-bg: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: var(--color-primary);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--color-primary) 18%, transparent);
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-color: var(--color-primary);
+    --bs-btn-active-bg: color-mix(in srgb, var(--color-primary) 26%, transparent);
+    --bs-btn-active-border-color: transparent;
 }
 
 .btn-danger {
@@ -128,11 +146,13 @@
 // instead, reusing the same tokens .input:disabled already uses so a disabled button and
 // a disabled field read as the same state.
 //
-// Excludes .btn-primary and .btn-danger, which already theme their OWN disabled state
-// above (a faded version of their own fill, driven by --bs-btn-disabled-*) — :not() keeps
-// this rule from fighting theirs rather than relying on source order.
-.btn:disabled:not(.btn-primary):not(.btn-danger),
-.btn.disabled:not(.btn-primary):not(.btn-danger) {
+// Applies to EVERY variant except .btn-danger — matching the design reference, where a
+// disabled button of any kind reads as one neutral greyed-out state, not a faded tint of
+// its own colour. (Primary would otherwise fall back to a washed-out indigo, secondary to a
+// faint brand tint.) .btn-danger keeps its own faded-red disabled (defined above), since the
+// reference doesn't cover it and a greyed destructive button loses its warning read.
+.btn:disabled:not(.btn-danger),
+.btn.disabled:not(.btn-danger) {
     background-color: var(--color-bg-muted);
     border-color: var(--color-border);
     color: var(--color-text-subtle);
@@ -146,19 +166,160 @@
 // reached them. Re-drive the radius from the tokens — the way the dropdown above
 // already does — so overriding the radius tokens once flows to every control.
 // sm/lg are re-asserted so they keep their own rung instead of the base value.
+// Per-size type + padding scale, matched to the design reference: the three
+// sizes step font-size, horizontal padding and radius together (vertical size
+// comes from --wui-control-height, so a button lines up with an input). Weight
+// is 600 on every rung — buttons read as a deliberate action, not body text.
+// Medium (default): 15px / 600, 24px side padding, 10px radius, 44px tall.
 .btn {
     --bs-btn-border-radius: var(--wui-radius);
+    --bs-btn-font-size: 0.9375rem;
+    --bs-btn-font-weight: 600;
+    --bs-btn-padding-x: 1.5rem;
     // 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 {
+// Small: 14px, 18px side padding, 8px radius, 35px tall.
+.btn-sm:not(.btn-icon),
+.btn-group-sm > .btn:not(.btn-icon) {
     --bs-btn-border-radius: var(--wui-radius-sm);
+    --bs-btn-font-size: 0.875rem;
+    --bs-btn-padding-x: 1.125rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 35px;
 }
-.btn-lg,
-.btn-group-lg > .btn {
+// Large: 17px, 32px side padding, 14px radius, 55px tall — a spacious CTA.
+.btn-lg:not(.btn-icon),
+.btn-group-lg > .btn:not(.btn-icon) {
     --bs-btn-border-radius: var(--wui-radius-lg);
+    --bs-btn-font-size: 1.0625rem;
+    --bs-btn-padding-x: 2rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 55px;
+}
+
+// ---- Hover animation options (opt-in modifiers) ---------------------
+// Every .btn animates on hover. The DEFAULT is the royal sheen sweep; switch a
+// button to a different feel with a .btn-anim-* modifier, or turn motion off
+// with .btn-anim-none. Every option reads on EVERY variant — the moving layer
+// is tinted from the button's OWN colour (color-mix on currentColor / the
+// resolved --bs-btn fill), so it's a pale sheen on solid fills, a brand shimmer
+// on outline/ghost, a neutral gloss on subtle/light. All snap off under
+// prefers-reduced-motion (below). Icon-only / link-style actions never animate.
+//
+//   (default)         royal angled sheen sweep + a restrained −1px lift
+//   .btn-anim-sheen   the same sheen, named (to override a product default)
+//   .btn-anim-fill    a tint wipes in left→right
+//   .btn-anim-expand  a radial glow blooms from the centre
+//   .btn-anim-glow    a soft colour-matched glow ring + lift
+//   .btn-anim-none    no hover motion
+//
+// Shared plumbing — a clipped, isolated box so a z-index:-1 layer can sit above
+// the fill but below the label; overflow clips it to the squircle corners.
+.btn:not(.btn-icon):not(.u-action) {
+    position: relative;
+    overflow: hidden;
+    isolation: isolate;
+}
+
+// --- Sheen (default + .btn-anim-sheen): slim angled glossy band sweeps across.
+.btn:not(.btn-icon):not(.u-action):not([class*="btn-anim-"])::before,
+.btn-anim-sheen::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    width: 55%;
+    background: linear-gradient(
+        100deg,
+        transparent,
+        color-mix(in srgb, currentColor 16%, transparent),
+        transparent
+    );
+    transform: translateX(-200%) skewX(-18deg);
+    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
+    pointer-events: none;
+}
+.btn:not(.btn-icon):not(.u-action):not([class*="btn-anim-"]):hover:not(:disabled)::before,
+.btn-anim-sheen:hover:not(:disabled)::before {
+    transform: translateX(320%) skewX(-18deg);
+}
+.btn:not(.btn-icon):not(.u-action):not([class*="btn-anim-"]):hover:not(:disabled),
+.btn-anim-sheen:hover:not(:disabled) {
+    transform: translateY(-1px);
+}
+
+// --- Fill: a soft currentColor tint wipes in from the left.
+.btn-anim-fill::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: currentColor;
+    opacity: 0;
+    transform: scaleX(0);
+    transform-origin: left center;
+    transition:
+        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
+        opacity 0.35s ease;
+    pointer-events: none;
+}
+.btn-anim-fill:hover:not(:disabled)::before {
+    opacity: 0.12;
+    transform: scaleX(1);
+}
+
+// --- Expand: a radial glow blooms from the centre (aspect-ratio keeps it round).
+.btn-anim-expand::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    z-index: -1;
+    width: 0;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: currentColor;
+    opacity: 0;
+    transform: translate(-50%, -50%);
+    transition:
+        width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
+        opacity 0.45s ease;
+    pointer-events: none;
+}
+.btn-anim-expand:hover:not(:disabled)::before {
+    width: 250%;
+    opacity: 0.12;
+}
+
+// --- Glow: a soft ring in the button's own fill colour + lift. Opt-in premium
+// look that deliberately steps outside the flat/no-shadow default. Falls back
+// through the resolved --bs-btn fill to currentColor so it works on every variant.
+.btn-anim-glow {
+    transition:
+        box-shadow 0.3s ease,
+        transform 0.3s ease;
+}
+.btn-anim-glow:hover:not(:disabled) {
+    box-shadow: 0 4px 18px
+        color-mix(in srgb, var(--bs-btn-hover-bg, var(--bs-btn-bg, currentColor)) 45%, transparent);
+    transform: translateY(-1px);
+}
+
+// --- None: opt out of hover motion entirely.
+.btn-anim-none::before {
+    display: none;
+}
+.btn-anim-none:hover:not(:disabled) {
+    transform: none;
+    box-shadow: none;
 }
 
 // ---- Dropdown menu (AppDropdown / <app-dropdown>) -------------------
@@ -547,6 +708,15 @@ html.is-scrolling body::-webkit-scrollbar-thumb {
     .shimmer::after {
         animation: none;
     }
+    // Hover animation options: hide the moving layer and drop lift/glow so no
+    // option animates, regardless of which .btn-anim-* is applied.
+    .btn:not(.btn-icon):not(.u-action)::before {
+        display: none;
+    }
+    .btn:not(.btn-icon):not(.u-action):hover:not(:disabled) {
+        transform: none;
+        box-shadow: none;
+    }
 }
 
 // ---- Theme-flipped typography utilities ------------------------------------

package/scss/_tokens.scss

@@ -64,6 +64,10 @@
     --wui-shadow-overlay: #{$wui-shadow-overlay};
     --wui-shadow-overlay-lg: #{$wui-shadow-overlay-lg};
 
+    // Component-specific shadows. Used by slider thumbs and other interactive elements.
+    --wui-shadow-thumb: 0 2px 6px rgba(0, 0, 0, 0.1);
+    --wui-shadow-thumb-hover: 0 2px 12px rgba(0, 0, 0, 0.2);
+
     // 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
     // misalignment on every filter bar. 44px is also the WCAG touch-target floor.
@@ -186,9 +190,9 @@
     --wui-danger-5: #FEF4F6;
 
     // Corner radii (DESIGN.md scale) — portal aliases as --radius-*
-    --wui-radius-sm: 6px;
-    --wui-radius: 8px;
-    --wui-radius-lg: 12px;
+    --wui-radius-sm: 8px;
+    --wui-radius: 10px;
+    --wui-radius-lg: 14px;
     --wui-radius-xl: 16px;
 
     // ---- Portal dark palette ----------------------------------------
@@ -206,6 +210,10 @@
     --wui-dark-primary: #6B83EC;
     --wui-dark-primary-hover:#93A6F2;
 
+    // Dark mode shadow remaps — lighter shadows (white ink) for visibility on dark surfaces.
+    --wui-dark-shadow-thumb: 0 2px 6px rgba(255, 255, 255, 0.1);
+    --wui-dark-shadow-thumb-hover: 0 2px 12px rgba(255, 255, 255, 0.2);
+
     // ---- Fluid type scale --------------------------------------------
     // clamp(min, preferred, max) so type scales smoothly between viewports instead of
     // stepping at Bootstrap's breakpoints. `base` sits close to Bootstrap's own 1rem body

package/scss/_wui-aliases.scss

@@ -48,7 +48,8 @@
   --color-info-20: var(--wui-info-20);
   --color-info-10: var(--wui-info-10);
   --color-info-5: var(--wui-info-5);
-  --color-info-strong: var(--color-info-active);
+  // No dedicated --wui-info-strong; active is the deepest info fill.
+  --color-info-strong: var(--wui-info-active);
   --color-info-soft: var(--color-info-10);
   // Use this — never --color-info — when the colour IS the text.
   --color-info-text: var(--wui-info-text);
@@ -60,7 +61,7 @@
   --color-success-20: var(--wui-success-20);
   --color-success-10: var(--wui-success-10);
   --color-success-5: var(--wui-success-5);
-  --color-success-strong: var(--color-success-active);
+  --color-success-strong: var(--wui-success-strong);
   --color-success-soft: var(--color-success-10);
   // Use this — never --color-success — when the colour IS the text.
   --color-success-text: var(--wui-success-text);
@@ -72,7 +73,8 @@
   --color-warning-20: var(--wui-warning-20);
   --color-warning-10: var(--wui-warning-10);
   --color-warning-5: var(--wui-warning-5);
-  --color-warning-strong: var(--color-warning-active);
+  // No dedicated --wui-warning-strong; active is the deepest warning fill.
+  --color-warning-strong: var(--wui-warning-active);
   --color-warning-soft: var(--color-warning-10);
   // Use this — never --color-warning — when the colour IS the text.
   --color-warning-text: var(--wui-warning-text);
@@ -84,7 +86,7 @@
   --color-danger-20: var(--wui-danger-20);
   --color-danger-10: var(--wui-danger-10);
   --color-danger-5: var(--wui-danger-5);
-  --color-danger-strong: var(--color-danger-active);
+  --color-danger-strong: var(--wui-danger-strong);
   --color-danger-soft: var(--color-danger-10);
   // Use this — never --color-danger — when the colour IS the text.
   --color-danger-text: var(--wui-danger-text);
@@ -115,7 +117,14 @@
   --radius-xl: var(--wui-radius-xl);
 }
 
-:root[data-theme="dark"] {
+// Dark mode tokens — shared by manual toggle ([data-theme="dark"], [data-bs-theme="dark"])
+// and automatic detection (@media (prefers-color-scheme: dark) when [data-theme="auto"]).
+// Extracted as a mixin to avoid duplication and ensure byte-identical output.
+@mixin wui-dark-theme {
+  // Token-level remap so every consumer of the shadow tokens flips in ALL dark
+  // paths (manual attributes and the auto media query) without per-component overrides.
+  --wui-shadow-thumb: var(--wui-dark-shadow-thumb);
+  --wui-shadow-thumb-hover: var(--wui-dark-shadow-thumb-hover);
   --color-bg: var(--wui-dark-bg-page);
   --color-bg-subtle: var(--wui-dark-bg-elevated);
   --color-bg-muted: var(--wui-dark-bg-muted);
@@ -170,6 +179,13 @@
   --color-warning-text: var(--wui-warning);
   --color-info-text: var(--wui-info);
 
+  // Light mode maps -strong to deep AA fills; on dark surfaces those sink into the page.
+  // Remap to the bright fills so timeline dots / strong accents stay visible (same as -text).
+  --color-success-strong: var(--wui-success);
+  --color-danger-strong: var(--wui-danger);
+  --color-info-strong: var(--wui-info);
+  --color-warning-strong: var(--wui-warning);
+
   --color-success-soft: color-mix(in srgb, var(--wui-success) 18%, transparent);
   --color-warning-soft: color-mix(in srgb, var(--wui-warning) 18%, transparent);
   --color-danger-soft: color-mix(in srgb, var(--wui-danger) 18%, transparent);
@@ -179,6 +195,20 @@
   --color-scrim: color-mix(in srgb, black 45%, transparent);
   --color-scrim-strong: color-mix(in srgb, black 62%, transparent);
   --color-on-scrim: var(--wui-bg-light);
+}
 
+// Manual dark mode — set data-theme="dark" and/or data-bs-theme="dark" on <html>
+// to flip both wui and Bootstrap native components together.
+:root[data-theme="dark"],
+:root[data-bs-theme="dark"] {
+  @include wui-dark-theme;
   color-scheme: dark;
 }
+
+// Automatic dark mode — when data-theme="auto", detect system preference and apply dark tokens.
+:root[data-theme="auto"] {
+  @media (prefers-color-scheme: dark) {
+    @include wui-dark-theme;
+    color-scheme: dark;
+  }
+}

package/scss/_wui-components.scss

@@ -18,6 +18,10 @@
 // This file is now an INDEX. The rules live in ./wui/*.scss, split by domain
 // because one 5,000-line stylesheet made finding a component a grep.
 //
+// Shared tone-pill mixin — used by .badge, .status-label, and .chip.
+// Must be imported before components that use it.
+@import "wui/tone-pill";
+
 // The order below is LOAD-BEARING. A later partial may deliberately override an
 // earlier one, so reordering these imports silently changes the cascade — and
 // nothing in the build will complain. `pnpm check:theme` measures the rules that
@@ -35,6 +39,9 @@
 @import "wui/display";
 @import "wui/flow";
 @import "wui/scrollbar";
+// After `navigation`/`overlays`: the switcher restates dropdown-item chrome those partials
+// set, so it has to win on equal specificity.
+@import "wui/workspace";
 
 // Flags belong here because <wui-phone> cannot render without them.
 //
@@ -44,7 +51,7 @@
 // and nothing failing anywhere to point at the cause. The component shipped; its styling did
 // not. That is the same escape as th.sortable and .u-name, and the fix is the same principle:
 // a component and the CSS it requires travel together.
-//
+
 // It is not free — roughly 183KB raw, 45KB gzipped, mostly inlined SVG. A product that never
 // renders a phone field can skip it by importing the `wui/*` partials above individually
 // instead of this aggregate; that is the deliberate opt-out, and it is a choice rather than

package/scss/wui/_card.scss

@@ -40,9 +40,9 @@
 // ── Variants ──────────────────────────────────────────────────────────────────
 // `default` is the flat surface above. The rest are opt-in visual treatments,
 // chosen by the `variant` prop (React) / attribute (Razor).
+// Flat elevation: no in-page drop shadow — stronger border is the edge cue.
 .card-elevated {
-    border-color: transparent;
-    box-shadow: var(--shadow-md);
+    border-color: var(--color-border-strong);
 }
 .card-outlined {
     border-width: 2px;

package/scss/wui/_choice.scss

@@ -171,12 +171,16 @@
     cursor: not-allowed;
     opacity: 0.6;
 }
-.search-select-control:hover:not(:disabled) {
+.search-select-control:hover:not(:disabled):not(.open) {
+    // Not while open — an open control keeps its active (primary) border, not the grey hover one.
     border-color: var(--color-border-strong);
 }
 .search-select-control.open {
-    background: var(--color-bg-muted);
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    // White fill + the active/focus border, matching a focused text input (which lifts off the
+    // muted resting fill onto white with a --wui-primary-30 border). Keeps the control seamless
+    // with the open menu and the floated label's white mask.
+    background: var(--color-surface);
+    border-color: var(--wui-primary-30);
 }
 .search-select-caret {
     flex-shrink: 0;
@@ -1095,7 +1099,8 @@ button.datepicker-month:hover {
     display: none !important;
 }
 .country-dropdown-item:hover,
-.country-dropdown-item:focus {
+.country-dropdown-item:focus,
+.country-dropdown-item.is-active {
     background: var(--color-primary-soft) !important;
     color: var(--color-primary) !important;
 }
@@ -1120,9 +1125,11 @@ button.datepicker-month:hover {
 // On a tinted row the label must ride the row colour, not stay grey.
 .country-dropdown-item:hover .country-name-text,
 .country-dropdown-item:focus .country-name-text,
+.country-dropdown-item.is-active .country-name-text,
 .country-dropdown-item.selected .country-name-text,
 .country-dropdown-item:hover .country-code-text,
 .country-dropdown-item:focus .country-code-text,
+.country-dropdown-item.is-active .country-code-text,
 .country-dropdown-item.selected .country-code-text {
     color: currentColor;
 }