@saasicat/ui-vue 0.22.2 → 0.24.0

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

@@ -491,11 +491,11 @@ function recordsEqual(a: Record<string, number>, b: Record<string, number>): boo
     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;
 }
 .bve-overlap-ico {
@@ -506,7 +506,7 @@ function recordsEqual(a: Record<string, number>, b: Record<string, number>): boo
     grid-template-columns: 1fr 1fr;
     gap: 18px;
 }
-@media (max-width: 1100px) {
+@media (max-width: 1023.98px) {
     .bve-grid {
         grid-template-columns: 1fr;
     }
@@ -521,20 +521,20 @@ function recordsEqual(a: Record<string, number>, b: Record<string, number>): boo
     align-items: baseline;
     justify-content: space-between;
     gap: 12px;
-    font-size: 11.5px;
+    font-size: var(--sa-text-sm);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.08em;
-    color: var(--sa-muted-dark);
+    color: var(--sa-color-fg-secondary);
     padding-top: 2px;
 }
 .bve-section-label--top {
     margin-top: 8px;
 }
 .bve-section-count {
-    font-size: 10.5px;
+    font-size: var(--sa-text-xs);
     font-weight: 600;
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
     text-transform: none;
     letter-spacing: 0;
 }
@@ -555,20 +555,20 @@ function recordsEqual(a: Record<string, number>, b: Record<string, number>): boo
     gap: 4px;
 }
 .bve-field-label {
-    font-size: 11px;
-    color: var(--sa-muted-dark);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-secondary);
     font-weight: 600;
 }
 .bve-field-hint {
-    font-size: 10.5px;
-    color: var(--sa-muted-light);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-subtle);
 }
 .bve-input-grp {
     display: inline-flex;
     align-items: stretch;
-    border: 1px solid #cbd5e1;
+    border: 1px solid var(--sa-color-border-strong);
     border-radius: 6px;
-    background: #fff;
+    background: var(--sa-color-bg-surface);
 }
 .bve-input-grp .bve-input {
     border: 0;
@@ -578,28 +578,28 @@ function recordsEqual(a: Record<string, number>, b: Record<string, number>): boo
     display: inline-flex;
     align-items: center;
     padding: 0 8px;
-    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;
 }
 .bve-input {
     padding: 6px 10px;
-    border: 1px solid #cbd5e1;
+    border: 1px solid var(--sa-color-border-strong);
     border-radius: 6px;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     font-family: inherit;
-    color: var(--sa-heading);
-    background: #fff;
+    color: var(--sa-color-fg-heading);
+    background: var(--sa-color-bg-surface);
 }
 .bve-input--readonly {
-    color: var(--sa-muted-light);
-    background: var(--sa-bg-surface-2);
+    color: var(--sa-color-fg-subtle);
+    background: var(--sa-color-bg-sunken);
 }
 .bve-savings {
-    font-size: 11.5px;
-    color: var(--sa-muted-dark);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-secondary);
     display: inline-flex;
     align-items: center;
     gap: 8px;
@@ -607,11 +607,11 @@ function recordsEqual(a: Record<string, number>, b: Record<string, number>): boo
 }
 .bve-savings-pill {
     padding: 1px 6px;
-    background: #d1fae5;
-    color: #065f46;
+    background: var(--sa-color-positive-surface-strong);
+    color: var(--sa-color-positive-fg);
     border-radius: 4px;
     font-weight: 700;
-    font-size: 10.5px;
+    font-size: var(--sa-text-xs);
     letter-spacing: 0.04em;
 }
 .bve-toggle-row {
@@ -619,19 +619,19 @@ function recordsEqual(a: Record<string, number>, b: Record<string, number>): boo
     align-items: center;
     gap: 8px;
     cursor: pointer;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .bve-toggle-label {
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
 }
 .bve-textarea {
     padding: 8px 10px;
-    border: 1px solid #cbd5e1;
+    border: 1px solid var(--sa-color-border-strong);
     border-radius: 6px;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     font-family: inherit;
-    color: var(--sa-heading);
-    background: #fff;
+    color: var(--sa-color-fg-heading);
+    background: var(--sa-color-bg-surface);
     resize: vertical;
 }
 .bve-actions {
@@ -641,35 +641,35 @@ function recordsEqual(a: Record<string, number>, b: Record<string, number>): boo
 }
 .bve-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);
 }
 .bve-btn:hover:not(:disabled) {
-    background: var(--sa-bg-surface-2);
+    background: var(--sa-color-bg-sunken);
 }
 .bve-btn:disabled {
     cursor: not-allowed;
     opacity: 0.5;
 }
 .bve-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);
 }
 .bve-btn--primary:hover:not(:disabled) {
-    background: var(--sa-primary-strong);
+    background: var(--sa-color-accent-strong);
 }
 .bve-error {
     padding: 8px 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);
 }
 </style>

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

