@saasicat/ui-vue 0.22.2 → 0.24.0

package/src/components/wizard-stepper/WizardStepper.vue

@@ -55,8 +55,8 @@ defineProps<{
     align-items: center;
     gap: 6px;
     padding: 14px 26px;
-    background: var(--sa-bg-surface);
-    border-bottom: 1px solid var(--sa-border);
+    background: var(--sa-color-bg-surface);
+    border-bottom: 1px solid var(--sa-color-border);
 }
 .wz-step {
     display: flex;
@@ -64,44 +64,44 @@ defineProps<{
     gap: 8px;
     padding: 6px 12px;
     border-radius: 999px;
-    font: 500 12.5px var(--sa-font-body);
-    color: var(--sa-muted);
+    font: 500 var(--sa-text-md) var(--sa-font-body);
+    color: var(--sa-color-fg-muted);
 }
 .wz-step--current {
-    background: var(--sa-heading);
-    color: #fff;
+    background: var(--sa-color-inverse-bg);
+    color: var(--sa-color-fg-on-accent);
 }
 .wz-step--done {
-    color: var(--sa-positive);
+    color: var(--sa-color-positive);
 }
 .wz-step-num {
     width: 20px;
     height: 20px;
     border-radius: 50%;
-    background: var(--sa-border);
-    color: var(--sa-muted-dark);
+    background: var(--sa-color-border);
+    color: var(--sa-color-fg-secondary);
     display: grid;
     place-items: center;
-    font: 700 11px var(--sa-font-body);
+    font: 700 var(--sa-text-xs) var(--sa-font-body);
     flex: 0 0 auto;
 }
 .wz-step--current .wz-step-num {
-    background: rgba(255, 255, 255, 0.18);
-    color: #fff;
+    background: var(--sa-color-inverse-border-strong);
+    color: var(--sa-color-fg-on-accent);
 }
 .wz-step--done .wz-step-num {
-    background: var(--sa-positive-soft);
-    color: var(--sa-positive);
+    background: var(--sa-color-positive-surface);
+    color: var(--sa-color-positive);
 }
 .wz-step-sep {
     width: 14px;
     height: 1px;
-    background: var(--sa-border);
+    background: var(--sa-color-border);
     margin: 0 2px;
 }
 .wz-stepper-hint {
     margin-left: auto;
-    font-size: 11px;
-    color: var(--sa-muted);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-muted);
 }
 </style>

package/src/index.ts

@@ -33,6 +33,7 @@ export * from './vue/super-admin-context.js';
 export * from './vue/ui-notify.js';
 export * from './vue/use-super-admin-context.js';
 export * from './vue/use-super-admin-i18n.js';
+export * from './vue/use-sa-theme.js';
 
 // ---------------------------------------------------------------------------
 // Vue layer: composables, guards, hosts, store factory.

package/src/pages-standard/AdminLayout.vue

