@saasicat/ui-vue 0.23.0 → 0.24.1

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { BootLoaderOptions, ManifestLoaderOptions, BuildRouteEntry, SidebarSection, NavBuilderOptions, BatchColumnData, BatchColumnFetcherOptions, BootLoader, ManifestLoader } from './client/index.js';
-export { ADMIN_UI_VERSION, AdminPromoListFilter, AdminPromoListRow, AdminResourceClientOptions, BatchColumnDriftError, BatchColumnFetcher, BatchColumnRow, BatchColumnValue, BootLoadError, CachedManifestEntry, DEFAULT_STANDARD_PAGE_ROUTES, HttpJsonError, LoginBootProject, LoginBrandFallback, LoginBranding, ManifestLoadError, MessageParams, ParamStyle, PlanCounts, PlanRowLike, PlanVersionLike, ResolvePlansInput, ResolvedPlan, SidebarItem, buildRoutes, buildSidebar, countPlans, createAdminResourceClient, defaultSectionOrder, formatCurrency, formatMessage, getJson, isCurrentlyValid, isExpired, isFutureScheduled, isProductionBoot, postJson, resolveExtension, resolveLoginBranding, resolvePlans, todayIsoDate, trimTrailingSlashes } from './client/index.js';
+export { ADMIN_UI_VERSION, AdminPromoListFilter, AdminPromoListRow, AdminResourceClientOptions, BatchColumnDriftError, BatchColumnFetcher, BatchColumnRow, BatchColumnValue, BootLoadError, CachedManifestEntry, DEFAULT_STANDARD_PAGE_ROUTES, HttpJsonError, IDENTITY_ACCENTS, IDENTITY_ACCENT_VALUES, IDENTITY_NEUTRAL, IDENTITY_NEUTRAL_VALUE, LoginBootProject, LoginBrandFallback, LoginBranding, ManifestLoadError, MessageParams, ParamStyle, PlanCounts, PlanRowLike, PlanVersionLike, ResolvePlansInput, ResolvedPlan, SidebarItem, buildRoutes, buildSidebar, countPlans, createAdminResourceClient, defaultSectionOrder, formatCurrency, formatMessage, getJson, identityAccentAt, identityAccentFor, identityChipStyle, isCurrentlyValid, isExpired, isFutureScheduled, isProductionBoot, postJson, resolveExtension, resolveLoginBranding, resolvePlans, todayIsoDate, trimTrailingSlashes } from './client/index.js';
 import { H as HttpClient, e as ActionRegistry, A as ActionHandler, K as KvStore, S as SaLocale } from './catalog-DJcfm5N2.js';
 export { f as ActionDefNotInManifestError, D as DEFAULT_SA_LOCALE, g as HttpResponse, M as MessageTree, h as MissingHandlerError, P as PartialMessages, R as ResolvedAction, i as SA_INTL_LOCALES, j as SA_LOCALES, k as SA_LOCALE_LABELS, l as SA_MESSAGES, m as SaBuiltinLocale, n as SaCatalog, o as SaCatalogOptions, c as SaLocaleDefinition, b as SaLocaleOption, a as SaMessages, d as SaMessagesOverrides, T as TranslationOf, p as createSaCatalog, q as defaultHttpClient, r as defaultKvStore, s as defineMessages, t as isSaBuiltinLocale, u as mergeMessages, v as resolveMessages } from './catalog-DJcfm5N2.js';
 import { A as ActionsMap, a as SuperAdminBrand, b as SuperAdminEndpoints, E as ExtensionsMap, c as SuperAdminLoginAdapter } from './use-sa-theme-OUBlaqgl.js';
@@ -1777,5 +1777,68 @@ declare const DEFAULT_I18N_DE: TenantPlanSectionI18n;
 declare const DEFAULT_I18N_EN: TenantPlanSectionI18n;
 /** Default map for the given UI locale — fallback layer under the `i18n` prop. */
 declare function defaultTenantPlanSectionI18n(locale: SaLocale): TenantPlanSectionI18n;
+/**
+ * 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`.
+ */
+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.
+ */
+declare function planChangeWizardI18n(i18n: TenantPlanSectionI18n): PlanChangeWizardI18n;
 
