@saasicat/ui-vue 0.22.2 → 0.24.0

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,185 @@
+/* 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);
+
+    /* The identity ramp, one rung lighter throughout — see the light file for
+     * what it is for. This is the half that did not exist while the ramps lived
+     * as hex literals in TypeScript, and its absence is the whole reason the
+     * plan mark sat at 2.96:1 here. */
+    --sa-color-identity-1: var(--sa-blue-300);
+    --sa-color-identity-2: var(--sa-violet-200);
+    --sa-color-identity-3: var(--sa-green-200);
+    --sa-color-identity-4: var(--sa-amber-300);
+    --sa-color-identity-5: var(--sa-sky-200);
+    --sa-color-identity-6: var(--sa-red-300);
+    --sa-color-identity-neutral: var(--sa-neutral-400);
+
+    /* 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);
+}

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

@@ -0,0 +1,242 @@
+/* Layer 2 — roles, light theme. What a colour is FOR.
+ *
+ * This is the only layer that changes between light and dark, and that is the
+ * whole reason the split exists: a dark theme is this file with other values,
+ * not 62 stylesheets with other values.
+ *
+ * Two rules, both enforced by the layer-discipline test (rule 22):
+ *
+ *   1. No colour literal may appear here. Every value is a primitive, a
+ *      `--q-*` brand variable from the host, or a `color-mix()` of those.
+ *      A literal here is a value nobody can find from the outside.
+ *   2. `tokens.semantic.dark.css` declares exactly the same keys. A role that
+ *      exists in one theme and not the other is a page that goes unreadable the
+ *      moment somebody flips the switch (rule 21).
+ *
+ * ── Where the accent comes from ────────────────────────────────────────────
+ *
+ * `--sa-color-accent` reads Quasar's `--q-primary`, which Quasar publishes from
+ * the host application's `$primary`. That is the fix for the worst finding in
+ * the audit: the platform painted `#3f6bff` while the scaffolded app painted
+ * `#1e40af`, in the same surface, because each had its own source of truth.
+ * Now there is one — the host's — and `--sa-brand-blue` is what it falls back
+ * to when the host declares nothing. Setting `$primary` re-tints the admin with
+ * it, and there is no second switch to remember.
+ *
+ * To change the brand AT RUNTIME, write to the root:
+ *
+ *     setCssVar('primary', value, document.documentElement)
+ *
+ * The third argument is not optional here, and the reason is the same one that
+ * shapes the rest of this file: Quasar's `setCssVar` defaults to `<body>`, and
+ * this role is computed on `:root`, one level above it. A custom property is
+ * resolved where it is DECLARED, so the root substitution never sees a value
+ * written below it — Quasar's own components would recolour and the admin would
+ * not. Measured, and pinned by a test.
+ *
+ * Tints derive from the accent with `color-mix()` for the same reason: a fixed
+ * `rgba(63, 107, 255, 0.08)` would stay platform-blue on a host that is green.
+ */
+
+:root {
+    /* ── Surfaces, from the page canvas up to what floats above it. ─────── */
+    --sa-color-bg-app: var(--sa-neutral-100);
+    --sa-color-bg-surface: var(--sa-white);
+    --sa-color-bg-surface-raised: var(--sa-neutral-25);
+    --sa-color-bg-sunken: var(--sa-neutral-50);
+    --sa-color-bg-overlay: color-mix(in srgb, var(--sa-neutral-900) 55%, transparent);
+
+    /* ── Text, from the loudest to the quietest.
+     *
+     * Six rungs, not five, because the surface uses six. `-secondary` was very
+     * nearly folded into `-muted` on the argument that two greys one step apart
+     * are a duplicate — the baseline said otherwise: it carries the figures and
+     * meta lines of over a hundred elements, and reading it one step lighter
+     * made them quieter than the captions beside them. A rung the product uses
+     * for a distinct job is not a duplicate, it is a rung. ───────────────── */
+    --sa-color-fg-heading: var(--sa-neutral-900);
+    --sa-color-fg-body: var(--sa-neutral-800);
+    --sa-color-fg-secondary: var(--sa-neutral-600);
+    --sa-color-fg-muted: var(--sa-neutral-500);
+    --sa-color-fg-subtle: var(--sa-neutral-450);
+    --sa-color-fg-disabled: var(--sa-neutral-300);
+    /* Text lying on the accent. White, and that is an ASSUMPTION about your
+     * brand rather than a derivation from it: CSS cannot branch on a colour's
+     * luminance, so nothing here can notice that `$primary` is a light amber
+     * and white on it reads 2.15:1. `contrast-color()` will answer this without
+     * JavaScript once it is safe to ship; until then it is a knob.
+     *
+     * If your brand is light, set this — in BOTH themes, like any role
+     * (docs/design-guide.md#overriding-a-role):
+     *
+     *     :root, [data-sa-theme='dark'], body.body--dark {
+     *         --sa-color-fg-on-accent: #1a1300;
+     *     }
+     */
+    --sa-color-fg-on-accent: var(--sa-white);
+
+    /* ── Lines. ─────────────────────────────────────────────────────────── */
+    --sa-color-border: var(--sa-neutral-200);
+    --sa-color-border-soft: var(--sa-neutral-100);
+    --sa-color-border-strong: var(--sa-neutral-300);
+    --sa-color-border-focus: var(--sa-color-accent);
+
+    /* ── Accent — the host's brand, and the surfaces derived from it. ───── */
+    --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-black));
+    --sa-color-accent-surface: color-mix(in srgb, var(--sa-color-accent) 8%, transparent);
+    --sa-color-accent-surface-soft: color-mix(in srgb, var(--sa-color-accent) 4%, transparent);
+    --sa-color-accent-surface-strong: color-mix(
+        in srgb,
+        var(--sa-color-accent) 10%,
+        var(--sa-color-bg-surface)
+    );
+    --sa-color-accent-border: color-mix(in srgb, var(--sa-color-accent) 18%, transparent);
+
+    /* ── Status tones. Five, and all five have the same six slots, so a page
+     * that knows one knows the others:
+     *
+     *   <tone>                 the solid graphic colour — an icon, a bar, a dot
+     *   <tone>-strong          the brighter variant, for a selected outline
+     *   <tone>-fg              text ON the tinted surface, contrast-checked
+     *   <tone>-surface         the quiet tint — a banner across a section
+     *   <tone>-surface-strong  the loud tint — a chip, a pill, a single cell
+     *   <tone>-border          the tinted line that closes either surface
+     * ──────────────────────────────────────────────────────────────────── */
+    --sa-color-positive: var(--sa-green-700);
+    --sa-color-positive-strong: var(--sa-green-500);
+    --sa-color-positive-fg: var(--sa-green-700);
+    --sa-color-positive-surface: var(--sa-green-50);
+    --sa-color-positive-surface-strong: var(--sa-green-100);
+    --sa-color-positive-border: var(--sa-green-200);
+
+    --sa-color-warning: var(--sa-amber-700);
+    --sa-color-warning-strong: var(--sa-amber-500);
+    --sa-color-warning-fg: var(--sa-amber-700);
+    --sa-color-warning-surface: var(--sa-amber-50);
+    --sa-color-warning-surface-strong: var(--sa-amber-100);
+    --sa-color-warning-border: var(--sa-amber-200);
+
+    --sa-color-negative: var(--sa-red-600);
+    --sa-color-negative-strong: var(--sa-red-500);
+    --sa-color-negative-fg: var(--sa-red-700);
+    --sa-color-negative-surface: var(--sa-red-50);
+    --sa-color-negative-surface-strong: var(--sa-red-100);
+    --sa-color-negative-border: var(--sa-red-200);
+
+    --sa-color-info: var(--sa-blue-600);
+    --sa-color-info-strong: var(--sa-blue-500);
+    --sa-color-info-fg: var(--sa-blue-700);
+    --sa-color-info-surface: var(--sa-blue-50);
+    --sa-color-info-surface-strong: var(--sa-blue-100);
+    --sa-color-info-border: var(--sa-blue-200);
+
+    /* `scheduled` is a tone rather than a status colour reused: a version that
+     * is planned but not yet live is neither a warning nor an achievement, and
+     * six surfaces had each picked their own blue-ish colour to say so. */
+    --sa-color-scheduled: var(--sa-indigo-700);
+    --sa-color-scheduled-strong: var(--sa-indigo-400);
+    --sa-color-scheduled-fg: var(--sa-indigo-700);
+    --sa-color-scheduled-surface: var(--sa-indigo-50);
+    --sa-color-scheduled-surface-strong: var(--sa-indigo-100);
+    --sa-color-scheduled-border: var(--sa-indigo-200);
+
+    /* ── Catalogue entities. Not statuses: these two say WHAT a row is, and
+     * the plan editor, the matrix, the review and the discovery page all need
+     * to agree, or the same dot means two things on two screens. ────────── */
+    --sa-color-feature: var(--sa-violet-500);
+    --sa-color-feature-fg: var(--sa-violet-700);
+    --sa-color-feature-surface: var(--sa-violet-50);
+    --sa-color-quota: var(--sa-sky-500);
+    --sa-color-quota-surface: var(--sa-sky-50);
+    --sa-color-quota-border: var(--sa-sky-200);
+    --sa-color-bundle: var(--sa-amber-500);
+    --sa-color-bundle-surface: var(--sa-amber-100);
+
+    /* ── Identity. A CATEGORICAL ramp: the only job of these seven is to be
+     * told apart.
+     *
+     * Use them when a colour distinguishes one row from the next and means
+     * nothing beyond that — a plan's mark, a promotion badge, a capability
+     * kind. Use `feature`/`quota`/`bundle`/`scheduled` above when the category
+     * carries meaning; a reader should never have to guess which of the two a
+     * colour is doing.
+     *
+     * They exist because the package had FIVE of these ramps, all six colours
+     * long, none agreeing: `PlanList` and `PlanMatrix` shared one byte for
+     * byte, `tenants/format.ts` had a third that gave the same plan a
+     * different colour on the tenants page, and `PromoCodesPage`,
+     * `MarketingPromotionsTab` and `discovery-ui.ts` each invented their own.
+     * Every one of them was a hex literal in TypeScript, so none followed the
+     * theme: the plan mark measured 2.96:1 on a dark surface and was carried
+     * as a named contrast exception because there was nowhere to fix it.
+     *
+     * Each rung is chosen to clear 3:1 as TEXT on this theme's card surface,
+     * because that is how they are used — as the label, not only as a dot. */
+    --sa-color-identity-1: var(--sa-blue-700);
+    --sa-color-identity-2: var(--sa-violet-700);
+    --sa-color-identity-3: var(--sa-green-700);
+    --sa-color-identity-4: var(--sa-amber-700);
+    --sa-color-identity-5: var(--sa-sky-700);
+    --sa-color-identity-6: var(--sa-red-700);
+    /* The entry tier, and the answer for "no identity yet". Quiet on purpose:
+     * a starter plan reading as loud as an enterprise one is a wrong signal. */
+    --sa-color-identity-neutral: var(--sa-neutral-500);
+
+    /* ── Inverse chrome — the dark header, drawer and login backdrop.
+     *
+     * Declared identically in both themes ON PURPOSE. This surface is dark in
+     * a light theme too, so a role that flipped would turn the drawer's labels
+     * black on black the moment somebody enabled dark mode. Same reasoning as
+     * for the brand accent: what is dark by design does not follow the theme.
+     * ──────────────────────────────────────────────────────────────────── */
+    --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);
+
+    /* ── Focus and selection. ───────────────────────────────────────────── */
+    --sa-color-focus-ring: color-mix(in srgb, var(--sa-color-accent) 35%, transparent);
+    --sa-color-selection: color-mix(in srgb, var(--sa-color-accent) 22%, transparent);
+
+    /* ── Shadow. One ink, four tints, five elevations.
+     *
+     * The ink is a token rather than black because a slate-tinted shadow reads
+     * as depth on a slate-tinted page, while pure black reads as dirt. In the
+     * dark theme it becomes black and the alphas rise, because a light shadow
+     * on a dark surface is invisible at 6%. ─────────────────────────────── */
+    --sa-shadow-ink: var(--sa-neutral-900);
+    --sa-shadow-tint-1: color-mix(in srgb, var(--sa-shadow-ink) 6%, transparent);
+    --sa-shadow-tint-2: color-mix(in srgb, var(--sa-shadow-ink) 8%, transparent);
+    --sa-shadow-tint-3: color-mix(in srgb, var(--sa-shadow-ink) 12%, transparent);
+    --sa-shadow-tint-4: color-mix(in srgb, var(--sa-shadow-ink) 20%, 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);
+}