@webority/theme 0.86.3 → 0.87.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.86.3",
+  "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
@@ -500,6 +537,10 @@
     --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).

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/_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

@@ -1328,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);

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/_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

@@ -841,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/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.",
@@ -185,12 +186,18 @@
     "--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.",
@@ -201,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.",
@@ -219,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.",
@@ -233,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.",
@@ -251,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.",