@webority/theme 0.85.1 → 0.86.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.85.1",
+  "version": "0.86.1",
   "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/_components.scss

@@ -100,6 +100,20 @@
     --bs-btn-disabled-border-color: var(--wui-danger-strong);
 }
 
+// White on the vivid amber fails AA (2.3:1), so the warning button uses the deeper
+// --wui-warning-strong (4.7:1), like .btn-danger. Badges and dots keep --wui-warning.
+.btn-warning {
+    --bs-btn-color: #fff;
+    --bs-btn-bg: var(--wui-warning-strong);
+    --bs-btn-border-color: var(--wui-warning-strong);
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: var(--wui-warning-strong-hover);
+    --bs-btn-hover-border-color: var(--wui-warning-strong-hover);
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: var(--wui-warning-strong-hover);
+    --bs-btn-active-border-color: var(--wui-warning-strong-hover);
+}
+
 // Outline variants — tokenized like the solid buttons above so they follow a product's
 // RUNTIME --wui-* brand instead of Bootstrap's compile-time colours. Resting = brand outline
 // on a transparent fill; hover fills with the brand and flips the label to the on-brand text

package/scss/_tokens.scss

@@ -262,9 +262,15 @@
 
     /// meaning: Warning colour as text on light surfaces, darkened to pass AA.
     --wui-warning-text: #876100;
+    // White on the vivid amber is only 2.3:1, so the warning button fills with these deeper
+    // tones instead: #9A6B00 is 4.7:1 under white, the hover deeper still.
+    /// meaning: Deep warning fill behind white text, such as the warning button.
+    --wui-warning-strong: #9A6B00;
+    /// meaning: Deep warning fill while a warning button with white text is hovered.
+    --wui-warning-strong-hover: #855C00;
     /// meaning: Active warning fill, the deepest vivid warning tone.
     --wui-warning-active: #DFA000;
-    /// meaning: Vivid warning fill for badges, dots and warning buttons.
+    /// meaning: Vivid warning fill for badges and dots.
     --wui-warning: #DFA000;
     /// meaning: Warning tint 50 for borders and the strongest soft warning fill.
     --wui-warning-50: #FBD880;
@@ -482,18 +488,26 @@
     --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: 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: 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);
 
     // ---- Font stacks ---------------------------------------------------
     // Sans-serif body font (Bootstrap's system stack or product override).
     --font-sans: var(--bs-body-font-family);
 
-    // ---- Display font slot --------------------------------------------
-    // A dedicated slot for a display/heading typeface, kept separate from
-    // $font-family-base so a product can point ONLY its display headings (.h-display) at a
-    // serif or another brand face by overriding this one token, without touching body copy.
-    // Defaults to Webority Serif ($font-family-display).
+    // ---- Typeface slots -----------------------------------------------
+    // Display (headings, Webority Serif), body (running text and controls) and mono (code, aligned figures)
+    // are the three typefaces Canvas themes and products name; a product repoints one without touching the others.
     /// meaning: Display typeface for headings marked as display text.
     --wui-font-display: #{$font-family-display};
+    /// meaning: Body typeface for running text and controls.
+    --wui-font-body: #{$font-family-sans-serif};
+    /// meaning: Monospace typeface for code, identifiers and figures that must line up.
+    --wui-font-mono: #{$font-family-monospace};
 
     // ---- Z-index scale -------------------------------------------------
     // One page-level ladder. Local stacking inside a component (1, 5, 10, 40…) is

package/scss/wui/_controls.scss

@@ -90,8 +90,10 @@
     flex-wrap: wrap;
     column-gap: 24px;
 }
+// Options in a group read as a list, so the label sits a little further from its radio.
 .wui-radio-group > .form-check {
     margin-bottom: 0;
+    column-gap: 16px;
 }
 // A lone .form-check lets its label shrink to nothing so long consent text can wrap; in a row
 // of options that broke words mid-way ("Mont hly"). Keep each option's words whole and let the
