@webority/theme 0.95.0 → 0.98.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.95.0",
+  "version": "0.98.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": {
@@ -29,17 +29,14 @@
     "./scss/*": "./scss/_*.scss",
     "./css": "./dist/webority-theme.css",
     "./css/flags": "./dist/webority-flags.css",
-    "./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",
     "./postcss/forced-states": "./dist/postcss/forced-states.mjs",
+    "./runtime": "./dist/runtime.mjs",
     "./logos/*": "./logos/*",
     "./package.json": "./package.json"
   },
-  "bin": {
-    "webority-theme-export": "./dist/webority-theme-export.mjs"
-  },
   "sass": "index.scss",
   "style": "dist/webority-theme.css",
   "dependencies": {
@@ -56,6 +53,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/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 && node scripts/exportCanvasTheme.mjs"
+    "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"
   }
 }

package/scss/_components.scss

@@ -601,8 +601,6 @@
     // The thin thumb matches the shared rail (--wui-scrollbar*), like .wui-scroll.
     max-height: calc(100vh - 5rem);
     overflow-y: auto;
-    scrollbar-width: thin;
-    scrollbar-color: var(--wui-scrollbar) transparent;
 }
 .dropdown-menu::-webkit-scrollbar {
     width: 8px;
@@ -620,6 +618,13 @@
     background-color: var(--wui-scrollbar-hover);
     background-clip: padding-box;
 }
