@saasicat/ui-vue 0.22.2 → 0.23.0

package/dist/{use-super-admin-i18n-CHNdsSlm.d.ts → use-sa-theme-OUBlaqgl.d.ts}

@@ -280,4 +280,54 @@ declare function useSuperAdminI18n(): SuperAdminI18n;
  */
 declare function useSaMessages<K extends keyof SaMessages>(namespace: K): ComputedRef<SaMessages[K]>;
 
-export { type ActionsMap as A, type ExtensionsMap as E, type InstallPlugin as I, type SuperAdminGuardOptions as S, type UiNotify as U, type SuperAdminBrand as a, type SuperAdminEndpoints as b, type SuperAdminLoginAdapter as c, type SuperAdminI18nOptions as d, type SuperAdminI18n as e, type ExtensionLoader as f, SA_LOCALE_STORAGE_KEY as g, SUPER_ADMIN_ACTIONS_KEY as h, SUPER_ADMIN_BRAND_KEY as i, SUPER_ADMIN_ENDPOINTS_KEY as j, SUPER_ADMIN_EXTENSIONS_KEY as k, SUPER_ADMIN_HTTP_KEY as l, SUPER_ADMIN_I18N_KEY as m, SUPER_ADMIN_LOGIN_ADAPTER_KEY as n, SUPER_ADMIN_MANIFEST_CLEAR_CACHE_KEY as o, SUPER_ADMIN_MANIFEST_KEY as p, SUPER_ADMIN_NOTIFY_KEY as q, type SuperAdminAuthGuardOptions as r, type SuperAdminLoginResult as s, type SuperAdminManifestGuardOptions as t, type UiNotifyKind as u, type UiNotifyOptions as v, buildNavigationGuard as w, createSuperAdminI18n as x, useSaMessages as y, useSuperAdminI18n as z };
+type SaColorScheme = 'light' | 'dark' | 'system';
+type SaResolvedScheme = 'light' | 'dark';
+interface SaTheme {
+    /** What the operator picked. Writable — assigning switches the theme. */
+    scheme: Ref<SaColorScheme>;
+    /** What that means right now: `'system'` resolved against the OS. */
+    resolved: ComputedRef<SaResolvedScheme>;
+    /**
+     * Releases the `prefers-color-scheme` subscription and the persistence
+     * watcher. Idempotent.
+     *
+     * Needed because this context outlives no component — nothing unmounts it.
+     * A second shell in the same document (hot reload, a micro-frontend, a
+     * second test file) would otherwise leave the first one subscribed, and the
+     * next change of the operating system's theme would drive TWO bridges, both
+     * writing `data-sa-theme` and Quasar's `Dark` onto the one document. The
+     * stale one can win, and then the new shell's explicit scheme is overruled
+     * by a context nobody holds a reference to any more.
+     */
+    dispose: () => void;
+}
+interface SaThemeOptions {
+    /** Starting scheme. Pass a `Ref` to keep the value in your own store. */
+    scheme?: SaColorScheme | Ref<SaColorScheme>;
+    /**
+     * Remember the operator's pick across reloads, default `true`. Ignored when
+     * `scheme` is a `Ref`: the app owns that value and persists it where it
+     * belongs. Same rule as the locale in `createSuperAdminI18n`.
+     */
+    persist?: boolean;
+    /** Injection seam for tests. */
+    storage?: KvStore;
+}
+/**
+ * Creates the theme context. `createSuperAdminApp()` makes one and the Quasar
+ * bridge mirrors it onto the document; call it directly only when bootstrapping
+ * by hand.
+ */
+declare function createSaTheme(options?: SaThemeOptions): SaTheme;
+declare const SA_THEME_KEY: InjectionKey<SaTheme>;
+/**
+ * The shell's theme context, or a shared unpersisted one outside a shell.
+ *
+ * Same shape as `useSuperAdminI18n()`, and for the same reason: a component
+ * mounted in isolation must render rather than throw, and the fallback must not
+ * write to real storage or two tests in one process would decide each other's
+ * outcome.
+ */
+declare function useSaTheme(): SaTheme;
+
+export { type ActionsMap as A, type UiNotifyOptions as B, buildNavigationGuard as C, createSaTheme as D, type ExtensionsMap as E, createSuperAdminI18n as F, useSaMessages as G, useSaTheme as H, type InstallPlugin as I, useSuperAdminI18n as J, type SuperAdminGuardOptions as S, type UiNotify as U, type SuperAdminBrand as a, type SuperAdminEndpoints as b, type SuperAdminLoginAdapter as c, type SuperAdminI18nOptions as d, type SaThemeOptions as e, type SuperAdminI18n as f, type SaTheme as g, type ExtensionLoader as h, SA_LOCALE_STORAGE_KEY as i, SA_THEME_KEY as j, SUPER_ADMIN_ACTIONS_KEY as k, SUPER_ADMIN_BRAND_KEY as l, SUPER_ADMIN_ENDPOINTS_KEY as m, SUPER_ADMIN_EXTENSIONS_KEY as n, SUPER_ADMIN_HTTP_KEY as o, SUPER_ADMIN_I18N_KEY as p, SUPER_ADMIN_LOGIN_ADAPTER_KEY as q, SUPER_ADMIN_MANIFEST_CLEAR_CACHE_KEY as r, SUPER_ADMIN_MANIFEST_KEY as s, SUPER_ADMIN_NOTIFY_KEY as t, type SaColorScheme as u, type SaResolvedScheme as v, type SuperAdminAuthGuardOptions as w, type SuperAdminLoginResult as x, type SuperAdminManifestGuardOptions as y, type UiNotifyKind as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasicat/ui-vue",
-  "version": "0.22.2",
+  "version": "0.23.0",
   "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",
@@ -41,6 +41,9 @@
     "./pages-standard/*": "./src/pages-standard/*",
     "./pages-tenant/*": "./src/pages-tenant/*",
     "./components/*": "./src/components/*",
+    "./theme.css": "./src/ui/theme/index.css",
+    "./theme/breakpoints": "./src/ui/theme/_breakpoints.scss",
+    "./theme/*": "./src/ui/theme/*",
     "./sa-theme.css": "./src/pages-standard/sa-theme.css",
     "./testing-e2e/*": {
       "import": {
@@ -58,7 +61,7 @@
     "src"
   ],
   "dependencies": {
-    "@saasicat/types": "^0.22.2"
+    "@saasicat/types": "^0.23.0"
   },
   "peerDependencies": {
     "pinia": "^2.0.0 || ^3.0.0",

package/src/components/BundleVersionPublishDialog.vue

@@ -300,8 +300,8 @@ function formatValue(v: unknown): string {
     gap: 16px;
 }
 .bvpd__label {
-    font-size: 12px;
-    color: var(--q-grey-7, #757575);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-muted);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-bottom: 6px;
@@ -313,18 +313,18 @@ function formatValue(v: unknown): string {
     padding: 32px;
 }
 .bvpd__warnings {
-    border-left: 4px solid var(--q-warning, #f2c037);
+    border-left: 4px solid var(--sa-color-warning-strong);
 }
 .bvpd__neutral {
-    border-left: 4px solid var(--q-grey-7, #757575);
+    border-left: 4px solid var(--sa-color-border-strong);
 }
 .bvpd__regression {
-    border-left: 4px solid var(--q-negative, #c10015);
+    border-left: 4px solid var(--sa-color-negative);
 }
 .bvpd__validity {
     padding: 12px;
-    background: var(--sa-bg-surface-2);
-    border: 1px solid var(--sa-border);
+    background: var(--sa-color-bg-sunken);
+    border: 1px solid var(--sa-color-border);
     border-radius: 8px;
 }
 .bvpd__validity-grid {
@@ -335,36 +335,36 @@ function formatValue(v: unknown): string {
 .bvpd__field {
     display: grid;
     gap: 6px;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     font-weight: 700;
-    color: var(--sa-muted-dark);
+    color: var(--sa-color-fg-secondary);
 }
 .bvpd__input {
     min-height: 36px;
-    border: 1px solid #cbd5e1;
+    border: 1px solid var(--sa-color-border-strong);
     border-radius: 6px;
     padding: 0 10px;
     font: inherit;
-    color: var(--sa-heading);
-    background: #fff;
+    color: var(--sa-color-fg-heading);
+    background: var(--sa-color-bg-surface);
 }
 .bvpd__error {
     margin: 8px 0 0;
-    color: var(--q-negative, #c10015);
-    font-size: 12px;
+    color: var(--sa-color-negative);
+    font-size: var(--sa-text-sm);
     font-weight: 700;
 }
 .bvpd__list {
     margin: 8px 0 0;
     padding-left: 20px;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .bvpd__old {
-    color: var(--q-negative, #c10015);
+    color: var(--sa-color-negative);
     text-decoration: line-through;
 }
 .bvpd__new {
-    color: var(--q-positive, #21ba45);
+    color: var(--sa-color-positive);
     font-weight: 600;
 }
 </style>

package/src/components/KvBlock.vue

@@ -15,22 +15,22 @@ defineProps<{ label: string; value: string }>();
 
 <style scoped>
 .kv {
-    background: var(--sa-bg-surface-2);
-    border: 1px solid var(--sa-border);
+    background: var(--sa-color-bg-sunken);
+    border: 1px solid var(--sa-color-border);
     border-radius: 10px;
     padding: 10px 12px;
 }
 .kv__label {
-    color: var(--sa-muted);
-    font-size: 11px;
+    color: var(--sa-color-fg-muted);
+    font-size: var(--sa-text-xs);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     font-weight: 700;
 }
 .kv__value {
-    font-size: 14px;
+    font-size: var(--sa-text-lg);
     font-weight: 600;
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
     margin-top: 4px;
 }
 </style>

package/src/components/MarketingPromotionsTab.vue

@@ -581,65 +581,65 @@ async function onRemove(p: PromotionRow): Promise<void> {
     flex: 1;
 }
 .mc-promo-title {
-    font-size: 15px;
+    font-size: var(--sa-text-lg);
     font-weight: 700;
 }
 .mc-promo-subtitle {
-    font-size: 12px;
-    color: var(--sa-muted);
+    font-size: var(--sa-text-sm);
+    color: var(--sa-color-fg-muted);
 }
 .mc-promo-stats {
     display: flex;
     gap: 8px;
 }
 .mc-promo-stat {
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
     font-weight: 600;
     padding: 3px 9px;
     border-radius: 999px;
-    background: var(--sa-border-soft);
-    color: var(--sa-muted-dark);
+    background: var(--sa-color-border-soft);
+    color: var(--sa-color-fg-secondary);
 }
 .mc-promo-stat.active {
-    background: #dcfce7;
-    color: #166534;
+    background: var(--sa-color-positive-surface-strong);
+    color: var(--sa-color-positive-fg);
 }
 .mc-promo-stat.scheduled {
-    background: #dbeafe;
-    color: var(--sa-primary-strong);
+    background: var(--sa-color-scheduled-surface);
+    color: var(--sa-color-scheduled-fg);
 }
 .mc-promo-stat.expired {
-    background: var(--sa-border-soft);
-    color: var(--sa-muted-light);
+    background: var(--sa-color-border-soft);
+    color: var(--sa-color-fg-subtle);
 }
 .mc-promo-timeline {
-    background: #fff;
-    border: 1px solid var(--sa-border);
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
     border-radius: 10px;
     padding: 12px 14px;
 }
 .mc-promo-timeline-head {
-    font-size: 11px;
-    color: var(--sa-muted);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-muted);
     margin-bottom: 6px;
 }
 .mc-promo-timeline-chart {
     position: relative;
-    border-left: 1px solid var(--sa-border);
+    border-left: 1px solid var(--sa-color-border);
 }
 .mc-promo-tick {
     position: absolute;
     top: 0;
     bottom: 0;
     width: 1px;
-    background: var(--sa-border-soft);
+    background: var(--sa-color-border-soft);
 }
 .mc-promo-tick-label {
     position: absolute;
     bottom: 0;
     left: 3px;
-    font-size: 9px;
-    color: var(--sa-muted-light);
+    font-size: var(--sa-text-2xs);
+    color: var(--sa-color-fg-subtle);
     white-space: nowrap;
 }
 .mc-promo-today {
@@ -647,14 +647,14 @@ async function onRemove(p: PromotionRow): Promise<void> {
     top: 0;
     bottom: 18px;
     width: 0;
-    border-left: 2px dashed #ef4444;
+    border-left: 2px dashed var(--sa-color-negative-strong);
 }
 .mc-promo-today span {
     position: absolute;
     top: -2px;
     left: 3px;
-    font-size: 9px;
-    color: #ef4444;
+    font-size: var(--sa-text-2xs);
+    color: var(--sa-color-negative-strong);
     font-weight: 700;
 }
 .mc-promo-bar {
@@ -671,8 +671,8 @@ async function onRemove(p: PromotionRow): Promise<void> {
     opacity: 0.45;
 }
 .mc-promo-bar-label {
-    font-size: 10px;
-    color: #fff;
+    font-size: var(--sa-text-2xs);
+    color: var(--sa-color-fg-on-accent);
     font-weight: 600;
     padding: 0 6px;
     white-space: nowrap;
@@ -680,9 +680,9 @@ async function onRemove(p: PromotionRow): Promise<void> {
 .mc-promo-empty {
     padding: 28px;
     text-align: center;
-    color: var(--sa-muted-light);
-    font-size: 13px;
-    border: 1px dashed #cbd5e1;
+    color: var(--sa-color-fg-subtle);
+    font-size: var(--sa-text-md);
+    border: 1px dashed var(--sa-color-border-strong);
     border-radius: 10px;
 }
 .mc-promo-list {
@@ -694,14 +694,14 @@ async function onRemove(p: PromotionRow): Promise<void> {
     display: flex;
     align-items: center;
     gap: 12px;
-    background: #fff;
-    border: 1px solid var(--sa-border);
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
     border-radius: 8px;
     padding: 10px 12px;
     cursor: pointer;
 }
 .mc-promo-row.expanded {
-    border-color: #3f6bff;
+    border-color: var(--sa-color-accent);
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 }
@@ -716,7 +716,7 @@ async function onRemove(p: PromotionRow): Promise<void> {
     min-width: 0;
 }
 .mc-promo-row-title {
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     font-weight: 600;
 }
 .mc-promo-row-sub {
@@ -727,57 +727,57 @@ async function onRemove(p: PromotionRow): Promise<void> {
     margin-top: 2px;
 }
 .mc-promo-typechip {
-    font-size: 10px;
+    font-size: var(--sa-text-2xs);
     font-weight: 700;
-    background: var(--sa-primary-50);
-    color: var(--sa-primary-strong);
+    background: var(--sa-color-accent-surface-strong);
+    color: var(--sa-color-accent-strong);
     padding: 1px 6px;
     border-radius: 4px;
 }
 .mc-promo-planchip {
-    font-size: 10px;
-    background: var(--sa-border-soft);
-    color: var(--sa-muted-dark);
+    font-size: var(--sa-text-2xs);
+    background: var(--sa-color-border-soft);
+    color: var(--sa-color-fg-secondary);
     padding: 1px 6px;
     border-radius: 4px;
 }
 .mc-promo-muted {
-    font-size: 11px;
-    color: var(--sa-muted-light);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-subtle);
 }
 .mc-promo-row-when {
-    font-size: 11px;
-    color: var(--sa-muted);
+    font-size: var(--sa-text-xs);
+    color: var(--sa-color-fg-muted);
     text-align: right;
 }
 .mc-promo-cycle {
     display: block;
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
 }
 .mc-promo-status {
-    font-size: 10px;
+    font-size: var(--sa-text-2xs);
     font-weight: 700;
     text-transform: uppercase;
     padding: 3px 8px;
     border-radius: 6px;
 }
 .mc-promo-status.active {
-    background: #dcfce7;
-    color: #166534;
+    background: var(--sa-color-positive-surface-strong);
+    color: var(--sa-color-positive-fg);
 }
 .mc-promo-status.scheduled {
-    background: #dbeafe;
-    color: var(--sa-primary-strong);
+    background: var(--sa-color-scheduled-surface);
+    color: var(--sa-color-scheduled-fg);
 }
 .mc-promo-status.expired {
-    background: var(--sa-border-soft);
-    color: var(--sa-muted-light);
+    background: var(--sa-color-border-soft);
+    color: var(--sa-color-fg-subtle);
 }
 .mc-promo-editor {
-    border: 1px solid #3f6bff;
+    border: 1px solid var(--sa-color-accent);
     border-top: 0;
     border-radius: 0 0 8px 8px;
-    background: var(--sa-bg-surface-2);
+    background: var(--sa-color-bg-sunken);
     padding: 14px;
 }
 .mc-promo-editor-grid {
@@ -791,18 +791,18 @@ async function onRemove(p: PromotionRow): Promise<void> {
     gap: 6px;
 }
 .mc-promo-label {
-    font-size: 10px;
+    font-size: var(--sa-text-2xs);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: var(--sa-muted-dark);
+    color: var(--sa-color-fg-secondary);
     margin-top: 6px;
 }
 .mc-promo-input {
-    border: 1px solid #cbd5e1;
+    border: 1px solid var(--sa-color-border-strong);
     border-radius: 6px;
     padding: 6px 8px;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 .mc-promo-input--sm {
     max-width: 90px;
@@ -818,17 +818,17 @@ async function onRemove(p: PromotionRow): Promise<void> {
     gap: 6px;
 }
 .mc-promo-typeopt {
-    border: 1px solid #cbd5e1;
-    background: #fff;
+    border: 1px solid var(--sa-color-border-strong);
+    background: var(--sa-color-bg-surface);
     border-radius: 6px;
     padding: 5px 10px;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     cursor: pointer;
 }
 .mc-promo-typeopt.active {
-    border-color: #3f6bff;
-    background: var(--sa-primary-50);
-    color: var(--sa-primary-strong);
+    border-color: var(--sa-color-accent);
+    background: var(--sa-color-accent-surface-strong);
+    color: var(--sa-color-accent-strong);
     font-weight: 600;
 }
 .mc-promo-planlist {
@@ -839,34 +839,34 @@ async function onRemove(p: PromotionRow): Promise<void> {
 .mc-promo-planopt {
     display: flex;
     justify-content: space-between;
-    border: 1px solid #cbd5e1;
-    background: #fff;
+    border: 1px solid var(--sa-color-border-strong);
+    background: var(--sa-color-bg-surface);
     border-radius: 6px;
     padding: 6px 10px;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     cursor: pointer;
 }
 .mc-promo-planopt.active {
-    border-color: #3f6bff;
-    background: var(--sa-primary-50);
+    border-color: var(--sa-color-accent);
+    background: var(--sa-color-accent-surface-strong);
 }
 .mc-promo-planopt code {
-    color: var(--sa-muted-light);
-    font-size: 10px;
+    color: var(--sa-color-fg-subtle);
+    font-size: var(--sa-text-2xs);
 }
 .mc-promo-i18n-block {
     display: flex;
     flex-direction: column;
     gap: 4px;
     padding: 8px;
-    border: 1px solid var(--sa-border);
+    border: 1px solid var(--sa-color-border);
     border-radius: 8px;
-    background: #fff;
+    background: var(--sa-color-bg-surface);
 }
 .mc-promo-i18n-code {
-    font-size: 10px;
+    font-size: var(--sa-text-2xs);
     font-weight: 700;
-    background: var(--sa-border-soft);
+    background: var(--sa-color-border-soft);
     padding: 2px 7px;
     border-radius: 5px;
     align-self: flex-start;
@@ -883,16 +883,16 @@ async function onRemove(p: PromotionRow): Promise<void> {
     cursor: pointer;
 }
 .mc-promo-colorbtn.active {
-    border-color: var(--sa-heading);
+    border-color: var(--sa-color-fg-heading);
 }
 .mc-promo-delete {
     margin-top: 12px;
     align-self: flex-start;
-    border: 1px solid #fecaca;
-    background: #fef2f2;
-    color: #b91c1c;
+    border: 1px solid var(--sa-color-negative-border);
+    background: var(--sa-color-negative-surface);
+    color: var(--sa-color-negative-fg);
     font-weight: 600;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     padding: 6px 12px;
     border-radius: 6px;
     cursor: pointer;

package/src/components/MfaPromptDialog.vue

@@ -102,9 +102,9 @@ function onConfirm() {
     padding-bottom: 0;
 }
 code {
-    background: rgba(15, 23, 42, 0.06);
+    background: var(--sa-color-bg-sunken);
     padding: 1px 6px;
     border-radius: 4px;
-    font-size: 11px;
+    font-size: var(--sa-text-xs);
 }
 </style>

package/src/components/TenantActionConfirmDialog.vue

@@ -236,19 +236,19 @@ function onCancel(): void {
 }
 .tenant-action-confirm__lead {
     margin: 0 0 12px;
-    color: var(--sa-muted-dark);
+    color: var(--sa-color-fg-secondary);
     line-height: 1.5;
 }
 .tenant-action-confirm__hint {
     margin: 0 0 8px;
-    color: var(--sa-muted-dark);
-    font-size: 13px;
+    color: var(--sa-color-fg-secondary);
+    font-size: var(--sa-text-md);
 }
 .tenant-action-confirm__hint code {
-    background: var(--sa-border-soft);
+    background: var(--sa-color-border-soft);
     padding: 1px 6px;
     border-radius: 4px;
     font-family: ui-monospace, SFMono-Regular, monospace;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
 }
 </style>

package/src/components/VersionDiffPreview.vue

@@ -109,12 +109,12 @@ function formatValue(value: unknown): string {
 
 <style scoped>
 .sa-diff-preview__empty {
-    color: var(--sa-muted);
+    color: var(--sa-color-fg-muted);
     font-style: italic;
     padding: 12px;
-    background: var(--sa-bg-surface-2);
+    background: var(--sa-color-bg-sunken);
     border-radius: 8px;
-    border: 1px dashed #cbd5e1;
+    border: 1px dashed var(--sa-color-border-strong);
 }
 .sa-diff-preview__list {
     display: flex;
@@ -128,35 +128,35 @@ function formatValue(value: unknown): string {
     padding: 8px 12px;
     border-radius: 8px;
     border: 1px solid;
-    font-size: 13px;
+    font-size: var(--sa-text-md);
     align-items: center;
 }
 .sa-diff-preview__row--improvement {
-    background: #f0fdf4;
-    border-color: #bbf7d0;
-    color: #166534;
+    background: var(--sa-color-positive-surface);
+    border-color: var(--sa-color-positive-border);
+    color: var(--sa-color-positive-fg);
 }
 .sa-diff-preview__row--regression {
-    background: #fef2f2;
-    border-color: #fecaca;
-    color: #991b1b;
+    background: var(--sa-color-negative-surface);
+    border-color: var(--sa-color-negative-border);
+    color: var(--sa-color-negative-fg);
 }
 .sa-diff-preview__row--neutral {
-    background: var(--sa-bg-surface-2);
-    border-color: var(--sa-border);
-    color: var(--sa-muted-dark);
+    background: var(--sa-color-bg-sunken);
+    border-color: var(--sa-color-border);
+    color: var(--sa-color-fg-secondary);
 }
 .sa-diff-preview__direction {
     display: flex;
     align-items: center;
     gap: 6px;
     font-weight: 600;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
     text-transform: uppercase;
     letter-spacing: 0.04em;
 }
 .sa-diff-preview__field {
-    color: var(--sa-heading);
+    color: var(--sa-color-fg-heading);
     font-weight: 500;
 }
 .sa-diff-preview__values {
@@ -165,15 +165,15 @@ function formatValue(value: unknown): string {
     gap: 8px;
 }
 .sa-diff-preview__values .old {
-    color: var(--sa-muted-light);
+    color: var(--sa-color-fg-subtle);
     text-decoration: line-through;
     font-family: ui-monospace, 'SF Mono', Menlo, monospace;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
 }
 .sa-diff-preview__values .new {
     color: inherit;
     font-weight: 600;
     font-family: ui-monospace, 'SF Mono', Menlo, monospace;
-    font-size: 12px;
+    font-size: var(--sa-text-sm);
 }
 </style>