@webority/theme 0.39.0 → 0.40.0

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 {
@@ -583,7 +583,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 +618,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 +1084,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 +1103,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 +1115,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 +1145,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 +1218,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

package/scss/wui/_navigation.scss

@@ -109,7 +109,7 @@
     border-radius: var(--radius);
     corner-shape: squircle;
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 // Sticky tools zone: search + section meta stay put while the list scrolls.
 .drawer-tools {
@@ -238,7 +238,7 @@
     text-decoration: none;
 }
 .app-tab.active {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     // The active tab carries weight as well as colour — colour alone is a weak
     // signal for anyone who reads the strip at a glance or cannot distinguish it.
     font-weight: 600;
@@ -349,7 +349,7 @@
 }
 .app-tab.active .app-tab-count {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 // Semantic tone tints — React `tone` / Razor `Tone`, matching the vocabulary
 // `.status-label` uses (success | warning | danger | info).
@@ -540,7 +540,7 @@
     transition: color 0.12s ease;
 }
 .search-wrap:focus-within > .search-icon {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .search-field,
 .search-input {
@@ -663,7 +663,7 @@
     text-decoration: none;
 }
 .breadcrumb-item a:hover {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     text-decoration: underline;
 }
 .breadcrumb-item.active {

package/scss/wui/_overlays.scss

@@ -159,7 +159,7 @@
     corner-shape: squircle;
     flex: none;
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 
 // Break long unbroken names so they wrap within the heading instead of
@@ -183,7 +183,7 @@
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     margin-bottom: 2px;
 }
 // `tone` tints the header icon tile and the eyebrow, so a destructive or a success dialog

package/scss/wui/_shell-parts.scss

@@ -65,7 +65,7 @@
     text-decoration: none;
 }
 .wui-tabbar-item.active {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     font-weight: 600;
 }
 .wui-tabbar-item:focus-visible {
@@ -272,7 +272,7 @@
     padding: 0 4px;
     border: 0;
     background: none;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     font: inherit;
     font-size: 14px;
     font-weight: 500;
@@ -353,7 +353,7 @@ a.wui-bell-item:hover {
     justify-content: center;
     min-height: 44px;
     border-top: 1px solid var(--color-border);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     font-size: 14px;
     font-weight: 500;
     text-decoration: none;

package/scss/wui/_shell.scss

@@ -394,7 +394,7 @@
 }
 .app-nav-item.active {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     font-weight: 600;
 }
 .app-nav-item:focus-visible {
@@ -408,7 +408,7 @@
     color: var(--color-text-subtle);
 }
 .app-nav-item.active .app-nav-icon {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .app-nav-text {
     // Grows to fill the row so every trailing element — badge, trailing marker,
@@ -433,7 +433,7 @@
 // tinted badge on top of it would vanish.
 .app-nav-item.active .app-nav-badge {
     background: var(--color-surface);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 
 // Collapsed rail: icons only, centred. The label is removed from the flow rather
@@ -507,7 +507,7 @@
     color: var(--color-text-subtle);
 }
 .app-nav-item.active .app-nav-trailing {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 
 // ── Expandable sub-items ─────────────────────────────────────────────────────
@@ -646,7 +646,7 @@
     pointer-events: none;
 }
 .app-sidebar-toggle:hover {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     background: var(--color-bg-muted);
 }
 .app-sidebar-toggle:focus-visible {

package/scss/wui/_sortable.scss

@@ -70,7 +70,7 @@ wui-sortable[disabled] .wui-sortable-item,
 // Lifted by the keyboard.
 .wui-sortable-handle[aria-pressed="true"] {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .wui-sortable-handle:disabled {
     cursor: not-allowed;

package/scss/wui/_tone-pill.scss

@@ -7,7 +7,7 @@
 // $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.
+// soft tint — primary pills pass var(--color-primary-ink) instead.
 //
 // Component-specific overrides (e.g. .badge-primary's colored border) are applied
 // after the mixin call.