@webority/theme 0.82.1 → 0.83.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -162,6 +162,26 @@ every component in a product's design language.
162
162
  - Each product serves its file at `/theme/tokens.json` with `Access-Control-Allow-Origin` for the showcase host.
163
163
  - A font the token file names renders only when the page has its face: the theme's own families do.
164
164
 
165
+ ## Forced interaction states
166
+
167
+ The classes `wui-force-hover`, `wui-force-focus` and `wui-force-active` make an element show its hover, focus or
168
+ pressed look without a pointer.
169
+
170
+ They exist in the compiled stylesheets, `@webority/theme/css` and `@webority/theme/css/brand-signal`, not in a
171
+ product's own SCSS build. A product that compiles the theme SCSS itself can add `forcedStatesPlugin()` from
172
+ `scripts/force-state-selectors.mjs` to its PostCSS plugins to get the same classes. The plugin is not part of a
173
+ published package yet, so products use the compiled stylesheets.
174
+
175
+ A class forces only the element that carries it, so a design tool sets it on a part's root and on its first
176
+ focusable child. The purge safelist keeps these three classes.
177
+
178
+ ## Token meanings
179
+
180
+ `@webority/theme/token-meanings.json` maps each published `--wui-*` and `--color-*` token to one sentence saying
181
+ what it is for. The sentence is the `/// meaning:` line above the token in `scss/_tokens.scss` or
182
+ `scss/_wui-aliases.scss`; `node scripts/gen-token-meanings.mjs` writes the file, and check-theme-exports fails when a
183
+ token has no meaning or the file is stale.
184
+
165
185
  ## Dark mode
166
186
 
167
187
  The theme ships with two built-in dark-mode support patterns:
@@ -754,6 +754,8 @@
754
754
  "wui-addon-group",
755
755
  "wui-addon-group-lg",
756
756
  "wui-addon-group-sm",
757
+ "wui-attach-error",
758
+ "wui-attach-progress",
757
759
  "wui-avatar-picker",
758
760
  "wui-avatar-picker-actions",
759
761
  "wui-avatar-picker-badge",
@@ -1061,6 +1063,9 @@
1061
1063
  "wui-flag",
1062
1064
  "wui-float-above",
1063
1065
  "wui-floating-btn",
1066
+ "wui-force-active",
1067
+ "wui-force-focus",
1068
+ "wui-force-hover",
1064
1069
  "wui-form-compact",
1065
1070
  "wui-form-labels-start",
1066
1071
  "wui-form-side",
@@ -1246,6 +1251,7 @@
1246
1251
  "wui-overflow-more",
1247
1252
  "wui-page-header-meta-below",
1248
1253
  "wui-progress-indeterminate",
1254
+ "wui-progress-info",
1249
1255
  "wui-progress-label",
1250
1256
  "wui-progress-labelled",
1251
1257
  "wui-pw-inline",
@@ -1 +1 @@
1
- @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: #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: #4A0FBF;--bs-link-color-rgb: 74, 15, 191;--bs-link-hover-color: #3D0CA0;--bs-link-hover-color-rgb: 61, 12, 160;--bs-focus-ring-color: rgba(74, 15, 191, 0.3)}.btn-primary{--bs-btn-color: #fff;--bs-btn-bg: #4A0FBF;--bs-btn-border-color: #4A0FBF;--bs-btn-hover-color: #fff;--bs-btn-hover-bg: #3D0CA0;--bs-btn-hover-border-color: #3D0CA0;--bs-btn-focus-shadow-rgb: 74, 15, 191;--bs-btn-active-color: #fff;--bs-btn-active-bg: #340A88;--bs-btn-active-border-color: #340A88;--bs-btn-disabled-color: #fff;--bs-btn-disabled-bg: #4A0FBF;--bs-btn-disabled-border-color: #4A0FBF}.btn-outline-primary{--bs-btn-color: var(--color-primary-ink);--bs-btn-border-color: var(--color-primary);--bs-btn-hover-color: #fff;--bs-btn-hover-bg: #4A0FBF;--bs-btn-hover-border-color: #4A0FBF;--bs-btn-active-color: #fff;--bs-btn-active-bg: #340A88;--bs-btn-active-border-color: #340A88;--bs-btn-focus-shadow-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-text: #16093A;--color-progress-label: #16093A;--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: #A98BFF;--bs-link-color-rgb: 169, 139, 255;--bs-link-hover-color: #BFA6FF;--bs-link-hover-color-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: #5A22D6;--bs-btn-border-color: #5A22D6;--bs-btn-hover-bg: #6B35E6;--bs-btn-hover-border-color: #6B35E6;--bs-btn-active-bg: #4A0FBF;--bs-btn-active-border-color: #4A0FBF;--bs-btn-disabled-bg: #5A22D6;--bs-btn-disabled-border-color: #5A22D6}:root[data-theme=dark] .btn-outline-primary,:root[data-bs-theme=dark] .btn-outline-primary{--bs-btn-hover-bg: #5A22D6;--bs-btn-hover-border-color: #5A22D6}:root[data-theme=dark] .form-check-input:checked,:root[data-bs-theme=dark] .form-check-input:checked{background-color:#5a22d6;border-color:#5a22d6}:root[data-theme=dark] :where(.stepper:not(.wizard-stepper)),:root[data-bs-theme=dark] :where(.stepper:not(.wizard-stepper)){--wui-step-accent-fg: #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:hover:not(:disabled),:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .tpg-page:hover:not(.is-active),:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .u-action: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: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-text: #16093A;--color-progress-label: #16093A;--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: #A98BFF;--bs-link-color-rgb: 169, 139, 255;--bs-link-hover-color: #BFA6FF;--bs-link-hover-color-rgb: 191, 166, 255;--bs-focus-ring-color: rgba(169, 139, 255, 0.4)}:root[data-theme=auto] .btn-primary{--bs-btn-bg: #5A22D6;--bs-btn-border-color: #5A22D6;--bs-btn-hover-bg: #6B35E6;--bs-btn-hover-border-color: #6B35E6;--bs-btn-active-bg: #4A0FBF;--bs-btn-active-border-color: #4A0FBF;--bs-btn-disabled-bg: #5A22D6;--bs-btn-disabled-border-color: #5A22D6}:root[data-theme=auto] .btn-outline-primary{--bs-btn-hover-bg: #5A22D6;--bs-btn-hover-border-color: #5A22D6}:root[data-theme=auto] .form-check-input:checked{background-color:#5a22d6;border-color:#5a22d6}:root[data-theme=auto] :where(.stepper:not(.wizard-stepper)){--wui-step-accent-fg: #16093A}:where(:root[data-theme=auto]) .struct-card.checked,:where(:root[data-theme=auto]) .tpg-arrow:hover:not(:disabled),:where(:root[data-theme=auto]) .tpg-page:hover:not(.is-active),:where(:root[data-theme=auto]) .u-action: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: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)))}}
1
+ @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)))}}