@webority/theme 0.69.0 → 0.71.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.69.0",
+  "version": "0.71.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": {
@@ -28,9 +28,13 @@
     "./css": "./dist/webority-theme.css",
     "./css/flags": "./dist/webority-flags.css",
     "./css/brand-signal": "./dist/webority-brand-signal.css",
+    "./css/runtime-brand": "./dist/webority-runtime-brand.css",
     "./purge-safelist.json": "./dist/purge-safelist.json",
     "./package.json": "./package.json"
   },
+  "bin": {
+    "webority-theme-export": "./dist/webority-theme-export.mjs"
+  },
   "sass": "index.scss",
   "style": "dist/webority-theme.css",
   "peerDependencies": {
@@ -39,9 +43,10 @@
   "devDependencies": {
     "bootstrap": "5.3.3",
     "country-flag-icons": "^1.6.20",
-    "sass-embedded": "^1.97.0"
+    "sass-embedded": "^1.97.0",
+    "vite": "^8.0.12"
   },
   "scripts": {
-    "build": "sass index.scss dist/webority-theme.css --load-path=node_modules --style=compressed --no-source-map --quiet-deps --silence-deprecation=if-function && sass scss/_flags.scss dist/webority-flags.css --style=compressed --no-source-map --quiet && sass scss/_brand-signal.scss dist/webority-brand-signal.css --style=compressed --no-source-map --quiet && node ../../scripts/gen-purge-safelist.mjs && node ../../scripts/sync-rcl-assets.mjs theme"
+    "build": "sass index.scss dist/webority-theme.css --load-path=node_modules --style=compressed --no-source-map --quiet-deps --silence-deprecation=if-function && sass scss/_flags.scss dist/webority-flags.css --style=compressed --no-source-map --quiet && sass scss/_brand-signal.scss dist/webority-brand-signal.css --style=compressed --no-source-map --quiet && sass scss/_runtime-brand.scss dist/webority-runtime-brand.css --style=compressed --no-source-map --quiet && node ../../scripts/gen-purge-safelist.mjs && node ../../scripts/sync-rcl-assets.mjs theme && vite build --config vite.cli.config.js"
   }
 }

package/scss/_components.scss

@@ -6,15 +6,14 @@
 // ---- Button polish (used by both Razor + React) ---------------------
 // Flat buttons — no drop shadow. Active-press feedback (1px nudge) is
 // retained because it's a tactile signal, not a depth cue.
-// Button heights are fixed to the design reference — large 55px, medium 45px,
-// small 35px — via min-height, with the label flex-centred. (These are button-
-// specific and intentionally a touch taller than the shared --wui-control-height
-// input ladder; sm/lg pin their own height in their size blocks below.)
+// A button is exactly as tall as a field of the same size (the --wui-control-height ladder, 36/44/52px), so a
+// button beside an input lines up in every form row. Heights are min-height with the label flex-centred; sm/lg
+// set theirs in their size blocks below.
 .btn:not(.btn-sm):not(.btn-lg):not(.btn-pill):not(.btn-pill-sm):not(.u-action):not(.btn-icon) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-height: 45px;
+    min-height: var(--wui-control-height);
 }
 
 // Tactile press feedback — every variant AND every size (sm/md/lg). Kept
@@ -266,7 +265,7 @@
 // sizes step font-size, horizontal padding and radius together (vertical size
 // comes from --wui-control-height, so a button lines up with an input). Weight
 // is 600 on every rung — buttons read as a deliberate action, not body text.
-// Medium (default): 14px / 600, 24px side padding, 18px squircle radius, 45px tall.
+// Medium (default): 14px / 600, 24px side padding, 18px squircle radius, --wui-control-height tall.
 .btn {
     --bs-btn-border-radius: 18px;
     --bs-btn-font-size: 0.875rem;
@@ -276,7 +275,7 @@
     // keep a plain border-radius arc — not a cross-browser design contract.
     corner-shape: squircle;
 }
-// Small: 12px, 18px side padding, 14px squircle radius (proportional to md), 35px tall.
+// Small: 12px, 18px side padding, 14px squircle radius (proportional to md), as tall as a small field.
 .btn-sm:not(.btn-icon),
 .btn-group-sm > .btn:not(.btn-icon) {
     --bs-btn-border-radius: 14px;
@@ -285,9 +284,9 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-height: 35px;
+    min-height: var(--wui-control-height-sm);
 }
-// Large: 16px, 32px side padding, 22px squircle radius (proportional to md), 55px tall — a spacious CTA.
+// Large: 16px, 32px side padding, 22px squircle radius (proportional to md), as tall as a large field.
 .btn-lg:not(.btn-icon),
 .btn-group-lg > .btn:not(.btn-icon) {
     --bs-btn-border-radius: 22px;
@@ -296,7 +295,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-height: 55px;
+    min-height: var(--wui-control-height-lg);
 }
 
 // ---- Hover animation options (opt-in modifiers) ---------------------

package/scss/_runtime-brand.scss

