@webority/theme 0.39.0 → 0.41.0

package/scss/wui/_controls.scss

@@ -607,7 +607,7 @@ textarea.form-control.autosize {
     color: var(--color-text);
 }
 .num-stepper-btns button:active {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .input-date-wrap > .input {
     padding-right: 38px;
@@ -701,7 +701,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     padding-left: 40px;
 }
 .input-icon:focus-within > .ic {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 
 // Trailing action beside the field — a control (a labelled button, or a confirmation once the
@@ -751,7 +751,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
         background 0.12s ease;
 }
 .pw-toggle:hover {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     background: transparent;
 }
 .pw-toggle:focus-visible {
@@ -912,7 +912,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     transform: translateY(-50%) scale(0.86);
 }
 .field-float .input:focus ~ .float-label {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .field-float .input.error ~ .float-label {
     color: var(--color-danger-text);
@@ -937,7 +937,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
 }
 .field-float:has(.search-select-control:focus) .float-label,
 .field-float:has(.search-select-control.open) .float-label {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     // The control turns white while focused/open, so the label mask follows (a filled-but-closed
     // select keeps the default muted mask, matching its muted resting fill).
     background: var(--color-surface);
@@ -1243,15 +1243,15 @@ wui-select[compact] {
     flex: none;
 }
 .num-btn:hover:not(:disabled) {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     background: var(--color-bg-muted);
 }
 .num-btn:focus-visible {
     outline: none;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .num-btn:active:not(:disabled) {
-    color: color-mix(in srgb, var(--color-primary) 80%, black);
+    color: color-mix(in srgb, var(--color-primary-ink) 80%, black);
 }
 .num-btn:disabled {
     color: var(--color-text-subtle);
@@ -1320,7 +1320,7 @@ wui-select[compact] {
     border: 1px solid var(--color-border);
 }
 .badge-primary {
-    @include wui-tone-pill-colors(primary, var(--color-primary));
+    @include wui-tone-pill-colors(primary, var(--color-primary-ink));
     border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
 }
 .badge-success {
@@ -1373,7 +1373,7 @@ wui-select[compact] {
     @include wui-tone-pill-colors(info);
 }
 .status-label.primary {
-    @include wui-tone-pill-colors(primary, var(--color-primary));
+    @include wui-tone-pill-colors(primary, var(--color-primary-ink));
 }
 // Default/neutral — also the bare `.status-label` look, so an unknown or omitted
 // tone still renders as a proper pill instead of transparent text.
@@ -1423,7 +1423,7 @@ wui-select[compact] {
     // full-strength primary line (they read as the same selection language).
     border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 
 // A count badge inside a selectable chip — "Active 12". Inverts on selection for
@@ -1439,7 +1439,7 @@ wui-select[compact] {
 }
 .choice-chip.checked .count {
     background: var(--color-surface);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 
 // Size scale (`size`): padding, gap and font step together; md is the base above.

package/scss/wui/_data.scss

@@ -44,7 +44,7 @@
     height: 48px;
     border-radius: var(--radius-lg);
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -69,7 +69,7 @@
     height: 50px;
     border-radius: 50%;
     background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     margin-bottom: 16px;
 }
 .tbl-empty-title {
@@ -511,17 +511,37 @@
 }
 // Facets size themselves: a select, multi-select or date range takes about 180 to 240px and the
 // search box a wider 260 to 320px, so they wrap as a compact row instead of stacking at full
-// width. Segments keep their own width.
-.wui-filter-bar > .field {
+// width. Segments keep their own width. A date range is the bare custom element, not a .field,
+// and on its own it fills its line.
+.wui-filter-bar > .field,
+.wui-filter-bar > wui-date-range {
     flex: 1 1 180px;
     min-width: 0;
     max-width: 240px;
 }
+.wui-filter-bar > wui-date-range .daterange {
+    width: 100%;
+}
 .wui-filter-bar > .search-wrap {
     flex: 1 1 260px;
     min-width: 0;
     max-width: 320px;
 }
+// The Razor bar sits in a GET form beside its Apply button. Its own box would take a whole
+// line and push Apply below it, so the form lays the controls, chips, Clear all and Apply out
+// as one row. `!important` beats the bar's d-flex utility, which React shares.
+.wui-filter-form > .wui-filter-bar {
+    display: contents !important;
+}
+// On a phone each facet takes its own line; segments and buttons keep their width.
+@media (max-width: 575.98px) {
+    .wui-filter-bar > .field,
+    .wui-filter-bar > wui-date-range,
+    .wui-filter-bar > .search-wrap {
+        flex-basis: 100%;
+        max-width: none;
+    }
+}
 
 // Pagination footer: a "10 per page" menu beside the page buttons, flush under a table. No row
 // range and no total; the page buttons say where you are.
@@ -583,7 +603,7 @@
 }
 .tpg-arrow:hover:not(:disabled) {
     background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .tpg-arrow:focus-visible {
     outline: 2px solid var(--color-primary);
@@ -618,7 +638,7 @@
 }
 .tpg-page:hover:not(.is-active) {
     background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .tpg-page:focus-visible {
     outline: 2px solid var(--color-primary);
@@ -1084,7 +1104,7 @@
 }
 .u-action:hover:not(:disabled) {
     background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .u-action:focus-visible {
     outline: 2px solid var(--color-primary);
@@ -1103,7 +1123,7 @@
 }
 .u-action.u-action-preview {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .u-action.u-action-download {
     background: var(--color-success-soft);
@@ -1115,7 +1135,7 @@
 }
 .u-action.u-action-preview:hover:not(:disabled) {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .u-action.u-action-download:hover:not(:disabled) {
     background: var(--color-success-soft);
@@ -1145,7 +1165,7 @@
     place-items: center;
     font-size: 16px;
     font-weight: 600;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     background: color-mix(in srgb, var(--color-primary) 20%, transparent);
 }
 .u-meta {
@@ -1218,7 +1238,7 @@
 .table th.sortable[aria-sort="ascending"] .sort-icon,
 .table th.sortable[aria-sort="descending"] .sort-icon {
     opacity: 1;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .table th.sortable[aria-sort="descending"] .sort-icon {
     transform: rotate(180deg);

package/scss/wui/_disclosure.scss

@@ -54,14 +54,14 @@
     transition: color 0.12s ease;
 }
 .faq-q:hover {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .faq-q:focus-visible {
     outline: 2px solid var(--color-primary);
     outline-offset: -2px;
 }
 .faq-item.open .faq-q {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 // Chevron rotates to point up when the pane is open.
 .faq-q-icon {
@@ -73,7 +73,7 @@
 }
 .faq-item.open .faq-q-icon {
     transform: rotate(180deg);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 
 // The animating track. `min-height: 0` on the inner element is required — a grid

package/scss/wui/_display.scss

@@ -25,14 +25,14 @@
     margin-bottom: 12px;
     border-radius: 999px;
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 // Tone modifiers — same semantic vocabulary as .badge/.status-label (success / warning /
 // danger / info / primary / neutral). primary is the default look above, restated here so
 // an explicit icon-tone="primary" matches an omitted one.
 .kpi-icon-primary {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .kpi-icon-success {
     background: var(--color-success-soft);
@@ -107,7 +107,7 @@
     width: 48px;
     height: 16px;
     margin-top: 8px;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .kpi-sparkline polyline {
     stroke-width: 1.5;
@@ -292,7 +292,7 @@ a.kpi:focus-visible {
     place-items: center;
     border-radius: 999px;
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .info-meta {
     display: flex;
@@ -325,7 +325,7 @@ a.info-row:hover {
     text-decoration: none;
 }
 a.info-row:hover .info-value {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     text-decoration: underline;
 }
 
@@ -481,7 +481,7 @@ a.info-row:hover .info-value {
     white-space: nowrap;
 }
 .segmented-option:hover {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 // A per-option sub-label under the main text — optional, so a segment without one keeps the
 // plain single-line layout above untouched.
@@ -510,7 +510,7 @@ a.info-row:hover .info-value {
 .segmented-option:has(.segmented-input:checked) {
     background: var(--segmented-selected-bg);
     box-shadow: inset 0 0 0 2px var(--color-primary);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 // The ring is drawn on the label because the input it belongs to has no box.
 .segmented-option:has(.segmented-input:focus-visible) {
@@ -1008,7 +1008,7 @@ a.info-row:hover .info-value {
 }
 .compare-table th.is-highlight {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .compare-table td.is-highlight {
     background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
@@ -1074,7 +1074,7 @@ a.info-row:hover .info-value {
     place-items: center;
     border-radius: 999px;
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     transition: background 0.3s var(--wui-ease-out-quart);
 }
 // On hover the card takes the soft tint, so the icon inverts to the surface
@@ -1097,7 +1097,7 @@ a.info-row:hover .info-value {
     transition: color 0.3s var(--wui-ease-out-quart);
 }
 .res-card:hover .res-card-title {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .res-card-text {
     margin-top: 2px;
@@ -1214,14 +1214,14 @@ a.info-row:hover .info-value {
     align-items: center;
     gap: 0.35em;
     position: relative;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     font-weight: 500;
     cursor: pointer;
     border-radius: 4px;
     transition: color 0.25s var(--wui-ease-out-quart);
 }
 .wui-link:hover {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .wui-link:focus-visible {
     outline: 2px solid var(--color-primary);
@@ -1356,7 +1356,7 @@ a.info-row:hover .info-value {
 }
 .wui-link--fade:hover,
 .wui-link--fade:focus-visible {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 
 // static — the same thin single line, always visible (no text-decoration, so it matches
@@ -1489,6 +1489,6 @@ a.info-row:hover .info-value {
     .wui-link--shine .wui-link__label {
         background-image: none;
         -webkit-text-fill-color: var(--color-primary);
-        color: var(--color-primary);
+        color: var(--color-primary-ink);
     }
 }

package/scss/wui/_dock.scss

@@ -46,7 +46,7 @@ wui-dock {
 .dock-item:hover,
 .dock-item:focus-visible {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .dock-item:focus-visible {
     outline: 2px solid var(--color-primary);

package/scss/wui/_file-viewer.scss

@@ -465,7 +465,7 @@ wui-file-viewer:fullscreen {
     height: 96px;
     border-radius: 50%;
     background: color-mix(in srgb, var(--color-primary) 12%, transparent);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .wui-file-viewer-controls {
     flex: 0 0 auto;

package/scss/wui/_flow.scss

@@ -49,10 +49,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);
-    --wui-step-accent-fg: var(--color-primary-text);
+    --wui-step-accent: var(--color-primary-ink);
+    --wui-step-accent-fg: var(--color-on-primary-ink);
     --wui-step-soft: var(--color-primary-soft);
-    --wui-step-soft-fg: var(--color-primary);
+    --wui-step-soft-fg: var(--color-primary-ink);
 }
 .step {
     position: relative;
@@ -78,7 +78,7 @@
     z-index: 0;
 }
 .step.done + .step::before {
-    background: 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-ink)));
 }
 // 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.
@@ -104,18 +104,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.
+// 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.
 .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-primary-text));
+    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));
     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-primary-text)));
+    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)));
 }
 .step-label {
     max-width: 130px;
@@ -152,7 +152,7 @@ button.step:hover .step-circle {
 }
 a.step:hover .step-label,
 button.step:hover .step-label {
-    color: var(--wui-step-accent, var(--color-primary));
+    color: var(--wui-step-accent, var(--color-primary-ink));
 }
 a.step:focus-visible,
 button.step:focus-visible {
@@ -163,7 +163,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));
+        0 0 0 6px var(--wui-step-accent, var(--color-primary-ink));
 }
 // 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.
@@ -173,13 +173,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)));
+    color: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary-ink)));
 }
 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)));
+        0 0 0 6px var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary-ink)));
 }
 // 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".
@@ -236,11 +236,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)));
+    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary-ink)));
 }
 .stepper-journey .step.active .step-circle {
-    background: var(--wui-step-accent, var(--color-primary));
-    color: var(--wui-step-accent-fg, var(--color-primary-text));
+    background: var(--wui-step-accent, var(--color-primary-ink));
+    color: var(--wui-step-accent-fg, var(--color-on-primary-ink));
     box-shadow: none;
     transform: scale(1.06);
 }
