@webority/theme 0.98.0 → 0.100.0

package/index.scss

@@ -3,14 +3,15 @@
 // output import the partials individually with their OWN _variables before bootstrap.
 //
 // Load order is LOAD-BEARING — never reorder:
-//   fonts -> variables (before bootstrap) -> bootstrap -> tokens -> aliases -> components -> wui-components
-// Country flags are NOT imported here, and neither does _wui-components: they are an opt-in
+//   fonts -> variables (ends with bootstrap.generated, the !default Bootstrap values from the token source)
+//   -> bootstrap -> tokens (tokens.generated, then wui-residual) -> components -> wui-components
+// The token source generates _tokens.generated.scss and _bootstrap.generated.scss (`corepack pnpm run tokens`,
+// run by build). Country flags are NOT imported here, and neither does _wui-components: they are an opt-in
 // layer (scss/_flags.scss, compiled on its own to dist/webority-flags.css) for sites that render
 // the phone input or country picker.
 @import "scss/fonts";
 @import "scss/variables";
 @import "bootstrap/scss/bootstrap";
 @import "scss/tokens";
-@import "scss/wui-aliases";
 @import "scss/components";
 @import "scss/wui-components";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.98.0",
+  "version": "0.100.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": {
@@ -50,9 +50,12 @@
     "bootstrap": "5.3.3",
     "country-flag-icons": "^1.6.20",
     "sass-embedded": "^1.97.0",
-    "vite": "^8.0.12"
+    "vite": "^8.0.12",
+    "@webority/tokens": "0.100.0"
   },
   "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/_runtime-brand.scss dist/webority-runtime-brand.css --style=compressed --no-source-map --quiet && node ../../scripts/force-state-selectors.mjs dist/webority-theme.css && node ../../scripts/gen-purge-safelist.mjs && node ../../scripts/sync-rcl-assets.mjs theme && vite build --config vite.cli.config.js && node scripts/exportCanvasTheme.mjs"
+    "tokens": "node ../tokens/dist/webority.js brand --library --out ../tokens/dist --web scss/_tokens.generated.scss",
+    "tokens:check": "node ../tokens/dist/webority.js brand --library --out ../tokens/dist --web scss/_tokens.generated.scss --check",
+    "build": "corepack pnpm run tokens && 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/_runtime-brand.scss dist/webority-runtime-brand.css --style=compressed --no-source-map --quiet && node ../../scripts/force-state-selectors.mjs dist/webority-theme.css && node ../../scripts/gen-purge-safelist.mjs && node ../../scripts/sync-rcl-assets.mjs theme && vite build --config vite.cli.config.js && node scripts/exportCanvasTheme.mjs"
   }
 }

package/scss/_bootstrap.generated.scss

@@ -0,0 +1,18 @@
+// Generated by @webority/tokens 0.100.0 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;
+$body-secondary-bg: #f9fbfc !default;
+$body-tertiary-bg: #f5f6fa !default;
+$border-color: #ebedf3 !default;
+$border-color-translucent: rgba(13, 24, 43, 0.08) !default;
+$border-radius: 10px !default;
+$border-radius-sm: 8px !default;
+$border-radius-lg: 14px !default;
+$border-radius-pill: 9999px !default;
+$wui-shadow-overlay: 0px 8px 28px -6px rgba(7, 20, 55, 0.14) !default;
+$wui-shadow-overlay-lg: 0px 24px 60px -16px rgba(7, 20, 55, 0.28) !default;
+$link-color: #4f46e5 !default;
+$line-height-base: 1.55 !default;
+$headings-line-height: 1.2 !default;
+$display-line-height: 1.05 !default;

package/scss/_components.scss

@@ -6,7 +6,7 @@
 // ---- 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.
-// A button is exactly as tall as a field of the same size (the --wui-control-height ladder, 32/36/44px), so a
+// A button is exactly as tall as a field of the same size (the --wui-control-md ladder, 32/36/44px), 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) {
@@ -16,7 +16,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-height: var(--wui-control-height);
+    min-height: var(--wui-control-md);
 }
 
 // Tactile press feedback — every variant AND every size (sm/md/lg). Kept
