@saasicat/ui-vue 0.21.0 → 0.22.1

package/src/pages-standard/discovery-page/DiscoveryQuotaCard.vue

@@ -154,7 +154,7 @@ function coverage(locale: string): number {
 
 <style scoped>
 .sa-qc {
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--sa-border);
     border-radius: 10px;
     background: #fff;
     overflow: hidden;
@@ -192,7 +192,7 @@ function coverage(locale: string): number {
 .sa-qc__label {
     font-weight: 600;
     font-size: 13px;
-    color: #0f172a;
+    color: var(--sa-heading);
 }
 .sa-qc__key {
     font-size: 11px;
@@ -213,7 +213,7 @@ function coverage(locale: string): number {
 }
 .sa-qc__sub {
     font-size: 11px;
-    color: #64748b;
+    color: var(--sa-muted);
     margin-top: 2px;
 }
 .sa-qc__missing {
@@ -231,16 +231,16 @@ function coverage(locale: string): number {
     flex-shrink: 0;
 }
 .sa-qc__chev {
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     transition: transform 0.15s;
 }
 .sa-qc__chev.open {
     transform: rotate(90deg);
 }
 .sa-qc__body {
-    border-top: 1px solid #f1f5f9;
+    border-top: 1px solid var(--sa-border-soft);
     padding: 12px;
-    background: #f8fafc;
+    background: var(--sa-bg-surface-2);
 }
 .sa-qc__banner {
     display: flex;
@@ -250,7 +250,7 @@ function coverage(locale: string): number {
     border-radius: 8px;
     padding: 8px 12px;
     margin-bottom: 10px;
-    background: #fffbeb;
+    background: var(--sa-warning-bg);
     border: 1px solid #fde68a;
     color: #92400e;
 }

package/src/pages-standard/marketing-catalog/MarketingCatalogAdmin.vue

@@ -400,7 +400,7 @@
                                 <div class="sa-marketing-tf-add">
                                     <button
                                         type="button"
-                                        class="sa-marketing-btn sa-marketing-btn--sm"
+                                        class="sa-btn sa-btn--sm"
                                         :disabled="busy"
                                         @click="$emit('add-feature', row)"
                                     >

package/src/pages-standard/marketing-catalog/MarketingCatalogHeader.vue

@@ -48,24 +48,13 @@
                 </div>
             </div>
         </div>
-        <button class="sa-marketing-btn" type="button" :disabled="busy" @click="$emit('reload')">
-            <svg
-                width="14"
-                height="14"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-            >
-                <path d="M21 12a9 9 0 1 1-3-6.7M21 3v6h-6" />
-            </svg>
-            <span>{{ msg.header.refresh }}</span>
-        </button>
+        <AdminRefreshBtn :loading="busy" @refresh="$emit('reload')" />
     </div>
 </template>
 
 <script setup lang="ts">
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
+import AdminRefreshBtn from '../../components/admin-page/AdminRefreshBtn.vue';
 
 defineProps<{
     activeLocaleSet: string[];

package/src/pages-standard/plan-versions/PlanDiffCard.vue

@@ -64,7 +64,7 @@ const changeCountLabel = computed(() => {
 <style scoped>
 .sa-pv-diff-card {
     background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
+    border: 1px solid var(--sa-border, var(--sa-border));
     border-radius: 10px;
     margin-bottom: 12px;
     overflow: hidden;
@@ -92,7 +92,7 @@ const changeCountLabel = computed(() => {
 
 .sa-pv-diff-card__head {
     padding: 12px 16px;
-    border-bottom: 1px solid var(--sa-border-soft, #f1f5f9);
+    border-bottom: 1px solid var(--sa-border-soft, var(--sa-border-soft));
     display: flex;
     align-items: center;
     gap: 12px;
@@ -110,21 +110,21 @@ const changeCountLabel = computed(() => {
 .sa-pv-diff-card__name {
     font-weight: 700;
     font-size: 14px;
-    color: var(--sa-heading, #0f172a);
+    color: var(--sa-heading, var(--sa-heading));
     font-family: var(--sa-font-head, system-ui, sans-serif);
 }
 .sa-pv-diff-card__ver {
     font-family: var(--sa-font-mono, ui-monospace, monospace);
     font-size: 11px;
     font-weight: 600;
-    color: var(--sa-muted, #64748b);
-    background: #f1f5f9;
+    color: var(--sa-muted, var(--sa-muted));
+    background: var(--sa-border-soft);
     padding: 2px 6px;
     border-radius: 4px;
 }
 .sa-pv-diff-card__sub {
     font-size: 11.5px;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
 }
 .sa-pv-diff-card__count {
     font-size: 11px;

package/src/pages-standard/plan-versions/PlanVersionsDiff.vue

@@ -196,7 +196,7 @@ function directionFor(delta: number, polarity: 'higher' | 'lower'): VersionChang
 }
 .sa-pv-diff__overview {
     background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
+    border: 1px solid var(--sa-border, var(--sa-border));
     border-radius: 12px;
     padding: 16px 20px;
     margin-bottom: 18px;
@@ -217,17 +217,17 @@ function directionFor(delta: number, polarity: 'higher' | 'lower'): VersionChang
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.08em;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     text-transform: uppercase;
 }
 .sa-pv-diff__title {
     font-family: var(--sa-font-head, system-ui, sans-serif);
     font-weight: 700;
     font-size: 18px;
-    color: var(--sa-heading, #0f172a);
+    color: var(--sa-heading, var(--sa-heading));
 }
 .sa-pv-diff__sep {
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     font-weight: 500;
 }
 .sa-pv-diff__spacer {
@@ -244,7 +244,7 @@ function directionFor(delta: number, polarity: 'higher' | 'lower'): VersionChang
     font-size: 10.5px;
     font-weight: 700;
     letter-spacing: 0.08em;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     text-transform: uppercase;
 }
 .sa-pv-diff__stat-value {
@@ -264,7 +264,7 @@ function directionFor(delta: number, polarity: 'higher' | 'lower'): VersionChang
     font-family: var(--sa-font-head, system-ui, sans-serif);
     font-size: 14px;
     font-weight: 700;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     text-transform: uppercase;
     letter-spacing: 0.08em;
 }

package/src/pages-standard/plan-versions/PlanVersionsTimeline.vue

@@ -118,14 +118,14 @@ function metaText(s: CatalogSnapshot): string {
     width: 280px;
     flex-shrink: 0;
     background: var(--sa-bg-surface, #ffffff);
-    border-right: 1px solid var(--sa-border, #e2e8f0);
+    border-right: 1px solid var(--sa-border, var(--sa-border));
     display: flex;
     flex-direction: column;
     overflow: hidden;
 }
 .sa-pv-timeline__head {
     padding: 14px 16px;
-    border-bottom: 1px solid var(--sa-border, #e2e8f0);
+    border-bottom: 1px solid var(--sa-border, var(--sa-border));
     background: #fafbfc;
 }
 .sa-pv-timeline__row {
@@ -137,13 +137,13 @@ function metaText(s: CatalogSnapshot): string {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.08em;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     text-transform: uppercase;
 }
 .sa-pv-timeline__count {
     margin-top: 2px;
     font-size: 11px;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
 }
 
 .sa-pv-timeline__list {
@@ -160,7 +160,7 @@ function metaText(s: CatalogSnapshot): string {
     top: 36px;
     bottom: -6px;
     width: 2px;
-    background: var(--sa-border, #e2e8f0);
+    background: var(--sa-border, var(--sa-border));
     z-index: 0;
 }
 .sa-pv-timeline__btn {
@@ -182,7 +182,7 @@ function metaText(s: CatalogSnapshot): string {
     color: inherit;
 }
 .sa-pv-timeline__btn:hover:not(.sa-pv-timeline__btn--selected) {
-    background: var(--sa-border-soft, #f1f5f9);
+    background: var(--sa-border-soft, var(--sa-border-soft));
 }
 .sa-pv-timeline__btn--selected {
     background: var(--sa-primary-soft, rgba(63, 107, 255, 0.08));
@@ -210,9 +210,9 @@ function metaText(s: CatalogSnapshot): string {
     color: var(--sa-positive, #047857);
 }
 .sa-pv-timeline__node--archived {
-    background: #f1f5f9;
-    border-color: var(--sa-muted, #64748b);
-    color: var(--sa-muted, #64748b);
+    background: var(--sa-border-soft);
+    border-color: var(--sa-muted, var(--sa-muted));
+    color: var(--sa-muted, var(--sa-muted));
 }
 .sa-pv-timeline__node-dot {
     width: 6px;
@@ -237,7 +237,7 @@ function metaText(s: CatalogSnapshot): string {
     font-family: var(--sa-font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
     font-size: 12px;
     font-weight: 700;
-    color: var(--sa-heading, #0f172a);
+    color: var(--sa-heading, var(--sa-heading));
 }
 .sa-pv-timeline__status {
     font-size: 9.5px;
@@ -255,8 +255,8 @@ function metaText(s: CatalogSnapshot): string {
     color: var(--sa-positive, #047857);
 }
 .sa-pv-timeline__status--archived {
-    background: #f1f5f9;
-    color: var(--sa-muted, #64748b);
+    background: var(--sa-border-soft);
+    color: var(--sa-muted, var(--sa-muted));
 }
 .sa-pv-timeline__vs {
     font-size: 9.5px;
@@ -278,7 +278,7 @@ function metaText(s: CatalogSnapshot): string {
 }
 .sa-pv-timeline__meta {
     font-size: 11px;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     margin-top: 2px;
     display: flex;
     align-items: center;
@@ -287,10 +287,10 @@ function metaText(s: CatalogSnapshot): string {
 
 .sa-pv-timeline__foot {
     padding: 10px 14px;
-    border-top: 1px solid var(--sa-border, #e2e8f0);
+    border-top: 1px solid var(--sa-border, var(--sa-border));
     background: #fafbfc;
     font-size: 11px;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
 }
 .sa-pv-timeline__hint {
     display: flex;
@@ -300,7 +300,7 @@ function metaText(s: CatalogSnapshot): string {
 .sa-pv-timeline__clear-btn {
     margin-top: 6px;
     background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
+    border: 1px solid var(--sa-border, var(--sa-border));
     border-radius: 6px;
     padding: 4px 10px;
     font-size: 11px;

package/src/pages-standard/plans-page/PlanBundleOverview.vue

@@ -1,11 +1,10 @@
 <template>
-    <section class="sa-bundles">
-        <div class="sa-bundles__head">
-            <h2 class="sa-bundles__title">{{ msg.bundleOverview.title }}</h2>
+    <AdminSection :title="msg.bundleOverview.title">
+        <template #actions>
             <span class="sa-bundles__count">{{ bundles.length }}</span>
-        </div>
+        </template>
 
-        <div v-if="bundles.length === 0" class="sa-bundles__empty">
+        <div v-if="bundles.length === 0" class="sa-bundle-overview__empty">
             {{ msg.bundleOverview.empty }}
         </div>
 
@@ -44,11 +43,12 @@
                 </q-card-section>
             </q-card>
         </div>
-    </section>
+    </AdminSection>
 </template>
 
 <script setup lang="ts">
 import type { PlanRow } from '@saasicat/types';
+import AdminSection from '../../components/admin-page/AdminSection.vue';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 
 interface BundleEntry {
@@ -83,30 +83,15 @@ function compatLabel(bundle: BundleEntry): string {
 </script>
 
 <style scoped>
-.sa-bundles {
-    padding: 8px 16px 32px;
-}
-.sa-bundles__head {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin: 8px 0 12px;
-}
-.sa-bundles__title {
-    font-size: 16px;
-    font-weight: 600;
-    margin: 0;
-    color: #0f172a;
-}
 .sa-bundles__count {
     font-size: 12px;
-    color: #64748b;
-    background: #e2e8f0;
+    color: var(--sa-muted);
+    background: var(--sa-border);
     border-radius: 999px;
     padding: 1px 8px;
 }
-.sa-bundles__empty {
-    color: #64748b;
+.sa-bundle-overview__empty {
+    color: var(--sa-muted);
     font-size: 14px;
     padding: 8px 0;
 }
@@ -120,18 +105,18 @@ function compatLabel(bundle: BundleEntry): string {
 }
 .sa-bundle__label {
     font-weight: 600;
-    color: #0f172a;
+    color: var(--sa-heading);
 }
 .sa-bundle__key {
     font-size: 11px;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     font-family: monospace;
 }
 .sa-bundle__caption {
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 0.04em;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     margin-bottom: 4px;
 }
 .sa-bundle__chips {
@@ -144,7 +129,7 @@ function compatLabel(bundle: BundleEntry): string {
     color: #3730a3;
 }
 .sa-bundle__muted {
-    color: #94a3b8;
+    color: var(--sa-muted-light);
 }
 .sa-bundle__compat {
     padding-top: 0;

package/src/pages-standard/plans-page/PlanPublishDialog.vue

@@ -107,7 +107,7 @@ defineEmits<{
     margin: 4px 0;
 }
 .sa-publish-regression__old {
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     text-decoration: line-through;
 }
 .sa-publish-regression__new {

package/src/pages-standard/plans-page/PlansPageToast.vue

@@ -30,7 +30,7 @@ defineProps<{
     bottom: 24px;
     left: 50%;
     transform: translateX(-50%);
-    background: #0f172a;
+    background: var(--sa-heading);
     color: #fff;
     padding: 12px 18px;
     border-radius: 10px;