@webority/theme 0.87.3 → 0.88.0

package/package.json

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

@@ -583,6 +583,7 @@
     --bs-dropdown-item-padding-y: 0.5rem;
     --bs-dropdown-item-padding-x: 0.625rem;
     --bs-dropdown-border-color: var(--color-border);
+    --bs-dropdown-divider-bg: var(--color-border);
     --bs-dropdown-border-radius: var(--wui-radius-lg);
     --bs-dropdown-link-color: var(--color-text-body);
     --bs-dropdown-link-hover-color: var(--color-primary-hover);

package/scss/_wui-aliases.scss

@@ -434,6 +434,58 @@
   color: var(--color-text);
 }
 
+// Every name wui-dark-theme sets; scripts/check-theme-modes.mjs keeps the two equal.
+$wui-dark-layer-names: (
+  wui-shadow-thumb, wui-shadow-thumb-hover,
+  color-bg, color-bg-subtle, color-bg-muted, color-field-bg, color-surface, color-thumb,
+  color-border, color-border-light, color-border-strong, color-field-border, color-field-border-hover,
+  color-progress-track, color-progress-label,
+  color-text, color-text-muted, color-text-subtle, color-text-body, color-close-filter, color-focus-border,
+  wui-primary-5, wui-primary-10, wui-primary-15, wui-primary-20, wui-primary-30, wui-primary-50,
+  wui-surface-mute, wui-surface-soft, wui-surface-violet-soft, wui-danger-5,
+  bs-body-color, bs-emphasis-color, bs-secondary-color, bs-tertiary-color, bs-body-bg, bs-border-color,
+  bs-secondary-bg, bs-tertiary-bg,
+  bs-body-bg-rgb, bs-body-color-rgb, bs-emphasis-color-rgb, bs-secondary-color-rgb, bs-tertiary-color-rgb,
+  bs-secondary-bg-rgb, bs-tertiary-bg-rgb, bs-border-color-rgb,
+  color-primary, color-primary-hover, color-primary-soft, color-primary-text, color-primary-hover-text,
+  color-primary-ink, color-on-primary-ink, color-on-status-strong,
+  color-success-text, color-danger-text, color-warning-text, color-info-text,
+  color-success-text-on-soft, color-danger-text-on-soft, color-warning-text-on-soft, color-info-text-on-soft,
+  color-success-strong, color-danger-strong, color-info-strong, color-warning-strong,
+  color-success-soft, color-success-5, color-success-10,
+  color-warning-soft, color-warning-5, color-warning-10,
+  color-danger-soft, color-danger-5, color-danger-10,
+  color-info-soft, color-info-5, color-info-10,
+  color-success-50, color-warning-50, color-danger-50, color-info-50,
+  color-accent-soft, color-scrim, color-scrim-strong, color-on-scrim,
+  wui-chart-1, wui-chart-2, wui-chart-3, wui-chart-4, wui-chart-5, wui-chart-6, wui-chart-7, wui-chart-8,
+  wui-chart-seq-0, wui-chart-seq-1, wui-chart-seq-2, wui-chart-seq-3, wui-chart-seq-4, wui-chart-seq-5,
+  wui-chart-seq-6, wui-chart-diverging-low, wui-chart-diverging-mid, wui-chart-diverging-high, wui-chart-neutral
+);
+
+// A light box inside a dark section, such as a white result table in a dark band: the same attribute set
+// to light gives it the page's light colour layer back. The page root keeps a copy of each name the dark
+// layer sets, and a var() resolves where it is declared, so each copy holds the root's light value with
+// the brand's own overrides. The copies sit on html rather than :root because the theme exporters read
+// every :root name as a token. A dark page has no light values on its root to copy, so only a light page
+// gets light boxes this way.
+html {
+  @each $name in $wui-dark-layer-names {
+    --wui-light-#{$name}: var(--#{$name});
+  }
+}
+
+[data-theme="dark"]:not(:root) [data-theme="light"],
+[data-theme="dark"]:not(:root) [data-bs-theme="light"],
+[data-bs-theme="dark"]:not(:root) [data-theme="light"],
+[data-bs-theme="dark"]:not(:root) [data-bs-theme="light"] {
+  @each $name in $wui-dark-layer-names {
+    --#{$name}: var(--wui-light-#{$name});
+  }
+  color-scheme: light;
+  color: var(--color-text);
+}
+
 // Automatic dark mode — when data-theme="auto", detect system preference and apply dark tokens.
 :root[data-theme="auto"] {
   @media (prefers-color-scheme: dark) {

package/scss/wui/_card.scss

@@ -112,9 +112,9 @@
 }
 
 // ── Padding scale ── (header + body + footer). `md` is the Bootstrap default.
-.card-pad-none > .card-header,
-.card-pad-none > .card-body,
-.card-pad-none > .card-footer {
+// `none` clears only the body, for a table or list that runs edge to edge: the header and footer
+// are chrome the card draws itself, and nothing inside them can bring its own inset.
+.card-pad-none > .card-body {
     padding: 0;
 }
 .card-pad-sm > .card-header,

package/scss/wui/_display.scss

@@ -198,11 +198,15 @@
     height: 48px;
     margin-bottom: 0;
 }
-.kpi.kpi-spotlight .kpi-label,
+// The icon holds only the label row, so every row below it takes the full width: a large
+// value at the hero size would otherwise overflow a column that leaves room for no icon.
+.kpi.kpi-spotlight .kpi-label {
+    grid-column: 1;
+}
 .kpi.kpi-spotlight .kpi-value,
 .kpi.kpi-spotlight .kpi-caption,
 .kpi.kpi-spotlight .kpi-delta {
-    grid-column: 1;
+    grid-column: 1 / -1;
 }
 .kpi.kpi-spotlight .kpi-label {
     align-self: center;
@@ -1391,6 +1395,7 @@ a.info-row:hover .info-value {
     color: var(--color-text-subtle);
 }
 .result-icon {
+    align-self: center;
     width: 64px;
     height: 64px;
     border-radius: var(--radius-lg);

package/scss/wui/_flow.scss

@@ -342,8 +342,10 @@ button.step.done:focus-visible .step-circle {
     padding: 0;
 }
 // Each compact step becomes a two-column row: the circle in a fixed rail on the
-// left, the label and its description stacked on the right.
-.stepper-vertical .step {
+// left, the label and its description stacked on the right. The journey step has
+// its own badge and text column, so these rules skip it; :where keeps them at the
+// specificity a modifier such as .stepper-icons expects to beat.
+.stepper-vertical:where(:not(.stepper-journey)) .step {
     display: grid;
     grid-template-columns: var(--wui-step-size, 28px) 1fr;
     column-gap: 12px;
@@ -356,12 +358,12 @@ button.step.done:focus-visible .step-circle {
 // The circle spans the whole text block rather than sitting in the first row: a
 // row sized to the 28px circle would leave dead space below a single-line label
 // before the description. Spanning lets each row size to its text instead.
-.stepper-vertical .step-circle {
+.stepper-vertical:where(:not(.stepper-journey)) .step-circle {
     grid-column: 1;
     grid-row: 1 / -1;
     align-self: start;
 }
-.stepper-vertical .step-label {
+.stepper-vertical:where(:not(.stepper-journey)) .step-label {
     grid-column: 2;
     grid-row: 1;
     max-width: none;
@@ -369,13 +371,13 @@ button.step.done:focus-visible .step-circle {
     // a no-op when a description makes the row size to the label.
     align-self: center;
 }
-.stepper-vertical .step-desc {
+.stepper-vertical:where(:not(.stepper-journey)) .step-desc {
     grid-column: 2;
     grid-row: 2;
     max-width: none;
 }
 // The vertical grid has no row gap, so the description sits right under the label.
-.stepper-vertical .step > .step-label + .step-desc {
+.stepper-vertical:where(:not(.stepper-journey)) .step > .step-label + .step-desc {
     margin-top: 0;
 }
 // The compact connector is horizontal (::before); redraw it as a vertical segment
@@ -383,7 +385,7 @@ button.step.done:focus-visible .step-circle {
 .stepper-vertical .step + .step::before {
     content: none;
 }
-.stepper-vertical .step:not(:last-child)::after {
+.stepper-vertical:where(:not(.stepper-journey)) .step:not(:last-child)::after {
     content: "";
     position: absolute;
     // Half the badge minus 1 for the 2px line's own width; runs from below the circle.
@@ -396,7 +398,7 @@ button.step.done:focus-visible .step-circle {
     background: var(--wui-step-connector, var(--color-border));
     z-index: 0;
 }
-.stepper-vertical .step.done:not(:last-child)::after {
+.stepper-vertical:where(:not(.stepper-journey)) .step.done:not(:last-child)::after {
     background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary-ink)));
 }
 // The journey bar stacked vertically reuses its own narrow-width treatment: a plain

package/scss/wui/_score-scale.scss

@@ -35,7 +35,7 @@
 .wui-score-scale__item--selected {
     border-color: var(--color-primary);
     background: var(--color-primary);
-    color: var(--color-on-primary-ink);
+    color: var(--color-primary-text);
 }
 .wui-score-scale__item:has(input:focus-visible) {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);

package/scss/wui/_shell.scss

@@ -771,7 +771,7 @@
 }
 .app-topbar[data-tone="primary"] {
     background: var(--color-primary);
-    color: var(--color-on-primary-ink);
+    color: var(--color-primary-text);
 }
 .app-topbar[data-tone="primary"] :is(.app-topbar-menu, .topbar-icon-btn, .wui-usermenu-trigger) {
     color: inherit;
@@ -783,10 +783,10 @@
 }
 .app-topbar[data-tone="primary"] .app-topbar-menu {
     background: transparent;
-    border-color: color-mix(in srgb, var(--color-on-primary-ink) 60%, transparent);
+    border-color: color-mix(in srgb, var(--color-primary-text) 60%, transparent);
 }
 .app-topbar[data-tone="primary"] :is(.app-topbar-menu, .topbar-icon-btn, .wui-usermenu-trigger):hover {
-    background: color-mix(in srgb, var(--color-on-primary-ink) 12%, transparent);
+    background: color-mix(in srgb, var(--color-primary-text) 12%, transparent);
 }
 // Two groups: the leading one shrinks and ellipsises a long page title, the
 // trailing one is pinned so actions are never pushed off-screen.