@saasicat/ui-vue 0.22.2 → 0.24.0

package/src/pages-standard/PilotsPage.vue

@@ -47,16 +47,17 @@
                 >
                     <template #row-actions="{ row }">
                         <slot name="row-actions" :row="row">
-                            <q-btn
+                            <button
                                 v-for="action in visibleActions(row)"
                                 :key="action.id"
-                                flat
-                                dense
-                                :icon="action.icon"
+                                type="button"
+                                class="sa-icon-btn"
+                                :class="action.color === 'negative' ? 'sa-icon-btn--negative' : ''"
                                 :title="action.label"
-                                :color="action.color ?? 'grey-7'"
                                 @click="action.handler(row)"
-                            />
+                            >
+                                <q-icon :name="action.icon" size="18px" />
+                            </button>
                         </slot>
                     </template>
                 </AdminTable>

package/src/pages-standard/PlatformEmailPage.vue

@@ -36,30 +36,30 @@
                         </q-td>
                     </template>
                     <template #row-actions="{ row }">
-                        <q-btn
-                            flat
-                            dense
-                            icon="send"
-                            color="primary"
+                        <button
+                            type="button"
+                            class="sa-icon-btn"
                             :title="msg.provider.sendTestMail"
                             @click="openTest(row)"
-                        />
-                        <q-btn
-                            flat
-                            dense
-                            icon="edit"
-                            color="grey-7"
+                        >
+                            <q-icon name="send" size="18px" />
+                        </button>
+                        <button
+                            type="button"
+                            class="sa-icon-btn"
                             :title="common.edit"
                             @click="openEdit(row)"
-                        />
-                        <q-btn
-                            flat
-                            dense
-                            icon="delete"
-                            color="negative"
+                        >
+                            <q-icon name="edit" size="18px" />
+                        </button>
+                        <button
+                            type="button"
+                            class="sa-icon-btn sa-icon-btn--negative"
                             :title="common.delete"
                             @click="onDelete(row)"
-                        />
+                        >
+                            <q-icon name="delete" size="18px" />
+                        </button>
                     </template>
                 </AdminTable>
             </AdminSection>

package/src/pages-standard/PromoCodeDetailPage.vue