+// Chrome 121+ ignores the WebKit scrollbar rules once a standard scrollbar property is set, and draws arrow buttons; the standard properties are for browsers without the WebKit rules.
+@supports not selector(::-webkit-scrollbar) {
+    .dropdown-menu {
+        scrollbar-width: thin;
+        scrollbar-color: var(--wui-scrollbar) transparent;
+    }
+}
 
 .dropdown-item {
     display: flex;
@@ -1040,8 +1045,6 @@ button.wui-input-leading:focus-visible {
 html,
 body {
     scrollbar-gutter: stable;
-    scrollbar-width: thin;
-    scrollbar-color: var(--wui-scrollbar) transparent;
 }
 html::-webkit-scrollbar,
 body::-webkit-scrollbar {
@@ -1077,14 +1080,21 @@ body::-webkit-scrollbar-corner {
     background: transparent;
 }
 
-html.is-scrolling,
-html.is-scrolling body {
-    scrollbar-color: var(--wui-scrollbar-hover) transparent;
-}
 html.is-scrolling::-webkit-scrollbar-thumb,
 html.is-scrolling body::-webkit-scrollbar-thumb {
     background-color: var(--wui-scrollbar-hover);
 }
+@supports not selector(::-webkit-scrollbar) {
+    html,
+    body {
+        scrollbar-width: thin;
+        scrollbar-color: var(--wui-scrollbar) transparent;
+    }
+    html.is-scrolling,
+    html.is-scrolling body {
+        scrollbar-color: var(--wui-scrollbar-hover) transparent;
+    }
+}
 
 // Hide a scrollbar (marquee / horizontal carousels).
 .scrollbar-hide {

package/scss/_runtime-brand.scss

@@ -1,5 +1,5 @@
-// Runtime brand: an opt-in layer that lets a product's exported token file (webority-theme-export,
-// format webority-theme-tokens/1) restyle the precompiled theme without recompiling it.
+// Runtime brand: an opt-in layer that lets a product's token file (webority-theme-tokens/2, written by
+// `webority brand`) restyle the precompiled theme without recompiling it.
 //
 // Loaded AFTER webority-theme.css and BEFORE the token file's values. It holds no colour of its own.
 // Bootstrap compiles $primary into a few component rules as literals; this layer re-points each of

package/scss/_tokens.scss

@@ -35,13 +35,12 @@
     --wui-text-1: #252F4A;
     /// meaning: Secondary text for descriptions, sub-labels and muted copy.
     --wui-text-2: #4B5675;
-    // Tertiary text — hints, captions, labels, timestamps, placeholders. Was #78829D,
-    // which measured 3.5:1 on white and 3.1:1 on a tinted panel: below WCAG AA (4.5:1)
-    // everywhere it was used. A tier meant for readable-but-secondary copy has to BE
-    // readable, so it darkens to 4.55:1 on every neutral surface. It stays clearly
-    // lighter than --wui-text-2; --wui-text-4/5 remain for genuinely decorative use.
+    // Tertiary text, for hints, captions, labels, timestamps and placeholders. It measures 4.97:1 on
+    // the library page background and 4.76:1 on a lightly tinted brand page (#eef1f7), so it stays
+    // above the 4.5:1 AA floor on every neutral surface. It stays clearly lighter than --wui-text-2;
+    // --wui-text-4/5 remain for genuinely decorative use.
     /// meaning: Tertiary text for hints, captions, labels, timestamps and placeholders.
-    --wui-text-3: #687088;
+    --wui-text-3: #626A82;
     /// meaning: Decorative faint ink, not for text a person must read.
     --wui-text-4: #99A1B7;
     /// meaning: Faintest ink, for decorative marks.

package/scss/_variables.scss

@@ -184,7 +184,7 @@ $link-color: $wui-primary-ink !default;
 // $body-bg left at Bootstrap's $white — do not restate pure defaults here.
 $body-color: #252F4A; // text-1 from locked palette
 $body-secondary-color: #4B5675;
-$body-tertiary-color: #687088; // AA on white (matches --wui-text-3); #78829D was only 3.5:1
+$body-tertiary-color: #626A82; // matches --wui-text-3, AA on every neutral surface
 $body-secondary-bg: #F9FBFC;
 $body-tertiary-bg: #F5F6FA;
 

package/scss/wui/_flow.scss

@@ -1138,7 +1138,7 @@ button.wui-step-tile-body:hover .step-label {
 .form-section-body {
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: var(--wui-space-lg);
 }
 
 // layout="side": the title and description take a column beside the fields. Below lg the

package/scss/wui/_navigation.scss

@@ -396,10 +396,17 @@
 }
 
 // ── Fitted: tabs share the width equally (no scroll). ──
+// Every tab takes an equal share; a label longer than its share ends in an ellipsis.
 .app-tabs-fitted .app-tab {
     flex: 1 1 0;
+    min-width: 0;
     justify-content: center;
 }
+.app-tabs-fitted .wui-tab-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 .app-tabs-wrap > .app-tabs-fitted {
     flex: 1 1 auto;
 }

package/scss/wui/_overlays.scss

@@ -15,18 +15,12 @@
 // Do NOT put layout on backdropClassName — that targets a sibling, not
 // .modal.
 .modal-backdrop.wui-modal-dim {
-    // Frost the page behind the dialog — the blur is the star, so the dim is kept SOFT (a heavy
-    // scrim would flatten the blur into a muddy grey). A moderate dim over a STRONG blur reads as
-    // clean frosted glass; the modal is still clearly the one live surface. The dialog sits in
-    // `.modal` (a higher z-index sibling), so it is never blurred.
-    //
-    // Full strength is load-bearing: Bootstrap composites the whole backdrop element at
-    // `--bs-backdrop-opacity` (0.5 by default), which HALVES both the blur and the dim into a
-    // weak, patchy wash — the bug this fixes. Pin the opacity to 1 and carry the dim entirely in
-    // `background`, so the frost renders at its true strength. (The fade-in still animates 0 → 1.)
+    // Opacity is pinned to 1 because Bootstrap's 0.5 would halve the dim. The strong scrim guarantees
+    // separation in every browser, including over embedded pages Chrome cannot blur; the blur on top
+    // is decoration.
     --bs-backdrop-opacity: 1;
     opacity: 1;
-    background: color-mix(in srgb, var(--color-scrim) 85%, transparent);
+    background: var(--color-scrim-strong);
     z-index: var(--wui-z-modal-backdrop);
     // A little saturation boost is what makes the frost read as glass rather than fog — the
     // colours behind bloom softly through the blur instead of greying out.
@@ -225,6 +219,14 @@
 .wui-modal-body .field > .field-error {
     align-self: stretch;
 }
+
+// Stacked fields in a dialog keep the distance AppFormSection puts between its fields (.form-section-body
+// in _flow.scss). Only fields in normal flow: a child of the body, or of a form in the body. A field in a
+// grid or flex layout takes that layout's gap.
+.wui-modal-body > .field + .field,
+.wui-modal-body > form > .field + .field {
+    margin-top: var(--wui-space-lg);
+}
 .wui-form-section-head {
     margin-bottom: 16px;
 }

package/scss/wui/_shortcuts.scss

@@ -32,6 +32,12 @@
     background: transparent;
     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 {
+    border-color: var(--color-border);
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
 .btn > .wui-kbd {
     margin-left: 8px;
 }

package/scss/wui/_typography.scss

@@ -275,10 +275,8 @@
 
 // Disabled — deliberately NOT opacity, and deliberately after the tones.
 //
-// `opacity: .55` fades the whole chip, which scales the LABEL's contrast down with it:
-// #687088 on #F5F6FA at .55 alpha resolves to 2.08:1, less than half the 4.5:1 AA floor,
-// and axe reports it as a serious violation on both surfaces. Explicit muted tokens read
-// as the same state and stay legible at 4.56:1.
+// `opacity: .55` fades the whole chip, label included, so a faded label can fall under the
+// 4.5:1 AA floor. Explicit muted tokens read as the same state and keep the label legible.
 //
 // It sits after the tone block on purpose. `.chip.is-disabled` and `.chip.primary` have
 // equal specificity, so source order decides — declared before them, a disabled primary

package/dist/webority-brand-signal.css

@@ -1 +0,0 @@
-@font-face{font-family:"Webority Serif";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/serif/WeboritySerif-DemiBold.woff2") format("woff2")}:root{--wui-signal-violet: #4A0FBF;--wui-signal-violet-hover: #3D0CA0;--wui-signal-tint: #F1EBFF;--wui-signal-ink: #16093A;--wui-signal-heading: #4C1D95;--wui-signal-pink: #B517C8;--wui-signal-dark-fill: #5A22D6;--wui-signal-dark-fill-hover: #6B35E6;--bs-font-sans-serif: "Webority Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--bs-body-font-family: var(--bs-font-sans-serif);--wui-font-display: "Webority Serif", Georgia, "Times New Roman", serif;--wui-primary: #4A0FBF;--wui-primary-hover: #3D0CA0;--wui-primary-pressed: #340A88;--wui-primary-50: #8B66E6;--wui-primary-30: #B9A2F2;--wui-primary-20: #D9CBFA;--wui-primary-15: #E6DCFD;--wui-primary-10: #F1EBFF;--wui-primary-5: #F8F5FF;--wui-primary-text: #FFFFFF;--wui-primary-ink: var(--wui-primary, #4A0FBF);--wui-accent-dark: #340A88;--wui-surface-soft: #F1EBFF;--wui-surface-violet: #E6DCFD;--wui-surface-violet-soft: #F8F5FF;--wui-hero-gradient: radial-gradient(ellipse 120% 80% at 50% 30%, #8B66E6 0%, #4A0FBF 35%, #3D0CA0 75%, #16093A 100%);--wui-cta-gradient: radial-gradient(ellipse 120% 100% at 50% 50%, #2B1150 0%, #16093A 60%, #0E0626 100%);--wui-text-heading: #16093A;--wui-text-1: #2B2B2B;--wui-text-2: #5A5A5A;--wui-text-3: #6A6A6A;--wui-text-4: #9A9A9A;--wui-text-5: #CFC9DE;--wui-ink: #16093A;--wui-bg-page: #F8F6FD;--wui-bg-light: #FFFFFF;--wui-bg-elevated: #FBFAFE;--wui-bg-muted: #F3EFFB;--wui-field-bg: #FBFAFE;--wui-border-light: #E8E4F2;--wui-border-soft: #F3F0FA;--wui-progress-track: #E8E4F2;--wui-neutral-border-dark: #E8E4F2;--wui-neutral-bg-dark: #F3EFFB;--wui-shadow-overlay: 0 8px 28px -6px rgba(22, 9, 58, 0.16);--wui-shadow-overlay-lg: 0 24px 60px -16px rgba(22, 9, 58, 0.30);--wui-dark-bg-page: #000000;--wui-dark-bg-elevated: #0F0F0F;--wui-dark-bg-surface: #161616;--wui-dark-bg-muted: #1E1E1E;--wui-dark-border: #2A2A2A;--wui-dark-border-strong: #333333;--wui-dark-progress-track: #333333;--wui-dark-text: #EDEDED;--wui-dark-text-muted: #C0C0C0;--wui-dark-text-subtle: #A0A0A0;--wui-dark-primary: #A98BFF;--wui-dark-primary-hover: #BFA6FF;--bs-primary: #4A0FBF;--bs-primary-rgb: 74, 15, 191;--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)}.btn-primary{--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: 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{background-color:var(--color-primary);border-color:var(--color-primary)}.page-title,.result-title{font-family:var(--wui-font-display);font-weight:600;font-style:normal;letter-spacing:-0.01em;color:var(--color-text)}.page-header-sm .page-title,.page-header.page-header-bar .page-title{font-family:inherit}:root[data-theme=dark],:root[data-bs-theme=dark]{--wui-signal-heading: #C4AEFF;--color-primary-soft: color-mix(in srgb, #FFFFFF 8%, transparent);--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;--bs-secondary-color-rgb: 192, 192, 192;--bs-tertiary-color-rgb: 160, 160, 160;--bs-secondary-bg-rgb: 22, 22, 22;--bs-tertiary-bg-rgb: 30, 30, 30;--bs-border-color-rgb: 42, 42, 42;--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)}:root[data-theme=dark] .btn-primary,:root[data-bs-theme=dark] .btn-primary{--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)}:root[data-theme=dark] .btn-outline-primary,:root[data-bs-theme=dark] .btn-outline-primary{--bs-btn-hover-bg: var(--wui-signal-dark-fill, #5A22D6);--bs-btn-hover-border-color: var(--wui-signal-dark-fill, #5A22D6)}:root[data-theme=dark] .form-check-input:checked,:root[data-bs-theme=dark] .form-check-input:checked{background-color:var(--wui-signal-dark-fill, #5A22D6);border-color:var(--wui-signal-dark-fill, #5A22D6)}:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .progress-bar:not([class*=wui-progress-]){color:var(--wui-dark-primary-text, #FFFFFF)}:root[data-theme=dark] :where(.stepper:not(.wizard-stepper)),:root[data-bs-theme=dark] :where(.stepper:not(.wizard-stepper)){--wui-step-accent-fg: var(--wui-signal-ink, #16093A)}:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .struct-card.checked,:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .tpg-arrow:is(:hover,.wui-force-hover):not(:disabled),:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .tpg-page:is(:hover,.wui-force-hover):not(.is-active),:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .u-action:is(:hover,.wui-force-hover):not(:disabled),:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .tbl-empty-icon,:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .u-avatar,:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .wui-file-viewer-audio-art{background:var(--color-primary-soft)}:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .wui-calendar-view-btn[aria-pressed=true],:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .compare-table td.is-highlight{background:color-mix(in srgb, #FFFFFF 8%, var(--color-surface))}:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .table-ledger tbody tr.is-selected:is(:hover,.wui-force-hover){--bs-table-bg-state: color-mix(in srgb, #FFFFFF 12%, transparent)}:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .table-ledger tbody tr.is-selected>:first-child{box-shadow:inset 3px 0 0 0 var(--color-primary),inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)))}@media(prefers-color-scheme: dark){:root[data-theme=auto]{--wui-signal-heading: #C4AEFF;--color-primary-soft: color-mix(in srgb, #FFFFFF 8%, transparent);--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;--bs-secondary-color-rgb: 192, 192, 192;--bs-tertiary-color-rgb: 160, 160, 160;--bs-secondary-bg-rgb: 22, 22, 22;--bs-tertiary-bg-rgb: 30, 30, 30;--bs-border-color-rgb: 42, 42, 42;--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)}:root[data-theme=auto] .btn-primary{--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)}:root[data-theme=auto] .btn-outline-primary{--bs-btn-hover-bg: var(--wui-signal-dark-fill, #5A22D6);--bs-btn-hover-border-color: var(--wui-signal-dark-fill, #5A22D6)}:root[data-theme=auto] .form-check-input:checked{background-color:var(--wui-signal-dark-fill, #5A22D6);border-color:var(--wui-signal-dark-fill, #5A22D6)}:where(:root[data-theme=auto]) .progress-bar:not([class*=wui-progress-]){color:var(--wui-dark-primary-text, #FFFFFF)}:root[data-theme=auto] :where(.stepper:not(.wizard-stepper)){--wui-step-accent-fg: var(--wui-signal-ink, #16093A)}:where(:root[data-theme=auto]) .struct-card.checked,:where(:root[data-theme=auto]) .tpg-arrow:is(:hover,.wui-force-hover):not(:disabled),:where(:root[data-theme=auto]) .tpg-page:is(:hover,.wui-force-hover):not(.is-active),:where(:root[data-theme=auto]) .u-action:is(:hover,.wui-force-hover):not(:disabled),:where(:root[data-theme=auto]) .tbl-empty-icon,:where(:root[data-theme=auto]) .u-avatar,:where(:root[data-theme=auto]) .wui-file-viewer-audio-art{background:var(--color-primary-soft)}:where(:root[data-theme=auto]) .wui-calendar-view-btn[aria-pressed=true],:where(:root[data-theme=auto]) .compare-table td.is-highlight{background:color-mix(in srgb, #FFFFFF 8%, var(--color-surface))}:where(:root[data-theme=auto]) .table-ledger tbody tr.is-selected:is(:hover,.wui-force-hover){--bs-table-bg-state: color-mix(in srgb, #FFFFFF 12%, transparent)}:where(:root[data-theme=auto]) .table-ledger tbody tr.is-selected>:first-child{box-shadow:inset 3px 0 0 0 var(--color-primary),inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)))}}

package/dist/webority-theme-export.mjs

@@ -1,2 +0,0 @@
-#!/usr/bin/env node
-import{readFileSync as e,writeFileSync as t}from"node:fs";var n=`webority-theme-tokens/1`,r=[`--wui-primary`,`--bs-primary`,`--bs-primary-rgb`,`--bs-link-color-rgb`,`--bs-body-font-family`];function i(e){console.error(`webority-theme-export: ${e}`),console.error(`usage: webority-theme-export <compiled.css>... --product <name> [--out <tokens.json>] [--widths 1440,390]`),process.exit(2)}function a(e){let t=[],n,r,a=[];for(let o=0;o<e.length;o++)e[o]===`--product`?n=e[++o]:e[o]===`--out`?r=e[++o]:e[o]===`--widths`?a=(e[++o]??``).split(`,`).map(e=>e.trim()):e[o].startsWith(`--`)?i(`unknown option ${e[o]}`):t.push(e[o]);return t.length===0&&i(`no compiled CSS file given`),(!n||!/^[a-z0-9-]+$/.test(n))&&i(`--product must be the product's lowercase name`),a.some(e=>!/^[1-9]\d*$/.test(e))&&i(`--widths takes whole pixel widths, such as 1440,390`),a.length>0&&!r&&i(`--widths needs --out, the file name each width's file is named after`),{files:t,product:n,out:r,widths:a.map(Number)}}var o=16;function s(e,t){let n=e.trim(),r=/^(clamp|calc|min|max)\((.*)\)$/.exec(n);if(r){let e=l(r[2],`,`).map(e=>s(e,t));return e.some(e=>e===null)?null:r[1]===`calc`?e.length===1?e[0]:null:r[1]===`clamp`?e.length===3?Math.min(Math.max(e[1],e[0]),e[2]):null:r[1]===`min`?Math.min(...e):Math.max(...e)}let i=n.split(/\s+/),a=0,c=1;for(let e=0;e<i.length;e++){if(e%2==1){if(i[e]!==`+`&&i[e]!==`-`)return null;c=i[e]===`+`?1:-1;continue}let n=/^(-?\d*\.?\d+)(px|rem|vw)?$/.exec(i[e]);if(!n||!n[2]&&Number(n[1])!==0)return null;let r=Number(n[1]),s=n[2]===`rem`?r*o:n[2]===`vw`?r*t/100:r;a+=c*s}return i.length%2==1?a:null}function c(e,t){return Object.fromEntries(Object.entries(e).map(([e,n])=>{let r=s(n,t);return[e,r===null?n:`${Math.round(r*100)/100}px`]}))}function l(e,t){let n=[],r=0,i=null,a=0;for(let o=0;o<e.length;o++){let s=e[o];i?s===`\\`?o++:s===i&&(i=null):s===`"`||s===`'`?i=s:s===`(`||s===`[`?r++:s===`)`||s===`]`?r--:s===t&&r===0&&(n.push(e.slice(a,o)),a=o+1)}return n.push(e.slice(a)),n}var u=10,d=/^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i,f=/^rgba?\(([\s\S]*)\)$/i,p=/^color-mix\(([\s\S]*)\)$/i,m=/^var\(([\s\S]*)\)$/i;function h(e,t,n=0){if(n>u)return null;let r=e.trim(),i=m.exec(r);if(i){let e=l(i[1],`,`),r=e[0].trim();if(!/^--[a-z0-9-]+$/i.test(r))return null;let a=t(r);if(a!==void 0)return h(a,t,n+1);let o=e.slice(1).join(`,`).trim();return o?h(o,t,n+1):null}let a=d.exec(r);if(a){let e=a[1];e.length<=4&&(e=[...e].map(e=>e+e).join(``)),e.length===6&&(e+=`ff`);let t=t=>Number.parseInt(e.slice(t,t+2),16);return[t(0),t(2),t(4),t(6)/255]}let o=f.exec(r);if(o)return g(o[1]);let s=p.exec(r);if(s)return y(s[1],t,n);let c=r.toLowerCase();return c===`white`?[255,255,255,1]:c===`black`?[0,0,0,1]:c===`transparent`?[0,0,0,0]:null}function g(e){let t=e.trim(),n,r=l(t,`/`);if(r.length>2)return null;r.length===2&&(t=r[0].trim(),n=r[1].trim());let i=l(t,`,`).flatMap(e=>e.trim().split(/\s+/)).filter(Boolean);if(i.length!==3&&i.length!==4)return null;let a=i.slice(0,3).map(e=>/^-?\d*\.?\d+$/.test(e)?Math.min(255,Math.max(0,Number(e))):null);if(a.some(e=>e===null))return null;if(i.length===4){if(n!==void 0)return null;n=i[3]}let o=n===void 0?1:_(n);return o===null?null:[...a,o]}function _(e){let t=e.trim(),n=/^(-?\d*\.?\d+)%$/.exec(t);return n?Math.min(1,Math.max(0,Number(n[1])/100)):/^-?\d*\.?\d+$/.test(t)?Math.min(1,Math.max(0,Number(t))):null}function v(e){let t=e.trim(),n=/\s+(-?\d*\.?\d+)%$/.exec(t);if(!n)return{colour:t};let r=t.slice(0,n.index).trim();return r?{colour:r,percent:Number(n[1])}:null}function y(e,t,n){let r=l(e,`,`);if(r.length!==3||!/^in\s+srgb$/i.test(r[0].trim()))return null;let i=v(r[1]),a=v(r[2]);if(!i||!a)return null;let o=h(i.colour,t,n+1),s=h(a.colour,t,n+1);if(!o||!s)return null;let c=i.percent,u=a.percent,d=1;if(c===void 0&&u===void 0)c=50,u=50;else if(u===void 0)u=100-c;else if(c===void 0)c=100-u;else if(c+u!==100){let e=c+u;e>0?(e<100&&(d=e/100),c=c*100/e,u=u*100/e):(c=0,u=0)}let f=c/100,p=u/100,m=o[3]*f+s[3]*p;return[...[0,1,2].map(e=>m===0?0:(o[e]*o[3]*f+s[e]*s[3]*p)/m),m*d]}function b(e){let t=e.slice(0,3).map(e=>Math.round(Math.min(255,Math.max(0,e))).toString(16).padStart(2,`0`)).join(``),n=Math.round(Math.min(1,Math.max(0,e[3]))*255);return`#${t}${n<255?n.toString(16).padStart(2,`0`):``}`}function x(e){let t=[],n=0,r=null,i=0,a=-1;for(let o=0;o<e.length;o++){let s=e[o];if(r)s===`\\`?o++:s===r&&(r=null);else if(s===`"`||s===`'`)r=s;else if(s===`{`)n===0&&(a=o),n++;else if(s===`}`){if(n--,n===0){let n=e.slice(i,a).trim();n.startsWith(`@`)||t.push({selectors:l(n,`,`).map(S),body:e.slice(a+1,o)}),i=o+1}}else s===`;`&&n===0&&(i=o+1)}return t}function S(e){return e.trim().replace(/\s+/g,` `).replace(/["']/g,``)}var C=new Set([`:root`,`[data-bs-theme=light]`,`:root[data-bs-theme=light]`,`:root[data-theme=light]`]),w=new Set([`:root[data-theme=dark]`,`:root[data-bs-theme=dark]`]),T=new Set([`[data-bs-theme=dark]`]);function E(e){let t=[];for(let n of l(e,`;`)){let e=n.indexOf(`:`);if(e<0)continue;let r=n.slice(0,e).trim();r.startsWith(`--`)&&t.push([r,n.slice(e+1).trim().replace(/\s*!important$/,``)])}return t}function D(e,t){let n=e;for(let e=0;e<8;e+=1){let e=/^var\(\s*(--[\w-]+)\s*\)$/.exec(n);if(!e)return n;if(n=t(e[1]),n===void 0)return null}return null}function O(e,t,n){for(let[r,i]of Object.entries(e)){if(!i.startsWith(`var(`)&&!i.startsWith(`color-mix(`))continue;let a=h(i,t,0);if(a){e[r]=b(a);continue}let o=i.startsWith(`var(`)?D(i,t):null;o!==null&&o!==i?e[r]=o:console.error(`webority-theme-export: ${r} in ${n} left as written: ${i}`)}}var{files:k,product:A,out:j,widths:M}=a(process.argv.slice(2)),N={},P={},F={};for(let t of k){let n=e(t,`utf8`).replace(/\/\*[\s\S]*?\*\//g,``);for(let e of x(n)){let t=t=>e.selectors.some(e=>t.has(e)),n=t(w)?P:t(T)?F:t(C)?N:null;if(n)for(let[t,r]of E(e.body))n[t]=r}}O(N,e=>N[e],`light`),O(P,e=>e in P?P[e]:N[e],`dark`),O(F,e=>e in F?F[e]:e in P?P[e]:N[e],`bootstrapDark`);var I=r.filter(e=>!(e in N));I.length>0&&(console.error(`webority-theme-export: ${k.join(`, `)} declares no ${I.join(`, `)} on :root.`),console.error(`Pass the compiled stylesheet that carries the full theme, not a page or component bundle.`),process.exit(1));var L=e=>Object.fromEntries(Object.entries(e).sort(([e],[t])=>e.localeCompare(t))),R=`${JSON.stringify({format:n,product:A,light:L(N),dark:L(P),bootstrapDark:L(F)},null,2)}\n`;if(M.length>0){let e=j.replace(/\.json$/i,``);for(let r of M){let i=`${e}-${r}.json`,a={light:c(N,r),dark:c(P,r),bootstrapDark:c(F,r)},o={format:n,product:A,width:r,light:L(a.light),dark:L(a.dark),bootstrapDark:L(a.bootstrapDark)};t(i,`${JSON.stringify(o,null,2)}\n`),process.stderr.write(`webority-theme-export: ${Object.keys(N).length} light values at ${r}px -> ${i}\n`)}}else j?(t(j,R),process.stderr.write(`webority-theme-export: ${Object.keys(N).length} light and ${Object.keys(P).length} dark and ${Object.keys(F).length} Bootstrap dark values -> ${j}\n`)):process.stdout.write(R);export{};

package/scss/_brand-signal.scss

@@ -1,249 +0,0 @@
-// Signal: an opt-in brand layer, a violet-primary palette with ink headings and a serif display face.
-// Its dark mode is pure black with neutral grey surfaces; violet is kept for accents only.
-//
-// Loaded AFTER webority-theme.css; the default theme never contains these values. It re-points the
-// --wui-* tokens, then overrides the few Bootstrap values the theme compiles as literals (button
-// variables, link and focus-ring colours, dark-mode rgb triplets), because those are not tokens.
-//
-// Dark mode must match or beat the theme's own selectors, which are
-// :root[data-theme="dark"], :root[data-bs-theme="dark"] and, under @media (prefers-color-scheme: dark),
-// :root[data-theme="auto"] (see _wui-aliases.scss). A lone [data-theme=dark] loses to the second and
-// third, so the dark block below is emitted under all three.
-
-// The theme ships the Demi Bold file but declares no weight-600 face for the display family.
-@font-face {
-    font-family: "Webority Serif";
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url("../fonts/serif/WeboritySerif-DemiBold.woff2") format("woff2");
-}
-
-:root {
-    // 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;
-    --wui-signal-ink: #16093A;
-    --wui-signal-heading: #4C1D95;
-    // Reserved for unread counts (white text on it is 5.6:1); never a button or link colour.
-    --wui-signal-pink: #B517C8;
-    // Filled primary controls in dark mode: lighter than the light-mode fill so the edge shows on the ink page.
-    --wui-signal-dark-fill: #5A22D6;
-    --wui-signal-dark-fill-hover: #6B35E6;
-
-    --bs-font-sans-serif: "Webority Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
-    --bs-body-font-family: var(--bs-font-sans-serif);
-    --wui-font-display: "Webority Serif", Georgia, "Times New Roman", serif;
-
-    --wui-primary: #4A0FBF;
-    --wui-primary-hover: #3D0CA0;
-    --wui-primary-pressed: #340A88;
-    --wui-primary-50: #8B66E6;
-    --wui-primary-30: #B9A2F2;
-    --wui-primary-20: #D9CBFA;
-    --wui-primary-15: #E6DCFD;
-    --wui-primary-10: #F1EBFF;
-    --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: var(--wui-primary, #4A0FBF);
-    --wui-accent-dark: #340A88;
-    --wui-surface-soft: #F1EBFF;
-    --wui-surface-violet: #E6DCFD;
-    --wui-surface-violet-soft: #F8F5FF;
-    --wui-hero-gradient: radial-gradient(ellipse 120% 80% at 50% 30%, #8B66E6 0%, #4A0FBF 35%, #3D0CA0 75%, #16093A 100%);
-    --wui-cta-gradient: radial-gradient(ellipse 120% 100% at 50% 50%, #2B1150 0%, #16093A 60%, #0E0626 100%);
-
-    --wui-text-heading: #16093A;
-    --wui-text-1: #2B2B2B;
-    --wui-text-2: #5A5A5A;
-    // Muted text: #777777 measures 4.48:1 on white and less on the tints; #6A6A6A clears 4.5:1 on every tint, the violet one included.
-    --wui-text-3: #6A6A6A;
-    --wui-text-4: #9A9A9A;
-    --wui-text-5: #CFC9DE;
-    --wui-ink: #16093A;
-
-    --wui-bg-page: #F8F6FD;
-    --wui-bg-light: #FFFFFF;
-    --wui-bg-elevated: #FBFAFE;
-    --wui-bg-muted: #F3EFFB;
-    --wui-field-bg: #FBFAFE;
-    --wui-border-light: #E8E4F2;
-    --wui-border-soft: #F3F0FA;
-    --wui-progress-track: #E8E4F2;
-    --wui-neutral-border-dark: #E8E4F2;
-    --wui-neutral-bg-dark: #F3EFFB;
-    --wui-shadow-overlay: 0 8px 28px -6px rgba(22, 9, 58, 0.16);
-    --wui-shadow-overlay-lg: 0 24px 60px -16px rgba(22, 9, 58, 0.30);
-
-    // Dark mode is pure black and neutral grey; violet appears only on accents (fills, links, focus, selection marks).
-    --wui-dark-bg-page: #000000;
-    --wui-dark-bg-elevated: #0F0F0F;
-    --wui-dark-bg-surface: #161616;
-    --wui-dark-bg-muted: #1E1E1E;
-    --wui-dark-border: #2A2A2A;
-    --wui-dark-border-strong: #333333;
-    --wui-dark-progress-track: #333333;
-    --wui-dark-text: #EDEDED;
-    --wui-dark-text-muted: #C0C0C0;
-    --wui-dark-text-subtle: #A0A0A0;
-    --wui-dark-primary: #A98BFF;
-    --wui-dark-primary-hover: #BFA6FF;
-
-    // Values the theme compiles as literals rather than tokens.
-    --bs-primary: #4A0FBF;
-    --bs-primary-rgb: 74, 15, 191;
-    // 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: 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: 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 {
-    background-color: var(--color-primary);
-    border-color: var(--color-primary);
-}
-
-// Display type: Webority Serif Demi Bold only at 24px and above (page and result titles); every
-// smaller title stays in Webority Sans.
-.page-title,
-.result-title {
-    font-family: var(--wui-font-display);
-    font-weight: 600;
-    font-style: normal;
-    letter-spacing: -0.01em;
-    color: var(--color-text);
-}
-// The compact page titles (size sm and the page header bar) are 20px, so they keep the sans face.
-.page-header-sm .page-title,
-.page-header.page-header-bar .page-title {
-    font-family: inherit;
-}
-
-@mixin wui-signal-dark {
-    --wui-signal-heading: #C4AEFF;
-    // 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);
-    // 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;
-    --bs-secondary-color-rgb: 192, 192, 192;
-    --bs-tertiary-color-rgb: 160, 160, 160;
-    --bs-secondary-bg-rgb: 22, 22, 22;
-    --bs-tertiary-bg-rgb: 30, 30, 30;
-    --bs-border-color-rgb: 42, 42, 42;
-    --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: 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: var(--wui-signal-dark-fill, #5A22D6);
-        --bs-btn-hover-border-color: var(--wui-signal-dark-fill, #5A22D6);
-    }
-
-    .form-check-input:checked {
-        background-color: var(--wui-signal-dark-fill, #5A22D6);
-        border-color: var(--wui-signal-dark-fill, #5A22D6);
-    }
-
-    // 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: var(--wui-signal-ink, #16093A);
-    }
-
-    // Components that mix their violet fill inline rather than through --color-primary-soft.
-    // :where(&) keeps each rule at the component's own specificity, so a tone variant still wins.
-    :where(&) .struct-card.checked,
-    :where(&) .tpg-arrow:hover:not(:disabled),
-    :where(&) .tpg-page:hover:not(.is-active),
-    :where(&) .u-action:hover:not(:disabled),
-    :where(&) .tbl-empty-icon,
-    :where(&) .u-avatar,
-    :where(&) .wui-file-viewer-audio-art {
-        background: var(--color-primary-soft);
-    }
-    :where(&) .wui-calendar-view-btn[aria-pressed="true"],
-    :where(&) .compare-table td.is-highlight {
-        background: color-mix(in srgb, #FFFFFF 8%, var(--color-surface));
-    }
-    :where(&) .table-ledger tbody tr.is-selected:hover {
-        --bs-table-bg-state: color-mix(in srgb, #FFFFFF 12%, transparent);
-    }
-    // A grey row alone reads as disabled; the violet edge says chosen. One step below the row status
-    // bar's specificity, so a status row keeps its own colour bar.
-    :where(&) .table-ledger tbody tr.is-selected > :first-child {
-        box-shadow:
-            inset 3px 0 0 0 var(--color-primary),
-            inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
-    }
-}
-
-:root[data-theme="dark"],
-:root[data-bs-theme="dark"] {
-    @include wui-signal-dark;
-}
-
-:root[data-theme="auto"] {
-    @media (prefers-color-scheme: dark) {
-        @include wui-signal-dark;
-    }
-}