-export { ALL_ROWS, ActionHandler, ActionRegistry, ActionsMap, type ApiListResponse, BatchColumnData, BatchColumnFetcherOptions, type BillingCycleStr, BootLoader, BootLoaderOptions, BuildRouteEntry, type BulkItemKind, type BulkItemStatus, type BulkPublishItem, type BundleAddPreviewShape, type BundleCancelPreviewShape, type BundlePreviewIssueShape, type BundlePreviewShape, type BundlePreviewSnapshotShape, BundlesApiError, CATALOG_DEFAULT_LOCALE, type CatalogBundle, CatalogEntriesApiError, type CatalogPlan, type ConfirmDialogState, type CreateAdminRoutesOptions, type CreateManifestStoreOptions, type CreatePlatformLoadersOptions, DEFAULT_I18N_DE, DEFAULT_I18N_EN, DEFAULT_ROWS_PER_PAGE, DEFAULT_YEARLY_FACTOR, DiscoveryLoadError, type DraftPricing, ENTITLEMENT_INJECTION_KEY, type EmailHistoryDetail, type EmailHistoryFilter, type EmailHistoryListResult, type EmailHistoryResendResult, type EmailHistoryRow, type EmailHistoryStatus, type EntitlementSnapshotShape, ExtensionsMap, type FeatureRegistryEntry, type FeatureRouterGuardOptions, type FeatureRowMarkers, HttpClient, KvStore, ManifestLoader, ManifestLoaderOptions, type ManifestStoreActions, type ManifestStoreDefinition, type ManifestStoreState, MarketingProjectionsApiError, type MfaDialogState, NavBuilderOptions, PAGE_SIZE_OPTIONS, type PackageSnapshotShape, type PilotCopy, type PilotCreatePayload, type PilotCreateResult, type PilotEditPayload, type PilotEditResult, type PlanChangePreviewShape, type PlanSnapshotShape, PlannedOnlyFeatureError, PlansApiError, type PlatformEmailProvider, type PlatformEmailTestInput, type PlatformEmailTestResult, type PlatformEmailWriteInput, type PlatformLoaders, type PlatformTenantActionRow, type PlatformTenantActionTone, type PlatformTenantActionsOptions, type PlatformTenantActionsResult, type PriceLineItem, ProjectPageHost, type PromoCodeCreatePayload, type PromoCodeDurationType, type PromoCodePlanOption, type PromoCodeUpdatePayload, type PromoCodeValueType, type PromoState, type PromoStatus, PromotionsApiError, type QuotaMeta, type RedundantFeatureHintShape, type ResolvedTenantAction, SERVER_PAGE_SIZE_OPTIONS, SaLocale, SidebarSection, type SubscriptionBundleShape, type SubscriptionDraft, SuperAdminBrand, SuperAdminEndpoints, SuperAdminLoginAdapter, type TenantActionFlowProviders, type TenantActionInput, type TenantManifestNavItem, type TenantManifestShape, type TenantPlanSectionI18n, type TenantRowLike, TenantSubscriptionBundlesApiError, type UsageSnapshotShape, type UseActionsResult, type UseApiListOptions, type UseApiListResult, type UseAuditEntriesOptions, type UseAuditEntriesResult, type UseBatchColumnsResult, type UseBulkPublishOptions, type UseBulkPublishResult, type UseBundleVersionsMapOptions, type UseBundleVersionsMapResult, type UseBundleVersionsOptions, type UseBundleVersionsResult, type UseBundlesOptions, type UseBundlesResult, type UseCatalogEntriesOptions, type UseCatalogEntriesResult, type UseDiscoveryOptions, type UseDiscoveryResult, type UseEntitlementOptions, type UseEntitlementResult, type UseLivePlanVersionsOptions, type UseLivePlanVersionsResult, type UseManifestResult, type UseMarketingProjectionsOptions, type UseMarketingProjectionsResult, type UseNavResult, type UsePaginationResult, type UsePlanEditorOptions, type UsePlanEditorResult, type UsePlanVersionsOptions, type UsePlanVersionsResult, type UsePlansOptions, type UsePlansResult, type UsePromotionsOptions, type UsePromotionsResult, type UsePublicBootResult, type UseSubscriptionDraftOptions, type UseTenantActionFlowResult, type UseTenantBillingCatalogOptions, type UseTenantBillingCatalogResult, type UseTenantBillingOptions, type UseTenantBillingResult, type UseTenantManifestOptions, type UseTenantManifestResult, type UseTenantSubscriptionBundlesOptions, type UseTenantSubscriptionBundlesResult, type UseTenantsOptions, type UseTenantsResult, buildFeatureRegistry, buildFeatureRouterGuard, buildQuotaRegistry, createAdminRoutes, createManifestStore, createPlatformLoaders, createProjectPageHostRoute, defaultIconForActionKey, defaultTenantPlanSectionI18n, defaultToneForActionKey, provideEntitlement, useActions, useApiList, useAuditEntries, useBatchColumns, useBulkPublish, useBundleVersions, useBundleVersionsMap, useBundles, useCatalogEntries, useDiscovery, useEntitlement, useInjectedEntitlement, useLivePlanVersions, useManifest, useMarketingProjections, useNav, usePagination, usePlanEditor, usePlanVersions, usePlans, usePlatformTenantActions, usePromotions, usePublicBoot, useSubscriptionDraft, useSuperAdminActions, useSuperAdminBrand, useSuperAdminEndpoints, useSuperAdminExtensions, useSuperAdminHttp, useSuperAdminLoginAdapter, useSuperAdminManifest, useTenantActionFlow, useTenantBilling, useTenantBillingCatalog, useTenantManifest, useTenantSubscriptionBundles, useTenants };
+export { ALL_ROWS, ActionHandler, ActionRegistry, ActionsMap, type ApiListResponse, BatchColumnData, BatchColumnFetcherOptions, type BillingCycleStr, BootLoader, BootLoaderOptions, BuildRouteEntry, type BulkItemKind, type BulkItemStatus, type BulkPublishItem, type BundleAddPreviewShape, type BundleCancelPreviewShape, type BundlePreviewIssueShape, type BundlePreviewShape, type BundlePreviewSnapshotShape, BundlesApiError, CATALOG_DEFAULT_LOCALE, type CatalogBundle, CatalogEntriesApiError, type CatalogPlan, type ConfirmDialogState, type CreateAdminRoutesOptions, type CreateManifestStoreOptions, type CreatePlatformLoadersOptions, DEFAULT_I18N_DE, DEFAULT_I18N_EN, DEFAULT_ROWS_PER_PAGE, DEFAULT_YEARLY_FACTOR, DiscoveryLoadError, type DraftPricing, ENTITLEMENT_INJECTION_KEY, type EmailHistoryDetail, type EmailHistoryFilter, type EmailHistoryListResult, type EmailHistoryResendResult, type EmailHistoryRow, type EmailHistoryStatus, type EntitlementSnapshotShape, ExtensionsMap, type FeatureRegistryEntry, type FeatureRouterGuardOptions, type FeatureRowMarkers, HttpClient, KvStore, ManifestLoader, ManifestLoaderOptions, type ManifestStoreActions, type ManifestStoreDefinition, type ManifestStoreState, MarketingProjectionsApiError, type MfaDialogState, NavBuilderOptions, PAGE_SIZE_OPTIONS, type PackageSnapshotShape, type PilotCopy, type PilotCreatePayload, type PilotCreateResult, type PilotEditPayload, type PilotEditResult, type PlanChangePreviewShape, type PlanChangeWizardI18n, type PlanSnapshotShape, PlannedOnlyFeatureError, PlansApiError, type PlatformEmailProvider, type PlatformEmailTestInput, type PlatformEmailTestResult, type PlatformEmailWriteInput, type PlatformLoaders, type PlatformTenantActionRow, type PlatformTenantActionTone, type PlatformTenantActionsOptions, type PlatformTenantActionsResult, type PriceLineItem, ProjectPageHost, type PromoCodeCreatePayload, type PromoCodeDurationType, type PromoCodePlanOption, type PromoCodeUpdatePayload, type PromoCodeValueType, type PromoState, type PromoStatus, PromotionsApiError, type QuotaMeta, type RedundantFeatureHintShape, type ResolvedTenantAction, SERVER_PAGE_SIZE_OPTIONS, SaLocale, SidebarSection, type SubscriptionBundleShape, type SubscriptionDraft, SuperAdminBrand, SuperAdminEndpoints, SuperAdminLoginAdapter, type TenantActionFlowProviders, type TenantActionInput, type TenantManifestNavItem, type TenantManifestShape, type TenantPlanSectionI18n, type TenantRowLike, TenantSubscriptionBundlesApiError, type UsageSnapshotShape, type UseActionsResult, type UseApiListOptions, type UseApiListResult, type UseAuditEntriesOptions, type UseAuditEntriesResult, type UseBatchColumnsResult, type UseBulkPublishOptions, type UseBulkPublishResult, type UseBundleVersionsMapOptions, type UseBundleVersionsMapResult, type UseBundleVersionsOptions, type UseBundleVersionsResult, type UseBundlesOptions, type UseBundlesResult, type UseCatalogEntriesOptions, type UseCatalogEntriesResult, type UseDiscoveryOptions, type UseDiscoveryResult, type UseEntitlementOptions, type UseEntitlementResult, type UseLivePlanVersionsOptions, type UseLivePlanVersionsResult, type UseManifestResult, type UseMarketingProjectionsOptions, type UseMarketingProjectionsResult, type UseNavResult, type UsePaginationResult, type UsePlanEditorOptions, type UsePlanEditorResult, type UsePlanVersionsOptions, type UsePlanVersionsResult, type UsePlansOptions, type UsePlansResult, type UsePromotionsOptions, type UsePromotionsResult, type UsePublicBootResult, type UseSubscriptionDraftOptions, type UseTenantActionFlowResult, type UseTenantBillingCatalogOptions, type UseTenantBillingCatalogResult, type UseTenantBillingOptions, type UseTenantBillingResult, type UseTenantManifestOptions, type UseTenantManifestResult, type UseTenantSubscriptionBundlesOptions, type UseTenantSubscriptionBundlesResult, type UseTenantsOptions, type UseTenantsResult, buildFeatureRegistry, buildFeatureRouterGuard, buildQuotaRegistry, createAdminRoutes, createManifestStore, createPlatformLoaders, createProjectPageHostRoute, defaultIconForActionKey, defaultTenantPlanSectionI18n, defaultToneForActionKey, planChangeWizardI18n, provideEntitlement, useActions, useApiList, useAuditEntries, useBatchColumns, useBulkPublish, useBundleVersions, useBundleVersionsMap, useBundles, useCatalogEntries, useDiscovery, useEntitlement, useInjectedEntitlement, useLivePlanVersions, useManifest, useMarketingProjections, useNav, usePagination, usePlanEditor, usePlanVersions, usePlans, usePlatformTenantActions, usePromotions, usePublicBoot, useSubscriptionDraft, useSuperAdminActions, useSuperAdminBrand, useSuperAdminEndpoints, useSuperAdminExtensions, useSuperAdminHttp, useSuperAdminLoginAdapter, useSuperAdminManifest, useTenantActionFlow, useTenantBilling, useTenantBillingCatalog, useTenantManifest, useTenantSubscriptionBundles, useTenants };

