@saasicat/ui-vue 0.22.2 → 0.24.0

package/src/pages-standard/discovery-page/CatalogEntryTransPanel.vue

@@ -171,14 +171,14 @@ function copyFromDefault(locale: string): void {
     gap: 12px;
 }
 .sa-trans-lang {
-    border: 1px solid var(--sa-border);
+    border: 1px solid var(--sa-color-border);
     border-radius: 10px;
-    background: #fff;
+    background: var(--sa-color-bg-surface);
     padding: 10px 12px;
 }
 .sa-trans-lang--source {
-    background: var(--sa-bg-surface-2);
-    border-color: #cbd5e1;
+    background: var(--sa-color-bg-sunken);
+    border-color: var(--sa-color-border-strong);
 }
 .sa-trans-lang__head {
     display: flex;
@@ -187,31 +187,31 @@ function copyFromDefault(locale: string): void {
     margin-bottom: 8px;
 }
 .sa-trans-lang__code {
-    font-size: 10px;
+    font-size: var(--sa-text-2xs);
     font-weight: 700;
-    background: var(--sa-heading);
-    color: #fff;
+    background: var(--sa-color-inverse-bg);
+    color: var(--sa-color-fg-on-accent);
     padding: 2px 6px;
     border-radius: 5px;
 }
 .sa-trans-lang__name {
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     font-weight: 600;
-    color: #334155;
+    color: var(--sa-color-fg-body);
     flex: 1;
 }
 .sa-trans-lang__badge {
-    font-size: 9px;
+    font-size: var(--sa-text-2xs);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: var(--sa-muted-dark);
-    background: var(--sa-border);
+    color: var(--sa-color-fg-secondary);
+    background: var(--sa-color-border);
     padding: 2px 6px;
     border-radius: 5px;
 }
 .sa-trans-lang__copy {
-    color: var(--sa-muted-dark);
+    color: var(--sa-color-fg-secondary);
 }
 .sa-trans-fields {
     display: flex;
@@ -224,17 +224,17 @@ function copyFromDefault(locale: string): void {
     gap: 3px;
 }
 .sa-trans-field__cap {
-    font-size: 10px;
+    font-size: var(--sa-text-2xs);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.3px;
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
 }
 .sa-trans-locked {
-    font-size: 13px;
-    color: #334155;
-    background: var(--sa-border-soft);
-    border: 1px dashed #cbd5e1;
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-body);
+    background: var(--sa-color-border-soft);
+    border: 1px dashed var(--sa-color-border-strong);
     border-radius: 6px;
     padding: 6px 10px;
     display: flex;
@@ -242,17 +242,17 @@ function copyFromDefault(locale: string): void {
     gap: 8px;
 }
 .sa-trans-locked__hint {
-    font-size: 10px;
-    color: var(--sa-muted-light);
+    font-size: var(--sa-text-2xs);
+    color: var(--sa-color-fg-subtle);
     text-transform: uppercase;
 }
 .sa-trans__empty {
     grid-column: 1 / -1;
     padding: 16px;
     text-align: center;
-    font-size: 12px;
-    color: var(--sa-muted-light);
-    border: 1px dashed #cbd5e1;
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-subtle);
+    border: 1px dashed var(--sa-color-border-strong);
     border-radius: 10px;
 }
 </style>

package/src/pages-standard/discovery-page/DiscoveryCapList.vue

@@ -90,17 +90,17 @@ function isNew(cap: CapabilityCatalogEntryRow): boolean {
     display: flex;
     gap: 10px;
     align-items: flex-start;
-    background: #fff;
-    border: 1px solid var(--sa-border);
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
     border-radius: 8px;
     padding: 8px 10px;
 }
 .sa-caps-row.dep {
-    border-color: #fecaca;
-    background: #fef2f2;
+    border-color: var(--sa-color-negative-border);
+    background: var(--sa-color-negative-surface);
 }
 .sa-caps-row__kind {
-    font-size: 9px;
+    font-size: var(--sa-text-2xs);
     font-weight: 700;
     text-transform: uppercase;
     padding: 2px 6px;
@@ -120,30 +120,30 @@ function isNew(cap: CapabilityCatalogEntryRow): boolean {
     flex-wrap: wrap;
 }
 .sa-caps-row__key {
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
     font-weight: 700;
 }
 .sa-caps-row__flag {
-    font-size: 9px;
+    font-size: var(--sa-text-2xs);
     font-weight: 700;
     padding: 1px 5px;
     border-radius: 4px;
 }
 .sa-caps-row__flag--new {
-    background: #fef3c7;
-    color: #92400e;
+    background: var(--sa-color-warning-surface-strong);
+    color: var(--sa-color-warning-fg);
 }
 .sa-caps-row__flag--exp {
-    background: #ede9fe;
-    color: #6d28d9;
+    background: var(--sa-color-feature-surface);
+    color: var(--sa-color-feature-fg);
 }
 .sa-caps-row__flag--dep {
-    background: #fee2e2;
-    color: #b91c1c;
+    background: var(--sa-color-negative-surface-strong);
+    color: var(--sa-color-negative-fg);
 }
 .sa-caps-row__flag--gone {
-    background: var(--sa-border);
-    color: var(--sa-muted);
+    background: var(--sa-color-border);
+    color: var(--sa-color-fg-muted);
 }
 .sa-caps-row.gone {
     opacity: 0.6;
@@ -152,21 +152,21 @@ function isNew(cap: CapabilityCatalogEntryRow): boolean {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
-    font-size: 11px;
-    color: var(--sa-muted-dark);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-secondary);
     margin-top: 1px;
 }
 .sa-caps-row__meta code {
-    font-size: 10px;
+    font-size: var(--sa-text-2xs);
 }
 .sa-caps__empty {
     display: flex;
     align-items: center;
     gap: 6px;
-    font-size: 11px;
-    color: #b45309;
-    background: var(--sa-warning-bg);
-    border: 1px dashed #fde68a;
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-warning-fg);
+    background: var(--sa-color-warning-surface);
+    border: 1px dashed var(--sa-color-warning-border);
     border-radius: 8px;
     padding: 10px 12px;
 }

package/src/pages-standard/discovery-page/DiscoveryFeatureCard.vue

@@ -269,14 +269,14 @@ function coverage(locale: string): number {
 
 <style scoped>
 .sa-fc {
-    border: 1px solid var(--sa-border);
+    border: 1px solid var(--sa-color-border);
     border-radius: 10px;
-    background: #fff;
+    background: var(--sa-color-bg-surface);
     overflow: hidden;
 }
 .sa-fc.expanded {
-    border-color: #c7d2fe;
-    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+    border-color: var(--sa-color-scheduled-border);
+    box-shadow: 0 1px 3px var(--sa-shadow-tint-2);
 }
 .sa-fc__head {
     display: flex;
@@ -286,7 +286,7 @@ function coverage(locale: string): number {
     cursor: pointer;
 }
 .sa-fc__icon {
-    color: var(--sa-muted-dark);
+    color: var(--sa-color-fg-secondary);
     flex-shrink: 0;
 }
 .sa-fc__main {
@@ -300,55 +300,55 @@ function coverage(locale: string): number {
     flex-wrap: wrap;
 }
 .sa-fc__key {
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
     font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-    background: var(--sa-border-soft);
-    color: var(--sa-muted-dark);
+    background: var(--sa-color-border-soft);
+    color: var(--sa-color-fg-secondary);
     padding: 2px 6px;
     border-radius: 5px;
     white-space: nowrap;
 }
 .sa-fc__label {
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     font-weight: 600;
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
 }
 .sa-fc__flag {
-    font-size: 10px;
+    font-size: var(--sa-text-2xs);
     font-weight: 700;
     padding: 1px 6px;
     border-radius: 5px;
 }
 .sa-fc__flag--new {
-    background: #fef3c7;
-    color: #92400e;
+    background: var(--sa-color-warning-surface-strong);
+    color: var(--sa-color-warning-fg);
 }
 .sa-fc__flag--dep {
-    background: #fee2e2;
-    color: #b91c1c;
+    background: var(--sa-color-negative-surface-strong);
+    color: var(--sa-color-negative-fg);
 }
 .sa-fc__flag--succ {
-    background: #fef3c7;
-    color: #92400e;
+    background: var(--sa-color-warning-surface-strong);
+    color: var(--sa-color-warning-fg);
 }
 .sa-fc__flag--repl {
-    background: #dbeafe;
-    color: #1e40af;
+    background: var(--sa-color-info-surface-strong);
+    color: var(--sa-color-info-fg);
 }
 .sa-fc__sub {
-    font-size: 11px;
-    color: var(--sa-muted);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-muted);
     margin-top: 1px;
 }
 .sa-fc__dot {
     margin: 0 4px;
-    color: #cbd5e1;
+    color: var(--sa-color-fg-disabled);
 }
 .sa-fc__tier {
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.3px;
-    color: #4f46e5;
+    color: var(--sa-color-scheduled);
 }
 .sa-fc__coverage {
     display: flex;
@@ -356,39 +356,39 @@ function coverage(locale: string): number {
     flex-shrink: 0;
 }
 .sa-fc__chev {
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
     transition: transform 0.15s;
 }
 .sa-fc__chev.open {
     transform: rotate(90deg);
 }
 .sa-fc__body {
-    border-top: 1px solid var(--sa-border-soft);
+    border-top: 1px solid var(--sa-color-border-soft);
     padding: 12px;
-    background: var(--sa-bg-surface-2);
+    background: var(--sa-color-bg-sunken);
 }
 .sa-fc__banner {
     display: flex;
     align-items: center;
     gap: 8px;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     border-radius: 8px;
     padding: 8px 12px;
     margin-bottom: 10px;
 }
 .sa-fc__banner.warn {
-    background: var(--sa-warning-bg);
-    border: 1px solid #fde68a;
-    color: #92400e;
+    background: var(--sa-color-warning-surface);
+    border: 1px solid var(--sa-color-warning-border);
+    color: var(--sa-color-warning-fg);
 }
 .sa-fc__banner.mute {
-    background: var(--sa-border-soft);
-    border: 1px solid var(--sa-border);
-    color: var(--sa-muted-dark);
+    background: var(--sa-color-border-soft);
+    border: 1px solid var(--sa-color-border);
+    color: var(--sa-color-fg-secondary);
 }
 .sa-fc__subtabs {
     margin-bottom: 12px;
-    border-bottom: 1px solid var(--sa-border);
+    border-bottom: 1px solid var(--sa-color-border);
 }
 .sa-fc__split {
     display: grid;
@@ -396,18 +396,18 @@ function coverage(locale: string): number {
     gap: 14px;
 }
 .sa-fc__split-head {
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
     margin-bottom: 8px;
 }
 .sa-fc__split-count {
     font-weight: 600;
     text-transform: none;
     letter-spacing: 0;
-    color: #cbd5e1;
+    color: var(--sa-color-fg-disabled);
     margin-left: 6px;
 }
 .sa-fc__fields {
@@ -421,9 +421,9 @@ function coverage(locale: string): number {
     gap: 3px;
 }
 .sa-fc-field__cap {
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
     font-weight: 600;
     text-transform: uppercase;
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
 }
 </style>

package/src/pages-standard/discovery-page/DiscoveryQuotaCard.vue

@@ -154,17 +154,17 @@ function coverage(locale: string): number {
 
 <style scoped>
 .sa-qc {
-    border: 1px solid var(--sa-border);
+    border: 1px solid var(--sa-color-border);
     border-radius: 10px;
-    background: #fff;
+    background: var(--sa-color-bg-surface);
     overflow: hidden;
 }
 .sa-qc.warn {
-    border-color: #fecaca;
+    border-color: var(--sa-color-negative-border);
 }
 .sa-qc.expanded {
-    border-color: #c7d2fe;
-    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+    border-color: var(--sa-color-scheduled-border);
+    box-shadow: 0 1px 3px var(--sa-shadow-tint-2);
 }
 .sa-qc__head {
     display: flex;
@@ -174,7 +174,7 @@ function coverage(locale: string): number {
     cursor: pointer;
 }
 .sa-qc.warn .sa-qc__head {
-    background: #fef2f2;
+    background: var(--sa-color-negative-surface);
 }
 .sa-qc__icon {
     flex-shrink: 0;
@@ -191,38 +191,38 @@ function coverage(locale: string): number {
 }
 .sa-qc__label {
     font-weight: 600;
-    font-size: 13px;
-    color: var(--sa-heading);
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-heading);
 }
 .sa-qc__key {
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
 }
 .sa-qc__flag {
-    font-size: 10px;
+    font-size: var(--sa-text-2xs);
     font-weight: 700;
     padding: 1px 6px;
     border-radius: 5px;
 }
 .sa-qc__flag--succ {
-    background: #fef3c7;
-    color: #92400e;
+    background: var(--sa-color-warning-surface-strong);
+    color: var(--sa-color-warning-fg);
 }
 .sa-qc__flag--repl {
-    background: #dbeafe;
-    color: #1e40af;
+    background: var(--sa-color-info-surface-strong);
+    color: var(--sa-color-info-fg);
 }
 .sa-qc__sub {
-    font-size: 11px;
-    color: var(--sa-muted);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-muted);
     margin-top: 2px;
 }
 .sa-qc__missing {
-    color: #b91c1c;
+    color: var(--sa-color-negative-fg);
     font-weight: 700;
 }
 .sa-qc__warning {
-    font-size: 11px;
-    color: #b91c1c;
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-negative-fg);
     margin-top: 4px;
 }
 .sa-qc__coverage {
@@ -231,27 +231,27 @@ function coverage(locale: string): number {
     flex-shrink: 0;
 }
 .sa-qc__chev {
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
     transition: transform 0.15s;
 }
 .sa-qc__chev.open {
     transform: rotate(90deg);
 }
 .sa-qc__body {
-    border-top: 1px solid var(--sa-border-soft);
+    border-top: 1px solid var(--sa-color-border-soft);
     padding: 12px;
-    background: var(--sa-bg-surface-2);
+    background: var(--sa-color-bg-sunken);
 }
 .sa-qc__banner {
     display: flex;
     align-items: center;
     gap: 8px;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     border-radius: 8px;
     padding: 8px 12px;
     margin-bottom: 10px;
-    background: var(--sa-warning-bg);
-    border: 1px solid #fde68a;
-    color: #92400e;
+    background: var(--sa-color-warning-surface);
+    border: 1px solid var(--sa-color-warning-border);
+    color: var(--sa-color-warning-fg);
 }
 </style>

package/src/pages-standard/discovery-page/DiscoveryStatusControl.vue

@@ -71,6 +71,6 @@ const menu = computed(() => reviewMenuActions(props.status, msg.value));
     flex-shrink: 0;
 }
 .sa-stc__danger {
-    color: #b91c1c;
+    color: var(--sa-color-negative-fg);
 }
 </style>

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(() => {
@@ -63,8 +70,8 @@ const changeCountLabel = computed(() => {
 
 <style scoped>
 .sa-pv-diff-card {
-    background: #fff;
-    border: 1px solid var(--sa-border, var(--sa-border));
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
     border-radius: 10px;
     margin-bottom: 12px;
     overflow: hidden;
@@ -81,22 +88,22 @@ const changeCountLabel = computed(() => {
     width: 28px;
     height: 28px;
     border-radius: 7px;
-    background: var(--sa-positive-soft, rgba(4, 120, 87, 0.1));
+    background: var(--sa-color-positive-surface);
     display: flex;
     align-items: center;
     justify-content: center;
 }
 .sa-pv-diff-card__noop-icon :deep(.q-icon) {
-    color: var(--sa-positive, #047857);
+    color: var(--sa-color-positive-fg);
 }
 
 .sa-pv-diff-card__head {
     padding: 12px 16px;
-    border-bottom: 1px solid var(--sa-border-soft, var(--sa-border-soft));
+    border-bottom: 1px solid var(--sa-color-border-soft);
     display: flex;
     align-items: center;
     gap: 12px;
-    background: #fafbfc;
+    background: var(--sa-color-bg-surface-raised);
 }
 .sa-pv-diff-card__accent {
     width: 28px;
@@ -109,29 +116,29 @@ const changeCountLabel = computed(() => {
 }
 .sa-pv-diff-card__name {
     font-weight: 700;
-    font-size: 14px;
-    color: var(--sa-heading, var(--sa-heading));
+    font-size: var(--sa-text-lg);
+    color: var(--sa-color-fg-heading);
     font-family: var(--sa-font-head, system-ui, sans-serif);
 }
 .sa-pv-diff-card__ver {
     font-family: var(--sa-font-mono, ui-monospace, monospace);
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
     font-weight: 600;
-    color: var(--sa-muted, var(--sa-muted));
-    background: var(--sa-border-soft);
+    color: var(--sa-color-fg-muted);
+    background: var(--sa-color-border-soft);
     padding: 2px 6px;
     border-radius: 4px;
 }
 .sa-pv-diff-card__sub {
-    font-size: 11.5px;
-    color: var(--sa-muted, var(--sa-muted));
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-muted);
 }
 .sa-pv-diff-card__count {
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
     font-weight: 700;
     letter-spacing: 0.06em;
-    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);
     padding: 2px 8px;
     border-radius: 4px;
     margin-left: auto;