@saasicat/ui-vue 0.22.2 → 0.24.0

package/src/pages-tenant/PlanChangeWizard.vue

@@ -223,6 +223,7 @@ import PlanGrid from '../components/plan/PlanGrid.vue';
 import { useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 import type { BillingCycleStr, PlanChangePreviewShape } from '../vue/use-tenant-billing.js';
 import type { CatalogPlan } from '../vue/use-tenant-billing-catalog.js';
+import type { PlanChangeWizardI18n } from './default-i18n.js';
 
 // PlanChangeWizard — 3-step dialog for plan changes.
 //
@@ -231,54 +232,6 @@ import type { CatalogPlan } from '../vue/use-tenant-billing-catalog.js';
 // the limits check + proration + feature diff + blockers, step 3 calls `changePlan`.
 // Data-driven via the passed `catalogQuotaKeys[]` — no hard-coded trinity.
 
-interface I18nStrings {
-    title: string;
-    close: string;
-    currentLabel: string;
-    cycleMonthly: string;
-    cycleYearly: string;
-    badgeCurrent: string;
-    badgePopular: string;
-    priceUnitMonthly: string;
-    priceUnitYearly: string;
-    priceOnRequest: string;
-    stepChoose: string;
-    stepChooseIntro: string;
-    stepPreview: string;
-    stepConfirm: string;
-    next: string;
-    back: string;
-    previewLoading: string;
-    effectiveAtLabel: string;
-    effectiveImmediate: string;
-    prorationTitle: string;
-    prorationLine: string;
-    prorationDays: string;
-    limitsTitle: string;
-    limitsUsed: string;
-    limitsCurrent: string;
-    limitsTarget: string;
-    featuresGained: string;
-    featuresLost: string;
-    blockersTitle: string;
-    confirmImmediate: string;
-    confirmScheduled: string;
-    confirmAction: string;
-    confirmInProgress: string;
-    confirmPriceTitle: string;
-    confirmProratedNow: string;
-    confirmRecurringNext: string;
-    confirmRecurringFrom: string;
-    perCycleMonthly: string;
-    perCycleYearly: string;
-    confirmTrialNote: string;
-    confirmRecurringTrialEnd: string;
-    changeTypeUpgrade: string;
-    changeTypeDowngrade: string;
-    changeTypeCycle: string;
-    changeTypeNoop: string;
-}
-
 interface Props {
     modelValue: boolean;
     plans: CatalogPlan[];
@@ -314,7 +267,7 @@ interface Props {
     /** Preview caller (passed through from the consumer composable). */
     previewPlanChange: (plan: string, cycle: BillingCycleStr) => Promise<PlanChangePreviewShape>;
     changePlan: (plan: string, cycle: BillingCycleStr, immediate: boolean) => Promise<void>;
-    i18n: I18nStrings;
+    i18n: PlanChangeWizardI18n;
 }
 
 const props = defineProps<Props>();
@@ -511,18 +464,11 @@ watch(
 }
 /* CSS vars for light + dark mode */
 .sp-wizard {
-    --sp-wiz-border: rgba(0, 0, 0, 0.08);
-    --sp-wiz-text-strong: rgba(0, 0, 0, 0.87);
-    --sp-wiz-text-muted: rgba(0, 0, 0, 0.6);
-    --sp-wiz-text-faint: rgba(0, 0, 0, 0.55);
-    --sp-wiz-border-soft: rgba(0, 0, 0, 0.1);
-}
-:global(.body--dark) .sp-wizard {
-    --sp-wiz-border: rgba(255, 255, 255, 0.12);
-    --sp-wiz-text-strong: rgba(255, 255, 255, 0.92);
-    --sp-wiz-text-muted: rgba(255, 255, 255, 0.7);
-    --sp-wiz-text-faint: rgba(255, 255, 255, 0.6);
-    --sp-wiz-border-soft: rgba(255, 255, 255, 0.18);
+    --sp-wiz-border: var(--sa-color-border);
+    --sp-wiz-text-strong: var(--sa-color-fg-heading);
+    --sp-wiz-text-muted: var(--sa-color-fg-secondary);
+    --sp-wiz-text-faint: var(--sa-color-fg-muted);
+    --sp-wiz-border-soft: var(--sa-color-border-soft);
 }
 .sp-wizard__head {
     display: flex;
@@ -531,13 +477,13 @@ watch(
     border-bottom: 1px solid var(--sp-wiz-border);
 }
 .sp-wizard__title {
-    font-size: 18px;
+    font-size: var(--sa-text-xl);
     font-weight: 600;
     color: var(--sp-wiz-text-strong);
 }
 .sp-wizard__sub {
     color: var(--sp-wiz-text-muted);
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .sp-wizard__intro {
     color: var(--sp-wiz-text-muted);
@@ -550,8 +496,8 @@ watch(
     padding: 24px 0;
 }
 .sp-wizard__error {
-    color: var(--q-negative, #c10015);
-    background: rgba(193, 0, 21, 0.08);
+    color: var(--sa-color-negative);
+    background: var(--sa-color-negative-surface);
     padding: 12px;
     border-radius: 4px;
 }
@@ -559,14 +505,14 @@ watch(
     margin-bottom: 12px;
 }
 .sp-wizard__proration {
-    background: rgba(25, 118, 210, 0.06);
+    background: var(--sa-color-info-surface);
     padding: 12px 14px;
     border-radius: 4px;
     margin-top: 12px;
 }
 .sp-wizard__proration h4 {
     margin: 0 0 6px;
-    font-size: 14px;
+    font-size: var(--sa-text-lg);
 }
 .sp-wizard__proration p {
     margin: 0;
@@ -579,7 +525,7 @@ watch(
 .sp-wizard__limits thead th {
     padding: 6px 12px;
     text-align: left;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     color: var(--sp-wiz-text-faint);
     text-transform: uppercase;
     border-bottom: 1px solid var(--sp-wiz-border-soft);
@@ -592,33 +538,33 @@ watch(
 .sp-wizard__feat h4,
 .sp-wizard__blockers h4 {
     margin: 0 0 6px;
-    font-size: 14px;
+    font-size: var(--sa-text-lg);
 }
 .sp-wizard__feat--warn {
-    color: rgba(193, 0, 21, 0.8);
+    color: var(--sa-color-negative);
 }
 .sp-wizard__blockers {
-    color: var(--q-negative, #c10015);
-    background: rgba(193, 0, 21, 0.06);
+    color: var(--sa-color-negative);
+    background: var(--sa-color-negative-surface);
     padding: 12px 14px;
     border-radius: 4px;
 }
 .sp-wizard__warnings {
-    color: var(--q-warning, #c87b00);
-    font-size: 13px;
+    color: var(--sa-color-warning);
+    font-size: var(--sa-text-md);
 }
 .sp-wizard__confirm-line {
     color: var(--sp-wiz-text-muted);
 }
 .sp-wizard__price-summary {
     margin-top: 16px;
-    background: rgba(25, 118, 210, 0.06);
+    background: var(--sa-color-info-surface);
     padding: 12px 14px;
     border-radius: 4px;
 }
 .sp-wizard__price-summary h4 {
     margin: 0 0 8px;
-    font-size: 14px;
+    font-size: var(--sa-text-lg);
 }
 .sp-wizard__price-row {
     display: flex;

package/src/pages-tenant/TenantPlanSection.vue

@@ -198,7 +198,11 @@ import { computed, ref } from 'vue';
 import PackageSnapshotPanel from './PackageSnapshotPanel.vue';
 import PendingVersionBanner from './PendingVersionBanner.vue';
 import PlanChangeWizard from './PlanChangeWizard.vue';
-import { defaultTenantPlanSectionI18n, type TenantPlanSectionI18n } from './default-i18n.js';
+import {
+    defaultTenantPlanSectionI18n,
+    planChangeWizardI18n,
+    type TenantPlanSectionI18n,
+} from './default-i18n.js';
 import BundlePreviewDialog from './tenant-plan-section/BundlePreviewDialog.vue';
 import TenantBundleStore from './tenant-plan-section/TenantBundleStore.vue';
 import TenantFeatureMatrix from './tenant-plan-section/TenantFeatureMatrix.vue';
@@ -429,53 +433,7 @@ const statusColor = computed(() => {
     }
 });
 
-const wizardI18n = computed(() => ({
-    title: effectiveI18n.value.wizardTitle,
-    close: effectiveI18n.value.wizardClose,
-    currentLabel: effectiveI18n.value.wizardCurrent,
-    cycleMonthly: effectiveI18n.value.cycleMonthly,
-    cycleYearly: effectiveI18n.value.cycleYearly,
-    badgeCurrent: effectiveI18n.value.wizardBadgeCurrent,
-    badgePopular: effectiveI18n.value.wizardBadgePopular,
-    priceUnitMonthly: effectiveI18n.value.wizardPriceUnitMonthly,
-    priceUnitYearly: effectiveI18n.value.wizardPriceUnitYearly,
-    priceOnRequest: effectiveI18n.value.wizardPriceOnRequest,
-    stepChoose: effectiveI18n.value.wizardStepChoose,
-    stepChooseIntro: effectiveI18n.value.wizardStepChooseIntro,
-    stepPreview: effectiveI18n.value.wizardStepPreview,
-    stepConfirm: effectiveI18n.value.wizardStepConfirm,
-    next: effectiveI18n.value.wizardNext,
-    back: effectiveI18n.value.wizardBack,
-    previewLoading: effectiveI18n.value.wizardPreviewLoading,
-    effectiveAtLabel: effectiveI18n.value.wizardEffectiveAtLabel,
-    effectiveImmediate: effectiveI18n.value.wizardEffectiveImmediate,
-    prorationTitle: effectiveI18n.value.wizardProrationTitle,
-    prorationLine: effectiveI18n.value.wizardProrationLine,
-    prorationDays: effectiveI18n.value.wizardProrationDays,
-    limitsTitle: effectiveI18n.value.wizardLimitsTitle,
-    limitsUsed: effectiveI18n.value.wizardLimitsUsed,
-    limitsCurrent: effectiveI18n.value.wizardLimitsCurrent,
-    limitsTarget: effectiveI18n.value.wizardLimitsTarget,
-    featuresGained: effectiveI18n.value.wizardFeaturesGained,
-    featuresLost: effectiveI18n.value.wizardFeaturesLost,
-    blockersTitle: effectiveI18n.value.wizardBlockersTitle,
-    confirmImmediate: effectiveI18n.value.wizardConfirmImmediate,
-    confirmScheduled: effectiveI18n.value.wizardConfirmScheduled,
-    confirmAction: effectiveI18n.value.wizardConfirmAction,
-    confirmInProgress: effectiveI18n.value.wizardConfirmInProgress,
-    confirmPriceTitle: effectiveI18n.value.wizardConfirmPriceTitle,
-    confirmProratedNow: effectiveI18n.value.wizardConfirmProratedNow,
-    confirmRecurringNext: effectiveI18n.value.wizardConfirmRecurringNext,
-    confirmRecurringFrom: effectiveI18n.value.wizardConfirmRecurringFrom,
-    perCycleMonthly: effectiveI18n.value.wizardConfirmPerCycleMonthly,
-    perCycleYearly: effectiveI18n.value.wizardConfirmPerCycleYearly,
-    confirmTrialNote: effectiveI18n.value.wizardConfirmTrialNote,
-    confirmRecurringTrialEnd: effectiveI18n.value.wizardConfirmRecurringTrialEnd,
-    changeTypeUpgrade: effectiveI18n.value.wizardChangeTypeUpgrade,
-    changeTypeDowngrade: effectiveI18n.value.wizardChangeTypeDowngrade,
-    changeTypeCycle: effectiveI18n.value.wizardChangeTypeCycle,
-    changeTypeNoop: effectiveI18n.value.wizardChangeTypeNoop,
-}));
+const wizardI18n = computed(() => planChangeWizardI18n(effectiveI18n.value));
 
 // Helper hooks with defaults
 function quotaLabelResolved(key: string): string {
@@ -616,25 +574,17 @@ async function changePlan(plan: string, cycle: 'MONTHLY' | 'YEARLY', immediate:
 
 <style>
 .sp-plan-section {
-    --sp-text-secondary: rgba(0, 0, 0, 0.6);
-    --sp-text-muted: rgba(0, 0, 0, 0.55);
-    --sp-text-disabled: rgba(0, 0, 0, 0.5);
-    --sp-text-strong: rgba(0, 0, 0, 0.7);
-    --sp-border: rgba(0, 0, 0, 0.08);
-    --sp-summary-bg: rgba(25, 118, 210, 0.06);
+    --sp-text-secondary: var(--sa-color-fg-secondary);
+    --sp-text-muted: var(--sa-color-fg-muted);
+    --sp-text-disabled: var(--sa-color-fg-subtle);
+    --sp-text-strong: var(--sa-color-fg-body);
+    --sp-border: var(--sa-color-border);
+    --sp-summary-bg: var(--sa-color-info-surface);
 
     display: flex;
     flex-direction: column;
     gap: 16px;
 }
-body.body--dark .sp-plan-section {
-    --sp-text-secondary: rgba(255, 255, 255, 0.72);
-    --sp-text-muted: rgba(255, 255, 255, 0.62);
-    --sp-text-disabled: rgba(255, 255, 255, 0.5);
-    --sp-text-strong: rgba(255, 255, 255, 0.85);
-    --sp-border: rgba(255, 255, 255, 0.16);
-    --sp-summary-bg: rgba(25, 118, 210, 0.18);
-}
 .sp-plan-section__loading,
 .sp-plan-section__empty {
     display: flex;
@@ -644,8 +594,8 @@ body.body--dark .sp-plan-section {
     color: var(--sp-text-secondary);
 }
 .sp-plan-section__error {
-    color: var(--q-negative, #c10015);
-    background: rgba(193, 0, 21, 0.08);
+    color: var(--sa-color-negative);
+    background: var(--sa-color-negative-surface);
     padding: 12px 16px;
     border-radius: 4px;
 }
@@ -657,7 +607,7 @@ body.body--dark .sp-plan-section {
     flex-wrap: wrap;
 }
 .sp-plan-section__eyebrow {
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--sp-text-muted);
@@ -665,7 +615,7 @@ body.body--dark .sp-plan-section {
 }
 .sp-plan-section__plan-name {
     margin: 0 0 8px;
-    font-size: 22px;
+    font-size: var(--sa-text-2xl);
     font-weight: 600;
 }
 .sp-plan-section__meta {
@@ -683,7 +633,7 @@ body.body--dark .sp-plan-section {
 .sp-plan-section__sub {
     margin: 6px 0 0;
     color: var(--sp-text-muted);
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .sp-plan-section__usage-title {
     font-weight: 600;
@@ -716,10 +666,10 @@ body.body--dark .sp-plan-section {
 }
 .sp-plan-section__item-price {
     color: var(--sp-text-secondary);
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .sp-plan-section__item-canceled {
     color: var(--sp-text-disabled);
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 </style>

package/src/pages-tenant/UsageBar.vue

@@ -73,20 +73,20 @@ const formattedMax = computed(() => {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .sp-usage-bar__label {
-    color: var(--q-secondary, #555);
+    color: var(--sa-color-fg-secondary);
     font-weight: 500;
 }
 .sp-usage-bar__values {
     font-variant-numeric: tabular-nums;
-    color: var(--q-secondary, #555);
+    color: var(--sa-color-fg-secondary);
 }
 .sp-usage-bar__track {
     width: 100%;
     height: 8px;
-    background: rgba(0, 0, 0, 0.08);
+    background: var(--sa-color-bg-sunken);
     border-radius: 4px;
     overflow: hidden;
 }
@@ -96,12 +96,12 @@ const formattedMax = computed(() => {
     border-radius: 4px;
 }
 .sp-usage-bar--ok .sp-usage-bar__fill {
-    background: var(--q-positive, #21ba45);
+    background: var(--sa-color-positive);
 }
 .sp-usage-bar--warn .sp-usage-bar__fill {
-    background: var(--q-warning, #f2c037);
+    background: var(--sa-color-warning-strong);
 }
 .sp-usage-bar--full .sp-usage-bar__fill {
-    background: var(--q-negative, #c10015);
+    background: var(--sa-color-negative);
 }
 </style>

package/src/pages-tenant/default-i18n.ts

@@ -494,3 +494,116 @@ export const DEFAULT_I18N_EN: TenantPlanSectionI18n = {
 export function defaultTenantPlanSectionI18n(locale: SaLocale): TenantPlanSectionI18n {
     return locale === 'en' ? DEFAULT_I18N_EN : DEFAULT_I18N_DE;
 }
+
+/**
+ * The strings `PlanChangeWizard` takes.
+ *
+ * A projection of `TenantPlanSectionI18n` with the `wizard` prefix dropped, so
+ * the wizard's own template reads `i18n.stepChoose` rather than
+ * `i18n.wizardStepChoose`.
+ */
+export interface PlanChangeWizardI18n {
+    title: string;
+    close: string;
+    currentLabel: string;
+    cycleMonthly: string;
+    cycleYearly: string;
+    badgeCurrent: string;
+    badgePopular: string;
+    priceUnitMonthly: string;
+    priceUnitYearly: string;
+    priceOnRequest: string;
+    stepChoose: string;
+    stepChooseIntro: string;
+    stepPreview: string;
+    stepConfirm: string;
+    next: string;
+    back: string;
+    previewLoading: string;
+    effectiveAtLabel: string;
+    effectiveImmediate: string;
+    prorationTitle: string;
+    prorationLine: string;
+    prorationDays: string;
+    limitsTitle: string;
+    limitsUsed: string;
+    limitsCurrent: string;
+    limitsTarget: string;
+    featuresGained: string;
+    featuresLost: string;
+    blockersTitle: string;
+    confirmImmediate: string;
+    confirmScheduled: string;
+    confirmAction: string;
+    confirmInProgress: string;
+    confirmPriceTitle: string;
+    confirmProratedNow: string;
+    confirmRecurringNext: string;
+    confirmRecurringFrom: string;
+    perCycleMonthly: string;
+    perCycleYearly: string;
+    confirmTrialNote: string;
+    confirmRecurringTrialEnd: string;
+    changeTypeUpgrade: string;
+    changeTypeDowngrade: string;
+    changeTypeCycle: string;
+    changeTypeNoop: string;
+}
+
+/**
+ * Builds the wizard's strings from the section's.
+ *
+ * Here rather than inline in `TenantPlanSection.vue`, because the wizard is an
+ * exported component: a consumer who mounts it directly would otherwise have to
+ * reproduce all 44 keys of this mapping by hand, and a visual fixture had to do
+ * exactly that before it moved.
+ */
+export function planChangeWizardI18n(i18n: TenantPlanSectionI18n): PlanChangeWizardI18n {
+    return {
+        title: i18n.wizardTitle,
+        close: i18n.wizardClose,
+        currentLabel: i18n.wizardCurrent,
+        cycleMonthly: i18n.cycleMonthly,
+        cycleYearly: i18n.cycleYearly,
+        badgeCurrent: i18n.wizardBadgeCurrent,
+        badgePopular: i18n.wizardBadgePopular,
+        priceUnitMonthly: i18n.wizardPriceUnitMonthly,
+        priceUnitYearly: i18n.wizardPriceUnitYearly,
+        priceOnRequest: i18n.wizardPriceOnRequest,
+        stepChoose: i18n.wizardStepChoose,
+        stepChooseIntro: i18n.wizardStepChooseIntro,
+        stepPreview: i18n.wizardStepPreview,
+        stepConfirm: i18n.wizardStepConfirm,
+        next: i18n.wizardNext,
+        back: i18n.wizardBack,
+        previewLoading: i18n.wizardPreviewLoading,
+        effectiveAtLabel: i18n.wizardEffectiveAtLabel,
+        effectiveImmediate: i18n.wizardEffectiveImmediate,
+        prorationTitle: i18n.wizardProrationTitle,
+        prorationLine: i18n.wizardProrationLine,
+        prorationDays: i18n.wizardProrationDays,
+        limitsTitle: i18n.wizardLimitsTitle,
+        limitsUsed: i18n.wizardLimitsUsed,
+        limitsCurrent: i18n.wizardLimitsCurrent,
+        limitsTarget: i18n.wizardLimitsTarget,
+        featuresGained: i18n.wizardFeaturesGained,
+        featuresLost: i18n.wizardFeaturesLost,
+        blockersTitle: i18n.wizardBlockersTitle,
+        confirmImmediate: i18n.wizardConfirmImmediate,
+        confirmScheduled: i18n.wizardConfirmScheduled,
+        confirmAction: i18n.wizardConfirmAction,
+        confirmInProgress: i18n.wizardConfirmInProgress,
+        confirmPriceTitle: i18n.wizardConfirmPriceTitle,
+        confirmProratedNow: i18n.wizardConfirmProratedNow,
+        confirmRecurringNext: i18n.wizardConfirmRecurringNext,
+        confirmRecurringFrom: i18n.wizardConfirmRecurringFrom,
+        perCycleMonthly: i18n.wizardConfirmPerCycleMonthly,
+        perCycleYearly: i18n.wizardConfirmPerCycleYearly,
+        confirmTrialNote: i18n.wizardConfirmTrialNote,
+        confirmRecurringTrialEnd: i18n.wizardConfirmRecurringTrialEnd,
+        changeTypeUpgrade: i18n.wizardChangeTypeUpgrade,
+        changeTypeDowngrade: i18n.wizardChangeTypeDowngrade,
+        changeTypeCycle: i18n.wizardChangeTypeCycle,
+        changeTypeNoop: i18n.wizardChangeTypeNoop,
+    };
+}

package/src/pages-tenant/tenant-plan-section/BundlePreviewDialog.vue

@@ -246,32 +246,32 @@ function close() {
     padding-bottom: 8px;
 }
 .sp-bundle-preview__title {
-    font-size: 16px;
+    font-size: var(--sa-text-lg);
     font-weight: 600;
 }
 .sp-bundle-preview__bundle {
     margin-top: 2px;
-    color: var(--sp-text-secondary, rgba(0, 0, 0, 0.6));
+    color: var(--sp-text-secondary, var(--sa-color-fg-secondary));
 }
 .sp-bundle-preview__loading {
     display: flex;
     align-items: center;
     gap: 12px;
-    color: var(--sp-text-secondary, rgba(0, 0, 0, 0.6));
+    color: var(--sp-text-secondary, var(--sa-color-fg-secondary));
 }
 .sp-bundle-preview__error {
-    color: var(--q-negative, #c10015);
+    color: var(--sa-color-negative);
 }
 .sp-bundle-preview__blockers {
-    background: rgba(193, 0, 21, 0.08);
-    color: var(--q-negative, #c10015);
+    background: var(--sa-color-negative-surface);
+    color: var(--sa-color-negative);
 }
 .sp-bundle-preview__warnings {
-    background: rgba(242, 192, 55, 0.12);
+    background: var(--sa-color-warning-surface-strong);
 }
 .sp-bundle-preview__block-title {
     font-weight: 600;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     margin-bottom: 6px;
 }
 .sp-bundle-preview__block-subtitle {
@@ -281,26 +281,26 @@ function close() {
 .sp-bundle-preview__warnings ul {
     margin: 0;
     padding-left: 18px;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .sp-bundle-preview__requires {
     margin-top: 6px;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .sp-bundle-preview__price-row {
     display: flex;
     justify-content: space-between;
     gap: 16px;
     padding: 4px 0;
-    font-size: 14px;
+    font-size: var(--sa-text-lg);
 }
 .sp-bundle-preview__price-row small {
     font-weight: 400;
-    color: var(--sp-text-muted, rgba(0, 0, 0, 0.55));
+    color: var(--sp-text-muted, var(--sa-color-fg-muted));
 }
 .sp-bundle-preview__note {
-    font-size: 13px;
-    color: var(--sp-text-muted, rgba(0, 0, 0, 0.55));
+    font-size: var(--sa-text-md);
+    color: var(--sp-text-muted, var(--sa-color-fg-muted));
     padding: 4px 0;
 }
 </style>

package/src/pages-tenant/tenant-plan-section/TenantBundleStore.vue

@@ -246,9 +246,9 @@ const availableRows = computed<AvailableRow[]>(() =>
 
 <style scoped>
 .sp-bundle-store__subtitle {
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     font-weight: 600;
-    color: var(--sp-text-strong, rgba(0, 0, 0, 0.7));
+    color: var(--sp-text-strong, var(--sa-color-fg-body));
     margin: 4px 0 8px;
 }
 .sp-bundle-store__available {
@@ -260,8 +260,8 @@ const availableRows = computed<AvailableRow[]>(() =>
     gap: 12px;
 }
 .sp-bundle-store__empty {
-    color: var(--sp-text-muted, rgba(0, 0, 0, 0.55));
-    font-size: 13px;
+    color: var(--sp-text-muted, var(--sa-color-fg-muted));
+    font-size: var(--sa-text-md);
 }
 .sp-bundle-store__grid {
     display: grid;
@@ -288,7 +288,7 @@ const availableRows = computed<AvailableRow[]>(() =>
 }
 .sp-bundle-store__card-name {
     font-weight: 600;
-    font-size: 15px;
+    font-size: var(--sa-text-lg);
 }
 .sp-bundle-store__card-price {
     font-weight: 600;
@@ -296,16 +296,16 @@ const availableRows = computed<AvailableRow[]>(() =>
 }
 .sp-bundle-store__card-price small {
     font-weight: 400;
-    color: var(--sp-text-muted, rgba(0, 0, 0, 0.55));
+    color: var(--sp-text-muted, var(--sa-color-fg-muted));
 }
 .sp-bundle-store__card-desc {
     margin: 0;
-    font-size: 13px;
-    color: var(--sp-text-secondary, rgba(0, 0, 0, 0.6));
+    font-size: var(--sa-text-md);
+    color: var(--sp-text-secondary, var(--sa-color-fg-secondary));
 }
 .sp-bundle-store__card-feats {
-    font-size: 12px;
-    color: var(--sp-text-muted, rgba(0, 0, 0, 0.55));
+    font-size: var(--sa-text-sm);
+    color: var(--sp-text-muted, var(--sa-color-fg-muted));
 }
 .sp-bundle-store__card-feats-label {
     font-weight: 500;

package/src/pages-tenant/tenant-plan-section/TenantFeatureMatrix.vue

@@ -118,8 +118,8 @@ const features = computed<FeatureRow[]>(() => {
     flex-wrap: wrap;
 }
 .sp-feature-matrix__desc {
-    font-size: 12px;
-    color: var(--sp-text-muted, rgba(0, 0, 0, 0.55));
+    font-size: var(--sa-text-sm);
+    color: var(--sp-text-muted, var(--sa-color-fg-muted));
     margin-top: 2px;
 }
 </style>