@saasicat/ui-vue 0.22.2 → 0.23.0

package/src/ui/theme/components/table.css

@@ -0,0 +1,60 @@
+/* Lists (see AdminTable). The package shipped no table rules at all until
+ * this, which is why nine pages each looked slightly different.
+ */
+
+/* The surface under the rows. Measured on the promo-codes page in dark mode:
+ * the `.q-table__container.q-table__card.q-dark` element resolved to
+ * rgb(29, 29, 29) while the section around it was rgb(15, 23, 42) — Quasar's
+ * neutral grey inside our slate. Only `thead th` and `tbody td` were ours, and
+ * neither of them is the table's background. */
+.sa-page .q-table__container,
+.sa-portal .q-table__container {
+    background: var(--sa-color-bg-surface);
+    color: var(--sa-color-fg-body);
+}
+
+.sa-page .q-table thead th {
+    font-size: var(--sa-text-xs);
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--sa-color-fg-muted);
+    background: var(--sa-color-bg-sunken);
+    border-bottom: 1px solid var(--sa-color-border);
+    padding: 10px 14px;
+    white-space: nowrap;
+}
+.sa-page .q-table tbody td {
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-body);
+    border-bottom: 1px solid var(--sa-color-border-soft);
+    padding: 10px 14px;
+}
+.sa-page .q-table tbody tr:last-child td {
+    border-bottom: 0;
+}
+.sa-page .q-table tbody tr:hover td {
+    background: var(--sa-color-bg-sunken);
+}
+/* Sorted column: the header carries the state, not just the arrow. */
+.sa-page .q-table thead th.sortable:hover,
+.sa-page .q-table thead th[aria-sort]:not([aria-sort='none']) {
+    color: var(--sa-color-fg-heading);
+}
+.sa-page .q-table thead th[aria-sort]:not([aria-sort='none']) {
+    background: var(--sa-color-accent-surface-strong);
+}
+.sa-table__actions {
+    white-space: nowrap;
+}
+.sa-table__empty {
+    color: var(--sa-color-fg-muted);
+}
+
+/* The pager sits below the list, separated by a line that runs the full width
+ * of the surface — hence the pull-out by the section's own padding token. */
+.sa-table__foot {
+    margin: 0 calc(-1 * var(--sa-pad-section)) calc(-1 * var(--sa-pad-section));
+    padding: 0 var(--sa-pad-section) 10px;
+    border-top: 1px solid var(--sa-color-border);
+}

package/src/ui/theme/index.css

@@ -0,0 +1,42 @@
+/* The SaaSiCat admin theme. One import: `@saasicat/ui-vue/theme.css`.
+ *
+ * ── The three layers, and why there are three ──────────────────────────────
+ *
+ *   L1  tokens.primitive.css   the palette      references nothing
+ *       tokens.scale.css       space/type/…     references nothing
+ *   L2  tokens.semantic.*.css  roles            references L1 and --q-*
+ *   L3  components/*.css       the shell chrome references L2
+ *
+ * A component asks for a ROLE (`--sa-color-fg-muted`), never for a value
+ * (`--sa-neutral-500`), and never for a literal. That one rule is what makes
+ * the dark theme a file instead of a project: only L2 knows the difference
+ * between light and dark, so only L2 has two versions.
+ *
+ * The direction is enforced by `tests/theme-layer-discipline.test.js`
+ * (rule 22) and the key parity of the two L2 files by
+ * `tests/theme-token-parity.test.js` (rule 21).
+ *
+ * ── Order is the cascade ───────────────────────────────────────────────────
+ *
+ * Tokens first, because everything below reads them; dark after light, because
+ * it overrides. Within `components/`, the order is the order the old single
+ * stylesheet had — several rules there share a specificity and settle it by
+ * position, so this list is not alphabetical and must not be sorted.
+ */
+
+@import './tokens.primitive.css';
+@import './tokens.scale.css';
+@import './tokens.semantic.light.css';
+@import './tokens.semantic.dark.css';
+@import './tokens.legacy.css';
+
+@import './base.css';
+@import './components/hero.css';
+@import './components/button.css';
+@import './components/field.css';
+@import './components/statistics.css';
+@import './components/body.css';
+@import './components/section.css';
+@import './components/card.css';
+@import './components/paginator.css';
+@import './components/table.css';