@@ -27,7 +27,7 @@
 }
 
 .btn-primary {
-    // Hover and press read --color-primary-hover: the pressed primary in light and the lifted dark primary in dark (_wui-aliases.scss), so a rebrand and dark mode both track it.
+    // Hover and press read --color-primary-hover: the pressed primary in light and the lifted dark primary in dark (_tokens.generated.scss), so a rebrand and dark mode both track it.
     --bs-btn-hover-bg: var(--color-primary-hover);
     --bs-btn-hover-border-color: var(--color-primary-hover);
     --bs-btn-active-bg: var(--color-primary-hover);
@@ -37,8 +37,8 @@
     // 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-hover-color: var(--color-primary-hover-text);
-    --bs-btn-active-color: var(--color-primary-hover-text);
+    --bs-btn-hover-color: var(--color-on-primary);
+    --bs-btn-active-color: var(--color-on-primary);
 }
 
 // Secondary — a soft brand tint (matches the design reference's secondary): a
@@ -48,13 +48,13 @@
 // then press. No border (the tint carries the shape). Disabled is the shared
 // neutral-grey state below, like every other variant.
 .btn-secondary {
-    --bs-btn-color: var(--color-primary-ink);
+    --bs-btn-color: var(--color-primary-text);
     --bs-btn-bg: color-mix(in srgb, var(--color-primary) 12%, transparent);
     --bs-btn-border-color: transparent;
-    --bs-btn-hover-color: var(--color-primary-ink);
+    --bs-btn-hover-color: var(--color-primary-text);
     --bs-btn-hover-bg: color-mix(in srgb, var(--color-primary) 18%, transparent);
     --bs-btn-hover-border-color: transparent;
-    --bs-btn-active-color: var(--color-primary-ink);
+    --bs-btn-active-color: var(--color-primary-text);
     --bs-btn-active-bg: color-mix(in srgb, var(--color-primary) 26%, transparent);
     --bs-btn-active-border-color: transparent;
 }
@@ -119,16 +119,16 @@
 // on a transparent fill; hover fills with the brand and flips the label to the on-brand text
 // token; active deepens to the pressed fill.
 .btn-outline-primary {
-    --bs-btn-color: var(--color-primary-ink);
+    --bs-btn-color: var(--color-primary-text);
     --bs-btn-border-color: var(--color-primary);
     // The hover fill is the theme's primary (the lifted one in dark mode), so its label is too.
-    --bs-btn-hover-color: var(--color-primary-text);
+    --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-disabled-color: var(--color-primary-ink);
+    --bs-btn-disabled-color: var(--color-primary-text);
     --bs-btn-disabled-border-color: var(--color-primary);
 }
 
@@ -276,21 +276,21 @@
 
 // ---- Component radii from tokens ------------------------------------
 // .btn/.card/.input capture Bootstrap's compiled $*-border-radius (the library
-// ladder) before a product loads, so a product's --wui-radius* override never
+// ladder) before a product loads, so a product's --wui-radius-md* override never
 // reached them. Re-drive the radius from the tokens — the way the dropdown above
 // already does — so overriding the radius tokens once flows to every control.
 // sm/lg are re-asserted so they keep their own rung instead of the base value.
 // Per-size type + padding scale, matched to the design reference: the three
 // 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
