@webority/theme 0.86.1 → 0.87.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.86.1",
+  "version": "0.87.0",
   "description": "Webority shared design system — Bootstrap 5.3 SCSS overrides, --wui-* tokens, and shared component CSS. The single source of brand chrome for React portals and Razor sites.",
   "license": "SEE LICENSE IN LICENSE",
   "publishConfig": {

package/scss/_tokens.scss

@@ -44,7 +44,7 @@
     --wui-text-3: #687088;
     /// meaning: Decorative faint ink, not for text a person must read.
     --wui-text-4: #99A1B7;
-    /// meaning: Faintest ink, for decorative marks and the strong border tone.
+    /// meaning: Faintest ink, for decorative marks.
     --wui-text-5: #C4CADA;
 
     // Surfaces
@@ -72,6 +72,8 @@
     --wui-border-light: #EBEDF3;
     /// meaning: Softest border, for inner dividers.
     --wui-border-soft: #F4F6F8;
+    /// meaning: Strong border for emphasised separators, chart axes and unselected control outlines.
+    --wui-border-strong: #C4CADA;
     // The unfilled part of a progress bar / meter. Darker than every surface it can sit on
     // (card, page, muted fill) so the empty track reads as a track, yet light enough that the
     // mid-yellow warning fill still separates from it.
@@ -316,12 +318,47 @@
     // Corner radii (DESIGN.md scale) — portal aliases as --radius-*
     /// meaning: Small step of the corner radius scale.
     --wui-radius-sm: 8px;
-    /// meaning: Default step of the corner radius scale.
-    --wui-radius: 10px;
+    /// meaning: Medium step of the corner radius scale, the default corner.
+    --wui-radius-md: 10px;
     /// meaning: Large step of the corner radius scale.
     --wui-radius-lg: 14px;
     /// meaning: Extra-large step of the corner radius scale.
     --wui-radius-xl: 16px;
+    /// meaning: Fully rounded corner, for pills and round buttons.
+    --wui-radius-pill: 9999px;
+
+    // Spacing scale, shared with the phone library and every Canvas theme.
+    /// meaning: No space.
+    --wui-space-none: 0px;
+    /// meaning: Hairline step of the spacing scale.
+    --wui-space-xxs: 2px;
+    /// meaning: Extra-small step of the spacing scale.
+    --wui-space-xs: 4px;
+    /// meaning: Small step of the spacing scale.
+    --wui-space-sm: 8px;
+    /// meaning: Medium step of the spacing scale.
+    --wui-space-md: 12px;
+    /// meaning: Large step of the spacing scale.
+    --wui-space-lg: 16px;
+    /// meaning: Extra-large step of the spacing scale.
+    --wui-space-xl: 24px;
+    /// meaning: Double extra-large step of the spacing scale.
+    --wui-space-2xl: 32px;
+    /// meaning: Triple extra-large step of the spacing scale.
+    --wui-space-3xl: 48px;
+    /// meaning: Largest step of the spacing scale.
+    --wui-space-4xl: 64px;
+
+    /// meaning: Regular text weight.
+    --wui-fw-normal: 400;
+    /// meaning: Medium text weight.
+    --wui-fw-medium: 500;
+    /// meaning: Semibold text weight, for labels and titles.
+    --wui-fw-semibold: 600;
+    /// meaning: Bold text weight.
+    --wui-fw-bold: 700;
+    /// meaning: Tight line height, for headings and single-line labels.
+    --wui-lh-tight: 1.2;
 
     // Field (input/select/datepicker/…) radius — a flat 8px corner across every
     // size, for a crisp plain-rounded field (no squircle). Change here to restyle
@@ -478,6 +515,8 @@
     --wui-fs-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
     /// meaning: Small step of the fluid type scale; a product opts in per element.
     --wui-fs-sm: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
+    /// meaning: Step between the small and body sizes of the fluid type scale; a product opts in per element.
+    --wui-fs-smb: clamp(0.875rem, 0.8rem + 0.2vw, 0.9375rem);
     /// meaning: Body-size step of the fluid type scale, close to Bootstrap's 1rem.
     --wui-fs-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
     /// meaning: Large step of the fluid type scale; a product opts in per element.
@@ -488,12 +527,20 @@
     --wui-fs-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
     /// meaning: Triple extra-large step of the fluid type scale; a product opts in per element.
     --wui-fs-3xl: clamp(1.875rem, 1.5rem + 1.75vw, 2.75rem);
+    /// meaning: Step between the triple and fourth extra-large sizes of the fluid type scale; a product opts in per element.
+    --wui-fs-48: clamp(2.5rem, 2.2rem + 1.5vw, 3rem);
     /// meaning: Fourth extra-large step of the fluid type scale; a product opts in per element.
     --wui-fs-4xl: clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem);
     /// meaning: Fifth extra-large step of the fluid type scale; a product opts in per element.
     --wui-fs-5xl: clamp(2.75rem, 1.9rem + 3.75vw, 4.5rem);
