@webority/theme 0.27.0 → 0.27.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.27.0",
+  "version": "0.27.2",
   "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/_brand-signal.scss

@@ -135,7 +135,8 @@
 .page-title,
 .card-title,
 .wui-modal-title,
-.empty-state-title {
+.empty-state-title,
+.result-title {
     font-family: var(--wui-font-display);
     font-weight: 600;
     font-style: normal;

package/scss/_tokens.scss

@@ -258,7 +258,10 @@
     --wui-dark-text: #e6e8ee;
     --wui-dark-text-muted: #b4b9c6;
     --wui-dark-text-subtle: #8a90a0;
-    --wui-dark-primary: #6B83EC;
+    // Primary as TEXT and as the fill under near-black ink. Lifted from #6B83EC, which measured
+    // 3.75:1 as text on its own soft tint over the muted fill (avatar initials, selected rows, primary
+    // pills, the dropzone's Browse link); this clears 4.5:1 on every dark surface and tint.
+    --wui-dark-primary: #8097F0;
     --wui-dark-primary-hover:#93A6F2;
 
     // Dark mode shadow remaps — lighter shadows (white ink) for visibility on dark surfaces.

package/scss/_wui-aliases.scss

@@ -194,7 +194,7 @@
   --color-primary-hover: var(--wui-dark-primary-hover);
   --color-primary-soft: color-mix(in srgb, var(--wui-primary) 20%, transparent);
   // Dark mode primary text: #fff on #6B83EC measures 3.5:1, below WCAG AA (4.5:1).
-  // Map to a near-black for safe contrast (7.5:1+) when text sits on primary fill.
+  // Map to a near-black for safe contrast (6.9:1 on --wui-dark-primary) when text sits on primary fill.
   --color-primary-text: #0F0F0F;
 
   // On a dark surface the FILL colours are already the readable ones — the darkened

package/scss/wui/_calendar.scss

@@ -222,22 +222,22 @@ wui-calendar[data-view="week"] .wui-calendar-surface > * {
 .wui-calendar-event-success {
     --fc-event-bg-color: var(--color-success-soft);
     --fc-event-border-color: var(--color-success);
-    --fc-event-text-color: var(--color-success-text);
+    --fc-event-text-color: var(--color-success-text-on-soft);
 }
 .wui-calendar-event-warning {
     --fc-event-bg-color: var(--color-warning-soft);
     --fc-event-border-color: var(--color-warning);
-    --fc-event-text-color: var(--color-warning-text);
+    --fc-event-text-color: var(--color-warning-text-on-soft);
 }
 .wui-calendar-event-danger {
     --fc-event-bg-color: var(--color-danger-soft);
     --fc-event-border-color: var(--color-danger);
-    --fc-event-text-color: var(--color-danger-text);
+    --fc-event-text-color: var(--color-danger-text-on-soft);
 }
 .wui-calendar-event-info {
     --fc-event-bg-color: var(--color-info-soft);
     --fc-event-border-color: var(--color-info);
-    --fc-event-text-color: var(--color-info-text);
+    --fc-event-text-color: var(--color-info-text-on-soft);
 }
 
 // What a page with no script shows until the element's script replaces it.

package/scss/wui/_display.scss

@@ -351,7 +351,10 @@ a.info-row:hover .info-value {
     padding: 0;
 }
 .descs-item {
-    display: contents;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    border-bottom: 1px solid var(--color-border);
     grid-column: span var(--descs-span, 1);
 }
 .descs-label {
@@ -360,16 +363,14 @@ a.info-row:hover .info-value {
     text-transform: uppercase;
     letter-spacing: 0.04em;
     color: var(--color-text-subtle);
-    padding: 12px 16px;
-    border-bottom: 1px solid var(--color-border);
+    padding: 12px 16px 0;
     margin: 0;
 }
 .descs-value {
     font-size: 14px;
     font-weight: 500;
     color: var(--color-text);
-    padding: 12px 16px;
-    border-bottom: 1px solid var(--color-border);
+    padding: 4px 16px 12px;
     margin: 0;
     word-break: break-word;
 }
@@ -379,24 +380,22 @@ a.info-row:hover .info-value {
     color: var(--color-text-subtle);
 }
 // Small size variant.
-.descs-sm .descs-label,
+.descs-sm .descs-label {
+    font-size: 12px;
+    padding: 8px 12px 0;
+}
 .descs-sm .descs-value {
     font-size: 12px;
-    padding: 8px 12px;
+    padding: 4px 12px 8px;
 }
-// Bordered variant removes inner dividers (only outer border on cells).
-.descs-bordered .descs-label,
-.descs-bordered .descs-value {
+// Bordered variant draws dividers between neighbouring items instead of under each row.
+.descs-bordered .descs-item {
     border-bottom: none;
     border-right: 1px solid var(--color-border);
 }
-.descs-bordered .descs-item:last-child .descs-label,
-.descs-bordered .descs-item:last-child .descs-value {
+.descs-bordered .descs-item:last-child {
     border-right: none;
 }
-.descs-bordered .descs-list > :nth-child(2n-1) {
-    border-bottom: 1px solid var(--color-border);
-}
 // Column variants — set the grid-template-columns.
 .descs-col-1 .descs-list {
     --descs-cols: 1;
@@ -843,27 +842,27 @@ a.info-row:hover .info-value {
     background: var(--color-surface);
     box-shadow: inset 0 0 0 2px var(--color-border);
 }
-// Solid status discs with a white glyph and a soft concentric halo ring in the
+// Solid status discs with a light glyph (a dark ink in dark mode, where white fails on the bright fills) and a soft concentric halo ring in the
 // dot's own hue. The fill is softened a touch (mixed toward the surface) so the
 // states read gentler than the raw brand tones.
 .timeline--progress .timeline-item.is-done .timeline-dot {
-    color: var(--color-on-scrim);
+    color: var(--color-progress-label);
     background: color-mix(in srgb, var(--color-success) 82%, var(--color-surface));
     box-shadow: 0 0 0 var(--wui-timeline-halo) var(--color-success-soft);
 }
 .timeline--progress .timeline-item.is-current .timeline-dot {
-    color: var(--color-on-scrim);
+    color: var(--color-progress-label);
     background: color-mix(in srgb, var(--color-warning) 82%, var(--color-surface));
     box-shadow: 0 0 0 var(--wui-timeline-halo) var(--color-warning-soft);
 }
 .timeline--progress .timeline-item.is-rejected .timeline-dot {
-    color: var(--color-on-scrim);
+    color: var(--color-progress-label);
     background: color-mix(in srgb, var(--color-danger) 82%, var(--color-surface));
     box-shadow: 0 0 0 var(--wui-timeline-halo) var(--color-danger-soft);
 }
 // Blocked / waiting on an external action — informational blue.
 .timeline--progress .timeline-item.is-on-hold .timeline-dot {
-    color: var(--color-on-scrim);
+    color: var(--color-progress-label);
     background: color-mix(in srgb, var(--color-info) 82%, var(--color-surface));
     box-shadow: 0 0 0 var(--wui-timeline-halo) var(--color-info-soft);
 }

package/scss/wui/_flow.scss

@@ -43,7 +43,7 @@
 // specificity, so a .wui-step-tone-* class or an inline --wui-step-* override still wins.
 :where(.stepper:not(.wizard-stepper)) {
     --wui-step-accent: var(--color-primary);
-    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-accent-fg: var(--color-primary-text);
     --wui-step-soft: var(--color-primary-soft);
     --wui-step-soft-fg: var(--color-primary);
 }
@@ -501,31 +501,32 @@ button.step:focus-visible .step-circle {
 // ----------------------------------------------------------------------------
 .wui-step-tone-primary {
     --wui-step-accent: var(--color-primary);
-    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-accent-fg: var(--color-primary-text);
     --wui-step-soft: var(--color-primary-soft);
     --wui-step-soft-fg: var(--color-primary);
 }
+// Text on a bright status fill: white in light mode, a dark ink in dark mode, where white fails AA.
 .wui-step-tone-success {
     --wui-step-accent: var(--color-success);
-    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-accent-fg: var(--color-progress-label);
     --wui-step-soft: var(--color-success-soft);
     --wui-step-soft-fg: var(--color-success-text);
 }
 .wui-step-tone-warning {
     --wui-step-accent: var(--color-warning);
-    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-accent-fg: var(--color-progress-label);
     --wui-step-soft: var(--color-warning-soft);
     --wui-step-soft-fg: var(--color-warning-text);
 }
 .wui-step-tone-danger {
     --wui-step-accent: var(--color-danger);
-    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-accent-fg: var(--color-progress-label);
     --wui-step-soft: var(--color-danger-soft);
     --wui-step-soft-fg: var(--color-danger-text);
 }
 .wui-step-tone-info {
     --wui-step-accent: var(--color-info);
-    --wui-step-accent-fg: var(--color-on-scrim);
+    --wui-step-accent-fg: var(--color-progress-label);
     --wui-step-soft: var(--color-info-soft);
     --wui-step-soft-fg: var(--color-info-text);
 }
@@ -594,7 +595,7 @@ button.step:focus-visible .step-circle {
     padding: 5px 14px;
     border-radius: 999px;
     background: var(--color-primary);
-    color: var(--color-on-scrim);
+    color: var(--color-primary-text);
     font-size: 11px;
     font-weight: 600;
     text-transform: uppercase;

package/scss/wui/_media.scss

@@ -87,19 +87,19 @@
 }
 .avatar-success {
     background: var(--color-success-soft);
-    color: var(--color-success-text);
+    color: var(--color-success-text-on-soft);
 }
 .avatar-warning {
     background: var(--color-warning-soft);
-    color: var(--color-warning-text);
+    color: var(--color-warning-text-on-soft);
 }
 .avatar-danger {
     background: var(--color-danger-soft);
-    color: var(--color-danger-text);
+    color: var(--color-danger-text-on-soft);
 }
 .avatar-info {
     background: var(--color-info-soft);
-    color: var(--color-info-text);
+    color: var(--color-info-text-on-soft);
 }
 .avatar-auto {
     background: hsl(var(--avatar-hue, 0) 60% 90%);

package/scss/wui/_shell-parts.scss

@@ -239,7 +239,7 @@
     border: 2px solid var(--color-surface);
     border-radius: 999px;
     background: var(--color-danger-strong);
-    color: var(--wui-bg-light);
+    color: var(--color-progress-label);
     font-size: 11px;
     font-weight: 700;
     line-height: 18px;

package/scss/wui/_shell.scss

@@ -43,7 +43,7 @@
     place-items: center;
     border-radius: var(--radius-lg);
     background: var(--color-primary);
-    color: var(--color-on-scrim);
+    color: var(--color-primary-text);
     font-size: calc(var(--wui-splash-size, 56px) * 0.39);
     font-weight: 700;
     animation: wui-splash-breathe 2.6s ease-in-out infinite;
@@ -263,8 +263,8 @@
     flex-direction: column;
     gap: 2px;
     overflow-y: auto;
-    // The rail is chrome, not content: a scrollbar here reads as clutter and, at
-    // 88px collapsed, would eat a meaningful share of the width.
+    // A native scrollbar always takes layout width, and its width differs by browser and OS, so
+    // it stays hidden; the thumb below is drawn over the links instead.
     scrollbar-width: none;
 }
 .app-sidebar-scroll::-webkit-scrollbar {
@@ -272,6 +272,47 @@
     width: 0;
     height: 0;
 }
+// Scroll thumb for a long menu, shown on hover or keyboard focus and only when the links
+// overflow. It is a sticky pseudo-element over the nav's right edge, moved by the nav's own
+// scroll timeline, so it takes no width. The negative bottom margin cancels its height and the
+// flex gap, so no link moves. Browsers without scroll timelines keep the hidden scrollbar.
+@supports (animation-timeline: scroll()) {
+    .app-sidebar-scroll {
+        container-type: scroll-state;
+    }
+    .app-sidebar-scroll::before {
+        content: "";
+        position: sticky;
+        top: 0;
+        flex: none;
+        align-self: flex-end;
+        width: 6px;
+        height: 48px;
+        margin-bottom: -50px;
+        border-radius: 9999px;
+        background: var(--wui-scrollbar);
+        visibility: hidden;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s var(--wui-ease-ui);
+        animation: wui-sidebar-thumb linear both;
+        animation-timeline: scroll(nearest);
+    }
+    @container scroll-state(scrollable: y) {
+        .app-sidebar-scroll::before {
+            visibility: visible;
+        }
+    }
+    .app-sidebar-scroll:hover::before,
+    .app-sidebar-scroll:focus-within::before {
+        opacity: 1;
+    }
+}
+@keyframes wui-sidebar-thumb {
+    to {
+        top: calc(100% - 48px);
+    }
+}
 // Between the brand row and the nav — a workspace/tenant switcher, an environment
 // badge. It must not shrink when the nav overflows. The full card has no place on
 // the 88px rail, so the collapsed state hides it (the mobile drawer restores it).

package/scss/wui/_tone-pill.scss

@@ -1,11 +1,11 @@
 // ── Shared tone-pill color mixin ──
 // Consolidates the tone→color mapping used by .badge, .status-label, and .chip:
 //   background: var(--color-{tone}-soft)
-//   color:      var(--color-{tone}-text)   (override via $text — see below)
+//   color:      var(--color-{tone}-text-on-soft)   (override via $text — see below)
 //   border-color: transparent
 //
-// $text exists because the status tones and `primary` name their on-tint color
-// differently: --color-{status}-text IS the on-tint hue, but --color-primary-text
+// $text exists because `primary` has no on-tint token: --color-{status}-text-on-soft is the
+// on-tint hue (equal to -text in light, lifted in dark), but --color-primary-text
 // is the text-on-SOLID-primary color (near-black in dark mode) and fails AA on the
 // soft tint — primary pills pass var(--color-primary) instead.
 //
@@ -17,7 +17,7 @@
     @if $text {
         color: $text;
     } @else {
-        color: var(--color-#{$tone}-text);
+        color: var(--color-#{$tone}-text-on-soft);
     }
     border-color: transparent;
 }