@saasicat/ui-vue 0.22.2 → 0.23.0

package/src/pages-standard/tenants/StatusPill.vue

@@ -25,7 +25,7 @@ defineProps<{
     display: inline-flex;
     align-items: center;
     gap: 4px;
-    font-size: 10.5px;
+    font-size: var(--sa-text-xs);
     font-weight: 700;
     letter-spacing: 0.04em;
     padding: 3px 8px;
@@ -36,27 +36,27 @@ defineProps<{
     color: inherit;
 }
 .sa-pill--positive {
-    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-pill--warning {
-    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-pill--negative {
-    background: var(--sa-negative-soft, rgba(220, 38, 38, 0.08));
-    color: var(--sa-negative, #dc2626);
+    background: var(--sa-color-negative-surface);
+    color: var(--sa-color-negative);
 }
 .sa-pill--muted {
-    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-pill--primary {
-    background: var(--sa-primary-soft, rgba(63, 107, 255, 0.08));
-    color: var(--sa-primary, #3f6bff);
+    background: var(--sa-color-accent-surface);
+    color: var(--sa-color-accent);
 }
 .sa-pill--accent {
-    background: rgba(245, 158, 11, 0.16);
-    color: #b45309;
+    background: var(--sa-color-warning-surface-strong);
+    color: var(--sa-color-warning-fg);
 }
 </style>

package/src/pages-tenant/LimitsRow.vue

@@ -44,7 +44,7 @@ function formatMax(n: number): string {
 
 <style scoped>
 .sp-limits-row {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    border-bottom: 1px solid var(--sa-color-border-soft);
 }
 .sp-limits-row td {
     padding: 8px 12px;
@@ -54,14 +54,14 @@ function formatMax(n: number): string {
     font-weight: 500;
 }
 .sp-limits-row__target--ok {
-    color: var(--q-positive, #21ba45);
+    color: var(--sa-color-positive);
     font-weight: 600;
 }
 .sp-limits-row__target--bad {
-    color: var(--q-negative, #c10015);
+    color: var(--sa-color-negative);
     font-weight: 600;
 }
 .sp-limits-row--exceeded {
-    background: rgba(193, 0, 21, 0.05);
+    background: var(--sa-color-negative-surface);
 }
 </style>

package/src/pages-tenant/MySubscriptionBundlesPage.vue

@@ -400,7 +400,7 @@ function formatDate(date: Date | string | null | undefined): string {
         BlinkMacSystemFont,
         system-ui,
         sans-serif;
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
 }
 .msb-head {
     display: flex;
@@ -410,45 +410,45 @@ function formatDate(date: Date | string | null | undefined): string {
 }
 .msb-title {
     margin: 0;
-    font-size: 20px;
+    font-size: var(--sa-text-xl);
     font-weight: 700;
     letter-spacing: -0.01em;
 }
 .msb-sub {
     margin: 4px 0 0;
-    color: var(--sa-muted);
-    font-size: 13px;
+    color: var(--sa-color-fg-muted);
+    font-size: var(--sa-text-md);
     max-width: 580px;
     line-height: 1.5;
 }
 .msb-loading {
     padding: 32px;
     text-align: center;
-    color: var(--sa-muted);
+    color: var(--sa-color-fg-muted);
 }
 .msb-empty {
     padding: 32px 24px;
     text-align: center;
-    background: #fff;
-    border: 1px dashed #cbd5e1;
+    background: var(--sa-color-bg-surface);
+    border: 1px dashed var(--sa-color-border-strong);
     border-radius: 12px;
-    color: var(--sa-muted-dark);
+    color: var(--sa-color-fg-secondary);
 }
 .msb-empty-link {
     background: transparent;
     border: 0;
-    color: var(--sa-primary);
+    color: var(--sa-color-accent);
     cursor: pointer;
     font: inherit;
     text-decoration: underline;
 }
 .msb-error {
     padding: 10px 14px;
-    background: #fef2f2;
-    border: 1px solid #fecaca;
+    background: var(--sa-color-negative-surface);
+    border: 1px solid var(--sa-color-negative-border);
     border-radius: 8px;
-    color: #b91c1c;
-    font-size: 13px;
+    color: var(--sa-color-negative-fg);
+    font-size: var(--sa-text-md);
 }
 .msb-list {
     display: flex;
@@ -456,14 +456,14 @@ function formatDate(date: Date | string | null | undefined): string {
     gap: 10px;
 }
 .msb-card {
-    background: #fff;
-    border: 1px solid var(--sa-border);
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
     border-radius: 12px;
     padding: 14px 18px;
 }
 .msb-card--canceled-pending {
-    border-color: #fde68a;
-    background: var(--sa-warning-bg);
+    border-color: var(--sa-color-warning-border);
+    background: var(--sa-color-warning-surface);
 }
 .msb-card--canceled {
     opacity: 0.65;
@@ -482,18 +482,18 @@ function formatDate(date: Date | string | null | undefined): string {
 }
 .msb-card-key {
     font:
-        700 13px 'JetBrains Mono',
+        700 var(--sa-text-md) 'JetBrains Mono',
         ui-monospace,
         monospace;
     letter-spacing: 0.04em;
 }
 .msb-card-meta {
     margin-top: 4px;
-    font-size: 12.5px;
-    color: var(--sa-muted);
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-muted);
 }
 .msb-chip {
-    font-size: 10.5px;
+    font-size: var(--sa-text-xs);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.06em;
@@ -501,25 +501,25 @@ function formatDate(date: Date | string | null | undefined): string {
     border-radius: 999px;
 }
 .msb-chip--active {
-    background: #d1fae5;
-    color: #065f46;
+    background: var(--sa-color-positive-surface-strong);
+    color: var(--sa-color-positive-fg);
 }
 .msb-chip--canceled-pending {
-    background: #fef3c7;
-    color: #92400e;
+    background: var(--sa-color-warning-surface-strong);
+    color: var(--sa-color-warning-fg);
 }
 .msb-chip--canceled {
-    background: var(--sa-border);
-    color: var(--sa-muted-dark);
+    background: var(--sa-color-border);
+    color: var(--sa-color-fg-secondary);
 }
 .msb-cancel-info {
     margin-top: 10px;
     padding: 8px 12px;
-    background: var(--sa-warning-bg);
-    border: 1px solid #fde68a;
+    background: var(--sa-color-warning-surface);
+    border: 1px solid var(--sa-color-warning-border);
     border-radius: 6px;
-    color: #92400e;
-    font-size: 12.5px;
+    color: var(--sa-color-warning-fg);
+    font-size: var(--sa-text-md);
 }
 
 .msb-btn {
@@ -527,51 +527,51 @@ function formatDate(date: Date | string | null | undefined): string {
     align-items: center;
     gap: 6px;
     padding: 7px 14px;
-    background: #fff;
-    border: 1px solid #cbd5e1;
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border-strong);
     border-radius: 7px;
     cursor: pointer;
     font-family: inherit;
-    font-size: 13px;
-    color: var(--sa-heading);
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-heading);
 }
 .msb-btn:hover:not(:disabled) {
-    background: var(--sa-bg-surface-2);
+    background: var(--sa-color-bg-sunken);
 }
 .msb-btn:disabled {
     cursor: not-allowed;
     opacity: 0.55;
 }
 .msb-btn--primary {
-    background: var(--sa-primary);
-    border-color: var(--sa-primary);
-    color: #fff;
+    background: var(--sa-color-accent);
+    border-color: var(--sa-color-accent);
+    color: var(--sa-color-fg-on-accent);
 }
 .msb-btn--primary:hover:not(:disabled) {
-    background: var(--sa-primary-strong);
+    background: var(--sa-color-accent-strong);
 }
 .msb-btn--ghost {
     background: transparent;
-    border-color: #fca5a5;
-    color: #b91c1c;
+    border-color: var(--sa-color-negative-border);
+    color: var(--sa-color-negative-fg);
 }
 .msb-btn--ghost:hover:not(:disabled) {
-    background: #fef2f2;
+    background: var(--sa-color-negative-surface);
 }
 
 .msb-modal-bg {
     position: fixed;
     inset: 0;
-    background: rgba(15, 23, 42, 0.55);
+    background: var(--sa-color-bg-overlay);
     display: grid;
     place-items: center;
     z-index: 1000;
 }
 .msb-modal {
     width: min(520px, 96vw);
-    background: #fff;
+    background: var(--sa-color-bg-surface);
     border-radius: 12px;
-    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
+    box-shadow: 0 20px 60px var(--sa-shadow-tint-4);
     display: flex;
     flex-direction: column;
 }
@@ -580,23 +580,23 @@ function formatDate(date: Date | string | null | undefined): string {
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px 10px;
-    border-bottom: 1px solid var(--sa-border);
+    border-bottom: 1px solid var(--sa-color-border);
 }
 .msb-modal-title {
-    font-size: 16px;
+    font-size: var(--sa-text-lg);
     font-weight: 700;
 }
 .msb-modal-x {
     background: transparent;
     border: 0;
     cursor: pointer;
-    color: var(--sa-muted);
+    color: var(--sa-color-fg-muted);
     padding: 4px;
     border-radius: 4px;
 }
 .msb-modal-x:hover {
-    background: var(--sa-border-soft);
-    color: var(--sa-heading);
+    background: var(--sa-color-border-soft);
+    color: var(--sa-color-fg-heading);
 }
 .msb-modal-body {
     padding: 16px 20px;
@@ -606,8 +606,8 @@ function formatDate(date: Date | string | null | undefined): string {
 }
 .msb-modal-foot {
     padding: 12px 20px;
-    border-top: 1px solid var(--sa-border);
-    background: var(--sa-bg-surface-2);
+    border-top: 1px solid var(--sa-color-border);
+    background: var(--sa-color-bg-sunken);
     border-radius: 0 0 12px 12px;
     display: flex;
     justify-content: flex-end;
@@ -619,21 +619,21 @@ function formatDate(date: Date | string | null | undefined): string {
     gap: 4px;
 }
 .msb-field-label {
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     font-weight: 600;
-    color: var(--sa-muted-dark);
+    color: var(--sa-color-fg-secondary);
 }
 .msb-field-hint {
-    font-size: 11px;
-    color: var(--sa-muted-light);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-subtle);
 }
 .msb-input {
     padding: 7px 10px;
-    border: 1px solid #cbd5e1;
+    border: 1px solid var(--sa-color-border-strong);
     border-radius: 6px;
     font-family: inherit;
-    font-size: 13px;
-    color: var(--sa-heading);
-    background: #fff;
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-heading);
+    background: var(--sa-color-bg-surface);
 }
 </style>

package/src/pages-tenant/OnboardingConfigurator.vue

@@ -302,24 +302,24 @@ defineExpose({ draft });
     align-items: center;
     gap: 8px;
     font-family: 'SF Mono', Consolas, monospace;
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
     letter-spacing: 0.1em;
     text-transform: uppercase;
-    color: var(--q-primary, #0f766e);
-    background: rgba(15, 118, 110, 0.08);
+    color: var(--sa-color-accent);
+    background: var(--sa-color-accent-surface);
     padding: 6px 11px;
     border-radius: 999px;
-    border: 1px solid rgba(15, 118, 110, 0.2);
+    border: 1px solid var(--sa-color-accent-border);
 }
 .sp-onb__header h1 {
     margin: 12px 0 8px;
-    font-size: clamp(1.6rem, 3vw, 2.4rem);
+    font-size: var(--sa-text-4xl);
     line-height: 1.1;
     letter-spacing: -0.01em;
 }
 .sp-onb__header p {
     margin: 0;
-    color: rgba(0, 0, 0, 0.6);
+    color: var(--sa-color-fg-secondary);
     max-width: 640px;
 }
 .sp-onb__layout {
@@ -339,26 +339,26 @@ defineExpose({ draft });
     gap: 20px;
 }
 .sp-onb__section {
-    background: #fff;
-    border: 1px solid rgba(0, 0, 0, 0.08);
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
     border-radius: 22px;
     padding: 26px 28px 24px;
-    box-shadow: 0 24px 80px rgba(31, 41, 51, 0.05);
+    box-shadow: 0 24px 80px var(--sa-shadow-tint-1);
 }
 .sp-onb__sec-head {
     padding-bottom: 14px;
     margin-bottom: 18px;
-    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
+    border-bottom: 1px dashed var(--sa-color-border);
 }
 .sp-onb__sec-head h2 {
     margin: 6px 0 0;
-    font-size: 1.4rem;
+    font-size: var(--sa-text-2xl);
     letter-spacing: -0.005em;
 }
 .sp-onb__sec-head p {
     margin: 4px 0 0;
-    color: rgba(0, 0, 0, 0.55);
-    font-size: 13px;
+    color: var(--sa-color-fg-muted);
+    font-size: var(--sa-text-md);
     max-width: 520px;
 }
 .sp-onb__sec-num {
@@ -366,22 +366,22 @@ defineExpose({ draft });
     align-items: center;
     gap: 8px;
     font-family: 'SF Mono', Consolas, monospace;
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
     letter-spacing: 0.16em;
     text-transform: uppercase;
-    color: var(--q-primary, #0f766e);
+    color: var(--sa-color-accent);
     font-weight: 700;
 }
 .sp-onb__sec-num::before {
     content: '';
     width: 28px;
     height: 1px;
-    background: var(--q-primary, #0f766e);
+    background: var(--sa-color-accent);
 }
 .sp-onb__loading {
     padding: 40px;
     text-align: center;
-    color: rgba(0, 0, 0, 0.5);
+    color: var(--sa-color-fg-subtle);
 }
 .sp-onb__actions {
     display: flex;
@@ -392,22 +392,22 @@ defineExpose({ draft });
 }
 .sp-onb__back-btn {
     background: none;
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    border: 1px solid var(--sa-color-border-strong);
     border-radius: 10px;
     padding: 10px 16px;
     font-family: inherit;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     cursor: pointer;
-    color: rgba(0, 0, 0, 0.7);
+    color: var(--sa-color-fg-body);
 }
 .sp-onb__back-btn:hover {
-    border-color: rgba(0, 0, 0, 0.4);
+    border-color: var(--sa-color-border-strong);
 }
 .sp-onb__error {
-    color: #b91c1c;
-    background: rgba(220, 38, 38, 0.08);
+    color: var(--sa-color-negative-fg);
+    background: var(--sa-color-negative-surface);
     padding: 10px 14px;
     border-radius: 8px;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 </style>

package/src/pages-tenant/PackageSnapshotPanel.vue

@@ -157,16 +157,10 @@ const rawJson = computed(() => {
 
 <style scoped>
 .sp-package-snapshot {
-    --sp-text-muted: rgba(0, 0, 0, 0.55);
-    --sp-text-strong: rgba(0, 0, 0, 0.85);
-    --sp-border: rgba(0, 0, 0, 0.08);
-    --sp-pre-bg: rgba(0, 0, 0, 0.04);
-}
-body.body--dark .sp-package-snapshot {
-    --sp-text-muted: rgba(255, 255, 255, 0.62);
-    --sp-text-strong: rgba(255, 255, 255, 0.85);
-    --sp-border: rgba(255, 255, 255, 0.16);
-    --sp-pre-bg: rgba(255, 255, 255, 0.06);
+    --sp-text-muted: var(--sa-color-fg-muted);
+    --sp-text-strong: var(--sa-color-fg-heading);
+    --sp-border: var(--sa-color-border);
+    --sp-pre-bg: var(--sa-color-bg-sunken);
 }
 .sp-package-snapshot__head {
     display: flex;
@@ -176,7 +170,7 @@ body.body--dark .sp-package-snapshot {
     flex-wrap: wrap;
 }
 .sp-package-snapshot__eyebrow {
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--sp-text-muted);
@@ -186,11 +180,11 @@ body.body--dark .sp-package-snapshot {
 .sp-package-snapshot__sub {
     margin: 0;
     color: var(--sp-text-muted);
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .sp-package-snapshot__empty {
     color: var(--sp-text-muted);
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     font-style: italic;
 }
 .sp-package-snapshot__list {
@@ -210,7 +204,7 @@ body.body--dark .sp-package-snapshot {
 }
 .sp-package-snapshot__muted {
     color: var(--sp-text-muted);
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .sp-package-snapshot__bundles {
     margin: 0;
@@ -227,13 +221,13 @@ body.body--dark .sp-package-snapshot {
     padding: 12px;
     background: var(--sp-pre-bg);
     border-radius: 4px;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     overflow-x: auto;
     max-height: 320px;
 }
 code {
     font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     background: var(--sp-pre-bg);
     padding: 1px 4px;
     border-radius: 3px;

package/src/pages-tenant/PendingVersionBanner.vue

@@ -71,8 +71,8 @@ defineEmits<{ accept: [] }>();
 
 <style scoped>
 .sp-pending-version {
-    border: 1px solid rgba(242, 192, 55, 0.4);
-    background: rgba(242, 192, 55, 0.08);
+    border: 1px solid var(--sa-color-warning-border);
+    background: var(--sa-color-warning-surface);
     border-radius: 6px;
     padding: 12px 16px;
     display: flex;
@@ -87,35 +87,35 @@ defineEmits<{ accept: [] }>();
 .sp-pending-version__chip {
     padding: 2px 8px;
     border-radius: 12px;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     font-weight: 600;
     text-transform: uppercase;
 }
 .sp-pending-version__chip--good {
-    background: rgba(33, 186, 69, 0.15);
-    color: var(--q-positive, #21ba45);
+    background: var(--sa-color-positive-surface-strong);
+    color: var(--sa-color-positive);
 }
 .sp-pending-version__chip--warn {
-    background: rgba(193, 0, 21, 0.15);
-    color: var(--q-negative, #c10015);
+    background: var(--sa-color-negative-surface-strong);
+    color: var(--sa-color-negative);
 }
 .sp-pending-version__note {
     margin: 0;
-    color: rgba(0, 0, 0, 0.75);
+    color: var(--sa-color-fg-body);
 }
 .sp-pending-version__effective,
 .sp-pending-version__accepted {
     margin: 0;
-    font-size: 13px;
-    color: rgba(0, 0, 0, 0.6);
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-secondary);
 }
 .sp-pending-version__btn {
     align-self: flex-start;
     padding: 6px 14px;
     border-radius: 4px;
     border: 0;
-    background: var(--q-primary, #1976d2);
-    color: white;
+    background: var(--sa-color-accent);
+    color: var(--sa-color-fg-on-accent);
     font-weight: 600;
     cursor: pointer;
 }