@webority/theme 0.39.0 → 0.40.0

package/package.json

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

@@ -46,6 +46,8 @@
     --wui-primary-10: #F1EBFF;
     --wui-primary-5: #F8F5FF;
     --wui-primary-text: #FFFFFF;
+    // Violet clears 4.5:1 as text on every light surface and its tint, so it is its own ink.
+    --wui-primary-ink: #4A0FBF;
     --wui-accent-dark: #340A88;
     --wui-surface-soft: #F1EBFF;
     --wui-surface-violet: #E6DCFD;
@@ -117,7 +119,7 @@
 }
 
 .btn-outline-primary {
-    --bs-btn-color: var(--color-primary);
+    --bs-btn-color: var(--color-primary-ink);
     --bs-btn-border-color: var(--color-primary);
     --bs-btn-hover-color: #fff;
     --bs-btn-hover-bg: #4A0FBF;

package/scss/_components.scss

@@ -47,13 +47,13 @@
 // then press. No border (the tint carries the shape). Disabled is the shared
 // neutral-grey state below, like every other variant.
 .btn-secondary {
-    --bs-btn-color: var(--color-primary);
+    --bs-btn-color: var(--color-primary-ink);
     --bs-btn-bg: color-mix(in srgb, var(--color-primary) 12%, transparent);
     --bs-btn-border-color: transparent;
-    --bs-btn-hover-color: var(--color-primary);
+    --bs-btn-hover-color: var(--color-primary-ink);
     --bs-btn-hover-bg: color-mix(in srgb, var(--color-primary) 18%, transparent);
     --bs-btn-hover-border-color: transparent;
-    --bs-btn-active-color: var(--color-primary);
+    --bs-btn-active-color: var(--color-primary-ink);
     --bs-btn-active-bg: color-mix(in srgb, var(--color-primary) 26%, transparent);
     --bs-btn-active-border-color: transparent;
 }
@@ -104,7 +104,7 @@
 // on a transparent fill; hover fills with the brand and flips the label to the on-brand text
 // token; active deepens to the pressed fill.
 .btn-outline-primary {
-    --bs-btn-color: var(--color-primary);
+    --bs-btn-color: var(--color-primary-ink);
     --bs-btn-border-color: var(--color-primary);
     --bs-btn-hover-color: var(--wui-primary-text);
     --bs-btn-hover-bg: var(--color-primary);
@@ -112,7 +112,7 @@
     --bs-btn-active-color: var(--wui-primary-text);
     --bs-btn-active-bg: var(--wui-primary-pressed);
     --bs-btn-active-border-color: var(--wui-primary-pressed);
-    --bs-btn-disabled-color: var(--color-primary);
+    --bs-btn-disabled-color: var(--color-primary-ink);
     --bs-btn-disabled-border-color: var(--color-primary);
 }
 
@@ -465,7 +465,7 @@
     }
     &:hover .wui-icon, &:hover i, &:hover svg,
     &:focus .wui-icon, &:focus i, &:focus svg {
-        color: var(--wui-primary);
+        color: var(--color-primary-ink);
     }
 
     // A leading picture instead of a glyph — an external logo/avatar, a brand mark.
@@ -651,7 +651,7 @@ button.wui-input-trailing:focus-visible,
 button.wui-input-leading:focus-visible {
     outline: 2px solid var(--color-primary);
     outline-offset: 2px;
-    color: var(--wui-primary);
+    color: var(--color-primary-ink);
     border-radius: 9999px;
 }
 

package/scss/_marketing.scss

@@ -30,7 +30,7 @@
     font-size: 14px;
     font-weight: 700;
     line-height: 1;