+// comes from --wui-control-md, 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, about 12px side padding, 14px squircle radius, --wui-control-height tall.
+// Medium (default): 14px / 600, about 12px side padding, 14px squircle radius, --wui-control-md tall.
 // Side padding is always twice the vertical padding. A button is its field's height with the label
 // line centred, so its vertical padding is (height - both borders - one line) / 2 and its side
 // padding the height less both borders and one line: about 5.7/11.4, 6.2/12.3 and 8.6/17.2px at sm,
 // md and lg with the theme's line height.
 .btn {
-    --wui-btn-height: var(--wui-control-height);
+    --wui-btn-height: var(--wui-control-md);
     --bs-btn-border-radius: 14px;
     --bs-btn-font-size: 0.875rem;
     --bs-btn-font-weight: 600;
@@ -302,26 +302,26 @@
 // Small: 12px, about 11px side padding, 12px squircle radius (proportional to md), as tall as a small field.
 .btn-sm:not(.btn-icon),
 .btn-group-sm > .btn:not(.btn-icon) {
-    --wui-btn-height: var(--wui-control-height-sm);
+    --wui-btn-height: var(--wui-control-sm);
     --bs-btn-padding-y: 0;
     --bs-btn-border-radius: 12px;
     --bs-btn-font-size: 0.75rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-height: var(--wui-control-height-sm);
+    min-height: var(--wui-control-sm);
 }
 // Large: 16px, about 17px side padding, 18px squircle radius (proportional to md), as tall as a large field.
 .btn-lg:not(.btn-icon),
 .btn-group-lg > .btn:not(.btn-icon) {
-    --wui-btn-height: var(--wui-control-height-lg);
+    --wui-btn-height: var(--wui-control-lg);
     --bs-btn-padding-y: 0;
     --bs-btn-border-radius: 18px;
     --bs-btn-font-size: 1rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-height: var(--wui-control-height-lg);
+    min-height: var(--wui-control-lg);
 }
 
 // ---- Hover animation options (opt-in modifiers) ---------------------
@@ -593,7 +593,7 @@
     --bs-dropdown-header-color: var(--color-text-muted);
     --bs-dropdown-header-padding-x: 0.625rem;
     --bs-dropdown-header-padding-y: 0.25rem;
-    box-shadow: var(--wui-shadow-overlay);
+    box-shadow: var(--wui-shadow-popover);
     // A long menu (account / workspace lists) must never spill past the screen and clip its
     // last rows: cap the panel to the viewport and scroll INSIDE it. The room subtracted
     // leaves space for a topbar-height trigger + margin — the common anchor for these long
@@ -645,7 +645,7 @@
     }
     &:hover .wui-icon, &:hover i, &:hover svg,
     &:focus .wui-icon, &:focus i, &:focus svg {
-        color: var(--color-primary-ink);
+        color: var(--color-primary-text);
     }
 
     // A leading picture instead of a glyph — an external logo/avatar, a brand mark.
@@ -708,16 +708,16 @@
 // No .btn-ghost-sm/-lg rungs: it is an ordinary .btn variant and sizes with Bootstrap's
 // own .btn-sm/.btn-lg, like .btn-primary.
 .btn-ghost {
-    --bs-btn-color: var(--color-primary-ink);
+    --bs-btn-color: var(--color-primary-text);
     --bs-btn-bg: transparent;
     --bs-btn-border-color: transparent;
-    --bs-btn-hover-color: var(--color-primary-ink);
+    --bs-btn-hover-color: var(--color-primary-text);
     --bs-btn-hover-bg: color-mix(in srgb, var(--color-primary) 12%, transparent);
     --bs-btn-hover-border-color: transparent;
-    --bs-btn-active-color: var(--color-primary-ink);
+    --bs-btn-active-color: var(--color-primary-text);
     --bs-btn-active-bg: color-mix(in srgb, var(--color-primary) 18%, transparent);
     --bs-btn-active-border-color: transparent;
-    --bs-btn-disabled-color: var(--color-primary-ink);
+    --bs-btn-disabled-color: var(--color-primary-text);
     --bs-btn-disabled-bg: transparent;
     --bs-btn-disabled-border-color: transparent;
 }
@@ -738,7 +738,7 @@
 .btn.btn-ghost.btn-ghost.disabled {
     background-color: transparent;
     border-color: transparent;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     opacity: var(--wui-disabled-opacity);
 }
 .btn.btn-ghost.btn-ghost.is-loading:disabled,
@@ -752,16 +752,16 @@
 // It pairs with animation="roll", whose label roll and round icon well carry the motion.
 // AppButton's `text` variant emits this class on both surfaces.
 .btn-text {
-    --bs-btn-color: var(--color-primary-ink);
+    --bs-btn-color: var(--color-primary-text);
     --bs-btn-bg: transparent;
     --bs-btn-border-color: transparent;
-    --bs-btn-hover-color: color-mix(in srgb, var(--color-primary-ink) 80%, var(--color-text));
+    --bs-btn-hover-color: color-mix(in srgb, var(--color-primary-text) 80%, var(--color-text));
     --bs-btn-hover-bg: transparent;
     --bs-btn-hover-border-color: transparent;
-    --bs-btn-active-color: color-mix(in srgb, var(--color-primary-ink) 70%, var(--color-text));
+    --bs-btn-active-color: color-mix(in srgb, var(--color-primary-text) 70%, var(--color-text));
     --bs-btn-active-bg: transparent;
     --bs-btn-active-border-color: transparent;
-    --bs-btn-disabled-color: var(--color-primary-ink);
+    --bs-btn-disabled-color: var(--color-primary-text);
     --bs-btn-disabled-bg: transparent;
     --bs-btn-disabled-border-color: transparent;
 }
