@webority/theme 0.27.2 → 0.28.0

package/package.json

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

@@ -1,4 +1,5 @@
 // Signal: an opt-in brand layer, a violet-primary palette with ink headings and a serif display face.
+// Its dark mode is pure black with neutral grey surfaces; violet is kept for accents only.
 //
 // Loaded AFTER webority-theme.css; the default theme never contains these values. It re-points the
 // --wui-* tokens, then overrides the few Bootstrap values the theme compiles as literals (button
@@ -74,16 +75,17 @@
     --wui-shadow-overlay: 0 8px 28px -6px rgba(22, 9, 58, 0.16);
     --wui-shadow-overlay-lg: 0 24px 60px -16px rgba(22, 9, 58, 0.30);
 
-    --wui-dark-bg-page: #120830;
-    --wui-dark-bg-elevated: #0E0626;
-    --wui-dark-bg-surface: #1A0F40;
-    --wui-dark-bg-muted: #261853;
-    --wui-dark-border: #35266B;
-    --wui-dark-border-strong: #4B3A8A;
-    --wui-dark-progress-track: #35266B;
-    --wui-dark-text: #EDE9F8;
-    --wui-dark-text-muted: #C2BADB;
-    --wui-dark-text-subtle: #A59BC6;
+    // Dark mode is pure black and neutral grey; violet appears only on accents (fills, links, focus, selection marks).
+    --wui-dark-bg-page: #000000;
+    --wui-dark-bg-elevated: #0F0F0F;
+    --wui-dark-bg-surface: #161616;
+    --wui-dark-bg-muted: #1E1E1E;
+    --wui-dark-border: #2A2A2A;
+    --wui-dark-border-strong: #333333;
+    --wui-dark-progress-track: #333333;
+    --wui-dark-text: #EDEDED;
+    --wui-dark-text-muted: #C0C0C0;
+    --wui-dark-text-subtle: #A0A0A0;
     --wui-dark-primary: #A98BFF;
     --wui-dark-primary-hover: #BFA6FF;
 