+    /// meaning: Step between the fifth and sixth extra-large sizes of the fluid type scale; a product opts in per element.
+    --wui-fs-64: clamp(3rem, 2.6rem + 2.5vw, 4rem);
     /// meaning: Sixth extra-large step of the fluid type scale; a product opts in per element.
     --wui-fs-6xl: clamp(3.5rem, 2.2rem + 5.5vw, 6rem);
+    /// meaning: First display step above the fluid type scale, 64px on a phone to 120px on a desktop.
+    --wui-fs-7xl: clamp(4rem, 2.7rem + 5.33vw, 7.5rem);
+    /// meaning: Largest display step of the fluid type scale, 72px on a phone to 144px on a desktop.
+    --wui-fs-8xl: clamp(4.5rem, 2.83rem + 6.86vw, 9rem);
 
     // ---- Font stacks ---------------------------------------------------
     // Sans-serif body font (Bootstrap's system stack or product override).
@@ -557,6 +604,21 @@
     --wui-first-day: 1;
 }
 
+// The neutral surfaces follow the dark theme, so a neutral alert or table row stays dark on a dark
+// page. The selectors match the dark theme (manual attribute, and the automatic media query).
+:root[data-theme="dark"],
+:root[data-bs-theme="dark"] {
+    --wui-neutral-bg-light: var(--wui-dark-bg-surface);
+    --wui-neutral-bg-dark: var(--wui-dark-bg-muted);
+}
+
+:root[data-theme="auto"] {
+    @media (prefers-color-scheme: dark) {
+        --wui-neutral-bg-light: var(--wui-dark-bg-surface);
+        --wui-neutral-bg-dark: var(--wui-dark-bg-muted);
+    }
+}
+
 // A finger needs 44px: on a phone-width or touch screen the default control takes the lg rung. The
 // same query sizes the modal and drawer close buttons (wui/_overlays.scss).
 @media (max-width: 575.98px), (pointer: coarse) {

package/scss/_wui-aliases.scss

@@ -25,7 +25,7 @@
   /// meaning: Softest border for inner dividers and list edges.
   --color-border-light: var(--wui-border-soft);
   /// meaning: Stronger border for emphasised separators.
-  --color-border-strong: var(--wui-text-5);
+  --color-border-strong: var(--wui-border-strong);
   // The resting and hover border of an input-like control.
   // Decorative card and table borders stay on --color-border.
   /// meaning: Resting border of an input-like control such as a field or select.
@@ -251,7 +251,7 @@
 
   // Corner radii
   --radius-sm: var(--wui-radius-sm);
-  --radius: var(--wui-radius);
+  --radius: var(--wui-radius-md);
   --radius-lg: var(--wui-radius-lg);
   --radius-xl: var(--wui-radius-xl);
 }

package/scss/wui/_choice.scss

@@ -319,6 +319,13 @@
     font-size: 16px;
     border-radius: var(--wui-field-radius-lg);
 }
+// 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);
+}
 // 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.
 .search-select-sm .search-select-multi,

package/scss/wui/_code-block.scss

@@ -10,7 +10,7 @@
     display: block;
     min-width: 0;
     border: 1px solid var(--color-border);
-    border-radius: var(--wui-radius);
+    border-radius: var(--wui-radius-md);
     background: var(--color-bg-subtle);
     color: var(--color-text);
     font-family: var(--bs-font-monospace);

