@webority/theme 0.98.0 → 0.100.0

package/scss/wui/_overlays.scss

@@ -67,7 +67,7 @@
     // deep drop shadow.
     box-shadow:
         0 0 0 1px color-mix(in srgb, var(--color-text) 10%, transparent),
-        var(--shadow-overlay-lg);
+        var(--wui-shadow-modal);
     background: var(--color-surface);
 }
 // `--wui-modal-max-width` is how a caller sets an explicit width. It is set on the
@@ -78,7 +78,7 @@
 // it on `.modal-dialog`, so the same `maxWidth="800"` produced two different dialogs.
 .wui-modal {
     background: var(--color-surface);
-    border-radius: var(--radius-xl);
+    border-radius: var(--wui-radius-xl);
     corner-shape: squircle;
     border: none;
     width: 100%;
@@ -149,11 +149,11 @@
     justify-content: center;
     width: 34px;
     height: 34px;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     corner-shape: squircle;
     flex: none;
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 
 // Break long unbroken names so they wrap within the heading instead of
@@ -177,7 +177,7 @@
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     margin-bottom: 2px;
 }
 // `tone` tints the header icon tile and the eyebrow, so a destructive or a success dialog
@@ -281,7 +281,7 @@
     line-height: 1;
     background: var(--color-bg-subtle);
     color: var(--color-text-muted);
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     corner-shape: squircle;
     transition:
         background 180ms cubic-bezier(0.4, 0, 0.2, 1),
@@ -290,8 +290,8 @@
 @media (max-width: 575.98px), (pointer: coarse) {
     .wui-modal-close,
     .wui-drawer-close {
-        width: var(--wui-control-height);
-        height: var(--wui-control-height);
+        width: var(--wui-control-md);
+        height: var(--wui-control-md);
     }
 }
 .wui-modal-close:hover,
@@ -467,9 +467,9 @@
 :where(.tooltip.wui-tooltip) {
     --wui-tooltip-bg: var(--color-surface);
     --wui-tooltip-color: var(--color-text);
-    --wui-tooltip-border: var(--color-border-light);
-    --wui-tooltip-radius: var(--radius, 10px);
-    --wui-tooltip-shadow: var(--wui-shadow-overlay);
+    --wui-tooltip-border: var(--color-border-subtle);
+    --wui-tooltip-radius: var(--wui-radius-md, 10px);
+    --wui-tooltip-shadow: var(--wui-shadow-popover);
     // Size is these four vars — the `md` default. A size-* class swaps them; a caller can
     // override any one from its own className for a fully custom size.
     --wui-tooltip-max-width: 240px;
@@ -533,12 +533,12 @@
     width: max-content;
     max-width: 240px;
     padding: 7px 11px;
-    border-radius: var(--radius, 10px);
+    border-radius: var(--wui-radius-md, 10px);
     corner-shape: squircle;
     background: var(--color-surface);
     color: var(--color-text);
-    border: 1px solid var(--color-border-light);
-    box-shadow: var(--wui-shadow-overlay);
+    border: 1px solid var(--color-border-subtle);
+    box-shadow: var(--wui-shadow-popover);
     font-size: 0.8125rem;
     font-weight: 500;
     line-height: 1.4;
@@ -590,7 +590,7 @@
 }
 .tooltip.wui-tooltip.tone-primary {
     --wui-tooltip-bg: var(--color-primary);
-    --wui-tooltip-color: var(--color-primary-text);
+    --wui-tooltip-color: var(--color-on-primary);
     --wui-tooltip-border: transparent;
 }
 .tooltip.wui-tooltip.tone-success {
@@ -656,8 +656,8 @@
     // The full-strength border, not border-light: on a white page the surface-on-white
     // card otherwise merges into the background (the overlay shadow alone is too soft).
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg, 12px);
-    box-shadow: var(--wui-shadow-overlay);
+    border-radius: var(--wui-radius-lg, 12px);
+    box-shadow: var(--wui-shadow-popover);
     overflow: hidden;
     touch-action: pan-y;
     user-select: none;
