@webority/theme 0.31.0 → 0.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.31.0",
+  "version": "0.33.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/_wui-aliases.scss

@@ -21,6 +21,9 @@
   --color-progress-track: var(--wui-progress-track);
   // Label text inside a progress bar fill.
   --color-progress-label: var(--wui-bg-light);
+  // Ink on a solid status fill (success, warning, danger, info): near-black in both modes, since
+  // white fails AA on the bright fills.
+  --color-on-status-fill: #0F0F0F;
 
   // Text ramp
   --color-text: var(--wui-text-heading);

package/scss/wui/_display.scss

@@ -842,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 light glyph (a dark ink in dark mode, where white fails on the bright fills) and a soft concentric halo ring in the
+// Solid status discs with a near-black glyph (white fails AA 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-progress-label);
+    color: var(--color-on-status-fill);
     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-progress-label);
+    color: var(--color-on-status-fill);
     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-progress-label);
+    color: var(--color-on-status-fill);
     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-progress-label);
+    color: var(--color-on-status-fill);
     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

@@ -91,16 +91,18 @@
     font-weight: 600;
     color: var(--color-text-subtle);
 }
+// An untoned wizard sets no --wui-step-* vars, so the ink fallback must pair with the primary
+// fill fallback: white on the dark theme's light primary is under AA.
 .step.active .step-circle {
     border-color: var(--wui-step-accent, var(--color-primary));
     background: var(--wui-step-accent, var(--color-primary));
-    color: var(--wui-step-accent-fg, var(--color-on-scrim));
+    color: var(--wui-step-accent-fg, var(--color-primary-text));
     box-shadow: 0 0 0 4px var(--wui-step-soft, var(--color-primary-soft));
 }
 .step.done .step-circle {
     border-color: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary)));
     background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary)));
-    color: var(--wui-step-done-accent-fg, var(--wui-step-accent-fg, var(--color-on-scrim)));
+    color: var(--wui-step-done-accent-fg, var(--wui-step-accent-fg, var(--color-primary-text)));
 }
 .step-label {
     max-width: 130px;
@@ -225,7 +227,7 @@ button.step.done:focus-visible .step-circle {
 }
 .stepper-journey .step.active .step-circle {
     background: var(--wui-step-accent, var(--color-primary));
-    color: var(--wui-step-accent-fg, var(--color-on-scrim));
+    color: var(--wui-step-accent-fg, var(--color-primary-text));
     box-shadow: none;
     transform: scale(1.06);
 }
@@ -415,7 +417,7 @@ button.step.done:focus-visible .step-circle {
 // shared --wui-step-* vars, so a `.wui-step-tone-*` class or an override recolours it.
 .stepper-icons .step.active .step-circle {
     background: var(--wui-step-accent, var(--color-primary));
-    color: var(--wui-step-accent-fg, var(--color-on-scrim));
+    color: var(--wui-step-accent-fg, var(--color-primary-text));
     // The compact variant rings the active circle; here the solid fill carries it, so
     // drop the ring to match the flat badge look.
     box-shadow: none;
@@ -532,28 +534,28 @@ button.step.done:focus-visible .step-circle {
     --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.
+// Text on a bright status fill: a near-black ink in both modes, where white fails AA.
 .wui-step-tone-success {
     --wui-step-accent: var(--color-success);
-    --wui-step-accent-fg: var(--color-progress-label);
+    --wui-step-accent-fg: var(--color-on-status-fill);
     --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-progress-label);
+    --wui-step-accent-fg: var(--color-on-status-fill);
     --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-progress-label);
+    --wui-step-accent-fg: var(--color-on-status-fill);
     --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-progress-label);
+    --wui-step-accent-fg: var(--color-on-status-fill);
     --wui-step-soft: var(--color-info-soft);
     --wui-step-soft-fg: var(--color-info-text);
 }
@@ -571,25 +573,25 @@ button.step.done:focus-visible .step-circle {
 }
 .wui-step-done-tone-success {
     --wui-step-done-accent: var(--color-success);
-    --wui-step-done-accent-fg: var(--color-progress-label);
+    --wui-step-done-accent-fg: var(--color-on-status-fill);
     --wui-step-done-soft: var(--color-success-soft);
     --wui-step-done-soft-fg: var(--color-success-text);
 }
 .wui-step-done-tone-warning {
     --wui-step-done-accent: var(--color-warning);
-    --wui-step-done-accent-fg: var(--color-progress-label);
+    --wui-step-done-accent-fg: var(--color-on-status-fill);
     --wui-step-done-soft: var(--color-warning-soft);
     --wui-step-done-soft-fg: var(--color-warning-text);
 }
 .wui-step-done-tone-danger {
     --wui-step-done-accent: var(--color-danger);
-    --wui-step-done-accent-fg: var(--color-progress-label);
+    --wui-step-done-accent-fg: var(--color-on-status-fill);
     --wui-step-done-soft: var(--color-danger-soft);
     --wui-step-done-soft-fg: var(--color-danger-text);
 }
 .wui-step-done-tone-info {
     --wui-step-done-accent: var(--color-info);
-    --wui-step-done-accent-fg: var(--color-progress-label);
+    --wui-step-done-accent-fg: var(--color-on-status-fill);
     --wui-step-done-soft: var(--color-info-soft);
     --wui-step-done-soft-fg: var(--color-info-text);
 }

package/scss/wui/_kanban.scss

@@ -5,7 +5,8 @@
 // classes, so a React re-render never wipes it.
 //
 // Below md the board is one column per screen: a scroll-snapped strip with a column switcher
-// above it. The board scrolls inside itself, so the page never scrolls sideways.
+// above it that stays at the top of the viewport while the page scrolls. The board scrolls inside
+// itself, so the page never scrolls sideways.
 //
 // Sizing variables, set on .wui-kanban (or any ancestor) to override:
 //   --wui-kanban-column-width       basis width of an open column (288px)
@@ -13,6 +14,8 @@
 //   --wui-kanban-gap                space between columns (16px)
 //   --wui-kanban-column-min-height  least height of a column, so short columns still read as
 //                                   lanes (560px; not applied in the phone one-column mode)
+//   --wui-kanban-sticky-top         where the phone switcher sticks (0, or under the app shell's
+//                                   topbar inside .app-shell)
 //
 // Part of the wui-components layer, see _wui-components.scss for load order.
 
@@ -21,11 +24,18 @@
     --wui-kanban-collapsed-width: 56px;
     --wui-kanban-gap: 16px;
     --wui-kanban-column-min-height: 560px;
+    --wui-kanban-sticky-top: 0px;
     display: block;
     position: relative;
     min-width: 0;
     max-width: 100%;
 }
