@webority/theme 0.99.0 → 0.100.0

package/scss/wui/_typography.scss

@@ -157,7 +157,7 @@
 
 /* Tones — tinted surface + on-tint text; icon/remove inherit the tone colour. */
 .chip.primary {
-    @include wui-tone-pill-colors(primary, var(--color-primary-ink));
+    @include wui-tone-pill-colors(primary, var(--color-primary-text));
 }
 .chip.success {
     @include wui-tone-pill-colors(success);
@@ -226,7 +226,7 @@
 }
 
 // Solid — a filled pill carrying white text (near-black on the light-primary in
-// dark mode, via --color-primary-text). The fills are the deep, white-safe
+// dark mode, via --color-on-primary). The fills are the deep, white-safe
 // tokens: --wui-*-strong / --color-primary are AA with white; info & warning
 // have no ready deep token, so they are mixed toward black until white clears
 // AA (warning-with-white only passes on a dark gold — the vibrant --wui-warning
@@ -239,7 +239,7 @@
 }
 .chip-solid.primary {
     background: var(--color-primary);
-    color: var(--color-primary-text);
+    color: var(--color-on-primary);
     border-color: transparent;
 }
 .chip-solid.success {
@@ -384,7 +384,7 @@ wui-multiselect[collapse-chips] .ms-chips {
     flex-shrink: 0;
     background: var(--color-primary-soft);
     border-color: transparent;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     font-weight: 600;
 }
 .search-select-multi .search-select-caret,
@@ -397,7 +397,7 @@ wui-multiselect[collapse-chips] .ms-chips {
     justify-content: center;
     width: 16px;
     flex: none;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     opacity: 0;
 }
 .search-select-option[aria-selected='true'] .ms-check {
@@ -484,7 +484,7 @@ wui-multiselect[collapse-chips] .ms-chips {
 // control height, so raise it; sm and lg come from the size-specific `.search-select-{sm,lg}
 // .search-select-control` rules.
 wui-taginput .search-select-multi {
-    min-height: var(--wui-control-height);
+    min-height: var(--wui-control-md);
 }
 
 /* ── Choice card: image / custom-template variant ── */

package/scss/wui/_utilities.scss

@@ -91,10 +91,10 @@
     transition: color 0.15s;
 }
 .infotip-btn:hover {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .infotip-btn:focus-visible {
-    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-offset);
 }
@@ -114,8 +114,8 @@
     padding: 12px 14px;
     background: var(--color-surface);
     border: none;
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-overlay);
+    border-radius: var(--wui-radius-lg);
+    box-shadow: var(--wui-shadow-popover);
     text-align: left;
     white-space: normal;
     cursor: default;
@@ -196,10 +196,10 @@
     place-items: center;
     width: 55px;
     height: 55px;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     corner-shape: squircle;
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .page-header.tone-success .page-header-icon {
     background: var(--color-success-soft);
@@ -226,7 +226,7 @@
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     margin-bottom: 3px;
 }
 .page-header.tone-success .page-eyebrow {
@@ -409,7 +409,7 @@
 }
 .topbar-icon-btn:hover {
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .topbar-icon-btn.has-badge::after {
     content: "";
@@ -439,7 +439,7 @@
 .wui-dropdown-trigger: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);
 }
 
 // AppPopover wrapper (React panel styling comes from Bootstrap's .popover; this is only the
@@ -474,7 +474,7 @@
     --bs-popover-header-bg: var(--color-surface);
     // A 14px heading: one step above the 13px body, so the card reads as help, not a dialog.
     --bs-popover-header-font-size: 14px;
-    box-shadow: var(--wui-shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
 }
 .pw-popover .popover-body,
 .infotip-popover .popover-body {
@@ -605,7 +605,7 @@
     color: inherit;
     cursor: pointer;
     opacity: 0.7;
-    border-radius: var(--radius-sm);
+    border-radius: var(--wui-radius-sm);
 }
 .wui-banner-dismiss:hover {
     opacity: 1;
@@ -744,7 +744,7 @@
     overflow: hidden;
     display: block;
     background: var(--color-border-strong);
-    border-radius: var(--radius-sm);
+    border-radius: var(--wui-radius-sm);
 }
 .skeleton::after {
     content: "";
@@ -767,6 +767,14 @@
         animation: none;
     }
 }
