@saasicat/ui-vue 0.22.2 → 0.24.0

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

@@ -0,0 +1,63 @@
+/* The pager below a list (see AdminPaginator). Right-aligned, one rule, so a
+ * list contributes its counts and nothing about where paging sits.
+ */
+
+.sa-paginator {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 12px 0 0;
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-muted);
+}
+.sa-paginator__size-label {
+    font-weight: 500;
+}
+.sa-paginator__select {
+    min-width: 92px;
+}
+.sa-paginator__step,
+.sa-paginator__page {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 30px;
+    padding: 0 8px;
+    border: 1px solid var(--sa-color-border);
+    border-radius: var(--sa-radius-control);
+    background: var(--sa-color-bg-surface);
+    color: var(--sa-color-fg-body);
+    font: inherit;
+    cursor: pointer;
+    transition:
+        background 0.12s,
+        border-color 0.12s;
+}
+.sa-paginator__page {
+    font-weight: 600;
+    color: var(--sa-color-fg-heading);
+    min-width: 96px;
+}
+.sa-paginator__step:hover:not(:disabled),
+.sa-paginator__page:hover:not(:disabled) {
+    background: var(--sa-color-bg-sunken);
+    border-color: var(--sa-color-border-strong);
+}
+.sa-paginator__step:disabled,
+.sa-paginator__page:disabled {
+    opacity: 0.45;
+    cursor: default;
+}
+.sa-paginator__input {
+    min-width: 96px;
+    min-height: 30px;
+    padding: 0 8px;
+    border: 1px solid var(--sa-color-accent);
+    border-radius: var(--sa-radius-control);
+    background: var(--sa-color-bg-surface);
+    color: var(--sa-color-fg-heading);
+    font: inherit;
+    font-weight: 600;
+    text-align: center;
+}

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

@@ -0,0 +1,67 @@
+/* Section — a labelled block within a page (see AdminSection). It carries the
+ * surface: the page frame is transparent, so what a reader sees as "a block of
+ * this page" is exactly one section. A section that needs an inner card still
+ * adds `.sa-card`; a section IS one, so the two do not stack.
+ */
+
+/* Rhythm only for sections sitting directly in the page flow. Deliberately a
+ * child selector: sections placed inside a grid or flex container get their
+ * spacing from that container, and a blanket margin would fight it. */
+.sa-page > .sa-section,
+.sa-page-body > .sa-section {
+    margin-bottom: 16px;
+}
+.sa-page > .sa-section:last-child,
+.sa-page-body > .sa-section:last-child {
+    margin-bottom: 0;
+}
+
+.sa-section {
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
+    border-radius: var(--sa-radius-section);
+}
+.sa-section__body {
+    padding: var(--sa-pad-section);
+}
+
+/* The head is the hero's block one level down: same typography, same 22px
+ * inset — so a section title sits exactly under the page title — but no tinted
+ * box of its own. The section already is a surface; a box inside it would read
+ * as a panel within a panel.
+ *
+ * The size steps down because the level does. Everything else is the hero's. */
+.sa-section__head {
+    display: flex;
+    align-items: flex-start;
+    gap: 20px;
+    padding: 18px 22px 0;
+}
+.sa-section__title {
+    margin: 0;
+    font-family: var(--sa-font-head);
+    font-size: var(--sa-text-xl);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.25;
+    color: var(--sa-color-fg-heading);
+}
+.sa-section__sub {
+    margin: 1px 0 0;
+    font-size: var(--sa-text-md);
+    line-height: 1.35;
+    color: var(--sa-color-fg-muted);
+}
+.sa-section__actions {
+    margin-left: auto;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+/* Key-value grid — the layout `KvBlock` is meant to sit in. */
+.sa-kv-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 12px;
+}

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