@@ -146,18 +148,20 @@
 
 @mixin wui-signal-dark {
     --wui-signal-heading: #C4AEFF;
-    --color-primary-soft: color-mix(in srgb, #A98BFF 20%, transparent);
+    // Selected, hover and highlight fills are a neutral lift; the violet stays on the text, border
+    // or edge that marks the state. check-contrast.mjs mirrors the 8%; change them together.
+    --color-primary-soft: color-mix(in srgb, #FFFFFF 8%, transparent);
     // Ink on the lilac fill (--color-primary): 8:1 or better.
     --color-primary-text: #16093A;
     --color-progress-label: #16093A;
-    --bs-body-bg-rgb: 18, 8, 48;
-    --bs-body-color-rgb: 237, 233, 248;
-    --bs-emphasis-color-rgb: 237, 233, 248;
-    --bs-secondary-color-rgb: 194, 186, 219;
-    --bs-tertiary-color-rgb: 165, 155, 198;
-    --bs-secondary-bg-rgb: 26, 15, 64;
-    --bs-tertiary-bg-rgb: 38, 24, 83;
-    --bs-border-color-rgb: 53, 38, 107;
+    --bs-body-bg-rgb: 0, 0, 0;
+    --bs-body-color-rgb: 237, 237, 237;
+    --bs-emphasis-color-rgb: 237, 237, 237;
+    --bs-secondary-color-rgb: 192, 192, 192;
+    --bs-tertiary-color-rgb: 160, 160, 160;
+    --bs-secondary-bg-rgb: 22, 22, 22;
+    --bs-tertiary-bg-rgb: 30, 30, 30;
+    --bs-border-color-rgb: 42, 42, 42;
     --bs-link-color: #A98BFF;
     --bs-link-color-rgb: 169, 139, 255;
     --bs-link-hover-color: #BFA6FF;
@@ -189,6 +193,35 @@
     :where(.stepper:not(.wizard-stepper)) {
         --wui-step-accent-fg: #16093A;
     }
+
+    // Components that mix their violet fill inline rather than through --color-primary-soft.
+    // :where(&) keeps each rule at the component's own specificity, so a tone variant still wins.
+    :where(&) .struct-card.checked,
+    :where(&) .tpg-arrow:hover:not(:disabled),
+    :where(&) .tpg-page:hover:not(.is-active),
+    :where(&) .u-action:hover:not(:disabled),
+    :where(&) .tbl-empty-icon,
+    :where(&) .u-avatar,
+    :where(&) .wui-file-viewer-audio-art {
+        background: var(--color-primary-soft);
+    }
+    :where(&) .wui-calendar-view-btn[aria-pressed="true"],
+    :where(&) .compare-table td.is-highlight {
+        background: color-mix(in srgb, #FFFFFF 8%, var(--color-surface));
+    }
+    :where(&) .segmented {
+        --segmented-selected-bg: color-mix(in srgb, #FFFFFF 8%, var(--color-surface));
+    }
+    :where(&) .table-ledger tbody tr.is-selected:hover {
+        --bs-table-bg-state: color-mix(in srgb, #FFFFFF 12%, transparent);
+    }
+    // A grey row alone reads as disabled; the violet edge says chosen. One step below the row status
+    // bar's specificity, so a status row keeps its own colour bar.
+    :where(&) .table-ledger tbody tr.is-selected > :first-child {
+        box-shadow:
+            inset 3px 0 0 0 var(--color-primary),
+            inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
+    }
 }
 
 :root[data-theme="dark"],

package/scss/wui/_flow.scss

@@ -20,6 +20,9 @@
 //   --wui-step-soft        soft tint (active ring; the journey/icons "done" badge bg)
 //   --wui-step-soft-fg     text/icon on the soft tint (the "done" badge check)
 //   --wui-step-connector   the incomplete-rail colour
+//   --wui-step-done-accent, --wui-step-done-accent-fg, --wui-step-done-soft,
+//   --wui-step-done-soft-fg   the same four, for COMPLETED steps only (badge, "STEP n"
+//                          eyebrow, filled rail). Unset, completed steps follow the accent.
 //   --wui-step-size        compact/vertical badge diameter (default 28px)
 //   --wui-step-badge-size  icons-variant badge diameter (default 56px)
 // Every variant defaults to the brand primary — active, done and rail share one accent
@@ -71,7 +74,7 @@
     z-index: 0;
 }
 .step.done + .step::before {
-    background: var(--wui-step-accent, var(--color-primary));
+    background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary)));
 }
 .step-circle {
     position: relative;
@@ -95,9 +98,9 @@
     box-shadow: 0 0 0 4px var(--wui-step-soft, var(--color-primary-soft));
 }
 .step.done .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));
+    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)));
 }
 .step-label {
     max-width: 130px;
@@ -147,6 +150,22 @@ button.step:focus-visible .step-circle {
         0 0 0 4px var(--wui-step-soft, var(--color-primary-soft)),
         0 0 0 6px var(--wui-step-accent, var(--color-primary));
 }
+// A completed step keeps its own colour while hovered or focused, so a done-tone step does
+// not flash the main accent. Unset, these resolve to the same accent as the rules above.
+a.step.done:hover .step-circle,
+button.step.done:hover .step-circle {
+    box-shadow: 0 0 0 4px var(--wui-step-done-soft, var(--wui-step-soft, var(--color-primary-soft)));
+}
+a.step.done:hover .step-label,
+button.step.done:hover .step-label {
+    color: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary)));
+}
+a.step.done:focus-visible .step-circle,
+button.step.done:focus-visible .step-circle {
+    box-shadow:
+        0 0 0 4px var(--wui-step-done-soft, var(--wui-step-soft, var(--color-primary-soft))),
+        0 0 0 6px var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary)));
+}
 // A step that failed its stage — a red circle with an alert, so an invalid step
 // reads as wrong at a glance rather than merely "not done".
 .step.error .step-circle {
@@ -201,8 +220,8 @@ button.step:focus-visible .step-circle {
         transform 0.2s ease;
 }
 .stepper-journey .step.done .step-circle {
-    background: var(--wui-step-soft, var(--color-primary-soft));
-    color: var(--wui-step-soft-fg, var(--color-primary));
+    background: var(--wui-step-done-soft, var(--wui-step-soft, var(--color-primary-soft)));
+    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary)));
 }
 .stepper-journey .step.active .step-circle {
     background: var(--wui-step-accent, var(--color-primary));
@@ -227,7 +246,7 @@ button.step:focus-visible .step-circle {
     color: var(--color-text-subtle);
 }
 .stepper-journey .step.done .step-index {
-    color: var(--wui-step-soft-fg, var(--color-primary));
+    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary)));
 }
 .stepper-journey .step.active .step-index {
     color: var(--wui-step-accent, var(--color-primary));
@@ -275,7 +294,7 @@ button.step:focus-visible .step-circle {
     background: var(--color-border-strong);
 }
 .stepper-journey .step-line.done {
-    background: var(--wui-step-accent, var(--color-primary));
+    background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary)));
 }
 // Below xl the four label+title pairs no longer fit side by side, so the bar
 // becomes a vertical list and the connectors go away.