-    color: var(--wui-primary);
+    color: var(--color-primary-ink);
 }
 .eyebrow::before {
     content: "";

package/scss/_tokens.scss

@@ -138,9 +138,16 @@
     // from a fill, for using the status colour AS body text), this is the text/icon
     // colour to use ON TOP OF a solid --wui-primary fill — a selected datepicker day,
     // an active pagination page, a checked segmented option, .btn-primary's label.
-    // Default assumes primary is dark enough for white; a brand with a light primary
-    // overrides this to a dark value instead.
-    --wui-primary-text: #fff;
+    // Derived from $primary (_variables.scss): white when it clears AA on the primary, near-black
+    // when the primary is too light for white. A runtime rebrand of --wui-primary sets it too.
+    --wui-primary-text: #{wui-hex($wui-primary-text)};
+
+    // ---- Primary as text -----------------------------------------------
+    // The brand primary darkened until it clears AA (4.5:1) as text on every light surface and on
+    // its own soft tint (_variables.scss). Every link, tab label, page number, selected option and
+    // primary-coloured icon reads this, never --wui-primary, which is sized as a fill. Equal to
+    // --wui-primary when the primary already clears AA. A runtime rebrand of --wui-primary sets it too.
+    --wui-primary-ink: #{wui-hex($wui-primary-ink)};
 
     // ---- Semantic status ramps -------------------------------------
     // Canonical info/success/warning/danger scales: `active` (text/icon on

package/scss/_variables.scss

@@ -1,3 +1,8 @@
+@use "sass:color";
+@use "sass:list";
+@use "sass:math";
+@use "sass:string";
+
 // =====================================================================
 // Webority UI — Bootstrap variable overrides.
 // Imported BEFORE `bootstrap/scss/bootstrap` so Bootstrap derives every
@@ -43,10 +48,90 @@ $theme-colors: (
     "dark": $dark,
 );
 
+// ---- Primary as text ------------------------------------------------
+// A brand primary is chosen as a fill. A light one (an orange measures 3.6:1 on white) fails
+// WCAG AA (4.5:1) as text, so text and small UI in the brand colour use the primary ink: the
+// primary mixed with black, in 2% steps, until it clears 4.5:1 on every light surface it lands
+// on (white, the page, the muted and elevated fills) and on the brand's own soft tint. A primary
+// that already clears it is its own ink. Derived from $primary, so a product that sets $primary
+// gets a matching ink; it can still set $wui-primary-ink, or --wui-primary-ink at runtime.
+$wui-ink-floor: 4.5;
+$wui-ink-surfaces: (#FFFFFF, #F4F6F8, #F5F6FA, #F9FBFC);
+
+@function wui-luminance($color) {
+    $linear: ();
+    @each $channel in ("red", "green", "blue") {
+        $s: math.div(color.channel($color, $channel, $space: rgb), 255);
+        @if $s <= 0.04045 {
+            $linear: list.append($linear, math.div($s, 12.92));
+        } @else {
+            $linear: list.append($linear, math.pow(math.div($s + 0.055, 1.055), 2.4));
+        }
+    }
+    @return 0.2126 * list.nth($linear, 1) + 0.7152 * list.nth($linear, 2) + 0.0722 * list.nth($linear, 3);
+}
+
+@function wui-contrast($a, $b) {
+    $la: wui-luminance($a);
+    $lb: wui-luminance($b);
+    @return math.div(math.max($la, $lb) + 0.05, math.min($la, $lb) + 0.05);
+}
+
+@function wui-worst-contrast($ink, $surfaces) {
+    $worst: 21;
+    @each $surface in $surfaces {
+        $worst: math.min($worst, wui-contrast($ink, $surface));
+    }
+    @return $worst;
+}
+
+@function wui-primary-ink($primary) {
+    // The soft tint (selected rows, avatar initials, the secondary button) is about 15% of the
+    // primary over white.
+    $surfaces: list.append($wui-ink-surfaces, color.mix($primary, #FFFFFF, 15%));
+    $ink: $primary;
+    $step: 0;
+    @while wui-worst-contrast($ink, $surfaces) < $wui-ink-floor and $step < 50 {
+        $step: $step + 1;
+        $ink: color.mix(black, $primary, $step * 2%);
+    }
+    // Whole channels, so the token compiles to a plain hex.
+    @return rgb(
+        math.round(color.channel($ink, "red", $space: rgb)),
+        math.round(color.channel($ink, "green", $space: rgb)),
+        math.round(color.channel($ink, "blue", $space: rgb))
+    );
+}
+
+// A colour as a #rrggbb literal, so a computed token reads like the hand-written ones around it.
+@function wui-hex($color) {
+    $digits: "0123456789abcdef";
+    $out: "#";
+    @each $channel in ("red", "green", "blue") {
+        $v: math.round(color.channel($color, $channel, $space: rgb));
+        $out: $out + string.slice($digits, math.floor(math.div($v, 16)) + 1, math.floor(math.div($v, 16)) + 1) + string.slice($digits, $v % 16 + 1, $v % 16 + 1);
+    }
+    @return string.unquote($out);
+}
+
+// The label on a solid primary fill (.btn-primary, the active page, a checked option): white
+// when it clears 4.5:1 on the primary, near-black when the primary is too light for white.
+@function wui-on-primary($primary) {
+    @if wui-contrast(#FFFFFF, $primary) >= $wui-ink-floor {
+        @return #FFFFFF;
+    }
+    @return #0F0F0F;
+}
+
+$wui-primary-ink: wui-primary-ink($primary) !default;
+$wui-primary-text: wui-on-primary($primary) !default;
+$link-color: $wui-primary-ink !default;
+
 // Brand helper — set a product's primary ONCE and have the theme-colour map
 // (so every .btn-primary / .bg-primary / .text-primary utility), $link-color,
-// and $link-hover-color follow, instead of overriding each in turn. Call it in
-// the product's pre-bootstrap variables, BEFORE `bootstrap/scss/bootstrap`, e.g.:
+// $link-hover-color, the primary ink and the on-primary label follow, instead of
+// overriding each in turn. Call it in the product's pre-bootstrap variables,
+// BEFORE `bootstrap/scss/bootstrap`, e.g.:
 //
 // @include wui-brand-primary(#0EA5E9);
 // @import "bootstrap/scss/bootstrap";
@@ -57,8 +142,10 @@ $theme-colors: (
 @mixin wui-brand-primary($primary) {
     $primary: $primary !global;
     $theme-colors: map-merge($theme-colors, ("primary": $primary)) !global;
-    $link-color: $primary !global;
-    $link-hover-color: mix(black, $primary, 12%) !global;
+    $wui-primary-ink: wui-primary-ink($primary) !global;
+    $wui-primary-text: wui-on-primary($primary) !global;
+    $link-color: $wui-primary-ink !global;
+    $link-hover-color: mix(black, $wui-primary-ink, 12%) !global;
 }
 
 
@@ -208,11 +295,11 @@ $toast-box-shadow: $wui-shadow-overlay-lg;
 
 
 // ---- Links ----------------------------------------------------------
-// $link-color left at Bootstrap's default ($primary) so it tracks brand $primary.
-// Hover is a darkened mix of $primary — never a hard-coded indigo — so a product
+// $link-color is the primary ink (above), so a link clears AA whatever the brand.
+// Hover is a darkened mix of the ink — never a hard-coded indigo — so a product
 // that sets $primary (or calls wui-brand-primary) gets a matching hover. Approximate
 // of Bootstrap's shift-color($link-color, 20%) without importing BS functions here.
-$link-hover-color: mix(black, $primary, 12%);
+$link-hover-color: mix(black, $wui-primary-ink, 12%);
 $link-decoration: none; // BS default is underline
 $link-hover-decoration: underline;
 

package/scss/_wui-aliases.scss

@@ -62,6 +62,12 @@
   // Text/icon colour for content sitting ON a solid --color-primary fill — see
   // --wui-primary-text for why this is a different axis from the -text tokens below.
   --color-primary-text: var(--wui-primary-text);
+  // The primary as TEXT or a small glyph on a light surface: AA-safe whatever the brand (see
+  // --wui-primary-ink). --color-primary stays the fill, border and focus colour.
+  --color-primary-ink: var(--wui-primary-ink);
+  // Ink on the primary ink used as a fill (the active step badge): the ink clears 4.5:1 against
+  // white by construction, so white in light mode; near-black on the lifted dark primary.
+  --color-on-primary-ink: #FFFFFF;
 
   // Semantic status ramps
   --color-info-active: var(--wui-info-active);
@@ -211,6 +217,9 @@
   // Dark mode primary text: #fff on #6B83EC measures 3.5:1, below WCAG AA (4.5:1).
   // Map to a near-black for safe contrast (6.9:1 on --wui-dark-primary) when text sits on primary fill.
   --color-primary-text: #0F0F0F;
+  // The dark primary is already lifted to clear 4.5:1 on every dark surface and tint.
+  --color-primary-ink: var(--wui-dark-primary);
+  --color-on-primary-ink: #0F0F0F;
   --color-on-status-strong: #0F0F0F;
 
   // On a dark surface the darkened `-text` values would sink into the background, so dark

package/scss/wui/_avatar-picker.scss

@@ -26,7 +26,7 @@
     border: 1px solid var(--color-border);
     border-radius: 50%;
     background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     font: inherit;
     cursor: pointer;
 }

package/scss/wui/_calendar.scss

@@ -70,7 +70,7 @@ wui-calendar {
 .wui-calendar-nav-btn:hover {
     background: var(--color-primary-soft);
     border-color: var(--color-primary);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .wui-calendar-today-btn:focus-visible,
 .wui-calendar-nav-btn:focus-visible,
@@ -116,12 +116,12 @@ wui-calendar {
         color 0.14s ease;
 }
 .wui-calendar-view-btn:hover {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .wui-calendar-view-btn[aria-pressed="true"] {
     background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
     box-shadow: inset 0 0 0 2px var(--color-primary);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 
 // On a phone the title takes a row of its own between the two controls, and every control is a
@@ -217,7 +217,7 @@ wui-calendar[data-view="week"] .wui-calendar-surface > * {
 .wui-calendar-event-primary {
     --fc-event-bg-color: var(--color-primary-soft);
     --fc-event-border-color: var(--color-primary);
-    --fc-event-text-color: var(--color-primary);
+    --fc-event-text-color: var(--color-primary-ink);
 }
 .wui-calendar-event-success {
     --fc-event-bg-color: var(--color-success-soft);

package/scss/wui/_chart-card.scss

@@ -7,7 +7,7 @@
 :where(.wui-sparkline) {
     display: inline-block;
     vertical-align: middle;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .wui-sparkline polyline {
     stroke-width: 1.5;
@@ -27,7 +27,7 @@
 }
 .wui-chart-card-tool[aria-pressed="true"] {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 // The legend toggle is useful only while the chart shows a legend: two or more series, in the
 // chart view. Before the element has drawn there is none, so the button waits for it.

package/scss/wui/_choice.scss

@@ -33,7 +33,7 @@
     background: color-mix(in srgb, var(--color-primary) 5%, transparent);
 }
 .struct-card.checked .struct-card-title {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .struct-card-input {
     position: absolute;
@@ -56,7 +56,7 @@
 }
 .struct-card.checked .struct-card-ic {
     background: var(--color-surface);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 // An image in the round icon disc (React iconNode={<img …/>}) keeps its own colours whether or not
 // the card is selected, fills the whole disc and is cropped to its circle, whatever the image's own
@@ -92,7 +92,7 @@
     align-items: center;
     justify-content: center;
     background: transparent;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     opacity: 0;
     transform: scale(0.5);
     transition:
@@ -433,7 +433,7 @@
     border-color: var(--color-focus-border);
 }
 .search-select-search:focus-within svg {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .search-select-clear {
     display: grid;
@@ -500,17 +500,17 @@
 .search-select-option:hover,
 .search-select-option.is-active {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .search-select-option.selected {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     font-weight: 500;
 }
 // allow-custom's freeform row — reads as an action ("Add "…"") rather than a listed value.
 .search-select-option-custom {
     font-style: italic;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .search-select-empty {
     padding: 12px 10px;
@@ -651,7 +651,7 @@ wui-date-range:not([aria-invalid="true"]) .daterange:not(.open) .daterange-trigg
 }
 button.datepicker-month:hover {
     background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary) 8%, transparent));
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .datepicker-nav {
     display: inline-flex;
@@ -676,7 +676,7 @@ button.datepicker-month:hover {
 .datepicker-nav-btn:hover {
     background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary) 8%, transparent));
     border-color: var(--color-primary);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .datepicker-weekdays {
     display: grid;
@@ -728,7 +728,7 @@ button.datepicker-month:hover {
 }
 .datepicker-day:hover:not(:disabled):not(.is-selected) {
     background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary) 8%, transparent));
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .datepicker-day.is-outside {
     color: var(--color-text-subtle);
@@ -736,7 +736,7 @@ button.datepicker-month:hover {
 }
 .datepicker-day.is-today {
     font-weight: 700;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     box-shadow: inset 0 0 0 1.5px var(--color-primary);
 }
 .datepicker-day.is-selected {
@@ -770,7 +770,7 @@ button.datepicker-month:hover {
     border-radius: var(--radius);
     font-size: 13px;
     font-weight: 600;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     cursor: pointer;
     transition: background 0.12s;
 }
@@ -808,11 +808,11 @@ button.datepicker-month:hover {
 }
 .datepicker-cell:hover:not(:disabled):not(.is-selected) {
     background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary) 8%, transparent));
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .datepicker-cell.is-today {
     box-shadow: inset 0 0 0 1.5px var(--color-primary);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     font-weight: 700;
 }
 .datepicker-cell.is-selected {
@@ -961,7 +961,7 @@ button.datepicker-month:hover {
 // Days inside the chosen span get a soft rail; the two endpoints get the solid fill.
 .datepicker-day.in-range {
     background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary) 12%, transparent));
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     border-radius: 6px;
 }
 .datepicker-day.is-range-start,
@@ -1232,7 +1232,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     transition: color 0.12s ease;
 }
 .dropdown-search-wrapper:focus-within .dropdown-search-icon {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .dropdown-search-input {
     width: 100%;
@@ -1306,11 +1306,11 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
 .country-dropdown-item:focus,
 .country-dropdown-item.is-active {
     background: var(--color-primary-soft) !important;
-    color: var(--color-primary) !important;
+    color: var(--color-primary-ink) !important;
 }
 .country-dropdown-item.selected {
     background: var(--color-primary-soft) !important;
-    color: var(--color-primary) !important;
+    color: var(--color-primary-ink) !important;
     font-weight: 500;
 }
 .country-dropdown-menu .wui-flag {
@@ -1340,7 +1340,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
 .selected-check-icon {
     margin-left: auto;
     display: flex;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .country-empty {
     padding: 10px 16px;
@@ -1387,7 +1387,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
 }
 .wui-timepicker-toggle:hover:not(:disabled),
 .timepicker.open .wui-timepicker-toggle {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .wui-timepicker-toggle:focus-visible {
     outline: 2px solid var(--color-primary);
@@ -1507,7 +1507,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
 .timepicker-option:hover:not(:disabled),
 .timepicker-option.is-active {
     background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary) 8%, transparent));
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .timepicker-option.is-selected {
     background: var(--color-primary);

package/scss/wui/_command-palette.scss

@@ -60,7 +60,7 @@ wui-command-palette {
 }
 .wui-cmd-spinner {
     flex: 0 0 auto;
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 
 .wui-cmd-list {
@@ -103,7 +103,7 @@ wui-command-palette {
 }
 .wui-cmd-item[aria-selected="true"] {
     background: var(--color-primary-soft);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .wui-cmd-item[aria-disabled="true"] {
     color: var(--color-text-muted);
@@ -123,7 +123,7 @@ wui-command-palette {
 }
 .wui-cmd-item[aria-selected="true"] .wui-cmd-item-icon {
     background: var(--color-surface);
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
 }
 .wui-cmd-item-text {
     display: flex;

package/scss/wui/_consent-banner.scss

@@ -57,7 +57,7 @@ wui-consent-banner:not([open]) {
 }
 
 .wui-consent-banner-policy {
-    color: var(--color-primary);
+    color: var(--color-primary-ink);
     font-weight: 500;
 }
 

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.