@@ -261,10 +261,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)));
+    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary-ink)));
 }
 .stepper-journey .step.active .step-index {
-    color: var(--wui-step-accent, var(--color-primary));
+    color: var(--wui-step-accent, var(--color-primary-ink));
 }
 .stepper-journey .step.error .step-circle {
     background: var(--color-danger-soft);
@@ -309,7 +309,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)));
+    background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary-ink)));
 }
 // 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.
@@ -387,7 +387,7 @@ button.step.done:focus-visible .step-circle {
     z-index: 0;
 }
 .stepper-vertical .step.done:not(:last-child)::after {
-    background: 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-ink)));
 }
 // 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
@@ -429,8 +429,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));
-    color: var(--wui-step-accent-fg, var(--color-primary-text));
+    background: var(--wui-step-accent, var(--color-primary-ink));
+    color: var(--wui-step-accent-fg, var(--color-on-primary-ink));
     // 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;
@@ -438,7 +438,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)));
+    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary-ink)));
 }
 .stepper-icons .step.error .step-circle {
     background: var(--color-danger-soft);
@@ -460,10 +460,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));
+    color: var(--wui-step-accent, var(--color-primary-ink));
 }
 .stepper-icons .step.done .step-index {
-    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary)));
+    color: var(--wui-step-done-soft-fg, var(--wui-step-soft-fg, var(--color-primary-ink)));
 }
 .stepper-icons .step.error .step-index {
     color: var(--color-danger-text);
@@ -489,7 +489,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)));
+    background: var(--wui-step-done-accent, var(--wui-step-accent, var(--color-primary-ink)));
 }
 // The compact hover ring is calibrated to the 28px badge; the 56px icon badge just
 // lifts on hover instead.