@@ -353,7 +372,7 @@ button.step:focus-visible .step-circle {
     z-index: 0;
 }
 .stepper-vertical .step.done:not(:last-child)::after {
-    background: var(--wui-step-accent, var(--color-primary));
+    background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary)));
 }
 // The journey bar stacked vertically reuses its own narrow-width treatment: a plain
 // column with the horizontal connectors dropped (a real vertical rail here would
@@ -403,8 +422,8 @@ button.step:focus-visible .step-circle {
 }
 .stepper-icons .step.done .step-circle {
     border: none;
-    background: var(--wui-step-soft, var(--color-primary-soft));
-    color: var(--wui-step-soft-fg, var(--color-primary));
+    background: var(--wui-step-done-soft, var(--wui-step-soft, var(--color-primary-soft)));
+    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary)));
 }
 .stepper-icons .step.error .step-circle {
     background: var(--color-danger-soft);
@@ -429,7 +448,7 @@ button.step:focus-visible .step-circle {
     color: var(--wui-step-accent, var(--color-primary));
 }
 .stepper-icons .step.done .step-index {
-    color: var(--wui-step-soft-fg, var(--color-primary));
+    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary)));
 }
 .stepper-icons .step.error .step-index {
     color: var(--color-danger-text);
@@ -455,7 +474,7 @@ button.step:focus-visible .step-circle {
     background: var(--wui-step-connector, var(--color-border));
 }
 .stepper-icons .step.done + .step::before {
-    background: var(--wui-step-accent, var(--color-primary));
+    background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary)));
 }
 // The compact hover ring is calibrated to the 28px badge; the 56px icon badge just
 // lifts on hover instead.
@@ -483,6 +502,14 @@ button.step:focus-visible .step-circle {
     }
 }
 
+// No connectors: the wizard's hide-connectors option drops the line between steps on every
+// variant and orientation. Placed after the variants so it outranks their equal-specificity
+// rails; the journey bar's .step-line siblings are simply not emitted.
+.wui-stepper-no-connectors .step + .step::before,
+.wui-stepper-no-connectors .step:not(:last-child)::after {
+    content: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
     a.step:hover .step-circle,
     button.step:hover .step-circle,
@@ -531,6 +558,42 @@ button.step:focus-visible .step-circle {
     --wui-step-soft-fg: var(--color-info-text);
 }
 
+// Done-tone presets — recolour COMPLETED steps only (their badge, "STEP n" eyebrow and the
+// filled rail after them), leaving the active step on the accent above. Same ramps and the
+// same placement rules as the tone presets: on the stepper or any ancestor (the wizard host).
+// Error and skipped steps keep their own look.
+// ----------------------------------------------------------------------------
+.wui-step-done-tone-primary {
+    --wui-step-done-accent: var(--color-primary);
+    --wui-step-done-accent-fg: var(--color-primary-text);
+    --wui-step-done-soft: var(--color-primary-soft);
+    --wui-step-done-soft-fg: var(--color-primary);
+}
+.wui-step-done-tone-success {
+    --wui-step-done-accent: var(--color-success);
+    --wui-step-done-accent-fg: var(--color-progress-label);
+    --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-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-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-soft: var(--color-info-soft);
+    --wui-step-done-soft-fg: var(--color-info-text);
+}
+
 // ============================================================================
 // Pricing card. A tier's name, price, pitch, feature list and CTA.
 //