@saasicat/ui-vue 0.22.2 → 0.24.0

package/src/components/dialogs/PromoCodeDialogFields.vue

@@ -265,6 +265,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { identityChipStyle } from '../../client/identity-accents.js';
 import { formatMessage } from '../../client/i18n/format.js';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { PromoCodeDurationType, PromoCodePlanOption, PromoCodeValueType } from './types.js';
@@ -376,7 +377,7 @@ function togglePlan(key: string): void {
 
 function planChipStyle(p: PromoCodePlanOption): Record<string, string> {
     if (!isPlanSelected(p.key) || !p.color) return {};
-    return { borderColor: p.color, background: `${p.color}12`, color: p.color };
+    return { ...identityChipStyle(p.color), borderColor: p.color };
 }
 
 const previewValue = computed(() => {
@@ -408,17 +409,17 @@ const advancedOpen = defineModel<boolean>('advancedOpen', { default: false });
 
 <style scoped>
 .pc-section {
-    border: 1px solid var(--sa-border, var(--sa-border));
+    border: 1px solid var(--sa-color-border);
     border-radius: 10px;
     padding: 14px 16px;
-    background: #fafbfc;
+    background: var(--sa-color-bg-surface-raised);
 }
 
 .pc-section__title {
     font-family: var(--sa-font-head, system-ui, sans-serif);
     font-weight: 700;
-    font-size: 13px;
-    color: var(--sa-heading, var(--sa-heading));
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-heading);
     margin-bottom: 12px;
     letter-spacing: -0.005em;
 }
@@ -427,8 +428,8 @@ const advancedOpen = defineModel<boolean>('advancedOpen', { default: false });
     border: 0;
     background: transparent;
     cursor: pointer;
-    font: 600 12.5px var(--sa-font-body, system-ui, sans-serif);
-    color: var(--sa-muted-dark, var(--sa-muted-dark));
+    font: 600 var(--sa-text-md) var(--sa-font-body, system-ui, sans-serif);
+    color: var(--sa-color-fg-secondary);
     display: inline-flex;
     align-items: center;
     gap: 4px;
@@ -452,7 +453,7 @@ const advancedOpen = defineModel<boolean>('advancedOpen', { default: false });
     grid-template-columns: 1fr 1fr;
 }
 
-@media (max-width: 600px) {
+@media (max-width: 599.98px) {
     .pc-grid--2 {
         grid-template-columns: 1fr;
     }
@@ -469,42 +470,42 @@ const advancedOpen = defineModel<boolean>('advancedOpen', { default: false });
 }
 
 .pc-field__label {
-    font-size: 11.5px;
+    font-size: var(--sa-text-sm);
     font-weight: 600;
-    color: var(--sa-muted, var(--sa-muted));
+    color: var(--sa-color-fg-muted);
     text-transform: uppercase;
     letter-spacing: 0.04em;
 }
 
 .pc-field__hint {
-    font-size: 11.5px;
-    color: var(--sa-muted-light);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-subtle);
 }
 
 .pc-input {
     width: 100%;
-    border: 1px solid var(--sa-border, var(--sa-border));
-    background: #fff;
+    border: 1px solid var(--sa-color-border);
+    background: var(--sa-color-bg-surface);
     border-radius: 7px;
     padding: 8px 10px;
-    font: 13.5px var(--sa-font-body, system-ui, sans-serif);
-    color: var(--sa-body, #1e293b);
+    font: var(--sa-text-md) var(--sa-font-body, system-ui, sans-serif);
+    color: var(--sa-color-fg-body);
     outline: 0;
 }
 
 .pc-input:focus {
-    border-color: var(--sa-primary, #3f6bff);
-    box-shadow: 0 0 0 3px rgba(63, 107, 255, 0.12);
+    border-color: var(--sa-color-accent);
+    box-shadow: 0 0 0 3px var(--sa-shadow-tint-3);
 }
 
 .pc-input--code {
-    font: 600 14px var(--sa-font-mono, ui-monospace, monospace);
+    font: 600 var(--sa-text-lg) var(--sa-font-mono, ui-monospace, monospace);
     letter-spacing: 0.04em;
     text-transform: uppercase;
 }
 
 textarea.pc-input {
-    font: 13.5px var(--sa-font-body, system-ui, sans-serif);
+    font: var(--sa-text-md) var(--sa-font-body, system-ui, sans-serif);
     resize: vertical;
 }
 
@@ -515,17 +516,17 @@ textarea.pc-input {
 }
 
 .pc-btn-mini {
-    border: 1px solid var(--sa-border, var(--sa-border));
-    background: #fff;
+    border: 1px solid var(--sa-color-border);
+    background: var(--sa-color-bg-surface);
     border-radius: 7px;
     padding: 6px 10px;
-    font: 500 12px var(--sa-font-body, system-ui, sans-serif);
+    font: 500 var(--sa-text-sm) var(--sa-font-body, system-ui, sans-serif);
     cursor: pointer;
-    color: var(--sa-muted-dark, var(--sa-muted-dark));
+    color: var(--sa-color-fg-secondary);
 }
 
 .pc-btn-mini:hover {
-    background: var(--sa-border-soft);
+    background: var(--sa-color-border-soft);
 }
 
 .pc-type-grid {
@@ -535,8 +536,8 @@ textarea.pc-input {
 }
 
 .pc-type-opt {
-    border: 1px solid var(--sa-border, var(--sa-border));
-    background: #fff;
+    border: 1px solid var(--sa-color-border);
+    background: var(--sa-color-bg-surface);
     border-radius: 8px;
     padding: 8px 10px;
     text-align: left;
@@ -547,22 +548,22 @@ textarea.pc-input {
 }
 
 .pc-type-opt:hover {
-    border-color: #cbd5e1;
+    border-color: var(--sa-color-border-strong);
 }
 
 .pc-type-opt--active {
-    border-color: var(--sa-primary, #3f6bff);
-    background: var(--sa-primary-soft, rgba(63, 107, 255, 0.08));
+    border-color: var(--sa-color-accent);
+    background: var(--sa-color-accent-surface);
 }
 
 .pc-type-opt__label {
-    font: 600 12.5px var(--sa-font-body, system-ui, sans-serif);
-    color: var(--sa-heading, var(--sa-heading));
+    font: 600 var(--sa-text-md) var(--sa-font-body, system-ui, sans-serif);
+    color: var(--sa-color-fg-heading);
 }
 
 .pc-type-opt__sub {
-    font: 11.5px var(--sa-font-mono, ui-monospace, monospace);
-    color: var(--sa-muted, var(--sa-muted));
+    font: var(--sa-text-sm) var(--sa-font-mono, ui-monospace, monospace);
+    color: var(--sa-color-fg-muted);
     margin-top: 1px;
 }
 
@@ -576,26 +577,26 @@ textarea.pc-input {
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    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: 999px;
     padding: 5px 12px 5px 8px;
-    font: 600 12px var(--sa-font-body, system-ui, sans-serif);
+    font: 600 var(--sa-text-sm) var(--sa-font-body, system-ui, sans-serif);
     cursor: pointer;
-    color: var(--sa-muted-dark, var(--sa-muted-dark));
+    color: var(--sa-color-fg-secondary);
     transition:
         border-color 0.1s,
         background 0.1s;
 }
 
 .pc-plan-opt:hover {
-    border-color: #cbd5e1;
+    border-color: var(--sa-color-border-strong);
 }
 
 .pc-plan-opt--on {
-    border-color: var(--sa-primary, #3f6bff);
-    background: var(--sa-primary-soft, rgba(63, 107, 255, 0.08));
-    color: var(--sa-primary, #3f6bff);
+    border-color: var(--sa-color-accent);
+    background: var(--sa-color-accent-surface);
+    color: var(--sa-color-accent);
 }
 
 .pc-plan-opt__mark {
@@ -611,41 +612,41 @@ textarea.pc-input {
 
 .pc-dur-opt {
     flex: 1;
-    border: 1px solid var(--sa-border, var(--sa-border));
-    background: #fff;
+    border: 1px solid var(--sa-color-border);
+    background: var(--sa-color-bg-surface);
     border-radius: 7px;
     padding: 6px 10px;
-    font: 500 12px var(--sa-font-body, system-ui, sans-serif);
+    font: 500 var(--sa-text-sm) var(--sa-font-body, system-ui, sans-serif);
     cursor: pointer;
-    color: var(--sa-muted-dark, var(--sa-muted-dark));
+    color: var(--sa-color-fg-secondary);
 }
 
 .pc-dur-opt--active {
-    border-color: var(--sa-primary, #3f6bff);
-    background: var(--sa-primary-soft, rgba(63, 107, 255, 0.08));
-    color: var(--sa-primary, #3f6bff);
+    border-color: var(--sa-color-accent);
+    background: var(--sa-color-accent-surface);
+    color: var(--sa-color-accent);
 }
 
 .pc-check {
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    font: 13px var(--sa-font-body, system-ui, sans-serif);
-    color: var(--sa-body, #1e293b);
+    font: var(--sa-text-md) var(--sa-font-body, system-ui, sans-serif);
+    color: var(--sa-color-fg-body);
     cursor: pointer;
 }
 
 .pc-preview {
-    background: var(--sa-primary-soft, rgba(63, 107, 255, 0.06));
-    border: 1px solid var(--sa-primary-border, rgba(63, 107, 255, 0.18));
+    background: var(--sa-color-accent-surface-soft);
+    border: 1px solid var(--sa-color-accent-border);
     border-radius: 10px;
     padding: 12px 14px;
 }
 
 .pc-preview__eyebrow {
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
     font-weight: 700;
-    color: var(--sa-primary, #3f6bff);
+    color: var(--sa-color-accent);
     text-transform: uppercase;
     letter-spacing: 0.06em;
     margin-bottom: 6px;
@@ -659,22 +660,22 @@ textarea.pc-input {
 }
 
 .pc-preview__code {
-    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: 3px 8px;
-    font: 600 13px var(--sa-font-mono, ui-monospace, monospace);
+    font: 600 var(--sa-text-md) var(--sa-font-mono, ui-monospace, monospace);
     letter-spacing: 0.04em;
-    color: var(--sa-heading, var(--sa-heading));
+    color: var(--sa-color-fg-heading);
 }
 
 .pc-preview__disc {
-    font: 700 13px var(--sa-font-body, system-ui, sans-serif);
-    color: var(--sa-positive, #047857);
+    font: 700 var(--sa-text-md) var(--sa-font-body, system-ui, sans-serif);
+    color: var(--sa-color-positive-fg);
 }
 
 .pc-preview__meta {
-    font-size: 12px;
-    color: var(--sa-muted, var(--sa-muted));
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-muted);
 }
 </style>

package/src/components/dialogs/PromoCodeEditDialog.vue

@@ -303,13 +303,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;
 }
 
@@ -321,14 +321,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;
@@ -336,8 +336,8 @@ async function onSubmit() {
 
 /* The code cannot be changed after creation. */
 .pc-input:disabled {
-    background: var(--sa-bg-surface-2);
-    color: var(--sa-muted);
+    background: var(--sa-color-bg-sunken);
+    color: var(--sa-color-fg-muted);
     cursor: not-allowed;
 }
 </style>

package/src/components/dialogs/pilot-dialog.css

@@ -13,14 +13,14 @@
     align-items: flex-start;
     gap: 16px;
     padding: 18px 22px 14px;
-    border-bottom: 1px solid var(--sa-border, #e2e8f0);
+    border-bottom: 1px solid var(--sa-color-border);
 }
 
 .pl-dlg__title {
     font-family: var(--sa-font-head, system-ui, sans-serif);
     font-weight: 700;
-    font-size: 17px;
-    color: var(--sa-heading, #0f172a);
+    font-size: var(--sa-text-xl);
+    color: var(--sa-color-fg-heading);
     letter-spacing: -0.015em;
 }
 
@@ -29,8 +29,8 @@
 }
 
 .pl-dlg__foot {
-    border-top: 1px solid var(--sa-border, #e2e8f0);
-    background: #fbfbfd;
+    border-top: 1px solid var(--sa-color-border);
+    background: var(--sa-color-bg-surface-raised);
     padding: 12px 18px;
 }
 
@@ -44,42 +44,42 @@
     gap: 12px;
     margin-bottom: 12px;
     padding-bottom: 10px;
-    border-bottom: 1px solid #f1f5f9;
+    border-bottom: 1px solid var(--sa-color-border-soft);
 }
 
 .pl-section__num {
     width: 24px;
     height: 24px;
-    background: #eff6ff;
-    color: #1d4ed8;
+    background: var(--sa-color-info-surface);
+    color: var(--sa-color-info-fg);
     border-radius: 50%;
-    font: 700 12px var(--sa-font-body, system-ui, sans-serif);
+    font: 700 var(--sa-text-sm) var(--sa-font-body, system-ui, sans-serif);
     display: grid;
     place-items: center;
     flex: 0 0 auto;
 }
 
 .pl-section__title {
-    font-size: 13.5px;
+    font-size: var(--sa-text-md);
     font-weight: 700;
-    color: var(--sa-heading, #0f172a);
+    color: var(--sa-color-fg-heading);
     letter-spacing: -0.005em;
 }
 
 .pl-section__sub {
-    font-size: 11.5px;
-    color: #94a3b8;
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-subtle);
     margin-top: 2px;
 }
 
 .pl-input {
     width: 100%;
     padding: 9px 12px;
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
     border-radius: 8px;
-    font: 13px var(--sa-font-body, system-ui, sans-serif);
-    color: var(--sa-body, #1e293b);
+    font: var(--sa-text-md) var(--sa-font-body, system-ui, sans-serif);
+    color: var(--sa-color-fg-body);
     outline: 0;
     transition:
         border-color 0.12s,
@@ -87,8 +87,8 @@
 }
 
 .pl-input:focus {
-    border-color: var(--sa-primary, #3f6bff);
-    box-shadow: 0 0 0 3px rgba(63, 107, 255, 0.12);
+    border-color: var(--sa-color-accent);
+    box-shadow: 0 0 0 3px var(--sa-shadow-tint-3);
 }
 
 .pl-plan-select {
@@ -102,8 +102,8 @@
     align-items: center;
     gap: 10px;
     padding: 8px 11px;
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
     border-radius: 8px;
     cursor: pointer;
     text-align: left;
@@ -114,14 +114,14 @@
 }
 
 .pl-plan-opt:hover {
-    border-color: #93c5fd;
-    background: #fafbff;
+    border-color: var(--sa-color-info-border);
+    background: var(--sa-color-accent-surface-soft);
 }
 
 .pl-plan-opt--active {
-    border-color: var(--sa-primary, #2563eb);
-    background: #eff6ff;
-    box-shadow: 0 0 0 1px var(--sa-primary, #2563eb) inset;
+    border-color: var(--sa-color-info);
+    background: var(--sa-color-info-surface);
+    box-shadow: 0 0 0 1px var(--sa-color-info) inset;
 }
 
 .pl-plan-opt__dot {
@@ -139,19 +139,19 @@
 }
 
 .pl-plan-opt__key {
-    font: 700 11px var(--sa-font-mono, ui-monospace, monospace);
+    font: 700 var(--sa-text-xs) var(--sa-font-mono, ui-monospace, monospace);
     letter-spacing: 0.05em;
-    color: var(--sa-heading, #0f172a);
+    color: var(--sa-color-fg-heading);
 }
 
 .pl-plan-opt__label {
-    font-size: 11px;
-    color: var(--sa-muted, #64748b);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-muted);
     margin-top: 1px;
 }
 
 .pl-plan-opt__check {
-    color: #1d4ed8;
+    color: var(--sa-color-info-fg);
 }
 
 .pl-end-row {
@@ -169,18 +169,18 @@
     align-items: center;
     gap: 4px;
     padding: 7px 10px;
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
     border-radius: 7px;
-    color: var(--sa-muted-dark, #475569);
-    font: 500 11.5px var(--sa-font-body, system-ui, sans-serif);
+    color: var(--sa-color-fg-secondary);
+    font: 500 var(--sa-text-sm) var(--sa-font-body, system-ui, sans-serif);
     cursor: pointer;
     white-space: nowrap;
 }
 
 .pl-btn-mini:hover {
-    background: #f8fafc;
-    border-color: #cbd5e1;
+    background: var(--sa-color-bg-sunken);
+    border-color: var(--sa-color-border-strong);
 }
 
 .pl-end-presets {
@@ -192,11 +192,11 @@
 
 .pl-preset-btn {
     padding: 4px 9px;
-    background: #fff;
-    border: 1px dashed #cbd5e1;
+    background: var(--sa-color-bg-surface);
+    border: 1px dashed var(--sa-color-border-strong);
     border-radius: 999px;
-    font: 600 11px var(--sa-font-body, system-ui, sans-serif);
-    color: var(--sa-muted-dark, #475569);
+    font: 600 var(--sa-text-xs) var(--sa-font-body, system-ui, sans-serif);
+    color: var(--sa-color-fg-secondary);
     cursor: pointer;
     transition:
         background 0.12s,
@@ -205,17 +205,17 @@
 }
 
 .pl-preset-btn:hover {
-    background: #eff6ff;
-    border-color: #93c5fd;
+    background: var(--sa-color-info-surface);
+    border-color: var(--sa-color-info-border);
     border-style: solid;
-    color: #1d4ed8;
+    color: var(--sa-color-info-fg);
 }
 
 .pl-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: 12px 0 0;
     padding: 8px 12px;
     border-radius: 8px;

package/src/components/plan/PlanCycleToggle.vue

@@ -61,28 +61,21 @@ const labels = computed(() => ({
 <style scoped>
 .sp-cycle {
     display: inline-flex;
-    /* CSS-Vars: dark-mode-overrides unten via :global(.body--dark) */
-    --sp-cycle-bg: rgba(15, 118, 110, 0.06);
-    --sp-cycle-btn-fg: rgba(0, 0, 0, 0.55);
-    --sp-cycle-btn-active-bg: #fff;
-    --sp-cycle-btn-active-fg: var(--q-primary, #0f766e);
+    --sp-cycle-bg: var(--sa-color-accent-surface-soft);
+    --sp-cycle-btn-fg: var(--sa-color-fg-muted);
+    --sp-cycle-btn-active-bg: var(--sa-color-bg-surface);
+    --sp-cycle-btn-active-fg: var(--sa-color-accent);
     background: var(--sp-cycle-bg);
     border-radius: 12px;
     padding: 3px;
     gap: 2px;
 }
-:global(.body--dark) .sp-cycle {
-    --sp-cycle-bg: rgba(255, 255, 255, 0.08);
-    --sp-cycle-btn-fg: rgba(255, 255, 255, 0.7);
-    --sp-cycle-btn-active-bg: rgba(255, 255, 255, 0.92);
-    --sp-cycle-btn-active-fg: var(--q-primary, #0f766e);
-}
 .sp-cycle__btn {
     padding: 8px 14px;
     border: none;
     background: none;
     font-family: inherit;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     font-weight: 700;
     color: var(--sp-cycle-btn-fg);
     cursor: pointer;
@@ -96,12 +89,12 @@ const labels = computed(() => ({
 .sp-cycle__btn--active {
     background: var(--sp-cycle-btn-active-bg);
     color: var(--sp-cycle-btn-active-fg);
-    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.12);
+    box-shadow: 0 2px 8px var(--sa-shadow-tint-3);
 }
 .sp-cycle__pill {
-    background: rgba(22, 163, 74, 0.16);
-    color: #166534;
-    font-size: 10px;
+    background: var(--sa-color-positive-surface-strong);
+    color: var(--sa-color-positive-fg);
+    font-size: var(--sa-text-2xs);
     padding: 2px 7px;
     border-radius: 999px;
     font-family: 'SF Mono', Consolas, monospace;