package/src/ui/theme/tokens.legacy.css

@@ -0,0 +1,147 @@
+/* The pre-role token names, kept alive as aliases for one release.
+ *
+ * Every name below is what `sa-theme.css` published before the role layer
+ * existed. They are aliases, not values: each resolves to the role it turned
+ * out to mean, so a consumer stylesheet that still says `var(--sa-muted)` keeps
+ * working — and starts following the dark theme for free.
+ *
+ * ── They are aliases in ONE direction ──────────────────────────────────────
+ *
+ * Reading an old name still works. OVERRIDING one no longer does: setting
+ * `--sa-primary` in your own `:root` used to re-tint the admin, and now the
+ * role it feeds is `--sa-color-accent`, which reads Quasar's `--q-primary`.
+ * The replacement is better than what it removes — set `$primary` and the
+ * admin, Quasar's own components and the tenant-facing pages all follow one
+ * value instead of three. At runtime, use
+ * `setCssVar('primary', value, document.documentElement)`; the default target
+ * is `<body>`, which the roles on `:root` cannot see.
+ *
+ * To override a ROLE rather than the brand, write both of its values, on the
+ * same selectors the theme uses — `:root` for light, and
+ * `[data-sa-theme='dark'], body.body--dark` for dark. A role has two values, so
+ * an override has two, and `:root` alone silently loses in the Quasar-triggered
+ * dark path. `docs/design-guide.md#overriding-a-role` has the measurements.
+ *
+ * Nothing in this repository or in the scaffolder template overrode an `--sa-*`
+ * name; that was checked before choosing this direction.
+ *
+ * ── Consolidations, so a moved colour is not a surprise ────────────────────
+ *
+ * Five names had no role of their own and now share one, which is the point of
+ * the exercise rather than a side effect:
+ *
+ *   --sa-border-strong #d1d5db → --sa-color-border-strong (#cbd5e1, the slate
+ *                      ramp — the grey ramp had exactly this one member)
+ *   --sa-positive-soft, --sa-warning-soft  translucent tints → the opaque
+ *                      `-surface` roles, so they stack predictably
+ *   --sa-amber-light  #fbbf24 → --sa-color-warning-strong (#f59e0b)
+ *   --sa-primary-50   #eff6ff → --sa-color-accent-surface-strong, which now
+ *                      follows the host's brand instead of staying blue
+ *
+ * This file is deleted in 1.0. Its contents are the migration checklist.
+ */
+
+:root {
+    --sa-bg-app: var(--sa-color-bg-app);
+    --sa-bg-surface: var(--sa-color-bg-surface);
+    --sa-bg-surface-2: var(--sa-color-bg-sunken);
+
+    --sa-primary: var(--sa-color-accent);
+    --sa-primary-strong: var(--sa-color-accent-strong);
+    --sa-primary-soft: var(--sa-color-accent-surface);
+    --sa-primary-softer: var(--sa-color-accent-surface-soft);
+    --sa-primary-border: var(--sa-color-accent-border);
+    --sa-primary-50: var(--sa-color-accent-surface-strong);
+
+    --sa-positive: var(--sa-color-positive);
+    --sa-positive-light: var(--sa-color-positive-strong);
+    --sa-positive-soft: var(--sa-color-positive-surface);
+    --sa-positive-bg: var(--sa-color-positive-surface);
+
+    --sa-negative: var(--sa-color-negative);
+    --sa-negative-soft: var(--sa-color-negative-surface);
+
+    --sa-warning: var(--sa-color-warning);
+    --sa-warning-soft: var(--sa-color-warning-surface);
+    --sa-warning-bg: var(--sa-color-warning-surface);
+    --sa-amber: var(--sa-color-warning-strong);
+    --sa-amber-light: var(--sa-color-warning-strong);
+    --sa-amber-border: var(--sa-color-warning-border);
+
+    /* Read by `TenantsPage` as `var(--sa-accent, #7c3aed)` and never declared
+     * anywhere — the fallback was the only value it ever had. It marked the
+     * catalogue-feature action, which is now a role. */
+    --sa-accent: var(--sa-color-feature);
+
+    --sa-heading: var(--sa-color-fg-heading);
+    --sa-body: var(--sa-color-fg-body);
+    --sa-muted: var(--sa-color-fg-muted);
+    --sa-muted-dark: var(--sa-color-fg-secondary);
+    --sa-muted-light: var(--sa-color-fg-subtle);
+
+    --sa-border: var(--sa-color-border);
+    --sa-border-soft: var(--sa-color-border-soft);
+    --sa-border-strong: var(--sa-color-border-strong);
+
+    --sa-section-pad: var(--sa-pad-section);
+}
+
+/* The same declarations again, under the dark triggers.
+ *
+ * Not redundancy — an alias is computed WHERE it is declared. `--sa-heading` on
+ * `:root` substitutes whatever `--sa-color-fg-heading` resolves to ON `:root`,
+ * and descendants inherit that finished value. Quasar's trigger redeclares the
+ * roles on `<body>`, which never re-evaluates an alias computed one level up:
+ * a consumer still reading `var(--sa-heading)` kept light text while everything
+ * around it went dark, and this file promises the opposite for one release.
+ *
+ * The attribute trigger sits on `:root` itself and would not need this, but the
+ * pair is written the way the design guide tells consumers to write an override
+ * — both values, on the selectors the theme uses. A file that documents a rule
+ * and then exempts itself from it teaches the exemption.
+ */
+[data-sa-theme='dark'],
+body.body--dark {
+    --sa-bg-app: var(--sa-color-bg-app);
+    --sa-bg-surface: var(--sa-color-bg-surface);
+    --sa-bg-surface-2: var(--sa-color-bg-sunken);
+
+    --sa-primary: var(--sa-color-accent);
+    --sa-primary-strong: var(--sa-color-accent-strong);
+    --sa-primary-soft: var(--sa-color-accent-surface);
+    --sa-primary-softer: var(--sa-color-accent-surface-soft);
+    --sa-primary-border: var(--sa-color-accent-border);
+    --sa-primary-50: var(--sa-color-accent-surface-strong);
+
+    --sa-positive: var(--sa-color-positive);
+    --sa-positive-light: var(--sa-color-positive-strong);
+    --sa-positive-soft: var(--sa-color-positive-surface);
+    --sa-positive-bg: var(--sa-color-positive-surface);
+
+    --sa-negative: var(--sa-color-negative);
+    --sa-negative-soft: var(--sa-color-negative-surface);
+
+    --sa-warning: var(--sa-color-warning);
+    --sa-warning-soft: var(--sa-color-warning-surface);
+    --sa-warning-bg: var(--sa-color-warning-surface);
+    --sa-amber: var(--sa-color-warning-strong);
+    --sa-amber-light: var(--sa-color-warning-strong);
+    --sa-amber-border: var(--sa-color-warning-border);
+
+    /* Read by `TenantsPage` as `var(--sa-accent, #7c3aed)` and never declared
+     * anywhere — the fallback was the only value it ever had. It marked the
+     * catalogue-feature action, which is now a role. */
+    --sa-accent: var(--sa-color-feature);
+
+    --sa-heading: var(--sa-color-fg-heading);
+    --sa-body: var(--sa-color-fg-body);
+    --sa-muted: var(--sa-color-fg-muted);
+    --sa-muted-dark: var(--sa-color-fg-secondary);
+    --sa-muted-light: var(--sa-color-fg-subtle);
+
+    --sa-border: var(--sa-color-border);
+    --sa-border-soft: var(--sa-color-border-soft);
+    --sa-border-strong: var(--sa-color-border-strong);
+
+    --sa-section-pad: var(--sa-pad-section);
+}

