@webority/theme 0.32.0 → 0.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.32.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);
 }