@saasicat/ui-vue 0.22.2 → 0.23.0

package/src/components/bundle-editor/BundleCreatePanel.vue

@@ -490,12 +490,12 @@ async function submit(): Promise<void> {
 
 <style scoped>
 .bcp {
-    background: #fff;
-    border: 1px solid #cbd5e1;
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border-strong);
     border-radius: 12px;
     display: flex;
     flex-direction: column;
-    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+    box-shadow: 0 8px 24px var(--sa-shadow-tint-2);
 }
 .bcp-head {
     display: flex;
@@ -503,18 +503,18 @@ async function submit(): Promise<void> {
     justify-content: space-between;
     gap: 16px;
     padding: 18px 22px 12px;
-    border-bottom: 1px solid var(--sa-border);
+    border-bottom: 1px solid var(--sa-color-border);
 }
 .bcp-title {
-    font-size: 18px;
+    font-size: var(--sa-text-xl);
     font-weight: 700;
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
     letter-spacing: -0.01em;
 }
 .bcp-sub {
     margin-top: 4px;
-    font-size: 12.5px;
-    color: var(--sa-muted);
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-muted);
     max-width: 580px;
     line-height: 1.5;
 }
@@ -522,13 +522,13 @@ async function submit(): Promise<void> {
     background: transparent;
     border: 0;
     cursor: pointer;
-    color: var(--sa-muted);
+    color: var(--sa-color-fg-muted);
     padding: 4px;
     border-radius: 4px;
 }
 .bcp-close:hover {
-    background: var(--sa-border-soft);
-    color: var(--sa-heading);
+    background: var(--sa-color-border-soft);
+    color: var(--sa-color-fg-heading);
 }
 .bcp-body {
     padding: 16px 22px;
@@ -552,22 +552,22 @@ async function submit(): Promise<void> {
     width: 24px;
     height: 24px;
     border-radius: 999px;
-    background: var(--sa-primary);
-    color: #fff;
+    background: var(--sa-color-accent);
+    color: var(--sa-color-fg-on-accent);
     font:
-        700 12px 'JetBrains Mono',
+        700 var(--sa-text-sm) 'JetBrains Mono',
         ui-monospace,
         monospace;
     flex: 0 0 auto;
 }
 .bcp-section-title {
-    font-size: 14px;
+    font-size: var(--sa-text-lg);
     font-weight: 700;
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
 }
 .bcp-section-sub {
-    font-size: 12px;
-    color: var(--sa-muted);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-muted);
     margin-top: 2px;
     line-height: 1.4;
 }
@@ -585,27 +585,27 @@ async function submit(): Promise<void> {
     gap: 4px;
 }
 .bcp-field-label {
-    font-size: 11.5px;
+    font-size: var(--sa-text-sm);
     font-weight: 600;
-    color: var(--sa-muted-dark);
+    color: var(--sa-color-fg-secondary);
 }
 .bcp-field-hint {
-    font-size: 10.5px;
-    color: var(--sa-muted-light);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-subtle);
     font-weight: 500;
 }
 .bcp-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);
 }
 .bcp-input--mono {
     font:
-        600 13px 'JetBrains Mono',
+        600 var(--sa-text-md) 'JetBrains Mono',
         ui-monospace,
         monospace;
     letter-spacing: 0.02em;
@@ -616,7 +616,7 @@ async function submit(): Promise<void> {
 .bcp-input-grp {
     display: inline-flex;
     align-items: stretch;
-    border: 1px solid #cbd5e1;
+    border: 1px solid var(--sa-color-border-strong);
     border-radius: 6px;
 }
 .bcp-input-grp .bcp-input {
@@ -627,31 +627,31 @@ async function submit(): Promise<void> {
     display: inline-flex;
     align-items: center;
     padding: 0 10px;
-    font-size: 11.5px;
-    color: var(--sa-muted);
-    background: var(--sa-bg-surface-2);
-    border-left: 1px solid var(--sa-border);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-muted);
+    background: var(--sa-color-bg-sunken);
+    border-left: 1px solid var(--sa-color-border);
     border-radius: 0 6px 6px 0;
 }
 .bcp-error-inline {
-    font-size: 11.5px;
-    color: #b91c1c;
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-negative-fg);
 }
 .bcp-error {
     padding: 10px 12px;
-    background: #fef2f2;
-    border: 1px solid #fecaca;
+    background: var(--sa-color-negative-surface);
+    border: 1px solid var(--sa-color-negative-border);
     border-radius: 6px;
-    color: #b91c1c;
-    font-size: 12.5px;
+    color: var(--sa-color-negative-fg);
+    font-size: var(--sa-text-md);
 }
 .bcp-foot {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 12px 22px;
-    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;
 }
 .bcp-foot-hint {
@@ -659,36 +659,36 @@ async function submit(): Promise<void> {
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    font-size: 12px;
-    color: var(--sa-muted-dark);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-secondary);
 }
 .bcp-foot-hint--warn {
-    color: #b91c1c;
+    color: var(--sa-color-negative-fg);
     font-weight: 600;
 }
 .bcp-btn {
     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: 6px;
     cursor: pointer;
-    font-size: 12.5px;
+    font-size: var(--sa-text-md);
     font-family: inherit;
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
 }
 .bcp-btn:hover:not(:disabled) {
-    background: var(--sa-bg-surface-2);
+    background: var(--sa-color-bg-sunken);
 }
 .bcp-btn:disabled {
     cursor: not-allowed;
     opacity: 0.5;
 }
 .bcp-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);
 }
 .bcp-btn--primary:hover:not(:disabled) {
-    background: var(--sa-primary-strong);
+    background: var(--sa-color-accent-strong);
 }
 </style>

