@webority/theme 0.94.1 → 0.96.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.94.1",
+  "version": "0.96.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/_components.scss

@@ -601,8 +601,6 @@
     // The thin thumb matches the shared rail (--wui-scrollbar*), like .wui-scroll.
     max-height: calc(100vh - 5rem);
     overflow-y: auto;
-    scrollbar-width: thin;
-    scrollbar-color: var(--wui-scrollbar) transparent;
 }
 .dropdown-menu::-webkit-scrollbar {
     width: 8px;
@@ -620,6 +618,13 @@
     background-color: var(--wui-scrollbar-hover);
     background-clip: padding-box;
 }
+// Chrome 121+ ignores the WebKit scrollbar rules once a standard scrollbar property is set, and draws arrow buttons; the standard properties are for browsers without the WebKit rules.
+@supports not selector(::-webkit-scrollbar) {
+    .dropdown-menu {
+        scrollbar-width: thin;
+        scrollbar-color: var(--wui-scrollbar) transparent;
+    }
+}
 
 .dropdown-item {
     display: flex;
@@ -1040,8 +1045,6 @@ button.wui-input-leading:focus-visible {
 html,
 body {
     scrollbar-gutter: stable;
-    scrollbar-width: thin;
-    scrollbar-color: var(--wui-scrollbar) transparent;
 }
 html::-webkit-scrollbar,
 body::-webkit-scrollbar {
@@ -1077,14 +1080,21 @@ body::-webkit-scrollbar-corner {
     background: transparent;
 }
 
-html.is-scrolling,
-html.is-scrolling body {
-    scrollbar-color: var(--wui-scrollbar-hover) transparent;
-}
 html.is-scrolling::-webkit-scrollbar-thumb,
 html.is-scrolling body::-webkit-scrollbar-thumb {
     background-color: var(--wui-scrollbar-hover);
 }
+@supports not selector(::-webkit-scrollbar) {
+    html,
+    body {
+        scrollbar-width: thin;
+        scrollbar-color: var(--wui-scrollbar) transparent;
+    }
+    html.is-scrolling,
+    html.is-scrolling body {
+        scrollbar-color: var(--wui-scrollbar-hover) transparent;
+    }
+}
 
 // Hide a scrollbar (marquee / horizontal carousels).
 .scrollbar-hide {

package/scss/_tokens.scss

@@ -35,13 +35,12 @@
     --wui-text-1: #252F4A;
     /// meaning: Secondary text for descriptions, sub-labels and muted copy.
     --wui-text-2: #4B5675;
-    // Tertiary text — hints, captions, labels, timestamps, placeholders. Was #78829D,
-    // which measured 3.5:1 on white and 3.1:1 on a tinted panel: below WCAG AA (4.5:1)
-    // everywhere it was used. A tier meant for readable-but-secondary copy has to BE
-    // readable, so it darkens to 4.55:1 on every neutral surface. It stays clearly
-    // lighter than --wui-text-2; --wui-text-4/5 remain for genuinely decorative use.
+    // Tertiary text, for hints, captions, labels, timestamps and placeholders. It measures 4.97:1 on
+    // the library page background and 4.76:1 on a lightly tinted brand page (#eef1f7), so it stays
+    // above the 4.5:1 AA floor on every neutral surface. It stays clearly lighter than --wui-text-2;
+    // --wui-text-4/5 remain for genuinely decorative use.
     /// meaning: Tertiary text for hints, captions, labels, timestamps and placeholders.
-    --wui-text-3: #687088;
+    --wui-text-3: #626A82;
     /// meaning: Decorative faint ink, not for text a person must read.
     --wui-text-4: #99A1B7;
     /// meaning: Faintest ink, for decorative marks.

package/scss/_variables.scss

@@ -184,7 +184,7 @@ $link-color: $wui-primary-ink !default;
 // $body-bg left at Bootstrap's $white — do not restate pure defaults here.
 $body-color: #252F4A; // text-1 from locked palette
 $body-secondary-color: #4B5675;
-$body-tertiary-color: #687088; // AA on white (matches --wui-text-3); #78829D was only 3.5:1
+$body-tertiary-color: #626A82; // matches --wui-text-3, AA on every neutral surface
 $body-secondary-bg: #F9FBFC;
 $body-tertiary-bg: #F5F6FA;
 

package/scss/wui/_data.scss

@@ -308,7 +308,7 @@
 .table-ledger thead th {
     height: 42px;
     padding: 0 12px;
-    background: var(--color-bg-muted);
+    background: var(--wui-table-header-bg, var(--color-bg-muted));
     border-bottom: none;
     font-family: var(--font-sans);
     font-size: 12px;

package/scss/wui/_flow.scss

@@ -1112,17 +1112,23 @@ button.wui-step-tile-body:hover .step-label {
     padding-top: 32px;
     border-top: 1px solid var(--color-border);
 }
+.form-section + .form-section.wui-form-rule-none {
+    border-top: 0;
+}
 .form-section + .form-actions {
     margin-top: 32px;
 }
 // Ranks below the card title (16px) a section usually sits in, and above the 14px field labels.
 .form-section-title {
     margin: 0;
-    font-size: 15px;
+    font-size: var(--wui-form-title-size, 15px);
     font-weight: 600;
     line-height: 1.3;
     color: var(--color-text);
 }
+.form-section-title.wui-form-title-display {
+    font-family: var(--wui-font-display, inherit);
+}
 .form-section-desc {
     margin: 0;
     font-size: 14px;

package/scss/wui/_overlays.scss

@@ -15,18 +15,12 @@
 // 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 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.)
+    // Opacity is pinned to 1 because Bootstrap's 0.5 would halve the dim. The strong scrim guarantees
+    // separation in every browser, including over embedded pages Chrome cannot blur; the blur on top
+    // is decoration.
     --bs-backdrop-opacity: 1;
     opacity: 1;
-    background: color-mix(in srgb, var(--color-scrim) 85%, transparent);
+    background: var(--color-scrim-strong);
     z-index: var(--wui-z-modal-backdrop);
     // 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.

package/scss/wui/_sections.scss

@@ -93,6 +93,9 @@
     overflow-wrap: break-word;
     text-wrap: balance;
 }
+.wui-section-title-body {
+    font-family: var(--bs-body-font-family);
+}
 .wui-section-subtitle {
     margin: 0;
     color: var(--color-text-muted);
@@ -144,6 +147,9 @@
 }
 
 // ── Features ──
+.wui-section-features .wui-section-inner {
+    padding-inline: var(--wui-section-inset, var(--wui-container-pad));
+}
 .wui-section-features-list,
 .wui-section-logos-list,
 .wui-section-testimonials-list {

package/scss/wui/_shortcuts.scss

@@ -32,6 +32,12 @@
     background: transparent;
     color: inherit;
 }
+// The default tooltip sits on the plain surface colour, so its chip takes the plain chip look.
+.tooltip.wui-tooltip:not(.tone-dark):not(.tone-primary):not(.tone-success):not(.tone-danger):not(.tone-warning) .wui-kbd {
+    border-color: var(--color-border);
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
 .btn > .wui-kbd {
     margin-left: 8px;
 }

package/scss/wui/_typography.scss

@@ -275,10 +275,8 @@
 
 // Disabled — deliberately NOT opacity, and deliberately after the tones.
 //
-// `opacity: .55` fades the whole chip, which scales the LABEL's contrast down with it:
-// #687088 on #F5F6FA at .55 alpha resolves to 2.08:1, less than half the 4.5:1 AA floor,
-// and axe reports it as a serious violation on both surfaces. Explicit muted tokens read
-// as the same state and stay legible at 4.56:1.
+// `opacity: .55` fades the whole chip, label included, so a faded label can fall under the
+// 4.5:1 AA floor. Explicit muted tokens read as the same state and keep the label legible.
 //
 // It sits after the tone block on purpose. `.chip.is-disabled` and `.chip.primary` have
 // equal specificity, so source order decides — declared before them, a disabled primary