@webority/theme 0.99.0 → 0.100.0

package/scss/wui/_flow.scss

@@ -50,10 +50,10 @@
 // var fallbacks instead — which now also default to primary. :where() keeps this at ZERO
 // 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-ink);
-    --wui-step-accent-fg: var(--color-on-primary-ink);
+    --wui-step-accent: var(--color-primary-text);
+    --wui-step-accent-fg: var(--color-on-primary);
     --wui-step-soft: var(--color-primary-soft);
-    --wui-step-soft-fg: var(--color-primary-ink);
+    --wui-step-soft-fg: var(--color-primary-text);
 }
 .step {
     position: relative;
@@ -79,7 +79,7 @@
     z-index: 0;
 }
 .step.done + .step::before {
-    background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary-ink)));
+    background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary-text)));
 }
 // The active circle's 4px ring would swallow the 4px gap, so both connectors touching the
 // active step start 4px further out and keep the same gap from the ring's edge.
@@ -106,17 +106,17 @@
     color: var(--color-text-subtle);
 }
 // An untoned wizard sets no --wui-step-* vars, so the fallbacks fill with the primary ink (AA as
-// text whatever the brand) under --color-on-primary-ink, which clears AA on it in both themes.
+// text whatever the brand) under --color-on-primary, which clears AA on it in both themes.
 .step.active .step-circle {
-    border-color: var(--wui-step-accent, var(--color-primary-ink));
-    background: var(--wui-step-accent, var(--color-primary-ink));
-    color: var(--wui-step-accent-fg, var(--color-on-primary-ink));
+    border-color: var(--wui-step-accent, var(--color-primary-text));
+    background: var(--wui-step-accent, var(--color-primary-text));
+    color: var(--wui-step-accent-fg, var(--color-on-primary));
     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-ink)));
-    background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary-ink)));
-    color: var(--wui-step-done-accent-fg, var(--wui-step-accent-fg, var(--color-on-primary-ink)));
+    border-color: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary-text)));
+    background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary-text)));
+    color: var(--wui-step-done-accent-fg, var(--wui-step-accent-fg, var(--color-on-primary)));
 }
 .step-label {
     max-width: 130px;
@@ -153,7 +153,7 @@ button.step:hover .step-circle {
 }
 a.step:hover .step-label,
 button.step:hover .step-label {
-    color: var(--wui-step-accent, var(--color-primary-ink));
+    color: var(--wui-step-accent, var(--color-primary-text));
 }
 a.step:focus-visible,
 button.step:focus-visible {
@@ -164,7 +164,7 @@ a.step:focus-visible .step-circle,
 button.step:focus-visible .step-circle {
     box-shadow:
         0 0 0 4px var(--wui-step-soft, var(--color-primary-soft)),
-        0 0 0 6px var(--wui-step-accent, var(--color-primary-ink));
+        0 0 0 6px var(--wui-step-accent, var(--color-primary-text));
 }
 // 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.
@@ -174,13 +174,13 @@ button.step.done:hover .step-circle {
 }
 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-ink)));
+    color: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary-text)));
 }
 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-ink)));
+        0 0 0 6px var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary-text)));
 }
 // 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".
@@ -213,7 +213,7 @@ button.step.done:focus-visible .step-circle {
     gap: 0;
     padding: 16px 24px;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-xl);
+    border-radius: var(--wui-radius-xl);
     corner-shape: squircle;
     background: var(--color-surface);
 }
@@ -242,11 +242,11 @@ button.step.done:focus-visible .step-circle {
 }
 .stepper-journey .step.done .step-circle {
     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-ink)));
+    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary-text)));
 }
 .stepper-journey .step.active .step-circle {
-    background: var(--wui-step-accent, var(--color-primary-ink));
-    color: var(--wui-step-accent-fg, var(--color-on-primary-ink));
+    background: var(--wui-step-accent, var(--color-primary-text));
+    color: var(--wui-step-accent-fg, var(--color-on-primary));
     box-shadow: none;
     transform: scale(1.06);
 }
