@webority/theme 0.128.0 → 0.130.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.128.0",
+  "version": "0.130.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": {
@@ -47,7 +47,7 @@
     "postcss": "^8.5.31"
   },
   "devDependencies": {
-    "@webority/tokens": "0.128.0",
+    "@webority/tokens": "0.130.0",
     "bootstrap": "5.3.3",
     "country-flag-icons": "^1.6.20",
     "sass-embedded": "^1.97.0",

package/scss/_bootstrap.generated.scss

@@ -1,4 +1,4 @@
-// Generated by @webority/tokens 0.128.0 from its token source. Do not edit; run webority brand --library.
+// Generated by @webority/tokens 0.130.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;

package/scss/_components.scss

@@ -8,8 +8,10 @@
 // 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-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) {
+// set theirs in their size blocks below, and so does a button sized by its group (.btn-group-sm/-lg).
+.btn:not(.btn-sm):not(.btn-lg):not(.btn-group-sm > .btn):not(.btn-group-lg > .btn):not(.btn-pill):not(.btn-pill-sm):not(.u-action):not(
+        .btn-icon
+    ) {
     // The height is the field height and the label is flex-centred, so no vertical padding: it
     // would push a button past its field height.
     --bs-btn-padding-y: 0;
@@ -74,7 +76,7 @@
 // only the TRANSPARENCY is taken from the reference — the tint deepens on hover
 // then press. No border (the tint carries the shape). Disabled is the shared
 // neutral-grey state below, like every other variant.
-.btn-secondary {
+.btn-soft-primary {
     --bs-btn-color: var(--color-primary-text);
     --bs-btn-bg: color-mix(in srgb, var(--color-primary) 12%, transparent);
     --bs-btn-border-color: transparent;
@@ -86,7 +88,7 @@
     --bs-btn-active-border-color: transparent;
 }
 
-// A soft-tinted affirmative — the success counterpart of .btn-secondary. Dark success text on a
+// A soft-tinted affirmative, the success counterpart of .btn-soft-primary. Dark success text on a
 // faint success fill, so it reads as "resolved / confirmed" without the weight of a solid green.
 .btn-success {
     --bs-btn-color: var(--color-success-text);
@@ -176,7 +178,7 @@
 
 // Neutral outline on the theme's text tokens. Bootstrap's compiled default draws it in
 // $secondary, which drops to about 2.4:1 on a dark surface.
-.btn-outline-secondary {
+.btn-outline-neutral {
     --bs-btn-color: var(--color-text-muted);
     --bs-btn-border-color: var(--color-border-strong);
     --bs-btn-hover-color: var(--color-text);
@@ -190,15 +192,15 @@
     --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
 }
 
-// Secondary-danger — the destructive counterpart of .btn-secondary: a soft red wash
+// Secondary-danger, the destructive counterpart of .btn-soft-primary: a soft red wash
 // instead of a solid red fill, for a quieter destructive action (e.g. a "Remove" that
-// shouldn't shout like a solid .btn-danger). Mirrors .btn-secondary exactly — low-alpha
+// shouldn't shout like a solid .btn-danger). Mirrors .btn-soft-primary exactly: low-alpha
 // tint deepening on hover/press, no border — but keyed off the danger tokens. The label
 // uses --color-danger-text (the AA-safe error red, lifted in dark mode to read on a dark surface),
 // not the brighter --color-danger. Disabled falls through to the shared neutral-grey
-// state below (it is not .btn-danger), like .btn-secondary. A product sets another label
+// state below (it is not .btn-danger), like .btn-soft-primary. A product sets another label
 // ink with --wui-btn-secondary-danger-ink (e.g. --color-danger-text-on-soft in dark mode).
-.btn-secondary-danger {
+.btn-soft-danger {
     --bs-btn-color: var(--wui-btn-secondary-danger-ink, var(--color-danger-text));
     --bs-btn-bg: color-mix(in srgb, var(--color-danger) 12%, transparent);
     --bs-btn-border-color: transparent;
@@ -216,7 +218,7 @@
 // Neutral grey button: the secondary button's shape in grey instead of the brand tint, for a
 // supporting action (Back, Skip, Close) that should not carry the brand colour. The fill is the
 // text colour at 8%, 12% on hover and 16% pressed, so it follows the theme in light and dark.
-.btn-neutral {
+.btn-soft-neutral {
     --bs-btn-bg: color-mix(in srgb, var(--color-text) 8%, transparent);
     --bs-btn-color: var(--color-text);
     --bs-btn-border-color: transparent;
@@ -229,10 +231,28 @@
     --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
 }
 
+// Neutral button: a raised surface in both themes. Bootstrap compiles its own btn-light from $light, so it
+// stayed near-white on a dark page; these read the meaning tokens, and the border is a soft line.
+.btn-neutral {
+    --bs-btn-color: var(--color-text);
+    --bs-btn-bg: var(--color-surface);
+    --bs-btn-border-color: var(--color-border);
+    --bs-btn-hover-color: var(--color-text);
+    --bs-btn-hover-bg: var(--color-bg-muted);
+    --bs-btn-hover-border-color: var(--color-border);
+    --bs-btn-active-color: var(--color-text);
+    --bs-btn-active-bg: var(--color-border);
+    --bs-btn-active-border-color: var(--color-border);
+    --bs-btn-disabled-color: var(--color-text-muted);
+    --bs-btn-disabled-bg: var(--color-surface);
+    --bs-btn-disabled-border-color: var(--color-border);
+    --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
+}
+
 // Light outline for a dark banner/hero CTA, where .btn-outline-primary's brand-coloured
 // border/text would disappear against a dark background. White is used directly (not a
 // token) because it's the one colour that reads on any dark surface, brand-independent.
-.btn-outline-light {
+.btn-glass {
     --bs-btn-color: #fff;
     --bs-btn-bg: transparent;
     --bs-btn-border-color: rgba(255, 255, 255, 0.6);
@@ -281,22 +301,24 @@
 }
 // Transparent-fill variants (secondary/ghost/text/neutral/outline-*) have no fill to tint from —
 // key the wash and the label off the accent (text) colour so the hue still shows.
-.btn-secondary.is-loading:disabled,
-.btn-secondary.is-loading.disabled,
-.btn-secondary-danger.is-loading:disabled,
-.btn-secondary-danger.is-loading.disabled,
-.btn-ghost.is-loading:disabled,
-.btn-ghost.is-loading.disabled,
-.btn-text.is-loading:disabled,
-.btn-text.is-loading.disabled,
+.btn-soft-primary.is-loading:disabled,
+.btn-soft-primary.is-loading.disabled,
+.btn-soft-danger.is-loading:disabled,
+.btn-soft-danger.is-loading.disabled,
+.btn-ghost-primary.is-loading:disabled,
+.btn-ghost-primary.is-loading.disabled,
+.btn-link-primary.is-loading:disabled,
+.btn-link-primary.is-loading.disabled,
+.btn-soft-neutral.is-loading:disabled,
+.btn-soft-neutral.is-loading.disabled,
 .btn-neutral.is-loading:disabled,
 .btn-neutral.is-loading.disabled,
 .btn-outline-primary.is-loading:disabled,
 .btn-outline-primary.is-loading.disabled,
 .btn-outline-danger.is-loading:disabled,
 .btn-outline-danger.is-loading.disabled,
-.btn-outline-light.is-loading:disabled,
-.btn-outline-light.is-loading.disabled {
+.btn-glass.is-loading:disabled,
+.btn-glass.is-loading.disabled {
     background-color: color-mix(in srgb, var(--bs-btn-color) 12%, var(--color-surface));
     border-color: color-mix(in srgb, var(--bs-btn-color) 12%, var(--color-surface));
     color: var(--bs-btn-color);
@@ -753,7 +775,7 @@
 //
 // 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 {
+.btn-ghost-primary {
     --bs-btn-color: var(--color-primary-text);
     --bs-btn-bg: transparent;
     --bs-btn-border-color: transparent;
@@ -768,27 +790,27 @@
     --bs-btn-disabled-border-color: transparent;
 }
 // Bootstrap's link-style buttons can carry an underline; the ghost never does.
-.btn.btn-ghost,
-.btn.btn-ghost:hover,
-.btn.btn-ghost:active,
-.btn.btn-ghost:focus-visible {
+.btn.btn-ghost-primary,
+.btn.btn-ghost-primary:hover,
+.btn.btn-ghost-primary:active,
+.btn.btn-ghost-primary:focus-visible {
     text-decoration: none;
 }
 // No fill at rest, so keyboard focus gets the outline ring instead.
-.btn.btn-ghost:focus-visible {
+.btn.btn-ghost-primary:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: var(--wui-focus-ring-offset);
     box-shadow: none;
 }
-.btn.btn-ghost.btn-ghost:disabled,
-.btn.btn-ghost.btn-ghost.disabled {
+.btn.btn-ghost-primary.btn-ghost-primary:disabled,
+.btn.btn-ghost-primary.btn-ghost-primary.disabled {
     background-color: transparent;
     border-color: transparent;
     color: var(--color-primary-text);
     opacity: var(--wui-disabled-opacity);
 }
-.btn.btn-ghost.btn-ghost.is-loading:disabled,
-.btn.btn-ghost.btn-ghost.is-loading.disabled {
+.btn.btn-ghost-primary.btn-ghost-primary.is-loading:disabled,
+.btn.btn-ghost-primary.btn-ghost-primary.is-loading.disabled {
     opacity: 1;
 }
 
@@ -797,7 +819,7 @@
 // no lift, and no side padding, so it lines up with the text around it. Hover deepens the colour.
 // 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 {
+.btn-link-primary {
     --bs-btn-color: var(--color-primary-text);
     --bs-btn-bg: transparent;
     --bs-btn-border-color: transparent;
@@ -812,49 +834,49 @@
     --bs-btn-disabled-border-color: transparent;
 }
 // After the size rungs and at their weight, so sm and lg text buttons lose the side padding too.
-.btn.btn-text {
+.btn.btn-link-primary {
     --bs-btn-padding-x: 0;
 }
-.btn.btn-text,
-.btn.btn-text:hover,
-.btn.btn-text:active,
-.btn.btn-text:focus-visible {
+.btn.btn-link-primary,
+.btn.btn-link-primary:hover,
+.btn.btn-link-primary:active,
+.btn.btn-link-primary:focus-visible {
     text-decoration: none;
 }
-.btn.btn-text::before {
+.btn.btn-link-primary::before {
     display: none;
 }
-.btn.btn-text:hover:not(:disabled) {
+.btn.btn-link-primary:hover:not(:disabled) {
     transform: none;
 }
-.btn.btn-text:focus-visible {
+.btn.btn-link-primary:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: var(--wui-focus-ring-offset);
     box-shadow: none;
 }
 // A text button's icons follow the text: each icon is the text size, and the roll or pinned well
 // is 18, 20 and 22px at sm, md and lg, a snug ring around the icon that never outweighs the label.
-.btn.btn-text {
+.btn.btn-link-primary {
     --wui-btn-roll-well: 20px;
     --wui-btn-well-pad: 3px;
     --wui-btn-text-icon: 14px;
 }
-.btn.btn-text.btn-sm {
+.btn.btn-link-primary.btn-sm {
     --wui-btn-roll-well: 18px;
     --wui-btn-well-pad: 3px;
     --wui-btn-text-icon: 12px;
 }
-.btn.btn-text.btn-lg {
+.btn.btn-link-primary.btn-lg {
     --wui-btn-roll-well: 22px;
     --wui-btn-well-pad: 3px;
     --wui-btn-text-icon: 16px;
 }
-.btn.btn-text svg {
+.btn.btn-link-primary svg {
     width: var(--wui-btn-text-icon);
     height: var(--wui-btn-text-icon);
 }
-.btn.btn-text.btn-text:disabled,
-.btn.btn-text.btn-text.disabled {
+.btn.btn-link-primary.btn-link-primary:disabled,
+.btn.btn-link-primary.btn-link-primary.disabled {
     background-color: transparent;
     border-color: transparent;
     color: var(--color-primary-text);

package/scss/_marketing.scss

@@ -85,7 +85,7 @@
 //
 // Example:
 // <a class="btn btn-primary btn-pill" style="--bs-btn-padding-x:1.5rem;">…</a>
-// <a class="btn btn-light btn-pill-sm">Learn more</a>
+// <a class="btn btn-neutral btn-pill-sm">Learn more</a>
 .btn-pill {
     --bs-btn-padding-y: 0; // height driven by min-height + flex centering
     --bs-btn-padding-x: 1.25rem; // 20px (px-5)
@@ -123,7 +123,7 @@
 // - text : --wui-text-heading (text-foreground in marketing-root)
 // - blur : 4px (backdrop-blur-sm)
 // - hover bg: #ffffff (hover:bg-surface = full opacity)
-.btn-ghost-dark {
+.btn-ghost-glass {
     --bs-btn-color: var(--wui-text-heading);
     --bs-btn-bg: rgba(255, 255, 255, 0.60);
     --bs-btn-border-color: rgba(13, 24, 43, 0.15);