@webority/theme 0.109.6 → 0.109.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.109.6",
+  "version": "0.109.8",
   "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": {
@@ -51,7 +51,7 @@
     "country-flag-icons": "^1.6.20",
     "sass-embedded": "^1.97.0",
     "vite": "^8.0.12",
-    "@webority/tokens": "0.109.6"
+    "@webority/tokens": "0.109.8"
   },
   "scripts": {
     "tokens": "node ../tokens/dist/webority.js brand --library --out ../tokens/dist --web scss/_tokens.generated.scss",

package/scss/_bootstrap.generated.scss

@@ -1,4 +1,4 @@
-// Generated by @webority/tokens 0.109.6 from its token source. Do not edit; run webority brand --library.
+// Generated by @webority/tokens 0.109.8 from its token source. Do not edit; run webority brand --library.
 $body-color: #252f4a !default;
 $body-secondary-color: #4b5675 !default;
 $body-tertiary-color: #626a82 !default;

package/scss/_components.scss

@@ -32,15 +32,42 @@
     --bs-btn-hover-border-color: var(--color-primary-hover);
     --bs-btn-active-bg: var(--color-primary-hover);
     --bs-btn-active-border-color: var(--color-primary-hover);
-    // Bootstrap computes this label colour at SCSS compile time from the library's
-    // default $primary, so it can never react to a product overriding --wui-primary as a
-    // runtime CSS var. Routing it through the token makes a light-primary brand's
-    // --wui-primary-text override reach the button.
-    --bs-btn-color: var(--wui-primary-text);
+    --bs-btn-bg: var(--color-primary);
+    --bs-btn-border-color: var(--color-primary);
+    // The rest fill and label are the theme's primary pair, like hover and press.
+    --bs-btn-color: var(--color-on-primary);
     --bs-btn-hover-color: var(--color-on-primary);
     --bs-btn-active-color: var(--color-on-primary);
 }
 
+// Bootstrap compiles $primary into these fills and a white label; each takes the theme's primary pair.
+.nav-pills {
+    --bs-nav-pills-link-active-bg: var(--color-primary);
+    --bs-nav-pills-link-active-color: var(--color-on-primary);
+}
+
+.pagination {
+    --bs-pagination-active-bg: var(--color-primary);
+    --bs-pagination-active-border-color: var(--color-primary);
+    --bs-pagination-active-color: var(--color-on-primary);
+}
+
+.list-group {
+    --bs-list-group-active-bg: var(--color-primary);
+    --bs-list-group-active-border-color: var(--color-primary);
+    --bs-list-group-active-color: var(--color-on-primary);
+}
+
+.progress,
+.progress-stacked {
+    --bs-progress-bar-bg: var(--color-primary);
+}
+
+.text-bg-primary {
+    color: var(--color-on-primary) !important;
+    background-color: color-mix(in srgb, var(--color-primary) calc(var(--bs-bg-opacity, 1) * 100%), transparent) !important;
+}
+
 // Secondary — a soft brand tint (matches the design reference's secondary): a
 // low-alpha wash of the brand rather than an opaque fill, so it reads as a
 // quieter companion to the solid primary. Colour comes from the brand token;
@@ -125,9 +152,9 @@
     --bs-btn-hover-color: var(--color-on-primary);
     --bs-btn-hover-bg: var(--color-primary);
     --bs-btn-hover-border-color: var(--color-primary);
-    --bs-btn-active-color: var(--wui-primary-text);
-    --bs-btn-active-bg: var(--wui-primary-pressed);
-    --bs-btn-active-border-color: var(--wui-primary-pressed);
+    --bs-btn-active-color: var(--color-on-primary);
+    --bs-btn-active-bg: var(--color-primary-hover);
+    --bs-btn-active-border-color: var(--color-primary-hover);
     --bs-btn-disabled-color: var(--color-primary-text);
     --bs-btn-disabled-border-color: var(--color-primary);
 }

package/scss/_runtime-brand.scss

@@ -2,21 +2,15 @@
 // `webority brand`) 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.