+.wui-skeleton-lines {
+    display: flex;
+    flex-direction: column;
+    gap: var(--wui-space-xs);
+}
+.wui-skeleton-lines > .skeleton {
+    height: 1em;
+}
 
 // AppAlert — a soft tinted banner with a filled circular icon badge and a
 // coloured heading line. It reports a state (role="alert"/"status") or, with
@@ -785,11 +793,11 @@
 
 // Per-variant surface: soft tint fill + a -50 border (deep enough to read beside the accent
 // edge); body text stays ink. Every colour comes from a --color-* token that the dark theme
-// remaps (_wui-aliases.scss), so the alert flips with the page in every dark path, the manual
+// remaps (_tokens.generated.scss), so the alert flips with the page in every dark path, the manual
 // data-theme attribute and the auto media query alike, with no per-component dark rules.
 .alert-info {
     --bs-alert-bg: var(--color-info-soft);
-    --bs-alert-border-color: var(--color-info-50);
+    --bs-alert-border-color: var(--color-info-border);
     --bs-alert-color: var(--color-text-body);
     --alert-accent: var(--wui-info-active);
     // AA-safe text colour for the heading and an accented <strong>.
@@ -797,7 +805,7 @@
 }
 .alert-success {
     --bs-alert-bg: var(--color-success-soft);
-    --bs-alert-border-color: var(--color-success-50);
+    --bs-alert-border-color: var(--color-success-border);
     --bs-alert-color: var(--color-text-body);
     --alert-accent: var(--wui-success-active);
     // AA-safe text colour for the heading and an accented <strong>.
@@ -805,7 +813,7 @@
 }
 .alert-warning {
     --bs-alert-bg: var(--color-warning-soft);
-    --bs-alert-border-color: var(--color-warning-50);
+    --bs-alert-border-color: var(--color-warning-border);
     --bs-alert-color: var(--color-text-body);
     --alert-accent: var(--wui-warning-active);
     // AA-safe text colour for the heading and an accented <strong>.
@@ -813,7 +821,7 @@
 }
 .alert-danger {
     --bs-alert-bg: var(--color-danger-soft);
-    --bs-alert-border-color: var(--color-danger-50);
+    --bs-alert-border-color: var(--color-danger-border);
     --bs-alert-color: var(--color-text-body);
     --alert-accent: var(--wui-danger-active);
     // AA-safe text colour for the heading and an accented <strong>.
@@ -1083,7 +1091,7 @@
     height: 32px;
     padding: 0;
     background-image: none;
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     corner-shape: squircle;
     opacity: 1;
     filter: none;
@@ -1129,5 +1137,5 @@
     cursor: help;
 }
 .tip-icon:hover {
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }

package/scss/wui/_whats-new.scss

@@ -58,7 +58,7 @@
     border: 1px solid var(--color-border);
     border-radius: var(--wui-radius-lg);
     background: var(--color-surface);
-    box-shadow: var(--wui-shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
     color: var(--color-text-body);
     // Focus lands on the panel itself after an open; the links carry the visible focus.
     outline: none;
@@ -76,7 +76,7 @@
 .wui-whats-new-title {
     margin: 0;
     padding: 14px 16px 10px;
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--color-border-subtle);
     font-size: 15px;
     font-weight: 600;
 }
@@ -87,7 +87,7 @@
 }
 .wui-whats-new-entry {
     padding: 14px 16px;
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--color-border-subtle);
 }
 .wui-whats-new-entry:last-child {
     border-bottom: 0;
@@ -118,7 +118,7 @@
     max-width: 100%;
     height: auto;
     margin-top: 10px;
-    border: 1px solid var(--color-border-light);
+    border: 1px solid var(--color-border-subtle);
     border-radius: var(--wui-radius-sm);
 }
 .wui-whats-new-link {

package/scss/wui/_workspace.scss

@@ -48,7 +48,7 @@
     outline: calc(var(--wui-focus-ring-width) - 1px) solid var(--color-focus-ring);
     outline-offset: 0;
     background: var(--color-surface);
-    border-color: var(--color-focus-border);
+    border-color: var(--color-field-border-focus);
     box-shadow: none;
 }
 // The shared pressed wash of wui/interaction, restated here so it ships with this on-demand layer.
