@saasicat/ui-vue 0.22.2 → 0.23.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/plan-versions/PlanDiffCard.vue

@@ -63,8 +63,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 +81,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 +109,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;

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

@@ -195,8 +195,8 @@ function directionFor(delta: number, polarity: 'higher' | 'lower'): VersionChang
     padding: 20px 28px;
 }
 .sa-pv-diff__overview {
-    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: 12px;
     padding: 16px 20px;
     margin-bottom: 18px;
@@ -208,26 +208,32 @@ function directionFor(delta: number, polarity: 'higher' | 'lower'): VersionChang
     width: 44px;
     height: 44px;
     border-radius: 10px;
-    background: linear-gradient(135deg, #f59e0b, #d97706);
+    /* Invariant: the icon inside is explicitly white. The `warning` roles
+     * lighten in dark, which would leave it at 1.67:1 on its own badge. */
+    background: linear-gradient(
+        135deg,
+        var(--sa-color-inverse-notice),
+        var(--sa-color-inverse-notice-strong)
+    );
     display: flex;
     align-items: center;
     justify-content: center;
 }
 .sa-pv-diff__legend {
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
     font-weight: 700;
     letter-spacing: 0.08em;
-    color: var(--sa-muted, var(--sa-muted));
+    color: var(--sa-color-fg-muted);
     text-transform: uppercase;
 }
 .sa-pv-diff__title {
     font-family: var(--sa-font-head, system-ui, sans-serif);
     font-weight: 700;
-    font-size: 18px;
-    color: var(--sa-heading, var(--sa-heading));
+    font-size: var(--sa-text-xl);
+    color: var(--sa-color-fg-heading);
 }
 .sa-pv-diff__sep {
-    color: var(--sa-muted, var(--sa-muted));
+    color: var(--sa-color-fg-muted);
     font-weight: 500;
 }
 .sa-pv-diff__spacer {
@@ -241,30 +247,30 @@ function directionFor(delta: number, polarity: 'higher' | 'lower'): VersionChang
     text-align: right;
 }
 .sa-pv-diff__stat-label {
-    font-size: 10.5px;
+    font-size: var(--sa-text-xs);
     font-weight: 700;
     letter-spacing: 0.08em;
-    color: var(--sa-muted, var(--sa-muted));
+    color: var(--sa-color-fg-muted);
     text-transform: uppercase;
 }
 .sa-pv-diff__stat-value {
     font-family: var(--sa-font-head, system-ui, sans-serif);
     font-weight: 700;
-    font-size: 22px;
+    font-size: var(--sa-text-2xl);
 }
 .sa-pv-diff__stat-value--warn {
-    color: var(--sa-warning, #b45309);
+    color: var(--sa-color-warning-fg);
 }
 .sa-pv-diff__stat-value--bad {
-    color: var(--sa-negative, #dc2626);
+    color: var(--sa-color-negative);
 }
 
 .sa-pv-diff__section {
     margin: 22px 0 10px;
     font-family: var(--sa-font-head, system-ui, sans-serif);
-    font-size: 14px;
+    font-size: var(--sa-text-lg);
     font-weight: 700;
-    color: var(--sa-muted, var(--sa-muted));
+    color: var(--sa-color-fg-muted);
     text-transform: uppercase;
     letter-spacing: 0.08em;
 }