npm - @saasicat/ui-vue - Versions diffs - 0.22.2 → 0.24.0 - Mend

@saasicat/ui-vue 0.22.2 → 0.24.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.

Files changed (119) hide show

package/README.md +1 -1
package/dist/{chunk-LY52T4N4.js → chunk-TQQMKWN6.js} +58 -1
package/dist/{chunk-XMMFN2WJ.js → chunk-VYMTWCTT.js} +51 -1
package/dist/client/index.cjs +57 -0
package/dist/client/index.d.cts +58 -1
package/dist/client/index.d.ts +58 -1
package/dist/client/index.js +15 -1
package/dist/index.cjs +321 -159
package/dist/index.d.cts +67 -4
package/dist/index.d.ts +67 -4
package/dist/index.js +72 -2
package/dist/quasar/index.cjs +116 -20
package/dist/quasar/index.d.cts +48 -3
package/dist/quasar/index.d.ts +48 -3
package/dist/quasar/index.js +58 -3
package/dist/{use-super-admin-i18n-CgTuNi8h.d.cts → use-sa-theme-B5t7oXph.d.cts} +51 -1
package/dist/{use-super-admin-i18n-CHNdsSlm.d.ts → use-sa-theme-OUBlaqgl.d.ts} +51 -1
package/package.json +5 -2
package/src/client/identity-accents.ts +129 -0
package/src/client/index.ts +1 -0
package/src/components/BundleVersionPublishDialog.vue +17 -17
package/src/components/KvBlock.vue +6 -6
package/src/components/MarketingPromotionsTab.vue +84 -80
package/src/components/MfaPromptDialog.vue +2 -2
package/src/components/TenantActionConfirmDialog.vue +5 -5
package/src/components/VersionDiffPreview.vue +18 -18
package/src/components/bundle-editor/BundleCreatePanel.vue +52 -52
package/src/components/bundle-editor/BundleFeaturesEditor.vue +20 -20
package/src/components/bundle-editor/BundlePlanCompatPicker.vue +33 -33
package/src/components/bundle-editor/BundleQuotasEditor.vue +26 -26
package/src/components/bundle-editor/BundleStatusBanner.vue +21 -21
package/src/components/bundle-editor/BundleVersionInlineEditor.vue +49 -49
package/src/components/bundle-editor/BundleVersionStrip.vue +30 -30
package/src/components/dialogs/PilotCreateDialog.vue +20 -20
package/src/components/dialogs/PilotEditDialog.vue +6 -6
package/src/components/dialogs/PromoCodeCreateDialog.vue +9 -9
package/src/components/dialogs/PromoCodeDialogFields.vue +64 -63
package/src/components/dialogs/PromoCodeEditDialog.vue +11 -11
package/src/components/dialogs/pilot-dialog.css +48 -48
package/src/components/plan/PlanCycleToggle.vue +9 -16
package/src/components/plan/PlanGrid.vue +30 -34
package/src/components/plan/PriceSummary.vue +35 -35
package/src/components/plan/PromoCodeInput.vue +26 -26
package/src/components/plan/PublicBundleGrid.vue +32 -28
package/src/components/plan-create-dialog/PlanCreateDialog.vue +50 -50
package/src/components/plan-detail/PlanDetail.vue +178 -157
package/src/components/plan-detail/PlanTitleEdit.vue +11 -11
package/src/components/plan-list/PlanList.vue +116 -100
package/src/components/plan-matrix/PlanMatrix.vue +97 -114
package/src/components/plan-review/PlanReview.vue +61 -57
package/src/components/plan-version-editor/PlanVersionEditor.vue +246 -203
package/src/components/wizard-stepper/WizardStepper.vue +17 -17
package/src/index.ts +1 -0
package/src/pages-standard/AdminLayout.vue +58 -37
package/src/pages-standard/AdminManifestErrorPage.vue +6 -6
package/src/pages-standard/AuditPage.vue +3 -3
package/src/pages-standard/BundlesPage.vue +37 -37
package/src/pages-standard/DashboardPage.vue +22 -19
package/src/pages-standard/DiscoveryPage.vue +55 -49
package/src/pages-standard/EmailHistoryPage.vue +53 -71
package/src/pages-standard/MarketingCatalogPage.vue +245 -221
package/src/pages-standard/PilotsPage.vue +7 -6
package/src/pages-standard/PlatformEmailPage.vue +18 -18
package/src/pages-standard/PromoCodeDetailPage.vue +3 -3
package/src/pages-standard/PromoCodesPage.vue +10 -7
package/src/pages-standard/SuperAdminLoginPage.vue +39 -25
package/src/pages-standard/SuperAdminSetupWizard.vue +44 -33
package/src/pages-standard/TenantDetailPage.vue +7 -7
package/src/pages-standard/TenantsPage.vue +16 -50
package/src/pages-standard/bundles-page/BundleAccordionList.vue +13 -13
package/src/pages-standard/discovery-page/CatalogEntryTransPanel.vue +24 -24
package/src/pages-standard/discovery-page/DiscoveryCapList.vue +22 -22
package/src/pages-standard/discovery-page/DiscoveryFeatureCard.vue +39 -39
package/src/pages-standard/discovery-page/DiscoveryQuotaCard.vue +26 -26
package/src/pages-standard/discovery-page/DiscoveryStatusControl.vue +1 -1
package/src/pages-standard/discovery-page/discovery-ui.ts +10 -7
package/src/pages-standard/marketing-catalog/MarketingCatalogAdmin.vue +2 -5
package/src/pages-standard/plan-versions/PlanDiffCard.vue +27 -20
package/src/pages-standard/plan-versions/PlanVersionsDiff.vue +24 -16
package/src/pages-standard/plan-versions/PlanVersionsTimeline.vue +45 -45
package/src/pages-standard/plans-page/PlanBundleOverview.vue +21 -15
package/src/pages-standard/plans-page/PlanPublishDialog.vue +4 -4
package/src/pages-standard/plans-page/PlansPageToast.vue +6 -6
package/src/pages-standard/sa-theme.css +9 -687
package/src/pages-standard/tenants/StatusPill.vue +13 -13
package/src/pages-standard/tenants/format.ts +11 -12
package/src/pages-tenant/LimitsRow.vue +4 -4
package/src/pages-tenant/MySubscriptionBundlesPage.vue +70 -61
package/src/pages-tenant/OnboardingConfigurator.vue +25 -25
package/src/pages-tenant/PackageSnapshotPanel.vue +10 -16
package/src/pages-tenant/PendingVersionBanner.vue +12 -12
package/src/pages-tenant/PlanChangeWizard.vue +22 -76
package/src/pages-tenant/TenantPlanSection.vue +19 -69
package/src/pages-tenant/UsageBar.vue +7 -7
package/src/pages-tenant/default-i18n.ts +113 -0
package/src/pages-tenant/tenant-plan-section/BundlePreviewDialog.vue +14 -14
package/src/pages-tenant/tenant-plan-section/TenantBundleStore.vue +10 -10
package/src/pages-tenant/tenant-plan-section/TenantFeatureMatrix.vue +2 -2
package/src/quasar/create-super-admin-app.ts +96 -1
package/src/quasar/dark-bridge.ts +66 -0
package/src/quasar/index.ts +1 -0
package/src/ui/theme/_breakpoints.scss +34 -0
package/src/ui/theme/base.css +50 -0
package/src/ui/theme/components/body.css +23 -0
package/src/ui/theme/components/button.css +158 -0
package/src/ui/theme/components/card.css +74 -0
package/src/ui/theme/components/field.css +38 -0
package/src/ui/theme/components/hero.css +46 -0
package/src/ui/theme/components/paginator.css +63 -0
package/src/ui/theme/components/section.css +67 -0
package/src/ui/theme/components/statistics.css +189 -0
package/src/ui/theme/components/table.css +60 -0
package/src/ui/theme/index.css +42 -0
package/src/ui/theme/tokens.legacy.css +147 -0
package/src/ui/theme/tokens.primitive.css +112 -0
package/src/ui/theme/tokens.scale.css +103 -0
package/src/ui/theme/tokens.semantic.dark.css +185 -0
package/src/ui/theme/tokens.semantic.light.css +242 -0
package/src/vue/use-sa-theme.ts +154 -0

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,34 @@
+// 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. All six are
+// now on the bounds below; the audit fails on a seventh.
+//
+// Moving 1100 and 1180 DOWN to 1023.98 keeps the wide layout for another 76 and
+// 156 pixels respectively, which is the one direction of this change that could
+// push content off the page. `visual-baseline.spec.ts` measures horizontal
+// overflow at both edges of every band, on every page, for exactly that reason.
+//
+// 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;