package/src/ui/theme/tokens.primitive.css

@@ -0,0 +1,108 @@
+/* Layer 1 — primitives. The raw palette, and nothing else.
+ *
+ * A primitive says WHAT a colour is (`--sa-red-600` is a particular red). It
+ * never says what the colour is FOR — that is layer 2's job, and it is the only
+ * layer that changes between light and dark. Consequently:
+ *
+ *   - nothing in this file may reference another variable;
+ *   - nothing outside `tokens.semantic.*.css` may reference this file.
+ *
+ * A component reaching for `--sa-red-600` instead of `--sa-color-negative` is
+ * the bug this split exists to prevent: it is invisible in review, and it is
+ * the reason a dark theme costs 62 files instead of one. Rule 22 in the
+ * layer-discipline test enforces both directions.
+ *
+ * The ramps are the ones the admin surface already used. Steps that no role
+ * consumes are absent on purpose: a palette with unused rungs invites people to
+ * pick one, and then the role layer is no longer the single answer.
+ */
+
+:root {
+    /* ── Neutral (slate). Carries text, surfaces and lines. ─────────────── */
+    --sa-white: #ffffff;
+    --sa-black: #000000;
+    --sa-neutral-25: #fbfbfd;
+    --sa-neutral-50: #f8fafc;
+    --sa-neutral-100: #f1f5f9;
+    --sa-neutral-200: #e2e8f0;
+    --sa-neutral-300: #cbd5e1;
+    --sa-neutral-400: #94a3b8;
+    /* Between 400 and 500, and it exists for a measured reason: `fg-subtle` at
+     * slate-400 reads 2.56:1 on a white card and 2.34:1 on the page canvas —
+     * under the 3:1 floor, i.e. captions and price units that are decoration
+     * rather than information. Slate-500 is the next rung and too dark to stay
+     * quiet. This one clears 3:1 on both. */
+    --sa-neutral-450: #7c8aa0;
+    --sa-neutral-500: #64748b;
+    --sa-neutral-600: #475569;
+    --sa-neutral-700: #334155;
+    --sa-neutral-800: #1e293b;
+    --sa-neutral-900: #0f172a;
+    --sa-neutral-950: #0b1220;
+    --sa-neutral-975: #070d18;
+
+    /* ── Blue. The `info` tone. ─────────────────────────────────────────── */
+    --sa-blue-50: #eff6ff;
+    --sa-blue-100: #dbeafe;
+    --sa-blue-200: #bfdbfe;
+    --sa-blue-300: #93c5fd;
+    --sa-blue-500: #3b82f6;
+    --sa-blue-600: #2563eb;
+    --sa-blue-700: #1d4ed8;
+    --sa-blue-800: #1e40af;
+
+    /* The platform's own brand blue. Kept out of the blue ramp because it is
+     * not a step in it: it is the value the accent role falls back to when the
+     * host application declares no Quasar `$primary` of its own. */
+    --sa-brand-blue: #3f6bff;
+
+    /* ── Green (emerald). `positive`. ───────────────────────────────────── */
+    --sa-green-50: #ecfdf5;
+    --sa-green-100: #d1fae5;
+    --sa-green-200: #a7f3d0;
+    --sa-green-500: #10b981;
+    --sa-green-700: #047857;
+    --sa-green-800: #065f46;
+
+    /* ── Amber. `warning`, and every "draft / scheduled / pending" state. ─ */
+    --sa-amber-50: #fffbeb;
+    --sa-amber-100: #fef3c7;
+    --sa-amber-200: #fde68a;
+    --sa-amber-300: #fcd34d;
+    --sa-amber-400: #fbbf24;
+    --sa-amber-500: #f59e0b;
+    --sa-amber-600: #d97706;
+    --sa-amber-700: #b45309;
+    --sa-amber-800: #92400e;
+
+    /* ── Red. `negative`. ───────────────────────────────────────────────── */
+    --sa-red-50: #fef2f2;
+    --sa-red-100: #fee2e2;
+    --sa-red-200: #fecaca;
+    --sa-red-300: #fca5a5;
+    --sa-red-500: #ef4444;
+    --sa-red-600: #dc2626;
+    --sa-red-700: #b91c1c;
+    --sa-red-800: #991b1b;
+
+    /* ── Indigo. `scheduled` — a version that is planned but not yet live. */
+    --sa-indigo-50: #eef2ff;
+    --sa-indigo-100: #e0e7ff;
+    --sa-indigo-200: #c7d2fe;
+    --sa-indigo-400: #818cf8;
+    --sa-indigo-700: #4338ca;
+
+    /* ── Violet and sky. The two catalogue entities, feature and quota. ── */
+    --sa-violet-50: #ede9fe;
+    --sa-violet-200: #ddd6fe;
+    --sa-violet-500: #8b5cf6;
+    --sa-violet-700: #6d28d9;
+    --sa-sky-50: #f0f9ff;
+    --sa-sky-200: #bae6fd;
+    --sa-sky-500: #0ea5e9;
+
+    /* ── Type families. ─────────────────────────────────────────────────── */
+    --sa-font-head: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
+    --sa-font-body: 'Inter', system-ui, sans-serif;
+    --sa-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+}