@@ -847,10 +847,10 @@
     font-weight: 600;
     color: var(--color-text-subtle);
     background: var(--color-surface);
-    border: 1px solid var(--color-border-light);
+    border: 1px solid var(--color-border-subtle);
     border-radius: 999px;
     padding: 2px 12px;
-    box-shadow: var(--wui-shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
 }
 
 @keyframes wui-toast-countdown {
@@ -881,13 +881,13 @@
 // materializes softly while the status icon grows from a dot with a slight overshoot,
 // and the message trails in last.
 .wui-toast--anim-organic {
-    animation: wui-toast-materialize 360ms var(--wui-ease-out-quart);
+    animation: wui-toast-materialize 360ms var(--wui-ease-out);
 }
 .wui-toast--anim-organic .wui-toast-icon {
     animation: wui-toast-icon-grow 420ms 60ms cubic-bezier(0.34, 1.45, 0.64, 1) backwards;
 }
 .wui-toast--anim-organic .wui-toast-content {
-    animation: wui-toast-content-in 300ms 190ms var(--wui-ease-out-quart) backwards;
+    animation: wui-toast-content-in 300ms 190ms var(--wui-ease-out) backwards;
 }
 
 // `jelly` — drops in with a squash-and-stretch landing.

package/scss/wui/_pending.scss

@@ -3,7 +3,7 @@
 // and the field does not jump or flash option text.
 :is(wui-multiselect, wui-autocomplete, wui-taginput, wui-timepicker, wui-date-range, wui-phone, wui-country-select, wui-slider, wui-mention-input):not(:defined) {
     display: block;
-    min-height: var(--wui-control-height);
+    min-height: var(--wui-control-md);
 }
 :is(wui-multiselect, wui-autocomplete, wui-taginput, wui-timepicker, wui-date-range, wui-phone, wui-country-select, wui-slider, wui-mention-input):not(:defined) > wui-option {
     display: none;

package/scss/wui/_rich-text.scss

@@ -3,7 +3,7 @@
 // Part of the wui-components layer; see _wui-components.scss for the load order. The shell wears the
 // shared field chrome (muted fill at rest, white surface and brand border on focus, soft danger
 // border when invalid) around a toolbar and the editable surface; the content takes the page's
-// type. Every colour is a token the dark remap in _wui-aliases.scss flips with the rest of the portal.
+// type. Every colour is a token the dark remap in _tokens.generated.scss flips with the rest of the portal.
 
 wui-rich-text {
     display: block;
@@ -27,7 +27,7 @@ wui-rich-text:not(:defined) > textarea {
     flex-direction: column;
     width: 100%;
     border: 1px solid var(--color-field-border);
-    border-radius: var(--wui-field-radius);
+    border-radius: var(--wui-field-md-radius);
     background: var(--color-field-bg);
     color: var(--color-text);
     font-size: 14px;
@@ -42,7 +42,7 @@ wui-rich-text:not(:defined) > textarea {
 }
 .wui-rich-text-shell:focus-within {
     background: var(--color-surface);
-    border-color: var(--color-focus-border);
+    border-color: var(--color-field-border-focus);
 }
 wui-rich-text[aria-invalid="true"] .wui-rich-text-shell,
 wui-rich-text[aria-invalid="true"] .wui-rich-text-shell:focus-within {
@@ -151,7 +151,7 @@ wui-rich-text[readonly] .wui-rich-text-toolbar {
     height: 32px;
     padding: 0 10px;
     border: 1px solid var(--color-border);
-    border-radius: var(--wui-field-radius-sm);
+    border-radius: var(--wui-field-sm-radius);
     background: var(--color-surface);
     color: var(--color-text);
     font: inherit;
@@ -165,7 +165,7 @@ wui-rich-text[readonly] .wui-rich-text-toolbar {
 }
 .wui-rich-text-link-input:focus {
     outline: none;
-    border-color: var(--color-focus-border);
+    border-color: var(--color-field-border-focus);
 }
 .wui-rich-text-link-input[aria-invalid="true"] {
     border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
@@ -185,7 +185,7 @@ wui-rich-text[readonly] .wui-rich-text-toolbar {
 }
 .wui-rich-text-link-apply {
     background: var(--color-primary);
-    color: var(--color-primary-text);
+    color: var(--color-on-primary);
 }
 .wui-rich-text-link-apply:hover {
     background: var(--color-primary-hover);
@@ -308,5 +308,5 @@ wui-rich-text[readonly] .wui-rich-text-prose {
     .wui-rich-text-link-cancel,
     .wui-rich-text-link-remove
 ):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/_rolling-number.scss

@@ -56,7 +56,7 @@ $wui-roll-cell: 1.2em;
 }
 // Only a figure that is moving has a transition, so a still render never catches a reel mid-move.
 .wui-rolling-number[data-rolling] .wui-rolling-number-reel {
-    transition: transform var(--wui-roll-duration, 600ms) var(--wui-ease-out-quart);
+    transition: transform var(--wui-roll-duration, 600ms) var(--wui-ease-out);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/scss/wui/_score-scale.scss

@@ -35,7 +35,7 @@
 .wui-score-scale__item--selected {
     border-color: var(--color-primary);
     background: var(--color-primary);
-    color: var(--color-primary-text);
+    color: var(--color-on-primary);
 }
 .wui-score-scale__item:has(input:focus-visible) {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);

package/scss/wui/_sections.scss

@@ -48,7 +48,7 @@
 }
 .wui-section-eyebrow {
     margin: 0;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     font-size: var(--wui-fs-sm);
     font-weight: 600;
     letter-spacing: 0.04em;
@@ -67,7 +67,7 @@
     border-color: transparent;
 }
 .wui-section-eyebrow-primary {
-    @include wui-tone-pill-colors(primary, var(--color-primary-ink));
+    @include wui-tone-pill-colors(primary, var(--color-primary-text));
     border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
 }
 .wui-section-eyebrow-success {
@@ -125,7 +125,7 @@
     display: block;
     width: 100%;
     height: auto;
-    border-radius: var(--radius-xl);
+    border-radius: var(--wui-radius-xl);
 }
 
 // ── Hero ──
@@ -180,9 +180,9 @@
     width: 3rem;
     height: 3rem;
     margin-bottom: 0.5rem;
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .wui-section-feature-title {
     margin: 0;
@@ -238,7 +238,7 @@
 }
 .wui-section-logo a {
     display: inline-flex;
-    border-radius: var(--radius-sm);
+    border-radius: var(--wui-radius-sm);
 }
 .wui-section-logo a:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
@@ -284,7 +284,7 @@
     margin: 0;
     padding: 1.75rem;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-xl);
+    border-radius: var(--wui-radius-xl);
     background: var(--color-surface);
 }
 .wui-section-testimonial-quote {
@@ -341,7 +341,7 @@
     width: 100%;
     max-width: none;
     padding: clamp(2rem, 1.5rem + 3vw, 4rem);
-    border-radius: var(--radius-xl);
+    border-radius: var(--wui-radius-xl);
     background: var(--color-primary-soft);
 }
 .wui-section-call-to-action .wui-section-subtitle {

package/scss/wui/_shell-parts.scss

@@ -75,13 +75,13 @@
     text-decoration: none;
 }
 .wui-tabbar-item.active {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     font-weight: 600;
 }
 .wui-tabbar-item:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: -4px;
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
 }
 .wui-tabbar-icon {
     display: inline-grid;
@@ -147,16 +147,16 @@
     left: auto;
     max-width: calc(100vw - 24px);
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     background: var(--color-surface);
-    box-shadow: var(--shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
 }
 .wui-usermenu-menu .dropdown-item {
     display: flex;
     align-items: center;
     gap: 10px;
     min-height: 44px;
-    border-radius: var(--radius-sm);
+    border-radius: var(--wui-radius-sm);
     color: var(--color-text-body);
     white-space: normal;
 }
@@ -296,7 +296,7 @@
     padding: 0 4px;
     border: 0;
     background: none;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     font: inherit;
     font-size: 14px;
     font-weight: 500;
@@ -321,7 +321,7 @@
     gap: 12px;
     min-height: 44px;
     padding: 12px 16px;
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--color-border-subtle);
     color: var(--color-text-body);
     text-decoration: none;
 }
@@ -382,7 +382,7 @@ a.wui-bell-item:focus-visible {
     justify-content: center;
     min-height: 44px;
     border-top: 1px solid var(--color-border);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     font-size: 14px;
     font-weight: 500;
     text-decoration: none;
@@ -429,9 +429,9 @@ a.wui-bell-item:focus-visible {
     padding: 6px;
     overflow-y: auto;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     background: var(--color-surface);
-    box-shadow: var(--shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
 }
 .wui-topsearch-results[hidden] {
     display: none;
@@ -439,7 +439,7 @@ a.wui-bell-item:focus-visible {
 .wui-topsearch-group + .wui-topsearch-group {
     margin-top: 4px;
     padding-top: 4px;
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--color-border-subtle);
 }
 .wui-topsearch-group-label {
     padding: 6px 10px 4px;
@@ -455,7 +455,7 @@ a.wui-bell-item:focus-visible {
     gap: 10px;
     min-height: 44px;
     padding: 6px 10px;
-    border-radius: var(--radius-sm);
+    border-radius: var(--wui-radius-sm);
     color: var(--color-text-body);
     text-decoration: none;
 }
@@ -492,8 +492,8 @@ a.wui-bell-item:focus-visible {
 }
 .wui-topsearch-all {
     margin-top: 4px;
-    border-top: 1px solid var(--color-border-light);
-    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+    border-top: 1px solid var(--color-border-subtle);
+    border-radius: 0 0 var(--wui-radius-sm) var(--wui-radius-sm);
 }
 .wui-topsearch-empty {
     padding: 14px 10px;
@@ -525,7 +525,7 @@ a.wui-bell-item:focus-visible {
         padding: 12px;
         border-bottom: 1px solid var(--color-border);
         background: var(--color-surface);
-        box-shadow: var(--shadow-overlay);
+        box-shadow: var(--wui-shadow-popover);
     }
     .wui-topsearch-results {
         position: static;

package/scss/wui/_shell.scss

@@ -41,9 +41,9 @@
     height: var(--wui-splash-size, 56px);
     display: inline-grid;
     place-items: center;
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     background: var(--color-primary);
-    color: var(--color-primary-text);
+    color: var(--color-on-primary);
     font-size: calc(var(--wui-splash-size, 56px) * 0.39);
     font-weight: 700;
     animation: wui-splash-breathe 2.6s ease-in-out infinite;
@@ -385,9 +385,9 @@
     gap: 12px;
     // Comfortable row: 44px, which with the 2px group gap is a 46px pitch. Compact sets its own below.
     // An explicit itemHeight sets --wui-nav-item-height on the shell and replaces all three heights.
-    min-height: var(--wui-nav-item-height, var(--wui-control-height-lg));
+    min-height: var(--wui-nav-item-height, var(--wui-control-lg));
     padding: 9px 14px;
-    border-radius: var(--radius-xl);
+    border-radius: var(--wui-radius-xl);
     corner-shape: squircle;
     font-size: 14px;
     font-weight: 500;
@@ -405,7 +405,7 @@
 }
 @media (pointer: coarse) {
     .app-shell[data-density="compact"] .app-nav-item:not(.app-nav-subitem) {
-        min-height: var(--wui-nav-item-height, var(--wui-control-height-lg));
+        min-height: var(--wui-nav-item-height, var(--wui-control-lg));
     }
 }
 .app-nav-item:hover {
@@ -415,7 +415,7 @@
 }
 .app-nav-item.active {
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     font-weight: 600;
 }
 .app-nav-item:focus-visible {
@@ -429,7 +429,7 @@
     color: var(--color-text-subtle);
 }
 .app-nav-item.active .app-nav-icon {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .app-nav-text {
     // Grows to fill the row so every trailing element — badge, trailing marker,
@@ -454,7 +454,7 @@
 // tinted badge on top of it would vanish.
 .app-nav-item.active .app-nav-badge {
     background: var(--color-surface);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 
 // Collapsed rail: icons only, centred. The label is removed from the flow rather
@@ -536,7 +536,7 @@
     color: var(--color-text-subtle);
 }
 .app-nav-item.active .app-nav-trailing {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 
 // ── Expandable sub-items ─────────────────────────────────────────────────────
@@ -628,7 +628,7 @@
     padding: 0;
     width: 32px;
     height: 32px;
-    border-radius: var(--radius-sm, 6px);
+    border-radius: var(--wui-radius-sm, 6px);
     cursor: pointer;
 }
 .wui-nav-split-toggle:hover {
@@ -658,13 +658,13 @@
         top: 50%;
         z-index: 40;
         padding: 5px 10px;
-        border-radius: var(--radius-lg);
+        border-radius: var(--wui-radius-lg);
         background: var(--color-text);
         color: var(--color-surface);
         font-size: 12px;
         font-weight: 500;
         white-space: nowrap;
-        box-shadow: var(--shadow-md);
+        box-shadow: var(--wui-shadow-card);
         opacity: 0;
         transform: translateY(-50%) scale(0.96);
         transform-origin: left center;
@@ -700,7 +700,7 @@
     margin-top: calc(9px + var(--app-sidebar-toggle-gap));
     padding: 0;
     border: 0;
-    border-radius: var(--radius-xl);
+    border-radius: var(--wui-radius-xl);
     corner-shape: squircle;
     background: transparent;
     color: var(--color-text-muted);
@@ -722,7 +722,7 @@
     pointer-events: none;
 }
 .app-sidebar-toggle:hover {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     background: var(--color-bg-muted);
 }
 .app-sidebar-toggle:focus-visible {
@@ -771,7 +771,7 @@
 }
 .app-topbar[data-tone="primary"] {
     background: var(--color-primary);
-    color: var(--color-primary-text);
+    color: var(--color-on-primary);
 }
 .app-topbar[data-tone="primary"] :is(.app-topbar-menu, .topbar-icon-btn, .wui-usermenu-trigger) {
     color: inherit;
@@ -783,10 +783,10 @@
 }
 .app-topbar[data-tone="primary"] .app-topbar-menu {
     background: transparent;
-    border-color: color-mix(in srgb, var(--color-primary-text) 60%, transparent);
+    border-color: color-mix(in srgb, var(--color-on-primary) 60%, transparent);
 }
 .app-topbar[data-tone="primary"] :is(.app-topbar-menu, .topbar-icon-btn, .wui-usermenu-trigger):hover {
-    background: color-mix(in srgb, var(--color-primary-text) 12%, transparent);
+    background: color-mix(in srgb, var(--color-on-primary) 12%, transparent);
 }
 // Two groups: the leading one shrinks and ellipsises a long page title, the
 // trailing one is pinned so actions are never pushed off-screen.
@@ -890,15 +890,15 @@
         // Hidden once the slide-out ends so a closed drawer's links leave the Tab order.
         visibility: hidden;
         transition:
-            transform 0.24s var(--wui-ease-out-quart),
+            transform 0.24s var(--wui-ease-out),
             visibility 0s linear 0.24s;
-        box-shadow: var(--shadow-overlay-lg);
+        box-shadow: var(--wui-shadow-modal);
     }
     .app-shell.app-shell.mobile-open .app-sidebar {
         transform: translateX(0);
         visibility: visible;
         transition:
-            transform 0.24s var(--wui-ease-out-quart),
+            transform 0.24s var(--wui-ease-out),
             visibility 0s;
     }
     // The rail is a desktop affordance; on a drawer it makes no sense, so the

package/scss/wui/_shortcuts.scss

@@ -92,7 +92,7 @@
     corner-shape: squircle;
     background: var(--color-surface);
     color: var(--color-text);
-    box-shadow: var(--wui-shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
     font-size: 14px;
     text-align: start;
 }

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-ink);
+    color: var(--color-primary-text);
 }
 .wui-sortable-handle:disabled {
     cursor: not-allowed;
@@ -102,7 +102,7 @@ wui-sortable[disabled] .wui-sortable-item,
     left: 0;
     z-index: var(--wui-z-tooltip, 1650);
     margin: 0;
-    box-shadow: var(--wui-shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
     pointer-events: none;
     cursor: grabbing;
 }

package/scss/wui/_split-view.scss

@@ -90,7 +90,7 @@
 .wui-split-head-bulk {
     min-height: 36px;
     padding: 2px 8px 2px 12px;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     background: var(--color-primary-soft);
 }
 .wui-split-head-main[hidden],
@@ -133,7 +133,7 @@
 .wui-split-item {
     display: flex;
     align-items: flex-start;
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--color-border-subtle);
 }
 .wui-split-item:hover {
     background: var(--color-bg-muted);
@@ -221,7 +221,7 @@
     padding: 1px 7px;
     border-radius: 999px;
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     font-size: 12px;
     font-weight: 600;
     line-height: 18px;
@@ -242,7 +242,7 @@
     flex-direction: column;
     gap: 8px;
     padding: 14px 16px;
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--color-border-subtle);
 }
 .wui-split-skeleton-title,
 .wui-split-skeleton-meta {

package/scss/wui/_theme-toggle.scss

@@ -34,7 +34,7 @@ html.wui-theme-switching *::after {
 // The disc's glyph turns a touch on hover, the one cue that it changes something page-wide. The
 // segmented variant (one option per mode) keeps AppSegmented's own look.
 .u-action.wui-theme-toggle .wui-icon {
-    transition: transform 0.3s var(--wui-ease-out-quart, ease-out);
+    transition: transform 0.3s var(--wui-ease-out, ease-out);
 }
 .u-action.wui-theme-toggle:hover .wui-icon {
     transform: rotate(24deg);

package/scss/wui/_tone-pill.scss

@@ -5,9 +5,9 @@
 //   border-color: transparent
 //
 // $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
+// on-tint hue (equal to -text in light, lifted in dark), but --color-on-primary
 // 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-ink) instead.
+// soft tint — primary pills pass var(--color-primary-text) instead.
 //
 // Component-specific overrides (e.g. .badge-primary's colored border) are applied
 // after the mixin call.

package/scss/wui/_toolbar.scss

@@ -14,7 +14,7 @@
     border: 1px solid var(--color-border);
     border-radius: var(--wui-radius-lg);
     corner-shape: squircle;
-    box-shadow: var(--wui-shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
 }
 .toolbar.is-disabled {
     opacity: var(--wui-disabled-opacity);
@@ -41,7 +41,7 @@
 // The active tool: brand fill + the label slides open beside the icon.
 .toolbar-item:has(.toolbar-input:checked) {
     background: var(--color-primary);
-    color: var(--color-primary-text);
+    color: var(--color-on-primary);
 }
 .toolbar-item:has(.toolbar-input:disabled) {
     opacity: var(--wui-disabled-opacity);

package/scss/wui/_tree.scss

@@ -29,7 +29,7 @@ wui-tree {
     min-height: 36px;
     padding: 4px 8px;
     padding-inline-start: calc(8px + var(--wui-tree-level, 0) * 20px);
-    border-radius: var(--radius-sm);
+    border-radius: var(--wui-radius-sm);
     color: var(--color-text);
     cursor: pointer;
     user-select: none;
@@ -39,7 +39,7 @@ wui-tree {
 }
 .wui-tree-row.wui-tree-row-selected {
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .wui-tree-item[aria-disabled="true"] > .wui-tree-row {
     color: var(--color-text-subtle);
@@ -125,5 +125,5 @@ wui-tree {
 
 // The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
 .wui-tree-row: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;
 }