@saasicat/ui-vue 0.19.0 → 0.22.0

package/src/client/i18n/messages/common.ts

@@ -27,6 +27,9 @@ export const commonMessages = defineMessages(
         loading: 'Lade …',
         saving: 'Speichere …',
         loadingData: 'Daten werden geladen…',
+        noData: 'Keine Daten vorhanden',
+        filters: 'Filter',
+        results: 'Ergebnisse',
         error: 'Fehler',
         errorLoadFailed: 'Laden fehlgeschlagen',
         errorSaveFailed: 'Speichern fehlgeschlagen',
@@ -73,6 +76,15 @@ export const commonMessages = defineMessages(
         both: 'Beide',
         createFailed: 'Anlegen fehlgeschlagen',
         noChanges: 'Keine Änderungen',
+        paginator: {
+            label: 'Seitennavigation',
+            rowsPerPage: 'Zeilen pro Seite',
+            all: 'Alle',
+            page: 'Seite {page}/{pages}',
+            pageInput: 'Seite, 1 bis {pages}',
+            previous: 'Vorherige Seite',
+            next: 'Nächste Seite',
+        },
     },
     {
         save: 'Save',
@@ -97,6 +109,9 @@ export const commonMessages = defineMessages(
         loading: 'Loading …',
         saving: 'Saving …',
         loadingData: 'Loading data…',
+        noData: 'No data available',
+        filters: 'Filters',
+        results: 'Results',
         error: 'Error',
         errorLoadFailed: 'Failed to load',
         errorSaveFailed: 'Failed to save',
@@ -143,5 +158,14 @@ export const commonMessages = defineMessages(
         both: 'Both',
         createFailed: 'Creation failed',
         noChanges: 'No changes',
+        paginator: {
+            label: 'Pagination',
+            rowsPerPage: 'Rows per page',
+            all: 'All',
+            page: 'Page {page}/{pages}',
+            pageInput: 'Page, 1 to {pages}',
+            previous: 'Previous page',
+            next: 'Next page',
+        },
     },
 );

package/src/client/i18n/messages/discovery.ts

@@ -91,7 +91,7 @@ export const discoveryMessages = defineMessages(
             usageProvider: 'UsageProvider',
             usageProviderMissing: 'fehlt',
             noUsageProviderWarning:
-                'Eine harte Quota ohne UsageProvider ist nicht deploy-fähig (Preflight, SPEC_V2 §6.3).',
+                'Eine harte Quota ohne UsageProvider ist nicht deploy-fähig (Preflight).',
             outdatedBanner:
                 'Die code-abgeleiteten Quota-Fakten (Einheit/Enforcement/Provider) haben sich seit der letzten Freigabe geändert — bitte prüfen und',
         },
@@ -202,7 +202,7 @@ export const discoveryMessages = defineMessages(
             usageProvider: 'UsageProvider',
             usageProviderMissing: 'missing',
             noUsageProviderWarning:
-                'A hard quota without a UsageProvider is not deployable (preflight, SPEC_V2 §6.3).',
+                'A hard quota without a UsageProvider is not deployable (preflight).',
             outdatedBanner:
                 'The code-derived quota facts (unit/enforcement/provider) have changed since the last approval — please review and',
         },

package/src/client/i18n/messages/marketing.ts

@@ -16,7 +16,6 @@ export const marketingMessages = defineMessages(
             defaultLocale: 'Default-Sprache',
             deactivateLocale: 'Sprache deaktivieren',
             addLocale: '+ Sprache',
-            refresh: 'Aktualisieren',
         },
         page: {
             loading: 'Lade Marketing-Catalog …',
@@ -89,7 +88,7 @@ export const marketingMessages = defineMessages(
         promotionsTab: {
             title: 'Aktionen & Rabatte',
             subtitle:
-                'Zeitlich begrenzte Preis-Aktionen — überschreiben den regulären Preis auf der Pricing-Page (SPEC_V2 §9a).',
+                'Zeitlich begrenzte Preis-Aktionen — überschreiben den regulären Preis auf der Pricing-Page.',
             add: '+ Aktion anlegen',
             timelineHead: 'Aktions-Timeline · gestrichelt = heute',
             today: 'heute',
@@ -150,7 +149,6 @@ export const marketingMessages = defineMessages(
             defaultLocale: 'Default language',
             deactivateLocale: 'Deactivate language',
             addLocale: '+ Language',
-            refresh: 'Refresh',
         },
         page: {
             loading: 'Loading marketing catalog …',
@@ -221,7 +219,7 @@ export const marketingMessages = defineMessages(
         promotionsTab: {
             title: 'Promotions & discounts',
             subtitle:
-                'Time-limited price promotions — they override the regular price on the pricing page (SPEC_V2 §9a).',
+                'Time-limited price promotions — they override the regular price on the pricing page.',
             add: '+ Create promotion',
             timelineHead: 'Promotion timeline · dashed = today',
             today: 'today',

package/src/client/i18n/messages/plan-detail.ts

@@ -26,10 +26,8 @@ export const planDetailMessages = defineMessages(
             versionsSummary: '{published} live/superseded',
             versionsSummaryWithDrafts: '{published} live/superseded · {drafts} Draft',
             openDraft: 'Offener Draft',
-            noDraft: 'Kein Draft',
             readyToEdit: 'Bereit zum Bearbeiten',
             noOpenDraft: 'Keine Draft-Version offen',
-            createNewDraft: 'Neue Draft anlegen',
         },
         versions: {
             title: 'Versionen',
@@ -157,10 +155,8 @@ export const planDetailMessages = defineMessages(
             versionsSummary: '{published} live/superseded',
             versionsSummaryWithDrafts: '{published} live/superseded · {drafts} draft',
             openDraft: 'Open draft',
-            noDraft: 'No draft',
             readyToEdit: 'Ready to edit',
             noOpenDraft: 'No draft version open',
-            createNewDraft: 'Create a new draft',
         },
         versions: {
             title: 'Versions',

package/src/client/i18n/messages/plans.ts

@@ -5,6 +5,8 @@ export const plansMessages = defineMessages(
         // PlansPage — shell of the plan area: loading state, toasts and the
         // error texts of the draft/publish/archive/discard actions.
         page: {
+            subtitle:
+                'Pläne bündeln Features & Quotas zu einem Angebot. Jede Änderung wird als neue Version veröffentlicht — Live-Versionen bleiben unangetastet.',
             loading: 'Pläne werden geladen…',
             toastPlanCreated: 'Plan {planKey} angelegt — jetzt die erste Version zusammenstellen.',
             toastDraftSaved: 'Draft v{version} von {planKey} gespeichert.',
@@ -68,8 +70,10 @@ export const plansMessages = defineMessages(
         // PlanList — default plan overview with one row per plan.
         list: {
             title: 'Alle Pläne',
-            summary:
-                '{plans} Pläne · {live} live · {drafts} offene Drafts · {tenants} Mandanten zugeordnet',
+            statPlans: 'Pläne',
+            statLive: 'Live',
+            statDrafts: 'Offene Drafts',
+            statTenants: 'Mandanten',
             matrixView: 'Matrix-Ansicht',
             newPlan: 'Neuer Plan',
             searchPlaceholder: 'Plan suchen…',
@@ -108,8 +112,10 @@ export const plansMessages = defineMessages(
         // PlanMatrix — all plans side by side, components as rows.
         matrix: {
             title: 'Pläne · Matrix-Vergleich',
-            summary:
-                'Alle Pläne nebeneinander · {plans} Pläne · {features} Features · {quotas} Quotas · {bundles} Bundles',
+            statPlans: 'Pläne',
+            statFeatures: 'Features',
+            statQuotas: 'Quotas',
+            statBundles: 'Bundles',
             catalogPreview: 'Catalog-Vorschau',
             createPlan: 'Plan anlegen',
             createPlanSub: 'oder Klon erstellen',
@@ -260,6 +266,8 @@ export const plansMessages = defineMessages(
     },
     {
         page: {
+            subtitle:
+                'Plans bundle features & quotas into an offering. Every change ships as a new version — live versions stay untouched.',
             loading: 'Loading plans…',
             toastPlanCreated: 'Plan {planKey} created — now assemble the first version.',
             toastDraftSaved: 'Draft v{version} of {planKey} saved.',
@@ -319,8 +327,10 @@ export const plansMessages = defineMessages(
         },
         list: {
             title: 'All plans',
-            summary:
-                '{plans} plans · {live} live · {drafts} open drafts · {tenants} tenants assigned',
+            statPlans: 'Plans',
+            statLive: 'Live',
+            statDrafts: 'Open drafts',
+            statTenants: 'Tenants',
             matrixView: 'Matrix view',
             newPlan: 'New plan',
             searchPlaceholder: 'Search plan…',
@@ -358,8 +368,10 @@ export const plansMessages = defineMessages(
         },
         matrix: {
             title: 'Plans · matrix comparison',
-            summary:
-                'All plans side by side · {plans} plans · {features} features · {quotas} quotas · {bundles} bundles',
+            statPlans: 'Plans',
+            statFeatures: 'Features',
+            statQuotas: 'Quotas',
+            statBundles: 'Bundles',
             catalogPreview: 'Catalog preview',
             createPlan: 'Create plan',
             createPlanSub: 'or create a clone',

package/src/client/i18n/messages/tenants.ts

@@ -14,7 +14,6 @@ export const tenantsMessages = defineMessages(
             columnCreatedAt: 'Angelegt',
             suspended: 'Suspendiert',
             empty: 'Keine Mandanten mit diesen Filtern.',
-            pagination: '{total} Mandanten · Seite {page} / {pages}',
         },
         detail: {
             backToList: 'Mandanten-Liste',
@@ -63,7 +62,6 @@ export const tenantsMessages = defineMessages(
             columnCreatedAt: 'Created',
             suspended: 'Suspended',
             empty: 'No tenants match these filters.',
-            pagination: '{total} tenants · Page {page} / {pages}',
         },
         detail: {
             backToList: 'Tenant list',

package/src/client/index.ts

@@ -25,3 +25,4 @@ export * from './batch-column-fetcher.js';
 export * from './admin-resource-client.js';
 export * from './i18n/index.js';
 export * from './login-branding.js';
+export * from './resolve-plans.js';

package/src/client/manifest-loader.ts

@@ -106,7 +106,7 @@ export class ManifestLoader {
         if (res.status !== 200) {
             throw new ManifestLoadError(
                 res.status,
-                `Manifest-Endpunkt antwortete HTTP ${res.status}`,
+                `Manifest endpoint responded with HTTP ${res.status}`,
             );
         }
 

package/src/client/resolve-plans.ts

@@ -0,0 +1,144 @@
+// Resolving plans into what a listing actually shows — which version is live,
+// which are scheduled, which is the open draft — and the four counts derived
+// from that.
+//
+// It lives outside the components because two of them need the same answer:
+// `PlanList` renders the rows, and `PlansPage` shows the counts above it. The
+// alternative was the same sixty lines in both, drifting apart the first time
+// a validity rule changed.
+//
+// Framework-free on purpose: no Vue, so the rules can be tested as plain data
+// in and data out.
+
+export interface PlanRowLike {
+    id: string;
+    planKey: string;
+    label: string;
+    description?: string | null;
+    sortOrder: number;
+}
+
+export interface PlanVersionLike {
+    id: string;
+    publishedAt?: string | null;
+    validFrom?: string | null;
+    validUntil?: string | null;
+}
+
+export interface ResolvedPlan<P extends PlanRowLike, V extends PlanVersionLike> {
+    plan: P;
+    planKey: string;
+    label: string;
+    description: string | null;
+    /** Version currently active for new bookings. */
+    currentLive: V | null;
+    /** Version shown on the parent row — the live one where there is one. */
+    primary: V | null;
+    /** Future-published versions first, then drafts. */
+    subRows: V[];
+    hasAnyVersion: boolean;
+    /** Every version has run out: hidden from the admin listing. */
+    allExpired: boolean;
+    draft: V | null;
+    tenantCount: number;
+}
+
+export function todayIsoDate(): string {
+    return new Date().toISOString().slice(0, 10);
+}
+
+export function isCurrentlyValid(v: PlanVersionLike, today: string): boolean {
+    if (!v.publishedAt) return false;
+    if (v.validFrom && v.validFrom.slice(0, 10) > today) return false;
+    if (v.validUntil && v.validUntil.slice(0, 10) < today) return false;
+    return true;
+}
+
+export function isFutureScheduled(v: PlanVersionLike, today: string): boolean {
+    if (!v.publishedAt) return false;
+    if (!v.validFrom) return false;
+    return v.validFrom.slice(0, 10) > today;
+}
+
+export function isExpired(v: PlanVersionLike, today: string): boolean {
+    if (!v.publishedAt) return false;
+    if (!v.validUntil) return false;
+    return v.validUntil.slice(0, 10) < today;
+}
+
+export interface ResolvePlansInput<P extends PlanRowLike, V extends PlanVersionLike> {
+    plans: readonly P[];
+    versionsByPlanId: Record<string, V[]>;
+    tenantCountsByPlanKey: Record<string, number>;
+    /** Injectable for tests; defaults to today. */
+    today?: string;
+}
+
+export function resolvePlans<P extends PlanRowLike, V extends PlanVersionLike>({
+    plans,
+    versionsByPlanId,
+    tenantCountsByPlanKey,
+    today = todayIsoDate(),
+}: ResolvePlansInput<P, V>): ResolvedPlan<P, V>[] {
+    return [...plans]
+        .sort((a, b) => a.sortOrder - b.sortOrder || a.planKey.localeCompare(b.planKey))
+        .map<ResolvedPlan<P, V>>((plan) => {
+            const versions = versionsByPlanId[plan.id] ?? [];
+            const drafts = versions.filter((v) => !v.publishedAt);
+            const published = versions.filter((v) => Boolean(v.publishedAt));
+            const currentLive = published.find((v) => isCurrentlyValid(v, today)) ?? null;
+            const futureScheduled = published
+                .filter((v) => isFutureScheduled(v, today))
+                .sort((a, b) => (a.validFrom ?? '').localeCompare(b.validFrom ?? ''));
+
+            // Parent row: the live version where there is one, otherwise the
+            // next scheduled one, otherwise nothing — a plan with only drafts
+            // still gets a row.
+            const primary = currentLive ?? futureScheduled[0] ?? null;
+
+            const seen = new Set<string>();
+            if (primary) seen.add(primary.id);
+            const subRows: V[] = [];
+            for (const v of [...futureScheduled, ...drafts]) {
+                if (seen.has(v.id)) continue;
+                subRows.push(v);
+                seen.add(v.id);
+            }
+
+            return {
+                plan,
+                planKey: plan.planKey,
+                label: plan.label,
+                description: plan.description ?? null,
+                currentLive,
+                primary,
+                subRows,
+                hasAnyVersion: versions.length > 0,
+                allExpired:
+                    versions.length > 0 &&
+                    drafts.length === 0 &&
+                    futureScheduled.length === 0 &&
+                    published.every((v) => isExpired(v, today)),
+                draft: drafts[0] ?? null,
+                tenantCount: tenantCountsByPlanKey[plan.planKey] ?? 0,
+            };
+        });
+}
+
+export interface PlanCounts {
+    plans: number;
+    live: number;
+    drafts: number;
+    tenants: number;
+}
+
+export function countPlans<P extends PlanRowLike, V extends PlanVersionLike>(
+    resolved: readonly ResolvedPlan<P, V>[],
+): PlanCounts {
+    return {
+        plans: resolved.length,
+        live: resolved.filter((p) => p.currentLive !== null).length,
+        drafts: resolved.filter((p) => p.draft !== null).length,
+        tenants: resolved.reduce((sum, p) => sum + p.tenantCount, 0),
+    };
+}

package/src/components/BundleVersionPublishDialog.vue

@@ -130,7 +130,7 @@
                     "
                     :loading="submitting"
                     :disable="!canSubmit"
-                    @click="submit"
+                    @click="onSubmit"
                 />
             </q-card-actions>
         </q-card>
@@ -246,7 +246,7 @@ function close(): void {
     open.value = false;
 }
 
-async function submit(): Promise<void> {
+async function onSubmit(): Promise<void> {
     if (!canSubmit.value) return;
     submitting.value = true;
     try {
@@ -323,8 +323,8 @@ function formatValue(v: unknown): string {
 }
 .bvpd__validity {
     padding: 12px;
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
+    background: var(--sa-bg-surface-2);
+    border: 1px solid var(--sa-border);
     border-radius: 8px;
 }
 .bvpd__validity-grid {
@@ -337,7 +337,7 @@ function formatValue(v: unknown): string {
     gap: 6px;
     font-size: 12px;
     font-weight: 700;
-    color: #475569;
+    color: var(--sa-muted-dark);
 }
 .bvpd__input {
     min-height: 36px;
@@ -345,7 +345,7 @@ function formatValue(v: unknown): string {
     border-radius: 6px;
     padding: 0 10px;
     font: inherit;
-    color: #0f172a;
+    color: var(--sa-heading);
     background: #fff;
 }
 .bvpd__error {

package/src/components/KvBlock.vue

@@ -15,13 +15,13 @@ defineProps<{ label: string; value: string }>();
 
 <style scoped>
 .kv {
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
+    background: var(--sa-bg-surface-2);
+    border: 1px solid var(--sa-border);
     border-radius: 10px;
     padding: 10px 12px;
 }
 .kv__label {
-    color: #64748b;
+    color: var(--sa-muted);
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 0.05em;
@@ -30,7 +30,7 @@ defineProps<{ label: string; value: string }>();
 .kv__value {
     font-size: 14px;
     font-weight: 600;
-    color: #0f172a;
+    color: var(--sa-heading);
     margin-top: 4px;
 }
 </style>

package/src/components/MarketingPromotionsTab.vue

@@ -17,7 +17,7 @@
                     {{ counts.expired }} {{ msg.promotionsTab.statusExpired }}
                 </span>
             </div>
-            <button class="mc-promo-add" type="button" :disabled="busy" @click="onAdd">
+            <button class="sa-btn sa-btn--primary" type="button" :disabled="busy" @click="onAdd">
                 {{ msg.promotionsTab.add }}
             </button>
         </div>
@@ -325,7 +325,7 @@ import {
 import { formatMessage } from '../client/i18n/format.js';
 import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 
-// Promotions tab of the Marketing Catalog (SPEC_V2 §9a). Standalone child
+// Promotions tab of the Marketing Catalog. Standalone child
 // component — the MarketingCatalogPage wires `usePromotions` and passes the
 // list + CRUD callbacks through.
 
@@ -586,7 +586,7 @@ async function onRemove(p: PromotionRow): Promise<void> {
 }
 .mc-promo-subtitle {
     font-size: 12px;
-    color: #64748b;
+    color: var(--sa-muted);
 }
 .mc-promo-stats {
     display: flex;
@@ -597,8 +597,8 @@ async function onRemove(p: PromotionRow): Promise<void> {
     font-weight: 600;
     padding: 3px 9px;
     border-radius: 999px;
-    background: #f1f5f9;
-    color: #475569;
+    background: var(--sa-border-soft);
+    color: var(--sa-muted-dark);
 }
 .mc-promo-stat.active {
     background: #dcfce7;
@@ -606,54 +606,40 @@ async function onRemove(p: PromotionRow): Promise<void> {
 }
 .mc-promo-stat.scheduled {
     background: #dbeafe;
-    color: #1d4ed8;
+    color: var(--sa-primary-strong);
 }
 .mc-promo-stat.expired {
-    background: #f1f5f9;
-    color: #94a3b8;
-}
-.mc-promo-add {
-    border: 0;
-    background: #3f6bff;
-    color: #fff;
-    font-weight: 600;
-    font-size: 13px;
-    padding: 8px 14px;
-    border-radius: 8px;
-    cursor: pointer;
-}
-.mc-promo-add:disabled {
-    opacity: 0.5;
-    cursor: default;
+    background: var(--sa-border-soft);
+    color: var(--sa-muted-light);
 }
 .mc-promo-timeline {
     background: #fff;
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--sa-border);
     border-radius: 10px;
     padding: 12px 14px;
 }
 .mc-promo-timeline-head {
     font-size: 11px;
-    color: #64748b;
+    color: var(--sa-muted);
     margin-bottom: 6px;
 }
 .mc-promo-timeline-chart {
     position: relative;
-    border-left: 1px solid #e2e8f0;
+    border-left: 1px solid var(--sa-border);
 }
 .mc-promo-tick {
     position: absolute;
     top: 0;
     bottom: 0;
     width: 1px;
-    background: #f1f5f9;
+    background: var(--sa-border-soft);
 }
 .mc-promo-tick-label {
     position: absolute;
     bottom: 0;
     left: 3px;
     font-size: 9px;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     white-space: nowrap;
 }
 .mc-promo-today {
@@ -694,7 +680,7 @@ async function onRemove(p: PromotionRow): Promise<void> {
 .mc-promo-empty {
     padding: 28px;
     text-align: center;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     font-size: 13px;
     border: 1px dashed #cbd5e1;
     border-radius: 10px;
@@ -709,7 +695,7 @@ async function onRemove(p: PromotionRow): Promise<void> {
     align-items: center;
     gap: 12px;
     background: #fff;
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--sa-border);
     border-radius: 8px;
     padding: 10px 12px;
     cursor: pointer;
@@ -743,30 +729,30 @@ async function onRemove(p: PromotionRow): Promise<void> {
 .mc-promo-typechip {
     font-size: 10px;
     font-weight: 700;
-    background: #eff6ff;
-    color: #1d4ed8;
+    background: var(--sa-primary-50);
+    color: var(--sa-primary-strong);
     padding: 1px 6px;
     border-radius: 4px;
 }
 .mc-promo-planchip {
     font-size: 10px;
-    background: #f1f5f9;
-    color: #475569;
+    background: var(--sa-border-soft);
+    color: var(--sa-muted-dark);
     padding: 1px 6px;
     border-radius: 4px;
 }
 .mc-promo-muted {
     font-size: 11px;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
 }
 .mc-promo-row-when {
     font-size: 11px;
-    color: #64748b;
+    color: var(--sa-muted);
     text-align: right;
 }
 .mc-promo-cycle {
     display: block;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
 }
 .mc-promo-status {
     font-size: 10px;
@@ -781,17 +767,17 @@ async function onRemove(p: PromotionRow): Promise<void> {
 }
 .mc-promo-status.scheduled {
     background: #dbeafe;
-    color: #1d4ed8;
+    color: var(--sa-primary-strong);
 }
 .mc-promo-status.expired {
-    background: #f1f5f9;
-    color: #94a3b8;
+    background: var(--sa-border-soft);
+    color: var(--sa-muted-light);
 }
 .mc-promo-editor {
     border: 1px solid #3f6bff;
     border-top: 0;
     border-radius: 0 0 8px 8px;
-    background: #f8fafc;
+    background: var(--sa-bg-surface-2);
     padding: 14px;
 }
 .mc-promo-editor-grid {
@@ -809,7 +795,7 @@ async function onRemove(p: PromotionRow): Promise<void> {
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: #475569;
+    color: var(--sa-muted-dark);
     margin-top: 6px;
 }
 .mc-promo-input {
@@ -841,8 +827,8 @@ async function onRemove(p: PromotionRow): Promise<void> {
 }
 .mc-promo-typeopt.active {
     border-color: #3f6bff;
-    background: #eff6ff;
-    color: #1d4ed8;
+    background: var(--sa-primary-50);
+    color: var(--sa-primary-strong);
     font-weight: 600;
 }
 .mc-promo-planlist {
@@ -862,10 +848,10 @@ async function onRemove(p: PromotionRow): Promise<void> {
 }
 .mc-promo-planopt.active {
     border-color: #3f6bff;
-    background: #eff6ff;
+    background: var(--sa-primary-50);
 }
 .mc-promo-planopt code {
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     font-size: 10px;
 }
 .mc-promo-i18n-block {
@@ -873,14 +859,14 @@ async function onRemove(p: PromotionRow): Promise<void> {
     flex-direction: column;
     gap: 4px;
     padding: 8px;
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--sa-border);
     border-radius: 8px;
     background: #fff;
 }
 .mc-promo-i18n-code {
     font-size: 10px;
     font-weight: 700;
-    background: #f1f5f9;
+    background: var(--sa-border-soft);
     padding: 2px 7px;
     border-radius: 5px;
     align-self: flex-start;
@@ -897,7 +883,7 @@ async function onRemove(p: PromotionRow): Promise<void> {
     cursor: pointer;
 }
 .mc-promo-colorbtn.active {
-    border-color: #0f172a;
+    border-color: var(--sa-heading);
 }
 .mc-promo-delete {
     margin-top: 12px;