+// The shell's topbar is sticky too, so the switcher stops below it. 72px is .app-topbar's
+// min-height in _shell.scss; change both together. :where() keeps this at .wui-kanban's own
+// weight, so a page's `.wui-kanban { --wui-kanban-sticky-top: … }` still wins inside the shell.
+:where(.app-shell) .wui-kanban {
+    --wui-kanban-sticky-top: 72px;
+}
 
 .wui-kanban-board {
     display: flex;
@@ -210,9 +220,42 @@
     outline: 2px solid var(--color-primary);
     outline-offset: 2px;
 }
-.wui-kanban-card[hidden] {
+.wui-kanban-card[hidden],
+.wui-kanban-card[data-wui-overflow] {
+    display: none;
+}
+
+// "Show N more" under a capped column's cards; "Show fewer" once it is open.
+.wui-kanban-more {
+    display: block;
+    width: calc(100% - 16px);
+    min-height: 36px;
+    margin: 0 8px 8px;
+    padding: 6px 10px;
+    border: 0;
+    border-radius: var(--wui-radius);
+    background: transparent;
+    color: var(--color-text-muted);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+.wui-kanban-more[hidden] {
     display: none;
 }
+.wui-kanban-more:hover {
+    background: var(--color-surface);
+    color: var(--color-text);
+}
+.wui-kanban-more:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+@media (pointer: coarse) {
+    .wui-kanban-more {
+        min-height: 44px;
+    }
+}
 .wui-kanban[readonly] .wui-kanban-card,
 .wui-kanban-card[data-wui-locked] {
     cursor: default;
@@ -354,6 +397,7 @@
     }
     .wui-kanban-summary,
     .wui-kanban-body,
+    .wui-kanban-more,
     .wui-kanban-empty {
         display: none;
     }
@@ -365,18 +409,34 @@
     }
 }
 
-// ── Phone column switcher (hidden from md up) ──
-.wui-kanban-switcher {
+// ── Phone column switcher and swipe hint (hidden from md up) ──
+.wui-kanban-switcher,
+.wui-kanban-hint {
     display: none;
 }
 
 @media (max-width: 767.98px) {
+    // Sticky over the page's own background, under the shell topbar (z-index 10).
     .wui-kanban-switcher {
+        position: sticky;
+        top: var(--wui-kanban-sticky-top);
+        z-index: 5;
         display: flex;
         gap: 6px;
         margin-bottom: 12px;
+        padding-block: 6px;
         overflow-x: auto;
         scrollbar-width: none;
+        background: var(--color-bg);
+    }
+    .wui-kanban-hint {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        margin: -6px 0 12px;
+        color: var(--color-text-muted);
+        font-size: 0.75rem;
     }
     .wui-kanban-switch {
         display: inline-flex;
@@ -443,6 +503,9 @@
         .wui-kanban-body {
             display: flex;
         }
+        .wui-kanban-more:not([hidden]) {
+            display: block;
+        }
         .wui-kanban-empty:not([hidden]) {
             display: block;
         }