@saasicat/ui-vue 0.23.0 → 0.24.1

package/src/components/plan-list/PlanList.vue

@@ -45,11 +45,7 @@
                             <div class="sa-plan-list-plan-name">
                                 <div
                                     class="sa-plan-list-plan-mark"
-                                    :style="{
-                                        background: planAccent(p.planKey) + '15',
-                                        color: planAccent(p.planKey),
-                                        borderColor: planAccent(p.planKey) + '33',
-                                    }"
+                                    :style="identityChipStyle(planAccent(p.planKey))"
                                 >
                                     {{ p.planKey.slice(0, 3) }}
                                 </div>
@@ -415,6 +411,7 @@
 import { resolvePlans, type ResolvedPlan } from '../../client/resolve-plans.js';
 import { computed, ref } from 'vue';
 import type { PlanRow, PlanVersionRow } from '@saasicat/types';
+import { identityAccentFor, identityChipStyle } from '../../client/identity-accents.js';
 import { formatMessage } from '../../client/i18n/format.js';
 import { formatCurrency } from '../../client/i18n/currency.js';
 import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
@@ -456,24 +453,12 @@ const common = useSaMessages('common');
 // `clearable` emits null, not '' — see Quasar's use-field clearValue().
 const search = ref<string | null>('');
 
