@webority/theme 0.87.0 → 0.87.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.87.0",
+  "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/_wui-aliases.scss

@@ -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/_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/_controls.scss

@@ -1328,17 +1328,6 @@ 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/_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/_rich-text.scss

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

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;