@@ -267,10 +267,10 @@ button.step.done:focus-visible .step-circle {
     color: var(--color-text-subtle);
 }
 .stepper-journey .step.done .step-index {
-    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary-ink)));
+    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary-text)));
 }
 .stepper-journey .step.active .step-index {
-    color: var(--wui-step-accent, var(--color-primary-ink));
+    color: var(--wui-step-accent, var(--color-primary-text));
 }
 .stepper-journey .step.error .step-circle {
     background: var(--color-danger-soft);
@@ -315,7 +315,7 @@ button.step.done:focus-visible .step-circle {
     background: var(--color-border-strong);
 }
 .stepper-journey .step-line.done {
-    background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary-ink)));
+    background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary-text)));
 }
 // 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.
@@ -399,7 +399,7 @@ button.step.done:focus-visible .step-circle {
     z-index: 0;
 }
 .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)));
+    background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary-text)));
 }
 // 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
@@ -445,8 +445,8 @@ button.step.done:focus-visible .step-circle {
 // active badge, a soft-primary done badge, a primary rail. Every colour routes through the
 // 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-ink));
-    color: var(--wui-step-accent-fg, var(--color-on-primary-ink));
+    background: var(--wui-step-accent, var(--color-primary-text));
+    color: var(--wui-step-accent-fg, var(--color-on-primary));
     // 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;
@@ -454,7 +454,7 @@ button.step.done:focus-visible .step-circle {
 .stepper-icons .step.done .step-circle {
     border: none;
     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-ink)));
+    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary-text)));
 }
 .stepper-icons .step.error .step-circle {
     background: var(--color-danger-soft);
@@ -476,10 +476,10 @@ button.step.done:focus-visible .step-circle {
     color: var(--color-text-subtle);
 }
 .stepper-icons .step.active .step-index {
-    color: var(--wui-step-accent, var(--color-primary-ink));
+    color: var(--wui-step-accent, var(--color-primary-text));
 }
 .stepper-icons .step.done .step-index {
-    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary-ink)));
+    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary-text)));
 }
 .stepper-icons .step.error .step-index {
     color: var(--color-danger-text);
@@ -505,7 +505,7 @@ button.step.done:focus-visible .step-circle {
     background: var(--wui-step-connector, var(--color-border));
 }
 .stepper-icons .step.done + .step::before {
-    background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary-ink)));
+    background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary-text)));
 }
 // The compact hover ring is calibrated to the 28px badge; the 56px icon badge just
 // lifts on hover instead.
@@ -584,7 +584,7 @@ button.step.done:focus-visible .step-circle {
     min-width: 0;
     padding: 4px 8px 4px 0;
     border: 0;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     background: none;
     font: inherit;
     text-align: start;
@@ -601,18 +601,18 @@ button.wui-step-tile-body:focus-visible {
     width: var(--wui-step-tile-size, 34px);
     height: var(--wui-step-tile-size, 34px);
     border: 0;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     background: var(--color-bg-muted);
     color: var(--color-text-subtle);
     font-size: var(--wui-step-number-font, 13px);
 }
 .wui-step-tile.active .step-circle {
-    background: var(--wui-step-accent, var(--color-primary-ink));
-    color: var(--wui-step-accent-fg, var(--color-on-primary-ink));
+    background: var(--wui-step-accent, var(--color-primary-text));
+    color: var(--wui-step-accent-fg, var(--color-on-primary));
 }
 .wui-step-tile.done .step-circle {
     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-ink)));