@@ -124,7 +126,7 @@
     position: relative;
     padding: 14px 16px;
     min-height: 56px;
-    border: 1.5px solid var(--color-border);
+    border: 1px solid var(--color-border);
     border-radius: var(--radius);
     background: var(--color-surface);
     transition:
@@ -173,10 +175,16 @@
     border-color: var(--color-danger);
 }
 
+// The group's label gets 10px of its own below it, on top of .field's 10px gap.
+.field:has(> .wui-radio-group) > .label {
+    margin-bottom: 10px;
+}
+
 // Beside-label forms centre a label on a text control; a radio group's first option is shorter,
 // so its label lines up with that row instead.
 .wui-form-labels-start .field:has(> .wui-radio-group) > .label {
     padding-top: 0;
+    margin-bottom: 0;
 }
 
 // Glyph — shared by BS form-check-input and the wui-check alias.
@@ -600,7 +608,7 @@ textarea.form-control.autosize {
     // Must clear AA against the surface: --color-danger-active (#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 4px gap → effective 2px, without
+    // Tighten the space above the message: .field's 10px gap → effective 8px, without
     // touching the label→control gap.
     margin-top: -2px;
 }
@@ -1166,7 +1174,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     // `.field` is align-items:flex-start, so a shrink-wrapped count would sit on the LEFT —
     // text-align alone can't move it. align-self pushes it to the control's right edge.
     align-self: flex-end;
-    // Tighten the space above the count: .field's 4px gap → effective 2px, matching .field-error.
+    // Tighten the space above the count: .field's 10px gap → effective 8px, matching .field-error.
     margin-top: -2px;
     font-size: 12px;
     line-height: normal;
@@ -1215,7 +1223,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 4px;
+    gap: 10px;
     min-width: 0;
 }
 // Inside the flex column it sizes to its content, so it stretches to the field instead.

package/scss/wui/_data.scss

@@ -1326,6 +1326,7 @@
     height: var(--wui-action-size);
     padding: 0;
     border: none;
+    text-decoration: none;
     // No disc at rest: a row of actions reads as quiet icons, and the tint below appears on hover.
     background: transparent;
     border-radius: 999px;

package/scss/wui/_display.scss