@@ -109,16 +109,16 @@ function statusMetaOf(v: BundleVersionRow): BundleStatusMeta {
     flex-direction: column;
     gap: 8px;
     padding: 14px 16px;
-    background: #fbfbfd;
-    border: 1px solid var(--bv-border, var(--sa-border));
+    background: var(--sa-color-bg-surface-raised);
+    border: 1px solid var(--bv-border, var(--sa-color-border));
     border-radius: 10px;
 }
 .bv-vstrip-label {
-    font-size: 10.5px;
+    font-size: var(--sa-text-xs);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.1em;
-    color: var(--sa-muted);
+    color: var(--sa-color-fg-muted);
 }
 .bv-vstrip-tabs {
     display: flex;
@@ -134,12 +134,12 @@ function statusMetaOf(v: BundleVersionRow): BundleStatusMeta {
     row-gap: 2px;
     align-items: center;
     padding: 8px 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;
     font-family: inherit;
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
     text-align: left;
     transition:
         border-color 0.12s,
@@ -147,21 +147,21 @@ function statusMetaOf(v: BundleVersionRow): BundleStatusMeta {
         background 0.12s;
 }
 .bv-vtab:hover {
-    background: var(--sa-bg-surface-2);
+    background: var(--sa-color-bg-sunken);
 }
 .bv-vtab-current {
-    border-color: var(--sa-primary);
-    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
+    border-color: var(--sa-color-accent);
+    box-shadow: 0 0 0 2px var(--sa-shadow-tint-3);
 }
 .bv-vtab-name {
     font:
-        700 13px 'JetBrains Mono',
+        700 var(--sa-text-md) 'JetBrains Mono',
         ui-monospace,
         monospace;
     letter-spacing: 0.02em;
 }
 .bv-vtab-status {
-    font-size: 10.5px;
+    font-size: var(--sa-text-xs);
     font-weight: 700;
     letter-spacing: 0.04em;
     text-transform: uppercase;
@@ -170,30 +170,30 @@ function statusMetaOf(v: BundleVersionRow): BundleStatusMeta {
     justify-self: end;
 }
 .bv-vtab-status.live {
-    background: #d1fae5;
-    color: #065f46;
+    background: var(--sa-color-positive-surface-strong);
+    color: var(--sa-color-positive-fg);
 }
 .bv-vtab-status.scheduled {
-    background: #fef3c7;
-    color: #92400e;
+    background: var(--sa-color-warning-surface-strong);
+    color: var(--sa-color-warning-fg);
 }
 .bv-vtab-status.superseded {
-    background: var(--sa-border);
-    color: var(--sa-muted-dark);
+    background: var(--sa-color-border);
+    color: var(--sa-color-fg-secondary);
 }
 .bv-vtab-status.draft {
-    background: #dbeafe;
-    color: #1e40af;
+    background: var(--sa-color-info-surface-strong);
+    color: var(--sa-color-info-fg);
 }
 .bv-vtab-dates {
     grid-column: 1 / -1;
-    font-size: 11px;
-    color: var(--sa-muted);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-muted);
 }
 .bv-vtab-price {
     grid-column: 1 / -1;
-    font-size: 11.5px;
-    color: var(--sa-muted-dark);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-secondary);
     font-weight: 600;
 }
 
@@ -202,15 +202,15 @@ function statusMetaOf(v: BundleVersionRow): BundleStatusMeta {
     align-items: center;
     gap: 6px;
     padding: 8px 12px;
-    background: #fff;
-    border: 1px dashed #cbd5e1;
-    color: var(--sa-primary);
-    font-size: 12.5px;
+    background: var(--sa-color-bg-surface);
+    border: 1px dashed var(--sa-color-border-strong);
+    color: var(--sa-color-accent);
+    font-size: var(--sa-text-md);
     font-weight: 600;
 }
 .bv-vtab-new:hover:not(:disabled) {
-    background: var(--sa-primary-50);
-    border-color: #93c5fd;
+    background: var(--sa-color-accent-surface-strong);
+    border-color: var(--sa-color-info-border);
 }
 .bv-vtab-new:disabled {
     opacity: 0.45;

package/src/components/dialogs/PilotCreateDialog.vue

@@ -490,8 +490,8 @@ async function doSubmit(code: string): Promise<void> {
 }
 
 .pl-dlg__sub {
-    font-size: 12.5px;
-    color: var(--sa-muted, var(--sa-muted));
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-muted);
     margin-top: 3px;
     line-height: 1.4;
 }
@@ -507,10 +507,10 @@ async function doSubmit(code: string): Promise<void> {
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    font-size: 12px;
-    color: var(--sa-muted-dark, var(--sa-muted-dark));
-    background: var(--sa-primary-50);
-    border: 1px solid #bfdbfe;
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-secondary);
+    background: var(--sa-color-accent-surface-strong);
+    border: 1px solid var(--sa-color-info-border);
     border-radius: 999px;
     padding: 4px 12px;
 }
