@webority/theme 0.86.3 → 0.87.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.86.3",
+  "version": "0.87.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": {
@@ -38,7 +38,8 @@
     "./package.json": "./package.json"
   },
   "bin": {
-    "webority-theme-export": "./dist/webority-theme-export.mjs"
+    "webority-theme-export": "./dist/webority-theme-export.mjs",
+    "webority-theme-codemod": "./dist/webority-theme-codemod.mjs"
   },
   "sass": "index.scss",
   "style": "dist/webority-theme.css",

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);
 }
@@ -424,6 +424,16 @@
   color-scheme: dark;
 }
 
+// A dark section on a light page, such as a dark band: the same attribute on any element. The meaning
+// names are declared again here, so they resolve inside the section rather than once at the root.
+// Kept apart from the root rule above because the theme exporters read dark mode by that exact selector.
+[data-theme="dark"]:not(:root),
+[data-bs-theme="dark"]:not(:root) {
+  @include wui-dark-theme;
+  color-scheme: dark;
+  color: var(--color-text);
+}
+
 // Automatic dark mode — when data-theme="auto", detect system preference and apply dark tokens.
 :root[data-theme="auto"] {
   @media (prefers-color-scheme: dark) {

package/scss/_wui-components.scss

@@ -105,6 +105,8 @@
 @import "wui/hover-card";
 @import "wui/notification-center";
 @import "wui/whats-new";
+// After every component partial: restates each field's own font size with a 16px floor on touch screens.
+@import "wui/field-floor";
 // After every component partial: the shared focus ring and pressed wash settle ties with their hover rules.
 @import "wui/interaction";
 // Last: restates the settled state of menus other partials style, so it must win.

package/scss/_wui-core.scss

@@ -84,6 +84,8 @@
 @import "wui/hover-card";
 @import "wui/notification-center";
 @import "wui/whats-new";
+// After every component partial: restates each field's own font size with a 16px floor on touch screens.
+@import "wui/field-floor";
 // After every component partial: the shared focus ring and pressed wash settle ties with their hover rules.
 @import "wui/interaction";
 // Last: restates the settled state of menus other partials style, so it must win.

package/scss/wui/_chat.scss

@@ -13,7 +13,8 @@ wui-chat {
 
 .wui-chat-launcher {
     position: fixed;
-    bottom: 0;
+    // Rises above an open consent banner, which publishes its room on html.
+    bottom: var(--wui-consent-banner-block, 0px);
     inset-inline-end: 0;
     z-index: var(--wui-z-fixed);
     margin: 1rem;

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/_consent-banner.scss

@@ -202,3 +202,10 @@ wui-consent-banner[tour-open] {
         display: none;
     }
 }
+
+// The actions are small buttons, which fall under the 44px touch target on touch screens.
+@media (max-width: 575.98px), (pointer: coarse) {
+    .wui-consent-banner-actions .btn {
+        min-height: 44px;
+    }
+}

package/scss/wui/_field-floor.scss

@@ -0,0 +1,82 @@
+// Under 16px iOS Safari zooms the whole page when a text field takes focus.
+// This partial loads after every component partial (`_wui-components.scss`),
+// so each restated rule shares the library rule's specificity and wins by
+// source order; a product's own rule loaded later still wins. No !important.
+
+@media (max-width: 575.98px), (pointer: coarse) {
+    :where(
+        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;
+    }
+
+    .form-control,
+    .form-select,
+    .input,
+    .select,
+    .textarea {
+        font-size: max(16px, #{$input-font-size});
+    }
+
+    .form-control-sm,
+    .input-sm {
+        font-size: max(16px, #{$input-font-size-sm});
+    }
+
+    .form-select-sm {
+        font-size: max(16px, #{$form-select-font-size-sm});
+    }
+
+    .form-control-lg,
+    .input-lg {
+        font-size: max(16px, #{$input-font-size-lg});
+    }
+
+    .form-select-lg {
+        font-size: max(16px, #{$form-select-font-size-lg});
+    }
+
+    .wui-input-xl {
+        font-size: max(16px, 16px);
+    }
+
+    input,
+    textarea,
+    select {
+        font-size: max(16px, #{$input-font-size});
+    }
+
+    .otp-field {
+        font-size: max(16px, 16px);
+    }
+
+    .otp-slot {
+        font-size: max(16px, 18px);
+    }
+
+    .num-wrap-sm .num-input {
+        font-size: max(16px, 13px);
+    }
+
+    .num-wrap-lg .num-input {
+        font-size: max(16px, 16px);
+    }
+
+    // On-demand widgets (file viewer, rich text, workspace switcher) floor their own fields.
+    .search-select-input,
+    .dropdown-search-input {
+        font-size: 16px;
+    }
+
+    .search-wrap.search-sm .search-input {
+        font-size: 16px;
+    }
+
+    // The tel input and its dial code share one size, so the floor goes on the shared variable.
+    .app-phone-number-input,
+    .app-phone-number-input.phone-sm {
+        --wui-phone-font-size: 16px;
+    }
+}

package/scss/wui/_file-viewer.scss

@@ -93,6 +93,12 @@ wui-file-viewer:fullscreen {
     font-size: 13px;
     font-weight: 600;
 }
+// Under 16px iOS Safari zooms the page when the field takes focus.
+@media (max-width: 575.98px), (pointer: coarse) {
+    .wui-file-viewer-page-input {
+        font-size: 16px;
+    }
+}
 .wui-file-viewer-page-input:focus {
     outline: none;
     border-color: var(--color-primary);

package/scss/wui/_floating.scss

@@ -7,7 +7,8 @@
 
 .wui-floating-stack {
     position: fixed;
-    bottom: 0;
+    // Rises above an open consent banner, which publishes its room on html.
+    bottom: var(--wui-consent-banner-block, 0px);
     z-index: var(--wui-z-fixed);
     display: flex;
     // The primary item sits in the corner and the secondary one stacks above it.

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;
@@ -157,6 +157,12 @@ wui-rich-text[readonly] .wui-rich-text-toolbar {
     font: inherit;
     font-size: 13px;
 }
+// Under 16px iOS Safari zooms the page when the field takes focus.
+@media (max-width: 575.98px), (pointer: coarse) {
+    .wui-rich-text-link-input {
+        font-size: 16px;
+    }
+}
 .wui-rich-text-link-input:focus {
     outline: none;
     border-color: var(--color-focus-border);
@@ -170,7 +176,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 +277,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/scss/wui/_workspace.scss

@@ -189,6 +189,12 @@
     font-size: 13px;
     outline: none;
 }
+// Under 16px iOS Safari zooms the page when the field takes focus.
+@media (max-width: 575.98px), (pointer: coarse) {
+    .workspace-switcher-search-input {
+        font-size: 16px;
+    }
+}
 .workspace-switcher-list {
     display: flex;
     flex-direction: column;

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.",