@webority/theme 0.8.8 → 0.9.0

package/package.json

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

package/scss/_tokens.scss

@@ -93,10 +93,6 @@
     --wui-surface-soft: #F2EFFE;
     --wui-surface-violet: #ECE4FE;
     --wui-surface-violet-soft: #FCFCFC;
-    // Deprecated aliases — the value was always lavender, never blue. Published
-    // names, so consumers migrate on their own bump; removed in a future major.
-    --wui-surface-blue: var(--wui-surface-violet);
-    --wui-surface-blue-soft: var(--wui-surface-violet-soft);
     --wui-surface-mute: #F9FBFC;
     --wui-ink: #000000;
 

package/scss/wui/_choice.scss

@@ -920,10 +920,26 @@ button.datepicker-month:hover {
     cursor: not-allowed;
 }
 .app-phone-number-input .phone-input-wrap:has(.input.error),
-.app-phone-number-input .phone-input-wrap:has(.input.is-invalid) {
+.app-phone-number-input .phone-input-wrap:has(.input.is-invalid),
+// An explicit `error` prop sets aria-invalid on the host <wui-phone> (React + Razor); redden the
+// shell for it too, not just the internal live-validation state above.
+.app-phone-number-input wui-phone[aria-invalid="true"] .phone-input-wrap {
     // Match AppInput's soft invalid border exactly (danger at 30%, mirroring primary-30 focus).
     border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
 }
+// Popover-field controls (date / date-range / time) carry aria-invalid on the HOST element —
+// React/Razor set it from the `error` prop — while the visible border lives on the inner trigger
+// button. Redden that trigger, and keep it red while the popover is open (mirroring AppInput,
+// whose invalid border persists through focus), so an errored/required field reads red like the
+// plain field and the phone control.
+wui-datepicker[aria-invalid="true"] .datepicker-trigger,
+wui-datepicker[aria-invalid="true"] .datepicker.open .datepicker-trigger,
+wui-date-range[aria-invalid="true"] .daterange-trigger,
+wui-date-range[aria-invalid="true"] .daterange.open .daterange-trigger,
+wui-timepicker[aria-invalid="true"] .timepicker-trigger,
+wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
+    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
+}
 // The inner control drops its own chrome — the shell carries it.
 .app-phone-number-input .phone-input-wrap > .input,
 .app-phone-number-input .phone-input-wrap > .input:hover,

package/scss/wui/_controls.scss

@@ -1060,8 +1060,13 @@ wui-select[compact] {
     background: var(--color-surface);
     border-color: var(--wui-primary-30);
 }