package/src/ui/theme/tokens.scale.css

@@ -0,0 +1,103 @@
+/* Layer 1 — scales. Sizes, not colours, and identical in every theme.
+ *
+ * The point of a scale is that the choice is already made. You do not decide
+ * between 11px and 11.5px; you decide whether a piece of text is a caption or a
+ * body line, and the scale answers with a number. That is why the admin surface
+ * had 23 font sizes and 80 pixel values: with no scale, every author decided
+ * again, and nobody could tell a decision from a leftover.
+ *
+ * Breakpoints are the one scale that CANNOT live here — custom properties are
+ * not valid in a `@media` condition. They are in `_breakpoints.scss` for SCSS
+ * blocks, and for plain CSS the five values are an allow-list the lint enforces.
+ */
+
+:root {
+    /* ── Spacing. A 4px base with two half-steps below it, because hairline
+     * gaps (2px) and icon insets (4px) are real and rounding them up moves
+     * every dense row in the product. ───────────────────────────────────── */
+    --sa-space-0: 0;
+    --sa-space-1: 2px;
+    --sa-space-2: 4px;
+    --sa-space-3: 8px;
+    --sa-space-4: 12px;
+    --sa-space-5: 16px;
+    --sa-space-6: 20px;
+    --sa-space-7: 24px;
+    --sa-space-8: 32px;
+    --sa-space-9: 40px;
+    --sa-space-10: 48px;
+    --sa-space-11: 64px;
+
+    /* Named spacings, so a rule can say what the gap is for rather than how
+     * big it is. These are the six the admin surface actually distinguishes. */
+    --sa-gap-inline: var(--sa-space-3);
+    --sa-gap-stack: var(--sa-space-5);
+    --sa-pad-page: var(--sa-space-6);
+    --sa-pad-section: var(--sa-space-6);
+    --sa-pad-control: var(--sa-space-3);
+    --sa-pad-cell: var(--sa-space-4);
+
+    /* ── Type. Eight steps, each with the line-height it was drawn for.
+     *
+     * The ladder is dense at the bottom because that is where the admin lives:
+     * table cells, chips and captions are three quarters of every page, and one
+     * pixel there is the difference between a dense list and a cramped one. It
+     * spreads out at the top, where the steps are titles and there are few. */
+    --sa-text-2xs: 10px;
+    --sa-text-xs: 11px;
+    --sa-text-sm: 12px;
+    --sa-text-md: 13px;
+    --sa-text-lg: 15px;
+    --sa-text-xl: 18px;
+    --sa-text-2xl: 22px;
+    --sa-text-3xl: 28px;
+    /* A ninth rung the plan did not foresee, added for a measured reason: the
+     * price totals and the marketing headline sit at 32–38px, and collapsing
+     * them into 28px would have shrunk the biggest number in the product to
+     * hit a target of eight. A step the product uses for a distinct job is a
+     * step. */
+    --sa-text-4xl: 32px;
+
+    --sa-leading-2xs: 1.4;
+    --sa-leading-xs: 1.45;
+    --sa-leading-sm: 1.5;
+    --sa-leading-md: 1.55;
+    --sa-leading-lg: 1.5;
+    --sa-leading-xl: 1.4;
+    --sa-leading-2xl: 1.3;
+    --sa-leading-3xl: 1.25;
+    --sa-leading-4xl: 1.15;
+
+    --sa-weight-regular: 400;
+    --sa-weight-medium: 500;
+    --sa-weight-semibold: 600;
+    --sa-weight-bold: 700;
+
+    --sa-tracking-tight: -0.02em;
+    --sa-tracking-normal: 0;
+    --sa-tracking-wide: 0.04em;
+    --sa-tracking-wider: 0.06em;
+
+    /* ── Corner radii, largest to smallest, so the nesting reads as hierarchy:
+     * a section is a bigger block than the cards inside it, a card bigger than
+     * a tile. `--sa-radius-tile` is the single declaration every statistic tile
+     * in the admin surface resolves to. ─────────────────────────────────── */
+    --sa-radius-hero: 16px;
+    --sa-radius-section: 14px;
+    --sa-radius-card: 12px;
+    --sa-radius-head: 10px;
+    --sa-radius-tile: 10px;
+    --sa-radius-field: 8px;
+    --sa-radius-control: 7px;
+    --sa-radius-pill: 999px;
+
+    /* ── Stacking. Aligned with Quasar's own layers rather than invented above
+     * them: a platform overlay that outranks Quasar's dialog would cover the
+     * dialog a consumer opened from it. ─────────────────────────────────── */
+    --sa-z-base: 0;
+    --sa-z-sticky: 100;
+    --sa-z-drawer: 3000;
+    --sa-z-overlay: 5900;
+    --sa-z-dialog: 6000;
+    --sa-z-toast: 9500;
+}