@@ -811,7 +811,7 @@
 .btn.btn-text.btn-text.disabled {
     background-color: transparent;
     border-color: transparent;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     opacity: var(--wui-disabled-opacity);
 }
 
@@ -820,7 +820,7 @@
 // nudges 1px on hover (tactile signal). API prop stays `lifted` / class
 // `card-lifted` so call sites don't break.
 .card-lifted {
-    transition: transform 0.2s var(--wui-ease-out-quart);
+    transition: transform 0.2s var(--wui-ease-out);
     &:hover {
         transform: translateY(-1px);
     }
@@ -868,7 +868,7 @@
     margin: -6px -6px -6px auto;
     padding: 0;
     border: 0;
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     // The same resting grey as the modal and drawer close buttons.
     background: var(--color-bg-subtle);
     color: var(--color-text-muted);
@@ -915,10 +915,10 @@
     align-items: center;
     gap: 0.5rem;
     padding-inline: 0.875rem;
-    height: var(--wui-control-height);
+    height: var(--wui-control-md);
     background: var(--color-surface);
     border: 1px solid var(--color-border);
-    border-radius: var(--radius);
+    border-radius: var(--wui-radius-md);
     transition: border-color 0.15s ease;
 }
 .wui-input-group:hover:not(:focus-within):not(.is-disabled) {
@@ -993,7 +993,7 @@ button.wui-input-trailing:focus-visible,
 button.wui-input-leading:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: var(--wui-focus-ring-offset);
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
     border-radius: 9999px;
 }
 
@@ -1027,8 +1027,8 @@ button.wui-input-leading:focus-visible {
 
 // ---- Subtle hover lift -----------------------------------------------
 .lift-on-hover {
-    transition: transform 0.2s var(--wui-ease-out-quart),
-                box-shadow 0.2s var(--wui-ease-out-quart);
+    transition: transform 0.2s var(--wui-ease-out),
+                box-shadow 0.2s var(--wui-ease-out);
 }
 .lift-on-hover:hover {
     transform: translateY(-1px);

package/scss/_marketing.scss

@@ -30,7 +30,7 @@
     font-size: 14px;
     font-weight: 700;
     line-height: 1;
-    color: var(--color-primary-ink);
+    color: var(--color-primary-text);
 }
 .eyebrow::before {
     content: "";
@@ -189,7 +189,7 @@
 
 // ---- Single-element fade-in ------------------------------------------
 .fade-in {
-    animation: fadeIn 220ms var(--wui-ease-out-quart);
+    animation: fadeIn 220ms var(--wui-ease-out);
 }
 
 // ---- Stagger groups --------------------------------------------------
@@ -197,7 +197,7 @@
 // cascade in 40ms apart, capped at 12 children. For bigger groups,
 // use the IntersectionObserver-driven `[data-reveal]` pattern below.
 .stagger-children > * {
-    animation: staggerRise 360ms var(--wui-ease-out-quart) backwards;
+    animation: staggerRise 360ms var(--wui-ease-out) backwards;
 }
 .stagger-children > *:nth-child(1) { animation-delay: 0ms; }
 .stagger-children > *:nth-child(2) { animation-delay: 40ms; }
@@ -217,7 +217,7 @@
 // individual items inside a non-stagger-children container.
 .stagger-item {
     opacity: 0;
-    animation: rise 320ms var(--wui-ease-out-quart) forwards;
+    animation: rise 320ms var(--wui-ease-out) forwards;
     animation-delay: var(--stagger, 0ms);
 }
 
@@ -243,8 +243,8 @@
     opacity: 0;
     transform: translateY(8px);
     transition:
-        opacity 540ms var(--wui-ease-out-quart),
-        transform 540ms var(--wui-ease-out-quart);
+        opacity 540ms var(--wui-ease-out),
+        transform 540ms var(--wui-ease-out);
     will-change: opacity, transform;
 }
 [data-reveal].is-visible {
@@ -256,8 +256,8 @@
     opacity: 0;
     transform: translateY(8px);
     transition:
-        opacity 540ms var(--wui-ease-out-quart),
-        transform 540ms var(--wui-ease-out-quart);
+        opacity 540ms var(--wui-ease-out),
+        transform 540ms var(--wui-ease-out);
 }
 [data-reveal-stagger].is-visible > * {
     opacity: 1;