@@ -0,0 +1,83 @@
+// Runtime brand: an opt-in layer that lets a product's exported token file (webority-theme-export,
+// format webority-theme-tokens/1) restyle the precompiled theme without recompiling it.
+//
+// Loaded AFTER webority-theme.css and BEFORE the token file's values. It holds no colour of its own.
+// Bootstrap compiles $primary into a few component rules as literals; this layer re-points each of
+// them at --bs-primary / --bs-primary-rgb, which the token file sets on :root. Every other brand
+// value (--wui-*, links, fonts, the Bootstrap subtle and emphasis colours, dark mode) is already a
+// custom property on :root and arrives with the token file unchanged.
+//
+// Each tint below is the colour-mix equivalent of the Bootstrap function that made the literal
+// (tint-color = mix with white, shade-color = mix with black), so a product's own primary renders
+// the same through this layer as through its compiled build. The compiled values are the same in
+// light and dark, so there is no dark block.
+
+.btn-primary {
+    --bs-btn-bg: var(--bs-primary);
+    --bs-btn-border-color: var(--bs-primary);
+    --bs-btn-disabled-bg: var(--bs-primary);
+    --bs-btn-disabled-border-color: var(--bs-primary);
+    // Bootstrap mixes 15% white into this triplet; a triplet cannot be mixed at runtime.
+    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
+}
+
+.btn-outline-primary {
+    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
+}
+
+.nav-pills {
+    --bs-nav-pills-link-active-bg: var(--bs-primary);
+}
+
+.pagination {
+    --bs-pagination-active-bg: var(--bs-primary);
+    --bs-pagination-active-border-color: var(--bs-primary);
+}
+
+.list-group {
+    --bs-list-group-active-bg: var(--bs-primary);
+    --bs-list-group-active-border-color: var(--bs-primary);
+}
+
+.progress,
+.progress-stacked {
+    --bs-progress-bar-bg: var(--bs-primary);
+}
+
+// Mouse focus only: the theme paints keyboard focus and checked boxes from --color-primary already,
+// and a plain :focus rule here would win over both by source order.
+.form-check-input:focus:not(:focus-visible):not(:checked):not([type="checkbox"]:indeterminate) {
+    border-color: color-mix(in srgb, var(--bs-primary) 50%, #fff);
+}
+
+.form-range::-webkit-slider-thumb {
+    background-color: var(--bs-primary);
+}
+
+.form-range::-webkit-slider-thumb:active {
+    background-color: color-mix(in srgb, var(--bs-primary) 30%, #fff);
+}
+
+.form-range::-moz-range-thumb {
+    background-color: var(--bs-primary);
+}
+
+.form-range::-moz-range-thumb:active {
+    background-color: color-mix(in srgb, var(--bs-primary) 30%, #fff);
+}
+
+.link-primary:hover,
+.link-primary:focus {
+    color: color-mix(in srgb, color-mix(in srgb, var(--bs-primary) 80%, #000) calc(var(--bs-link-opacity, 1) * 100%), transparent) !important;
+    text-decoration-color: color-mix(in srgb, color-mix(in srgb, var(--bs-primary) 80%, #000) calc(var(--bs-link-underline-opacity, 1) * 100%), transparent) !important;
+}
+
+// Bootstrap's table-variant mixin: the cell colour is black, and each state mixes it into the tint.
+.table-primary {
+    --wui-table-primary-bg: color-mix(in srgb, var(--bs-primary) 20%, #fff);
+    --bs-table-bg: var(--wui-table-primary-bg);
+    --bs-table-border-color: color-mix(in srgb, #000 20%, var(--wui-table-primary-bg));
+    --bs-table-striped-bg: color-mix(in srgb, #000 5%, var(--wui-table-primary-bg));
+    --bs-table-active-bg: color-mix(in srgb, #000 10%, var(--wui-table-primary-bg));
+    --bs-table-hover-bg: color-mix(in srgb, #000 7.5%, var(--wui-table-primary-bg));
+}

package/scss/wui/_media.scss

@@ -101,9 +101,10 @@
     background: var(--color-info-soft);
     color: var(--color-info-text-on-soft);
 }
+// Foreground lightness 31%: at 32% the hue-60 pair falls to 4.42:1 on the 90% tint.
 .avatar-auto {
     background: hsl(var(--avatar-hue, 0) 60% 90%);
-    color: hsl(var(--avatar-hue, 0) 42% 32%);
+    color: hsl(var(--avatar-hue, 0) 42% 31%);
 }
 
 // ── Ring ── (`ring`): a tone-coloured ring with a surface gap, separating stacked

package/scss/wui/_overlays.scss

@@ -600,6 +600,21 @@
     max-width: min(92vw, 400px);
 }
 
+// An end-side stack moves clear of an open side drawer, so a toast never covers the panel's
+// content or its Save button. Widths mirror the drawer sizes in _drawer.scss; !important beats
+// Bootstrap's .end-0 utility, which is itself !important.
+@include media-breakpoint-up(md) {
+    body:has(.wui-drawer[open]:not([side="start"])) .wui-toast-container.end-0 {
+        right: min(480px, 100%) !important;
+    }
+    body:has(.wui-drawer[open][size="sm"]:not([side="start"])) .wui-toast-container.end-0 {
+        right: min(360px, 100%) !important;
+    }
+    body:has(.wui-drawer[open][size="lg"]:not([side="start"])) .wui-toast-container.end-0 {
+        right: min(640px, 100%) !important;
+    }
+}
+
 // Bootstrap's .toast-container stacks children with margin-bottom: $toast-spacing (1.5rem),
 // which ADDED to the flex gap above — the stack spacing is the gap alone.
 .wui-toast-container > :not(:last-child) {

package/scss/wui/_shell-parts.scss

@@ -83,6 +83,20 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+// At 360px and narrower a label wraps to two lines instead of cutting off, so "Earnings" shows in
+// full at 320px with WCAG text spacing. A third line is clamped.
+@media (max-width: 360px) {
+    .wui-tabbar-label {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        font-size: 0.6875rem;
+        line-height: 1.15;
+        overflow-wrap: anywhere;
+        text-overflow: clip;
+        white-space: normal;
+    }
+}
 // A count over the icon. Neutral by default, toned like the nav badge it mirrors (-text on -soft,
 // the 4.5:1 pairing the nav badge tones use).
 .wui-tabbar-badge {