@@ -480,6 +480,9 @@ a.info-row:hover .info-value {
     position: relative;
     z-index: 1;
     display: inline-flex;
+    // An option keeps its content width, so a narrow box scrolls or wraps the control instead of
+    // squeezing the selected label past its pill.
+    flex: none;
     align-items: center;
     gap: 5px;
     min-height: var(--segmented-option-h);
@@ -1381,6 +1384,10 @@ a.info-row:hover .info-value {
 .result {
     text-align: center;
     padding: 48px 24px;
+    display: flex;
+    flex-direction: column;
+    // Stretch, not center: a part keeps the card's full width (its text centres itself), so a long title wraps at the card edge as before.
+    align-items: stretch;
     color: var(--color-text-subtle);
 }
 .result-icon {

package/scss/wui/_file-viewer.scss

@@ -305,10 +305,11 @@ wui-file-viewer:fullscreen {
     width: 100%;
     height: 100%;
 }
+// A page that is still loading reads as a blank page in both modes, matching the sheet it sits in.
 .wui-file-viewer-skeleton {
     width: 100%;
     height: 100%;
-    background: var(--color-bg-muted);
+    background: #fff;
 }
 
 // The text layer: transparent text laid over the drawing for selecting, copying and searching.

package/scss/wui/_flow.scss

@@ -1209,7 +1209,7 @@ button.wui-step-tile-body:hover .step-label {
 }
 // Below md, collapse to 1 column.
 @include media-breakpoint-down(md) {
-    .form-row-grid.form-row-grid {
+    .form-row-grid.form-row-grid:not(.wui-form-row-keep) {
         grid-template-columns: 1fr;
     }
 }

package/scss/wui/_rolling-number.scss

@@ -12,7 +12,8 @@ $wui-roll-cell: 1.2em;
     position: relative;
     display: inline-block;
     vertical-align: bottom;
-    line-height: $wui-roll-cell;
+    // Unitless, so a digit column whose font size differs from the figure's keeps its own cell height.
+    line-height: 1.2;
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
 }
@@ -35,10 +36,12 @@ $wui-roll-cell: 1.2em;
 }
 .wui-rolling-number-char {
     display: inline-block;
+    vertical-align: top;
     height: $wui-roll-cell;
 }
 .wui-rolling-number-digit {
     display: inline-block;
+    vertical-align: top;
     height: $wui-roll-cell;
     overflow: hidden;
 }
@@ -46,12 +49,15 @@ $wui-roll-cell: 1.2em;
     display: flex;
     flex-direction: column;
     transform: translateY(calc(var(--wui-roll-digit, 0) * -#{$wui-roll-cell}));
-    transition: transform var(--wui-roll-duration, 600ms) var(--wui-ease-out-quart);
     > span {
         display: block;
         height: $wui-roll-cell;
     }
 }
+// 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);
+}
 
 @media (prefers-reduced-motion: reduce) {
     .wui-rolling-number-reel {

package/scss/wui/_shell.scss

@@ -230,7 +230,10 @@
     top: 0;
     z-index: var(--wui-z-shell-sidebar);
     align-self: start;
-    height: 100vh;
+    // The sidebar takes its grid area's height, so a shell in a box shorter than the viewport fits it.
+    // The max-height keeps it within the viewport, so a long menu never stretches the page and it stays sticky.
+    height: 100%;
+    max-height: 100vh;
     display: flex;
     flex-direction: column;
     gap: 2px;

package/scss/wui/_utilities.scss

@@ -9,11 +9,17 @@
 // ── Icon base ──
 // Every library glyph (React <Icon>, Razor <app-icon>, wui-element internals) is an
 // inline SVG carrying this class; size comes from its width/height attributes.
+// An ancestor may set --wui-icon-color (a Canvas node's iconColor does) to colour every icon
+// below it that no rule or colour prop colours itself.
 .wui-icon {
     display: inline-block;
     flex-shrink: 0;
     vertical-align: -.125em;
 }
+// Zero specificity: a rule that colours an icon itself, such as .search-select-caret, keeps winning.
+:where(.wui-icon) {
+    color: var(--wui-icon-color, currentColor);
+}
 
 // ── Grid / layout utils ──
 // Responsive card grids (Bootstrap has no grid-template utility).

package/token-meanings.json

@@ -175,9 +175,14 @@
     "--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-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-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-6xl": "Sixth extra-large step of the fluid type scale; a product opts in per element.",
     "--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.",
@@ -245,13 +250,15 @@
     "--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-heading": "Heading ink for page and section titles.",
-    "--wui-warning": "Vivid warning fill for badges, dots and warning buttons.",
+    "--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.",
     "--wui-warning-30": "Warning tint 30 for soft fills and borders of alerts and badges.",
     "--wui-warning-5": "Faintest warning tint, for hover washes and soft warning backgrounds.",
     "--wui-warning-50": "Warning tint 50 for borders and the strongest soft warning fill.",
     "--wui-warning-active": "Active warning fill, the deepest vivid warning tone.",
+    "--wui-warning-strong": "Deep warning fill behind white text, such as the warning button.",
+    "--wui-warning-strong-hover": "Deep warning fill while a warning button with white text is hovered.",
     "--wui-warning-text": "Warning colour as text on light surfaces, darkened to pass AA.",
     "--wui-z-dropdown": "Stacking layer of in-page dropdown menus.",
     "--wui-z-fixed": "Stacking layer of fixed corner layers such as the consent banner.",