package/src/components/bundle-editor/BundleFeaturesEditor.vue

@@ -151,11 +151,11 @@ function onToggle(featureKey: string): void {
     gap: 6px;
 }
 .bd-features-group-label {
-    font-size: 10.5px;
+    font-size: var(--sa-text-xs);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.08em;
-    color: var(--sa-muted);
+    color: var(--sa-color-fg-muted);
 }
 .bd-features-row {
     display: flex;
@@ -167,31 +167,31 @@ function onToggle(featureKey: string): void {
     align-items: center;
     gap: 6px;
     padding: 6px 10px;
-    background: #fff;
-    border: 1px solid var(--sa-border);
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
     border-radius: 999px;
     cursor: pointer;
     font-family: inherit;
-    font-size: 12px;
-    color: var(--sa-heading);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-heading);
     transition:
         background 0.12s,
         border-color 0.12s,
         color 0.12s;
 }
 .bd-feature-pill:hover:not(:disabled) {
-    background: var(--sa-bg-surface-2);
-    border-color: #cbd5e1;
+    background: var(--sa-color-bg-sunken);
+    border-color: var(--sa-color-border-strong);
 }
 .bd-feature-pill.on {
-    background: #dbeafe;
-    border-color: #93c5fd;
-    color: #1e40af;
+    background: var(--sa-color-info-surface-strong);
+    border-color: var(--sa-color-info-border);
+    color: var(--sa-color-info-fg);
 }
 .bd-feature-pill.overlap {
-    border-color: #fecaca;
-    background: #fef2f2;
-    color: #b91c1c;
+    border-color: var(--sa-color-negative-border);
+    background: var(--sa-color-negative-surface);
+    color: var(--sa-color-negative-fg);
 }
 .bd-feature-pill:disabled {
     cursor: not-allowed;
@@ -201,22 +201,22 @@ function onToggle(featureKey: string): void {
 }
 .bd-feature-key {
     font:
-        600 10px 'JetBrains Mono',
+        600 var(--sa-text-2xs) 'JetBrains Mono',
         ui-monospace,
         monospace;
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
     margin-left: 4px;
 }
 .bd-feature-pill.on .bd-feature-key {
-    color: var(--sa-primary);
+    color: var(--sa-color-accent);
 }
 .bd-feature-pill.overlap .bd-feature-key {
-    color: #b91c1c;
+    color: var(--sa-color-negative-fg);
 }
 .bd-features-empty {
     padding: 12px;
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
     font-style: italic;
-    font-size: 12.5px;
+    font-size: var(--sa-text-md);
 }
 </style>

package/src/components/bundle-editor/BundlePlanCompatPicker.vue

@@ -182,8 +182,8 @@ function onToggle(planKey: string): void {
     gap: 10px;
 }
 .bv-compat-hint {
-    font-size: 11.5px;
-    color: var(--sa-muted);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-muted);
     line-height: 1.5;
 }
 .bv-compat-grid {
@@ -196,27 +196,27 @@ function onToggle(planKey: string): void {
     flex-direction: column;
     gap: 6px;
     padding: 10px 12px;
-    background: #fff;
-    border: 1px solid var(--sa-border);
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
     border-radius: 8px;
     cursor: pointer;
     text-align: left;
     font-family: inherit;
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
     transition:
         background 0.12s,
         border-color 0.12s;
 }
 .bv-compat-card:hover:not(:disabled) {
-    background: var(--sa-bg-surface-2);
+    background: var(--sa-color-bg-sunken);
 }
 .bv-compat-card.on {
-    border-color: var(--sa-primary);
-    background: var(--sa-primary-50);
+    border-color: var(--sa-color-accent);
+    background: var(--sa-color-accent-surface-strong);
 }
 .bv-compat-card.warn {
-    border-color: #fca5a5;
-    background: #fef2f2;
+    border-color: var(--sa-color-negative-border);
+    background: var(--sa-color-negative-surface);
 }
 .bv-compat-card:disabled {
     cursor: not-allowed;
@@ -232,12 +232,12 @@ function onToggle(planKey: string): void {
     height: 26px;
     display: grid;
     place-items: center;
-    background: #e0e7ff;
-    color: #4338ca;
-    border: 1px solid #c7d2fe;
+    background: var(--sa-color-scheduled-surface-strong);
+    color: var(--sa-color-scheduled-fg);
+    border: 1px solid var(--sa-color-scheduled-border);
     border-radius: 6px;
     font:
-        700 9px 'JetBrains Mono',
+        700 var(--sa-text-2xs) 'JetBrains Mono',
         ui-monospace,
         monospace;
     letter-spacing: 0.04em;
@@ -248,32 +248,32 @@ function onToggle(planKey: string): void {
     min-width: 0;
 }
 .bv-compat-name {
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     font-weight: 600;
 }
 .bv-compat-key {
     font:
-        500 11px 'JetBrains Mono',
+        500 var(--sa-text-xs) 'JetBrains Mono',
         ui-monospace,
         monospace;
-    color: var(--sa-muted);
+    color: var(--sa-color-fg-muted);
 }
 .bv-compat-check {
-    color: var(--sa-primary);
+    color: var(--sa-color-accent);
     display: inline-flex;
 }
 .bv-compat-overlap {
     padding: 6px 8px;
-    background: #fff;
-    border: 1px dashed #fecaca;
+    background: var(--sa-color-bg-surface);
+    border: 1px dashed var(--sa-color-negative-border);
     border-radius: 6px;
     display: flex;
     flex-direction: column;
     gap: 4px;
-    color: #b91c1c;
+    color: var(--sa-color-negative-fg);
 }
 .bv-compat-overlap-head {
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.06em;
@@ -283,24 +283,24 @@ function onToggle(planKey: string): void {
     align-items: center;
     gap: 5px;
     flex-wrap: wrap;
-    font-size: 11.5px;
+    font-size: var(--sa-text-sm);
 }
 .bv-compat-overlap-kind {
-    color: #7f1d1d;
+    color: var(--sa-color-negative-fg);
     font-weight: 600;
 }
 .bv-compat-overlap-chip {
     padding: 1px 6px;
-    border: 1px solid #fecaca;
+    border: 1px solid var(--sa-color-negative-border);
     border-radius: 4px;
-    background: #fff;
-    color: #b91c1c;
+    background: var(--sa-color-bg-surface);
+    color: var(--sa-color-negative-fg);
 }
 .bv-compat-empty {
     padding: 12px;
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
     font-style: italic;
-    font-size: 12.5px;
+    font-size: var(--sa-text-md);
     text-align: center;
 }
 .bv-compat-summary {
@@ -308,11 +308,11 @@ function onToggle(planKey: string): void {
     align-items: flex-start;
     gap: 8px;
     padding: 10px 12px;
-    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: 12.5px;
+    color: var(--sa-color-negative-fg);
+    font-size: var(--sa-text-md);
     line-height: 1.5;
 }
 .bv-compat-summary-ico {

package/src/components/bundle-editor/BundleQuotasEditor.vue

@@ -132,20 +132,20 @@ function quotaUnit(q: DiscoveredQuota): string {
     align-items: center;
     gap: 10px;
     padding: 8px 10px;
-    background: #fff;
-    border: 1px solid var(--sa-border);
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
     border-radius: 8px;
     transition:
         background 0.12s,
         border-color 0.12s;
 }
 .bd-quota-row.on {
-    background: #f0f9ff;
-    border-color: #bae6fd;
+    background: var(--sa-color-quota-surface);
+    border-color: var(--sa-color-quota-border);
 }
 .bd-quota-row.overlap {
-    border-color: #fecaca;
-    background: #fef2f2;
+    border-color: var(--sa-color-negative-border);
+    background: var(--sa-color-negative-surface);
 }
 .bd-quota-toggle {
     display: inline-flex;
@@ -153,16 +153,16 @@ function quotaUnit(q: DiscoveredQuota): string {
     justify-content: center;
     width: 22px;
     height: 22px;
-    background: #fff;
-    border: 1px solid #cbd5e1;
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border-strong);
     border-radius: 6px;
     cursor: pointer;
-    color: var(--sa-muted-dark);
+    color: var(--sa-color-fg-secondary);
 }
 .bd-quota-row.on .bd-quota-toggle {
-    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);
 }
 .bd-quota-toggle:disabled {
     cursor: not-allowed;
@@ -174,16 +174,16 @@ function quotaUnit(q: DiscoveredQuota): string {
     min-width: 0;
 }
 .bd-quota-label {
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     font-weight: 600;
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
 }
 .bd-quota-key {
     font:
-        500 10.5px 'JetBrains Mono',
+        500 var(--sa-text-xs) 'JetBrains Mono',
         ui-monospace,
         monospace;
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
 }
 .bd-quota-valwrap {
     display: inline-flex;
@@ -193,30 +193,30 @@ function quotaUnit(q: DiscoveredQuota): string {
 .bd-quota-val {
     width: 90px;
     padding: 5px 8px;
-    border: 1px solid #cbd5e1;
+    border: 1px solid var(--sa-color-border-strong);
     border-radius: 6px;
     font:
-        600 13px 'JetBrains Mono',
+        600 var(--sa-text-md) 'JetBrains Mono',
         ui-monospace,
         monospace;
     text-align: right;
-    background: #fff;
-    color: var(--sa-heading);
+    background: var(--sa-color-bg-surface);
+    color: var(--sa-color-fg-heading);
 }
 .bd-quota-val:disabled {
-    background: var(--sa-border-soft);
-    color: var(--sa-muted-light);
+    background: var(--sa-color-border-soft);
+    color: var(--sa-color-fg-subtle);
     cursor: not-allowed;
 }
 .bd-quota-unit {
-    font-size: 11.5px;
-    color: var(--sa-muted);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-muted);
     min-width: 32px;
 }
 .bd-quotas-empty {
     padding: 12px;
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
     font-style: italic;
-    font-size: 12.5px;
+    font-size: var(--sa-text-md);
 }
 </style>

package/src/components/bundle-editor/BundleStatusBanner.vue

@@ -147,28 +147,28 @@ const supersededTail = computed(() =>
     padding: 12px 14px;
     border-radius: 8px;
     border: 1px solid transparent;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     line-height: 1.4;
 }
 .bv-status-live {
-    background: var(--sa-positive-bg);
-    border-color: #a7f3d0;
-    color: #065f46;
+    background: var(--sa-color-positive-surface);
+    border-color: var(--sa-color-positive-border);
+    color: var(--sa-color-positive-fg);
 }
 .bv-status-scheduled {
-    background: var(--sa-warning-bg);
-    border-color: #fde68a;
-    color: #92400e;
+    background: var(--sa-color-warning-surface);
+    border-color: var(--sa-color-warning-border);
+    color: var(--sa-color-warning-fg);
 }
 .bv-status-superseded {
-    background: var(--sa-border-soft);
-    border-color: #cbd5e1;
-    color: var(--sa-muted-dark);
+    background: var(--sa-color-border-soft);
+    border-color: var(--sa-color-border-strong);
+    color: var(--sa-color-fg-secondary);
 }
 .bv-status-draft {
-    background: var(--sa-primary-50);
-    border-color: #bfdbfe;
-    color: #1e40af;
+    background: var(--sa-color-accent-surface-strong);
+    border-color: var(--sa-color-info-border);
+    color: var(--sa-color-info-fg);
 }
 .bv-status-icon {
     flex: 0 0 auto;
@@ -179,11 +179,11 @@ const supersededTail = computed(() =>
     min-width: 0;
 }
 .bv-status-warn {
-    color: #b45309;
+    color: var(--sa-color-warning-fg);
     font-weight: 500;
 }
 .bv-status-ok {
-    color: #047857;
+    color: var(--sa-color-positive-fg);
     font-weight: 500;
 }
 .bv-status-discard {
@@ -191,16 +191,16 @@ const supersededTail = computed(() =>
     align-items: center;
     gap: 5px;
     padding: 6px 10px;
-    background: #fff;
-    border: 1px solid var(--sa-border);
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
     border-radius: 6px;
     cursor: pointer;
-    font-size: 12px;
-    color: #b91c1c;
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-negative-fg);
     font-family: inherit;
 }
 .bv-status-discard:hover {
-    background: #fef2f2;
-    border-color: #fecaca;
+    background: var(--sa-color-negative-surface);
+    border-color: var(--sa-color-negative-border);
 }
 </style>