package/src/ui/theme/tokens.semantic.dark.css

@@ -0,0 +1,173 @@
+/* Layer 2 — roles, dark theme. The same keys as `tokens.semantic.light.css`,
+ * with other values. That sentence is the whole design: nothing else in the
+ * package knows a dark theme exists.
+ *
+ * ── Two ways in, and why there is no third ─────────────────────────────────
+ *
+ *   [data-sa-theme='dark']   the app decided — `handle.theme.scheme.value`
+ *   body.body--dark          Quasar decided — `$q.dark.set(true)`
+ *
+ * Both mean "the application decided", and that is the point: the application
+ * is the only party that can decide for BOTH halves of the screen. Quasar
+ * paints its own cards, dialogs, steppers and separators, and it does so only
+ * under `body--dark` — it has no `prefers-color-scheme` support of its own.
+ *
+ * ── Why this file does NOT follow the operating system ─────────────────────
+ *
+ * It used to, via `@media (prefers-color-scheme: dark)`, and that was wrong in
+ * the one case it was supposed to serve. An app that loads this stylesheet
+ * without running the bridge — every consumer embedding `pages-tenant/*` into
+ * its own frontend — would have had the platform's surfaces go dark from the
+ * operating system while Quasar's stayed light. Measured, on an embedded page
+ * with the OS set to dark:
+ *
+ *     .sa-section   rgb(15, 23, 42)     ← dark
+ *     .q-card       rgb(255, 255, 255)  ← white, with rgb(226, 232, 240) text
+ *     .q-separator  rgba(0, 0, 0, 0.12) ← a black hairline on near-black
+ *
+ * That is not "light cards beside dark surfaces", it is white-on-white at
+ * about 1.15:1. A stylesheet must not overrule the application that loaded it,
+ * because it cannot see the half of the screen it does not paint.
+ *
+ * Following the operating system is not lost — it moved to where both halves
+ * can be moved together. `createSaTheme({ scheme: 'system' })` is the default,
+ * it subscribes to `prefers-color-scheme` live, and `bindSaThemeToDocument`
+ * sets the attribute AND Quasar's `Dark`. `createSuperAdminApp` wires that up,
+ * so the admin shell follows the OS out of the box. An app that wants the same
+ * for an embedded surface calls those two functions; that is the one line that
+ * makes it actually work.
+ *
+ * `tests-e2e/theme-contrast.spec.ts` holds the counter-proof: with the OS set
+ * to dark and no bridge, the platform stays in step with Quasar.
+ */
+
+[data-sa-theme='dark'],
+body.body--dark {
+    --sa-color-bg-app: var(--sa-neutral-975);
+    --sa-color-bg-surface: var(--sa-neutral-900);
+    --sa-color-bg-surface-raised: var(--sa-neutral-800);
+    --sa-color-bg-sunken: var(--sa-neutral-950);
+    --sa-color-bg-overlay: color-mix(in srgb, var(--sa-black) 70%, transparent);
+
+    --sa-color-fg-heading: var(--sa-neutral-50);
+    --sa-color-fg-body: var(--sa-neutral-200);
+    --sa-color-fg-secondary: var(--sa-neutral-300);
+    --sa-color-fg-muted: var(--sa-neutral-400);
+    --sa-color-fg-subtle: var(--sa-neutral-500);
+    --sa-color-fg-disabled: var(--sa-neutral-600);
+    --sa-color-fg-on-accent: var(--sa-white);
+
+    --sa-color-border: var(--sa-neutral-700);
+    --sa-color-border-soft: var(--sa-neutral-800);
+    --sa-color-border-strong: var(--sa-neutral-600);
+    --sa-color-border-focus: var(--sa-color-accent);
+
+    /* The brand does not flip — a green product stays green in the dark. Only
+     * the derivations change: `-strong` lightens instead of darkening, because
+     * "more emphatic" means "closer to the paper" here, and every tint needs
+     * more of the accent to register against a dark surface. */
+    --sa-color-accent: var(--q-primary, var(--sa-brand-blue));
+    --sa-color-accent-strong: color-mix(in srgb, var(--sa-color-accent) 82%, var(--sa-white));
+    --sa-color-accent-surface: color-mix(in srgb, var(--sa-color-accent) 16%, transparent);
+    --sa-color-accent-surface-soft: color-mix(in srgb, var(--sa-color-accent) 8%, transparent);
+    --sa-color-accent-surface-strong: color-mix(
+        in srgb,
+        var(--sa-color-accent) 22%,
+        var(--sa-color-bg-surface)
+    );
+    --sa-color-accent-border: color-mix(in srgb, var(--sa-color-accent) 32%, transparent);
+
+    /* Each tone rises one or two steps up its ramp, because the dark shades
+     * that read as "deep red" on white read as "almost black" on slate. The
+     * surfaces become translucent so that a chip on a raised card and a chip on
+     * the page canvas both keep their contrast. */
+    --sa-color-positive: var(--sa-green-500);
+    --sa-color-positive-strong: var(--sa-green-500);
+    --sa-color-positive-fg: var(--sa-green-200);
+    --sa-color-positive-surface: color-mix(in srgb, var(--sa-green-500) 14%, transparent);
+    --sa-color-positive-surface-strong: color-mix(in srgb, var(--sa-green-500) 24%, transparent);
+    --sa-color-positive-border: color-mix(in srgb, var(--sa-green-500) 36%, transparent);
+
+    --sa-color-warning: var(--sa-amber-400);
+    --sa-color-warning-strong: var(--sa-amber-400);
+    --sa-color-warning-fg: var(--sa-amber-200);
+    --sa-color-warning-surface: color-mix(in srgb, var(--sa-amber-500) 14%, transparent);
+    --sa-color-warning-surface-strong: color-mix(in srgb, var(--sa-amber-500) 24%, transparent);
+    --sa-color-warning-border: color-mix(in srgb, var(--sa-amber-500) 36%, transparent);
+
+    --sa-color-negative: var(--sa-red-500);
+    --sa-color-negative-strong: var(--sa-red-500);
+    --sa-color-negative-fg: var(--sa-red-300);
+    --sa-color-negative-surface: color-mix(in srgb, var(--sa-red-500) 14%, transparent);
+    --sa-color-negative-surface-strong: color-mix(in srgb, var(--sa-red-500) 24%, transparent);
+    --sa-color-negative-border: color-mix(in srgb, var(--sa-red-500) 36%, transparent);
+
+    --sa-color-info: var(--sa-blue-500);
+    --sa-color-info-strong: var(--sa-blue-500);
+    --sa-color-info-fg: var(--sa-blue-200);
+    --sa-color-info-surface: color-mix(in srgb, var(--sa-blue-500) 14%, transparent);
+    --sa-color-info-surface-strong: color-mix(in srgb, var(--sa-blue-500) 24%, transparent);
+    --sa-color-info-border: color-mix(in srgb, var(--sa-blue-500) 36%, transparent);
+
+    --sa-color-scheduled: var(--sa-indigo-400);
+    --sa-color-scheduled-strong: var(--sa-indigo-400);
+    --sa-color-scheduled-fg: var(--sa-indigo-200);
+    --sa-color-scheduled-surface: color-mix(in srgb, var(--sa-indigo-400) 14%, transparent);
+    --sa-color-scheduled-surface-strong: color-mix(in srgb, var(--sa-indigo-400) 24%, transparent);
+    --sa-color-scheduled-border: color-mix(in srgb, var(--sa-indigo-400) 36%, transparent);
+
+    --sa-color-feature: var(--sa-violet-500);
+    --sa-color-feature-fg: var(--sa-violet-200);
+    --sa-color-feature-surface: color-mix(in srgb, var(--sa-violet-500) 16%, transparent);
+    --sa-color-quota: var(--sa-sky-500);
+    --sa-color-quota-surface: color-mix(in srgb, var(--sa-sky-500) 16%, transparent);
+    --sa-color-quota-border: color-mix(in srgb, var(--sa-sky-500) 36%, transparent);
+    --sa-color-bundle: var(--sa-amber-500);
+    --sa-color-bundle-surface: color-mix(in srgb, var(--sa-amber-500) 16%, transparent);
+
+    /* Identical to the light theme, and that is the point — see there. */
+    --sa-color-inverse-bg: var(--sa-neutral-950);
+    --sa-color-inverse-surface: var(--sa-neutral-800);
+    --sa-color-inverse-surface-soft: var(--sa-neutral-600);
+    --sa-color-inverse-fg: var(--sa-white);
+    --sa-color-inverse-fg-muted: var(--sa-neutral-300);
+    --sa-color-inverse-accent: var(--sa-amber-400);
+    --sa-color-inverse-accent-strong: var(--sa-amber-600);
+    --sa-color-inverse-accent-surface: color-mix(in srgb, var(--sa-amber-500) 15%, transparent);
+    --sa-color-inverse-accent-surface-strong: color-mix(
+        in srgb,
+        var(--sa-amber-500) 22%,
+        transparent
+    );
+    --sa-color-inverse-accent-fg: var(--sa-neutral-900);
+    --sa-color-inverse-danger: var(--sa-red-700);
+    --sa-color-inverse-danger-strong: var(--sa-red-600);
+    --sa-color-inverse-notice: var(--sa-amber-600);
+    --sa-color-inverse-notice-strong: var(--sa-amber-700);
+    --sa-color-inverse-fg-subtle: color-mix(in srgb, var(--sa-white) 55%, transparent);
+    --sa-color-inverse-border: color-mix(in srgb, var(--sa-white) 8%, transparent);
+    --sa-color-inverse-border-strong: color-mix(in srgb, var(--sa-white) 16%, transparent);
+
+    --sa-color-focus-ring: color-mix(in srgb, var(--sa-color-accent) 45%, transparent);
+    --sa-color-selection: color-mix(in srgb, var(--sa-color-accent) 30%, transparent);
+
+    /* Black ink and roughly double the alpha: a slate shadow at 6% is invisible
+     * on a slate surface, so the depth cue has to come from real darkness. */
+    --sa-shadow-ink: var(--sa-black);
+    --sa-shadow-tint-1: color-mix(in srgb, var(--sa-shadow-ink) 24%, transparent);
+    --sa-shadow-tint-2: color-mix(in srgb, var(--sa-shadow-ink) 32%, transparent);
+    --sa-shadow-tint-3: color-mix(in srgb, var(--sa-shadow-ink) 44%, transparent);
+    --sa-shadow-tint-4: color-mix(in srgb, var(--sa-shadow-ink) 60%, transparent);
+
+    --sa-shadow-0: none;
+    --sa-shadow-1: 0 1px 2px var(--sa-shadow-tint-1);
+    --sa-shadow-2: 0 2px 6px var(--sa-shadow-tint-2);
+    --sa-shadow-3: 0 8px 20px var(--sa-shadow-tint-3);
+    --sa-shadow-4: 0 20px 48px var(--sa-shadow-tint-4);
+    --sa-shadow-focus: 0 0 0 3px var(--sa-color-focus-ring);
+
+    --sa-elevation-tile: var(--sa-shadow-1);
+    --sa-elevation-card: var(--sa-shadow-2);
+    --sa-elevation-menu: var(--sa-shadow-3);
+    --sa-elevation-dialog: var(--sa-shadow-4);
+}