package/src/ui/theme/base.css ADDED Viewed

@@ -0,0 +1,50 @@
+/* The page canvas and the type baseline. Everything else is a component.
+ *
+ * Nothing here styles a bare element outside `.sa-page`, which is what makes
+ * the whole theme safe to load into an application that has its own design —
+ * including the tenant-facing pages, which are embedded in a consumer's own
+ * app rather than in the admin shell.
+ */
+/* The app canvas. It sits on the layout rather than on the page so that the
+ * gutters beside `max-width: 1600px` are painted too — and so a page can be a
+ * transparent frame while sections carry the surfaces. Declared here rather
+ * than on `body`: both known consumer apps load their own stylesheet after
+ * this one, and a `body` rule would lose to them. */
+.sa-admin-layout,
+.sa-admin-content {
+    background: var(--sa-color-bg-app);
+}
+/* Page frame — min-height, the page padding and the admin type, in one place
+ * instead of once per page (see AdminPage). No surface of its own.
+ *
+ * The font and text colour belong here because the hosting app's stylesheet
+ * loads after this one: without a rule on the page itself, admin pages would
+ * inherit whatever the consumer sets. Two full-page views used to pin both on
+ * their own root, which is exactly the divergence this prevents. */
+.sa-page {
+    min-height: calc(100vh - 56px);
+    padding: 20px 28px 28px;
+    font-family: var(--sa-font-body);
+    color: var(--sa-color-fg-body);
+}
+/* Consumer apps load Quasar, whose element-level h1–h6 rules carry display
+ * sizes and huge line-heights. Neutralised here so a bare heading inside a
+ * page is legible without a class of its own.
+ *
+ * `:where()` keeps this at the specificity of a single class, so any heading
+ * class in the package still wins — this is a baseline, not a verdict. Three
+ * views used to carry their own copy of it, each covering a different subset
+ * of h1–h6. */
+.sa-page :where(h1, h2, h3, h4, h5, h6) {
+    margin: 0;
+    line-height: 1.2;
+}
+/* Border-box for the whole page. Six views declared this for their own
+ * subtree, which is the same rule six times with six different roots. */
+.sa-page * {
+    box-sizing: border-box;
+}