@@ -0,0 +1,189 @@
+/* Statistics — one tile look for the whole admin surface (see AdminStatistics
+ * and AdminKpi). Seven near-copies preceded this; two of them were byte
+ * identical. Every radius here resolves to `--sa-radius-tile`, which is the
+ * single place a tile's corner is decided.
+ *
+ * Two arrangements, because the tiles serve two jobs: `grid` for informational
+ * rows that should share a baseline, `strip` for the clickable filter pills
+ * that wrap along a toolbar.
+ */
+
+.sa-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    /* Kept in step with GAP_PX in AdminStatistics, which subtracts the gap
+     * total when it caps the track count. */
+    gap: 10px;
+}
+
+.sa-kpi {
+    display: flex;
+    align-items: stretch;
+    gap: 12px;
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
+    border-radius: var(--sa-radius-tile);
+    padding: 10px 14px 9px;
+    font: inherit;
+    color: inherit;
+    text-align: left;
+}
+/* The figure column. It carries the stacking so the tile itself can put an
+ * icon beside it without a second set of rules. */
+.sa-kpi__text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+    flex: 1;
+    min-width: 0;
+}
+/* Subs line up across a row rather than floating under uneven values. */
+.sa-stats .sa-kpi__sub {
+    margin-top: auto;
+}
+
+.sa-kpi__label {
+    font-size: var(--sa-text-sm);
+    font-weight: 600;
+    color: var(--sa-color-fg-muted);
+    order: 2;
+}
+.sa-kpi__value {
+    font-size: var(--sa-text-2xl);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.05;
+    color: var(--sa-color-fg-heading);
+    order: 1;
+}
+.sa-kpi__sub {
+    font: 500 var(--sa-text-2xs) var(--sa-font-mono);
+    letter-spacing: 0.04em;
+    color: var(--sa-color-fg-muted);
+    padding-top: 1px;
+    order: 3;
+}
+.sa-kpi__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--sa-color-fg-muted);
+}
+
+/* Inline tiles: the icon leads in a tinted square and the label sits above the
+ * figure, for rows where the icon carries the identity of the number. */
+.sa-kpi--inline {
+    align-items: center;
+    padding: 12px 14px;
+}
+.sa-kpi--inline .sa-kpi__icon {
+    width: 34px;
+    height: 34px;
+    flex: none;
+    border-radius: var(--sa-radius-tile);
+    background: var(--sa-color-accent-surface-strong);
+    color: var(--sa-color-accent);
+}
+.sa-kpi--inline .sa-kpi__label {
+    order: 1;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+.sa-kpi--inline .sa-kpi__value {
+    order: 2;
+}
+
+/* Interactive tiles — rendered as <button> by AdminKpi when it has an action. */
+.sa-kpi--action {
+    cursor: pointer;
+    transition:
+        border-color 0.12s,
+        background 0.12s,
+        box-shadow 0.12s;
+}
+.sa-kpi--action:hover {
+    background: var(--sa-color-bg-sunken);
+    border-color: var(--sa-color-border-strong);
+}
+.sa-kpi--selected {
+    border-color: var(--sa-color-fg-heading);
+    box-shadow:
+        0 0 0 1px var(--sa-color-fg-heading) inset,
+        var(--sa-shadow-2);
+}
+
+/* Tone. By default only the value takes the colour; `--surface` tints the
+ * whole tile, which is what the discovery and draft tiles need to read as a
+ * state rather than as a number. */
+.sa-kpi--positive .sa-kpi__value {
+    color: var(--sa-color-positive);
+}
+.sa-kpi--warn .sa-kpi__value {
+    color: var(--sa-color-warning);
+}
+.sa-kpi--danger .sa-kpi__value {
+    color: var(--sa-color-negative);
+}
+.sa-kpi--info .sa-kpi__value {
+    color: var(--sa-color-info-fg);
+}
+.sa-kpi--muted .sa-kpi__value {
+    color: var(--sa-color-fg-secondary);
+}
+.sa-kpi--purple .sa-kpi__value {
+    color: var(--sa-color-feature-fg);
+}
+
+.sa-kpi--surface.sa-kpi--positive {
+    border-color: var(--sa-color-positive-border);
+    background: var(--sa-color-positive-surface);
+}
+.sa-kpi--surface.sa-kpi--warn {
+    border-color: var(--sa-color-warning-border);
+    background: var(--sa-color-warning-surface);
+}
+.sa-kpi--surface.sa-kpi--danger {
+    border-color: var(--sa-color-negative-border);
+    background: var(--sa-color-negative-surface);
+}
+.sa-kpi--surface.sa-kpi--positive .sa-kpi__label,
+.sa-kpi--surface.sa-kpi--warn .sa-kpi__label,
+.sa-kpi--surface.sa-kpi--danger .sa-kpi__label {
+    color: inherit;
+}
+
+/* Selected tiles keep the tone in the outline and take the neutral elevation.
+ * Five tinted shadows preceded this — one per tone, each a different rgba() —
+ * and at 6% alpha under a 1px outline none of them was distinguishable from
+ * the others. The outline is what carries the state. */
+.sa-kpi--selected.sa-kpi--positive {
+    border-color: var(--sa-color-positive-strong);
+    box-shadow:
+        0 0 0 1px var(--sa-color-positive-strong) inset,
+        var(--sa-shadow-2);
+}
+.sa-kpi--selected.sa-kpi--warn {
+    border-color: var(--sa-color-warning-strong);
+    box-shadow:
+        0 0 0 1px var(--sa-color-warning-strong) inset,
+        var(--sa-shadow-2);
+}
+.sa-kpi--selected.sa-kpi--danger {
+    border-color: var(--sa-color-negative);
+    box-shadow:
+        0 0 0 1px var(--sa-color-negative) inset,
+        var(--sa-shadow-2);
+}
+.sa-kpi--selected.sa-kpi--info {
+    border-color: var(--sa-color-info-strong);
+    box-shadow:
+        0 0 0 1px var(--sa-color-info-strong) inset,
+        var(--sa-shadow-2);
+}
+.sa-kpi--selected.sa-kpi--purple {
+    border-color: var(--sa-color-feature);
+    box-shadow:
+        0 0 0 1px var(--sa-color-feature) inset,
+        var(--sa-shadow-2);
+}

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,112 @@
+/* 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;
+    /* Sky-500 is 2.6:1 on a white card — fine as a dot or a border, too pale to
+     * carry a label. The identity ramp needs a readable sky, so here is the
+     * rung below it. */
+    --sa-sky-700: #0369a1;
+
+    /* ── 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;
+}