+// The theme paints solid primary fills and their labels from the meaning pair (--color-primary and
+// --color-on-primary), so a token file's primary reaches them through those names. This layer only
+// re-points the compiled literals that still need --bs-primary or its triplet. The token file also
+// writes the Bootstrap link pair (--bs-link-color, --bs-link-hover-color and their -rgb triplets) when
+// the brand's link colour differs. Every other brand value (--wui-*, fonts, the Bootstrap subtle and
+// emphasis colours, dark mode) is already a custom property on :root and arrives with the token file
+// unchanged.
 
 .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);
 }
@@ -25,25 +19,6 @@
     --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) {

package/scss/_tokens.generated.scss

@@ -1,4 +1,4 @@
-// Generated by @webority/tokens 0.109.6 from its token source. Do not edit; run webority brand --library.
+// Generated by @webority/tokens 0.109.8 from its token source. Do not edit; run webority brand --library.
 
 :root {
     --wui-primary: #4F46E5;
@@ -479,7 +479,9 @@
     --bs-border-color: var(--color-border);
     --bs-secondary-bg: var(--color-surface);
     --bs-tertiary-bg: var(--color-bg-muted);
+    --bs-primary: var(--color-primary);
     --bs-body-bg-rgb: 15, 17, 23;
+    --bs-primary-rgb: 149, 144, 239;
     --bs-body-color-rgb: 230, 232, 238;
     --bs-emphasis-color-rgb: 230, 232, 238;
     --bs-secondary-color-rgb: 180, 185, 198;
@@ -622,7 +624,9 @@
     --bs-border-color: var(--color-border);
     --bs-secondary-bg: var(--color-surface);
     --bs-tertiary-bg: var(--color-bg-muted);
+    --bs-primary: var(--color-primary);
     --bs-body-bg-rgb: 15, 17, 23;
+    --bs-primary-rgb: 149, 144, 239;
     --bs-body-color-rgb: 230, 232, 238;
     --bs-emphasis-color-rgb: 230, 232, 238;
     --bs-secondary-color-rgb: 180, 185, 198;
@@ -661,8 +665,9 @@ $wui-dark-layer-names: (
     color-chart-seq-0, color-chart-seq-1, color-chart-seq-2, color-chart-seq-3, color-chart-seq-4, color-chart-seq-5,
     color-chart-seq-6, color-chart-diverging-low, color-chart-diverging-mid, color-chart-diverging-high, color-chart-neutral, wui-close-filter,
     wui-thumb-shadow, wui-thumb-shadow-hover, bs-body-color, bs-emphasis-color, bs-secondary-color, bs-tertiary-color,
-    bs-body-bg, bs-border-color, bs-secondary-bg, bs-tertiary-bg, bs-body-bg-rgb, bs-body-color-rgb,
-    bs-emphasis-color-rgb, bs-secondary-color-rgb, bs-tertiary-color-rgb, bs-secondary-bg-rgb, bs-tertiary-bg-rgb, bs-border-color-rgb
+    bs-body-bg, bs-border-color, bs-secondary-bg, bs-tertiary-bg, bs-primary, bs-body-bg-rgb,
+    bs-primary-rgb, bs-body-color-rgb, bs-emphasis-color-rgb, bs-secondary-color-rgb, bs-tertiary-color-rgb, bs-secondary-bg-rgb,
+    bs-tertiary-bg-rgb, bs-border-color-rgb
 );
 
 // var() resolves where a name is declared, so the html copies keep the light values for a light box.
@@ -822,7 +827,9 @@ html {
         --bs-border-color: var(--color-border);
         --bs-secondary-bg: var(--color-surface);
         --bs-tertiary-bg: var(--color-bg-muted);
+        --bs-primary: var(--color-primary);
         --bs-body-bg-rgb: 15, 17, 23;
+        --bs-primary-rgb: 149, 144, 239;
         --bs-body-color-rgb: 230, 232, 238;
         --bs-emphasis-color-rgb: 230, 232, 238;
         --bs-secondary-color-rgb: 180, 185, 198;

package/scss/wui/_page-header-bar.scss

@@ -39,6 +39,7 @@
 }
 .page-header.page-header-bar:has(> .page-header-bar-views) .page-title {
     max-width: 280px;
+    flex-shrink: 0;
 }
 .page-header.page-header-bar .page-status,
 .page-header-bar-tools,