@@ -58,7 +58,7 @@
     .workspace-switcher-footer-action,
     .workspace-switcher-option
 ):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;
 }
 .workspace-switcher-trigger.is-compact {
     width: 40px;
@@ -96,8 +96,8 @@
     // A round logo chip on a clean white ring — the same avatar look in the trigger and the menu.
     border-radius: 50%;
     background: var(--color-surface);
-    border: 1px solid var(--color-border-light);
-    color: var(--color-primary-ink);
+    border: 1px solid var(--color-border-subtle);
+    color: var(--color-primary-text);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.02em;
@@ -155,10 +155,10 @@
     max-width: 300px;
     padding: 5px;
     background: var(--color-surface);
-    border: 1px solid var(--color-border-light);
-    border-radius: var(--radius-lg);
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--wui-radius-lg);
     corner-shape: squircle;
-    box-shadow: var(--wui-shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
 }
 .workspace-switcher-menu-label {
     padding: 6px 10px 4px;
@@ -175,8 +175,8 @@
     margin: 2px 4px 6px;
     padding: 6px 10px;
     background: var(--color-bg-subtle);
-    border: 1px solid var(--color-border-light);
-    border-radius: var(--radius);
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--wui-radius-md);
     corner-shape: squircle;
     color: var(--color-text-muted);
 }
@@ -215,7 +215,7 @@
     width: 100%;
     padding: 6px 10px;
     border: none;
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     corner-shape: squircle;
     background: transparent;
     color: var(--color-text);
@@ -246,7 +246,7 @@
 .workspace-switcher .workspace-switcher-option.is-active,
 .workspace-switcher .workspace-switcher-option.is-active:hover {
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .workspace-switcher-option-name {
     flex: 1 1 auto;
@@ -279,7 +279,7 @@
     position: relative;
     justify-content: center;
     margin-top: 10px;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     font-weight: 600;
 }
 // Dashed divider above the create row — the list and the "Add …" action read as two zones,
@@ -302,7 +302,7 @@
     padding: 6px;
     border-radius: 50%;
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 
 // ── Footer ──
@@ -321,10 +321,10 @@
     width: 100%;
     padding: 6px 10px;
     border: none;
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-radius-lg);
     corner-shape: squircle;
     background: transparent;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     font-size: 13px;
     font-weight: 600;
     text-align: left;
@@ -333,7 +333,7 @@
 }
 .workspace-switcher .workspace-switcher-footer-action:hover {
     background: var(--color-primary-soft);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 
 // ── Menu size tiers ── the panel scales with the trigger's `size`. Placed AFTER the base Menu

package/scss/wui/tour/_advance.scss

@@ -62,6 +62,6 @@
         border-radius: inherit;
         corner-shape: inherit;
         pointer-events: none;
-        animation: wui-tour-pulse 600ms var(--wui-ease-out-quart) var(--wui-tour-spot-duration);
+        animation: wui-tour-pulse 600ms var(--wui-ease-out) var(--wui-tour-spot-duration);
     }
 }

package/scss/wui/tour/_base.scss

@@ -40,7 +40,7 @@ wui-tour-step {
     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);
     &:focus {
         outline: none;
     }

package/scss/wui/tour/_end.scss

@@ -77,6 +77,6 @@
 // (set inline by tourMotion.js and inherited). Under reduced motion it shows at once.
 @media (prefers-reduced-motion: no-preference) {
     .wui-tour-end-mark path {
-        animation: wui-tour-check 300ms var(--wui-ease-out-quart) calc(var(--wui-tour-card-delay, 0ms) + 120ms) both;
+        animation: wui-tour-check 300ms var(--wui-ease-out) calc(var(--wui-tour-card-delay, 0ms) + 120ms) both;
     }
 }

package/scss/wui/tour/_motion.scss

