@saasicat/ui-vue 0.22.2 → 0.24.0

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

@@ -25,7 +25,7 @@ defineProps<{
     display: inline-flex;
     align-items: center;
     gap: 4px;
-    font-size: 10.5px;
+    font-size: var(--sa-text-xs);
     font-weight: 700;
     letter-spacing: 0.04em;
     padding: 3px 8px;
@@ -36,27 +36,27 @@ defineProps<{
     color: inherit;
 }
 .sa-pill--positive {
-    background: var(--sa-positive-soft, rgba(4, 120, 87, 0.1));
-    color: var(--sa-positive, #047857);
+    background: var(--sa-color-positive-surface);
+    color: var(--sa-color-positive-fg);
 }
 .sa-pill--warning {
-    background: var(--sa-warning-soft, rgba(245, 158, 11, 0.1));
-    color: var(--sa-warning, #b45309);
+    background: var(--sa-color-warning-surface-strong);
+    color: var(--sa-color-warning-fg);
 }
 .sa-pill--negative {
-    background: var(--sa-negative-soft, rgba(220, 38, 38, 0.08));
-    color: var(--sa-negative, #dc2626);
+    background: var(--sa-color-negative-surface);
+    color: var(--sa-color-negative);
 }
 .sa-pill--muted {
-    background: var(--sa-border-soft);
-    color: var(--sa-muted, var(--sa-muted));
+    background: var(--sa-color-border-soft);
+    color: var(--sa-color-fg-muted);
 }
 .sa-pill--primary {
-    background: var(--sa-primary-soft, rgba(63, 107, 255, 0.08));
-    color: var(--sa-primary, #3f6bff);
+    background: var(--sa-color-accent-surface);
+    color: var(--sa-color-accent);
 }
 .sa-pill--accent {
-    background: rgba(245, 158, 11, 0.16);
-    color: #b45309;
+    background: var(--sa-color-warning-surface-strong);
+    color: var(--sa-color-warning-fg);
 }
 </style>

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. */

package/src/pages-tenant/LimitsRow.vue

@@ -44,7 +44,7 @@ function formatMax(n: number): string {
 
 <style scoped>
 .sp-limits-row {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    border-bottom: 1px solid var(--sa-color-border-soft);
 }
 .sp-limits-row td {
     padding: 8px 12px;
@@ -54,14 +54,14 @@ function formatMax(n: number): string {
     font-weight: 500;
 }
 .sp-limits-row__target--ok {
-    color: var(--q-positive, #21ba45);
+    color: var(--sa-color-positive);
     font-weight: 600;
 }
 .sp-limits-row__target--bad {
-    color: var(--q-negative, #c10015);
+    color: var(--sa-color-negative);
     font-weight: 600;
 }
 .sp-limits-row--exceeded {
-    background: rgba(193, 0, 21, 0.05);
+    background: var(--sa-color-negative-surface);
 }
 </style>

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());
@@ -400,7 +409,7 @@ function formatDate(date: Date | string | null | undefined): string {
         BlinkMacSystemFont,
         system-ui,
         sans-serif;
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
 }
 .msb-head {
     display: flex;
@@ -410,45 +419,45 @@ function formatDate(date: Date | string | null | undefined): string {
 }
 .msb-title {
     margin: 0;
-    font-size: 20px;
+    font-size: var(--sa-text-xl);
     font-weight: 700;
     letter-spacing: -0.01em;
 }
 .msb-sub {
     margin: 4px 0 0;
-    color: var(--sa-muted);
-    font-size: 13px;
+    color: var(--sa-color-fg-muted);
+    font-size: var(--sa-text-md);
     max-width: 580px;
     line-height: 1.5;
 }
 .msb-loading {
     padding: 32px;
     text-align: center;
-    color: var(--sa-muted);
+    color: var(--sa-color-fg-muted);
 }
 .msb-empty {
     padding: 32px 24px;
     text-align: center;
-    background: #fff;
-    border: 1px dashed #cbd5e1;
+    background: var(--sa-color-bg-surface);
+    border: 1px dashed var(--sa-color-border-strong);
     border-radius: 12px;
-    color: var(--sa-muted-dark);
+    color: var(--sa-color-fg-secondary);
 }
 .msb-empty-link {
     background: transparent;
     border: 0;
-    color: var(--sa-primary);
+    color: var(--sa-color-accent);
     cursor: pointer;
     font: inherit;
     text-decoration: underline;
 }
 .msb-error {
     padding: 10px 14px;
-    background: #fef2f2;
-    border: 1px solid #fecaca;
+    background: var(--sa-color-negative-surface);
+    border: 1px solid var(--sa-color-negative-border);
     border-radius: 8px;
-    color: #b91c1c;
-    font-size: 13px;
+    color: var(--sa-color-negative-fg);
+    font-size: var(--sa-text-md);
 }
 .msb-list {
     display: flex;
@@ -456,14 +465,14 @@ function formatDate(date: Date | string | null | undefined): string {
     gap: 10px;
 }
 .msb-card {
-    background: #fff;
-    border: 1px solid var(--sa-border);
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
     border-radius: 12px;
     padding: 14px 18px;
 }
 .msb-card--canceled-pending {
-    border-color: #fde68a;
-    background: var(--sa-warning-bg);
+    border-color: var(--sa-color-warning-border);
+    background: var(--sa-color-warning-surface);
 }
 .msb-card--canceled {
     opacity: 0.65;
@@ -482,18 +491,18 @@ function formatDate(date: Date | string | null | undefined): string {
 }
 .msb-card-key {
     font:
-        700 13px 'JetBrains Mono',
+        700 var(--sa-text-md) 'JetBrains Mono',
         ui-monospace,
         monospace;
     letter-spacing: 0.04em;
 }
 .msb-card-meta {
     margin-top: 4px;
-    font-size: 12.5px;
-    color: var(--sa-muted);
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-muted);
 }
 .msb-chip {
-    font-size: 10.5px;
+    font-size: var(--sa-text-xs);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.06em;
@@ -501,25 +510,25 @@ function formatDate(date: Date | string | null | undefined): string {
     border-radius: 999px;
 }
 .msb-chip--active {
-    background: #d1fae5;
-    color: #065f46;
+    background: var(--sa-color-positive-surface-strong);
+    color: var(--sa-color-positive-fg);
 }
 .msb-chip--canceled-pending {
-    background: #fef3c7;
-    color: #92400e;
+    background: var(--sa-color-warning-surface-strong);
+    color: var(--sa-color-warning-fg);
 }
 .msb-chip--canceled {
-    background: var(--sa-border);
-    color: var(--sa-muted-dark);
+    background: var(--sa-color-border);
+    color: var(--sa-color-fg-secondary);
 }
 .msb-cancel-info {
     margin-top: 10px;
     padding: 8px 12px;
-    background: var(--sa-warning-bg);
-    border: 1px solid #fde68a;
+    background: var(--sa-color-warning-surface);
+    border: 1px solid var(--sa-color-warning-border);
     border-radius: 6px;
-    color: #92400e;
-    font-size: 12.5px;
+    color: var(--sa-color-warning-fg);
+    font-size: var(--sa-text-md);
 }
 
 .msb-btn {
@@ -527,51 +536,51 @@ function formatDate(date: Date | string | null | undefined): string {
     align-items: center;
     gap: 6px;
     padding: 7px 14px;
-    background: #fff;
-    border: 1px solid #cbd5e1;
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border-strong);
     border-radius: 7px;
     cursor: pointer;
     font-family: inherit;
-    font-size: 13px;
-    color: var(--sa-heading);
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-heading);
 }
 .msb-btn:hover:not(:disabled) {
-    background: var(--sa-bg-surface-2);
+    background: var(--sa-color-bg-sunken);
 }
 .msb-btn:disabled {
     cursor: not-allowed;
     opacity: 0.55;
 }
 .msb-btn--primary {
-    background: var(--sa-primary);
-    border-color: var(--sa-primary);
-    color: #fff;
+    background: var(--sa-color-accent);
+    border-color: var(--sa-color-accent);
+    color: var(--sa-color-fg-on-accent);
 }
 .msb-btn--primary:hover:not(:disabled) {
-    background: var(--sa-primary-strong);
+    background: var(--sa-color-accent-strong);
 }
 .msb-btn--ghost {
     background: transparent;
-    border-color: #fca5a5;
-    color: #b91c1c;
+    border-color: var(--sa-color-negative-border);
+    color: var(--sa-color-negative-fg);
 }
 .msb-btn--ghost:hover:not(:disabled) {
-    background: #fef2f2;
+    background: var(--sa-color-negative-surface);
 }
 
 .msb-modal-bg {
     position: fixed;
     inset: 0;
-    background: rgba(15, 23, 42, 0.55);
+    background: var(--sa-color-bg-overlay);
     display: grid;
     place-items: center;
     z-index: 1000;
 }
 .msb-modal {
     width: min(520px, 96vw);
-    background: #fff;
+    background: var(--sa-color-bg-surface);
     border-radius: 12px;
-    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
+    box-shadow: 0 20px 60px var(--sa-shadow-tint-4);
     display: flex;
     flex-direction: column;
 }
@@ -580,23 +589,23 @@ function formatDate(date: Date | string | null | undefined): string {
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px 10px;
-    border-bottom: 1px solid var(--sa-border);
+    border-bottom: 1px solid var(--sa-color-border);
 }
 .msb-modal-title {
-    font-size: 16px;
+    font-size: var(--sa-text-lg);
     font-weight: 700;
 }
 .msb-modal-x {
     background: transparent;
     border: 0;
     cursor: pointer;
-    color: var(--sa-muted);
+    color: var(--sa-color-fg-muted);
     padding: 4px;
     border-radius: 4px;
 }
 .msb-modal-x:hover {
-    background: var(--sa-border-soft);
-    color: var(--sa-heading);
+    background: var(--sa-color-border-soft);
+    color: var(--sa-color-fg-heading);
 }
 .msb-modal-body {
     padding: 16px 20px;
@@ -606,8 +615,8 @@ function formatDate(date: Date | string | null | undefined): string {
 }
 .msb-modal-foot {
     padding: 12px 20px;
-    border-top: 1px solid var(--sa-border);
-    background: var(--sa-bg-surface-2);
+    border-top: 1px solid var(--sa-color-border);
+    background: var(--sa-color-bg-sunken);
     border-radius: 0 0 12px 12px;
     display: flex;
     justify-content: flex-end;
@@ -619,21 +628,21 @@ function formatDate(date: Date | string | null | undefined): string {
     gap: 4px;
 }
 .msb-field-label {
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     font-weight: 600;
-    color: var(--sa-muted-dark);
+    color: var(--sa-color-fg-secondary);
 }
 .msb-field-hint {
-    font-size: 11px;
-    color: var(--sa-muted-light);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-subtle);
 }
 .msb-input {
     padding: 7px 10px;
-    border: 1px solid #cbd5e1;
+    border: 1px solid var(--sa-color-border-strong);
     border-radius: 6px;
     font-family: inherit;
-    font-size: 13px;
-    color: var(--sa-heading);
-    background: #fff;
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-heading);
+    background: var(--sa-color-bg-surface);
 }
 </style>

package/src/pages-tenant/OnboardingConfigurator.vue

@@ -302,24 +302,24 @@ defineExpose({ draft });
     align-items: center;
     gap: 8px;
     font-family: 'SF Mono', Consolas, monospace;
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
     letter-spacing: 0.1em;
     text-transform: uppercase;
-    color: var(--q-primary, #0f766e);
-    background: rgba(15, 118, 110, 0.08);
+    color: var(--sa-color-accent);
+    background: var(--sa-color-accent-surface);
     padding: 6px 11px;
     border-radius: 999px;
-    border: 1px solid rgba(15, 118, 110, 0.2);
+    border: 1px solid var(--sa-color-accent-border);
 }
 .sp-onb__header h1 {
     margin: 12px 0 8px;
-    font-size: clamp(1.6rem, 3vw, 2.4rem);
+    font-size: var(--sa-text-4xl);
     line-height: 1.1;
     letter-spacing: -0.01em;
 }
 .sp-onb__header p {
     margin: 0;
-    color: rgba(0, 0, 0, 0.6);
+    color: var(--sa-color-fg-secondary);
     max-width: 640px;
 }
 .sp-onb__layout {
@@ -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;
     }
@@ -339,26 +339,26 @@ defineExpose({ draft });
     gap: 20px;
 }
 .sp-onb__section {
-    background: #fff;
-    border: 1px solid rgba(0, 0, 0, 0.08);
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
     border-radius: 22px;
     padding: 26px 28px 24px;
-    box-shadow: 0 24px 80px rgba(31, 41, 51, 0.05);
+    box-shadow: 0 24px 80px var(--sa-shadow-tint-1);
 }
 .sp-onb__sec-head {
     padding-bottom: 14px;
     margin-bottom: 18px;
-    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
+    border-bottom: 1px dashed var(--sa-color-border);
 }
 .sp-onb__sec-head h2 {
     margin: 6px 0 0;
-    font-size: 1.4rem;
+    font-size: var(--sa-text-2xl);
     letter-spacing: -0.005em;
 }
 .sp-onb__sec-head p {
     margin: 4px 0 0;
-    color: rgba(0, 0, 0, 0.55);
-    font-size: 13px;
+    color: var(--sa-color-fg-muted);
+    font-size: var(--sa-text-md);
     max-width: 520px;
 }
 .sp-onb__sec-num {
@@ -366,22 +366,22 @@ defineExpose({ draft });
     align-items: center;
     gap: 8px;
     font-family: 'SF Mono', Consolas, monospace;
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
     letter-spacing: 0.16em;
     text-transform: uppercase;
-    color: var(--q-primary, #0f766e);
+    color: var(--sa-color-accent);
     font-weight: 700;
 }
 .sp-onb__sec-num::before {
     content: '';
     width: 28px;
     height: 1px;
-    background: var(--q-primary, #0f766e);
+    background: var(--sa-color-accent);
 }
 .sp-onb__loading {
     padding: 40px;
     text-align: center;
-    color: rgba(0, 0, 0, 0.5);
+    color: var(--sa-color-fg-subtle);
 }
 .sp-onb__actions {
     display: flex;
@@ -392,22 +392,22 @@ defineExpose({ draft });
 }
 .sp-onb__back-btn {
     background: none;
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    border: 1px solid var(--sa-color-border-strong);
     border-radius: 10px;
     padding: 10px 16px;
     font-family: inherit;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     cursor: pointer;
-    color: rgba(0, 0, 0, 0.7);
+    color: var(--sa-color-fg-body);
 }
 .sp-onb__back-btn:hover {
-    border-color: rgba(0, 0, 0, 0.4);
+    border-color: var(--sa-color-border-strong);
 }
 .sp-onb__error {
-    color: #b91c1c;
-    background: rgba(220, 38, 38, 0.08);
+    color: var(--sa-color-negative-fg);
+    background: var(--sa-color-negative-surface);
     padding: 10px 14px;
     border-radius: 8px;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 </style>

package/src/pages-tenant/PackageSnapshotPanel.vue

@@ -157,16 +157,10 @@ const rawJson = computed(() => {
 
 <style scoped>
 .sp-package-snapshot {
-    --sp-text-muted: rgba(0, 0, 0, 0.55);
-    --sp-text-strong: rgba(0, 0, 0, 0.85);
-    --sp-border: rgba(0, 0, 0, 0.08);
-    --sp-pre-bg: rgba(0, 0, 0, 0.04);
-}
-body.body--dark .sp-package-snapshot {
-    --sp-text-muted: rgba(255, 255, 255, 0.62);
-    --sp-text-strong: rgba(255, 255, 255, 0.85);
-    --sp-border: rgba(255, 255, 255, 0.16);
-    --sp-pre-bg: rgba(255, 255, 255, 0.06);
+    --sp-text-muted: var(--sa-color-fg-muted);
+    --sp-text-strong: var(--sa-color-fg-heading);
+    --sp-border: var(--sa-color-border);
+    --sp-pre-bg: var(--sa-color-bg-sunken);
 }
 .sp-package-snapshot__head {
     display: flex;
@@ -176,7 +170,7 @@ body.body--dark .sp-package-snapshot {
     flex-wrap: wrap;
 }
 .sp-package-snapshot__eyebrow {
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--sp-text-muted);
@@ -186,11 +180,11 @@ body.body--dark .sp-package-snapshot {
 .sp-package-snapshot__sub {
     margin: 0;
     color: var(--sp-text-muted);
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .sp-package-snapshot__empty {
     color: var(--sp-text-muted);
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     font-style: italic;
 }
 .sp-package-snapshot__list {
@@ -210,7 +204,7 @@ body.body--dark .sp-package-snapshot {
 }
 .sp-package-snapshot__muted {
     color: var(--sp-text-muted);
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .sp-package-snapshot__bundles {
     margin: 0;
@@ -227,13 +221,13 @@ body.body--dark .sp-package-snapshot {
     padding: 12px;
     background: var(--sp-pre-bg);
     border-radius: 4px;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     overflow-x: auto;
     max-height: 320px;
 }
 code {
     font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     background: var(--sp-pre-bg);
     padding: 1px 4px;
     border-radius: 3px;

package/src/pages-tenant/PendingVersionBanner.vue

@@ -71,8 +71,8 @@ defineEmits<{ accept: [] }>();
 
 <style scoped>
 .sp-pending-version {
-    border: 1px solid rgba(242, 192, 55, 0.4);
-    background: rgba(242, 192, 55, 0.08);
+    border: 1px solid var(--sa-color-warning-border);
+    background: var(--sa-color-warning-surface);
     border-radius: 6px;
     padding: 12px 16px;
     display: flex;
@@ -87,35 +87,35 @@ defineEmits<{ accept: [] }>();
 .sp-pending-version__chip {
     padding: 2px 8px;
     border-radius: 12px;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     font-weight: 600;
     text-transform: uppercase;
 }
 .sp-pending-version__chip--good {
-    background: rgba(33, 186, 69, 0.15);
-    color: var(--q-positive, #21ba45);
+    background: var(--sa-color-positive-surface-strong);
+    color: var(--sa-color-positive);
 }
 .sp-pending-version__chip--warn {
-    background: rgba(193, 0, 21, 0.15);
-    color: var(--q-negative, #c10015);
+    background: var(--sa-color-negative-surface-strong);
+    color: var(--sa-color-negative);
 }
 .sp-pending-version__note {
     margin: 0;
-    color: rgba(0, 0, 0, 0.75);
+    color: var(--sa-color-fg-body);
 }
 .sp-pending-version__effective,
 .sp-pending-version__accepted {
     margin: 0;
-    font-size: 13px;
-    color: rgba(0, 0, 0, 0.6);
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-secondary);
 }
 .sp-pending-version__btn {
     align-self: flex-start;
     padding: 6px 14px;
     border-radius: 4px;
     border: 0;
-    background: var(--q-primary, #1976d2);
-    color: white;
+    background: var(--sa-color-accent);
+    color: var(--sa-color-fg-on-accent);
     font-weight: 600;
     cursor: pointer;
 }