@saasicat/ui-vue 0.23.0 → 0.24.1

package/src/pages-tenant/MySubscriptionBundlesPage.vue

@@ -188,6 +188,7 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue';
 import type { SubscriptionBundleRecord } from '@saasicat/types';
+import type { HttpClient } from '../client/types.js';
 
 import { useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 import { useTenantSubscriptionBundles } from '../vue/use-tenant-subscription-bundles.js';
@@ -213,6 +214,13 @@ interface BookableBundle {
 const props = withDefaults(
     defineProps<{
         billingEndpoint: string;
+        /**
+         * App-specific HTTP adapter, as every other tenant-facing component
+         * takes. Without it this page fell through to `defaultHttpClient()`,
+         * so an app using axios with an auth interceptor got a bare `fetch()`
+         * here and nowhere else — and no fixture could reach it either.
+         */
+        http?: HttpClient;
         /**
          * Mapping `bundleVersionId → BundleKey/Label` (the consumer can
          * preload this from the public catalog). Without a mapping we show the
@@ -253,6 +261,7 @@ const effectiveI18n = computed<TenantPlanSectionI18n>(() => ({
 const { bundles, loading, error, load, add, cancel } = useTenantSubscriptionBundles({
     billingEndpoint: props.billingEndpoint,
     getAuthToken: props.getAuthToken,
+    http: props.http,
 });
 
 onMounted(() => load());

package/src/pages-tenant/OnboardingConfigurator.vue

@@ -305,7 +305,7 @@ defineExpose({ draft });
     font-size: var(--sa-text-xs);
     letter-spacing: 0.1em;
     text-transform: uppercase;
-    color: var(--sa-color-accent);
+    color: var(--sa-color-accent-strong);
     background: var(--sa-color-accent-surface);
     padding: 6px 11px;
     border-radius: 999px;
@@ -328,7 +328,7 @@ defineExpose({ draft });
     gap: 24px;
     align-items: start;
 }
-@media (max-width: 1100px) {
+@media (max-width: 1023.98px) {
     .sp-onb__layout {
         grid-template-columns: 1fr;
     }

package/src/pages-tenant/PlanChangeWizard.vue

@@ -223,6 +223,7 @@ import PlanGrid from '../components/plan/PlanGrid.vue';
 import { useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 import type { BillingCycleStr, PlanChangePreviewShape } from '../vue/use-tenant-billing.js';
 import type { CatalogPlan } from '../vue/use-tenant-billing-catalog.js';
+import type { PlanChangeWizardI18n } from './default-i18n.js';
 
 // PlanChangeWizard — 3-step dialog for plan changes.
 //
@@ -231,54 +232,6 @@ import type { CatalogPlan } from '../vue/use-tenant-billing-catalog.js';
 // the limits check + proration + feature diff + blockers, step 3 calls `changePlan`.
 // Data-driven via the passed `catalogQuotaKeys[]` — no hard-coded trinity.
 
-interface I18nStrings {
-    title: string;
-    close: string;
-    currentLabel: string;
-    cycleMonthly: string;
-    cycleYearly: string;
-    badgeCurrent: string;
-    badgePopular: string;
-    priceUnitMonthly: string;
-    priceUnitYearly: string;
-    priceOnRequest: string;
-    stepChoose: string;
-    stepChooseIntro: string;
-    stepPreview: string;
-    stepConfirm: string;
-    next: string;
-    back: string;
-    previewLoading: string;
-    effectiveAtLabel: string;
-    effectiveImmediate: string;
-    prorationTitle: string;
-    prorationLine: string;
-    prorationDays: string;
-    limitsTitle: string;
-    limitsUsed: string;
-    limitsCurrent: string;
-    limitsTarget: string;
-    featuresGained: string;
-    featuresLost: string;
-    blockersTitle: string;
-    confirmImmediate: string;
-    confirmScheduled: string;
-    confirmAction: string;
-    confirmInProgress: string;
-    confirmPriceTitle: string;
-    confirmProratedNow: string;
-    confirmRecurringNext: string;
-    confirmRecurringFrom: string;
-    perCycleMonthly: string;
-    perCycleYearly: string;
-    confirmTrialNote: string;
-    confirmRecurringTrialEnd: string;
-    changeTypeUpgrade: string;
-    changeTypeDowngrade: string;
-    changeTypeCycle: string;
-    changeTypeNoop: string;
-}
-
 interface Props {
     modelValue: boolean;
     plans: CatalogPlan[];
@@ -314,7 +267,7 @@ interface Props {
     /** Preview caller (passed through from the consumer composable). */
     previewPlanChange: (plan: string, cycle: BillingCycleStr) => Promise<PlanChangePreviewShape>;
     changePlan: (plan: string, cycle: BillingCycleStr, immediate: boolean) => Promise<void>;
-    i18n: I18nStrings;
+    i18n: PlanChangeWizardI18n;
 }
 
 const props = defineProps<Props>();

package/src/pages-tenant/TenantPlanSection.vue

@@ -198,7 +198,11 @@ import { computed, ref } from 'vue';
 import PackageSnapshotPanel from './PackageSnapshotPanel.vue';
 import PendingVersionBanner from './PendingVersionBanner.vue';
 import PlanChangeWizard from './PlanChangeWizard.vue';
-import { defaultTenantPlanSectionI18n, type TenantPlanSectionI18n } from './default-i18n.js';
+import {
+    defaultTenantPlanSectionI18n,
+    planChangeWizardI18n,
+    type TenantPlanSectionI18n,
+} from './default-i18n.js';
 import BundlePreviewDialog from './tenant-plan-section/BundlePreviewDialog.vue';
 import TenantBundleStore from './tenant-plan-section/TenantBundleStore.vue';
 import TenantFeatureMatrix from './tenant-plan-section/TenantFeatureMatrix.vue';
@@ -429,53 +433,7 @@ const statusColor = computed(() => {
     }
 });
 
-const wizardI18n = computed(() => ({
-    title: effectiveI18n.value.wizardTitle,
-    close: effectiveI18n.value.wizardClose,
-    currentLabel: effectiveI18n.value.wizardCurrent,
-    cycleMonthly: effectiveI18n.value.cycleMonthly,
-    cycleYearly: effectiveI18n.value.cycleYearly,
-    badgeCurrent: effectiveI18n.value.wizardBadgeCurrent,
-    badgePopular: effectiveI18n.value.wizardBadgePopular,
-    priceUnitMonthly: effectiveI18n.value.wizardPriceUnitMonthly,
-    priceUnitYearly: effectiveI18n.value.wizardPriceUnitYearly,
-    priceOnRequest: effectiveI18n.value.wizardPriceOnRequest,
-    stepChoose: effectiveI18n.value.wizardStepChoose,
-    stepChooseIntro: effectiveI18n.value.wizardStepChooseIntro,
-    stepPreview: effectiveI18n.value.wizardStepPreview,
-    stepConfirm: effectiveI18n.value.wizardStepConfirm,
-    next: effectiveI18n.value.wizardNext,
-    back: effectiveI18n.value.wizardBack,
-    previewLoading: effectiveI18n.value.wizardPreviewLoading,
-    effectiveAtLabel: effectiveI18n.value.wizardEffectiveAtLabel,
-    effectiveImmediate: effectiveI18n.value.wizardEffectiveImmediate,
-    prorationTitle: effectiveI18n.value.wizardProrationTitle,
-    prorationLine: effectiveI18n.value.wizardProrationLine,
-    prorationDays: effectiveI18n.value.wizardProrationDays,
-    limitsTitle: effectiveI18n.value.wizardLimitsTitle,
-    limitsUsed: effectiveI18n.value.wizardLimitsUsed,
-    limitsCurrent: effectiveI18n.value.wizardLimitsCurrent,
-    limitsTarget: effectiveI18n.value.wizardLimitsTarget,
-    featuresGained: effectiveI18n.value.wizardFeaturesGained,
-    featuresLost: effectiveI18n.value.wizardFeaturesLost,
-    blockersTitle: effectiveI18n.value.wizardBlockersTitle,
-    confirmImmediate: effectiveI18n.value.wizardConfirmImmediate,
-    confirmScheduled: effectiveI18n.value.wizardConfirmScheduled,
-    confirmAction: effectiveI18n.value.wizardConfirmAction,
-    confirmInProgress: effectiveI18n.value.wizardConfirmInProgress,
-    confirmPriceTitle: effectiveI18n.value.wizardConfirmPriceTitle,
-    confirmProratedNow: effectiveI18n.value.wizardConfirmProratedNow,
-    confirmRecurringNext: effectiveI18n.value.wizardConfirmRecurringNext,
-    confirmRecurringFrom: effectiveI18n.value.wizardConfirmRecurringFrom,
-    perCycleMonthly: effectiveI18n.value.wizardConfirmPerCycleMonthly,
-    perCycleYearly: effectiveI18n.value.wizardConfirmPerCycleYearly,
-    confirmTrialNote: effectiveI18n.value.wizardConfirmTrialNote,
-    confirmRecurringTrialEnd: effectiveI18n.value.wizardConfirmRecurringTrialEnd,
-    changeTypeUpgrade: effectiveI18n.value.wizardChangeTypeUpgrade,
-    changeTypeDowngrade: effectiveI18n.value.wizardChangeTypeDowngrade,
-    changeTypeCycle: effectiveI18n.value.wizardChangeTypeCycle,
-    changeTypeNoop: effectiveI18n.value.wizardChangeTypeNoop,
-}));
+const wizardI18n = computed(() => planChangeWizardI18n(effectiveI18n.value));
 
 // Helper hooks with defaults
 function quotaLabelResolved(key: string): string {

package/src/pages-tenant/default-i18n.ts

@@ -494,3 +494,116 @@ export const DEFAULT_I18N_EN: TenantPlanSectionI18n = {
 export function defaultTenantPlanSectionI18n(locale: SaLocale): TenantPlanSectionI18n {
     return locale === 'en' ? DEFAULT_I18N_EN : DEFAULT_I18N_DE;
 }
+
+/**
+ * The strings `PlanChangeWizard` takes.
+ *
+ * A projection of `TenantPlanSectionI18n` with the `wizard` prefix dropped, so
+ * the wizard's own template reads `i18n.stepChoose` rather than
+ * `i18n.wizardStepChoose`.
+ */
+export interface PlanChangeWizardI18n {
+    title: string;
+    close: string;
+    currentLabel: string;
+    cycleMonthly: string;
+    cycleYearly: string;
+    badgeCurrent: string;
+    badgePopular: string;
+    priceUnitMonthly: string;
+    priceUnitYearly: string;
+    priceOnRequest: string;
+    stepChoose: string;
+    stepChooseIntro: string;
+    stepPreview: string;
+    stepConfirm: string;
+    next: string;
+    back: string;
+    previewLoading: string;
+    effectiveAtLabel: string;
+    effectiveImmediate: string;
+    prorationTitle: string;
+    prorationLine: string;
+    prorationDays: string;
+    limitsTitle: string;
+    limitsUsed: string;
+    limitsCurrent: string;
+    limitsTarget: string;
+    featuresGained: string;
+    featuresLost: string;
+    blockersTitle: string;
+    confirmImmediate: string;
+    confirmScheduled: string;
+    confirmAction: string;
+    confirmInProgress: string;
+    confirmPriceTitle: string;
+    confirmProratedNow: string;
+    confirmRecurringNext: string;
+    confirmRecurringFrom: string;
+    perCycleMonthly: string;
+    perCycleYearly: string;
+    confirmTrialNote: string;
+    confirmRecurringTrialEnd: string;
+    changeTypeUpgrade: string;
+    changeTypeDowngrade: string;
+    changeTypeCycle: string;
+    changeTypeNoop: string;
+}
+
+/**
+ * Builds the wizard's strings from the section's.
+ *
+ * Here rather than inline in `TenantPlanSection.vue`, because the wizard is an
+ * exported component: a consumer who mounts it directly would otherwise have to
+ * reproduce all 44 keys of this mapping by hand, and a visual fixture had to do
+ * exactly that before it moved.
+ */
+export function planChangeWizardI18n(i18n: TenantPlanSectionI18n): PlanChangeWizardI18n {
+    return {
+        title: i18n.wizardTitle,
+        close: i18n.wizardClose,
+        currentLabel: i18n.wizardCurrent,
+        cycleMonthly: i18n.cycleMonthly,
+        cycleYearly: i18n.cycleYearly,
+        badgeCurrent: i18n.wizardBadgeCurrent,
+        badgePopular: i18n.wizardBadgePopular,
+        priceUnitMonthly: i18n.wizardPriceUnitMonthly,
+        priceUnitYearly: i18n.wizardPriceUnitYearly,
+        priceOnRequest: i18n.wizardPriceOnRequest,
+        stepChoose: i18n.wizardStepChoose,
+        stepChooseIntro: i18n.wizardStepChooseIntro,
+        stepPreview: i18n.wizardStepPreview,
+        stepConfirm: i18n.wizardStepConfirm,
+        next: i18n.wizardNext,
+        back: i18n.wizardBack,
+        previewLoading: i18n.wizardPreviewLoading,
+        effectiveAtLabel: i18n.wizardEffectiveAtLabel,
+        effectiveImmediate: i18n.wizardEffectiveImmediate,
+        prorationTitle: i18n.wizardProrationTitle,
+        prorationLine: i18n.wizardProrationLine,
+        prorationDays: i18n.wizardProrationDays,
+        limitsTitle: i18n.wizardLimitsTitle,
+        limitsUsed: i18n.wizardLimitsUsed,
+        limitsCurrent: i18n.wizardLimitsCurrent,
+        limitsTarget: i18n.wizardLimitsTarget,
+        featuresGained: i18n.wizardFeaturesGained,
+        featuresLost: i18n.wizardFeaturesLost,
+        blockersTitle: i18n.wizardBlockersTitle,
+        confirmImmediate: i18n.wizardConfirmImmediate,
+        confirmScheduled: i18n.wizardConfirmScheduled,
+        confirmAction: i18n.wizardConfirmAction,
+        confirmInProgress: i18n.wizardConfirmInProgress,
+        confirmPriceTitle: i18n.wizardConfirmPriceTitle,
+        confirmProratedNow: i18n.wizardConfirmProratedNow,
+        confirmRecurringNext: i18n.wizardConfirmRecurringNext,
+        confirmRecurringFrom: i18n.wizardConfirmRecurringFrom,
+        perCycleMonthly: i18n.wizardConfirmPerCycleMonthly,
+        perCycleYearly: i18n.wizardConfirmPerCycleYearly,
+        confirmTrialNote: i18n.wizardConfirmTrialNote,
+        confirmRecurringTrialEnd: i18n.wizardConfirmRecurringTrialEnd,
+        changeTypeUpgrade: i18n.wizardChangeTypeUpgrade,
+        changeTypeDowngrade: i18n.wizardChangeTypeDowngrade,
+        changeTypeCycle: i18n.wizardChangeTypeCycle,
+        changeTypeNoop: i18n.wizardChangeTypeNoop,
+    };
+}

package/src/ui/theme/_breakpoints.scss

@@ -7,8 +7,14 @@
 //
 // 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.
+// 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;

package/src/ui/theme/base.css

@@ -22,7 +22,19 @@
  * 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. */
+ * their own root, which is exactly the divergence this prevents.
+ *
+ * `.sa-page` is also the theme's REACH MARKER, and that is the larger job: it
+ * and `.sa-portal` are the only two prefixes through which the component layer
+ * corrects Quasar's own DOM. A screen without one of them gets Quasar's look —
+ * its 4px radii, its transparent outlined control, its neutral #1d1d1d card in
+ * dark mode — and nothing announces it. The login and setup screens rendered
+ * that way for their whole existence, and they are the first thing a user sees.
+ *
+ * Which is why the screens OUTSIDE the shell carry it too, even though they
+ * bring their own frame: their own root class is more specific than this one,
+ * so the min-height and padding below stay theirs and only the reach is shared.
+ * `tests/theme-reaches-every-page.test.js` holds every page to it. */
 .sa-page {
     min-height: calc(100vh - 56px);
     padding: 20px 28px 28px;

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

@@ -32,6 +32,32 @@
     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);

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

@@ -36,3 +36,47 @@
     flex: 1;
     min-width: 200px;
 }
+
+/* Quasar's own accent-coloured text, painted from the role that is safe on a
+ * dark surface.
+ *
+ * Quasar colours the focused field's floating label and the selected menu item
+ * with `--q-primary` — the brand itself, which does not change between themes.
+ * On a light card that is fine; on the dark theme's slate surfaces the brand
+ * blue lands around 3.4:1 and the shrunk label is small text, so it reads as
+ * decoration rather than as the name of the field you are typing in.
+ *
+ * `--sa-color-accent-strong` is the same brand mixed toward the theme's own
+ * extreme — darker in light, lighter in dark — which is exactly what the guide
+ * prescribes for accent text. The colour still follows the host's `$primary`,
+ * so nothing about branding changes.
+ *
+ * `q-field--highlighted` is the whole story and `q-field--focused` would be
+ * noise: Quasar's only label-colour rule is
+ * `.q-field--highlighted .q-field__label { color: currentColor }`, and it sets
+ * that class whenever the field is focused OR invalid.
+ *
+ * Which is why the invalid half has to be carved back out. Quasar paints an
+ * invalid field's red by putting `text-negative` on the CONTROL and letting the
+ * label inherit it through that `currentColor`. Naming any colour on the label
+ * cuts the inheritance, and `!important` on `.text-negative` cannot defend it,
+ * because that declaration sits on a different element. Without the `:not()` a
+ * field with `rules` or `:error` — the login, setup and confirm forms — would
+ * announce its failure in every indicator except the one naming the field.
+ *
+ * `.sa-portal` alongside `.sa-page` for the usual reason: Quasar teleports every
+ * menu to `<body>`, so a `.sa-page`-prefixed rule never reaches a dropdown. */
+.sa-page .q-field--highlighted:not(.q-field--error) .q-field__label,
+.sa-portal .q-field--highlighted:not(.q-field--error) .q-field__label {
+    color: var(--sa-color-accent-strong);
+}
+
+/* The chosen entry in an open select. Quasar marks it `q-item--active` and
+ * colours it with the brand; on the dark menu surface that is the same 3.4:1,
+ * and it is the one line in the list that has to be legible. */
+.sa-page .q-item--active,
+.sa-portal .q-item--active,
+.sa-page .q-item.q-manual-focusable--focused,
+.sa-portal .q-item.q-manual-focusable--focused {
+    color: var(--sa-color-accent-strong);
+}

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

@@ -83,7 +83,7 @@
     flex: none;
     border-radius: var(--sa-radius-tile);
     background: var(--sa-color-accent-surface-strong);
-    color: var(--sa-color-accent);
+    color: var(--sa-color-accent-strong);
 }
 .sa-kpi--inline .sa-kpi__label {
     order: 1;

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

@@ -100,6 +100,10 @@
     --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;

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

@@ -125,6 +125,18 @@ body.body--dark {
     --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);

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

@@ -153,6 +153,36 @@
     --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