package/src/ui/theme/components/body.css ADDED Viewed

@@ -0,0 +1,23 @@
+/* Page body — everything below the hero (see AdminBody), including the
+ * loading and empty states the pages used to spell out one by one.
+ *
+ * Inset from the page edge, so the hero frames the page and everything below
+ * sits inside it. The inset lives here rather than on the section, because
+ * AdminStatistics is the other thing allowed at this level and would otherwise
+ * be the only block sticking out.
+ */
+.sa-page-body {
+    padding-left: 20px;
+    padding-right: 20px;
+}
+.sa-page-body__state {
+    padding: 32px 0;
+    color: var(--sa-color-fg-muted);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+.sa-page-body__state--empty {
+    font-size: var(--sa-text-md);
+}

package/src/ui/theme/components/button.css ADDED Viewed

@@ -0,0 +1,158 @@
+/* One button look across the admin surface, with two ways in.
+ *
+ * `.sa-btn` is for the hand-built buttons — eight files declared the same
+ * bordered pill independently, differing only in which local token they named.
+ *
+ * The Quasar selectors are the second way: any `q-btn` placed in a hero's or a
+ * section's action area adopts the same shape. That is what reaches the buttons
+ * a consumer app puts into those slots — a component could only style what the
+ * platform itself renders, and autohauspro's `#card-actions` button would have
+ * stayed behind in the Quasar look while everything around it changed.
+ *
+ * Colour is left to Quasar on its own buttons: `color="primary"` stays a filled
+ * primary, `flat` becomes the bordered surface below. Only shape and typography
+ * are unified, because those are what read as "a different design".
+ */
+.sa-btn,
+.sa-page-head__actions .q-btn,
+.sa-section__actions .q-btn {
+    padding: 8px 14px;
+    min-height: 0;
+    border-radius: var(--sa-radius-control);
+    font-family: var(--sa-font-body);
+    font-size: var(--sa-text-md);
+    font-weight: 500;
+    line-height: 1.3;
+    letter-spacing: 0;
+    text-transform: none;
+}
+.sa-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    cursor: pointer;
+    color: var(--sa-color-fg-body);
+    transition:
+        background 0.12s,
+        border-color 0.12s;
+}
+/* The default is a bordered surface, not a bare label. */
+.sa-btn,
+.sa-page-head__actions .q-btn--flat,
+.sa-section__actions .q-btn--flat {
+    border: 1px solid var(--sa-color-border-strong);
+    background: var(--sa-color-bg-surface);
+}
+.sa-btn:hover:not(:disabled),
+.sa-page-head__actions .q-btn--flat:hover,
+.sa-section__actions .q-btn--flat:hover {
+    background: var(--sa-color-bg-sunken);
+}
+.sa-btn--primary {
+    background: var(--sa-color-accent);
+    border-color: var(--sa-color-accent);
+    color: var(--sa-color-fg-on-accent);
+}
+.sa-btn--primary:hover:not(:disabled) {
+    background: var(--sa-color-accent-strong);
+    border-color: var(--sa-color-accent-strong);
+}
+.sa-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+/* Size and intent modifiers, carried over from the families that merged. */
+.sa-btn--sm {
+    padding: 5px 8px;
+    font-size: var(--sa-text-sm);
+    gap: 5px;
+}
+.sa-btn--ghost {
+    border-color: transparent;
+    background: transparent;
+}
+.sa-btn--ghost:hover:not(:disabled) {
+    background: var(--sa-color-bg-sunken);
+}
+.sa-btn--danger {
+    color: var(--sa-color-negative);
+}
+.sa-btn--danger:hover:not(:disabled) {
+    background: var(--sa-color-negative-surface);
+}
+.sa-btn--flex {
+    flex: 1;
+}
+/* Icon-only — the reload control, which carries no label and therefore needs
+ * an `aria-label` at the call site. */
+.sa-btn--icon {
+    padding: 8px;
+    gap: 0;
+}
+.sa-btn--positive {
+    color: var(--sa-color-positive);
+}
+.sa-btn--positive:hover:not(:disabled) {
+    background: var(--sa-color-positive-surface);
+}
+/* The row-action icon — one recipe for the whole admin.
+ *
+ * There were three. `TenantsPage` had this bordered-less square with a muted
+ * icon; `PilotsPage` and `PromoCodesPage` rendered `<q-btn :color="…">`, which
+ * paints Quasar's brand colours and made a promo-code row read as a row of
+ * traffic lights beside a plans row of quiet greys; `EmailHistoryPage` and
+ * `PlatformEmailPage` pinned `color="primary"`.
+ *
+ * The quiet one wins. A row of actions is chrome, not a set of announcements —
+ * the colour belongs on the ONE action that is destructive, which is what the
+ * tone modifiers are for.
+ */
+.sa-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: var(--sa-radius-control);
+    background: transparent;
+    color: var(--sa-color-fg-muted);
+    cursor: pointer;
+    text-decoration: none;
+    transition: background 0.12s;
+}
+.sa-icon-btn:hover:not(:disabled) {
+    background: var(--sa-color-border-soft);
+}
+.sa-icon-btn:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+}
+/* The icon inherits, so a tone below colours the glyph without a second rule. */
+.sa-icon-btn .q-icon {
+    color: inherit;
+}
+.sa-icon-btn--negative {
+    color: var(--sa-color-negative);
+}
+.sa-icon-btn--positive {
+    color: var(--sa-color-positive-fg);
+}
+.sa-icon-btn--warning {
+    color: var(--sa-color-warning-fg);
+}
+.sa-icon-btn--primary {
+    color: var(--sa-color-accent);
+}
+.sa-icon-btn--accent {
+    color: var(--sa-color-feature);
+}

