@webority/theme 0.130.1 → 0.130.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.130.1",
+  "version": "0.130.2",
   "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.130.1",
+    "@webority/tokens": "0.130.2",
     "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.130.1 from its token source. Do not edit; run webority brand --library.
+// Generated by @webority/tokens 0.130.2 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

@@ -88,18 +88,18 @@
     --bs-btn-active-border-color: transparent;
 }
 
-// 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.
+// The solid affirmative (Approve, Confirm): a full fill on the deepened success token, which
+// carries its on-colour at AA. The quiet tint is .btn-soft-success.
 .btn-success {
-    --bs-btn-color: var(--color-success-text);
-    --bs-btn-bg: color-mix(in srgb, var(--color-success) 14%, transparent);
-    --bs-btn-border-color: transparent;
-    --bs-btn-hover-color: var(--color-success-text);
-    --bs-btn-hover-bg: color-mix(in srgb, var(--color-success) 20%, transparent);
-    --bs-btn-hover-border-color: transparent;
-    --bs-btn-active-color: var(--color-success-text);
-    --bs-btn-active-bg: color-mix(in srgb, var(--color-success) 28%, transparent);
-    --bs-btn-active-border-color: transparent;
+    --bs-btn-color: var(--color-on-success-strong);
+    --bs-btn-bg: var(--color-success-strong);
+    --bs-btn-border-color: var(--color-success-strong);
+    --bs-btn-hover-color: var(--color-on-success-strong);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--color-success-strong) 88%, #000);
+    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-success-strong) 88%, #000);
+    --bs-btn-active-color: var(--color-on-success-strong);
+    --bs-btn-active-bg: color-mix(in srgb, var(--color-success-strong) 80%, #000);
+    --bs-btn-active-border-color: color-mix(in srgb, var(--color-success-strong) 80%, #000);
 }
 
 // A button-shaped label that does nothing: keeps the .btn chrome but takes no pointer, so it
@@ -215,6 +215,46 @@
     --bs-btn-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-danger) 50%, transparent);
 }
 
+// Soft success, warning and info: the soft-danger treatment in each tone's own ink.
+.btn-soft-success {
+    --bs-btn-color: var(--color-success-text);
+    --bs-btn-bg: color-mix(in srgb, var(--color-success) 12%, transparent);
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: var(--color-success-text);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--color-success) 18%, transparent);
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-color: var(--color-success-text);
+    --bs-btn-active-bg: color-mix(in srgb, var(--color-success) 26%, transparent);
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-success) 50%, transparent);
+}
+
+.btn-soft-warning {
+    --bs-btn-color: var(--color-warning-text);
+    --bs-btn-bg: color-mix(in srgb, var(--color-warning) 12%, transparent);
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: var(--color-warning-text);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--color-warning) 18%, transparent);
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-color: var(--color-warning-text);
+    --bs-btn-active-bg: color-mix(in srgb, var(--color-warning) 26%, transparent);
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-warning) 50%, transparent);
+}
+
+.btn-soft-info {
+    --bs-btn-color: var(--color-info-text);
+    --bs-btn-bg: color-mix(in srgb, var(--color-info) 12%, transparent);
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: var(--color-info-text);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--color-info) 18%, transparent);
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-color: var(--color-info-text);
+    --bs-btn-active-bg: color-mix(in srgb, var(--color-info) 26%, transparent);
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-info) 50%, transparent);
+}
+
 // 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.
@@ -305,10 +345,36 @@
 .btn-soft-primary.is-loading.disabled,
 .btn-soft-danger.is-loading:disabled,
 .btn-soft-danger.is-loading.disabled,
+.btn-soft-success.is-loading:disabled,
+.btn-soft-success.is-loading.disabled,
+.btn-soft-warning.is-loading:disabled,
+.btn-soft-warning.is-loading.disabled,
+.btn-soft-info.is-loading:disabled,
+.btn-soft-info.is-loading.disabled,
 .btn-ghost-primary.is-loading:disabled,
 .btn-ghost-primary.is-loading.disabled,
+.btn-ghost-success.is-loading:disabled,
+.btn-ghost-success.is-loading.disabled,
+.btn-ghost-warning.is-loading:disabled,
+.btn-ghost-warning.is-loading.disabled,
+.btn-ghost-danger.is-loading:disabled,
+.btn-ghost-danger.is-loading.disabled,
+.btn-ghost-info.is-loading:disabled,
+.btn-ghost-info.is-loading.disabled,
+.btn-ghost-neutral.is-loading:disabled,
+.btn-ghost-neutral.is-loading.disabled,
 .btn-link-primary.is-loading:disabled,
 .btn-link-primary.is-loading.disabled,
