@webority/theme 0.99.0 → 0.100.0

package/scss/wui/_controls.scss

@@ -127,7 +127,7 @@
     padding: 14px 16px;
     min-height: 56px;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     background: var(--color-surface);
     transition:
         border-color 0.12s ease,
@@ -219,7 +219,7 @@
 }
 .form-check-input[type="checkbox"],
 .wui-check {
-    border-radius: var(--radius-sm);
+    border-radius: var(--wui-radius-sm);
     corner-shape: squircle;
 }
 .form-check-input[type="radio"],
@@ -393,9 +393,9 @@
 .textarea {
     box-sizing: border-box;
     width: 100%;
-    height: var(--wui-control-height);
+    height: var(--wui-control-md);
     padding: 6px 12px;
-    border-radius: var(--wui-field-radius);
+    border-radius: var(--wui-field-md-radius);
     border: 1px solid var(--color-field-border);
     background: var(--color-field-bg);
     font-size: 14px;
@@ -411,17 +411,17 @@
 // BS field can match without the .input alias.
 .form-control-sm,
 .input-sm {
-    height: var(--wui-control-height-sm);
+    height: var(--wui-control-sm);
     padding: 5px 10px;
     font-size: 13px;
-    border-radius: var(--wui-field-radius-sm);
+    border-radius: var(--wui-field-sm-radius);
 }
 .form-control-lg,
 .input-lg {
-    height: var(--wui-control-height-lg);
+    height: var(--wui-control-lg);
     padding: 9px 16px;
     font-size: 16px;
-    border-radius: var(--wui-field-radius-lg);
+    border-radius: var(--wui-field-lg-radius);
 }
 // xl (size="xl"): the 52px control for large forms. A literal height, because the control-height
 // ladder stops at 44px and its tokens live in the theme's token file. A floating label needs no
@@ -430,7 +430,7 @@
     height: 52px;
     padding: 9px 16px;
     font-size: 16px;
-    border-radius: var(--wui-field-radius-lg);
+    border-radius: var(--wui-field-lg-radius);
 }
 .textarea,
 textarea.form-control {
@@ -474,7 +474,7 @@ textarea.form-control.autosize {
     background-color: var(--color-surface);
     color: var(--color-text);
     // Soft brand border is the focus cue (per the reference) — no ring/shadow.
-    border-color: var(--color-focus-border);
+    border-color: var(--color-field-border-focus);
     box-shadow: none;
 }
 .form-control::placeholder,
@@ -614,7 +614,7 @@ textarea.form-control.autosize {
 .field-error {
     font-size: 12px;
     line-height: normal;
-    // Must clear AA against the surface: --color-danger-active (#E82646) is 4.38:1 at this
+    // Must clear AA against the surface: --color-danger-pressed (#E82646) is 4.38:1 at this
     // 12px size, under the 4.5:1 floor the a11y gate enforces.
     color: var(--color-danger-text);
     // Tighten the space above the message: .field's 10px gap → effective 8px, without
@@ -768,7 +768,7 @@ form .wui-field-message:empty {
     color: var(--color-text);
 }
 .num-stepper-btns button:active {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .input-date-wrap > .input {
     padding-right: 38px;
@@ -896,7 +896,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     padding-left: calc(var(--wui-input-icon-slot) + var(--wui-input-icon-gap));
 }
 .input-icon:focus-within > .ic {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 
 // Trailing action beside the field — a control (a labelled button, or a confirmation once the
@@ -939,14 +939,14 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     border: none;
     background: transparent;
     color: var(--color-text-subtle);
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     cursor: pointer;
     transition:
         color 0.12s ease,
         background 0.12s ease;
 }
 .pw-toggle:hover {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     background: transparent;
 }
 .pw-toggle:focus-visible {
@@ -1009,7 +1009,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     align-items: stretch;
     width: 100%;
     border: 1px solid var(--color-field-border);
-    border-radius: var(--wui-field-radius);
+    border-radius: var(--wui-field-md-radius);
     // Soft-filled at rest, white on focus — one shared fill for the whole control so the
     // prefix/suffix and the input body are always the SAME colour combination as the field.
     background: var(--color-field-bg);
@@ -1022,7 +1022,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
 }
 .input-affixed:focus-within {
     background: var(--color-surface);
-    border-color: var(--color-focus-border);
+    border-color: var(--color-field-border-focus);
 }
 .input-affixed:has(.input.error),
 .input-affixed:has(.input[aria-invalid="true"]) {
@@ -1058,11 +1058,11 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
 }
 .input-affixed .affix-pre {
     border-right: 1px solid var(--color-border);
-    border-radius: var(--wui-field-radius) 0 0 var(--wui-field-radius);
+    border-radius: var(--wui-field-md-radius) 0 0 var(--wui-field-md-radius);
 }
 .input-affixed .affix-suf {
     border-left: 1px solid var(--color-border);
-    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;
 }
 
 // Floating label — the label starts centred as the placeholder, then slides up and shrinks
@@ -1082,7 +1082,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     padding: 0 6px;
     // Rounded so the background mask reads as a soft pill sitting on the border, not a sharp
     // rectangle. Invisible at rest (label fill == field fill); only shows once it floats up.
-    border-radius: var(--radius-sm);
+    border-radius: var(--wui-radius-sm);
     max-width: calc(100% - 24px);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1107,7 +1107,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-ink);
+    color: var(--color-primary-text);
 }
 .field-float .input.error ~ .float-label {
     color: var(--color-danger-text);
@@ -1167,7 +1167,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     transform: translateY(-50%) scale(0.86);
 }
 .field-float:has(.search-select-control.open) .float-label {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     // The control turns white while open, so the label mask follows (a closed select keeps the
     // default muted mask, matching its muted resting fill, even while it holds focus).
     background: var(--color-surface);
@@ -1347,7 +1347,7 @@ wui-select[compact] {
 // red border around a non-input group (e.g. a structure-form card row)
 .group-invalid {
     border: 1px solid var(--color-danger);
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     padding: 8px;
 }
 
@@ -1357,7 +1357,7 @@ wui-select[compact] {
     display: flex;
     align-items: stretch;
     border: 1px solid var(--color-field-border);
-    border-radius: var(--wui-field-radius);
+    border-radius: var(--wui-field-md-radius);
     // Soft-filled at rest, white on focus — the numeric input and its unit pill share the
     // one wrapper fill, same colour combination as every other field.
     background: var(--color-field-bg);
@@ -1371,7 +1371,7 @@ wui-select[compact] {
 }
 .input-with-unit:focus-within {
     background: var(--color-surface);
-    border-color: var(--color-focus-border);
+    border-color: var(--color-field-border-focus);
 }
 .input-with-unit:has(.num-input.error) {
     background: var(--color-surface);
@@ -1390,13 +1390,13 @@ wui-select[compact] {
     // wrapper stacks the wrapper's 2px on top, so a 36px field renders at 38px with a
     // unit. Subtracting the border here keeps input + wrapper border == the control
     // height at every size.
-    height: calc(var(--wui-control-height) - 2px);
+    height: calc(var(--wui-control-md) - 2px);
 }
 .input-with-unit .num-input.input-sm {
-    height: calc(var(--wui-control-height-sm) - 2px);
+    height: calc(var(--wui-control-sm) - 2px);
 }
 .input-with-unit .num-input.input-lg {
-    height: calc(var(--wui-control-height-lg) - 2px);
+    height: calc(var(--wui-control-lg) - 2px);
 }
 .input-with-unit .num-input.wui-input-xl {
     height: calc(52px - 2px);
@@ -1417,7 +1417,7 @@ wui-select[compact] {
     line-height: 1;
     font-weight: 500;
     color: var(--color-text-muted);
-    font-family: var(--font-sans);
+    font-family: var(--wui-font-ui);
     display: inline-flex;
     align-items: center;
     white-space: nowrap;
@@ -1431,7 +1431,7 @@ wui-select[compact] {
     align-items: stretch;
     border: 1px solid var(--color-field-border);
     // Field radius ladder (matches AppInput): md 18px; sm/lg step below.
-    border-radius: var(--wui-field-radius);
+    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);
     transition:
@@ -1447,7 +1447,7 @@ wui-select[compact] {
 }
 .num-wrap:focus-within {
     background: var(--color-surface);
-    border-color: var(--color-focus-border);
+    border-color: var(--color-field-border-focus);
 }
 .num-wrap:has(.num-input.error),
 .num-wrap:has(.num-input.is-invalid),
@@ -1489,7 +1489,7 @@ wui-select[compact] {
     display: grid;
     place-items: center;
     // A control-height cell that shrinks before the value does in a narrow field.
-    flex: 0 1 var(--wui-control-height);
+    flex: 0 1 var(--wui-control-md);
     min-width: 0;
     overflow: hidden;
     // Fill the field height and centre the glyph. `height: 100%` resolved to auto
@@ -1506,16 +1506,16 @@ wui-select[compact] {
         background 0.12s ease;
 }
 .num-btn:hover:not(:disabled) {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     background: var(--color-bg-muted);
 }
 .num-btn:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: var(--wui-focus-ring-inset);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .num-btn:active:not(:disabled) {
-    color: color-mix(in srgb, var(--color-primary-ink) 80%, black);
+    color: color-mix(in srgb, var(--color-primary-text) 80%, black);
 }
 .num-btn:disabled {
     color: var(--color-text-subtle);
@@ -1536,19 +1536,19 @@ wui-select[compact] {
 // font), the wrapper carries .num-wrap-sm / .num-wrap-lg to scale the button
 // cells to match. Default (md) uses the control-height cell above.
 .num-wrap-sm {
-    border-radius: var(--wui-field-radius-sm);
+    border-radius: var(--wui-field-sm-radius);
 }
 .num-wrap-sm .num-btn {
-    flex-basis: var(--wui-control-height-sm);
+    flex-basis: var(--wui-control-sm);
 }
 .num-wrap-sm .num-input {
     font-size: 13px;
 }
 .num-wrap-lg {
-    border-radius: var(--wui-field-radius-lg);
+    border-radius: var(--wui-field-lg-radius);
 }
 .num-wrap-lg .num-btn {
-    flex-basis: var(--wui-control-height-lg);
+    flex-basis: var(--wui-control-lg);
 }
 .num-wrap-lg .num-input {
     font-size: 16px;
@@ -1563,7 +1563,7 @@ wui-select[compact] {
     font-size: 14px;
     font-weight: 500;
     color: var(--color-text-muted);
-    font-family: var(--font-sans);
+    font-family: var(--wui-font-ui);
     display: inline-flex;
     align-items: center;
     white-space: nowrap;
@@ -1584,7 +1584,7 @@ wui-select[compact] {
     border: 1px solid var(--color-border);
 }
 .badge-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);
 }
 .badge-success {
@@ -1637,7 +1637,7 @@ wui-select[compact] {
     @include wui-tone-pill-colors(info);
 }
 .status-label.primary {
-    @include wui-tone-pill-colors(primary, var(--color-primary-ink));
+    @include wui-tone-pill-colors(primary, var(--color-primary-text));
 }
 // Default/neutral — also the bare `.status-label` look, so an unknown or omitted
 // tone still renders as a proper pill instead of transparent text.
@@ -1656,7 +1656,7 @@ wui-select[compact] {
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    min-height: var(--wui-control-height);
+    min-height: var(--wui-control-md);
     padding: 0 14px;
     border: 1px solid var(--color-border);
     border-radius: 999px;
@@ -1688,7 +1688,7 @@ wui-select[compact] {
 .choice-chip:has(input:checked) {
     border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 // A tick before the label, so selection does not rest on the tint alone. Its slot is kept on every
 // chip, so picking one never widens it and a wrapping row never shifts.
@@ -1721,19 +1721,19 @@ wui-select[compact] {
 }
 .choice-chip:has(input:checked) .count {
     background: var(--color-surface);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 
 // Size scale (`size`): height, padding, gap and font step together; md is the base above.
 .choice-chip-sm {
     gap: 6px;
-    min-height: var(--wui-control-height-sm);
+    min-height: var(--wui-control-sm);
     padding: 0 11px;
     font-size: 13px;
 }
 .choice-chip-lg {
     gap: 10px;
-    min-height: var(--wui-control-height-lg);
+    min-height: var(--wui-control-lg);
     padding: 0 18px;
     font-size: 15px;
 }
@@ -1834,11 +1834,11 @@ wui-otp {
     width: 44px;
     min-width: 22px;
     flex: 0 1 auto;
-    height: var(--wui-control-height-lg);
+    height: var(--wui-control-lg);
     // Colour model matches AppInput exactly: muted resting fill + soft border, same
     // field radius. State rules below mirror AppInput's hover/focus/invalid/disabled.
     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);
     font-size: 18px;
     font-weight: 600;
@@ -1858,7 +1858,7 @@ wui-otp {
 // surface fill + soft brand border, no ring.
 .otp-slot.active {
     background: var(--color-surface);
-    border-color: var(--color-focus-border);
+    border-color: var(--color-field-border-focus);
     box-shadow: none;
 }
 .otp-field:disabled ~ .otp-slots .otp-slot {
@@ -1954,7 +1954,7 @@ wui-otp[aria-invalid="true"] .otp-slot {
     background-color: var(--color-surface);
     border: 3px solid var(--color-primary);
     border-radius: 50%;
-    box-shadow: var(--wui-shadow-thumb);
+    box-shadow: var(--wui-thumb-shadow);
     cursor: pointer;
     // The thumb owns every touch that starts on it. Left at the default, a touch browser
     // reads the first few pixels of a horizontal drag as a pan, cancels the pointer stream
@@ -1967,7 +1967,7 @@ wui-otp[aria-invalid="true"] .otp-slot {
 }
 .slider-thumb:hover:not(:disabled) {
     transform: scale(1.08);
-    box-shadow: var(--wui-shadow-thumb-hover);
+    box-shadow: var(--wui-thumb-shadow-hover);
 }
 .slider-thumb:active:not(:disabled) {
     transform: scale(1.14);

package/scss/wui/_data.scss

@@ -43,9 +43,9 @@
 .empty-state-icon {
     width: 48px;
     height: 48px;
-    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);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -70,7 +70,7 @@
     height: 50px;
     border-radius: 50%;
     background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     margin-bottom: 16px;
 }
 .tbl-empty-title {
@@ -254,7 +254,7 @@
     height: 28px;
     padding: 0;
     border: none;
-    border-radius: var(--radius-sm, 6px);
+    border-radius: var(--wui-radius-sm, 6px);
     background: transparent;
     color: var(--color-text-subtle);
     cursor: pointer;
@@ -271,7 +271,7 @@
     outline-offset: var(--wui-focus-ring-offset);
 }
 .wui-expand-toggle .wui-icon {
-    transition: transform 0.18s var(--wui-ease-out-quart, ease);
+    transition: transform 0.18s var(--wui-ease-out, ease);
 }
 .wui-expand-toggle.is-open .wui-icon {
     transform: rotate(180deg);
@@ -310,7 +310,7 @@
     padding: 0 12px;
     background: var(--wui-table-header-bg, var(--color-bg-muted));
     border-bottom: none;
-    font-family: var(--font-sans);
+    font-family: var(--wui-font-ui);
     font-size: 12px;
     font-weight: 500;
     line-height: 17px;
@@ -323,17 +323,17 @@
 }
 .table-ledger thead th:first-child {
     padding-left: 20px;
-    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
+    border-radius: var(--wui-radius-sm) 0 0 var(--wui-radius-sm);
 }
 .table-ledger thead th:last-child {
     padding-right: 20px;
-    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+    border-radius: 0 var(--wui-radius-sm) var(--wui-radius-sm) 0;
 }
 .table-ledger tbody td {
     height: 54px;
     padding: 12px;
     border-bottom: 0.5px solid var(--color-border);
-    font-family: var(--font-sans);
+    font-family: var(--wui-font-ui);
     font-size: 12px;
     font-weight: 500;
     line-height: 15px;
@@ -503,7 +503,7 @@
     gap: 8px;
     min-height: 40px;
     padding: 4px 8px 4px 16px;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     background: var(--color-primary-soft);
 }
 .wui-table-toolbar-count {
@@ -636,8 +636,8 @@
     padding: 12px;
     background: var(--color-surface);
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-xl);
-    box-shadow: var(--shadow-overlay);
+    border-radius: var(--wui-radius-xl);
+    box-shadow: var(--wui-shadow-popover);
 }
 .wui-filter-more:not([open]) > .wui-filter-more-panel {
     display: none;
@@ -670,7 +670,7 @@
         overflow-y: auto;
         padding: 16px 20px 24px;
         border-width: 1px 0 0;
-        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+        border-radius: var(--wui-radius-xl) var(--wui-radius-xl) 0 0;
     }
     .wui-filter-more[open] > summary::before {
         content: "";
@@ -702,12 +702,12 @@
 .select.tpg-select {
     width: auto;
     min-width: 64px;
-    height: var(--wui-control-height-sm);
-    min-height: var(--wui-control-height-sm);
+    height: var(--wui-control-sm);
+    min-height: var(--wui-control-sm);
     padding: 0 28px 0 12px;
     font-size: 13px;
     font-weight: 600;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     background-position: right 8px center;
     background-size: 14px;
 }
@@ -728,8 +728,8 @@
 .tpg-arrow {
     display: grid;
     place-items: center;
-    width: var(--wui-control-height-sm);
-    height: var(--wui-control-height-sm);
+    width: var(--wui-control-sm);
+    height: var(--wui-control-sm);
     border: none;
     background: transparent;
     color: var(--color-text-muted);
@@ -741,7 +741,7 @@
 }
 .tpg-arrow:hover:not(:disabled) {
     background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .tpg-arrow:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
@@ -758,8 +758,8 @@
 .tpg-page {
     display: grid;
     place-items: center;
-    min-width: var(--wui-control-height-sm);
-    height: var(--wui-control-height-sm);
+    min-width: var(--wui-control-sm);
+    height: var(--wui-control-sm);
     padding: 0 6px;
     border: none;
     background: transparent;
@@ -776,7 +776,7 @@
 }
 .tpg-page:hover:not(.is-active) {
     background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .tpg-page:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
@@ -784,14 +784,14 @@
 }
 .tpg-page.is-active {
     background: var(--color-primary);
-    color: var(--color-primary-text);
+    color: var(--color-on-primary);
     cursor: default;
 }
 .tpg-ellipsis {
     display: grid;
     place-items: center;
     min-width: 24px;
-    height: var(--wui-control-height-sm);
+    height: var(--wui-control-sm);
     color: var(--color-text-subtle);
     font-size: 13px;
     user-select: none;
@@ -799,19 +799,19 @@
 // A finger needs a 44px target: the pager's controls grow to the control height on a phone.
 @media (max-width: 575.98px) {
     .select.tpg-select {
-        height: var(--wui-control-height);
-        min-height: var(--wui-control-height);
+        height: var(--wui-control-md);
+        min-height: var(--wui-control-md);
     }
     .tpg-arrow {
-        width: var(--wui-control-height);
-        height: var(--wui-control-height);
+        width: var(--wui-control-md);
+        height: var(--wui-control-md);
     }
     .tpg-page {
-        min-width: var(--wui-control-height);
-        height: var(--wui-control-height);
+        min-width: var(--wui-control-md);
+        height: var(--wui-control-md);
     }
     .tpg-ellipsis {
-        height: var(--wui-control-height);
+        height: var(--wui-control-md);
     }
 }
 
@@ -1086,7 +1086,7 @@
         margin-bottom: 12px;
         padding: 12px 16px;
         border: 1px solid var(--color-border);
-        border-radius: var(--radius-lg, 12px);
+        border-radius: var(--wui-radius-lg, 12px);
     }
     .table-ledger.wui-table-stack > tbody > tr > td,
     .table-ledger.wui-table-stack > tfoot > tr > td {
@@ -1363,7 +1363,7 @@
 }
 .u-action:hover:not(:disabled) {
     background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .u-action:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
@@ -1382,7 +1382,7 @@
 }
 .u-action.u-action-preview {
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .u-action.u-action-download {
     background: var(--color-success-soft);
@@ -1394,7 +1394,7 @@
 }
 .u-action.u-action-preview:hover:not(:disabled) {
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .u-action.u-action-download:hover:not(:disabled) {
     background: var(--color-success-soft);
@@ -1424,7 +1424,7 @@
     place-items: center;
     font-size: 16px;
     font-weight: 600;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     background: color-mix(in srgb, var(--color-primary) 20%, transparent);
 }
 .u-meta {
@@ -1497,7 +1497,7 @@
 .table th.sortable[aria-sort="ascending"] .sort-icon,
 .table th.sortable[aria-sort="descending"] .sort-icon {
     opacity: 1;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .table th.sortable[aria-sort="descending"] .sort-icon {
     transform: rotate(180deg);
@@ -1667,7 +1667,7 @@ wui-data-table {
     max-width: 100%;
     padding: 4px 8px 4px 4px;
     border: none;
-    border-radius: var(--radius-sm, 6px);
+    border-radius: var(--wui-radius-sm, 6px);
     background: transparent;
     color: inherit;
     font: inherit;

package/scss/wui/_disclosure.scss

@@ -27,7 +27,7 @@
     background: var(--color-surface);
     overflow: hidden;
     transition: border-color 0.15s ease;
-    border-radius: var(--wui-field-radius);
+    border-radius: var(--wui-field-md-radius);
 }
 .faq-item:hover:not(.open) {
     border-color: var(--color-border-strong);
@@ -54,14 +54,14 @@
     transition: color 0.12s ease;
 }
 .faq-q:hover {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .faq-q:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: var(--wui-focus-ring-inset);
 }
 .faq-item.open .faq-q {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 // Chevron rotates to point up when the pane is open.
 .faq-q-icon {
@@ -69,11 +69,11 @@
     display: grid;
     place-items: center;
     color: var(--color-text-subtle);
-    transition: transform 0.2s var(--wui-ease-out-quart);
+    transition: transform 0.2s var(--wui-ease-out);
 }
 .faq-item.open .faq-q-icon {
     transform: rotate(180deg);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 
 // The animating track. `min-height: 0` on the inner element is required — a grid
@@ -82,7 +82,7 @@
 .faq-a-wrap {
     display: grid;
     grid-template-rows: 0fr;
-    transition: grid-template-rows 0.28s var(--wui-ease-out-quart);
+    transition: grid-template-rows 0.28s var(--wui-ease-out);
 }
 .faq-item.open .faq-a-wrap {
     grid-template-rows: 1fr;