@@ -542,10 +542,10 @@ button.step.done:focus-visible .step-circle {
 // class recolours every variant consistently; error steps stay red regardless (semantic).
 // ----------------------------------------------------------------------------
 .wui-step-tone-primary {
-    --wui-step-accent: var(--color-primary);
-    --wui-step-accent-fg: var(--color-primary-text);
+    --wui-step-accent: var(--color-primary-ink);
+    --wui-step-accent-fg: var(--color-on-primary-ink);
     --wui-step-soft: var(--color-primary-soft);
-    --wui-step-soft-fg: var(--color-primary);
+    --wui-step-soft-fg: var(--color-primary-ink);
 }
 // 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.
@@ -580,10 +580,10 @@ button.step.done:focus-visible .step-circle {
 // 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-accent: var(--color-primary-ink);
+    --wui-step-done-accent-fg: var(--color-on-primary-ink);
     --wui-step-done-soft: var(--color-primary-soft);
-    --wui-step-done-soft-fg: var(--color-primary);
+    --wui-step-done-soft-fg: var(--color-primary-ink);
 }
 .wui-step-done-tone-success {
     --wui-step-done-accent: var(--color-success-text);
@@ -765,7 +765,7 @@ button.step.done:focus-visible .step-circle {
 .plan-feature-icon {
     flex: none;
     margin-top: 2px;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 // 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.
@@ -851,7 +851,7 @@ button.step.done:focus-visible .step-circle {
     place-items: center;
     border-radius: var(--radius-sm);
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     font-size: 12px;
     font-weight: 700;
 }

package/scss/wui/_media.scss

@@ -35,7 +35,7 @@
     height: var(--avatar-size, 32px);
     border-radius: 999px;
     background: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface));
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     font-size: calc(var(--avatar-size, 32px) * 0.375);
     font-weight: 600;
     display: inline-flex;
@@ -329,7 +329,7 @@
     justify-content: center;
     border-radius: 999px;
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .attach-drop:hover .attach-drop-icon {
     background: var(--color-surface);
@@ -358,7 +358,7 @@
     flex: 0 0 auto;
     font-size: 12px;
     font-weight: 600;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     border: 1px solid var(--color-border);
     border-radius: 999px;
     padding: 5px 14px;
@@ -478,7 +478,7 @@
     border-radius: var(--radius);
     overflow: hidden;
     background: var(--color-bg-muted);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .attach-item-media img {
     width: 100%;
@@ -705,7 +705,7 @@
     height: 54px;
     border-radius: 50%;
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     transition: transform 0.15s ease;
 }
 .file-input.file-input-tall.dragging .file-input-icon {
@@ -717,7 +717,7 @@
     color: var(--color-text);
 }
 .file-input-title .browse {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .file-input.file-input-tall .file-input-text {
     padding: 0;
@@ -887,7 +887,7 @@
     align-items: center;
     justify-content: center;
     background: color-mix(in srgb, var(--color-surface) 65%, transparent);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     cursor: progress;
 }
 
@@ -943,7 +943,7 @@
     font-size: calc(var(--wui-logo-size) * 0.32);
     font-weight: 700;
     letter-spacing: -0.02em;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     background: var(--color-primary-soft);
 }
 // Avatar variant — the standard avatar disc (muted fill) instead of the soft-primary