+.btn-link-success.is-loading:disabled,
+.btn-link-success.is-loading.disabled,
+.btn-link-warning.is-loading:disabled,
+.btn-link-warning.is-loading.disabled,
+.btn-link-danger.is-loading:disabled,
+.btn-link-danger.is-loading.disabled,
+.btn-link-info.is-loading:disabled,
+.btn-link-info.is-loading.disabled,
+.btn-link-neutral.is-loading:disabled,
+.btn-link-neutral.is-loading.disabled,
 .btn-soft-neutral.is-loading:disabled,
 .btn-soft-neutral.is-loading.disabled,
 .btn-neutral.is-loading:disabled,
@@ -789,15 +855,117 @@
     --bs-btn-disabled-bg: transparent;
     --bs-btn-disabled-border-color: transparent;
 }
+
+// Ghost success, warning, danger, info and neutral: the ghost-primary treatment in each tone's own ink.
+.btn-ghost-success {
+    --bs-btn-color: var(--color-success-text);
+    --bs-btn-bg: transparent;
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: var(--color-success-text);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--color-success) 12%, transparent);
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-color: var(--color-success-text);
+    --bs-btn-active-bg: color-mix(in srgb, var(--color-success) 18%, transparent);
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-disabled-color: var(--color-success-text);
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: transparent;
+}
+
+.btn-ghost-warning {
+    --bs-btn-color: var(--color-warning-text);
+    --bs-btn-bg: transparent;
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: var(--color-warning-text);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--color-warning) 12%, transparent);
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-color: var(--color-warning-text);
+    --bs-btn-active-bg: color-mix(in srgb, var(--color-warning) 18%, transparent);
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-disabled-color: var(--color-warning-text);
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: transparent;
+}
+
+.btn-ghost-danger {
+    --bs-btn-color: var(--color-danger-text);
+    --bs-btn-bg: transparent;
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: var(--color-danger-text);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--color-danger) 12%, transparent);
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-color: var(--color-danger-text);
+    --bs-btn-active-bg: color-mix(in srgb, var(--color-danger) 18%, transparent);
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-disabled-color: var(--color-danger-text);
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: transparent;
+}
+
+.btn-ghost-info {
+    --bs-btn-color: var(--color-info-text);
+    --bs-btn-bg: transparent;
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: var(--color-info-text);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--color-info) 12%, transparent);
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-color: var(--color-info-text);
+    --bs-btn-active-bg: color-mix(in srgb, var(--color-info) 18%, transparent);
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-disabled-color: var(--color-info-text);
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: transparent;
+}
+
+.btn-ghost-neutral {
+    --bs-btn-color: var(--color-text);
+    --bs-btn-bg: transparent;
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: var(--color-text);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--color-text) 12%, transparent);
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-color: var(--color-text);
+    --bs-btn-active-bg: color-mix(in srgb, var(--color-text) 18%, transparent);
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-disabled-color: var(--color-text);
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: transparent;
+}
+
 // Bootstrap's link-style buttons can carry an underline; the ghost never does.
 .btn.btn-ghost-primary,
 .btn.btn-ghost-primary:hover,
 .btn.btn-ghost-primary:active,