@@ -297,11 +297,11 @@ const redemptionRows = computed(() => data.value?.redemptions ?? []);
     gap: 14px;
 }
 .sa-promo-detail__kv {
-    background: #fafbfc;
-    border: 1px solid var(--sa-border);
+    background: var(--sa-color-bg-surface-raised);
+    border: 1px solid var(--sa-color-border);
     border-radius: 8px;
     padding: 12px;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     margin: 0;
     overflow-x: auto;
     font-family: var(--sa-font-mono);

package/src/pages-standard/PromoCodesPage.vue

@@ -66,16 +66,17 @@
                     </template>
                     <template #row-actions="{ row }">
                         <slot name="row-actions" :row="row" :reload="reload">
-                            <q-btn
+                            <button
                                 v-for="action in visibleActions(row)"
                                 :key="action.id"
-                                flat
-                                dense
-                                :icon="action.icon"
+                                type="button"
+                                class="sa-icon-btn"
+                                :class="action.color === 'negative' ? 'sa-icon-btn--negative' : ''"
                                 :title="action.label"
-                                :color="action.color ?? 'grey-7'"
                                 @click="action.handler(row)"
-                            />
+                            >
+                                <q-icon :name="action.icon" size="18px" />
+                            </button>
                         </slot>
                     </template>
                 </AdminTable>
@@ -109,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

@@ -199,7 +199,7 @@ async function handleSubmit(): Promise<void> {
        on top of the centered card on short viewports. */
     margin-left: auto;
     align-self: flex-start;
-    color: var(--sa-login-tag-color, var(--sa-muted-dark));
+    color: var(--sa-login-tag-color, var(--sa-color-fg-secondary));
 }
 .sa-login-wrap {
     min-height: 100vh;
@@ -208,15 +208,19 @@ async function handleSubmit(): Promise<void> {
     align-items: center;
     justify-content: center;
     padding: 24px;
-    background: linear-gradient(180deg, var(--sa-heading) 0%, #1e293b 100%);
+    background: linear-gradient(
+        180deg,
+        var(--sa-color-inverse-bg) 0%,
+        var(--sa-color-inverse-surface) 100%
+    );
 }
 .sa-login-card {
     width: 420px;
     max-width: 92vw;
-    background: #fff;
+    background: var(--sa-color-bg-surface);
     border-radius: 18px;
     padding: 32px;
-    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 24px 48px var(--sa-shadow-tint-4);
 }
 .sa-login-brand {
     display: flex;
@@ -234,10 +238,20 @@ async function handleSubmit(): Promise<void> {
     overflow: hidden;
 }
 .sa-login-logo--text {
-    background: var(--sa-login-logo-bg, linear-gradient(135deg, var(--sa-muted-dark), #1e293b));
-    color: var(--sa-login-logo-color, #fff);
+    background: var(
+        --sa-login-logo-bg,
+        linear-gradient(
+            135deg,
+            var(--sa-color-inverse-surface-soft),
+            var(--sa-color-inverse-surface)
+        )
+    );
+    /* The fallback has to match the fallback background above, which is the
+     * invariant dark gradient — not the accent. An app that sets its own
+     * `--sa-login-logo-bg` sets `--sa-login-logo-color` with it. */
+    color: var(--sa-login-logo-color, var(--sa-color-inverse-fg));
     font-weight: 800;
-    font-size: 18px;
+    font-size: var(--sa-text-xl);
     text-transform: uppercase;
 }
 .sa-login-logo--img img {
@@ -247,26 +261,26 @@ async function handleSubmit(): Promise<void> {
 }
 .sa-login-brand__name {
     font-weight: 800;
-    font-size: 16px;
-    color: var(--sa-heading);
+    font-size: var(--sa-text-lg);
+    color: var(--sa-color-fg-heading);
     line-height: 1.1;
 }
 .sa-login-brand__tag {
-    font-size: 12px;
-    color: var(--sa-login-tag-color, var(--sa-muted-dark));
+    font-size: var(--sa-text-sm);
+    color: var(--sa-login-tag-color, var(--sa-color-fg-secondary));
     text-transform: uppercase;
     letter-spacing: 0.08em;
 }
 
 .sa-login-title {
-    font-size: 22px;
+    font-size: var(--sa-text-2xl);
     font-weight: 800;
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
     margin: 0 0 6px;
 }
 .sa-login-subtitle {
-    font-size: 13px;
-    color: var(--sa-muted-dark);
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-secondary);
     margin: 0 0 20px;
     line-height: 1.5;
 }
@@ -279,10 +293,10 @@ async function handleSubmit(): Promise<void> {
     width: 100%;
 }
 .sa-login-error {
-    background: #fef2f2;
-    border: 1px solid #fecaca;
-    color: #b91c1c;
-    font-size: 13px;
+    background: var(--sa-color-negative-surface);
+    border: 1px solid var(--sa-color-negative-border);
+    color: var(--sa-color-negative-fg);
+    font-size: var(--sa-text-md);
     margin-top: 4px;
     padding: 8px 12px;
     border-radius: 8px;
@@ -290,20 +304,20 @@ async function handleSubmit(): Promise<void> {
 .sa-login-hint {
     margin-top: 18px;
     padding: 10px 12px;
-    background: var(--sa-border-soft);
+    background: var(--sa-color-border-soft);
     border-radius: 8px;
-    font-size: 12px;
-    color: var(--sa-muted-dark);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-secondary);
 }
 .sa-login-hint code {
-    background: var(--sa-border);
+    background: var(--sa-color-border);
     padding: 1px 5px;
     border-radius: 4px;
 }
 .sa-login-env {
     margin-top: 18px;
-    color: #cbd5e1;
-    font-size: 12px;
+    color: var(--sa-color-inverse-fg-muted);
+    font-size: var(--sa-text-sm);
     text-transform: uppercase;
     letter-spacing: 0.08em;
 }

package/src/pages-standard/SuperAdminSetupWizard.vue

@@ -277,15 +277,19 @@ async function submitConfirm(): Promise<void> {
     align-items: center;
     justify-content: center;
     padding: 24px;
-    background: linear-gradient(180deg, var(--sa-heading) 0%, #1e293b 100%);
+    background: linear-gradient(
+        180deg,
+        var(--sa-color-inverse-bg) 0%,
+        var(--sa-color-inverse-surface) 100%
+    );
 }
 .sa-setup-card {
     width: 460px;
     max-width: 92vw;
-    background: #fff;
+    background: var(--sa-color-bg-surface);
     border-radius: 18px;
     padding: 32px;
-    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 24px 48px var(--sa-shadow-tint-4);
 }
 .sa-setup-head {
     display: flex;
@@ -296,7 +300,7 @@ async function submitConfirm(): Promise<void> {
 .sa-setup-locale {
     margin-left: auto;
     align-self: flex-start;
-    color: var(--sa-muted-dark);
+    color: var(--sa-color-fg-secondary);
 }
 .sa-setup-badge {
     width: 44px;
@@ -305,31 +309,38 @@ async function submitConfirm(): Promise<void> {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: linear-gradient(135deg, var(--sa-muted-dark), #1e293b);
-    color: #fff;
+    background: linear-gradient(
+        135deg,
+        var(--sa-color-inverse-surface-soft),
+        var(--sa-color-inverse-surface)
+    );
+    /* The gradient never moves, so the text on it must not either.
+     * `--sa-color-fg-on-accent` is white today but belongs to the accent, and
+     * the design guide tells a light brand to override it to something dark. */
+    color: var(--sa-color-inverse-fg);
     font-weight: 800;
-    font-size: 18px;
+    font-size: var(--sa-text-xl);
     text-transform: uppercase;
 }
 .sa-setup-title {
     margin: 0;
     font-weight: 800;
-    font-size: 18px;
-    color: var(--sa-heading);
+    font-size: var(--sa-text-xl);
+    color: var(--sa-color-fg-heading);
     line-height: 1.1;
 }
 .sa-setup-sub {
-    font-size: 12px;
-    color: var(--sa-muted-dark);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-secondary);
 }
 .sa-setup-hint {
-    font-size: 13px;
-    color: var(--sa-muted-dark);
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-secondary);
     line-height: 1.5;
     margin: 0 0 16px;
 }
 .sa-setup-hint code {
-    background: var(--sa-border);
+    background: var(--sa-color-border);
     padding: 1px 5px;
     border-radius: 4px;
 }
@@ -341,10 +352,10 @@ async function submitConfirm(): Promise<void> {
     width: 100%;
 }
 .sa-setup-error {
-    background: #fef2f2;
-    border: 1px solid #fecaca;
-    color: #b91c1c;
-    font-size: 13px;
+    background: var(--sa-color-negative-surface);
+    border: 1px solid var(--sa-color-negative-border);
+    color: var(--sa-color-negative-fg);
+    font-size: var(--sa-text-md);
     margin-bottom: 16px;
     padding: 8px 12px;
     border-radius: 8px;
@@ -357,46 +368,46 @@ async function submitConfirm(): Promise<void> {
     margin-bottom: 12px;
 }
 .sa-setup-qr img {
-    border: 1px solid var(--sa-border);
+    border: 1px solid var(--sa-color-border);
     border-radius: 8px;
     padding: 8px;
-    background: #fff;
+    background: var(--sa-color-bg-surface);
 }
 .sa-setup-qr__hint {
-    font-size: 12px;
-    color: var(--sa-muted);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-muted);
 }
 .sa-setup-secret {
-    background: var(--sa-border-soft);
+    background: var(--sa-color-border-soft);
     border-radius: 8px;
     padding: 10px 12px;
     margin-bottom: 10px;
 }
 .sa-setup-secret__label {
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
     text-transform: uppercase;
     letter-spacing: 0.06em;
-    color: var(--sa-muted);
+    color: var(--sa-color-fg-muted);
     margin-bottom: 4px;
 }
 .sa-setup-secret__value {
-    font-size: 15px;
+    font-size: var(--sa-text-lg);
     font-weight: 700;
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
     word-break: break-all;
     letter-spacing: 0.04em;
 }
 .sa-setup-uri {
     margin: 4px 0 4px;
-    font-size: 12px;
-    color: var(--sa-muted-dark);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-secondary);
 }
 .sa-setup-uri__value {
     display: block;
     margin-top: 6px;
     word-break: break-all;
-    color: #334155;
-    background: var(--sa-bg-surface-2);
+    color: var(--sa-color-fg-body);
+    background: var(--sa-color-bg-sunken);
     padding: 6px 8px;
     border-radius: 6px;
 }
@@ -405,8 +416,8 @@ async function submitConfirm(): Promise<void> {
     width: 100%;
     background: none;
     border: none;
-    color: var(--sa-muted);
-    font-size: 12px;
+    color: var(--sa-color-fg-muted);
+    font-size: var(--sa-text-sm);
     cursor: pointer;
     text-decoration: underline;
 }

package/src/pages-standard/TenantDetailPage.vue

@@ -327,13 +327,13 @@ const defaultUserColumns = computed<QTableColumn[]>(() => [
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid var(--sa-border-soft);
+    border-bottom: 1px solid var(--sa-color-border-soft);
     padding-bottom: 14px;
     margin-bottom: 16px;
 }
 .sa-tenant-detail__card-sub {
-    color: var(--sa-muted);
-    font-size: 13px;
+    color: var(--sa-color-fg-muted);
+    font-size: var(--sa-text-md);
     margin: 4px 0 0;
 }
 .sa-tenant-detail__card-actions {
@@ -343,13 +343,13 @@ const defaultUserColumns = computed<QTableColumn[]>(() => [
     align-items: center;
 }
 .sa-tenant-detail__empty {
-    color: var(--sa-muted);
-    font-size: 13px;
+    color: var(--sa-color-fg-muted);
+    font-size: var(--sa-text-md);
 }
 code {
-    background: rgba(15, 23, 42, 0.06);
+    background: var(--sa-color-bg-sunken);
     padding: 1px 6px;
     border-radius: 4px;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
 }
 </style>

package/src/pages-standard/TenantsPage.vue

@@ -119,8 +119,8 @@
                                 v-for="action in visibleActions(row)"
                                 :key="action.id"
                                 :href="action.to ? action.to(row) : undefined"
-                                class="sa-tenants__icon-btn"
-                                :class="action.tone ? `sa-tenants__icon-btn--${action.tone}` : ''"
+                                class="sa-icon-btn"
+                                :class="action.tone ? `sa-icon-btn--${action.tone}` : ''"
                                 :title="action.label"
                                 @click="action.handler ? action.handler(row) : undefined"
                             >
@@ -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 {
@@ -543,7 +544,7 @@ function visibleActions(row: TenantRow): TenantRowAction[] {
    AdminTable, behind a prop. */
 .sa-tenants__mono {
     font-family: var(--sa-font-mono, ui-monospace, monospace);
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
 }
 
 .sa-tenants__tenant {
@@ -556,7 +557,7 @@ function visibleActions(row: TenantRow): TenantRowAction[] {
     height: 32px;
     border-radius: 8px;
     font-weight: 800;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     font-family: var(--sa-font-head, system-ui, sans-serif);
     display: flex;
     align-items: center;
@@ -564,13 +565,13 @@ function visibleActions(row: TenantRow): TenantRowAction[] {
     flex-shrink: 0;
 }
 .sa-tenants__name {
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     font-weight: 600;
-    color: var(--sa-heading, var(--sa-heading));
+    color: var(--sa-color-fg-heading);
 }
 .sa-tenants__slug {
-    font-size: 11px;
-    color: var(--sa-muted, var(--sa-muted));
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-muted);
     font-family: var(--sa-font-mono, ui-monospace, monospace);
 }
 
@@ -595,46 +596,11 @@ function visibleActions(row: TenantRow): TenantRowAction[] {
     display: inline-flex;
     align-items: center;
     gap: 4px;
-    font-size: 12px;
-    color: var(--sa-muted-dark, var(--sa-muted-dark));
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-secondary);
     margin-left: 8px;
 }
 .sa-tenants__usage :deep(.q-icon) {
-    color: var(--sa-muted, var(--sa-muted));
-}
-
-.sa-tenants__icon-btn {
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    width: 28px;
-    height: 28px;
-    border-radius: 6px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    text-decoration: none;
-    color: var(--sa-muted, var(--sa-muted));
-}
-.sa-tenants__icon-btn:hover {
-    background: var(--sa-border-soft);
-}
-.sa-tenants__icon-btn :deep(.q-icon) {
-    color: inherit;
-}
-.sa-tenants__icon-btn--negative {
-    color: var(--sa-negative, #dc2626);
-}
-.sa-tenants__icon-btn--positive {
-    color: var(--sa-positive, #047857);
-}
-.sa-tenants__icon-btn--primary {
-    color: var(--sa-primary, #3f6bff);
-}
-.sa-tenants__icon-btn--warning {
-    color: var(--sa-warning, #d97706);
-}
-.sa-tenants__icon-btn--accent {
-    color: var(--sa-accent, #7c3aed);
+    color: var(--sa-color-fg-muted);
 }
 </style>

package/src/pages-standard/bundles-page/BundleAccordionList.vue

@@ -100,31 +100,31 @@ function translationCount(bundle: BundleRow): string {
    DiscoveryPage.vue would otherwise override .sa-bundle-chip--live (same specificity,
    later source order) and render the "Live" tag grey instead of green. */
 .sa-bundle-chip {
-    font-size: 10px;
+    font-size: var(--sa-text-2xs);
     font-weight: 600;
     padding: 2px 7px;
     border-radius: 6px;
-    background: var(--sa-border-soft);
-    color: var(--sa-muted-dark);
+    background: var(--sa-color-border-soft);
+    color: var(--sa-color-fg-secondary);
 }
 .sa-bundle-chip--info {
-    background: var(--sa-primary-50);
-    color: var(--sa-primary-strong);
+    background: var(--sa-color-accent-surface-strong);
+    color: var(--sa-color-accent-strong);
 }
 .sa-bundle-chip--live {
-    background: #dcfce7;
-    color: #166534;
+    background: var(--sa-color-positive-surface-strong);
+    color: var(--sa-color-positive-fg);
 }
 .sa-bundle-chip--draft {
-    background: #fef3c7;
-    color: #92400e;
+    background: var(--sa-color-warning-surface-strong);
+    color: var(--sa-color-warning-fg);
 }
 .sa-bundle-chip--supersed {
-    background: var(--sa-border);
-    color: var(--sa-muted);
+    background: var(--sa-color-border);
+    color: var(--sa-color-fg-muted);
 }
 .sa-bundle-chip--scheduled {
-    background: #fef3c7;
-    color: #92400e;
+    background: var(--sa-color-warning-surface-strong);
+    color: var(--sa-color-warning-fg);
 }
 </style>