@webority/theme 0.129.0 → 0.130.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.129.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.129.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.129.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

@@ -76,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;
@@ -88,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);
@@ -178,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);
@@ -192,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;
@@ -218,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;
@@ -231,9 +231,9 @@
     --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
 }
 
-// Light button: a raised surface in both themes. Bootstrap compiles btn-light from $light, so it
+// 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-light {
+.btn-neutral {
     --bs-btn-color: var(--color-text);
     --bs-btn-bg: var(--color-surface);
     --bs-btn-border-color: var(--color-border);
@@ -252,7 +252,7 @@
 // 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);
@@ -301,24 +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-light.is-loading:disabled,
-.btn-light.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);
@@ -775,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;
@@ -790,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;
 }
 
@@ -819,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;
@@ -834,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);

package/scss/_tokens.generated.scss

@@ -1,4 +1,4 @@
-// Generated by @webority/tokens 0.129.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.
 
 :root {
     --wui-primary: #4F46E5;

package/scss/_variables.scss

@@ -20,7 +20,7 @@
 // (the documented override path) wins — a plain assignment here would clobber the brand.
 $primary: #4F46E5 !default;
 // $secondary is intentional quiet grey (text-2 / foreground-3), NOT a second
-// brand hue. `.btn-secondary`, `.text-secondary`, `.bg-secondary` mean "quiet /
+// brand hue. `.btn-soft-primary`, `.text-secondary`, `.bg-secondary` mean "quiet /
 // de-emphasised" across products (Metronic-like). Products that need a true
 // second brand colour should use a custom utility or token — do not repurpose
 // $secondary without a coordinated migration.

package/scss/wui/_groups.scss

@@ -46,7 +46,7 @@
 .wui-split-button .btn:focus-visible {
     z-index: 2;
 }
-.wui-split-button > .btn.btn-text:first-child {
+.wui-split-button > .btn.btn-link-primary:first-child {
     padding-inline-end: 0.5rem;
 }
 

package/scss/wui/_overlays.scss

@@ -658,7 +658,7 @@ body[data-rr-ui-modal-open] {
 
 // Tone presets — swap the three colour vars; the arrow follows --bs-tooltip-bg automatically.
 // Fills that carry white text use the AA-cleared -strong tokens; warning stays dark-on-yellow.
-.tooltip.wui-tooltip.tone-dark {
+.tooltip.wui-tooltip.wui-tooltip-inverse {
     --wui-tooltip-bg: var(--color-text);
     --wui-tooltip-color: var(--color-bg);
     --wui-tooltip-border: transparent;

package/scss/wui/_shortcuts.scss

@@ -33,7 +33,7 @@
     color: inherit;
 }
 // The default tooltip sits on the plain surface colour, so its chip takes the plain chip look.
-.tooltip.wui-tooltip:not(.tone-dark):not(.tone-primary):not(.tone-success):not(.tone-danger):not(.tone-warning) .wui-kbd {
+.tooltip.wui-tooltip:not(.wui-tooltip-inverse):not(.tone-primary):not(.tone-success):not(.tone-danger):not(.tone-warning) .wui-kbd {
     border-color: var(--color-border);
     background: var(--color-bg-muted);
     color: var(--color-text);

package/scss/wui/_utilities.scss

@@ -1007,14 +1007,14 @@
 // A tinted, outline, ghost or text button in the action slot takes the alert's tone instead of
 // the brand colour, so it reads as part of the alert. The label is the alert's AA-safe text
 // colour. Solid buttons (primary, danger, warning) keep their own fill, which carries meaning.
-.alert-action :is(.btn-secondary, .btn-outline-primary, .btn-ghost, .btn-text) {
+.alert-action :is(.btn-soft-primary, .btn-outline-primary, .btn-ghost-primary, .btn-link-primary) {
     --bs-btn-color: var(--alert-text);
     --bs-btn-hover-color: var(--alert-text);
     --bs-btn-active-color: var(--alert-text);
     --bs-btn-disabled-color: var(--alert-text);
     --bs-btn-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--alert-tone) 40%, transparent);
 }
-.alert-action .btn-secondary {
+.alert-action .btn-soft-primary {
     --bs-btn-bg: color-mix(in srgb, var(--alert-tone) 16%, transparent);
     --bs-btn-hover-bg: color-mix(in srgb, var(--alert-tone) 24%, transparent);
     --bs-btn-active-bg: color-mix(in srgb, var(--alert-tone) 32%, transparent);
@@ -1027,7 +1027,7 @@
     --bs-btn-active-border-color: var(--alert-tone);
     --bs-btn-disabled-border-color: var(--alert-tone);
 }
-.alert-action .btn-ghost {
+.alert-action .btn-ghost-primary {
     --bs-btn-hover-bg: color-mix(in srgb, var(--alert-tone) 16%, transparent);
     --bs-btn-active-bg: color-mix(in srgb, var(--alert-tone) 24%, transparent);
 }