@@ -309,31 +309,42 @@ const currentPageTitle = computed(() => {
     justify-content: center;
     gap: 8px;
     padding: 6px 12px;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     letter-spacing: 0.05em;
     text-transform: uppercase;
 }
 .sa-admin-banner--prod {
-    background: linear-gradient(90deg, #b91c1c, #dc2626);
-    color: #fff;
+    /* Invariant on purpose: this strip says "you are on production", and its
+     * white text has to stay readable in both themes. The `negative` roles
+     * lighten in dark — for text ON dark surfaces — and would take this one to
+     * 1.9:1. */
+    background: linear-gradient(
+        90deg,
+        var(--sa-color-inverse-danger),
+        var(--sa-color-inverse-danger-strong)
+    );
+    color: var(--sa-color-inverse-fg);
 }
 
 .sa-admin-header {
-    background: var(--sa-admin-header-bg, linear-gradient(90deg, var(--sa-heading), #1e293b));
-    color: var(--sa-admin-header-fg, #fff);
+    background: var(
+        --sa-admin-header-bg,
+        linear-gradient(90deg, var(--sa-color-inverse-bg), var(--sa-color-inverse-surface))
+    );
+    color: var(--sa-admin-header-fg, var(--sa-color-inverse-fg));
 }
 .sa-admin-header__sub {
-    font-size: 11px;
-    color: var(--sa-admin-header-sub, #fbbf24);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-admin-header-sub, var(--sa-color-inverse-accent));
     font-weight: 400;
 }
 
 .sa-admin-badge {
-    background: var(--sa-admin-badge-bg, #f59e0b);
-    color: var(--sa-admin-badge-fg, var(--sa-heading));
+    background: var(--sa-admin-badge-bg, var(--sa-color-inverse-accent));
+    color: var(--sa-admin-badge-fg, var(--sa-color-inverse-accent-fg));
     font-weight: 800;
     letter-spacing: 0.08em;
-    font-size: 10px;
+    font-size: var(--sa-text-2xs);
     padding: 4px 8px;
 }
 
@@ -343,21 +354,21 @@ const currentPageTitle = computed(() => {
     gap: 8px;
 }
 .sa-admin-user__avatar {
-    background: var(--sa-admin-user-avatar-bg, #f59e0b);
-    color: var(--sa-admin-user-avatar-fg, #fff);
+    background: var(--sa-admin-user-avatar-bg, var(--sa-color-inverse-accent));
+    color: var(--sa-admin-user-avatar-fg, var(--sa-color-inverse-accent-fg));
 }
 .sa-admin-user__name {
     line-height: 1.05;
 }
 .sa-admin-user__email {
-    color: var(--sa-admin-user-email, #fbbf24);
+    color: var(--sa-admin-user-email, var(--sa-color-inverse-accent));
 }
 
 .sa-admin-drawer :deep(.q-drawer),
 .sa-admin-drawer :deep(.q-drawer__content),
 .sa-admin-drawer__stack {
-    background: var(--sa-admin-drawer-bg, #0b1220);
-    color: var(--sa-admin-drawer-fg, var(--sa-border-soft));
+    background: var(--sa-admin-drawer-bg, var(--sa-color-inverse-bg));
+    color: var(--sa-admin-drawer-fg, var(--sa-color-inverse-fg-muted));
 }
 .sa-admin-drawer__stack {
     display: flex;
@@ -370,14 +381,21 @@ const currentPageTitle = computed(() => {
     align-items: center;
     gap: 12px;
     padding: 18px 16px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 1px solid var(--sa-color-inverse-border);
 }
 .sa-admin-drawer__logo {
     width: 36px;
     height: 36px;
     border-radius: 10px;
-    background: var(--sa-admin-drawer-logo-bg, linear-gradient(135deg, #f59e0b, #d97706));
-    color: var(--sa-admin-drawer-logo-fg, var(--sa-heading));
+    background: var(
+        --sa-admin-drawer-logo-bg,
+        linear-gradient(
+            135deg,
+            var(--sa-color-inverse-accent),
+            var(--sa-color-inverse-accent-strong)
+        )
+    );
+    color: var(--sa-admin-drawer-logo-fg, var(--sa-color-inverse-accent-fg));
     font-weight: 800;
     display: flex;
     align-items: center;
@@ -385,11 +403,11 @@ const currentPageTitle = computed(() => {
 }
 .sa-admin-drawer__brand-name {
     font-weight: 800;
-    color: #fff;
+    color: var(--sa-color-inverse-fg);
 }
 .sa-admin-drawer__brand-tag {
-    font-size: 11px;
-    color: var(--sa-admin-drawer-brand-tag, #fbbf24);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-admin-drawer-brand-tag, var(--sa-color-inverse-accent));
     text-transform: uppercase;
     letter-spacing: 0.08em;
 }
@@ -399,20 +417,20 @@ const currentPageTitle = computed(() => {
     padding: 6px 4px;
 }
 .sa-admin-drawer__section {
-    font-size: 10px;
+    font-size: var(--sa-text-2xs);
     text-transform: uppercase;
     letter-spacing: 0.12em;
-    color: var(--sa-admin-drawer-section-fg, var(--sa-muted));
+    color: var(--sa-admin-drawer-section-fg, var(--sa-color-inverse-fg-muted));
     padding: 14px 18px 6px;
     font-weight: 600;
 }
 .sa-admin-drawer__list :deep(.q-item) {
-    color: var(--sa-admin-drawer-item-fg, #cbd5e1);
+    color: var(--sa-admin-drawer-item-fg, var(--sa-color-inverse-fg-muted));
     border-radius: 7px;
     margin: 1px 6px;
     min-height: 36px;
     padding: 6px 12px;
-    font-size: 13.5px;
+    font-size: var(--sa-text-md);
     font-weight: 500;
 }
 .sa-admin-drawer__list :deep(.q-item__section--avatar) {
@@ -420,40 +438,43 @@ const currentPageTitle = computed(() => {
     padding-right: 8px;
 }
 .sa-admin-drawer__list :deep(.q-item .q-icon) {
-    color: var(--sa-border);
+    color: var(--sa-color-inverse-fg-subtle);
 }
 .sa-admin-drawer__list :deep(.q-item:hover) {
-    background: var(--sa-admin-drawer-hover-bg, rgba(245, 158, 11, 0.15));
-    color: var(--sa-admin-drawer-hover-fg, #fbbf24);
+    background: var(--sa-admin-drawer-hover-bg, var(--sa-color-inverse-accent-surface));
+    color: var(--sa-admin-drawer-hover-fg, var(--sa-color-inverse-accent));
 }
 .sa-admin-drawer__list :deep(.q-item:hover .q-icon) {
-    color: var(--sa-admin-drawer-hover-fg, #fbbf24);
+    color: var(--sa-admin-drawer-hover-fg, var(--sa-color-inverse-accent));
 }
 .sa-admin-drawer__list :deep(.sa-admin-drawer__item--active) {
-    background: var(--sa-admin-drawer-active-bg, rgba(245, 158, 11, 0.22)) !important;
-    color: var(--sa-admin-drawer-active-fg, #fbbf24) !important;
+    background: var(
+        --sa-admin-drawer-active-bg,
+        var(--sa-color-inverse-accent-surface-strong)
+    ) !important;
+    color: var(--sa-admin-drawer-active-fg, var(--sa-color-inverse-accent)) !important;
     font-weight: 600;
 }
 .sa-admin-drawer__list :deep(.sa-admin-drawer__item--active .q-icon) {
-    color: var(--sa-admin-drawer-active-fg, #fbbf24);
+    color: var(--sa-admin-drawer-active-fg, var(--sa-color-inverse-accent));
 }
 
 .sa-admin-drawer__footer {
     padding: 12px 16px;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
-    font-size: 11px;
-    color: #cbd5e1;
+    border-top: 1px solid var(--sa-color-inverse-border);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-inverse-fg-muted);
 }
 .sa-admin-drawer__doc {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     margin-top: 6px;
-    color: var(--sa-border);
+    color: var(--sa-color-inverse-fg-muted);
     text-decoration: none;
 }
 .sa-admin-drawer__doc:hover {
-    color: var(--sa-admin-drawer-hover-fg, #fbbf24);
+    color: var(--sa-admin-drawer-hover-fg, var(--sa-color-inverse-accent));
 }
 
 .sa-admin-content {

package/src/pages-standard/AdminManifestErrorPage.vue

@@ -124,22 +124,22 @@ function logout(): void | Promise<void> {
 }
 .sa-manifest-error__title {
     margin: 0;
-    font-size: 22px;
+    font-size: var(--sa-text-2xl);
 }
 .sa-manifest-error__lead,
 .sa-manifest-error__detail {
     margin: 0 0 12px;
-    color: var(--sa-muted-dark);
+    color: var(--sa-color-fg-secondary);
     line-height: 1.6;
 }
 .sa-manifest-error__detail {
-    background: #fef2f2;
-    border-left: 3px solid #dc2626;
+    background: var(--sa-color-negative-surface);
+    border-left: 3px solid var(--sa-color-negative);
     padding: 8px 12px;
     border-radius: 4px;
     font-family: ui-monospace, SFMono-Regular, monospace;
-    font-size: 13px;
-    color: #991b1b;
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-negative-fg);
 }
 .sa-manifest-error__actions {
     display: flex;

package/src/pages-standard/AuditPage.vue

@@ -206,11 +206,11 @@ function formatTs(iso: string | null | undefined): string {
 
 <style scoped>
 .sa-audit__kv {
-    background: var(--sa-bg-surface-2);
-    border: 1px solid var(--sa-border, var(--sa-border));
+    background: var(--sa-color-bg-sunken);
+    border: 1px solid var(--sa-color-border);
     border-radius: 8px;
     padding: 12px;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     margin: 0;
     overflow-x: auto;
     max-height: 50vh;

package/src/pages-standard/BundlesPage.vue

@@ -664,10 +664,10 @@ const classifyDiff = computed(() => props.classifyDiff);
     gap: 14px;
 }
 .sa-bundles__error {
-    border-left: 4px solid #dc2626;
+    border-left: 4px solid var(--sa-color-negative);
 }
 .sa-bundles__empty {
-    border-left: 4px solid #31ccec;
+    border-left: 4px solid var(--sa-color-info-strong);
 }
 .sa-bundles__filter-row {
     display: flex;
@@ -688,13 +688,13 @@ const classifyDiff = computed(() => props.classifyDiff);
     gap: 8px;
 }
 .sa-bd-card {
-    background: #fff;
-    border: 1px solid var(--sa-border);
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
     border-radius: 10px;
     overflow: hidden;
 }
 .sa-bd-card.open {
-    border-color: #3f6bff;
+    border-color: var(--sa-color-accent);
 }
 .sa-bd-card__head {
     display: flex;
@@ -707,8 +707,8 @@ const classifyDiff = computed(() => props.classifyDiff);
     width: 34px;
     height: 34px;
     border-radius: 8px;
-    background: var(--sa-primary-50);
-    color: var(--sa-primary-strong);
+    background: var(--sa-color-accent-surface-strong);
+    color: var(--sa-color-accent-strong);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -725,36 +725,36 @@ const classifyDiff = computed(() => props.classifyDiff);
 }
 .sa-bd-card__key {
     font-weight: 700;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     font-family: var(--sa-font-mono, ui-monospace, monospace);
 }
 .sa-bd-card__name {
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     font-weight: 600;
     margin-top: 2px;
 }
 .sa-bd-card__desc {
-    font-size: 12px;
-    color: var(--sa-muted);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-muted);
 }
 .sa-bd-card__chev {
     transition: transform 0.15s;
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
 }
 .sa-bd-card__chev.open {
     transform: rotate(90deg);
 }
 .sa-bd-card__body {
-    border-top: 1px solid var(--sa-border);
+    border-top: 1px solid var(--sa-color-border);
     padding: 14px;
-    background: var(--sa-bg-surface-2);
+    background: var(--sa-color-bg-sunken);
 }
 .sa-bd-grid {
     display: grid;
     grid-template-columns: minmax(280px, 360px) 1fr;
     gap: 18px;
 }
-@media (max-width: 980px) {
+@media (max-width: 1023.98px) {
     .sa-bd-grid {
         grid-template-columns: 1fr;
     }
@@ -774,11 +774,11 @@ const classifyDiff = computed(() => props.classifyDiff);
     margin-top: 4px;
 }
 .sa-bd-section-label {
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: var(--sa-muted-dark);
+    color: var(--sa-color-fg-secondary);
     display: flex;
     justify-content: space-between;
 }
@@ -786,7 +786,7 @@ const classifyDiff = computed(() => props.classifyDiff);
     margin-top: 10px;
 }
 .sa-bd-section-count {
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
     font-weight: 600;
 }
 .sa-bundles__form {
@@ -795,17 +795,17 @@ const classifyDiff = computed(() => props.classifyDiff);
     gap: 10px;
 }
 .sa-bd-i18n-hint {
-    font-size: 11px;
-    color: var(--sa-muted-light);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-subtle);
 }
 .sa-bd-i18n-block {
     display: flex;
     flex-direction: column;
     gap: 6px;
     padding: 8px;
-    border: 1px solid var(--sa-border);
+    border: 1px solid var(--sa-color-border);
     border-radius: 8px;
-    background: #fff;
+    background: var(--sa-color-bg-surface);
 }
 .sa-bd-i18n-head {
     display: flex;
@@ -813,15 +813,15 @@ const classifyDiff = computed(() => props.classifyDiff);
     align-items: center;
 }
 .sa-bd-i18n-code {
-    font-size: 10px;
+    font-size: var(--sa-text-2xs);
     font-weight: 700;
-    background: var(--sa-border-soft);
+    background: var(--sa-color-border-soft);
     padding: 2px 7px;
     border-radius: 5px;
 }
 .sa-bd-i18n-fallback {
-    font-size: 10px;
-    color: #b45309;
+    font-size: var(--sa-text-2xs);
+    color: var(--sa-color-warning-fg);
 }
 .sa-bd-save {
     margin-top: 8px;
@@ -835,8 +835,8 @@ const classifyDiff = computed(() => props.classifyDiff);
     display: flex;
     gap: 10px;
     align-items: flex-start;
-    background: #fff;
-    border: 1px solid var(--sa-border);
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
     border-radius: 8px;
     padding: 10px;
 }
@@ -850,8 +850,8 @@ const classifyDiff = computed(() => props.classifyDiff);
     align-items: center;
 }
 .sa-bd-version__sub {
-    font-size: 11px;
-    color: var(--sa-muted);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-muted);
     margin: 2px 0;
 }
 .sa-bd-version__feats {
@@ -860,8 +860,8 @@ const classifyDiff = computed(() => props.classifyDiff);
     gap: 4px;
 }
 .sa-bd-feat-chip {
-    font-size: 10px;
-    background: var(--sa-border-soft);
+    font-size: var(--sa-text-2xs);
+    background: var(--sa-color-border-soft);
     padding: 2px 6px;
     border-radius: 5px;
 }
@@ -872,17 +872,17 @@ const classifyDiff = computed(() => props.classifyDiff);
 .sa-bd-empty-row {
     padding: 20px;
     text-align: center;
-    color: var(--sa-muted-light);
-    font-size: 12px;
-    border: 1px dashed #cbd5e1;
+    color: var(--sa-color-fg-subtle);
+    font-size: var(--sa-text-sm);
+    border: 1px dashed var(--sa-color-border-strong);
     border-radius: 8px;
 }
 .sa-bundles__warnings-banner {
-    border-left: 4px solid #f2c037;
+    border-left: 4px solid var(--sa-color-warning-strong);
 }
 .sa-bundles__warnings-list {
     margin: 8px 0 0;
     padding-left: 20px;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 </style>

package/src/pages-standard/DashboardPage.vue

@@ -215,7 +215,10 @@ const cards = reactive<KpiCardState[]>([]);
 const loading = ref(false);
 const error = ref<Error | null>(null);
 
-const defaultBarColor = 'linear-gradient(90deg, #3f6bff, #1d4ed8)';
+// Two stops of the brand accent rather than two fixed blues: a host that sets
+// its own `$primary` had a brand-coloured admin with platform-blue KPI bars.
+const defaultBarColor =
+    'linear-gradient(90deg, var(--sa-color-accent), var(--sa-color-accent-strong))';
 
 watch(
     () => props.manifest,
@@ -402,7 +405,7 @@ function barWidth(value: number, max?: number): number {
 /* Header look comes from the global .sa-page-head — only a margin tweak here. */
 
 .sa-kpi__icon :deep(.q-icon) {
-    color: var(--sa-primary, #3f6bff);
+    color: var(--sa-color-accent);
 }
 
 .sa-dashboard__rows {
@@ -412,16 +415,16 @@ function barWidth(value: number, max?: number): number {
     margin-bottom: 14px;
     align-items: start;
 }
-@media (max-width: 1280px) {
+@media (max-width: 1439.98px) {
     .sa-dashboard__rows {
         grid-template-columns: 1fr;
     }
 }
 
 .sa-dashboard__count {
-    background: var(--sa-primary-soft, rgba(63, 107, 255, 0.08));
-    color: var(--sa-primary, #3f6bff);
-    font-size: 11px;
+    background: var(--sa-color-accent-surface);
+    color: var(--sa-color-accent);
+    font-size: var(--sa-text-xs);
     font-weight: 700;
     padding: 2px 7px;
     border-radius: 5px;
@@ -440,14 +443,14 @@ function barWidth(value: number, max?: number): number {
     grid-template-columns: 130px 1fr 50px;
     align-items: center;
     gap: 8px;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .sa-dashboard__bar-name {
     font-weight: 600;
-    color: var(--sa-heading, var(--sa-heading));
+    color: var(--sa-color-fg-heading);
 }
 .sa-dashboard__bar-track {
-    background: var(--sa-border-soft);
+    background: var(--sa-color-border-soft);
     height: 8px;
     border-radius: 999px;
     overflow: hidden;
@@ -461,7 +464,7 @@ function barWidth(value: number, max?: number): number {
 .sa-dashboard__bar-count {
     font-variant-numeric: tabular-nums;
     text-align: right;
-    color: var(--sa-muted-dark, var(--sa-muted-dark));
+    color: var(--sa-color-fg-secondary);
 }
 
 .sa-dashboard__shortcuts {
@@ -477,36 +480,36 @@ function barWidth(value: number, max?: number): number {
     gap: 12px;
     align-items: flex-start;
     padding: 12px 14px;
-    border: 1px solid var(--sa-border, var(--sa-border));
+    border: 1px solid var(--sa-color-border);
     border-radius: 10px;
     text-decoration: none;
     color: inherit;
-    background: #fafbfc;
+    background: var(--sa-color-bg-surface-raised);
     transition: all 0.12s;
 }
 .sa-dashboard__shortcut:hover {
-    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-dashboard__shortcut :deep(.q-icon) {
-    color: var(--sa-primary, #3f6bff);
+    color: var(--sa-color-accent);
     flex-shrink: 0;
 }
 .sa-dashboard__shortcut-title {
     font-weight: 700;
-    color: var(--sa-heading, var(--sa-heading));
+    color: var(--sa-color-fg-heading);
     font-family: var(--sa-font-head, system-ui, sans-serif);
 }
 .sa-dashboard__shortcut-sub {
-    font-size: 12px;
-    color: var(--sa-muted, var(--sa-muted));
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-muted);
     margin-top: 2px;
 }
 
 .sa-dashboard__loading,
 .sa-dashboard__empty {
     padding: 32px 28px;
-    color: var(--sa-muted, var(--sa-muted));
+    color: var(--sa-color-fg-muted);
     display: flex;
     align-items: center;
     gap: 12px;