package/scss/wui/_controls.scss

@@ -423,6 +423,15 @@
     font-size: 16px;
     border-radius: var(--wui-field-radius-lg);
 }
+// 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
+// rule of its own: it centres on the field's box, so it stays inside at 52px.
+.wui-input-xl {
+    height: 52px;
+    padding: 9px 16px;
+    font-size: 16px;
+    border-radius: var(--wui-field-radius-lg);
+}
 .textarea,
 textarea.form-control {
     height: auto;
@@ -850,7 +859,8 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     --wui-input-icon-size: 14px;
     --wui-input-icon-gap: 10px;
 }
-.input-icon:has(> .input-lg) {
+.input-icon:has(> .input-lg),
+.input-icon:has(> .wui-input-xl) {
     --wui-input-icon-slot: 48px;
     --wui-input-icon-size: 18px;
     --wui-input-icon-gap: 14px;
@@ -1318,6 +1328,17 @@ wui-select[compact] {
     }
 }
 
+// Under 16px, iOS Safari zooms the whole page when a text field takes focus. On the same screens
+// that raise the control to 44px, every text-entry element gets a 16px floor. Component rules set
+// their own sizes at higher specificity, so the floor needs !important to hold for all of them.
+@media (max-width: 575.98px), (pointer: coarse) {
+    input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"], [type="file"], [type="color"], [type="image"], [type="hidden"]),
+    textarea,
+    select {
+        font-size: 16px !important;
+    }
+}
+
 // red border around a non-input group (e.g. a structure-form card row)
 .group-invalid {
     border: 1px solid var(--color-danger);
@@ -1372,6 +1393,9 @@ wui-select[compact] {
 .input-with-unit .num-input.input-lg {
     height: calc(var(--wui-control-height-lg) - 2px);
 }
+.input-with-unit .num-input.wui-input-xl {
+    height: calc(52px - 2px);
+}
 .input-with-unit .num-input:focus {
     box-shadow: none;
 }

package/scss/wui/_hover-card.scss

@@ -25,7 +25,7 @@ wui-hover-card {
     overflow: auto;
     padding: 12px 14px;
     border: 1px solid var(--color-border);
-    border-radius: var(--wui-radius);
+    border-radius: var(--wui-radius-md);
     background: var(--color-surface);
     color: var(--color-text);
     box-shadow: var(--wui-shadow-overlay);

package/scss/wui/_interaction.scss

@@ -11,7 +11,7 @@
 // ---- Default ring -----------------------------------------------------------
 // Anything focusable that no partial styles gets the shared ring instead of the browser's.
 // Zero specificity, so every component rule (including a panel's deliberate `outline: none`)
-// still wins. Text fields are not in this list; the Text fields block below rings them.
+// still wins. Text fields are not in this list; their focus border marks them.
 :where(
     a[href],
     area[href],
@@ -83,30 +83,8 @@
 }
 
 // ---- Text fields --------------------------------------------------------------
-// A text field keeps its soft focus border and also draws the shared ring. Browsers match
-// :focus-visible on a text field after a pointer click too, so the ring shows whenever the caret is
-// in the field. A field drawn inside a shell (phone, unit, stepper, input group, one-time code) rings
-// the shell and the bare input inside it draws nothing; so does the borderless .input-bare, which
-// sits inside another control's chrome.
-:is(.form-control, .form-select, .input, .select, .textarea):not(.input-bare):focus-visible {
-    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
-    outline-offset: var(--wui-focus-ring-offset);
-}
-.app-phone-number-input .phone-input-wrap:has(> .input:focus-visible),
-.input-with-unit:has(.num-input:focus-visible),
-.num-wrap:has(.num-input:focus-visible),
-.wui-input-group:has(> :is(.form-control, .input):focus-visible),
-.otp:has(.otp-field:focus-visible) .otp-slot.active {
-    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
-    outline-offset: var(--wui-focus-ring-offset);
-}
-// After the ring rule: these tie with it on specificity, so source order decides.
-.app-phone-number-input .phone-input-wrap > .input:focus-visible,
-.input-with-unit .num-input:focus-visible,
-.num-wrap .num-input:focus-visible,
-.wui-input-group > :is(.form-control, .input):focus-visible {
-    outline: none;
-}
+// A text field (and a shell around one: phone, unit, stepper, input group, one-time code) draws no
+// outer ring. Its soft focus border in _controls.scss is the focus cue.
 
 // ---- Not obscured (WCAG 2.4.11) ---------------------------------------------
 // A control focused by Tab scrolls clear of the sticky shell topbar (72px) and a sticky form

package/scss/wui/_kanban.scss

@@ -183,7 +183,7 @@
     height: 32px;
     padding: 0;
     border: 0;
-    border-radius: var(--wui-radius);
+    border-radius: var(--wui-radius-md);
     background: transparent;
     color: var(--color-text-muted);
     cursor: pointer;
@@ -240,7 +240,7 @@
     margin: 0 8px 8px;
     padding: 16px 8px;
     border: 1px dashed var(--color-border);
-    border-radius: var(--wui-radius);
+    border-radius: var(--wui-radius-md);
     color: var(--color-text-muted);
     font-size: 0.8125rem;
     text-align: center;
@@ -251,7 +251,7 @@
     padding: 12px;
     background: var(--color-surface);
     border: 1px solid var(--color-border);
-    border-radius: var(--wui-radius);
+    border-radius: var(--wui-radius-md);
     color: var(--color-text);
     cursor: grab;
     touch-action: manipulation;
@@ -299,7 +299,7 @@
     margin: 0 8px 8px;
     padding: 6px 10px;
     border: 0;
-    border-radius: var(--wui-radius);
+    border-radius: var(--wui-radius-md);
     background: transparent;
     color: var(--color-text-muted);
     font-size: 0.8125rem;
@@ -347,7 +347,7 @@
     position: absolute;
     inset: auto 0 0;
     height: 3px;
-    border-radius: 0 0 var(--wui-radius) var(--wui-radius);
+    border-radius: 0 0 var(--wui-radius-md) var(--wui-radius-md);
     background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
     background-size: 200% 100%;
     animation: wui-kanban-saving 1.1s linear infinite;
@@ -384,7 +384,7 @@
 .wui-kanban-drop-note {
     margin: 0 8px 8px;
     padding: 8px 10px;
-    border-radius: var(--wui-radius);
+    border-radius: var(--wui-radius-md);
     background: var(--color-surface);
     color: var(--color-text-muted);
     font-size: 0.8125rem;

package/scss/wui/_lightbox.scss

@@ -17,7 +17,7 @@
     aspect-ratio: 4 / 3;
     overflow: hidden;
     border: 1px solid var(--color-border);
-    border-radius: var(--wui-radius);
+    border-radius: var(--wui-radius-md);
     background: var(--color-bg-muted);
     cursor: zoom-in;
     img {

package/scss/wui/_navigation-menu.scss

@@ -145,7 +145,7 @@ wui-navigation-menu {
         max-width: min(36rem, calc(100vw - 16px));
         padding: 8px;
         border: 1px solid var(--color-border);
-        border-radius: var(--wui-radius);
+        border-radius: var(--wui-radius-md);
         corner-shape: squircle;
         background: var(--color-surface);
         box-shadow: var(--wui-shadow-overlay);

package/scss/wui/_onboarding-checklist.scss

@@ -19,7 +19,7 @@
 .wui-onboarding-card {
     padding: 12px 16px 8px;
     border: 1px solid var(--color-border);
-    border-radius: var(--wui-radius);
+    border-radius: var(--wui-radius-md);
     corner-shape: squircle;
     background: var(--color-surface);
     color: var(--color-text);

package/scss/wui/_rich-text.scss

@@ -91,7 +91,7 @@ wui-rich-text[readonly] .wui-rich-text-toolbar {
     height: 32px;
     padding: 0 6px;
     border: 0;
-    border-radius: var(--wui-radius);
+    border-radius: var(--wui-radius-md);
     background: transparent;
     color: var(--color-text-muted);
     font: inherit;
@@ -170,7 +170,7 @@ wui-rich-text[readonly] .wui-rich-text-toolbar {
     height: 32px;
     padding: 0 10px;
     border: 0;
-    border-radius: var(--wui-radius);
+    border-radius: var(--wui-radius-md);
     background: transparent;
     color: var(--color-text-muted);
     font: inherit;
@@ -271,7 +271,7 @@ wui-rich-text[readonly] .wui-rich-text-prose {
 .wui-rich-text-prose pre {
     margin: 0 0 0.75em;
     padding: 10px 12px;
-    border-radius: var(--wui-radius);
+    border-radius: var(--wui-radius-md);
     background: var(--color-bg-muted);
     overflow-x: auto;
 }

package/scss/wui/_shell.scss

@@ -384,7 +384,8 @@
     align-items: center;
     gap: 12px;
     // Comfortable row: 44px, which with the 2px group gap is a 46px pitch. Compact sets its own below.
-    min-height: var(--wui-control-height-lg);
+    // 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));
     padding: 9px 14px;
     border-radius: var(--radius-xl);
     corner-shape: squircle;
@@ -400,11 +401,11 @@
 }
 // Compact: 40px rows, a 42px pitch. The touch floor holds on a coarse pointer whatever the density.
 .app-shell[data-density="compact"] .app-nav-item:not(.app-nav-subitem) {
-    min-height: 40px;
+    min-height: var(--wui-nav-item-height, 40px);
 }
 @media (pointer: coarse) {
     .app-shell[data-density="compact"] .app-nav-item:not(.app-nav-subitem) {
-        min-height: var(--wui-control-height-lg);
+        min-height: var(--wui-nav-item-height, var(--wui-control-height-lg));
     }
 }
 .app-nav-item:hover {
@@ -840,7 +841,7 @@
     clip-path: inset(50%);
     white-space: nowrap;
     padding: 8px 12px;
-    border-radius: var(--wui-radius);
+    border-radius: var(--wui-radius-md);
     background: var(--color-surface);
     color: var(--color-text);
 }

package/scss/wui/_shortcuts.scss

@@ -82,7 +82,7 @@
     z-index: var(--wui-z-dropdown, 1000);
     width: min(320px, calc(100vw - 32px));
     border: 1px solid var(--color-border);
-    border-radius: var(--wui-radius);
+    border-radius: var(--wui-radius-md);
     corner-shape: squircle;
     background: var(--color-surface);
     color: var(--color-text);

package/scss/wui/_sortable.scss

@@ -24,7 +24,7 @@ wui-sortable[orientation="horizontal"] {
     padding: 6px 12px 6px 6px;
     background: var(--color-surface);
     border: 1px solid var(--color-border);
-    border-radius: var(--wui-radius);
+    border-radius: var(--wui-radius-md);
     corner-shape: squircle;
     color: var(--color-text);
     // Dragging a body text selection is never what a drag on an item means.

package/scss/wui/_split-view.scss

@@ -15,7 +15,7 @@
     height: var(--wui-split-height, min(760px, calc(100dvh - 12rem)));
     min-height: 320px;
     border: 1px solid var(--color-border);
-    border-radius: var(--wui-radius);
+    border-radius: var(--wui-radius-md);
     corner-shape: squircle;
     background: var(--color-surface);
     color: var(--color-text);

package/scss/wui/_toolbar.scss

@@ -26,7 +26,7 @@
     align-items: center;
     height: 36px;
     padding-inline: 9px;
-    border-radius: var(--wui-radius);
+    border-radius: var(--wui-radius-md);
     color: var(--color-text-muted);
     cursor: pointer;
     margin-bottom: 0;
@@ -108,7 +108,7 @@
     height: 36px;
     padding: 0;
     border: none;
-    border-radius: var(--wui-radius);
+    border-radius: var(--wui-radius-md);
     background: transparent;
     color: var(--color-text-muted);
     cursor: pointer;

package/scss/wui/_utilities.scss

@@ -819,6 +819,16 @@
     // AA-safe text colour for the heading and an accented <strong>.
     --alert-text: var(--color-danger-text-on-soft);
 }
+// Neutral (`variant="neutral"`): a plain notice with no semantic colour. It sits on the neutral surface
+// pair, its body and heading take the same ink as the status variants, and its edge is the muted text
+// colour, so nothing in it reads as a status.
+.alert-neutral {
+    --bs-alert-bg: var(--wui-neutral-bg-light);
+    --bs-alert-border-color: var(--wui-neutral-bg-dark);
+    --bs-alert-color: var(--color-text-body);
+    --alert-accent: var(--color-text-muted);
+    --alert-text: var(--color-text-body);
+}
 
 // AppErrorSummary: a danger alert holding a heading and one link per field error. It takes
 // focus when it appears, so its focus ring is the alert's own edge rather than an outline.
@@ -1001,6 +1011,9 @@
 .alert-danger .alert-heading {
     color: var(--alert-text);
 }
+.alert-neutral .alert-heading {
+    color: var(--alert-text);
+}
 
 // Heading and body type step with the size: sm 13px / 11px, md 14px / 12px (the base above),
 // lg 16px / 14px. Declared after the base heading rule so these override it.

package/token-meanings.json

@@ -85,6 +85,7 @@
     "--wui-bg-page": "Page background behind every surface in light mode.",
     "--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-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.",
@@ -180,14 +181,23 @@
     "--wui-font-mono": "Monospace typeface for code, identifiers and figures that must line up.",
     "--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.",
+    "--wui-fw-medium": "Medium text weight.",
+    "--wui-fw-normal": "Regular text weight.",
+    "--wui-fw-semibold": "Semibold text weight, for labels and titles.",
     "--wui-hero-gradient": "Background gradient of the hero band on marketing pages.",
     "--wui-info": "Vivid info fill for badges, dots and info buttons.",
     "--wui-info-10": "Info tint 10, the soft background of info alerts and badges.",
@@ -198,6 +208,7 @@
     "--wui-info-active": "Info ink for icons and active states on light surfaces.",
     "--wui-info-text": "Info colour as text on light surfaces.",
     "--wui-ink": "Pure black ink, the highest-contrast text colour.",
+    "--wui-lh-tight": "Tight line height, for headings and single-line labels.",
     "--wui-neutral-bg-dark": "Muted background of table emphasis rows and mega-menu hover.",
     "--wui-neutral-bg-light": "Faint background for table emphasis and mega-menu hover.",
     "--wui-neutral-border-dark": "Border tone of table emphasis rows and dividers.",
@@ -216,8 +227,9 @@
     "--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.",
-    "--wui-radius": "Default step of the corner radius scale.",
     "--wui-radius-lg": "Large step of the corner radius scale.",
+    "--wui-radius-md": "Medium step of the corner radius scale, the default corner.",
+    "--wui-radius-pill": "Fully rounded corner, for pills and round buttons.",
     "--wui-radius-sm": "Small step of the corner radius scale.",
     "--wui-radius-xl": "Extra-large step of the corner radius scale.",
     "--wui-scrollbar": "Resting thumb colour of a thin scrollbar.",
@@ -230,6 +242,16 @@
     "--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-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.",
+    "--wui-space-lg": "Large step of the spacing scale.",
+    "--wui-space-md": "Medium step of the spacing scale.",
+    "--wui-space-none": "No space.",
+    "--wui-space-sm": "Small step of the spacing scale.",
+    "--wui-space-xl": "Extra-large step of the spacing scale.",
+    "--wui-space-xs": "Extra-small step of the spacing scale.",
+    "--wui-space-xxs": "Hairline step of the spacing scale.",
     "--wui-success": "Vivid success fill for badges, dots and success buttons.",
     "--wui-success-10": "Success tint 10, the soft background of success alerts and badges.",
     "--wui-success-20": "Success tint 20 for soft fills behind success alerts and badges.",
@@ -248,7 +270,7 @@
     "--wui-text-2": "Secondary text for descriptions, sub-labels and muted copy.",
     "--wui-text-3": "Tertiary text for hints, captions, labels, timestamps and placeholders.",
     "--wui-text-4": "Decorative faint ink, not for text a person must read.",
-    "--wui-text-5": "Faintest ink, for decorative marks and the strong border tone.",
+    "--wui-text-5": "Faintest ink, for decorative marks.",
     "--wui-text-heading": "Heading ink for page and section titles.",
     "--wui-warning": "Vivid warning fill for badges and dots.",
     "--wui-warning-10": "Warning tint 10, the soft background of warning alerts and badges.",