-const DEFAULT_ACCENTS: Record<string, string> = {
-    STARTER: '#64748b',
-    STANDARD: '#2563eb',
-    PRO: '#7c3aed',
-    PROFESSIONAL: '#7c3aed',
-    BUSINESS: '#0ea5e9',
-    ENTERPRISE: '#0f766e',
-    BASIC: '#475569',
-};
-const FALLBACK_ACCENTS = ['#2563eb', '#7c3aed', '#0f766e', '#f59e0b', '#0ea5e9', '#ef4444'];
-
 function planAccent(planKey: string): string {
-    const provided = props.planAccents[planKey];
-    if (provided) return provided;
-    const def = DEFAULT_ACCENTS[planKey];
-    if (def) return def;
-    const idx = props.plans.findIndex((p) => p.planKey === planKey);
-    return FALLBACK_ACCENTS[idx % FALLBACK_ACCENTS.length] ?? FALLBACK_ACCENTS[0]!;
+    return identityAccentFor(
+        planKey,
+        props.planAccents,
+        props.plans.findIndex((p) => p.planKey === planKey),
+    );
 }
 
 const resolvedPlans = computed(() =>
@@ -566,7 +551,13 @@ function hasAnyPublished(row: ResolvedPlan<PlanRow, PlanVersionRow>): boolean {
     background: var(--sa-color-bg-surface);
     border: 1px solid var(--sa-color-border);
     border-radius: 10px;
-    overflow: hidden;
+    /* Scrolls rather than clips. `overflow: hidden` was here to keep the corner
+     * radius, and it also cut the six-column grid off below ~790px — six data
+     * columns squeezed into a phone are not readable anyway, so the honest
+     * answer is the same as for the tab bar: let it scroll. `hidden` on the
+     * cross axis keeps the radius doing its job. */
+    overflow-x: auto;
+    overflow-y: hidden;
 }
 .sa-plan-list-toolbar {
     display: flex;
@@ -590,6 +581,10 @@ function hasAnyPublished(row: ResolvedPlan<PlanRow, PlanVersionRow>): boolean {
 .sa-plan-list-list {
     display: grid;
     grid-template-columns: 1.6fr 0.9fr 0.7fr 0.9fr 1.4fr 160px;
+    /* So the scroll above has something to scroll: without a content floor the
+     * tracks shrink to the container and the cells overflow individually,
+     * which is the clipped state rather than a scrollable one. */
+    min-width: max-content;
     /* Stretch, not centre. Every row is `display: contents`, so its cells are
      * grid items in their own right — and a centred item is only as tall as its
      * own content. The row's hover background is painted per cell, so the band

package/src/components/plan-matrix/PlanMatrix.vue

@@ -272,10 +272,7 @@
                                 <span
                                     v-if="hasFeature(p, fKey)"
                                     class="pm-check"
-                                    :style="{
-                                        background: planAccent(p.planKey) + '15',
-                                        color: planAccent(p.planKey),
-                                    }"
+                                    :style="identityChipStyle(planAccent(p.planKey))"
                                 >
                                     <svg
                                         width="12"
@@ -323,10 +320,7 @@
                             <span
                                 v-if="hasBundle(p, bKey)"
                                 class="pm-check"
-                                :style="{
-                                    background: planAccent(p.planKey) + '15',
-                                    color: planAccent(p.planKey),
-                                }"
+                                :style="identityChipStyle(planAccent(p.planKey))"
                             >
                                 <svg
                                     width="12"
@@ -384,6 +378,7 @@ import { computed } from 'vue';
  */
 const NBSP = '\u00A0';
 import type { PlanRow, PlanVersionRow } from '@saasicat/types';
+import { identityAccentFor, identityChipStyle } from '../../client/identity-accents.js';
 import { formatMessage } from '../../client/i18n/format.js';
 import { formatCurrency } from '../../client/i18n/currency.js';
 import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
@@ -477,24 +472,12 @@ function validFromLabel(validFrom: string): string {
     return formatMessage(msg.value.matrix.validFrom, { date: validFrom.slice(0, 10) });
 }
 
-const DEFAULT_ACCENTS: Record<string, string> = {
-    STARTER: '#64748b',
-    STANDARD: '#2563eb',
-    PRO: '#7c3aed',
-    PROFESSIONAL: '#7c3aed',
-    BUSINESS: '#0ea5e9',
-    ENTERPRISE: '#0f766e',
-    BASIC: '#475569',
-};
-const FALLBACK_ACCENTS = ['#2563eb', '#7c3aed', '#0f766e', '#f59e0b', '#0ea5e9', '#ef4444'];
-
 function planAccent(planKey: string): string {
-    const provided = props.planAccents[planKey];
-    if (provided) return provided;
-    const def = DEFAULT_ACCENTS[planKey];
-    if (def) return def;
-    const idx = props.plans.findIndex((p) => p.planKey === planKey);
-    return FALLBACK_ACCENTS[idx % FALLBACK_ACCENTS.length] ?? FALLBACK_ACCENTS[0]!;
+    return identityAccentFor(
+        planKey,
+        props.planAccents,
+        props.plans.findIndex((p) => p.planKey === planKey),
+    );
 }
 
 const resolvedPlans = computed<ResolvedPlan[]>(() =>
@@ -828,7 +811,7 @@ function formatQuota(v: number | undefined): string {
     height: 30px;
     border-radius: 50%;
     background: var(--sa-color-accent-surface-strong);
-    color: var(--sa-color-accent);
+    color: var(--sa-color-accent-strong);
     margin: 0 auto 6px;
 }
 .pm-add-title {

package/src/components/plan-review/PlanReview.vue

@@ -676,7 +676,7 @@ function onPublish(): void {
     line-height: 1.5;
 }
 
-@media (max-width: 1100px) {
+@media (max-width: 1023.98px) {
     .pr-grid {
         grid-template-columns: 1fr;
     }

package/src/components/plan-version-editor/PlanVersionEditor.vue

@@ -760,6 +760,10 @@ function emitSave(): void {
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
+    /* The editor reflows on ITS OWN width, not the window's — see the
+       `@container` rules at the end of this block. */
+    container-type: inline-size;
+    container-name: pve;
     /* A full view rather than a modal: the columns stretch to the content area
        AdminPage already sizes. */
     height: 100%;
@@ -1546,13 +1550,28 @@ function emitSave(): void {
     display: inline-flex;
 }
 
-/* ── Responsive ────────────────────────────────────────────────── */
-@media (max-width: 1280px) {
+/* ── Responsive ────────────────────────────────────────────────────
+ *
+ * On the CONTAINER's width, not the viewport's, because the viewport is not
+ * what this grid has to fit into. The admin drawer is 240px and collapsible, so
+ * a viewport threshold is wrong in one of its two states by construction — and
+ * with the drawer open at 1024–1100px the old viewport rule left 784–860px for
+ * `320px 1fr 360px`, squeezing the middle column to 104–180px and clipping its
+ * form controls behind `overflow: hidden`.
+ *
+ * The thresholds are the widths the columns actually need:
+ *   1060px  →  320 + 360 fixed leaves ≥ 380px for the basket
+ *    780px  →  below this the three-column form is not usable at all
+ *
+ * These are container queries, so they are not viewport breakpoints and the
+ * Quasar-band rule does not reach them; `@container` needs no newer browser
+ * than the theme already requires. */
+@container pve (max-width: 1060px) {
     .pve-body {
         grid-template-columns: 320px 1fr 360px;
     }
 }
-@media (max-width: 1100px) {
+@container pve (max-width: 780px) {
     .pve-body {
         grid-template-columns: 1fr;
         overflow-y: auto;

package/src/pages-standard/AdminManifestErrorPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="sa-manifest-error">
+    <div class="sa-page sa-manifest-error">
         <q-card class="sa-manifest-error__card">
             <q-card-section class="sa-manifest-error__head">
                 <q-icon name="cloud_off" size="32px" color="negative" />
@@ -112,6 +112,9 @@ function logout(): void | Promise<void> {
     padding: 32px;
     display: flex;
     justify-content: center;
+    /* The page frame is a full viewport tall, and a stretched flex item would
+     * make this card as tall as the screen for four lines of text. */
+    align-items: flex-start;
 }
 .sa-manifest-error__card {
     max-width: 640px;

package/src/pages-standard/BundlesPage.vue

@@ -754,7 +754,7 @@ const classifyDiff = computed(() => props.classifyDiff);
     grid-template-columns: minmax(280px, 360px) 1fr;
     gap: 18px;
 }
-@media (max-width: 980px) {
+@media (max-width: 1023.98px) {
     .sa-bd-grid {
         grid-template-columns: 1fr;
     }

package/src/pages-standard/DashboardPage.vue

@@ -215,7 +215,10 @@ const cards = reactive<KpiCardState[]>([]);
 const loading = ref(false);
 const error = ref<Error | null>(null);
 
-const defaultBarColor = 'linear-gradient(90deg, #3f6bff, #1d4ed8)';
+// Two stops of the brand accent rather than two fixed blues: a host that sets
+// its own `$primary` had a brand-coloured admin with platform-blue KPI bars.
+const defaultBarColor =
+    'linear-gradient(90deg, var(--sa-color-accent), var(--sa-color-accent-strong))';
 
 watch(
     () => props.manifest,
@@ -402,7 +405,7 @@ function barWidth(value: number, max?: number): number {
 /* Header look comes from the global .sa-page-head — only a margin tweak here. */
 
 .sa-kpi__icon :deep(.q-icon) {
-    color: var(--sa-color-accent);
+    color: var(--sa-color-accent-strong);
 }
 
 .sa-dashboard__rows {
@@ -412,7 +415,7 @@ function barWidth(value: number, max?: number): number {
     margin-bottom: 14px;
     align-items: start;
 }
-@media (max-width: 1280px) {
+@media (max-width: 1439.98px) {
     .sa-dashboard__rows {
         grid-template-columns: 1fr;
     }
@@ -420,7 +423,7 @@ function barWidth(value: number, max?: number): number {
 
 .sa-dashboard__count {
     background: var(--sa-color-accent-surface);
-    color: var(--sa-color-accent);
+    color: var(--sa-color-accent-strong);
     font-size: var(--sa-text-xs);
     font-weight: 700;
     padding: 2px 7px;
@@ -489,7 +492,7 @@ function barWidth(value: number, max?: number): number {
     border-color: var(--sa-color-accent-border);
 }
 .sa-dashboard__shortcut :deep(.q-icon) {
-    color: var(--sa-color-accent);
+    color: var(--sa-color-accent-strong);
     flex-shrink: 0;
 }
 .sa-dashboard__shortcut-title {

package/src/pages-standard/DiscoveryPage.vue

@@ -228,25 +228,59 @@ const statusFilterOptions = computed<Array<{ label: string; value: DiscoveryStat
     ],
 );
 
-const appKey = computed(() => props.snapshot?.app.key ?? '—');
+// `?.app?.` rather than `?.app.` — the optional chain has to survive the whole
+// path, not just its first step. `useDiscovery` assigns the response body with
+// an unchecked `as DiscoverySnapshot`, so a 200 whose body is not a snapshot
+// (an older backend, a proxy's JSON error page, a partial response) reaches
+// here as a non-null value without `app`. The guard then stopped one step short
+// and the page threw during a computed — which white-screens the route rather
+// than showing the dash these fallbacks exist for.
+// Narrowed to a string, not merely to "present". The type says `key` is a
+// string; the runtime value is whatever the server sent, because `useDiscovery`
+// assigns the body with an unchecked `as DiscoverySnapshot`. A truthy non-string
+// — `{"app":{"key":1}}` — passes an existence check and then throws on
+// `.charAt`, which is the same white-screen one step further in. Guarding
+// presence without guarding type only moves the crash.
+const appKeyText = computed(() => {
+    const key = props.snapshot?.app?.key;
+    return typeof key === 'string' ? key : '';
+});
+const appKey = computed(() => appKeyText.value || '—');
 const appLabel = computed(() => {
-    const k = props.snapshot?.app.key ?? '';
+    const k = appKeyText.value;
     return k ? k.charAt(0).toUpperCase() + k.slice(1) : 'Discovery';
 });
-const appVersion = computed(() => props.snapshot?.app.version ?? '0.0.0');
+const appVersion = computed(() => {
+    const version = props.snapshot?.app?.version;
+    return typeof version === 'string' && version ? version : '0.0.0';
+});
 const scanLabel = computed(() => {
-    if (!props.snapshot?.scannedAt) return msg.value.notScannedYet;
+    const scannedAt = props.snapshot?.scannedAt;
+    // Same reasoning: the catch below covers a bad DATE, not a bad type — the
+    // fallback `return scannedAt` would hand the template a non-string.
+    if (typeof scannedAt !== 'string' || !scannedAt) return msg.value.notScannedYet;
     try {
-        return new Date(props.snapshot.scannedAt).toLocaleString(intlLocale.value);
+        return new Date(scannedAt).toLocaleString(intlLocale.value);
     } catch {
-        return props.snapshot.scannedAt;
+        return scannedAt;
     }
 });
 
 const declaredAtByKey = computed<Record<string, string>>(() => {
     const map: Record<string, string> = {};
-    for (const c of props.snapshot?.capabilities ?? []) {
-        map[c.capabilityKey] = c.declaredAt;
+    // `Array.isArray`, not `?? []`. The nullish fallback only covers `null` and
+    // `undefined`; anything else present goes straight into `for…of`, and a
+    // JSON object or a number is not iterable — `for (const c of {})` throws,
+    // which takes the route down exactly like the string methods above did.
+    //
+    // A string would have slipped through both: it IS iterable, so the loop
+    // walks its characters and silently builds nonsense. That is why the case
+    // covering this in the test suite had to be an object rather than a string —
+    // the first version used a string and passed without exercising anything.
+    const capabilities = props.snapshot?.capabilities;
+    if (!Array.isArray(capabilities)) return map;
+    for (const c of capabilities) {
+        if (c && typeof c.capabilityKey === 'string') map[c.capabilityKey] = c.declaredAt;
     }
     return map;
 });

package/src/pages-standard/MarketingCatalogPage.vue

@@ -164,7 +164,9 @@ import type {
     ResolvedMarketing,
 } from './marketing-catalog/types.js';
 
-const DEFAULT_ACCENT = '#64748b';
+import { IDENTITY_NEUTRAL, identityAccentAt } from '../client/identity-accents.js';
+
+const DEFAULT_ACCENT = IDENTITY_NEUTRAL;
 
 const props = defineProps<{
     adminEndpoint: string;
@@ -650,7 +652,7 @@ function promoFineprintOf(row: MarketingRow): string {
     return promo.i18n?.[activeLocale.value]?.fineprint || promo.i18n?.de?.fineprint || '';
 }
 function promoColorOf(row: MarketingRow): string {
-    return promoOf(row)?.color ?? '#10b981';
+    return promoOf(row)?.color ?? identityAccentAt(0);
 }
 
 // ─── CTA ───
@@ -999,12 +1001,22 @@ async function onLocaleChange(loc: string): Promise<void> {
 
 .sa-marketing-toolbar {
     display: flex;
+    /* The tab bar and the meta line do not fit side by side below ~672px, and
+     * without this they simply pushed the page off its own right edge — at every
+     * viewport narrower than that, not just the smallest. Nothing measured it
+     * until the overflow guard started asking at each breakpoint band. */
+    flex-wrap: wrap;
     gap: 12px;
     align-items: center;
     margin: 0px;
 }
 .sa-marketing-tabbar {
     display: inline-flex;
+    /* Scrolls rather than wraps: a row of tabs broken across two lines reads as
+     * two groups. It fits every band except the narrowest phone, where the four
+     * tabs need 389px. */
+    overflow-x: auto;
+    max-width: 100%;
     gap: 2px;
     background: var(--sa-color-bg-surface);
     border: 1px solid var(--sa-color-border);
@@ -1043,6 +1055,10 @@ async function onLocaleChange(loc: string): Promise<void> {
 }
 .sa-marketing-meta {
     margin-left: auto;
+    /* Its own contents wrap too: `catalogVersion <code> · locale <code>` is
+     * wider than a phone on its own, so wrapping only the toolbar would move
+     * the overflow one level down instead of removing it. */
+    flex-wrap: wrap;
     font-size: var(--sa-text-sm);
     color: var(--sa-color-fg-secondary);
     display: flex;
@@ -1513,14 +1529,22 @@ async function onLocaleChange(loc: string): Promise<void> {
     transform: rotate(90deg);
 }
 
+/* The open editor is a WELL under its row, not another row.
+ *
+ * It used to end on a gradient whose last stop was `--sa-color-bg-surface` —
+ * exactly the colour of the next row — closed by the same soft hairline that
+ * separates any two rows. Nothing then said where the editor stopped, so the
+ * following plan read as part of the plan being edited.
+ *
+ * Three things say it now, and each carries a different half of the message:
+ * the surface is recessed (`bg-sunken`, which is what a well is for), an accent
+ * edge on the left ties the panel to the row it belongs to, and a real border
+ * closes it at the bottom instead of a hairline that means "next row". */
 .sa-marketing-admin-expand {
     grid-column: 1 / -1;
-    background: linear-gradient(
-        180deg,
-        var(--sa-color-bg-surface-raised) 0%,
-        var(--sa-color-bg-surface) 100%
-    );
-    border-bottom: 1px solid var(--sa-color-border-soft);
+    background: var(--sa-color-bg-sunken);
+    border-left: 2px solid var(--sa-color-accent);
+    border-bottom: 2px solid var(--sa-color-border-strong);
     padding: 18px 20px 22px;
 }
 .sa-marketing-expand-grid {
@@ -1715,7 +1739,7 @@ async function onLocaleChange(loc: string): Promise<void> {
     cursor: not-allowed;
 }
 
-@media (max-width: 980px) {
+@media (max-width: 1023.98px) {
     .sa-marketing-expand-grid {
         grid-template-columns: 1fr;
     }

package/src/pages-standard/PromoCodesPage.vue

@@ -110,7 +110,9 @@
 import AdminTable from '../components/admin-page/AdminTable.vue';
 import type { PromoCodePlanOption } from '../components/dialogs/types.js';
 
-const PLAN_COLOR_PALETTE = ['#0ea5e9', '#10b981', '#f59e0b', '#7c3aed', '#dc2626', '#64748b'];
+import { IDENTITY_ACCENTS } from '../client/identity-accents.js';
+
+const PLAN_COLOR_PALETTE = IDENTITY_ACCENTS;
 
 /**
  * Heuristic from a consumer wrapper: assigns each plan a stable color so plan

package/src/pages-standard/SuperAdminLoginPage.vue

@@ -5,7 +5,7 @@
         :icon="iconText"
         @done="needsSetup = false"
     />
-    <div v-else class="sa-login-wrap">
+    <div v-else class="sa-page sa-login-wrap">
         <div class="sa-login-card">
             <div class="sa-login-brand">
                 <div v-if="logoUrl" class="sa-login-logo sa-login-logo--img">
@@ -285,7 +285,12 @@ async function handleSubmit(): Promise<void> {
     line-height: 1.5;
 }
 
+/* The heading block is one unit, and the form sits the same distance below it
+ * whether or not the optional subtitle is there. Without this the gap was the
+ * title's 6px on a login that passes no subtitle — which nobody saw, because
+ * Quasar's element-level `h1` line-height was padding it out to 96px. */
 .sa-login-form {
+    margin-top: var(--sa-space-6);
     display: flex;
     flex-direction: column;
 }

package/src/pages-standard/SuperAdminSetupWizard.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="sa-setup-wrap">
+    <div class="sa-page sa-setup-wrap">
         <div class="sa-setup-card">
             <div class="sa-setup-head">
                 <div class="sa-setup-badge">{{ iconText }}</div>

package/src/pages-standard/TenantsPage.vue

@@ -176,7 +176,8 @@ import {
 import MfaPromptDialog from '../components/MfaPromptDialog.vue';
 import TenantActionConfirmDialog from '../components/TenantActionConfirmDialog.vue';
 import StatusPill, { type PillTone } from './tenants/StatusPill.vue';
-import { DEFAULT_PLAN_ACCENTS, formatDate, planAccent, tenantInitials } from './tenants/format.js';
+import { identityChipStyle } from '../client/identity-accents.js';
+import { formatDate, planAccent, tenantInitials } from './tenants/format.js';
 
 // Platform standard page: tenant list.
 //
@@ -323,7 +324,7 @@ const props = withDefaults(
         pageSize: 25,
         showPlanColumn: true,
         planLabelField: 'plan',
-        planAccents: () => DEFAULT_PLAN_ACCENTS,
+        planAccents: () => ({}),
         usageFields: () => [],
         manifest: null,
     },
@@ -484,8 +485,8 @@ const combinedActions = computed<TenantRowAction[]>(() => {
 const hasActions = computed(() => combinedActions.value.length > 0);
 
 function avatarStyle(row: TenantRow): Record<string, string> {
-    const accent = planAccentFor(row);
-    return { background: `${accent}18`, color: accent };
+    const { background, color } = identityChipStyle(planAccentFor(row));
+    return { background, color };
 }
 
 function planAccentFor(row: TenantRow): string {

package/src/pages-standard/discovery-page/discovery-ui.ts

@@ -122,16 +122,19 @@ export function reviewMenuActions(
 
 // ─── Capability kind styling (read-only code facts, #20) ─────────────────────
 
-const KIND_COLORS: Record<string, string> = {
-    endpoint: '#2563eb',
-    service: '#7c3aed',
-    job: '#0891b2',
-    event: '#f59e0b',
+// A capability kind is a category with no ranking, so it takes the identity
+// ramp rather than a status colour: an endpoint is not "better" than a job.
+import { IDENTITY_NEUTRAL, identityChipStyle } from '../../client/identity-accents.js';
+
+const KIND_ACCENTS: Record<string, string> = {
+    endpoint: 'var(--sa-color-identity-1)',
+    service: 'var(--sa-color-identity-2)',
+    job: 'var(--sa-color-identity-5)',
+    event: 'var(--sa-color-identity-4)',
 };
 
 export function kindStyle(kind: string): Record<string, string> {
-    const c = KIND_COLORS[kind] ?? '#64748b';
-    return { background: `${c}1a`, color: c, borderColor: `${c}33` };
+    return identityChipStyle(KIND_ACCENTS[kind] ?? IDENTITY_NEUTRAL);
 }
 
 /**

package/src/pages-standard/marketing-catalog/MarketingCatalogAdmin.vue

@@ -26,11 +26,7 @@
                         <div class="sa-marketing-plan-cell">
                             <div
                                 class="sa-marketing-plan-mark"
-                                :style="{
-                                    background: row.accent + '15',
-                                    color: row.accent,
-                                    borderColor: row.accent + '33',
-                                }"
+                                :style="identityChipStyle(row.accent)"
                             >
                                 {{ row.plan.planKey.slice(0, 3) }}
                             </div>
@@ -462,6 +458,7 @@
 
 <script setup lang="ts">
 import type { MarketingTopFeature, PlanRow, PlanVersionRow } from '@saasicat/types';
+import { identityChipStyle } from '../../client/identity-accents.js';
 import { formatMessage } from '../../client/i18n/format.js';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { FeatureSuggestion, MarketingRow, ResolvedMarketing } from './types.js';

package/src/pages-standard/plan-versions/PlanDiffCard.vue

@@ -11,10 +11,7 @@
     </div>
     <div v-else class="sa-pv-diff-card">
         <header class="sa-pv-diff-card__head">
-            <span
-                class="sa-pv-diff-card__accent"
-                :style="{ background: `${accent}14`, borderColor: `${accent}40` }"
-            >
+            <span class="sa-pv-diff-card__accent" :style="accentWashStyle">
                 <q-icon name="inventory_2" size="14px" :style="{ color: accent }" />
             </span>
             <span class="sa-pv-diff-card__name">{{ title }}</span>
@@ -38,6 +35,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { VersionChange } from '@saasicat/types';
+import { identityChipStyle } from '../../client/identity-accents.js';
 import { formatMessage } from '../../client/i18n/format.js';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import VersionDiffPreview from '../../components/VersionDiffPreview.vue';
@@ -52,6 +50,15 @@ const props = defineProps<{
 }>();
 
 const msg = useSaMessages('planVersions');
+
+// The wash and the edge this badge always had — deliberately not the chip
+// helper's third property. `identityChipStyle` also sets a text colour, and
+// the icon inside already sets its own; no fixture renders this card, so a
+// change nobody can observe is a change nobody should make.
+const accentWashStyle = computed(() => {
+    const { background, borderColor } = identityChipStyle(props.accent);
+    return { background, borderColor };
+});
 const common = useSaMessages('common');
 
 const changeCountLabel = computed(() => {

package/src/pages-standard/plan-versions/PlanVersionsDiff.vue

@@ -66,8 +66,10 @@ const props = defineProps<{
 
 const msg = useSaMessages('planVersions');
 
+import { identityAccentFor } from '../../client/identity-accents.js';
+
 function planAccent(planId: string): string {
-    return props.planAccents?.[planId] ?? '#3f6bff';
+    return identityAccentFor(planId, props.planAccents ?? {});
 }
 
 const planDiffs = computed<SnapshotEntityDiff[]>(() => {

package/src/pages-standard/tenants/StatusPill.vue

@@ -53,7 +53,7 @@ defineProps<{
 }
 .sa-pill--primary {
     background: var(--sa-color-accent-surface);
-    color: var(--sa-color-accent);
+    color: var(--sa-color-accent-strong);
 }
 .sa-pill--accent {
     background: var(--sa-color-warning-surface-strong);

package/src/pages-standard/tenants/format.ts

@@ -1,16 +1,15 @@
 // Formatting helpers for the tenants page.
 //
 // Shared between TenantsPage.vue and subcomponents (Avatar, Pill).
-// Apps with their own plan accents pass them through via the `planAccents` prop;
-// the default map covers the standard plan IDs (BASIC..ENTERPRISE).
+// Apps with their own plan accents pass them through via the `planAccents` prop.
+//
+// The default map used to live here as five hex literals, and it disagreed with
+// the two in `PlanList`/`PlanMatrix`: `STANDARD` was the brand blue on this page
+// and a plain blue on the plans page, `ENTERPRISE` near-black here and teal
+// there. Same plan, three colours, depending on which screen you were looking
+// at. It now comes from the shared ramp, so the answer is one.
 
-export const DEFAULT_PLAN_ACCENTS: Record<string, string> = {
-    BASIC: '#94a3b8',
-    STANDARD: '#3f6bff',
-    PROFESSIONAL: '#7c3aed',
-    BUSINESS: '#0ea5e9',
-    ENTERPRISE: '#0f172a',
-};
+import { IDENTITY_NEUTRAL, identityAccentFor } from '../../client/identity-accents.js';
 
 export function tenantInitials(name: string | null | undefined): string {
     if (!name) return '?';
@@ -22,10 +21,10 @@ export function tenantInitials(name: string | null | undefined): string {
 
 export function planAccent(
     planId: string | null | undefined,
-    accents: Record<string, string> = DEFAULT_PLAN_ACCENTS,
+    accents: Record<string, string> = {},
 ): string {
-    if (!planId) return '#94a3b8';
-    return accents[planId] ?? '#3f6bff';
+    if (!planId) return IDENTITY_NEUTRAL;
+    return identityAccentFor(planId, accents);
 }
 
 /** `locale` is a BCP-47 tag — pages pass `intlLocale.value` of the active UI locale. */