@saasicat/ui-vue 0.22.2 → 0.24.0

package/src/components/plan-detail/PlanTitleEdit.vue

@@ -92,20 +92,20 @@ function cancel(): void {
  * input keeps matching it when that changes. */
 .pd-title-edit__input {
     font: inherit;
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
     border: 0;
-    background: var(--sa-warning-bg);
-    outline: 2px solid var(--sa-amber-light);
+    background: var(--sa-color-warning-surface);
+    outline: 2px solid var(--sa-color-warning-strong);
     padding: 2px 8px;
     border-radius: var(--sa-radius-control);
     min-width: 220px;
 }
 .pd-title-edit__hint {
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
     font-weight: 500;
-    color: var(--sa-warning);
-    background: var(--sa-warning-bg);
-    border: 1px solid var(--sa-amber-border);
+    color: var(--sa-color-warning);
+    background: var(--sa-color-warning-surface);
+    border: 1px solid var(--sa-color-warning-border);
     border-radius: var(--sa-radius-control);
     padding: 3px 8px;
 }
@@ -118,7 +118,7 @@ function cancel(): void {
     border-radius: var(--sa-radius-control);
     background: transparent;
     border: 1px solid transparent;
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
     cursor: pointer;
     transition:
         background 0.12s,
@@ -126,8 +126,8 @@ function cancel(): void {
         border-color 0.12s;
 }
 .pd-title-edit__btn:hover {
-    background: var(--sa-border-soft);
-    color: var(--sa-primary);
-    border-color: var(--sa-border);
+    background: var(--sa-color-border-soft);
+    color: var(--sa-color-accent);
+    border-color: var(--sa-color-border);
 }
 </style>

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(() =>
@@ -552,8 +537,8 @@ function hasAnyPublished(row: ResolvedPlan<PlanRow, PlanVersionRow>): boolean {
 <style scoped>
 .sa-plan-list {
     /* padding: 22px 26px; */
-    background: var(--sa-bg-app);
-    color: var(--sa-heading);
+    background: var(--sa-color-bg-app);
+    color: var(--sa-color-fg-heading);
     font-family: var(--sa-font-body);
     min-height: 100%;
     box-sizing: border-box;
@@ -563,18 +548,24 @@ function hasAnyPublished(row: ResolvedPlan<PlanRow, PlanVersionRow>): boolean {
 
 /* List wrap */
 .sa-plan-list-wrap {
-    background: var(--sa-bg-surface);
-    border: 1px solid var(--sa-border);
+    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;
     align-items: center;
     gap: 10px;
     padding: 12px 16px;
-    border-bottom: 1px solid var(--sa-border);
-    background: var(--sa-bg-surface-2);
+    border-bottom: 1px solid var(--sa-color-border);
+    background: var(--sa-color-bg-sunken);
 }
 /* The search takes the row; the sort hint keeps its content width. */
 .sa-plan-list-toolbar > .q-field {
@@ -582,73 +573,94 @@ function hasAnyPublished(row: ResolvedPlan<PlanRow, PlanVersionRow>): boolean {
 }
 .sa-plan-list-sortinfo {
     margin-left: auto;
-    font-size: 11.5px;
-    color: var(--sa-muted-light);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-subtle);
 }
 
 /* List grid */
 .sa-plan-list-list {
     display: grid;
     grid-template-columns: 1.6fr 0.9fr 0.7fr 0.9fr 1.4fr 160px;
-    align-items: center;
+    /* 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
+     * came out notched wherever one column was shorter than its neighbours.
+     * The cells fill the row now and centre their contents themselves. */
+    align-items: stretch;
 }
 .sa-plan-list-list-head {
     display: contents;
 }
 .sa-plan-list-list-head > div {
-    background: #fbfbfd;
+    display: flex;
+    align-items: center;
+    background: var(--sa-color-bg-surface-raised);
     padding: 10px 16px;
-    font-size: 10.5px;
+    font-size: var(--sa-text-xs);
     text-transform: uppercase;
     letter-spacing: 0.1em;
-    color: var(--sa-muted-dark);
+    color: var(--sa-color-fg-secondary);
     font-weight: 700;
-    border-bottom: 1px solid var(--sa-border);
+    border-bottom: 1px solid var(--sa-color-border);
 }
 .sa-plan-list-empty {
     grid-column: 1 / -1;
     padding: 32px 24px;
     text-align: center;
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
     font-style: italic;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .sa-plan-list-row {
     display: contents;
     cursor: pointer;
 }
 .sa-plan-list-row > .sa-plan-list-cell {
+    /* Column by default — most cells stack a value over a caption. The three
+     * that lay their content out in a row say so below. */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
     padding: 14px 16px;
-    border-bottom: 1px solid var(--sa-border-soft);
+    border-bottom: 1px solid var(--sa-color-border-soft);
     transition: background 0.12s;
 }
 .sa-plan-list-row:hover > .sa-plan-list-cell {
-    background: #fcfcfd;
+    background: var(--sa-color-bg-surface-raised);
 }
 .sa-plan-list-row--new > .sa-plan-list-cell {
-    background: var(--sa-positive-bg) !important;
+    background: var(--sa-color-positive-surface) !important;
     animation: sa-plan-list-flashNew 2.4s ease-out;
 }
 @keyframes sa-plan-list-flashNew {
     0% {
-        background: #d1fae5 !important;
+        background: var(--sa-color-positive-surface-strong) !important;
     }
     100% {
-        background: var(--sa-positive-bg) !important;
+        background: var(--sa-color-positive-surface) !important;
     }
 }
 
 /* Sub-rows (drafts + future-scheduled versions, indented under the parent) */
 .sa-plan-list-row--sub > .sa-plan-list-cell {
-    background: #fafbfd;
+    background: var(--sa-color-bg-surface-raised);
     padding-top: 10px;
     padding-bottom: 10px;
 }
 .sa-plan-list-row--sub:hover > .sa-plan-list-cell {
-    background: var(--sa-border-soft);
+    background: var(--sa-color-border-soft);
 }
-.sa-plan-list-cell--sub-name {
+.sa-plan-list-row > .sa-plan-list-cell--sub-name {
     display: flex;
+    flex-direction: row;
+    /* The base rule centres on the main axis, which is vertical for a column
+     * cell but horizontal here — it would float the indent and leave the tree
+     * elbow pointing at nothing. */
+    justify-content: flex-start;
     align-items: center;
     gap: 12px;
     padding-left: 32px !important;
@@ -667,36 +679,36 @@ function hasAnyPublished(row: ResolvedPlan<PlanRow, PlanVersionRow>): boolean {
     bottom: 50%;
     left: 12px;
     width: 14px;
-    border-left: 1.5px solid #cbd5e1;
-    border-bottom: 1.5px solid #cbd5e1;
+    border-left: 1.5px solid var(--sa-color-border-strong);
+    border-bottom: 1.5px solid var(--sa-color-border-strong);
     border-bottom-left-radius: 6px;
 }
 .sa-plan-list-sub-titles {
     min-width: 0;
 }
 .sa-plan-list-sub-title {
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     font-weight: 600;
-    color: var(--sa-muted-dark);
+    color: var(--sa-color-fg-secondary);
     display: flex;
     align-items: center;
     gap: 8px;
 }
 .sa-plan-list-sub-desc {
-    font-size: 11.5px;
-    color: var(--sa-muted);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-muted);
     margin-top: 2px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 .sa-plan-list-version-num--sub {
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     font-weight: 600;
-    color: var(--sa-muted-dark);
+    color: var(--sa-color-fg-secondary);
 }
 .sa-plan-list-cell--sub-impact {
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
 }
 
 .sa-plan-list-plan-name {
@@ -710,7 +722,7 @@ function hasAnyPublished(row: ResolvedPlan<PlanRow, PlanVersionRow>): boolean {
     border-radius: 8px;
     display: grid;
     place-items: center;
-    font: 700 11px var(--sa-font-mono);
+    font: 700 var(--sa-text-xs) var(--sa-font-mono);
     letter-spacing: 0.04em;
     flex: 0 0 auto;
     border: 1px solid;
@@ -719,9 +731,9 @@ function hasAnyPublished(row: ResolvedPlan<PlanRow, PlanVersionRow>): boolean {
     min-width: 0;
 }
 .sa-plan-list-plan-title {
-    font-size: 14.5px;
+    font-size: var(--sa-text-lg);
     font-weight: 700;
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
     letter-spacing: -0.01em;
     display: flex;
     align-items: center;
@@ -729,8 +741,8 @@ function hasAnyPublished(row: ResolvedPlan<PlanRow, PlanVersionRow>): boolean {
     flex-wrap: wrap;
 }
 .sa-plan-list-plan-desc {
-    font-size: 11.5px;
-    color: var(--sa-muted);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-muted);
     margin-top: 2px;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -751,41 +763,41 @@ function hasAnyPublished(row: ResolvedPlan<PlanRow, PlanVersionRow>): boolean {
     gap: 5px;
     padding: 2px 8px;
     border-radius: 999px;
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
     font-weight: 600;
-    background: var(--sa-bg-surface-2);
-    color: var(--sa-muted-dark);
-    border: 1px solid var(--sa-border);
+    background: var(--sa-color-bg-sunken);
+    color: var(--sa-color-fg-secondary);
+    border: 1px solid var(--sa-color-border);
 }
 .sa-plan-list-chip--tiny {
     padding: 1px 6px;
-    font-size: 10px;
+    font-size: var(--sa-text-2xs);
 }
 .sa-plan-list-chip--new {
-    background: #dbeafe;
-    color: #1e40af;
-    border-color: #bfdbfe;
-    font-size: 10px;
+    background: var(--sa-color-info-surface-strong);
+    color: var(--sa-color-info-fg);
+    border-color: var(--sa-color-info-border);
+    font-size: var(--sa-text-2xs);
 }
 .sa-plan-list-chip--live {
-    background: var(--sa-positive-bg);
-    color: #047857;
-    border-color: #a7f3d0;
+    background: var(--sa-color-positive-surface);
+    color: var(--sa-color-positive-fg);
+    border-color: var(--sa-color-positive-border);
 }
 .sa-plan-list-chip--draft {
-    background: var(--sa-warning-bg);
-    color: #b45309;
-    border-color: #fde68a;
+    background: var(--sa-color-warning-surface);
+    color: var(--sa-color-warning-fg);
+    border-color: var(--sa-color-warning-border);
 }
 .sa-plan-list-chip--supersed {
-    background: var(--sa-border-soft);
-    color: var(--sa-muted-dark);
-    border-color: #cbd5e1;
+    background: var(--sa-color-border-soft);
+    color: var(--sa-color-fg-secondary);
+    border-color: var(--sa-color-border-strong);
 }
 .sa-plan-list-chip--scheduled {
-    background: #eef2ff;
-    color: #4338ca;
-    border-color: #c7d2fe;
+    background: var(--sa-color-scheduled-surface);
+    color: var(--sa-color-scheduled-fg);
+    border-color: var(--sa-color-scheduled-border);
 }
 .sa-plan-list-chip--dot::before {
     content: '';
@@ -796,53 +808,55 @@ function hasAnyPublished(row: ResolvedPlan<PlanRow, PlanVersionRow>): boolean {
 }
 
 .sa-plan-list-version-num {
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     font-weight: 700;
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
 }
 .sa-plan-list-version-num--muted {
-    color: #cbd5e1;
+    color: var(--sa-color-fg-disabled);
 }
 .sa-plan-list-version-sub {
-    font-size: 10.5px;
-    color: var(--sa-muted-light);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-subtle);
     margin-top: 2px;
 }
 
 .sa-plan-list-price-big {
-    font-size: 14px;
+    font-size: var(--sa-text-lg);
     font-weight: 700;
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
 }
 .sa-plan-list-price-unit {
-    font-size: 11px;
-    color: var(--sa-muted-light);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-subtle);
 }
 .sa-plan-list-price-sub {
-    font-size: 10.5px;
-    color: var(--sa-muted-light);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-subtle);
     margin-top: 2px;
 }
 .sa-plan-list-price-text {
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     font-weight: 600;
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
 }
 
-.sa-plan-list-cell--tenants {
+.sa-plan-list-row > .sa-plan-list-cell--tenants {
     display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
     align-items: center;
     gap: 10px;
 }
 .sa-plan-list-tenant-num {
-    font-size: 16px;
+    font-size: var(--sa-text-lg);
     font-weight: 700;
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
 }
 .sa-plan-list-tenant-bar {
     flex: 1;
     height: 6px;
-    background: var(--sa-border-soft);
+    background: var(--sa-color-border-soft);
     border-radius: 999px;
     overflow: hidden;
 }
@@ -850,9 +864,11 @@ function hasAnyPublished(row: ResolvedPlan<PlanRow, PlanVersionRow>): boolean {
     height: 100%;
 }
 
-.sa-plan-list-cell--actions {
+.sa-plan-list-row > .sa-plan-list-cell--actions {
     display: flex;
-    gap: 4px;
+    flex-direction: row;
+    align-items: center;
     justify-content: flex-end;
+    gap: 4px;
 }
 </style>