-.num-wrap:has(.num-input.error) {
-    border-color: var(--color-danger);
+.num-wrap:has(.num-input.error),
+.num-wrap:has(.num-input.is-invalid),
+.num-wrap:has(.num-input[aria-invalid="true"]) {
+    // Soft invalid border — match AppInput / AppPhoneNumberInput exactly (danger at 30%,
+    // mirroring the primary-30 focus border), not the solid full-strength danger this used to
+    // carry, so every field's error border reads the same light red.
+    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
 }
 
 // Numeric input inside the stepper — plain text field, no native spinner.
@@ -1188,8 +1193,7 @@ wui-select[compact] {
 .badge-success {
     @include wui-tone-pill-colors(success);
 }
-.badge-warning,
-.badge-warn {
+.badge-warning {
     @include wui-tone-pill-colors(warning);
 }
 .badge-danger {
@@ -1223,29 +1227,16 @@ wui-select[compact] {
 // the same vocabulary .chip, .badge and every other tone-bearing component uses.
 // A semantic name survives a palette change; a colour name does not (a "green"
 // tone is a lie the moment the brand's success colour stops being green).
-//
-// Two other vocabularies existed and are accepted as DEPRECATED ALIASES so a
-// consumer can migrate without a flag day:
-// - colour-named .tone-green / -amber / -red / -blue / -grey (was the library's)
-// - short semantic .tone-ok / -warn / -bad (a short-semantic set)
-// Author new markup with the semantic names; the aliases will be removed.
-.status-label.success,
-.status-label.tone-ok,
-.status-label.tone-green {
+.status-label.success {
     @include wui-tone-pill-colors(success);
 }
-.status-label.warning,
-.status-label.tone-warn,
-.status-label.tone-amber {
+.status-label.warning {
     @include wui-tone-pill-colors(warning);
 }
-.status-label.danger,
-.status-label.tone-bad,
-.status-label.tone-red {
+.status-label.danger {
     @include wui-tone-pill-colors(danger);
 }
-.status-label.info,
-.status-label.tone-blue {
+.status-label.info {
     @include wui-tone-pill-colors(info);
 }
 .status-label.primary {
@@ -1254,8 +1245,7 @@ wui-select[compact] {
 // Default/neutral — also the bare `.status-label` look, so an unknown or omitted
 // tone still renders as a proper pill instead of transparent text.
 .status-label,
-.status-label.neutral,
-.status-label.tone-grey {
+.status-label.neutral {
     background: color-mix(in srgb, var(--color-text-subtle) 16%, transparent);
     // The tertiary tier is readable on a plain surface but not on its own 16% tint,
     // so the neutral pill takes the secondary tier instead of a sixth `-text` token.

package/scss/wui/_navigation.scss

@@ -208,16 +208,30 @@
 }
 .app-tab.active {
     color: var(--color-primary);
-    // Static fallback underline (no-JS / first paint); the ink bar takes over once wired.
-    border-bottom-color: var(--color-primary);
     // The active tab carries weight as well as colour — colour alone is a weak
     // signal for anyone who reads the strip at a glance or cannot distinguish it.
     font-weight: 600;
 }
-// Once JS wires the ink bar it owns the underline — drop the per-tab fallback so the
-// two never double up during a slide.
-.app-tabs[data-wui-tabs] .app-tab.active {
-    border-bottom-color: transparent;
+// Static fallback underline (no-JS / first paint); the sliding ink bar takes over once
+// wired. Inset 10px (tab padding is 14px) so the bar runs the label width + 4px each side
+// — reads as belonging to the label yet never touches a rounded container edge. Matches
+// the wired ink bar's inset below.
+.app-tab.active::after {
+    content: "";
+    position: absolute;
+    left: var(--wui-tab-underline-inset, 10px);
+    right: var(--wui-tab-underline-inset, 10px);
+    bottom: -1px;
+    height: 2px;
+    border-radius: 2px;
+    background: var(--color-primary);
+}
+// Once JS wires the ink bar it owns the underline; pills fill and vertical use a side
+// rail — none of them want the bottom fallback. Drop it so nothing doubles up.
+.app-tabs[data-wui-tabs] .app-tab.active::after,
+.app-tabs-pills .app-tab.active::after,
+.app-tabs-vertical .app-tab.active::after {
+    display: none;
 }
 .app-tab:disabled {
     color: var(--color-text-subtle);
@@ -237,10 +251,9 @@
 }
 .app-tab.danger.active {
     color: var(--color-danger-text);
-    border-bottom-color: var(--color-danger);
 }
-.app-tabs[data-wui-tabs] .app-tab.danger.active {
-    border-bottom-color: transparent;
+.app-tab.danger.active::after {
+    background: var(--color-danger);
 }
 .app-tab.danger .app-tab-count {
     background: var(--color-danger-soft);
@@ -255,10 +268,13 @@
     left: 0;
     bottom: -1px;
     height: 2px;
-    width: var(--wui-tab-w, 0);
+    // Inset 10px each side (tab padding is 14px) so the bar runs the label width + 4px per
+    // side — clear of a rounded container edge; falls to 0 rather than going negative on a
+    // tab narrower than the inset. Pills reset the inset to 0 (the pill fills the tab).
+    width: max(0px, calc(var(--wui-tab-w, 0) - var(--wui-tab-underline-inset, 10px) * 2));
     background: var(--color-primary);
     border-radius: 2px;
-    transform: translateX(var(--wui-tab-x, 0));
+    transform: translateX(calc(var(--wui-tab-x, 0) + var(--wui-tab-underline-inset, 10px)));
     opacity: 0;
     pointer-events: none;
     transition:
@@ -365,6 +381,8 @@
     bottom: 0;
     height: auto;
     z-index: 0;
+    // The pill fills the whole tab — no underline inset.
+    --wui-tab-underline-inset: 0px;
     background: var(--color-primary-soft);
     border-radius: var(--radius);
 }

package/scss/wui/_overlays.scss

@@ -15,15 +15,23 @@
 // Do NOT put layout on backdropClassName — that targets a sibling, not
 // .modal.
 .modal-backdrop.wui-modal-dim {
-    // Frost the page behind the dialog — the blur is the star, so the dim is kept
-    // SOFT (a heavy scrim would flatten the blur into a muddy grey). A lighter dim
-    // over a strong blur reads as clean frosted glass; the modal is still clearly
-    // the one live surface. The dialog sits in `.modal` (a higher z-index sibling),
-    // so it is never blurred.
-    background: color-mix(in srgb, var(--color-scrim) 55%, transparent);
+    // Frost the page behind the dialog — the blur is the star, so the dim is kept SOFT (a heavy
+    // scrim would flatten the blur into a muddy grey). A moderate dim over a STRONG blur reads as
+    // clean frosted glass; the modal is still clearly the one live surface. The dialog sits in
+    // `.modal` (a higher z-index sibling), so it is never blurred.
+    //
+    // Full strength is load-bearing: Bootstrap composites the whole backdrop element at
+    // `--bs-backdrop-opacity` (0.5 by default), which HALVES both the blur and the dim into a
+    // weak, patchy wash — the bug this fixes. Pin the opacity to 1 and carry the dim entirely in
+    // `background`, so the frost renders at its true strength. (The fade-in still animates 0 → 1.)
+    --bs-backdrop-opacity: 1;
+    opacity: 1;
+    background: color-mix(in srgb, var(--color-scrim) 85%, transparent);
     z-index: var(--wui-z-modal-backdrop);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
+    // A little saturation boost is what makes the frost read as glass rather than fog — the
+    // colours behind bloom softly through the blur instead of greying out.
+    backdrop-filter: blur(12px) saturate(1.4);
+    -webkit-backdrop-filter: blur(12px) saturate(1.4);
 }
 .modal.wui-modal-shell {
     --bs-modal-bg: transparent;

package/scss/wui/_typography.scss

@@ -165,6 +165,87 @@
     color: currentColor;
 }
 
+// ── Variants ──────────────────────────────────────────────────────────────
+// The base `.chip` above is the SOFT variant (tinted surface, on-tint text, no
+// visible border) — the default, unchanged. `.chip-outline` and
+// `.chip-solid` layer on top and MUST stay after the tone block so a
+// `.chip-solid.primary` (0,2,0) wins over `.chip.primary` (0,2,0) on source
+// order. The disabled block below still wins because it comes after both.
+
+// Outline — the soft tint kept, but the transparent border swapped for the
+// tone's own colour (a crisper, bounded chip). Only the border changes for a
+// toned chip; neutral drops the muted fill for a clean outlined pill.
+.chip-outline {
+    background: transparent;
+    border-color: var(--color-border-strong);
+}
+.chip-outline.primary {
+    border-color: var(--color-primary);
+}
+.chip-outline.success {
+    border-color: var(--color-success);
+}
+.chip-outline.warning {
+    border-color: var(--color-warning);
+}
+.chip-outline.danger {
+    border-color: var(--color-danger);
+}
+.chip-outline.info {
+    border-color: var(--color-info);
+}
+.chip-outline.chip-clickable:hover {
+    border-color: var(--color-border-strong);
+}
+
+// Solid — a filled pill carrying white text (near-black on the light-primary in
+// dark mode, via --color-primary-text). The fills are the deep, white-safe
+// tokens: --wui-*-strong / --color-primary are AA with white; info & warning
+// have no ready deep token, so they are mixed toward black until white clears
+// AA (warning-with-white only passes on a dark gold — the vibrant --wui-warning
+// cannot). These raw --wui-* deep values are mode-independent, so no dark block
+// is needed; neutral flips automatically because text↔surface swap by theme.
+.chip-solid {
+    background: var(--color-text);
+    color: var(--color-surface);
+    border-color: transparent;
+}
+.chip-solid.primary {
+    background: var(--color-primary);
+    color: var(--color-primary-text);
+    border-color: transparent;
+}
+.chip-solid.success {
+    background: var(--wui-success-strong);
+    color: var(--color-on-scrim);
+    border-color: transparent;
+}
+.chip-solid.danger {
+    background: var(--wui-danger-strong);
+    color: var(--color-on-scrim);
+    border-color: transparent;
+}
+.chip-solid.info {
+    background: color-mix(in srgb, var(--wui-info) 78%, #000);
+    color: var(--color-on-scrim);
+    border-color: transparent;
+}
+.chip-solid.warning {
+    background: color-mix(in srgb, var(--wui-warning) 54%, #000);
+    color: var(--color-on-scrim);
+    border-color: transparent;
+}
+// The leading glyph and dismiss ✕ ride the label colour on a solid fill so they
+// stay legible (the default --color-text-subtle would sink into a dark fill).
+.chip-solid .chip-ic,
+.chip-solid .chip-remove {
+    color: currentColor;
+}
+.chip-solid .chip-remove:hover {
+    background: color-mix(in srgb, currentColor 22%, transparent);
+    color: currentColor;
+}
+
 // Disabled — deliberately NOT opacity, and deliberately after the tones.
 //
 // `opacity: .55` fades the whole chip, which scales the LABEL's contrast down with it:

package/scss/wui/_workspace.scss

@@ -95,9 +95,9 @@
 }
 
 // ── Size tiers ──
-// md is the base above. sm/lg scale the TRIGGER only — the card (and the compact square),
-// its mark and its name; the dropdown menu is a fixed 280px panel at every size, the same
-// way `compact` is a shape switch rather than a resize.
+// md is the base above. sm/lg scale the TRIGGER (the card / compact square, its mark, its name)
+// AND the dropdown menu (width, row padding, avatar, the "+" chip and the footer), so the whole
+// switcher — trigger and panel — reads at one size.
 .workspace-switcher-sm .workspace-switcher-trigger {
     min-height: 40px;
     padding: 4px 8px;
@@ -139,9 +139,9 @@
 
 // ── Menu ──
 .workspace-switcher .workspace-switcher-menu {
-    width: 280px;
-    max-width: 280px;
-    padding: 6px;
+    width: 300px;
+    max-width: 300px;
+    padding: 5px;
     background: var(--color-surface);
     border: 1px solid var(--color-border-light);
     border-radius: var(--radius-lg);
@@ -193,23 +193,25 @@
 .workspace-switcher .workspace-switcher-create {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 10px;
     width: 100%;
-    padding: 9px 12px;
+    padding: 6px 10px;
     border: none;
     border-radius: var(--radius-lg);
     corner-shape: squircle;
     background: transparent;
     color: var(--color-text);
-    font-size: 15px;
+    font-size: 13px;
+    font-weight: 500;
     text-align: left;
     text-decoration: none;
     cursor: pointer;
 }
-// Menu avatars read larger than the trigger's — a comfortable identity row per the design.
+// Compact menu avatars — small identity chips, close to the trigger mark.
 .workspace-switcher .workspace-switcher-option .workspace-switcher-mark {
-    width: 42px;
-    height: 42px;
+    width: 28px;
+    height: 28px;
+    font-size: 11px;
 }
 .workspace-switcher .workspace-switcher-option:hover,
 .workspace-switcher .workspace-switcher-create:hover {
@@ -244,9 +246,10 @@
     font-size: 11px;
     font-weight: 600;
 }
+// Active state reads from the tint + accent name (per the design); the check tick is dropped
+// so the row stays a clean avatar + name, not a text line with a trailing glyph.
 .workspace-switcher-tick {
-    flex: none;
-    color: var(--color-primary);
+    display: none;
 }
 .workspace-switcher-empty {
     padding: 14px 10px;
@@ -255,17 +258,29 @@
     color: var(--color-text-muted);
 }
 .workspace-switcher .workspace-switcher-create {
+    position: relative;
     justify-content: center;
+    margin-top: 10px;
     color: var(--color-primary);
     font-weight: 600;
 }
+// Dashed divider above the create row — the list and the "Add …" action read as two zones,
+// matching the design. A ::before (not a border) keeps the row's hover pill radius intact.
+.workspace-switcher .workspace-switcher-create::before {
+    content: "";
+    position: absolute;
+    top: -5px;
+    left: 4px;
+    right: 4px;
+    border-top: 1px dashed var(--color-border);
+}
 // The create / add rows lead with a round soft-tint "+" chip and centre their accent label,
 // matching the design's "Add Business" action.
 .workspace-switcher .workspace-switcher-create .wui-icon,
 .workspace-switcher .workspace-switcher-footer-action .wui-icon {
     box-sizing: border-box;
-    width: 28px;
-    height: 28px;
+    width: 26px;
+    height: 26px;
     padding: 6px;
     border-radius: 50%;
     background: var(--color-primary-soft);
@@ -276,8 +291,8 @@
 // A single workspace still gets a menu: current row + this footer. The divider is what makes
 // that read as a complete panel rather than a truncated list.
 .workspace-switcher-footer {
-    margin-top: 6px;
-    padding-top: 8px;
+    margin-top: 8px;
+    padding-top: 10px;
     border-top: 1px dashed var(--color-border);
 }
 .workspace-switcher .workspace-switcher-footer-action {
@@ -286,13 +301,13 @@
     justify-content: center;
     gap: 10px;
     width: 100%;
-    padding: 8px 12px;
+    padding: 6px 10px;
     border: none;
     border-radius: var(--radius-lg);
     corner-shape: squircle;
     background: transparent;
     color: var(--color-primary);
-    font-size: 15px;
+    font-size: 13px;
     font-weight: 600;
     text-align: left;
     text-decoration: none;
@@ -303,6 +318,65 @@
     color: var(--color-primary);
 }
 
+// ── Menu size tiers ── the panel scales with the trigger's `size`. Placed AFTER the base Menu
+// rules above so they win on source order (equal specificity). sm tightens the width, rows,
+// avatar, "+" chip and footer; lg opens them up. The dropdown is a descendant of the size-classed
+// root, so `.workspace-switcher-sm/-lg <menu-part>` reaches every row.
+.workspace-switcher-sm .workspace-switcher-menu {
+    width: 240px;
+    max-width: 240px;
+    padding: 5px;
+}
+.workspace-switcher-sm .workspace-switcher-option,
+.workspace-switcher-sm .workspace-switcher-create {
+    gap: 9px;
+    padding: 5px 9px;
+    font-size: 12px;
+}
+.workspace-switcher-sm .workspace-switcher-option .workspace-switcher-mark {
+    width: 24px;
+    height: 24px;
+    font-size: 10px;
+}
+.workspace-switcher-sm .workspace-switcher-create .wui-icon,
+.workspace-switcher-sm .workspace-switcher-footer-action .wui-icon {
+    width: 22px;
+    height: 22px;
+    padding: 5px;
+}
+.workspace-switcher-sm .workspace-switcher-footer-action {
+    gap: 9px;
+    padding: 5px 10px;
+    font-size: 12px;
+}
+.workspace-switcher-lg .workspace-switcher-menu {
+    width: 300px;
+    max-width: 300px;
+    padding: 4px;
+}
+.workspace-switcher-lg .workspace-switcher-option,
+.workspace-switcher-lg .workspace-switcher-create {
+    gap: 12px;
+    padding: 8px 12px;
+    font-size: 14px;
+}
+.workspace-switcher-lg .workspace-switcher-option .workspace-switcher-mark {
+    width: 34px;
+    height: 34px;
+    font-size: 13px;
+}
+.workspace-switcher-lg .workspace-switcher-create .wui-icon,
+.workspace-switcher-lg .workspace-switcher-footer-action .wui-icon {
+    width: 30px;
+    height: 30px;
+    padding: 7px;
+}
+.workspace-switcher-lg .workspace-switcher-footer-action {
+    gap: 12px;
+    padding: 8px 12px;
+    font-size: 14px;
+}
+
 @media (prefers-reduced-motion: reduce) {
     .workspace-switcher-trigger {
         transition: none;