@webority/theme 0.82.1 → 0.83.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.82.1",
+  "version": "0.83.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": {
@@ -13,6 +13,7 @@
     "fonts",
     "dist",
     "logos",
+    "token-meanings.json",
     "!dist/**/__tests__",
     "!dist/**/*.test.*",
     "!dist/**/*.map"
@@ -31,6 +32,7 @@
     "./css/brand-signal": "./dist/webority-brand-signal.css",
     "./css/runtime-brand": "./dist/webority-runtime-brand.css",
     "./purge-safelist.json": "./dist/purge-safelist.json",
+    "./token-meanings.json": "./token-meanings.json",
     "./logos/*": "./logos/*",
     "./package.json": "./package.json"
   },
@@ -49,6 +51,6 @@
     "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 && 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"
+    "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/force-state-selectors.mjs dist/webority-theme.css dist/webority-brand-signal.css && node ../../scripts/gen-purge-safelist.mjs && node ../../scripts/sync-rcl-assets.mjs theme && vite build --config vite.cli.config.js"
   }
 }

package/scss/_brand-signal.scss

@@ -20,7 +20,7 @@
 }
 
 :root {
-    // Named brand constants for consumers; the library CSS does not read these.
+    // Named brand constants; the dark fills below read --wui-signal-dark-fill and --wui-signal-dark-fill-hover.
     --wui-signal-violet: #4A0FBF;
     --wui-signal-violet-hover: #3D0CA0;
     --wui-signal-tint: #F1EBFF;
@@ -47,7 +47,7 @@
     --wui-primary-5: #F8F5FF;
     --wui-primary-text: #FFFFFF;
     // Violet clears 4.5:1 as text on every light surface and its tint, so it is its own ink.
-    --wui-primary-ink: #4A0FBF;
+    --wui-primary-ink: var(--wui-primary, #4A0FBF);
     --wui-accent-dark: #340A88;
     --wui-surface-soft: #F1EBFF;
     --wui-surface-violet: #E6DCFD;
@@ -94,40 +94,42 @@
     // Values the theme compiles as literals rather than tokens.
     --bs-primary: #4A0FBF;
     --bs-primary-rgb: 74, 15, 191;
-    --bs-link-color: #4A0FBF;
-    --bs-link-color-rgb: 74, 15, 191;
-    --bs-link-hover-color: #3D0CA0;
-    --bs-link-hover-color-rgb: 61, 12, 160;
+    // Each link value reads the token a product re-points; a triplet cannot be derived from a hex at
+    // runtime, so it reads its own -rgb token and a product sets the pair together.
+    --bs-link-color: var(--wui-primary-ink, #4A0FBF);
+    --bs-link-color-rgb: var(--wui-primary-ink-rgb, 74, 15, 191);
+    --bs-link-hover-color: var(--wui-primary-hover, #3D0CA0);
+    --bs-link-hover-color-rgb: var(--wui-primary-hover-rgb, 61, 12, 160);
     --bs-focus-ring-color: rgba(74, 15, 191, 0.3);
 }
 
 // Bootstrap compiles its button variables to literal indigo; re-point them on the classes.
 .btn-primary {
-    --bs-btn-color: #fff;
-    --bs-btn-bg: #4A0FBF;
-    --bs-btn-border-color: #4A0FBF;
-    --bs-btn-hover-color: #fff;
-    --bs-btn-hover-bg: #3D0CA0;
-    --bs-btn-hover-border-color: #3D0CA0;
-    --bs-btn-focus-shadow-rgb: 74, 15, 191;
-    --bs-btn-active-color: #fff;
-    --bs-btn-active-bg: #340A88;
-    --bs-btn-active-border-color: #340A88;
-    --bs-btn-disabled-color: #fff;
-    --bs-btn-disabled-bg: #4A0FBF;
-    --bs-btn-disabled-border-color: #4A0FBF;
+    --bs-btn-color: var(--wui-primary-text, #fff);
+    --bs-btn-bg: var(--wui-primary, #4A0FBF);
+    --bs-btn-border-color: var(--wui-primary, #4A0FBF);
+    --bs-btn-hover-color: var(--wui-primary-text, #fff);
+    --bs-btn-hover-bg: var(--wui-primary-hover, #3D0CA0);
+    --bs-btn-hover-border-color: var(--wui-primary-hover, #3D0CA0);
+    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb, 74, 15, 191);
+    --bs-btn-active-color: var(--wui-primary-text, #fff);
+    --bs-btn-active-bg: var(--wui-primary-pressed, #340A88);
+    --bs-btn-active-border-color: var(--wui-primary-pressed, #340A88);
+    --bs-btn-disabled-color: var(--wui-primary-text, #fff);
+    --bs-btn-disabled-bg: var(--wui-primary, #4A0FBF);
+    --bs-btn-disabled-border-color: var(--wui-primary, #4A0FBF);
 }
 
 .btn-outline-primary {
     --bs-btn-color: var(--color-primary-ink);
     --bs-btn-border-color: var(--color-primary);
-    --bs-btn-hover-color: #fff;
-    --bs-btn-hover-bg: #4A0FBF;
-    --bs-btn-hover-border-color: #4A0FBF;
-    --bs-btn-active-color: #fff;
-    --bs-btn-active-bg: #340A88;
-    --bs-btn-active-border-color: #340A88;
-    --bs-btn-focus-shadow-rgb: 74, 15, 191;
+    --bs-btn-hover-color: var(--wui-primary-text, #fff);
+    --bs-btn-hover-bg: var(--wui-primary, #4A0FBF);
+    --bs-btn-hover-border-color: var(--wui-primary, #4A0FBF);
+    --bs-btn-active-color: var(--wui-primary-text, #fff);
+    --bs-btn-active-bg: var(--wui-primary-pressed, #340A88);
+    --bs-btn-active-border-color: var(--wui-primary-pressed, #340A88);
+    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb, 74, 15, 191);
 }
 
 .form-check-input:checked {
@@ -156,9 +158,12 @@
     // Selected, hover and highlight fills are a neutral lift; the violet stays on the text, border
     // or edge that marks the state. check-contrast.mjs mirrors the 8%; change them together.
     --color-primary-soft: color-mix(in srgb, #FFFFFF 8%, transparent);
-    // Ink on the lilac fill (--color-primary): 8:1 or better.
-    --color-primary-text: #16093A;
-    --color-progress-label: #16093A;
+    // The published primary pair is the one the primary button paints: deep violet with a white label.
+    // The lilac --wui-dark-primary stays the ink for text, links and focus on the dark surfaces.
+    --color-primary: var(--wui-signal-dark-fill, #5A22D6);
+    --color-primary-hover: var(--wui-signal-dark-fill-hover, #6B35E6);
+    --color-primary-text: var(--wui-dark-primary-text, #FFFFFF);
+    --color-primary-hover-text: var(--wui-dark-primary-text, #FFFFFF);
     --bs-body-bg-rgb: 0, 0, 0;
     --bs-body-color-rgb: 237, 237, 237;
     --bs-emphasis-color-rgb: 237, 237, 237;
@@ -167,36 +172,42 @@
     --bs-secondary-bg-rgb: 22, 22, 22;
     --bs-tertiary-bg-rgb: 30, 30, 30;
     --bs-border-color-rgb: 42, 42, 42;
-    --bs-link-color: #A98BFF;
-    --bs-link-color-rgb: 169, 139, 255;
-    --bs-link-hover-color: #BFA6FF;
-    --bs-link-hover-color-rgb: 191, 166, 255;
+    --bs-link-color: var(--wui-dark-primary, #A98BFF);
+    --bs-link-color-rgb: var(--wui-dark-primary-rgb, 169, 139, 255);
+    --bs-link-hover-color: var(--wui-dark-primary-hover, #BFA6FF);
+    --bs-link-hover-color-rgb: var(--wui-dark-primary-hover-rgb, 191, 166, 255);
     --bs-focus-ring-color: rgba(169, 139, 255, 0.4);
 
     .btn-primary {
-        --bs-btn-bg: #5A22D6;
-        --bs-btn-border-color: #5A22D6;
-        --bs-btn-hover-bg: #6B35E6;
-        --bs-btn-hover-border-color: #6B35E6;
-        --bs-btn-active-bg: #4A0FBF;
-        --bs-btn-active-border-color: #4A0FBF;
-        --bs-btn-disabled-bg: #5A22D6;
-        --bs-btn-disabled-border-color: #5A22D6;
+        --bs-btn-bg: var(--wui-signal-dark-fill, #5A22D6);
+        --bs-btn-border-color: var(--wui-signal-dark-fill, #5A22D6);
+        --bs-btn-hover-bg: var(--wui-signal-dark-fill-hover, #6B35E6);
+        --bs-btn-hover-border-color: var(--wui-signal-dark-fill-hover, #6B35E6);
+        --bs-btn-active-bg: var(--wui-primary, #4A0FBF);
+        --bs-btn-active-border-color: var(--wui-primary, #4A0FBF);
+        --bs-btn-disabled-bg: var(--wui-signal-dark-fill, #5A22D6);
+        --bs-btn-disabled-border-color: var(--wui-signal-dark-fill, #5A22D6);
     }
 
     .btn-outline-primary {
-        --bs-btn-hover-bg: #5A22D6;
-        --bs-btn-hover-border-color: #5A22D6;
+        --bs-btn-hover-bg: var(--wui-signal-dark-fill, #5A22D6);
+        --bs-btn-hover-border-color: var(--wui-signal-dark-fill, #5A22D6);
     }
 
     .form-check-input:checked {
-        background-color: #5A22D6;
-        border-color: #5A22D6;
+        background-color: var(--wui-signal-dark-fill, #5A22D6);
+        border-color: var(--wui-signal-dark-fill, #5A22D6);
     }
 
-    // The active step's number sits on a light violet fill; the theme's white ink is 2.68:1 there.
+    // The untoned bar fills with the deep violet --bs-primary, where the dark-mode label ink fails. The tone
+    // bars and the count badges sit on the light dark-mode fills and keep --color-progress-label.
+    :where(&) .progress-bar:not([class*="wui-progress-"]) {
+        color: var(--wui-dark-primary-text, #FFFFFF);
+    }
+
+    // The active step's number sits on the lilac ink fill (--wui-step-accent); white is 2.68:1 there.
     :where(.stepper:not(.wizard-stepper)) {
-        --wui-step-accent-fg: #16093A;
+        --wui-step-accent-fg: var(--wui-signal-ink, #16093A);
     }
 
     // Components that mix their violet fill inline rather than through --color-primary-soft.