+    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary-text)));
 }
 .wui-step-tile.error .step-circle {
     background: var(--color-danger-soft);
@@ -637,13 +637,13 @@ button.wui-step-tile-body:focus-visible {
     white-space: nowrap;
 }
 .wui-step-tile.active .step-label {
-    color: var(--wui-step-accent, var(--color-primary-ink));
+    color: var(--wui-step-accent, var(--color-primary-text));
 }
 .wui-step-tile.error .step-label {
     color: var(--color-danger-text);
 }
 button.wui-step-tile-body:hover .step-label {
-    color: var(--wui-step-accent, var(--color-primary-ink));
+    color: var(--wui-step-accent, var(--color-primary-text));
 }
 .wui-step-tiles .wui-step-tile-state {
     font-size: 12px;
@@ -747,34 +747,34 @@ button.wui-step-tile-body:hover .step-label {
 // class recolours every variant consistently; error steps stay red regardless (semantic).
 // ----------------------------------------------------------------------------
 .wui-step-tone-primary {
-    --wui-step-accent: var(--color-primary-ink);
-    --wui-step-accent-fg: var(--color-on-primary-ink);
+    --wui-step-accent: var(--color-primary-text);
+    --wui-step-accent-fg: var(--color-on-primary);
     --wui-step-soft: var(--color-primary-soft);
-    --wui-step-soft-fg: var(--color-primary-ink);
+    --wui-step-soft-fg: var(--color-primary-text);
 }
 // Like primary, each tone fills with its deep shade (the -text token) under white ink in light mode,
 // and with the bright fill under near-black ink in dark mode; both pairs clear AA.
 .wui-step-tone-success {
     --wui-step-accent: var(--color-success-text);
-    --wui-step-accent-fg: var(--color-on-status-strong);
+    --wui-step-accent-fg: var(--color-on-success-strong);
     --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-text);
-    --wui-step-accent-fg: var(--color-on-status-strong);
+    --wui-step-accent-fg: var(--color-on-warning-strong);
     --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-text);
-    --wui-step-accent-fg: var(--color-on-status-strong);
+    --wui-step-accent-fg: var(--color-on-danger-strong);
     --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-text);
-    --wui-step-accent-fg: var(--color-on-status-strong);
+    --wui-step-accent-fg: var(--color-on-info-strong);
     --wui-step-soft: var(--color-info-soft);
     --wui-step-soft-fg: var(--color-info-text);
 }
@@ -785,32 +785,32 @@ button.wui-step-tile-body:hover .step-label {
 // Error and skipped steps keep their own look.
 // ----------------------------------------------------------------------------
 .wui-step-done-tone-primary {
-    --wui-step-done-accent: var(--color-primary-ink);
-    --wui-step-done-accent-fg: var(--color-on-primary-ink);
+    --wui-step-done-accent: var(--color-primary-text);
+    --wui-step-done-accent-fg: var(--color-on-primary);
     --wui-step-done-soft: var(--color-primary-soft);
-    --wui-step-done-soft-fg: var(--color-primary-ink);
+    --wui-step-done-soft-fg: var(--color-primary-text);
 }
 .wui-step-done-tone-success {
     --wui-step-done-accent: var(--color-success-text);
-    --wui-step-done-accent-fg: var(--color-on-status-strong);
+    --wui-step-done-accent-fg: var(--color-on-success-strong);
     --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-text);
-    --wui-step-done-accent-fg: var(--color-on-status-strong);
+    --wui-step-done-accent-fg: var(--color-on-warning-strong);
     --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-text);
-    --wui-step-done-accent-fg: var(--color-on-status-strong);
+    --wui-step-done-accent-fg: var(--color-on-danger-strong);
     --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-text);
-    --wui-step-done-accent-fg: var(--color-on-status-strong);
+    --wui-step-done-accent-fg: var(--color-on-info-strong);
     --wui-step-done-soft: var(--color-info-soft);
     --wui-step-done-soft-fg: var(--color-info-text);
 }
@@ -887,7 +887,7 @@ button.wui-step-tile-body:hover .step-label {
     flex-direction: column;
     padding: 32px 28px;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-xl);
+    border-radius: var(--wui-radius-xl);
     corner-shape: squircle;
     background: var(--color-surface);
     transition:
