@webority/theme 0.27.0 → 0.27.1

package/package.json

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

@@ -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

@@ -843,27 +843,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;

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;
 }