@saasicat/ui-vue 0.22.2 → 0.23.0

package/src/pages-tenant/PlanChangeWizard.vue

@@ -511,18 +511,11 @@ watch(
 }
 /* CSS vars for light + dark mode */
 .sp-wizard {
-    --sp-wiz-border: rgba(0, 0, 0, 0.08);
-    --sp-wiz-text-strong: rgba(0, 0, 0, 0.87);
-    --sp-wiz-text-muted: rgba(0, 0, 0, 0.6);
-    --sp-wiz-text-faint: rgba(0, 0, 0, 0.55);
-    --sp-wiz-border-soft: rgba(0, 0, 0, 0.1);
-}
-:global(.body--dark) .sp-wizard {
-    --sp-wiz-border: rgba(255, 255, 255, 0.12);
-    --sp-wiz-text-strong: rgba(255, 255, 255, 0.92);
-    --sp-wiz-text-muted: rgba(255, 255, 255, 0.7);
-    --sp-wiz-text-faint: rgba(255, 255, 255, 0.6);
-    --sp-wiz-border-soft: rgba(255, 255, 255, 0.18);
+    --sp-wiz-border: var(--sa-color-border);
+    --sp-wiz-text-strong: var(--sa-color-fg-heading);
+    --sp-wiz-text-muted: var(--sa-color-fg-secondary);
+    --sp-wiz-text-faint: var(--sa-color-fg-muted);
+    --sp-wiz-border-soft: var(--sa-color-border-soft);
 }
 .sp-wizard__head {
     display: flex;
@@ -531,13 +524,13 @@ watch(
     border-bottom: 1px solid var(--sp-wiz-border);
 }
 .sp-wizard__title {
-    font-size: 18px;
+    font-size: var(--sa-text-xl);
     font-weight: 600;
     color: var(--sp-wiz-text-strong);
 }
 .sp-wizard__sub {
     color: var(--sp-wiz-text-muted);
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .sp-wizard__intro {
     color: var(--sp-wiz-text-muted);
@@ -550,8 +543,8 @@ watch(
     padding: 24px 0;
 }
 .sp-wizard__error {
-    color: var(--q-negative, #c10015);
-    background: rgba(193, 0, 21, 0.08);
+    color: var(--sa-color-negative);
+    background: var(--sa-color-negative-surface);
     padding: 12px;
     border-radius: 4px;
 }
@@ -559,14 +552,14 @@ watch(
     margin-bottom: 12px;
 }
 .sp-wizard__proration {
-    background: rgba(25, 118, 210, 0.06);
+    background: var(--sa-color-info-surface);
     padding: 12px 14px;
     border-radius: 4px;
     margin-top: 12px;
 }
 .sp-wizard__proration h4 {
     margin: 0 0 6px;
-    font-size: 14px;
+    font-size: var(--sa-text-lg);
 }
 .sp-wizard__proration p {
     margin: 0;
@@ -579,7 +572,7 @@ watch(
 .sp-wizard__limits thead th {
     padding: 6px 12px;
     text-align: left;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     color: var(--sp-wiz-text-faint);
     text-transform: uppercase;
     border-bottom: 1px solid var(--sp-wiz-border-soft);
@@ -592,33 +585,33 @@ watch(
 .sp-wizard__feat h4,
 .sp-wizard__blockers h4 {
     margin: 0 0 6px;
-    font-size: 14px;
+    font-size: var(--sa-text-lg);
 }
 .sp-wizard__feat--warn {
-    color: rgba(193, 0, 21, 0.8);
+    color: var(--sa-color-negative);
 }
 .sp-wizard__blockers {
-    color: var(--q-negative, #c10015);
-    background: rgba(193, 0, 21, 0.06);
+    color: var(--sa-color-negative);
+    background: var(--sa-color-negative-surface);
     padding: 12px 14px;
     border-radius: 4px;
 }
 .sp-wizard__warnings {
-    color: var(--q-warning, #c87b00);
-    font-size: 13px;
+    color: var(--sa-color-warning);
+    font-size: var(--sa-text-md);
 }
 .sp-wizard__confirm-line {
     color: var(--sp-wiz-text-muted);
 }
 .sp-wizard__price-summary {
     margin-top: 16px;
-    background: rgba(25, 118, 210, 0.06);
+    background: var(--sa-color-info-surface);
     padding: 12px 14px;
     border-radius: 4px;
 }
 .sp-wizard__price-summary h4 {
     margin: 0 0 8px;
-    font-size: 14px;
+    font-size: var(--sa-text-lg);
 }
 .sp-wizard__price-row {
     display: flex;

package/src/pages-tenant/TenantPlanSection.vue

@@ -616,25 +616,17 @@ async function changePlan(plan: string, cycle: 'MONTHLY' | 'YEARLY', immediate:
 
 <style>
 .sp-plan-section {
-    --sp-text-secondary: rgba(0, 0, 0, 0.6);
-    --sp-text-muted: rgba(0, 0, 0, 0.55);
-    --sp-text-disabled: rgba(0, 0, 0, 0.5);
-    --sp-text-strong: rgba(0, 0, 0, 0.7);
-    --sp-border: rgba(0, 0, 0, 0.08);
-    --sp-summary-bg: rgba(25, 118, 210, 0.06);
+    --sp-text-secondary: var(--sa-color-fg-secondary);
+    --sp-text-muted: var(--sa-color-fg-muted);
+    --sp-text-disabled: var(--sa-color-fg-subtle);
+    --sp-text-strong: var(--sa-color-fg-body);
+    --sp-border: var(--sa-color-border);
+    --sp-summary-bg: var(--sa-color-info-surface);
 
     display: flex;
     flex-direction: column;
     gap: 16px;
 }
-body.body--dark .sp-plan-section {
-    --sp-text-secondary: rgba(255, 255, 255, 0.72);
-    --sp-text-muted: rgba(255, 255, 255, 0.62);
-    --sp-text-disabled: rgba(255, 255, 255, 0.5);
-    --sp-text-strong: rgba(255, 255, 255, 0.85);
-    --sp-border: rgba(255, 255, 255, 0.16);
-    --sp-summary-bg: rgba(25, 118, 210, 0.18);
-}
 .sp-plan-section__loading,
 .sp-plan-section__empty {
     display: flex;
@@ -644,8 +636,8 @@ body.body--dark .sp-plan-section {
     color: var(--sp-text-secondary);
 }
 .sp-plan-section__error {
-    color: var(--q-negative, #c10015);
-    background: rgba(193, 0, 21, 0.08);
+    color: var(--sa-color-negative);
+    background: var(--sa-color-negative-surface);
     padding: 12px 16px;
     border-radius: 4px;
 }
@@ -657,7 +649,7 @@ body.body--dark .sp-plan-section {
     flex-wrap: wrap;
 }
 .sp-plan-section__eyebrow {
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--sp-text-muted);
@@ -665,7 +657,7 @@ body.body--dark .sp-plan-section {
 }
 .sp-plan-section__plan-name {
     margin: 0 0 8px;
-    font-size: 22px;
+    font-size: var(--sa-text-2xl);
     font-weight: 600;
 }
 .sp-plan-section__meta {
@@ -683,7 +675,7 @@ body.body--dark .sp-plan-section {
 .sp-plan-section__sub {
     margin: 6px 0 0;
     color: var(--sp-text-muted);
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .sp-plan-section__usage-title {
     font-weight: 600;
@@ -716,10 +708,10 @@ body.body--dark .sp-plan-section {
 }
 .sp-plan-section__item-price {
     color: var(--sp-text-secondary);
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .sp-plan-section__item-canceled {
     color: var(--sp-text-disabled);
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 </style>

package/src/pages-tenant/UsageBar.vue

@@ -73,20 +73,20 @@ const formattedMax = computed(() => {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .sp-usage-bar__label {
-    color: var(--q-secondary, #555);
+    color: var(--sa-color-fg-secondary);
     font-weight: 500;
 }
 .sp-usage-bar__values {
     font-variant-numeric: tabular-nums;
-    color: var(--q-secondary, #555);
+    color: var(--sa-color-fg-secondary);
 }
 .sp-usage-bar__track {
     width: 100%;
     height: 8px;
-    background: rgba(0, 0, 0, 0.08);
+    background: var(--sa-color-bg-sunken);
     border-radius: 4px;
     overflow: hidden;
 }
@@ -96,12 +96,12 @@ const formattedMax = computed(() => {
     border-radius: 4px;
 }
 .sp-usage-bar--ok .sp-usage-bar__fill {
-    background: var(--q-positive, #21ba45);
+    background: var(--sa-color-positive);
 }
 .sp-usage-bar--warn .sp-usage-bar__fill {
-    background: var(--q-warning, #f2c037);
+    background: var(--sa-color-warning-strong);
 }
 .sp-usage-bar--full .sp-usage-bar__fill {
-    background: var(--q-negative, #c10015);
+    background: var(--sa-color-negative);
 }
 </style>

package/src/pages-tenant/tenant-plan-section/BundlePreviewDialog.vue

@@ -246,32 +246,32 @@ function close() {
     padding-bottom: 8px;
 }
 .sp-bundle-preview__title {
-    font-size: 16px;
+    font-size: var(--sa-text-lg);
     font-weight: 600;
 }
 .sp-bundle-preview__bundle {
     margin-top: 2px;
-    color: var(--sp-text-secondary, rgba(0, 0, 0, 0.6));
+    color: var(--sp-text-secondary, var(--sa-color-fg-secondary));
 }
 .sp-bundle-preview__loading {
     display: flex;
     align-items: center;
     gap: 12px;
-    color: var(--sp-text-secondary, rgba(0, 0, 0, 0.6));
+    color: var(--sp-text-secondary, var(--sa-color-fg-secondary));
 }
 .sp-bundle-preview__error {
-    color: var(--q-negative, #c10015);
+    color: var(--sa-color-negative);
 }
 .sp-bundle-preview__blockers {
-    background: rgba(193, 0, 21, 0.08);
-    color: var(--q-negative, #c10015);
+    background: var(--sa-color-negative-surface);
+    color: var(--sa-color-negative);
 }
 .sp-bundle-preview__warnings {
-    background: rgba(242, 192, 55, 0.12);
+    background: var(--sa-color-warning-surface-strong);
 }
 .sp-bundle-preview__block-title {
     font-weight: 600;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     margin-bottom: 6px;
 }
 .sp-bundle-preview__block-subtitle {
@@ -281,26 +281,26 @@ function close() {
 .sp-bundle-preview__warnings ul {
     margin: 0;
     padding-left: 18px;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .sp-bundle-preview__requires {
     margin-top: 6px;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .sp-bundle-preview__price-row {
     display: flex;
     justify-content: space-between;
     gap: 16px;
     padding: 4px 0;
-    font-size: 14px;
+    font-size: var(--sa-text-lg);
 }
 .sp-bundle-preview__price-row small {
     font-weight: 400;
-    color: var(--sp-text-muted, rgba(0, 0, 0, 0.55));
+    color: var(--sp-text-muted, var(--sa-color-fg-muted));
 }
 .sp-bundle-preview__note {
-    font-size: 13px;
-    color: var(--sp-text-muted, rgba(0, 0, 0, 0.55));
+    font-size: var(--sa-text-md);
+    color: var(--sp-text-muted, var(--sa-color-fg-muted));
     padding: 4px 0;
 }
 </style>

package/src/pages-tenant/tenant-plan-section/TenantBundleStore.vue

@@ -246,9 +246,9 @@ const availableRows = computed<AvailableRow[]>(() =>
 
 <style scoped>
 .sp-bundle-store__subtitle {
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     font-weight: 600;
-    color: var(--sp-text-strong, rgba(0, 0, 0, 0.7));
+    color: var(--sp-text-strong, var(--sa-color-fg-body));
     margin: 4px 0 8px;
 }
 .sp-bundle-store__available {
@@ -260,8 +260,8 @@ const availableRows = computed<AvailableRow[]>(() =>
     gap: 12px;
 }
 .sp-bundle-store__empty {
-    color: var(--sp-text-muted, rgba(0, 0, 0, 0.55));
-    font-size: 13px;
+    color: var(--sp-text-muted, var(--sa-color-fg-muted));
+    font-size: var(--sa-text-md);
 }
 .sp-bundle-store__grid {
     display: grid;
@@ -288,7 +288,7 @@ const availableRows = computed<AvailableRow[]>(() =>
 }
 .sp-bundle-store__card-name {
     font-weight: 600;
-    font-size: 15px;
+    font-size: var(--sa-text-lg);
 }
 .sp-bundle-store__card-price {
     font-weight: 600;
@@ -296,16 +296,16 @@ const availableRows = computed<AvailableRow[]>(() =>
 }
 .sp-bundle-store__card-price small {
     font-weight: 400;
-    color: var(--sp-text-muted, rgba(0, 0, 0, 0.55));
+    color: var(--sp-text-muted, var(--sa-color-fg-muted));
 }
 .sp-bundle-store__card-desc {
     margin: 0;
-    font-size: 13px;
-    color: var(--sp-text-secondary, rgba(0, 0, 0, 0.6));
+    font-size: var(--sa-text-md);
+    color: var(--sp-text-secondary, var(--sa-color-fg-secondary));
 }
 .sp-bundle-store__card-feats {
-    font-size: 12px;
-    color: var(--sp-text-muted, rgba(0, 0, 0, 0.55));
+    font-size: var(--sa-text-sm);
+    color: var(--sp-text-muted, var(--sa-color-fg-muted));
 }
 .sp-bundle-store__card-feats-label {
     font-weight: 500;

package/src/pages-tenant/tenant-plan-section/TenantFeatureMatrix.vue

@@ -118,8 +118,8 @@ const features = computed<FeatureRow[]>(() => {
     flex-wrap: wrap;
 }
 .sp-feature-matrix__desc {
-    font-size: 12px;
-    color: var(--sp-text-muted, rgba(0, 0, 0, 0.55));
+    font-size: var(--sa-text-sm);
+    color: var(--sp-text-muted, var(--sa-color-fg-muted));
     margin-top: 2px;
 }
 </style>

package/src/quasar/create-super-admin-app.ts

@@ -44,12 +44,19 @@ import {
     type SuperAdminLoginAdapter,
 } from '../vue/super-admin-context.js';
 import { SUPER_ADMIN_NOTIFY_KEY, type UiNotify } from '../vue/ui-notify.js';
+import {
+    SA_THEME_KEY,
+    createSaTheme,
+    type SaTheme,
+    type SaThemeOptions,
+} from '../vue/use-sa-theme.js';
 import {
     SUPER_ADMIN_I18N_KEY,
     createSuperAdminI18n,
     type SuperAdminI18n,
     type SuperAdminI18nOptions,
 } from '../vue/use-super-admin-i18n.js';
+import { bindSaThemeToDocument } from './dark-bridge.js';
 import { quasarNotify } from './notify.js';
 
 export interface CreateSuperAdminAppOptions extends SuperAdminGuardOptions {
@@ -112,6 +119,17 @@ export interface CreateSuperAdminAppOptions extends SuperAdminGuardOptions {
      * runtime. Consumed via `useSuperAdminI18n()` / `useSaMessages()`.
      */
     i18n?: SuperAdminI18nOptions;
+    /**
+     * Optional: colour scheme. Default follows the operating system and
+     * remembers an explicit pick. The context is returned on the handle
+     * (`handle.theme`) — set `handle.theme.scheme.value = 'dark'` to switch at
+     * runtime, and read it anywhere via `useSaTheme()`.
+     *
+     * Whatever it resolves to is mirrored onto `<html data-sa-theme>` AND into
+     * Quasar's `Dark`, so the platform's surfaces and Quasar's own components
+     * never disagree.
+     */
+    theme?: SaThemeOptions;
 }
 
 export interface SuperAdminAppHandle {
@@ -120,10 +138,29 @@ export interface SuperAdminAppHandle {
     pinia: Pinia;
     /** i18n context of the shell — switch locale via `i18n.locale.value`. */
     i18n: SuperAdminI18n;
+    /** Colour scheme of the shell — switch via `theme.scheme.value`. */
+    theme: SaTheme;
     /** Mounts the app on a selector. Returns the root component instance. */
     mount: (selector: string | Element) => ReturnType<App['mount']>;
+    /**
+     * Releases what this helper attached to the DOCUMENT — the theme's
+     * `prefers-color-scheme` subscription and the bridge that mirrors it onto
+     * `data-sa-theme` and Quasar's `Dark`. Idempotent; it does not unmount the
+     * app, which is `handle.app.unmount()`.
+     *
+     * Only matters where a shell is torn down while the document survives: hot
+     * reload, a micro-frontend, a second shell in one page. Skip it and the old
+     * bridge keeps writing to the one document on the next OS theme change, and
+     * can overrule the scheme the new shell was given.
+     */
+    dispose: () => void;
 }
 
+/** Marks Quasar's teleported nodes so the theme can reach them. Exported so a
+ * test fixture can install the same config a real app gets — without it the
+ * `.sa-portal` rules are exercised by nothing. */
+export const SA_PORTAL_CLASS = 'sa-portal';
+
 const DEFAULT_QUASAR_OPTIONS: QuasarPluginOptions = {
     plugins: { Notify, Dialog, Loading },
     config: { notify: { position: 'top-right', timeout: 3000 } },
@@ -138,7 +175,35 @@ const DEFAULT_QUASAR_OPTIONS: QuasarPluginOptions = {
 export function createSuperAdminApp(options: CreateSuperAdminAppOptions): SuperAdminAppHandle {
     const app = createApp(options.rootComponent);
 
-    app.use(Quasar, options.quasarOptions ?? DEFAULT_QUASAR_OPTIONS);
+    // Quasar teleports every dialog, menu and tooltip into a div appended to
+    // `<body>`, so a rule prefixed with `.sa-page` never reaches them — which is
+    // why dialog cards kept Quasar's neutral grey in dark mode while the page
+    // behind them was slate, and why the outlined-field correction had silently
+    // never applied inside a dialog.
+    //
+    // Scope, stated plainly: `globalNodes` is document-wide, not per-owner —
+    // `createGlobalNode` stamps the class on every portal Quasar opens, the
+    // shell's own and any a contributed project page opens inside it. That is
+    // intended: a page mounted in the admin shell is admin UI, and the same
+    // theme already repaints its cards via `.sa-page`. What the class buys is
+    // that an app which never calls `createSuperAdminApp` stays untouched —
+    // which a bare `.q-dialog .q-card` rule could not promise.
+    const quasarOptions = options.quasarOptions ?? DEFAULT_QUASAR_OPTIONS;
+    // `globalNodes` is a documented Quasar config option that its TypeScript
+    // types do not declare (see quasar/src/utils/private.config/nodes.js, which
+    // reads `globalConfig.globalNodes.class`). The cast is the exception this
+    // codebase allows for an API that exists and is simply untyped upstream.
+    const config = quasarOptions.config as Record<string, unknown> | undefined;
+    const existingPortalClass = (config?.globalNodes as { class?: string } | undefined)?.class;
+    app.use(Quasar, {
+        ...quasarOptions,
+        config: {
+            ...quasarOptions.config,
+            globalNodes: {
+                class: [existingPortalClass, SA_PORTAL_CLASS].filter(Boolean).join(' '),
+            },
+        },
+    } as QuasarPluginOptions);
 
     const pinia = createPinia();
     app.use(pinia);
@@ -164,9 +229,34 @@ export function createSuperAdminApp(options: CreateSuperAdminAppOptions): SuperA
     };
 
     const i18n = createSuperAdminI18n(options.i18n);
+    // An app that configured Quasar's dark mode has STATED a preference; the
+    // platform's default of 'system' has not. Seeding from it keeps the
+    // documented "Quasar decided" path working here — without it the bridge's
+    // first, immediate tick resolved 'system' against the machine and called
+    // `Dark.set()` with the answer, erasing the app's own choice one line after
+    // it was applied. In both directions: a configured `true` was undone on a
+    // light machine, a configured `false` on a dark one.
+    //
+    // Read from the OPTION rather than from `Dark.isActive`, because the option
+    // distinguishes three states and the resulting flag only two: `'auto'` means
+    // "follow the machine", which is what 'system' already does, and reading the
+    // flag would freeze whatever the machine happened to say at boot.
+    //
+    // A stored operator pick still outranks this — `createSaTheme` gives storage
+    // precedence over the `scheme` option — because that is a person choosing
+    // rather than a default.
+    const configuredDark = options.quasarOptions?.config?.dark;
+    const theme = createSaTheme({
+        ...options.theme,
+        scheme:
+            options.theme?.scheme ??
+            (typeof configuredDark === 'boolean' ? (configuredDark ? 'dark' : 'light') : undefined),
+    });
+    const stopThemeBridge = bindSaThemeToDocument(theme);
 
     app.provide(SUPER_ADMIN_BRAND_KEY, { tag: 'SuperAdmin', ...options.brand });
     app.provide(SUPER_ADMIN_I18N_KEY, i18n);
+    app.provide(SA_THEME_KEY, theme);
     app.provide(SUPER_ADMIN_ENDPOINTS_KEY, endpoints);
     app.provide(SUPER_ADMIN_EXTENSIONS_KEY, options.extensions ?? {});
     app.provide(SUPER_ADMIN_ACTIONS_KEY, options.actions ?? {});
@@ -191,6 +281,11 @@ export function createSuperAdminApp(options: CreateSuperAdminAppOptions): SuperA
         router,
         pinia,
         i18n,
+        theme,
         mount: (selector) => app.mount(selector),
+        dispose: () => {
+            stopThemeBridge();
+            theme.dispose();
+        },
     };
 }

package/src/quasar/dark-bridge.ts

@@ -0,0 +1,66 @@
+// The half of the theme switch that touches the DOM and Quasar.
+//
+// Two things have to agree, or the screen ends up half-dark:
+//
+//   `data-sa-theme` on <html>   drives the platform's own role tokens
+//   Quasar's `Dark.set()`       drives q-card, q-table, q-menu, q-dialog …
+//
+// The stylesheet already accepts Quasar's `body--dark` as a dark trigger, so an
+// app that only calls `$q.dark.set(true)` is complete without this module. What
+// the bridge adds is the other direction — an operator switching the theme in
+// the admin's own header — and, once both exist, keeping them from disagreeing:
+// it watches BOTH and writes each into the other.
+
+import { Dark } from 'quasar';
+import { watch, type WatchStopHandle } from 'vue';
+
+import type { SaTheme } from '../vue/use-sa-theme.js';
+
+/**
+ * Mirrors a theme context onto the document and Quasar. Returns the stop
+ * handle; `createSuperAdminApp()` wires this up for you.
+ *
+ * `immediate` is not optional: at bootstrap the stored pick is already resolved
+ * and nothing has painted yet, so a first-change-only watcher would render one
+ * frame in the wrong theme on every reload.
+ *
+ * That first tick MIRRORS, it does not negotiate — whatever `theme.resolved`
+ * says is written to Quasar, including `Dark.set(false)`. So a caller that
+ * bootstraps with Quasar already dark has to say so when it builds the theme,
+ * or its own choice is erased one line after it was applied.
+ * `createSuperAdminApp` does exactly that, seeding from `Dark.isActive`.
+ */
+export function bindSaThemeToDocument(theme: SaTheme): WatchStopHandle {
+    const toQuasar = watch(
+        theme.resolved,
+        (resolved) => {
+            if (typeof document !== 'undefined') {
+                document.documentElement.setAttribute('data-sa-theme', resolved);
+            }
+            Dark.set(resolved === 'dark');
+        },
+        { immediate: true },
+    );
+
+    // …and back. An app with its own toggle calls `$q.dark.set(false)`, which
+    // this side of the bridge never hears: the theme has not changed, so
+    // `data-sa-theme="dark"` stays on `<html>` while Quasar goes light. That is
+    // the half-dark screen the bridge exists to prevent, arriving from the
+    // other direction.
+    //
+    // No loop: the write-back only fires when Quasar and the theme actually
+    // disagree, and setting the scheme drives `resolved` to the value Quasar
+    // already has, so the outbound watcher's `Dark.set` is a no-op.
+    const fromQuasar = watch(
+        () => Dark.isActive,
+        (isDark) => {
+            const asScheme = isDark ? 'dark' : 'light';
+            if (theme.resolved.value !== asScheme) theme.scheme.value = asScheme;
+        },
+    );
+
+    return () => {
+        toQuasar();
+        fromQuasar();
+    };
+}

package/src/quasar/index.ts

@@ -8,4 +8,5 @@
 // exports, not through this bundle (tsup ignores `.vue`).
 
 export * from './create-super-admin-app.js';
+export * from './dark-bridge.js';
 export * from './notify.js';

package/src/ui/theme/_breakpoints.scss

@@ -0,0 +1,28 @@
+// Breakpoints — the one scale that cannot be a custom property.
+//
+// `@media (min-width: var(--sa-bp-md))` is invalid CSS: custom properties are
+// not substituted inside a media condition. So the values live here for SCSS
+// blocks, and plain-CSS `<style>` blocks use the five literals, which the lint
+// rule allows and nothing else.
+//
+// They are Quasar's own breakpoints, deliberately. A component that changes
+// layout at 980px inside an app whose grid changes at 1024px produces a band
+// 44px wide where the two disagree — and the admin surface had six such
+// values (540, 600, 980, 1100, 1180, 1280), so it had several such bands.
+//
+// Usage:
+//     @use '@saasicat/ui-vue/theme/breakpoints' as bp;
+//     @media (max-width: bp.$sm-max) { … }
+
+$xs: 0;
+$sm: 600px;
+$md: 1024px;
+$lg: 1440px;
+$xl: 1920px;
+
+// Upper bounds, for the `max-width` direction. Quasar uses the same 0.02px
+// step back, so the two never both match at an integer viewport width.
+$xs-max: 599.98px;
+$sm-max: 1023.98px;
+$md-max: 1439.98px;
+$lg-max: 1919.98px;