@@ -14,7 +14,7 @@
 
 :root {
     --wui-tour-motion-duration: 200ms;
-    --wui-tour-motion-ease: var(--wui-ease-out-quart);
+    --wui-tour-motion-ease: var(--wui-ease-out);
     --wui-tour-spot-duration: 240ms;
     --wui-tour-spot-ease: var(--wui-ease-ui);
 }

package/token-meanings.json

@@ -1,63 +1,65 @@
 {
-    "--color-accent": "Accent colour, aliased to the warning ramp.",
-    "--color-accent-soft": "Soft accent background, aliased to the warning soft tint.",
     "--color-bg": "Page background behind the content area.",
     "--color-bg-muted": "Muted background for grouped areas and quiet controls.",
     "--color-bg-subtle": "Subtle raised background for side panels and bands.",
     "--color-border": "Hairline border of cards, tables and dividers.",
-    "--color-border-light": "Softest border for inner dividers and list edges.",
     "--color-border-strong": "Stronger border for emphasised separators.",
-    "--color-close-filter": "Filter applied to a dark-ink close glyph such as the alert close button.",
+    "--color-border-subtle": "Softest border for inner dividers and list edges.",
+    "--color-chart-1": "Colour of chart series 1, the brand primary.",
+    "--color-chart-2": "Colour of chart series 2 of the eight categorical series.",
+    "--color-chart-3": "Colour of chart series 3 of the eight categorical series.",
+    "--color-chart-4": "Colour of chart series 4 of the eight categorical series.",
+    "--color-chart-5": "Colour of chart series 5 of the eight categorical series.",
+    "--color-chart-6": "Colour of chart series 6 of the eight categorical series.",
+    "--color-chart-7": "Colour of chart series 7 of the eight categorical series.",
+    "--color-chart-8": "Colour of chart series 8 of the eight categorical series.",
+    "--color-chart-axis": "Axis line colour of charts.",
+    "--color-chart-diverging-high": "Colour of values above the midpoint in a diverging chart.",
+    "--color-chart-diverging-low": "Colour of values below the midpoint in a diverging chart.",
+    "--color-chart-diverging-mid": "Neutral midpoint colour of a diverging chart.",
+    "--color-chart-grid": "Gridline colour of charts.",
+    "--color-chart-label": "Tick and legend text colour of charts.",
+    "--color-chart-neutral": "Context series colour, such as the last period, and the folded Other slice.",
+    "--color-chart-seq-0": "Faintest step of the magnitude ramp, for empty heatmap and calendar cells.",
+    "--color-chart-seq-1": "First step of the one-hue magnitude ramp for heatmap and calendar cells.",
+    "--color-chart-seq-2": "Second step of the one-hue magnitude ramp for heatmap and calendar cells.",
+    "--color-chart-seq-3": "Third step of the one-hue magnitude ramp for heatmap and calendar cells.",
+    "--color-chart-seq-4": "Fourth step of the one-hue magnitude ramp for heatmap and calendar cells.",
+    "--color-chart-seq-5": "Fifth step of the one-hue magnitude ramp for heatmap and calendar cells.",
+    "--color-chart-seq-6": "Strongest step of the one-hue magnitude ramp for heatmap and calendar cells.",
     "--color-danger": "Vivid danger fill for badges, dots and danger buttons.",
-    "--color-danger-10": "Soft background of danger alerts and badges.",
-    "--color-danger-20": "Danger tint behind danger alerts and badges.",
-    "--color-danger-30": "Danger tint for soft fills and borders of alerts and badges.",
-    "--color-danger-5": "Faintest danger wash for hover and soft backgrounds.",
-    "--color-danger-50": "Danger border tone and the strongest soft danger fill.",
-    "--color-danger-active": "Danger ink for icons and active states.",
-    "--color-danger-soft": "Soft danger background for alerts.",
+    "--color-danger-border": "Tinted danger border of alerts and badges.",
+    "--color-danger-pressed": "Danger fill while a control is pressed.",
+    "--color-danger-soft": "Soft danger background of alerts and badges.",
     "--color-danger-strong": "Deep danger fill behind white text, such as the danger button.",
     "--color-danger-text": "Danger colour as text on light surfaces, such as validation messages.",
     "--color-danger-text-on-soft": "Danger text on a soft danger tint, such as an alert heading.",
     "--color-field-bg": "Resting fill of input-like controls such as fields and selects.",
     "--color-field-border": "Resting border of an input-like control such as a field or select.",
+    "--color-field-border-focus": "Border of a focused, open or active control such as an input or select.",
     "--color-field-border-hover": "Hover border of an input-like control.",
-    "--color-focus-border": "Border of a focused, open or active control such as an input or select.",
     "--color-focus-ring": "Colour of the keyboard focus ring drawn on focus-visible controls.",
     "--color-info": "Vivid info fill for badges and dots.",
-    "--color-info-10": "Soft background of info alerts and badges.",
-    "--color-info-20": "Info tint behind info alerts and badges.",
-    "--color-info-30": "Info tint for soft fills and borders of alerts and badges.",
-    "--color-info-5": "Faintest info wash for hover and soft backgrounds.",
-    "--color-info-50": "Info border tone and the strongest soft info fill.",
-    "--color-info-active": "Info ink for icons and active states.",
-    "--color-info-soft": "Soft info background for alerts.",
+    "--color-info-border": "Tinted info border of alerts and badges.",
+    "--color-info-pressed": "Info fill while a control is pressed.",
+    "--color-info-soft": "Soft info background of alerts and badges.",
     "--color-info-strong": "Deepest info fill, used where a strong info fill is needed.",
     "--color-info-text": "Info colour as text on light surfaces.",
     "--color-info-text-on-soft": "Info text on a soft info tint, such as an alert heading.",
-    "--color-on-primary-ink": "Ink on the primary ink used as a solid fill, such as the active step badge.",
+    "--color-on-primary": "Text and icon colour on a solid primary fill.",
     "--color-on-scrim": "Ink on a scrim, such as the text of an overlay.",
-    "--color-on-status-fill": "Icon ink on a solid status fill, such as a filled timeline dot.",
-    "--color-on-status-strong": "Ink on a deep status fill used as a surface, such as a status badge.",
-    "--color-pressed-overlay": "Translucent wash laid over a control while it is pressed.",
     "--color-primary": "Primary fill for buttons, selected states and borders.",
     "--color-primary-hover": "Primary fill while a control is hovered or pressed.",
-    "--color-primary-hover-text": "Label on the hovered or pressed primary fill.",
-    "--color-primary-ink": "Primary as text and small glyphs on light surfaces, passing AA contrast.",
     "--color-primary-soft": "Soft primary tint behind selected and highlighted rows.",
-    "--color-primary-text": "Text and icon colour on a solid primary fill.",
+    "--color-primary-text": "Primary as text and small glyphs on a page, passing AA contrast.",
     "--color-progress-label": "Label text inside a progress bar fill.",
     "--color-progress-track": "Unfilled track of a progress bar.",
     "--color-scrim": "Dim behind page-level backdrops such as drawers, modals and the shell.",
     "--color-scrim-strong": "Stronger dim behind media overlays that carry white ink.",
     "--color-success": "Vivid success fill for badges and dots.",
-    "--color-success-10": "Soft background of success alerts and badges.",
-    "--color-success-20": "Success tint behind success alerts and badges.",
-    "--color-success-30": "Success tint for soft fills and borders of alerts and badges.",
-    "--color-success-5": "Faintest success wash for hover and soft backgrounds.",
-    "--color-success-50": "Success border tone and the strongest soft success fill.",
-    "--color-success-active": "Success ink for icons and active states.",
-    "--color-success-soft": "Soft success background for alerts.",
+    "--color-success-border": "Tinted success border of alerts and badges.",
+    "--color-success-pressed": "Success fill while a control is pressed.",
+    "--color-success-soft": "Soft success background of alerts and badges.",
     "--color-success-strong": "Deep success fill behind white text, such as progress labels.",
     "--color-success-text": "Success colour as text on light surfaces.",
     "--color-success-text-on-soft": "Success text on a soft success tint, such as an alert heading.",
@@ -67,14 +69,10 @@
     "--color-text-muted": "Secondary text for descriptions and muted copy.",
     "--color-text-subtle": "Tertiary text for hints, captions, timestamps and placeholders.",
     "--color-thumb": "Raised thumb that marks the selected option of a segmented control.",
-    "--color-warning": "Vivid warning fill for badges and dots.",
-    "--color-warning-10": "Soft background of warning alerts and badges.",
-    "--color-warning-20": "Warning tint behind warning alerts and badges.",
-    "--color-warning-30": "Warning tint for soft fills and borders of alerts and badges.",
-    "--color-warning-5": "Faintest warning wash for hover and soft backgrounds.",
-    "--color-warning-50": "Warning border tone and the strongest soft warning fill.",
-    "--color-warning-active": "Warning ink for icons and active states.",
-    "--color-warning-soft": "Soft warning background for alerts.",
+    "--color-warning": "Vivid warning fill for badges, dots and warning buttons.",
+    "--color-warning-border": "Tinted warning border of alerts and badges.",
+    "--color-warning-pressed": "Warning fill while a control is pressed.",
+    "--color-warning-soft": "Soft warning background of alerts and badges.",
     "--color-warning-strong": "Deepest warning fill, used where a strong warning fill is needed.",
     "--color-warning-text": "Warning colour as text on light surfaces.",
     "--color-warning-text-on-soft": "Warning text on a soft warning tint, such as an alert heading.",
@@ -86,6 +84,8 @@
     "--wui-border-light": "Default hairline border of cards, tables and dividers.",
     "--wui-border-soft": "Softest border, for inner dividers.",
     "--wui-border-strong": "Strong border for emphasised separators, chart axes and unselected control outlines.",
+    "--wui-card-shadow-lifted": "Shadow of a lifted card, none in this theme.",
+    "--wui-card-shadow-lifted-hover": "Shadow of a lifted card while it is hovered, none in this theme.",
     "--wui-chart-1": "Colour of chart series 1, the brand primary.",
     "--wui-chart-2": "Colour of chart series 2 of the eight categorical series.",
     "--wui-chart-3": "Colour of chart series 3 of the eight categorical series.",
@@ -94,12 +94,9 @@
     "--wui-chart-6": "Colour of chart series 6 of the eight categorical series.",
     "--wui-chart-7": "Colour of chart series 7 of the eight categorical series.",
     "--wui-chart-8": "Colour of chart series 8 of the eight categorical series.",
-    "--wui-chart-axis": "Axis line colour of charts.",
     "--wui-chart-diverging-high": "Colour of values above the midpoint in a diverging chart.",
     "--wui-chart-diverging-low": "Colour of values below the midpoint in a diverging chart.",
     "--wui-chart-diverging-mid": "Neutral midpoint colour of a diverging chart.",
-    "--wui-chart-grid": "Gridline colour of charts.",
-    "--wui-chart-label": "Tick and legend text colour of charts.",
     "--wui-chart-neutral": "Context series colour, such as the last period, and the folded Other slice.",
     "--wui-chart-seq-0": "Faintest step of the magnitude ramp, for empty heatmap and calendar cells.",
     "--wui-chart-seq-1": "First step of the one-hue magnitude ramp for heatmap and calendar cells.",
@@ -108,11 +105,12 @@
     "--wui-chart-seq-4": "Fourth step of the one-hue magnitude ramp for heatmap and calendar cells.",
     "--wui-chart-seq-5": "Fifth step of the one-hue magnitude ramp for heatmap and calendar cells.",
     "--wui-chart-seq-6": "Strongest step of the one-hue magnitude ramp for heatmap and calendar cells.",
+    "--wui-close-filter": "Filter applied to a dark-ink close glyph such as the alert close button.",
     "--wui-container-max": "Maximum width of the page container on every surface.",
     "--wui-container-pad": "Side padding of the page container, growing on wider viewports.",
-    "--wui-control-height": "Default height of a button, field, select or tab; larger on phones.",
-    "--wui-control-height-lg": "Height of the large control size, for prominent buttons and fields.",
-    "--wui-control-height-sm": "Height of the small control size, for dense toolbars and chips.",
+    "--wui-control-lg": "Height of the large control size, for prominent buttons and fields.",
+    "--wui-control-md": "Default height of a button, field, select or tab; larger on phones.",
+    "--wui-control-sm": "Height of the small control size, for dense toolbars and chips.",
     "--wui-cta-gradient": "Background gradient of the call-to-action band on marketing pages.",
     "--wui-danger": "Vivid danger fill for badges, dots and danger buttons.",
     "--wui-danger-10": "Danger tint 10, the soft background of danger alerts and badges.",
@@ -153,14 +151,12 @@
     "--wui-dark-primary": "Primary as text, rings, focus borders and the fill under dark ink in dark mode.",
     "--wui-dark-primary-hover": "Primary fill while it is hovered in dark mode.",
     "--wui-dark-progress-track": "Unfilled track of a progress bar or meter in dark mode.",
-    "--wui-dark-shadow-thumb": "Slider thumb shadow in dark mode, drawn with light ink.",
-    "--wui-dark-shadow-thumb-hover": "Slider thumb shadow while it is hovered in dark mode.",
     "--wui-dark-text": "Primary body text colour in dark mode.",
     "--wui-dark-text-muted": "Secondary text colour in dark mode.",
     "--wui-dark-text-subtle": "Tertiary text colour in dark mode, for hints and captions.",
     "--wui-disabled-opacity": "Opacity of a control that dims as a whole when disabled.",
     "--wui-ease-elastic": "Overshooting easing for the tab ink bar's spring into place.",
-    "--wui-ease-out-quart": "Easing curve matching the locked design's motion exports.",
+    "--wui-ease-out": "Easing curve matching the locked design's motion exports.",
     "--wui-ease-ui": "Easing curve for interface transitions.",
     "--wui-fg-2": "Marketing alias of the primary body text ink.",
     "--wui-fg-3": "Marketing alias of the secondary text ink.",
@@ -169,29 +165,26 @@
     "--wui-field-bg": "Resting fill of every input-like control, such as fields, selects and textareas.",
     "--wui-field-border": "Resting border of every input-like control.",
     "--wui-field-border-hover": "Hover border of every input-like control.",
-    "--wui-field-radius": "Corner radius of every input-like control.",
-    "--wui-field-radius-lg": "Corner radius of a large input-like control.",
-    "--wui-field-radius-sm": "Corner radius of a small input-like control.",
+    "--wui-field-lg-radius": "Corner radius of a large input-like control.",
+    "--wui-field-md-radius": "Corner radius of every input-like control.",
+    "--wui-field-sm-radius": "Corner radius of a small input-like control.",
     "--wui-first-day": "Weekday calendars start their week on, from 0 for Sunday to 6 for Saturday.",
     "--wui-focus-ring-inset": "Offset that draws the focus ring inside a scrolling container.",
     "--wui-focus-ring-offset": "Gap between a control and its keyboard focus ring.",
     "--wui-focus-ring-width": "Width of the keyboard focus ring.",
-    "--wui-font-body": "Body typeface for running text and controls.",
     "--wui-font-display": "Display typeface for headings marked as display text.",
     "--wui-font-mono": "Monospace typeface for code, identifiers and figures that must line up.",
+    "--wui-font-ui": "Body typeface for running text and controls.",
     "--wui-fs-2xl": "Double extra-large step of the fluid type scale; a product opts in per element.",
     "--wui-fs-3xl": "Triple extra-large step of the fluid type scale; a product opts in per element.",
-    "--wui-fs-48": "Step between the triple and fourth extra-large sizes of the fluid type scale; a product opts in per element.",
     "--wui-fs-4xl": "Fourth extra-large step of the fluid type scale; a product opts in per element.",
     "--wui-fs-5xl": "Fifth extra-large step of the fluid type scale; a product opts in per element.",
-    "--wui-fs-64": "Step between the fifth and sixth extra-large sizes of the fluid type scale; a product opts in per element.",
     "--wui-fs-6xl": "Sixth extra-large step of the fluid type scale; a product opts in per element.",
     "--wui-fs-7xl": "First display step above the fluid type scale, 64px on a phone to 120px on a desktop.",
     "--wui-fs-8xl": "Largest display step of the fluid type scale, 72px on a phone to 144px on a desktop.",
     "--wui-fs-base": "Body-size step of the fluid type scale, close to Bootstrap's 1rem.",
     "--wui-fs-lg": "Large step of the fluid type scale; a product opts in per element.",
     "--wui-fs-sm": "Small step of the fluid type scale; a product opts in per element.",
-    "--wui-fs-smb": "Step between the small and body sizes of the fluid type scale; a product opts in per element.",
     "--wui-fs-xl": "Extra-large step of the fluid type scale; a product opts in per element.",
     "--wui-fs-xs": "Extra-small step of the fluid type scale; a product opts in per element.",
     "--wui-fw-bold": "Bold text weight.",
@@ -217,6 +210,7 @@
     "--wui-neutral-border-light": "Faintest border tone, for dividers.",
     "--wui-press-duration": "Duration of the pressed feedback on a control.",
     "--wui-press-scale": "Scale a control shrinks to while it is pressed.",
+    "--wui-pressed-overlay": "Translucent wash laid over a control while it is pressed.",
     "--wui-primary": "Brand primary fill for primary buttons, selected states and the first chart series.",
     "--wui-primary-10": "Pale soft primary fill or border tint that follows dark mode.",
     "--wui-primary-15": "Lighter soft primary fill or border tint that follows dark mode.",
@@ -225,7 +219,7 @@
     "--wui-primary-5": "Faintest soft primary fill or border tint that follows dark mode.",
     "--wui-primary-50": "Strongest soft primary fill or border tint that follows dark mode.",
     "--wui-primary-hover": "Primary fill while a control is hovered.",
-    "--wui-primary-ink": "Primary as text and small glyphs on light surfaces, passing AA contrast.",
+    "--wui-primary-ink": "Primary as text and small glyphs on light surfaces.",
     "--wui-primary-pressed": "Primary fill while a control is pressed or active.",
     "--wui-primary-text": "Text and icon colour on a solid primary fill, such as a primary button label.",
     "--wui-progress-track": "Unfilled track of a progress bar or meter.",
@@ -238,12 +232,8 @@
     "--wui-scrollbar-active": "Scrollbar thumb colour while it is dragged.",
     "--wui-scrollbar-hover": "Scrollbar thumb colour while it is hovered.",
     "--wui-shadow-card": "Shadow under in-page cards, none in this theme so cards stay flat.",
-    "--wui-shadow-card-lifted": "Shadow of a lifted card, none in this theme.",
-    "--wui-shadow-card-lifted-hover": "Shadow of a lifted card while it is hovered, none in this theme.",
-    "--wui-shadow-overlay": "Shadow of floating overlays such as menus and popovers.",
-    "--wui-shadow-overlay-lg": "Larger overlay shadow, for the largest floating surfaces.",
-    "--wui-shadow-thumb": "Shadow under a slider thumb and other small interactive elements.",
-    "--wui-shadow-thumb-hover": "Shadow under a slider thumb while it is hovered.",
+    "--wui-shadow-modal": "Larger overlay shadow, for the largest floating surfaces.",
+    "--wui-shadow-popover": "Shadow of floating overlays such as menus and popovers.",
     "--wui-space-2xl": "Double extra-large step of the spacing scale.",
     "--wui-space-3xl": "Triple extra-large step of the spacing scale.",
     "--wui-space-4xl": "Largest step of the spacing scale.",
@@ -274,6 +264,8 @@
     "--wui-text-4": "Decorative faint ink, not for text a person must read.",
     "--wui-text-5": "Faintest ink, for decorative marks.",
     "--wui-text-heading": "Heading ink for page and section titles.",
+    "--wui-thumb-shadow": "Shadow under a slider thumb and other small interactive elements.",
+    "--wui-thumb-shadow-hover": "Shadow under a slider thumb while it is hovered.",
     "--wui-warning": "Vivid warning fill for badges and dots.",
     "--wui-warning-10": "Warning tint 10, the soft background of warning alerts and badges.",
     "--wui-warning-20": "Warning tint 20 for soft fills behind warning alerts and badges.",