package/dist/index.js

@@ -8,6 +8,10 @@ import {
   BootLoader,
   DEFAULT_STANDARD_PAGE_ROUTES,
   HttpJsonError,
+  IDENTITY_ACCENTS,
+  IDENTITY_ACCENT_VALUES,
+  IDENTITY_NEUTRAL,
+  IDENTITY_NEUTRAL_VALUE,
   ManifestLoadError,
   ManifestLoader,
   MissingHandlerError,
@@ -17,6 +21,9 @@ import {
   createAdminResourceClient,
   defaultSectionOrder,
   getJson,
+  identityAccentAt,
+  identityAccentFor,
+  identityChipStyle,
   isCurrentlyValid,
   isExpired,
   isFutureScheduled,
@@ -27,7 +34,7 @@ import {
   resolvePlans,
   todayIsoDate,
   trimTrailingSlashes
-} from "./chunk-XMMFN2WJ.js";
+} from "./chunk-D74FFCCP.js";
 import {
   SA_LOCALE_STORAGE_KEY,
   SA_THEME_KEY,
@@ -2826,6 +2833,55 @@ var DEFAULT_I18N_EN = {
 function defaultTenantPlanSectionI18n(locale) {
   return locale === "en" ? DEFAULT_I18N_EN : DEFAULT_I18N_DE;
 }
+function planChangeWizardI18n(i18n) {
+  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
+  };
+}
 export {
   ADMIN_UI_VERSION,
   ALL_ROWS,
@@ -2847,6 +2903,10 @@ export {
   DiscoveryLoadError,
   ENTITLEMENT_INJECTION_KEY,
   HttpJsonError,
+  IDENTITY_ACCENTS,
+  IDENTITY_ACCENT_VALUES,
+  IDENTITY_NEUTRAL,
+  IDENTITY_NEUTRAL_VALUE,
   ManifestLoadError,
   ManifestLoader,
   MarketingProjectionsApiError,
@@ -2899,12 +2959,16 @@ export {
   formatCurrency,
   formatMessage,
   getJson,
+  identityAccentAt,
+  identityAccentFor,
+  identityChipStyle,
   isCurrentlyValid,
   isExpired,
   isFutureScheduled,
   isProductionBoot,
   isSaBuiltinLocale,
   mergeMessages,
+  planChangeWizardI18n,
   postJson,
   provideEntitlement,
   resolveExtension,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasicat/ui-vue",
-  "version": "0.23.0",
+  "version": "0.24.1",
   "description": "Vue 3 components, resource clients and composables for the SuperAdmin UI shell. Provides boot and manifest loaders, navigation, actions and standard pages.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -61,7 +61,7 @@
     "src"
   ],
   "dependencies": {
-    "@saasicat/types": "^0.23.0"
+    "@saasicat/types": "^0.24.1"
   },
   "peerDependencies": {
     "pinia": "^2.0.0 || ^3.0.0",

package/src/client/identity-accents.ts

@@ -0,0 +1,167 @@
+// The one categorical palette, and the one way to tint from it.
+//
+// Five components used to carry their own six-colour ramp of hex literals —
+// `PlanList` and `PlanMatrix` byte for byte identical, `tenants/format.ts`
+// silently different (the same plan got one colour on the plans page and
+// another on the tenants page), `PromoCodesPage`, `MarketingPromotionsTab` and
+// `discovery-ui.ts` each with a third opinion. Every one of them was applied
+// through a `:style` binding, so none of them followed the theme: the plan mark
+// measured 2.96:1 on a dark surface and was carried as a named contrast
+// exception because there was no role to point it at.
+//
+// There is now one ramp, it lives in the theme, and it has a value per theme.
+//
+// A consumer may still hand in its own colours — `planAccents` is a public prop
+// and takes any CSS colour. That keeps working because every helper here mixes
+// rather than concatenates: `#7c3aed` + `'15'` needs a hex, and
+// `color-mix(in srgb, X 8%, transparent)` needs only a colour, which a
+// `var(--sa-color-identity-2)` also is.
+
+/**
+ * The categorical ramp, in the order an unnamed series should walk it.
+ *
+ * Seven entries, six of them hues plus the neutral. Long enough that a realistic
+ * plan list does not wrap, short enough that the colours stay tellable apart —
+ * a longer ramp is not a better one, it is a wheel of near-neighbours.
+ */
+export const IDENTITY_ACCENTS: readonly string[] = [
+    'var(--sa-color-identity-1)',
+    'var(--sa-color-identity-2)',
+    'var(--sa-color-identity-3)',
+    'var(--sa-color-identity-4)',
+    'var(--sa-color-identity-5)',
+    'var(--sa-color-identity-6)',
+];
+
+/**
+ * The same ramp as concrete colours, for values that are STORED rather than
+ * painted.
+ *
+ * A promotion's colour is data: the operator picks it, it goes over the wire,
+ * a database column holds it, and `CreatePromotionDto` caps it at 16
+ * characters. `var(--sa-color-identity-1)` is 28 and would fail validation on
+ * every create — which is exactly what happened when the swatches above were
+ * pointed at the token form. A token is paint; this is a value.
+ *
+ * These are the LIGHT theme's values, because a stored colour has to mean one
+ * thing wherever it is later rendered. `identity-accents-match-theme.test.js`
+ * binds each one to its role, so the two halves of the ramp cannot drift.
+ */
+export const IDENTITY_ACCENT_VALUES: readonly string[] = [
+    '#1d4ed8',
+    '#6d28d9',
+    '#047857',
+    '#b45309',
+    '#0369a1',
+    '#b91c1c',
+];
+
+/** The stored counterpart of `IDENTITY_NEUTRAL`. */
+export const IDENTITY_NEUTRAL_VALUE = '#64748b';
+
+/** For "no identity yet", and for the entry tier that should stay quiet. */
+export const IDENTITY_NEUTRAL = 'var(--sa-color-identity-neutral)';
+
+/**
+ * The accent for the nth member of a series, wrapping when the series is longer
+ * than the ramp.
+ *
+ * A negative or non-finite index yields the neutral rather than throwing:
+ * callers derive it from `findIndex`, which answers -1 for "not in the list",
+ * and a missing row is exactly the "no identity yet" case.
+ */
+export function identityAccentAt(index: number): string {
+    if (!Number.isFinite(index) || index < 0) return IDENTITY_NEUTRAL;
+    return IDENTITY_ACCENTS[Math.floor(index) % IDENTITY_ACCENTS.length]!;
+}
+
+/**
+ * The stable accent for a well-known key, so the standard plan tiers look the
+ * same on every screen that draws them.
+ *
+ * The tiers below are the ones the three former maps agreed on. `STARTER` and
+ * `BASIC` share the neutral because both are the entry tier — the earlier maps
+ * gave them two different greys, which said "these differ" about two things
+ * that do not.
+ */
+const WELL_KNOWN: Readonly<Record<string, string>> = {
+    STARTER: IDENTITY_NEUTRAL,
+    BASIC: IDENTITY_NEUTRAL,
+    STANDARD: 'var(--sa-color-identity-1)',
+    PRO: 'var(--sa-color-identity-2)',
+    PROFESSIONAL: 'var(--sa-color-identity-2)',
+    BUSINESS: 'var(--sa-color-identity-5)',
+    ENTERPRISE: 'var(--sa-color-identity-3)',
+};
+
+/**
+ * The accent for a key, in the order the product decides it.
+ *
+ * 1. what the consumer supplied, because it is their brand;
+ * 2. the well-known tier, so `ENTERPRISE` is the same colour everywhere;
+ * 3. the ramp position, so an unknown key still gets a stable colour;
+ * 4. the neutral.
+ */
+export function identityAccentFor(
+    key: string,
+    overrides: Readonly<Record<string, string>> = {},
+    index = -1,
+): string {
+    return overrides[key] ?? WELL_KNOWN[key] ?? identityAccentAt(index);
+}
+
+/**
+ * How much of the accent survives when the accent becomes TEXT.
+ *
+ * The remainder comes from `--sa-color-fg-heading`, which is near-black in the
+ * light theme and near-white in the dark one. So a single expression darkens
+ * the accent in one theme and lightens it in the other, which is the same move
+ * `--sa-color-accent-strong` makes for the brand.
+ *
+ * It is not the brand's 82 %, and the difference is the point. The brand is one
+ * curated colour, checked by a person against both surfaces. This helper's
+ * input is uncontrolled: a plan's stored hex, a consumer's `planAccents`, a
+ * colour an operator picked out of a swatch. A share tuned for one colour is
+ * not a bound over all of them, and 82 % measurably is not one — three of the
+ * six colours the promotion editor itself stores stay under 3:1 on a raised
+ * dark card (2.81 to 2.98), and a light brand pick such as lime-400 only
+ * reaches 2.03:1 on a raised light one.
+ *
+ * At half, every colour in sRGB stays at or above 3.3:1 in light and 3.7:1 in
+ * dark, both extremes being the degenerate accents — an accent that already IS
+ * the theme's own extreme cannot be pushed further from the surface, so pure
+ * white decides the light bound and pure black the dark one. That is a bound
+ * over the whole cube rather than over a sample, which is what an uncontrolled
+ * input needs. `theme-role-contrast` measures it and fails if this share rises.
+ */
+const READABLE_ACCENT_SHARE = 50;
+
+/**
+ * The three-part chip style every one of these sites was hand-rolling: a wash
+ * of the accent, a readable rendering of the accent as text, a firmer edge.
+ *
+ * `color-mix()` rather than the `accent + '15'` string concatenation it
+ * replaces. That trick only worked on a six-digit hex — it silently produced
+ * garbage for `rgb()`, for a named colour and for anything a consumer might
+ * reasonably pass — and it could never have worked for a `var()`, which is why
+ * these palettes could not follow the theme in the first place.
+ *
+ * The text is a mix rather than the accent itself. A `var(--sa-color-identity-N)`
+ * would not need that — the ramp has a value per theme, so it already suits both
+ * surfaces. A concrete hex has one value for both, and a concrete hex is what
+ * reaches here from a stored plan colour or from a consumer's `planAccents`; on
+ * whichever theme it lands nearest the surface it fades into its own wash.
+ *
+ * Callers may still override any of the three. `PromoCodeDialogFields` replaces
+ * the border with the plan's undiluted colour, and `PlanDiffCard` takes only the
+ * wash and the edge — an inline style beats the class beneath it, which is how
+ * the chip kept its own unreadable foreground through a fix applied to the
+ * selected-state rules around it.
+ */
+export function identityChipStyle(accent: string): Record<string, string> {
+    return {
+        background: `color-mix(in srgb, ${accent} 8%, transparent)`,
+        color: `color-mix(in srgb, ${accent} ${READABLE_ACCENT_SHARE}%, var(--sa-color-fg-heading))`,
+        borderColor: `color-mix(in srgb, ${accent} 20%, transparent)`,
+    };
+}

package/src/client/index.ts

@@ -26,3 +26,4 @@ export * from './admin-resource-client.js';
 export * from './i18n/index.js';
 export * from './login-branding.js';
 export * from './resolve-plans.js';
+export * from './identity-accents.js';

package/src/components/MarketingPromotionsTab.vue

@@ -361,7 +361,11 @@ const cycleOptions = computed<Array<{ id: PromotionBillingCycle; label: string }
     { id: 'yearly', label: common.value.yearly },
     { id: 'both', label: common.value.both },
 ]);
-const COLORS = ['#10b981', '#dc2626', '#f59e0b', '#2563eb', '#7c3aed', '#0f172a'];
+import { IDENTITY_ACCENT_VALUES } from '../client/identity-accents.js';
+
+// Concrete values, not tokens: every swatch here is PATCHed to
+// `/catalog/promotions` and stored, and the DTO caps `color` at 16 characters.
+const COLORS = IDENTITY_ACCENT_VALUES;
 
 const today = new Date();
 
@@ -550,7 +554,7 @@ async function onAdd(): Promise<void> {
         validFrom: new Date().toISOString().slice(0, 10),
         validTo: new Date(today.getTime() + 30 * 86400000).toISOString().slice(0, 10),
         priority: 5,
-        color: '#2563eb',
+        color: IDENTITY_ACCENT_VALUES[0],
         i18n: { [DEFAULT_LOCALE]: { badge: 'Aktion' } },
     });
     expandedId.value = created.id;

package/src/components/bundle-editor/BundleVersionInlineEditor.vue

@@ -506,7 +506,7 @@ function recordsEqual(a: Record<string, number>, b: Record<string, number>): boo
     grid-template-columns: 1fr 1fr;
     gap: 18px;
 }
-@media (max-width: 1100px) {
+@media (max-width: 1023.98px) {
     .bve-grid {
         grid-template-columns: 1fr;
     }

package/src/components/dialogs/PromoCodeDialogFields.vue

@@ -101,13 +101,13 @@
         <div class="pc-grid pc-grid--2">
             <div class="pc-field">
                 <div class="pc-field__label">{{ msg.form.durationLabel }}</div>
-                <div class="pc-dur">
+                <div class="pc-seg pc-seg--fill">
                     <button
                         v-for="o in durationOptions"
                         :key="o.k"
                         type="button"
-                        class="pc-dur-opt"
-                        :class="{ 'pc-dur-opt--active': form.durationType === o.k }"
+                        class="pc-seg-opt"
+                        :class="{ 'pc-seg-opt--active': form.durationType === o.k }"
                         @click="form.durationType = o.k"
                     >
                         {{ o.label }}
@@ -161,13 +161,13 @@
         <div v-if="mode === 'edit'" class="pc-grid pc-grid--2">
             <div class="pc-field">
                 <div class="pc-field__label">{{ common.status }}</div>
-                <div class="pc-status">
+                <div class="pc-seg pc-status">
                     <button
                         v-for="o in statusOptions"
                         :key="o.k"
                         type="button"
-                        class="pc-status-opt"
-                        :class="{ 'pc-status-opt--active': form.status === o.k }"
+                        class="pc-seg-opt"
+                        :class="{ 'pc-seg-opt--active': form.status === o.k }"
                         @click="form.status = o.k"
                     >
                         <q-icon :name="o.icon" size="14px" />
@@ -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(() => {
@@ -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;
     }
@@ -594,8 +595,8 @@ textarea.pc-input {
 
 .pc-plan-opt--on {
     border-color: var(--sa-color-accent);
-    background: var(--sa-color-accent-surface);
-    color: var(--sa-color-accent);
+    background: var(--sa-color-accent-surface-strong);
+    color: var(--sa-color-accent-strong);
 }
 
 .pc-plan-opt__mark {
@@ -604,13 +605,25 @@ textarea.pc-input {
     border-radius: 50%;
 }
 
-.pc-dur {
+/* One segmented control for both the duration and the status row. They are the
+ * same thing — a row of buttons of which one is chosen — and the status row had
+ * NO rules at all, so it rendered as raw browser buttons: white boxes on a dark
+ * dialog. Sharing the recipe is what makes the two look alike without either
+ * restating it. */
+.pc-seg {
     display: flex;
     gap: 4px;
 }
-
-.pc-dur-opt {
+/* The duration options divide the row; the status options size to their label. */
+.pc-seg--fill .pc-seg-opt {
     flex: 1;
+}
+
+.pc-seg-opt {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--sa-gap-inline);
     border: 1px solid var(--sa-color-border);
     background: var(--sa-color-bg-surface);
     border-radius: 7px;
@@ -620,10 +633,19 @@ textarea.pc-input {
     color: var(--sa-color-fg-secondary);
 }
 
-.pc-dur-opt--active {
+.pc-seg-opt:hover {
+    border-color: var(--sa-color-border-strong);
+}
+
+/* `-accent-strong` on `-surface-strong`, which is what the design guide
+ * prescribes for accent text on a tint. The chosen option used to pair plain
+ * `--sa-color-accent` with the 8 % wash of itself: in dark mode that is the
+ * brand blue on a near-black blue, and the selected state was the one you could
+ * read least — the opposite of what selecting something should do. */
+.pc-seg-opt--active {
     border-color: var(--sa-color-accent);
-    background: var(--sa-color-accent-surface);
-    color: var(--sa-color-accent);
+    background: var(--sa-color-accent-surface-strong);
+    color: var(--sa-color-accent-strong);
 }
 
 .pc-check {

package/src/components/plan/PromoCodeInput.vue

@@ -107,7 +107,7 @@ function remove(): void {
     border: 1px dashed var(--sa-color-accent-border);
     background: var(--sa-color-accent-surface-soft);
     border-radius: 10px;
-    color: var(--sa-color-accent);
+    color: var(--sa-color-accent-strong);
     font-weight: 700;
     font-size: var(--sa-text-sm);
     cursor: pointer;

package/src/components/plan-create-dialog/PlanCreateDialog.vue

@@ -497,7 +497,7 @@ function onCancel(): void {
     display: inline-flex;
 }
 
-@media (max-width: 540px) {
+@media (max-width: 599.98px) {
     .pcd-row--2col,
     .pcd-choice-grid {
         grid-template-columns: 1fr;

package/src/components/plan-detail/PlanDetail.vue

@@ -579,10 +579,15 @@ async function executeTerminate(): Promise<void> {
     font-weight: 700;
 }
 .pd-timeline-seg.draft {
+    /* Hatched from the two warning TINTS, not from the saturated amber.
+     * `--sa-color-warning-strong` is a border and icon tone: it put the label
+     * at 2.34:1 in light and 1.34:1 in dark on every second stripe. The tinted
+     * pair is what the guide documents for text on a status surface, and what
+     * `.live` above already uses. */
     background: repeating-linear-gradient(
         135deg,
-        var(--sa-color-warning-border) 0 8px,
-        var(--sa-color-warning-strong) 8px 16px
+        var(--sa-color-warning-surface) 0 8px,
+        var(--sa-color-warning-surface-strong) 8px 16px
     );
     color: var(--sa-color-warning-fg);
     font-weight: 700;
@@ -1004,7 +1009,7 @@ async function executeTerminate(): Promise<void> {
     flex: 1;
 }
 
-@media (max-width: 1180px) {
+@media (max-width: 1023.98px) {
     .pd-body {
         grid-template-columns: 1fr;
     }