@@ -919,7 +919,7 @@ button.wui-step-tile-body:hover .step-label {
     padding: 5px 14px;
     border-radius: 999px;
     background: var(--color-primary);
-    color: var(--color-primary-text);
+    color: var(--color-on-primary);
     font-size: 12px;
     font-weight: 600;
     text-transform: uppercase;
@@ -970,7 +970,7 @@ button.wui-step-tile-body:hover .step-label {
 .plan-feature-icon {
     flex: none;
     margin-top: 2px;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 // A feature the tier does NOT include, kept in the list so every card has the
 // same rows and the columns line up when read across.
@@ -1020,7 +1020,7 @@ button.wui-step-tile-body:hover .step-label {
     gap: 12px;
     padding: 14px 16px 16px;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     corner-shape: squircle;
     background: var(--color-surface);
 }
@@ -1054,9 +1054,9 @@ button.wui-step-tile-body:hover .step-label {
     margin-top: 8px;
     display: inline-grid;
     place-items: center;
-    border-radius: var(--radius-sm);
+    border-radius: var(--wui-radius-sm);
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     font-size: 12px;
     font-weight: 700;
 }
@@ -1081,7 +1081,7 @@ button.wui-step-tile-body:hover .step-label {
 .repeater-empty {
     padding: 18px;
     border: 1px dashed var(--color-border-strong);
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     background: var(--color-bg-subtle);
     font-size: 13px;
     color: var(--color-text-muted);
@@ -1179,7 +1179,7 @@ button.wui-step-tile-body:hover .step-label {
     // Centres the label's first line on the control beside it, at any control height.
     .wui-form-labels-start .field > .label {
         grid-column: 1;
-        padding-top: calc((var(--wui-control-height) - 1.2em) / 2);
+        padding-top: calc((var(--wui-control-md) - 1.2em) / 2);
     }
     .wui-form-labels-start .field > :not(.label) {
         grid-column: 2;
@@ -1192,7 +1192,7 @@ button.wui-step-tile-body:hover .step-label {
 
 // density="compact": small-tier controls and tighter gaps, for admin screens and dialogs.
 .wui-form-compact {
-    --wui-control-height: var(--wui-control-height-sm);
+    --wui-control-md: var(--wui-control-sm);
     gap: 12px;
 }
 .wui-form-compact .form-section-body,
@@ -1339,7 +1339,7 @@ wui-wizard-step[hidden] {
     height: 32px;
     padding: 0;
     border: 0;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     background: transparent;
     color: var(--color-text-muted);
     cursor: pointer;

package/scss/wui/_groups.scss

@@ -70,10 +70,10 @@
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
-    min-height: var(--wui-control-height);
+    min-height: var(--wui-control-md);
     padding-inline: 0.875rem;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     background: var(--color-bg-muted);
     color: var(--color-text-muted);
     font-size: 0.875rem;
@@ -81,23 +81,23 @@
     white-space: nowrap;
 }
 .wui-addon-group-sm .wui-addon {
-    min-height: var(--wui-control-height-sm);
+    min-height: var(--wui-control-sm);
     padding-inline: 0.75rem;
     font-size: 0.75rem;
 }
 .wui-addon-group-lg .wui-addon {
-    min-height: var(--wui-control-height-lg);
+    min-height: var(--wui-control-lg);
     padding-inline: 1.25rem;
     font-size: 1rem;
 }
 .wui-addon-group > .btn {
-    height: var(--wui-control-height);
+    height: var(--wui-control-md);
 }
 .wui-addon-group-sm > .btn {
-    height: var(--wui-control-height-sm);
+    height: var(--wui-control-sm);
 }
 .wui-addon-group-lg > .btn {
-    height: var(--wui-control-height-lg);
+    height: var(--wui-control-lg);
 }
 
 // Square the sides that meet, and let the shared border overlap.

package/scss/wui/_hover-card.scss

@@ -28,7 +28,7 @@ wui-hover-card {
     border-radius: var(--wui-radius-md);
     background: var(--color-surface);
     color: var(--color-text);
-    box-shadow: var(--wui-shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
     font-size: 13px;
 
     &[data-open] {

package/scss/wui/_image-crop.scss

@@ -14,7 +14,7 @@ wui-image-crop {
     position: relative;
     height: min(360px, 55vh);
     overflow: hidden;
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     background: var(--color-bg-muted);
     // The frame is dragged with a finger, so the browser must not scroll or zoom the page instead.
     touch-action: none;
@@ -195,7 +195,7 @@ wui-image-crop {
 }
 .wui-crop-preview {
     flex: none;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     background: var(--color-bg-muted);
     box-shadow: 0 0 0 1px var(--color-border);
 }
@@ -216,5 +216,5 @@ wui-image-crop {
 
 // The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
 :is(.wui-crop-toolbtn, .wui-crop-zoombtn):active:not(:disabled, [aria-disabled="true"]) {
-    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+    background-image: linear-gradient(var(--wui-pressed-overlay), var(--wui-pressed-overlay)) !important;
 }

package/scss/wui/_interaction.scss

@@ -1,8 +1,8 @@
 // ── Focus ring and pressed state ──
 // The one keyboard focus ring and the one pressed wash, for every control the library draws.
-// The recipe is tokens in _wui-aliases.scss: an outline of --wui-focus-ring-width in
+// The recipe is tokens in _tokens.generated.scss: an outline of --wui-focus-ring-width in
 // --color-focus-ring at --wui-focus-ring-offset (--wui-focus-ring-inset inside a scroller), and
-// --color-pressed-overlay laid over the control's own fill. A component partial keeps its own
+// --wui-pressed-overlay laid over the control's own fill. A component partial keeps its own
 // :focus-visible rule only to place the ring (offset, radius, which box carries it).
 //
 // Part of the wui-components layer, imported last so its pressed rules settle ties with the
@@ -217,7 +217,7 @@ html:has(.form-actions-sticky) {
     .logo-dropzone,
     .wui-rating-input .wui-rating-star
 ):active:not(:disabled, [aria-disabled="true"]) {
-    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+    background-image: linear-gradient(var(--wui-pressed-overlay), var(--wui-pressed-overlay)) !important;
 }
 
 // Glyph-only controls have little fill for the wash to show on: the glyph itself answers.

package/scss/wui/_kanban.scss

@@ -333,7 +333,7 @@
 }
 // Picked up by keyboard: the card itself shows it is lifted.
 .wui-kanban-card[data-wui-lifted] {
-    box-shadow: var(--wui-shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
     outline: 2px solid var(--color-primary);
     outline-offset: 2px;
 }
@@ -373,7 +373,7 @@
     border-color: var(--color-primary);
     box-shadow:
         0 0 0 1px var(--color-primary),
-        var(--wui-shadow-overlay-lg);
+        var(--wui-shadow-modal);
     rotate: 2deg;
 }
 .wui-kanban[data-wui-dragging] {
@@ -409,7 +409,7 @@
 .wui-kanban-column[data-wui-drop="ok"][data-wui-target] .wui-kanban-drop-note {
     border-radius: var(--wui-radius-sm);
     background: var(--color-primary);
-    color: var(--color-primary-text);
+    color: var(--color-on-primary);
     font-weight: 600;
 }
 // Refused: hatched and locked, with the reason in the note. The hatch is drawn over the subtle
@@ -656,5 +656,5 @@
 
 // The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
 :is(.wui-kanban-action, .wui-kanban-collapse, .wui-kanban-more):active:not(:disabled, [aria-disabled="true"]) {
-    background-image: linear-gradient(var(--color-pressed-overlay), var(--color-pressed-overlay)) !important;
+    background-image: linear-gradient(var(--wui-pressed-overlay), var(--wui-pressed-overlay)) !important;
 }

package/scss/wui/_lightbox.scss

@@ -52,10 +52,10 @@
 }
 @media (prefers-reduced-motion: no-preference) {
     .wui-lightbox-overlay {
-        animation: wui-lightbox-in 160ms var(--wui-ease-out-quart);
+        animation: wui-lightbox-in 160ms var(--wui-ease-out);
     }
     .wui-lightbox-image {
-        transition: transform 120ms var(--wui-ease-out-quart);
+        transition: transform 120ms var(--wui-ease-out);
     }
     .wui-lightbox-stage.is-dragging .wui-lightbox-image {
         transition: none;