package/src/ui/theme/components/card.css ADDED Viewed

@@ -0,0 +1,74 @@
+/* Cards — the generic block inside dashboard and detail sections, and the
+ * corner correction for Quasar's own card.
+ *
+ * Quasar cards round at 4px, which reads sharper than every surface around
+ * them. One rule so a card inside the admin agrees with the sections and tiles
+ * it sits between, without each page saying so.
+ */
+/* Quasar paints its own card: white in light, and `var(--q-dark)` — a neutral
+ * #1d1d1d — as soon as `Dark` is active. That grey sits wrong on a slate page,
+ * so the surface is ours.
+ *
+ * The `.sa-portal` half is not decoration: Quasar teleports every dialog into a
+ * div appended to `<body>`, so a rule prefixed with `.sa-page` never reaches a
+ * dialog's card. `createSuperAdminApp` marks those portals — every portal in the
+ * document, the shell's own and those opened by a page contributed into it,
+ * which is the intent: a page inside the admin shell is admin UI. An app that
+ * never calls `createSuperAdminApp` is untouched. */
+.sa-page .q-card,
+.sa-portal .q-card {
+    border-radius: var(--sa-radius-card);
+    background: var(--sa-color-bg-surface);
+    color: var(--sa-color-fg-body);
+}
+/* A dropdown is teleported like a dialog, and QMenu adds `q-dark` to itself in
+ * dark mode (QMenu.js), which resolves to the same neutral grey. Without this
+ * the select in the paginator under every table opens a #1d1d1d panel over a
+ * slate page — the reported defect, one portal type further along. */
+.sa-portal .q-menu {
+    background: var(--sa-color-bg-surface);
+    color: var(--sa-color-fg-body);
+}
+/* Quasar's stepper, for the same reason and one component further along.
+ *
+ * Only the steps you are NOT on. Their titles are a hard-coded grey —
+ * `rgb(158,158,158)`, 2.68:1 on a white card — which is below the floor for
+ * text whose whole job is to say which steps exist. The ACTIVE step is left
+ * alone: Quasar marks it `text-primary`, and that accent is the "you are here"
+ * affordance. A first attempt here painted every title with the heading role
+ * and quietly took that affordance away; the baseline diff showed it.
+ *
+ * The theme could not see any of this until the contrast checker learned to
+ * look inside teleported nodes: the only stepper in the package is in a dialog.
+ */
+.sa-page .q-stepper,
+.sa-portal .q-stepper {
+    background: var(--sa-color-bg-surface);
+    color: var(--sa-color-fg-body);
+}
+.sa-page .q-stepper__tab:not(.q-stepper__tab--active) .q-stepper__title,
+.sa-portal .q-stepper__tab:not(.q-stepper__tab--active) .q-stepper__title {
+    color: var(--sa-color-fg-muted);
+}
+.sa-page .q-stepper__caption,
+.sa-portal .q-stepper__caption {
+    color: var(--sa-color-fg-subtle);
+}
+.sa-card {
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
+    border-radius: var(--sa-radius-card);
+    padding: 16px 18px;
+}
+.sa-card__title {
+    margin: 0 0 12px;
+    font-family: var(--sa-font-head);
+    font-size: var(--sa-text-lg);
+    font-weight: 700;
+    color: var(--sa-color-fg-heading);
+    letter-spacing: -0.005em;
+}