-.btn.btn-ghost-primary:focus-visible {
+.btn.btn-ghost-primary:focus-visible,
+.btn.btn-ghost-success,
+.btn.btn-ghost-success:hover,
+.btn.btn-ghost-success:active,
+.btn.btn-ghost-success:focus-visible,
+.btn.btn-ghost-warning,
+.btn.btn-ghost-warning:hover,
+.btn.btn-ghost-warning:active,
+.btn.btn-ghost-warning:focus-visible,
+.btn.btn-ghost-danger,
+.btn.btn-ghost-danger:hover,
+.btn.btn-ghost-danger:active,
+.btn.btn-ghost-danger:focus-visible,
+.btn.btn-ghost-info,
+.btn.btn-ghost-info:hover,
+.btn.btn-ghost-info:active,
+.btn.btn-ghost-info:focus-visible,
+.btn.btn-ghost-neutral,
+.btn.btn-ghost-neutral:hover,
+.btn.btn-ghost-neutral:active,
+.btn.btn-ghost-neutral:focus-visible {
     text-decoration: none;
 }
 // No fill at rest, so keyboard focus gets the outline ring instead.
-.btn.btn-ghost-primary:focus-visible {
+.btn.btn-ghost-primary:focus-visible,
+.btn.btn-ghost-success:focus-visible,
+.btn.btn-ghost-warning:focus-visible,
+.btn.btn-ghost-danger:focus-visible,
+.btn.btn-ghost-info:focus-visible,
+.btn.btn-ghost-neutral:focus-visible {
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: var(--wui-focus-ring-offset);
     box-shadow: none;
@@ -810,7 +978,17 @@
     opacity: var(--wui-disabled-opacity);
 }
 .btn.btn-ghost-primary.btn-ghost-primary.is-loading:disabled,
-.btn.btn-ghost-primary.btn-ghost-primary.is-loading.disabled {
+.btn.btn-ghost-primary.btn-ghost-primary.is-loading.disabled,
+.btn.btn-ghost-success.btn-ghost-success.is-loading:disabled,
+.btn.btn-ghost-success.btn-ghost-success.is-loading.disabled,
+.btn.btn-ghost-warning.btn-ghost-warning.is-loading:disabled,
+.btn.btn-ghost-warning.btn-ghost-warning.is-loading.disabled,
+.btn.btn-ghost-danger.btn-ghost-danger.is-loading:disabled,
+.btn.btn-ghost-danger.btn-ghost-danger.is-loading.disabled,
+.btn.btn-ghost-info.btn-ghost-info.is-loading:disabled,
+.btn.btn-ghost-info.btn-ghost-info.is-loading.disabled,
+.btn.btn-ghost-neutral.btn-ghost-neutral.is-loading:disabled,
+.btn.btn-ghost-neutral.btn-ghost-neutral.is-loading.disabled {
     opacity: 1;
 }
 
@@ -833,45 +1011,182 @@
     --bs-btn-disabled-bg: transparent;
     --bs-btn-disabled-border-color: transparent;
 }
+
+// Text button tones: the link-primary treatment in each tone's own ink; neutral reads the text colour.
+.btn-link-success {
+    --bs-btn-color: var(--color-success-text);
+    --bs-btn-bg: transparent;
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: color-mix(in srgb, var(--color-success-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-success-text) 70%, var(--color-text));
+    --bs-btn-active-bg: transparent;
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-disabled-color: var(--color-success-text);
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: transparent;
+}
+
+.btn-link-warning {
+    --bs-btn-color: var(--color-warning-text);
+    --bs-btn-bg: transparent;
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: color-mix(in srgb, var(--color-warning-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-warning-text) 70%, var(--color-text));
+    --bs-btn-active-bg: transparent;
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-disabled-color: var(--color-warning-text);
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: transparent;
+}
+
+.btn-link-danger {
+    --bs-btn-color: var(--color-danger-text);
+    --bs-btn-bg: transparent;
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: color-mix(in srgb, var(--color-danger-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-danger-text) 70%, var(--color-text));
+    --bs-btn-active-bg: transparent;
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-disabled-color: var(--color-danger-text);
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: transparent;
+}
+
+.btn-link-info {
+    --bs-btn-color: var(--color-info-text);
+    --bs-btn-bg: transparent;
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: color-mix(in srgb, var(--color-info-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-info-text) 70%, var(--color-text));
+    --bs-btn-active-bg: transparent;
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-disabled-color: var(--color-info-text);
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: transparent;
+}
+
+.btn-link-neutral {
+    --bs-btn-color: var(--color-text);
+    --bs-btn-bg: transparent;
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-color: color-mix(in srgb, var(--color-text) 80%, transparent);
+    --bs-btn-hover-bg: transparent;
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-color: color-mix(in srgb, var(--color-text) 70%, transparent);
+    --bs-btn-active-bg: transparent;
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-disabled-color: var(--color-text);
+    --bs-btn-disabled-bg: transparent;
+    --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-link-primary {
+.btn.btn-link-primary,
+.btn.btn-link-success,
+.btn.btn-link-warning,
+.btn.btn-link-danger,
+.btn.btn-link-info,
+.btn.btn-link-neutral {
     --bs-btn-padding-x: 0;
 }
 .btn.btn-link-primary,
 .btn.btn-link-primary:hover,
 .btn.btn-link-primary:active,
-.btn.btn-link-primary:focus-visible {
+.btn.btn-link-primary:focus-visible,
+.btn.btn-link-success,
+.btn.btn-link-success:hover,
+.btn.btn-link-success:active,
+.btn.btn-link-success:focus-visible,
+.btn.btn-link-warning,
+.btn.btn-link-warning:hover,
+.btn.btn-link-warning:active,
+.btn.btn-link-warning:focus-visible,
+.btn.btn-link-danger,
+.btn.btn-link-danger:hover,
+.btn.btn-link-danger:active,
+.btn.btn-link-danger:focus-visible,
+.btn.btn-link-info,
+.btn.btn-link-info:hover,
+.btn.btn-link-info:active,
+.btn.btn-link-info:focus-visible,
+.btn.btn-link-neutral,
+.btn.btn-link-neutral:hover,
+.btn.btn-link-neutral:active,
+.btn.btn-link-neutral:focus-visible {
     text-decoration: none;
 }
-.btn.btn-link-primary::before {
+.btn.btn-link-primary::before,
+.btn.btn-link-success::before,
+.btn.btn-link-warning::before,
+.btn.btn-link-danger::before,
+.btn.btn-link-info::before,
+.btn.btn-link-neutral::before {
     display: none;
 }
-.btn.btn-link-primary:hover:not(:disabled) {
+.btn.btn-link-primary:hover:not(:disabled),
+.btn.btn-link-success:hover:not(:disabled),
+.btn.btn-link-warning:hover:not(:disabled),
+.btn.btn-link-danger:hover:not(:disabled),
+.btn.btn-link-info:hover:not(:disabled),
+.btn.btn-link-neutral:hover:not(:disabled) {
     transform: none;
 }
-.btn.btn-link-primary:focus-visible {
+.btn.btn-link-primary:focus-visible,
+.btn.btn-link-success:focus-visible,
+.btn.btn-link-warning:focus-visible,
+.btn.btn-link-danger:focus-visible,
+.btn.btn-link-info:focus-visible,
+.btn.btn-link-neutral: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-link-primary {
+.btn.btn-link-primary,
+.btn.btn-link-success,
+.btn.btn-link-warning,
+.btn.btn-link-danger,
+.btn.btn-link-info,
+.btn.btn-link-neutral {
     --wui-btn-roll-well: 20px;
     --wui-btn-well-pad: 3px;
     --wui-btn-text-icon: 14px;
 }
-.btn.btn-link-primary.btn-sm {
+.btn.btn-link-primary.btn-sm,
+.btn.btn-link-success.btn-sm,
+.btn.btn-link-warning.btn-sm,
+.btn.btn-link-danger.btn-sm,
+.btn.btn-link-info.btn-sm,
+.btn.btn-link-neutral.btn-sm {
     --wui-btn-roll-well: 18px;
     --wui-btn-well-pad: 3px;
     --wui-btn-text-icon: 12px;
 }
-.btn.btn-link-primary.btn-lg {
+.btn.btn-link-primary.btn-lg,
+.btn.btn-link-success.btn-lg,
+.btn.btn-link-warning.btn-lg,
+.btn.btn-link-danger.btn-lg,
+.btn.btn-link-info.btn-lg,
+.btn.btn-link-neutral.btn-lg {
     --wui-btn-roll-well: 22px;
     --wui-btn-well-pad: 3px;
     --wui-btn-text-icon: 16px;
 }
-.btn.btn-link-primary svg {
+.btn.btn-link-primary svg,
+.btn.btn-link-success svg,
+.btn.btn-link-warning svg,
+.btn.btn-link-danger svg,
+.btn.btn-link-info svg,
+.btn.btn-link-neutral svg {
     width: var(--wui-btn-text-icon);
     height: var(--wui-btn-text-icon);
 }
@@ -882,6 +1197,32 @@
     color: var(--color-primary-text);
     opacity: var(--wui-disabled-opacity);
 }
+// The ghost and link tones keep their own ink when disabled: the variant's disabled colour, not the primary one.
+.btn.btn-ghost-success.btn-ghost-success:disabled,
+.btn.btn-ghost-success.btn-ghost-success.disabled,
+.btn.btn-ghost-warning.btn-ghost-warning:disabled,
+.btn.btn-ghost-warning.btn-ghost-warning.disabled,
+.btn.btn-ghost-danger.btn-ghost-danger:disabled,
+.btn.btn-ghost-danger.btn-ghost-danger.disabled,
+.btn.btn-ghost-info.btn-ghost-info:disabled,
+.btn.btn-ghost-info.btn-ghost-info.disabled,
+.btn.btn-ghost-neutral.btn-ghost-neutral:disabled,
+.btn.btn-ghost-neutral.btn-ghost-neutral.disabled,
+.btn.btn-link-success.btn-link-success:disabled,
+.btn.btn-link-success.btn-link-success.disabled,
+.btn.btn-link-warning.btn-link-warning:disabled,
+.btn.btn-link-warning.btn-link-warning.disabled,
+.btn.btn-link-danger.btn-link-danger:disabled,
+.btn.btn-link-danger.btn-link-danger.disabled,
+.btn.btn-link-info.btn-link-info:disabled,
+.btn.btn-link-info.btn-link-info.disabled,
+.btn.btn-link-neutral.btn-link-neutral:disabled,
+.btn.btn-link-neutral.btn-link-neutral.disabled {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--bs-btn-disabled-color);
+    opacity: var(--wui-disabled-opacity);
+}
 
 // ---- Card hover-lift (name is historical) -----------------------------
 // `.card-lifted` does NOT cast a shadow — in-page cards stay flat. It only
@@ -899,10 +1240,15 @@
 // compiled $card-border-radius. Background is an ELEVATED surface, not the page
 // colour — so a card stays visible on a tinted page, and flips correctly in dark
 // mode because --color-surface is themed in the alias layer.
-// A brand that draws rounder cards than its controls sets --wui-card-radius in its token file.
+// A brand that draws rounder cards than its controls sets --wui-card-radius in its token file,
+// and one whose card text should follow the page text sets --wui-card-color (such as var(--color-text)).
+// A brand that draws its card corners as squircles sets --wui-card-corner-shape: squircle; a browser
+// without corner shaping keeps the plain round corner.
 .card {
     --bs-card-border-radius: var(--wui-card-radius, var(--wui-radius-lg));
     --bs-card-bg: var(--color-surface);
+    color: var(--wui-card-color, var(--bs-body-color));
+    corner-shape: var(--wui-card-corner-shape, round);
 }
 
 // Header actions slot (React `headerActions` prop / Razor <app-card-actions>). Both

package/scss/_tokens.generated.scss

@@ -1,4 +1,4 @@
-// Generated by @webority/tokens 0.130.1 from its token source. Do not edit; run webority brand --library.
+// Generated by @webority/tokens 0.130.2 from its token source. Do not edit; run webority brand --library.
 
 :root {
     --wui-primary: #4F46E5;

package/scss/wui/_card.scss

@@ -35,10 +35,12 @@
 // re-flexed with utilities on each one.
 // The header and footer share the card's own fill (a muted card stays muted to its top edge),
 // and the header carries no rule of its own: Bootstrap's divider followed the card's border
-// width, so only the elevated variant drew one.
+// width, so only the elevated variant drew one. A brand that fills its headers sets
+// --wui-card-header-bg in its token file, and one that draws a line under every header sets
+// --wui-card-header-divider to its width (such as 1px).
 .card-header {
-    --bs-card-cap-bg: transparent;
-    border-bottom: 0;
+    --bs-card-cap-bg: var(--wui-card-header-bg, transparent);
+    border-bottom: var(--wui-card-header-divider, 0px) solid var(--color-border-subtle);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -139,9 +141,17 @@
 }
 // With no rule under the header, its bottom padding alone separates the title from the body;
 // the body's own top padding on top of it left a double gap. After the scale, so every
-// padding step keeps the single gap.
+// padding step keeps the single gap. A header divider puts the gap back below the line: any divider
+// width scaled up and capped at the card inset gives the full inset, and no divider gives 0.
+.card {
+    --wui-card-gap-below-divider: min(calc(var(--wui-card-header-divider, 0px) * 1000), var(--wui-card-pad));
+}
 .card > .card-header + .card-body {
-    padding-top: 0;
+    padding-top: var(--wui-card-gap-below-divider);
+}
+// A card with no body (a list or a timeline straight after the header) takes the same gap.
+.card > .card-header + :not(.card-body, .card-footer) {
+    margin-top: var(--wui-card-gap-below-divider);
 }
 
 // ── Constrained width ── (`maxWidth`): caps + centres a standalone card. Cards

package/scss/wui/_compare-table.scss

@@ -9,6 +9,7 @@
 // ============================================================================
 .compare-table {
     position: relative;
+    inline-size: 100%;
     container-type: inline-size;
     overflow: clip;
     border: 1px solid var(--color-border);