@saasicat/ui-vue 0.22.2 → 0.24.0

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

@@ -66,8 +66,10 @@ const props = defineProps<{
 
 const msg = useSaMessages('planVersions');
 
+import { identityAccentFor } from '../../client/identity-accents.js';
+
 function planAccent(planId: string): string {
-    return props.planAccents?.[planId] ?? '#3f6bff';
+    return identityAccentFor(planId, props.planAccents ?? {});
 }
 
 const planDiffs = computed<SnapshotEntityDiff[]>(() => {
@@ -195,8 +197,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 +210,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 +249,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;
 }

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

@@ -117,16 +117,16 @@ function metaText(s: CatalogSnapshot): string {
 .sa-pv-timeline {
     width: 280px;
     flex-shrink: 0;
-    background: var(--sa-bg-surface, #ffffff);
-    border-right: 1px solid var(--sa-border, var(--sa-border));
+    background: var(--sa-color-bg-surface);
+    border-right: 1px solid var(--sa-color-border);
     display: flex;
     flex-direction: column;
     overflow: hidden;
 }
 .sa-pv-timeline__head {
     padding: 14px 16px;
-    border-bottom: 1px solid var(--sa-border, var(--sa-border));
-    background: #fafbfc;
+    border-bottom: 1px solid var(--sa-color-border);
+    background: var(--sa-color-bg-surface-raised);
 }
 .sa-pv-timeline__row {
     display: flex;
@@ -134,16 +134,16 @@ function metaText(s: CatalogSnapshot): string {
     justify-content: space-between;
 }
 .sa-pv-timeline__title {
-    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-timeline__count {
     margin-top: 2px;
-    font-size: 11px;
-    color: var(--sa-muted, var(--sa-muted));
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-muted);
 }
 
 .sa-pv-timeline__list {
@@ -160,7 +160,7 @@ function metaText(s: CatalogSnapshot): string {
     top: 36px;
     bottom: -6px;
     width: 2px;
-    background: var(--sa-border, var(--sa-border));
+    background: var(--sa-color-border);
     z-index: 0;
 }
 .sa-pv-timeline__btn {
@@ -182,11 +182,11 @@ function metaText(s: CatalogSnapshot): string {
     color: inherit;
 }
 .sa-pv-timeline__btn:hover:not(.sa-pv-timeline__btn--selected) {
-    background: var(--sa-border-soft, var(--sa-border-soft));
+    background: var(--sa-color-border-soft);
 }
 .sa-pv-timeline__btn--selected {
-    background: var(--sa-primary-soft, rgba(63, 107, 255, 0.08));
-    border-color: var(--sa-primary-border, rgba(63, 107, 255, 0.18));
+    background: var(--sa-color-accent-surface);
+    border-color: var(--sa-color-accent-border);
 }
 
 .sa-pv-timeline__node {
@@ -200,19 +200,19 @@ function metaText(s: CatalogSnapshot): string {
     border: 2px solid;
 }
 .sa-pv-timeline__node--draft {
-    background: var(--sa-warning-soft, rgba(245, 158, 11, 0.1));
-    border-color: var(--sa-warning, #b45309);
-    color: var(--sa-warning, #b45309);
+    background: var(--sa-color-warning-surface-strong);
+    border-color: var(--sa-color-warning-fg);
+    color: var(--sa-color-warning-fg);
 }
 .sa-pv-timeline__node--active {
-    background: var(--sa-positive-soft, rgba(4, 120, 87, 0.1));
-    border-color: var(--sa-positive, #047857);
-    color: var(--sa-positive, #047857);
+    background: var(--sa-color-positive-surface);
+    border-color: var(--sa-color-positive);
+    color: var(--sa-color-positive-fg);
 }
 .sa-pv-timeline__node--archived {
-    background: var(--sa-border-soft);
-    border-color: var(--sa-muted, var(--sa-muted));
-    color: var(--sa-muted, var(--sa-muted));
+    background: var(--sa-color-border-soft);
+    border-color: var(--sa-color-fg-muted);
+    color: var(--sa-color-fg-muted);
 }
 .sa-pv-timeline__node-dot {
     width: 6px;
@@ -235,50 +235,50 @@ function metaText(s: CatalogSnapshot): string {
 }
 .sa-pv-timeline__label {
     font-family: var(--sa-font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     font-weight: 700;
-    color: var(--sa-heading, var(--sa-heading));
+    color: var(--sa-color-fg-heading);
 }
 .sa-pv-timeline__status {
-    font-size: 9.5px;
+    font-size: var(--sa-text-2xs);
     font-weight: 700;
     letter-spacing: 0.06em;
     padding: 2px 6px;
     border-radius: 4px;
 }
 .sa-pv-timeline__status--draft {
-    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-pv-timeline__status--active {
-    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-pv-timeline__status--archived {
-    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-pv-timeline__vs {
-    font-size: 9.5px;
+    font-size: var(--sa-text-2xs);
     font-weight: 700;
     letter-spacing: 0.06em;
-    background: #fef3c7;
-    color: #92400e;
+    background: var(--sa-color-warning-surface-strong);
+    color: var(--sa-color-warning-fg);
     padding: 2px 6px;
     border-radius: 4px;
 }
 .sa-pv-timeline__h2 {
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     font-weight: 600;
-    color: var(--sa-body, #1e293b);
+    color: var(--sa-color-fg-body);
     line-height: 1.3;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 .sa-pv-timeline__meta {
-    font-size: 11px;
-    color: var(--sa-muted, var(--sa-muted));
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-muted);
     margin-top: 2px;
     display: flex;
     align-items: center;
@@ -287,10 +287,10 @@ function metaText(s: CatalogSnapshot): string {
 
 .sa-pv-timeline__foot {
     padding: 10px 14px;
-    border-top: 1px solid var(--sa-border, var(--sa-border));
-    background: #fafbfc;
-    font-size: 11px;
-    color: var(--sa-muted, var(--sa-muted));
+    border-top: 1px solid var(--sa-color-border);
+    background: var(--sa-color-bg-surface-raised);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-muted);
 }
 .sa-pv-timeline__hint {
     display: flex;
@@ -299,13 +299,13 @@ function metaText(s: CatalogSnapshot): string {
 }
 .sa-pv-timeline__clear-btn {
     margin-top: 6px;
-    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: 6px;
     padding: 4px 10px;
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
     font-weight: 600;
-    color: var(--sa-body, #1e293b);
+    color: var(--sa-color-fg-body);
     cursor: pointer;
 }
 </style>

package/src/pages-standard/plans-page/PlanBundleOverview.vue

@@ -83,16 +83,22 @@ function compatLabel(bundle: BundleEntry): string {
 </script>
 
 <style scoped>
+.sa-bundle {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    background-color: var(--sa-color-bg-surface);
+}
 .sa-bundles__count {
-    font-size: 12px;
-    color: var(--sa-muted);
-    background: var(--sa-border);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-muted);
+    background: var(--sa-color-border);
     border-radius: 999px;
     padding: 1px 8px;
 }
 .sa-bundle-overview__empty {
-    color: var(--sa-muted);
-    font-size: 14px;
+    color: var(--sa-color-fg-muted);
+    font-size: var(--sa-text-lg);
     padding: 8px 0;
 }
 .sa-bundles__grid {
@@ -105,18 +111,18 @@ function compatLabel(bundle: BundleEntry): string {
 }
 .sa-bundle__label {
     font-weight: 600;
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
 }
 .sa-bundle__key {
-    font-size: 11px;
-    color: var(--sa-muted-light);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-subtle);
     font-family: monospace;
 }
 .sa-bundle__caption {
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
     text-transform: uppercase;
     letter-spacing: 0.04em;
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
     margin-bottom: 4px;
 }
 .sa-bundle__chips {
@@ -125,17 +131,17 @@ function compatLabel(bundle: BundleEntry): string {
     gap: 4px;
 }
 .sa-bundle__chip {
-    background: #eef2ff;
-    color: #3730a3;
+    background: var(--sa-color-scheduled-surface);
+    color: var(--sa-color-scheduled-fg);
 }
 .sa-bundle__muted {
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
 }
 .sa-bundle__compat {
     padding-top: 0;
 }
 .sa-bundle__plans {
-    font-size: 13px;
-    color: #334155;
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-body);
 }
 </style>

package/src/pages-standard/plans-page/PlanPublishDialog.vue

@@ -100,18 +100,18 @@ defineEmits<{
 .sa-publish-regression {
     margin: 0;
     padding-left: 18px;
-    font-size: 13px;
-    color: #334155;
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-body);
 }
 .sa-publish-regression li {
     margin: 4px 0;
 }
 .sa-publish-regression__old {
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
     text-decoration: line-through;
 }
 .sa-publish-regression__new {
-    color: #b91c1c;
+    color: var(--sa-color-negative-fg);
     font-weight: 600;
 }
 </style>

package/src/pages-standard/plans-page/PlansPageToast.vue

@@ -30,18 +30,18 @@ defineProps<{
     bottom: 24px;
     left: 50%;
     transform: translateX(-50%);
-    background: var(--sa-heading);
-    color: #fff;
+    background: var(--sa-color-inverse-bg);
+    color: var(--sa-color-fg-on-accent);
     padding: 12px 18px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     gap: 10px;
     font:
-        500 13px 'Inter',
+        500 var(--sa-text-md) 'Inter',
         system-ui,
         sans-serif;
-    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.3);
+    box-shadow: 0 12px 40px var(--sa-shadow-tint-4);
     z-index: 6000;
     max-width: 80vw;
 }
@@ -49,8 +49,8 @@ defineProps<{
     width: 22px;
     height: 22px;
     border-radius: 50%;
-    background: #10b981;
-    color: #fff;
+    background: var(--sa-color-positive-surface-strong);
+    color: var(--sa-color-positive-fg);
     display: grid;
     place-items: center;
     flex: 0 0 auto;