@@ -536,10 +536,10 @@ async function doSubmit(code: string): Promise<void> {
 }
 
 .pl-field label {
-    font: 600 11px var(--sa-font-body, system-ui, sans-serif);
+    font: 600 var(--sa-text-xs) var(--sa-font-body, system-ui, sans-serif);
     letter-spacing: 0.04em;
     text-transform: uppercase;
-    color: var(--sa-muted, var(--sa-muted));
+    color: var(--sa-color-fg-muted);
     display: flex;
     align-items: baseline;
     gap: 6px;
@@ -549,21 +549,21 @@ async function doSubmit(code: string): Promise<void> {
     font-weight: 500;
     text-transform: none;
     letter-spacing: 0;
-    color: var(--sa-muted-light);
-    font-size: 11px;
+    color: var(--sa-color-fg-subtle);
+    font-size: var(--sa-text-xs);
 }
 
 .pl-field__error {
-    font-size: 11.5px;
-    color: #b91c1c;
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-negative-fg);
 }
 
 .pl-input--invalid {
-    border-color: #fca5a5;
+    border-color: var(--sa-color-negative-border);
 }
 
 .pl-input::placeholder {
-    color: #cbd5e1;
+    color: var(--sa-color-fg-disabled);
 }
 
 .pl-textarea {
@@ -575,18 +575,18 @@ async function doSubmit(code: string): Promise<void> {
 .pl-slug-input {
     display: flex;
     align-items: stretch;
-    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: 8px;
     overflow: hidden;
 }
 
 .pl-slug-input__prefix {
     padding: 9px 12px;
-    background: var(--sa-bg-surface-2);
-    color: var(--sa-muted-light);
-    font: 500 12px var(--sa-font-mono, ui-monospace, monospace);
-    border-right: 1px solid var(--sa-border, var(--sa-border));
+    background: var(--sa-color-bg-sunken);
+    color: var(--sa-color-fg-subtle);
+    font: 500 var(--sa-text-sm) var(--sa-font-mono, ui-monospace, monospace);
+    border-right: 1px solid var(--sa-color-border);
     white-space: nowrap;
 }
 

package/src/components/dialogs/PilotEditDialog.vue

@@ -338,23 +338,23 @@ async function doSubmit(code: string): Promise<void> {
 }
 
 .pl-dlg__sub {
-    font-size: 12.5px;
-    color: var(--sa-muted, var(--sa-muted));
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-muted);
     margin-top: 3px;
 }
 
 .pl-dlg__sep {
-    color: #cbd5e1;
+    color: var(--sa-color-fg-disabled);
     margin: 0 6px;
 }
 
 .pl-dlg__sub code {
     font-family: var(--sa-font-mono, ui-monospace, monospace);
-    background: var(--sa-border-soft);
-    color: var(--sa-muted-dark, var(--sa-muted-dark));
+    background: var(--sa-color-border-soft);
+    color: var(--sa-color-fg-secondary);
     padding: 1px 6px;
     border-radius: 4px;
-    font-size: 11.5px;
+    font-size: var(--sa-text-sm);
 }
 
 .pl-dlg__body {

package/src/components/dialogs/PromoCodeCreateDialog.vue

@@ -189,13 +189,13 @@ async function onSubmit() {
 .pc-dlg__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);
 }
 
 .pc-dlg__sub {
-    font-size: 12.5px;
-    color: var(--sa-muted, var(--sa-muted));
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-muted);
     margin-top: 2px;
 }
 
@@ -207,14 +207,14 @@ async function onSubmit() {
 }
 
 .pc-dlg__foot {
-    border-top: 1px solid var(--sa-border, var(--sa-border));
+    border-top: 1px solid var(--sa-color-border);
 }
 
 .pc-error {
-    background: #fef2f2;
-    border: 1px solid #fecaca;
-    color: #b91c1c;
-    font-size: 13px;
+    background: var(--sa-color-negative-surface);
+    border: 1px solid var(--sa-color-negative-border);
+    color: var(--sa-color-negative-fg);
+    font-size: var(--sa-text-md);
     margin: 8px 0 0;
     padding: 8px 12px;
     border-radius: 8px;