@webority/theme 0.98.0 → 0.100.0

package/scss/wui/_choice.scss

@@ -14,7 +14,7 @@
     gap: 11px;
     padding: 20px;
     border: 1.5px solid var(--color-border);
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     background: var(--color-surface);
     cursor: pointer;
     transition:
@@ -33,7 +33,7 @@
     background: color-mix(in srgb, var(--color-primary) 5%, transparent);
 }
 .struct-card.checked .struct-card-title {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 
 // A card that cannot change: its input is disabled directly or by a disabled fieldset.
@@ -71,11 +71,11 @@
 }
 .struct-card.checked .struct-card-ic {
     background: var(--color-surface);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 // Hover previews the chosen glyph colour; a card that cannot change keeps its grey.
 .struct-card:hover:not(:has(.struct-card-input:disabled)) .struct-card-ic {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 // 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
@@ -111,7 +111,7 @@
     align-items: center;
     justify-content: center;
     background: transparent;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     opacity: 0;
     transform: scale(0.5);
     transition:
@@ -267,10 +267,10 @@
 }
 .search-select-control.open {
     // White fill + the active/focus border, matching a focused text input (which lifts off the
-    // muted resting fill onto white with a --color-focus-border border). Keeps the control seamless
+    // muted resting fill onto white with a --color-field-border-focus border). Keeps the control seamless
     // with the open menu and the floated label's white mask.
     background: var(--color-surface);
-    border-color: var(--color-focus-border);
+    border-color: var(--color-field-border-focus);
 }
 // Closed again (a value picked, Escape), focus stays on the trigger: it returns to the resting
 // fill and border, as the date picker does. Only the open list shows the focus border; keyboard
@@ -308,23 +308,23 @@
 // Sizes — mirror AppInput's .input-sm / .input-lg so a select lines up with the
 // text fields beside it. md is the base .search-select-control height.
 .search-select-sm .search-select-control {
-    height: var(--wui-control-height-sm);
-    min-height: var(--wui-control-height-sm);
+    height: var(--wui-control-sm);
+    min-height: var(--wui-control-sm);
     font-size: 13px;
-    border-radius: var(--wui-field-radius-sm);
+    border-radius: var(--wui-field-sm-radius);
 }
 .search-select-lg .search-select-control {
-    height: var(--wui-control-height-lg);
-    min-height: var(--wui-control-height-lg);
+    height: var(--wui-control-lg);
+    min-height: var(--wui-control-lg);
     font-size: 16px;
-    border-radius: var(--wui-field-radius-lg);
+    border-radius: var(--wui-field-lg-radius);
 }
 // xl: the 52px select, the same height as an AppInput at size="xl". A literal height, as on the input.
 .wui-search-select-xl .search-select-control {
     height: 52px;
     min-height: 52px;
     font-size: 16px;
-    border-radius: var(--wui-field-radius-lg);
+    border-radius: var(--wui-field-lg-radius);
 }
 // Multi-select grows with its chips, so a size sets the FLOOR (min-height from the rule
 // above) but never a fixed height — reset height:auto so a second row of chips can appear.
@@ -335,13 +335,13 @@
 // AppSelectMini is <wui-select compact>: sm sits on the 32px sm rung, lg one rung below the lg
 // field, never under 32px. The compound selector outranks both the plain size rule and the compact rule.
 .search-select-compact.search-select-sm .search-select-control {
-    height: var(--wui-control-height-sm);
-    min-height: var(--wui-control-height-sm);
+    height: var(--wui-control-sm);
+    min-height: var(--wui-control-sm);
     font-size: 12px;
 }
 .search-select-compact.search-select-lg .search-select-control {
-    height: var(--wui-control-height);
-    min-height: var(--wui-control-height);
+    height: var(--wui-control-md);
+    min-height: var(--wui-control-md);
     font-size: 14px;
 }
 
@@ -413,8 +413,8 @@
 // pagination) so a compact wui select and a compact native select read as one control
 // rather than two sizes of the same idea.
 .search-select-compact .search-select-control {
-    height: var(--wui-control-height-sm);
-    min-height: var(--wui-control-height-sm);
+    height: var(--wui-control-sm);
+    min-height: var(--wui-control-sm);
     min-width: 64px;
     padding: 0 10px;
     font-size: 13px;
@@ -433,9 +433,9 @@
     right: 0;
     background: var(--color-surface);
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     corner-shape: squircle;
-    box-shadow: var(--shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
     padding: 4px;
     overflow: hidden;
 }
@@ -460,7 +460,7 @@
     padding: 0 12px;
     height: 40px;
     border: 1px solid var(--color-field-border);
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     // AppInput's field model: muted resting fill that lifts to a clean surface on focus.
     background: var(--color-field-bg);
     color: var(--color-text-subtle);
@@ -472,10 +472,10 @@
 }
 .search-select-search:focus-within {
     background: var(--color-surface);
-    border-color: var(--color-focus-border);
+    border-color: var(--color-field-border-focus);
 }
 .search-select-search:focus-within svg {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .search-select-clear {
     display: grid;
@@ -529,7 +529,7 @@
     padding: 9px 14px;
     line-height: 1.4;
     border: none;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     corner-shape: squircle;
     background: transparent;
     font-size: 14px;
@@ -544,19 +544,19 @@
 .search-select-option:hover,
 .search-select-option.is-active {
     background: color-mix(in srgb, var(--color-primary-soft) 55%, transparent);
-    color: var(--color-primary-ink);
-    outline: 1px solid var(--color-focus-border);
+    color: var(--color-primary-text);
+    outline: 1px solid var(--color-field-border-focus);
     outline-offset: -1px;
 }
 .search-select-option.selected {
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     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-ink);
+    color: var(--color-primary-text);
 }
 .search-select-empty {
     padding: 12px 10px;
@@ -617,7 +617,7 @@
     // this .open rule keeps it white (matching .search-select-control.open) instead of snapping
     // back to grey the moment the dropdown appears.
     background-color: var(--color-surface);
-    border-color: var(--color-focus-border);
+    border-color: var(--color-field-border-focus);
     box-shadow: none;
 }
 // Closing hands focus back to the trigger (so the keyboard user lands where they started), which
@@ -645,9 +645,9 @@ wui-date-range:not([aria-invalid="true"]) .daterange:not(.open) .daterange-trigg
     padding: 18px;
     background: var(--color-surface);
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-xl);
+    border-radius: var(--wui-radius-xl);
     corner-shape: squircle;
-    box-shadow: var(--shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
     animation: datepicker-in 0.14s ease;
 }
 .datepicker-pop.drop-up {
@@ -698,7 +698,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-ink);
+    color: var(--color-primary-text);
 }
 .datepicker-nav {
     display: inline-flex;
@@ -723,7 +723,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-ink);
+    color: var(--color-primary-text);
 }
 .datepicker-weekdays {
     display: grid;
@@ -775,7 +775,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-ink);
+    color: var(--color-primary-text);
 }
 .datepicker-day.is-outside {
     color: var(--color-text-subtle);
@@ -783,12 +783,12 @@ button.datepicker-month:hover {
 }
 .datepicker-day.is-today {
     font-weight: 700;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     box-shadow: inset 0 0 0 1.5px var(--color-primary);
 }
 .datepicker-day.is-selected {
     background: var(--color-primary);
-    color: var(--color-primary-text);
+    color: var(--color-on-primary);
     font-weight: 600;
 }
 .datepicker-day:disabled {
@@ -814,10 +814,10 @@ button.datepicker-month:hover {
     border: none;
     background: transparent;
     padding: 6px 12px;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     font-size: 13px;
     font-weight: 600;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     cursor: pointer;
     transition: background 0.12s;
 }
@@ -842,7 +842,7 @@ button.datepicker-month:hover {
     justify-content: center;
     height: 48px;
     border: none;
-    border-radius: var(--radius-lg, 12px);
+    border-radius: var(--wui-radius-lg, 12px);
     background: transparent;
     font-size: 13px;
     font-weight: 500;
@@ -855,16 +855,16 @@ 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-ink);
+    color: var(--color-primary-text);
 }
 .datepicker-cell.is-today {
     box-shadow: inset 0 0 0 1.5px var(--color-primary);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     font-weight: 700;
 }
 .datepicker-cell.is-selected {
     background: var(--color-primary);
-    color: var(--color-primary-text);
+    color: var(--color-on-primary);
     font-weight: 600;
 }
 .datepicker-cell:disabled {
@@ -960,7 +960,7 @@ button.datepicker-month:hover {
 .daterange.open .daterange-trigger {
     // Stay white while the two-month popover is open — see the note on .datepicker.open above.
     background-color: var(--color-surface);
-    border-color: var(--color-focus-border);
+    border-color: var(--color-field-border-focus);
     box-shadow: none;
 }
 .daterange-pop {
@@ -974,9 +974,9 @@ button.datepicker-month:hover {
     padding: 18px;
     background: var(--color-surface);
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-xl);
+    border-radius: var(--wui-radius-xl);
     corner-shape: squircle;
-    box-shadow: var(--shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
     animation: datepicker-in 0.14s ease;
 }
 .daterange-pop.drop-up {
@@ -1008,13 +1008,13 @@ 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-ink);
+    color: var(--color-primary-text);
     border-radius: 6px;
 }
 .datepicker-day.is-range-start,
 .datepicker-day.is-range-end {
     background: var(--color-primary);
-    color: var(--color-primary-text);
+    color: var(--color-on-primary);
     font-weight: 600;
 }
 .daterange-hint {
@@ -1046,7 +1046,7 @@ button.datepicker-month:hover {
     border: none;
     background: transparent;
     padding: 7px 10px;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     font-size: 13px;
     font-weight: 500;
     text-align: left;
@@ -1057,11 +1057,11 @@ button.datepicker-month:hover {
 }
 .wui-daterange-preset:hover:not(:disabled) {
     background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary) 8%, transparent));
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .wui-daterange-preset.is-active {
     background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary) 12%, transparent));
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     font-weight: 600;
 }
 .wui-daterange-preset:disabled {
@@ -1117,10 +1117,10 @@ button.datepicker-month:hover {
     display: flex;
     align-items: center;
     width: 100%;
-    height: var(--wui-control-height);
+    height: var(--wui-control-md);
     border: 1px solid var(--color-field-border);
-    // Match AppInput's field-radius ladder exactly (18px md), not the generic --radius (10px).
-    border-radius: var(--wui-field-radius);
+    // Match AppInput's field-radius ladder exactly (18px md), not the generic --wui-radius-md (10px).
+    border-radius: var(--wui-field-md-radius);
     // Match AppInput exactly: muted resting fill that lifts to a clean surface on focus.
     background: var(--color-field-bg);
     // Clip the inner control to the shell's rounded shape — a full-height child was painting
@@ -1144,7 +1144,7 @@ button.datepicker-month:hover {
 // Match AppInput's focus: clean surface fill + a soft primary border.
 .app-phone-number-input .phone-input-wrap:focus-within {
     background: var(--color-surface);
-    border-color: var(--color-focus-border);
+    border-color: var(--color-field-border-focus);
 }
 .app-phone-number-input .phone-input-wrap:has(> .input:disabled) {
     background: var(--color-bg-muted);
@@ -1254,7 +1254,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
 .country-toggle:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: var(--wui-focus-ring-offset);
-    border-radius: var(--radius-sm);
+    border-radius: var(--wui-radius-sm);
 }
 .country-toggle:disabled {
     cursor: not-allowed;
@@ -1296,8 +1296,8 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
 // shell height/radius, the tel font, the dial-code text, and the adornment pad so
 // the whole field steps together — md is the base block above.
 .app-phone-number-input.phone-sm .phone-input-wrap {
-    height: var(--wui-control-height-sm);
-    border-radius: var(--wui-field-radius-sm);
+    height: var(--wui-control-sm);
+    border-radius: var(--wui-field-sm-radius);
 }
 .app-phone-number-input.phone-sm {
     --wui-phone-font-size: 13px;
@@ -1306,8 +1306,8 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     padding-left: 10px;
 }
 .app-phone-number-input.phone-lg .phone-input-wrap {
-    height: var(--wui-control-height-lg);
-    border-radius: var(--wui-field-radius-lg);
+    height: var(--wui-control-lg);
+    border-radius: var(--wui-field-lg-radius);
 }
 .app-phone-number-input.phone-lg {
     --wui-phone-font-size: 16px;
@@ -1328,10 +1328,10 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     max-width: calc(100vw - 16px);
     padding: 4px;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     corner-shape: squircle;
     background: var(--color-surface);
-    box-shadow: var(--shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
     overflow: hidden;
 }
 .dropdown-search-wrapper {
@@ -1349,14 +1349,14 @@ 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-ink);
+    color: var(--color-primary-text);
 }
 .dropdown-search-input {
     width: 100%;
     height: 40px;
     padding: 0 12px 0 36px;
     border: 1px solid var(--color-field-border);
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     font-size: 14px;
     color: var(--color-text);
     // AppInput's field model: muted resting fill that lifts to a clean surface on focus.
@@ -1371,7 +1371,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
 // AppInput's exact focus: clean surface fill + its soft primary border token.
 .dropdown-search-input:focus {
     background: var(--color-surface);
-    border-color: var(--color-focus-border);
+    border-color: var(--color-field-border-focus);
 }
 // AppInput's placeholder colour, not the browser default grey.
 .dropdown-search-input::placeholder {
@@ -1403,7 +1403,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     align-items: center;
     gap: 10px;
     padding: 9px 14px !important;
-    border-radius: var(--radius) !important;
+    border-radius: var(--wui-radius-md) !important;
     corner-shape: squircle;
     cursor: pointer;
     color: var(--color-text) !important;
@@ -1423,7 +1423,7 @@ 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-ink) !important;
+    color: var(--color-primary-text) !important;
 }
 // The tint alone is about 1.2:1; keyboard focus adds the ring, inset inside the scrolling list.
 .country-dropdown-item:focus-visible {
@@ -1432,7 +1432,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
 }
 .country-dropdown-item.selected {
     background: var(--color-primary-soft) !important;
-    color: var(--color-primary-ink) !important;
+    color: var(--color-primary-text) !important;
     font-weight: 500;
 }
 .country-dropdown-menu .wui-flag {
@@ -1462,7 +1462,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
 .selected-check-icon {
     margin-left: auto;
     display: flex;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .country-empty {
     padding: 10px 16px;
@@ -1498,7 +1498,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     width: 44px;
     padding: 0;
     border: none;
-    border-radius: 0 var(--wui-field-radius) var(--wui-field-radius) 0;
+    border-radius: 0 var(--wui-field-md-radius) var(--wui-field-md-radius) 0;
     background: transparent;
     color: var(--color-text-subtle);
     cursor: pointer;
@@ -1509,7 +1509,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-ink);
+    color: var(--color-primary-text);
 }
 .wui-timepicker-toggle:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
@@ -1538,7 +1538,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
 .timepicker.open .timepicker-trigger {
     // Stay white while the columns are open — see the note on .datepicker.open above.
     background-color: var(--color-surface);
-    border-color: var(--color-focus-border);
+    border-color: var(--color-field-border-focus);
     box-shadow: none;
 }
 // Refused typed text keeps the soft danger border while the columns are open, as the shell's
@@ -1554,9 +1554,9 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     padding: 8px;
     background: var(--color-surface);
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     corner-shape: squircle;
-    box-shadow: var(--shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
     animation: timepicker-in 0.14s ease;
 }
 .timepicker-pop.drop-up {
@@ -1615,7 +1615,7 @@ wui-timepicker[aria-invalid="true"] .timepicker.open .timepicker-trigger {
     font-variant-numeric: tabular-nums;
     color: var(--color-text);
     cursor: pointer;
-    border-radius: var(--radius-sm);
+    border-radius: var(--wui-radius-sm);
     transition:
         background 0.1s,
         color 0.1s;
@@ -1629,11 +1629,11 @@ 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-ink);
+    color: var(--color-primary-text);
 }
 .timepicker-option.is-selected {
     background: var(--color-primary);
-    color: var(--color-primary-text);
+    color: var(--color-on-primary);
     font-weight: 600;
 }
 .timepicker-option:disabled {

package/scss/wui/_code-block.scss

@@ -52,7 +52,7 @@
     min-width: 0;
     overflow: hidden;
     color: var(--color-text-muted);
-    font-family: var(--font-sans);
+    font-family: var(--wui-font-ui);
     font-size: 12px;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -126,7 +126,7 @@
 }
 .wui-code-t-keyword,
 .wui-code-t-tag {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .wui-code-t-function,
 .wui-code-t-type,

package/scss/wui/_command-palette.scss

@@ -60,7 +60,7 @@ wui-command-palette {
 }
 .wui-cmd-spinner {
     flex: 0 0 auto;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 
 // Nested pages: the Back button and the path to the open page. The element fills the trail and
@@ -84,7 +84,7 @@ wui-command-palette {
     height: 28px;
     padding: 0;
     border: 0;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     corner-shape: squircle;
     background: transparent;
     color: var(--color-text-muted);
@@ -173,7 +173,7 @@ button.wui-cmd-crumb:focus-visible {
     align-items: center;
     gap: 12px;
     padding: 8px 10px;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     corner-shape: squircle;
     color: var(--color-text);
     cursor: pointer;
@@ -184,7 +184,7 @@ button.wui-cmd-crumb:focus-visible {
 // an inset ring makes it plain; inset, because the list scrolls and would clip an outer ring.
 .wui-cmd-item[aria-selected="true"] {
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: var(--wui-focus-ring-inset);
 }
@@ -199,14 +199,14 @@ button.wui-cmd-crumb:focus-visible {
     place-items: center;
     width: 32px;
     height: 32px;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     corner-shape: squircle;
     background: var(--color-bg-muted);
     color: var(--color-text-muted);
 }
 .wui-cmd-item[aria-selected="true"] .wui-cmd-item-icon {
     background: var(--color-surface);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .wui-cmd-item-text {
     display: flex;
@@ -242,9 +242,9 @@ button.wui-cmd-crumb:focus-visible {
     flex: 0 0 auto;
 }
 .wui-cmd-item[aria-selected="true"] > .wui-kbd {
-    border-color: var(--color-primary-ink);
+    border-color: var(--color-primary-text);
     background: var(--color-surface);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 // A phone has no keyboard to press them on.
 @media (hover: none) and (pointer: coarse) {
@@ -303,5 +303,5 @@ button.wui-cmd-crumb:focus-visible {
 
 // The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
 :is(.wui-cmd-back, button.wui-cmd-crumb):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/_comment-thread.scss

@@ -84,7 +84,7 @@
     padding: 0 2px;
     border-radius: var(--wui-radius-sm);
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     font-weight: 500;
 }
 
@@ -142,9 +142,9 @@ button.wui-reaction:hover,
     padding: 4px;
     background: var(--color-surface);
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     corner-shape: squircle;
-    box-shadow: var(--shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
 }
 .wui-reaction-picker[hidden] {
     display: none;
@@ -156,7 +156,7 @@ button.wui-reaction:hover,
     width: 36px;
     height: 36px;
     border: 0;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     background: transparent;
     font-size: 18px;
     cursor: pointer;
@@ -184,7 +184,7 @@ button.wui-reaction:hover,
     cursor: pointer;
 }
 .wui-comment-action:hover {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 
 .wui-comment-confirm {

package/scss/wui/_consent-banner.scss

@@ -53,7 +53,7 @@ wui-consent-banner[tour-open] {
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     border-radius: var(--wui-radius-lg);
-    box-shadow: var(--wui-shadow-overlay-lg);
+    box-shadow: var(--wui-shadow-modal);
     color: var(--color-text);
     text-align: start;
     pointer-events: auto;
@@ -78,7 +78,7 @@ wui-consent-banner[tour-open] {
 }
 
 .wui-consent-banner-policy {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     font-weight: 500;
 }