package/src/ui/theme/components/field.css ADDED Viewed

@@ -0,0 +1,38 @@
+/* Form fields and the filter row.
+ *
+ * Quasar's outlined input rounds at 4px, which reads sharper than everything
+ * around it; the admin surface settles on `--sa-radius-field`, the radius the
+ * hand-built search boxes already used. Declared on the field control so it
+ * covers inputs, selects and date pickers alike.
+ */
+.sa-page .q-field--outlined .q-field__control,
+.sa-page .q-field--outlined .q-field__control:before,
+.sa-page .q-field--outlined .q-field__control:after,
+.sa-portal .q-field--outlined .q-field__control,
+.sa-portal .q-field--outlined .q-field__control:before,
+.sa-portal .q-field--outlined .q-field__control:after {
+    border-radius: var(--sa-radius-field);
+}
+/* Quasar's outlined control is transparent, which reads as a hole wherever it
+ * sits on a section surface rather than on the page canvas.
+ *
+ * `.sa-portal` because a dialog is teleported out of `.sa-page` — this
+ * correction had silently never applied to a field inside a dialog. */
+.sa-page .q-field--outlined .q-field__control,
+.sa-portal .q-field--outlined .q-field__control {
+    background: var(--sa-color-bg-surface);
+}
+/* The filter row (see AdminFilters). Declared once so no page writes its own
+ * flex rule — which is how five pages ended up with five filter bars. */
+.sa-filters .sa-filters__body {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    align-items: center;
+}
+.sa-filters .sa-filters__body > * {
+    flex: 1;
+    min-width: 200px;
+}

package/src/ui/theme/components/hero.css ADDED Viewed

@@ -0,0 +1,46 @@
+/* The page hero — the banner that answers "which page am I on" (AdminHero).
+ *
+ * A tinted, bordered block rather than a first paragraph, so identity is
+ * visually separate from content. Tint and border come from the accent role,
+ * which reads the host application's brand: an app that sets `$primary` gets
+ * its own hero without touching this file.
+ */
+.sa-page-head {
+    /* Top-aligned, so the controls sit level with the title rather than
+     * drifting down with the subtitle's height. */
+    display: flex;
+    align-items: flex-start;
+    gap: 20px;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+    padding: 13px 22px 15px;
+    border: 1px solid var(--sa-color-accent-border);
+    border-radius: var(--sa-radius-hero);
+    background: linear-gradient(
+        135deg,
+        var(--sa-color-accent-surface) 0%,
+        var(--sa-color-accent-surface-soft) 100%
+    );
+}
+.sa-page-head__title {
+    margin: 0;
+    font-family: var(--sa-font-head);
+    font-size: var(--sa-text-2xl);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.25;
+    color: var(--sa-color-fg-heading);
+}
+.sa-page-head__sub {
+    margin: 1px 0 0;
+    font-size: var(--sa-text-md);
+    line-height: 1.35;
+    color: var(--sa-color-fg-muted);
+}
+.sa-page-head__actions {
+    margin-left: auto;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}