@eifi1/ui-kit 0.33.0 → 0.34.0

package/src/theme/palette-presets.ts

@@ -128,6 +128,12 @@ export const DEFAULT_PRESET: PalettePreset = {
 };
 
 // Vetted alternatives to preview (CVD-safe, WCAG-AA on both themes).
+/**
+ * @deprecated 0.34 — `PALETTES`, the presets `presetById` and the palette store know, or
+ * `derivePalette` for a palette of the app's own; removed in 0.35 (refactor audit 2026-10,
+ * API-6c). A reference bank only: `presetById` resolves none of these ids, and no app
+ * imports it (deferred since the 2026-09-22 audit).
+ */
 export const ALTERNATIVE_PRESETS: PalettePreset[] = [
   {
     id: "warm-paper",
@@ -495,12 +501,19 @@ const PAUL_TOL = {
  *
  * Every text role here was solved to a contrast target against the worst of the three
  * surfaces it can land on, every semantic colour against both the page and its own badge
- * tint, and the whole set is re-checked by `derived-presets.test.ts` — which re-runs the
- * deriver and fails if these committed values drift from what it now produces.
+ * tint, and the whole set is re-checked by `__tests__/palette-audit.test.ts` ("derived
+ * presets") — which re-runs the deriver and fails if these committed values drift from
+ * what it now produces.
  *
  * They are committed rather than derived at import because deriving eight token sets
  * costs ~34ms, and charging every consumer that at startup for palettes most of them
  * will never select is the wrong trade. The test is what keeps the two in agreement.
+ *
+ * Regenerated in 0.34 (round 0.34 BUG-8): the solve now measures the hex it ships rather
+ * than the float before rounding, and the audit no longer lets a hex pair pass 0.05 under
+ * its threshold. 52 values moved one step (66 counting the heat stops that repeat them);
+ * Contrast's neutrals lost half their slate tint, its brand having half the chroma at
+ * which the neutrals carry a hue in full.
  */
 export const DERIVED_PRESETS: PalettePreset[] = [
   {
@@ -513,19 +526,19 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       bgSurface2: "#dce2ef",
       border: "#b0bace",
       textPrimary: "#2e3139",
-      textSecondary: "#454950",
-      textMuted: "#5f646c",
+      textSecondary: "#454850",
+      textMuted: "#5f636c",
       brand: "#2f5fd0",
       brandHover: "#1f4cbc",
       brandContrast: "#ffffff",
-      moneyIncome: "#00725e",
+      moneyIncome: "#00725f",
       moneyExpense: "#8e5900",
       moneyNet: "#7356a2",
-      moneyNeutral: "#61656c",
+      moneyNeutral: "#61646c",
       chart: PAUL_TOL.light,
       heat: {
         neutral: "#dce2ef",
-        under: "#00725e",
+        under: "#00725f",
         over: "#8e5900",
         seqLow: "#fee3c5",
         seqHigh: "#8e5900",
@@ -536,21 +549,21 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       bgPage: "#090d15",
       bgSurface: "#131720",
       bgSurface2: "#1d212b",
-      border: "#363e4e",
-      textPrimary: "#c7ccd5",
-      textSecondary: "#a7abb4",
-      textMuted: "#858992",
+      border: "#363e4f",
+      textPrimary: "#c8ccd6",
+      textSecondary: "#a7abb5",
+      textMuted: "#858a92",
       brand: "#3466d7",
       brandHover: "#2353c3",
       brandContrast: "#ffffff",
-      moneyIncome: "#00997f",
+      moneyIncome: "#009a80",
       moneyExpense: "#b77b29",
       moneyNet: "#9679c9",
       moneyNeutral: "#a1a5ac",
       chart: PAUL_TOL.dark,
       heat: {
         neutral: "#1d212b",
-        under: "#00997f",
+        under: "#009a80",
         over: "#b77b29",
         seqLow: "#331f05",
         seqHigh: "#b77b29",
@@ -567,20 +580,20 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       bgSurface: "#e3f1e8",
       bgSurface2: "#d8e6dd",
       border: "#abbfb2",
-      textPrimary: "#2c342e",
-      textSecondary: "#434b45",
+      textPrimary: "#2c332e",
+      textSecondary: "#424b45",
       textMuted: "#5d6660",
       brand: "#2f7a52",
       brandHover: "#196842",
       brandContrast: "#ffffff",
-      moneyIncome: "#00735f",
+      moneyIncome: "#00725f",
       moneyExpense: "#8e5900",
       moneyNet: "#7356a2",
-      moneyNeutral: "#5f6762",
+      moneyNeutral: "#5f6662",
       chart: PAUL_TOL.light,
       heat: {
         neutral: "#d8e6dd",
-        under: "#00735f",
+        under: "#00725f",
         over: "#8e5900",
         seqLow: "#fee3c5",
         seqHigh: "#8e5900",
@@ -591,24 +604,24 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       bgPage: "#060f0a",
       bgSurface: "#101a14",
       bgSurface2: "#1a241e",
-      border: "#314237",
-      textPrimary: "#c5cfc9",
-      textSecondary: "#a4aea8",
+      border: "#314337",
+      textPrimary: "#c6cfc9",
+      textSecondary: "#a5aea8",
       textMuted: "#838c86",
       brand: "#317b53",
       brandHover: "#1c6943",
       brandContrast: "#ffffff",
       moneyIncome: "#009a80",
-      moneyExpense: "#b87b2a",
-      moneyNet: "#9779c9",
+      moneyExpense: "#b87c2a",
+      moneyNet: "#977ac9",
       moneyNeutral: "#9fa7a2",
       chart: PAUL_TOL.dark,
       heat: {
         neutral: "#1a241e",
         under: "#009a80",
-        over: "#b87b2a",
+        over: "#b87c2a",
         seqLow: "#331f05",
-        seqHigh: "#b87b2a",
+        seqHigh: "#b87c2a",
         empty: "rgba(160,170,190,0.10)",
       },
     },
@@ -621,24 +634,24 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       bgPage: "#e7dfea",
       bgSurface: "#f2e9f5",
       bgSurface2: "#e7dfea",
-      border: "#c2b6c6",
-      textPrimary: "#342f36",
-      textSecondary: "#4c474e",
+      border: "#c2b5c6",
+      textPrimary: "#352f36",
+      textSecondary: "#4c464e",
       textMuted: "#676169",
       brand: "#7b3f8f",
       brandHover: "#692d7d",
       brandContrast: "#ffffff",
-      moneyIncome: "#00725e",
-      moneyExpense: "#8d5900",
+      moneyIncome: "#00715e",
+      moneyExpense: "#8d5800",
       moneyNet: "#7355a2",
-      moneyNeutral: "#676369",
+      moneyNeutral: "#676269",
       chart: PAUL_TOL.light,
       heat: {
         neutral: "#e7dfea",
-        under: "#00725e",
-        over: "#8d5900",
-        seqLow: "#fee3c4",
-        seqHigh: "#8d5900",
+        under: "#00715e",
+        over: "#8d5800",
+        seqLow: "#fee3c5",
+        seqHigh: "#8d5800",
         empty: "rgba(120,110,95,0.14)",
       },
     },
@@ -646,21 +659,21 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       bgPage: "#100b12",
       bgSurface: "#1b151d",
       bgSurface2: "#251f27",
-      border: "#453a48",
-      textPrimary: "#d0cad3",
+      border: "#453b48",
+      textPrimary: "#d0cad2",
       textSecondary: "#afa9b1",
-      textMuted: "#8d878f",
-      brand: "#9153a6",
-      brandHover: "#7f4193",
+      textMuted: "#8d8790",
+      brand: "#9154a6",
+      brandHover: "#7f4293",
       brandContrast: "#ffffff",
-      moneyIncome: "#00997f",
+      moneyIncome: "#009980",
       moneyExpense: "#b77b29",
-      moneyNet: "#9679c8",
+      moneyNet: "#9679c9",
       moneyNeutral: "#a8a2aa",
       chart: PAUL_TOL.dark,
       heat: {
         neutral: "#251f27",
-        under: "#00997f",
+        under: "#009980",
         over: "#b77b29",
         seqLow: "#331f05",
         seqHigh: "#b77b29",
@@ -673,24 +686,24 @@ export const DERIVED_PRESETS: PalettePreset[] = [
     name: "High contrast",
     blurb: "Near-neutral ground · text solved to 13:1 / 8.5:1 / 5.5:1",
     light: {
-      bgPage: "#e0e2e5",
-      bgSurface: "#ebedef",
-      bgSurface2: "#e0e2e5",
-      border: "#b7babe",
-      textPrimary: "#191d24",
-      textSecondary: "#373c44",
-      textMuted: "#535860",
+      bgPage: "#e1e2e3",
+      bgSurface: "#ecedee",
+      bgSurface2: "#e1e2e3",
+      border: "#b8babc",
+      textPrimary: "#1b1d21",
+      textSecondary: "#3a3c40",
+      textMuted: "#55585c",
       brand: "#1f2937",
       brandHover: "#111b28",
       brandContrast: "#ffffff",
-      moneyIncome: "#00715d",
+      moneyIncome: "#00715e",
       moneyExpense: "#8d5800",
       moneyNet: "#7255a1",
-      moneyNeutral: "#5f646b",
+      moneyNeutral: "#616467",
       chart: PAUL_TOL.light,
       heat: {
-        neutral: "#e0e2e5",
-        under: "#00715d",
+        neutral: "#e1e2e3",
+        under: "#00715e",
         over: "#8d5800",
         seqLow: "#fee3c5",
         seqHigh: "#8d5800",
@@ -698,24 +711,24 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       },
     },
     dark: {
-      bgPage: "#0c0d0f",
-      bgSurface: "#161719",
-      bgSurface2: "#202123",
-      border: "#3c3e41",
-      textPrimary: "#e1e7f0",
-      textSecondary: "#b7bdc5",
-      textMuted: "#9197a0",
-      brand: "#546c8d",
-      brandHover: "#445b7b",
+      bgPage: "#0c0d0e",
+      bgSurface: "#171718",
+      bgSurface2: "#212122",
+      border: "#3d3e3f",
+      textPrimary: "#e4e8ec",
+      textSecondary: "#b9bdc1",
+      textMuted: "#95979c",
+      brand: "#556c8e",
+      brandHover: "#455b7c",
       brandContrast: "#ffffff",
-      moneyIncome: "#00997f",
+      moneyIncome: "#009a80",
       moneyExpense: "#b77b29",
-      moneyNet: "#9679c8",
-      moneyNeutral: "#a0a5ac",
+      moneyNet: "#9679c9",
+      moneyNeutral: "#a2a5a8",
       chart: PAUL_TOL.dark,
       heat: {
-        neutral: "#202123",
-        under: "#00997f",
+        neutral: "#212122",
+        under: "#009a80",
         over: "#b77b29",
         seqLow: "#331f05",
         seqHigh: "#b77b29",

package/src/tour/tour-labels.ts

@@ -0,0 +1,14 @@
+// The English words of ./tour, in a module with no component code: the English catalogue
+// (src/i18n/defaults.ts) imports them without the component, so `en` loads as one chunk
+// like the other languages (0.34, KS U8). ./tour re-exports them.
+
+import type { TourLabels } from "./tour";
+
+export const DEFAULT_TOUR_LABELS: TourLabels = {
+  next: "Next",
+  back: "Back",
+  skip: "Skip",
+  done: "Done",
+  awaitClickHint: "Click the highlighted element to continue",
+  step: (c, t) => `${c} / ${t}`,
+};

package/src/tour/tour.tsx

@@ -10,11 +10,13 @@ import {
 import type { CSSProperties, ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "../lib/cn";
-import { useKitLabels } from "../i18n/kit-labels";
-import { Button } from "../components/ui";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
+import { Button } from "../components/button";
 import { useFocusTrap } from "../hooks/use-focus-trap";
+import { sameRect } from "../hooks/use-anchored-rect";
 import { dirOf, horizontalStep } from "../lib/direction";
 import type { Direction } from "../lib/direction";
+import { DEFAULT_TOUR_LABELS } from "./tour-labels";
 
 /**
  * `start`/`end` follow the reading direction (`end` is the right side in LTR and the
@@ -60,14 +62,8 @@ export interface TourLabels {
   step: (current: number, total: number) => string;
 }
 
-export const DEFAULT_TOUR_LABELS: TourLabels = {
-  next: "Next",
-  back: "Back",
-  skip: "Skip",
-  done: "Done",
-  awaitClickHint: "Click the highlighted element to continue",
-  step: (c, t) => `${c} / ${t}`,
-};
+// Defined in ./tour-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_TOUR_LABELS };
 
 interface StartOptions {
   /** Stable id of the tour, surfaced as `activeId` so the app can mirror it to
@@ -146,7 +142,7 @@ export function TourProvider({
   labels,
 }: {
   children: ReactNode;
-  labels?: Partial<TourLabels>;
+  labels?: LabelOverride<TourLabels>;
 }) {
   // `labels` over the provider's `tour` over English. Resolved once here and handed
   // down: the step card is portalled, but context crosses portals anyway — this is
@@ -255,12 +251,6 @@ function queryVisibleTarget(selector: string): Element | null {
   return null;
 }
 
-function sameRect(a: Rect | null, b: Rect | null): boolean {
-  if (a === b) return true;
-  if (!a || !b) return false;
-  return a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;
-}
-
 function rectOf(el: Element): Rect {
   const r = el.getBoundingClientRect();
   return { top: r.top, left: r.left, width: r.width, height: r.height };
@@ -687,22 +677,22 @@ function TourCard({
       // trap silently does nothing.
       tabIndex={-1}
       style={style}
-      className="pointer-events-auto fixed z-[61] w-80 max-w-[calc(100vw-1.5rem)] rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-4 shadow-xl outline-none transition-all duration-200 ease-out"
+      className="pointer-events-auto fixed z-[61] w-80 max-w-[calc(100vw-1.5rem)] rounded-lg border border-subtle bg-surface p-4 shadow-xl outline-none transition-all duration-200 ease-out"
     >
-      <div className="text-sm font-semibold text-[var(--text-primary)]">{step.title}</div>
-      <div className="mt-1 text-sm leading-relaxed text-[var(--text-secondary)]">{step.body}</div>
+      <div className="text-sm font-semibold text-primary">{step.title}</div>
+      <div className="mt-1 text-sm leading-relaxed text-secondary">{step.body}</div>
       {step.action && <div className="mt-3">{step.action}</div>}
       <div className="mt-4 space-y-2">
         <div className="flex items-center justify-between gap-2">
           <button
             type="button"
             onClick={onSkip}
-            className="text-xs text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]"
+            className="text-xs text-placeholder hover:text-secondary"
           >
             {labels.skip}
           </button>
           <div className="flex items-center gap-2">
-            <span className="whitespace-nowrap text-xs tabular-nums text-[var(--text-placeholder)]">
+            <span className="whitespace-nowrap text-xs tabular-nums text-placeholder">
               {labels.step(index + 1, total)}
             </span>
             {!isFirst && (
@@ -726,7 +716,7 @@ function TourCard({
           </div>
         </div>
         {step.awaitClick && step.target && rect && (
-          <div className="text-center text-xs italic text-[var(--text-placeholder)]">
+          <div className="text-center text-xs italic text-placeholder">
             {labels.awaitClickHint}
           </div>
         )}

package/src/wizard/stepper-nav.tsx

@@ -2,13 +2,14 @@ import { useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { ReactElement, ReactNode } from "react";
 import { Check } from "lucide-react";
 import { cn } from "../lib/cn";
-import { Button, Spinner } from "../components/ui";
-import type { ButtonVariant } from "../components/ui";
+import { Button } from "../components/button";
+import { Spinner } from "../components/spinner";
+import type { ButtonVariant } from "../components/button-look";
 import { Modal } from "../components/modal";
 import { alertFrameClass } from "../components/alert-banner";
 import { WizardContextProvider } from "./wizard-context";
 import { DEFAULT_WIZARD_LABELS } from "./types";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import type { UseWizardReturn, WizardLabels } from "./types";
 import type { CommitScope } from "../components/write-lock";
 
@@ -53,7 +54,7 @@ export function StepperNav<TData extends Record<string, unknown>>({
   title?: ReactNode;
   description?: ReactNode;
   className?: string;
-  labels?: Partial<WizardLabels>;
+  labels?: LabelOverride<WizardLabels>;
   /** The Finish button's variant — `"danger"` for a destructive commit (an import
    *  that replaces what is there). Default `"brand"`. Next keeps `"brand"`. */
   finishVariant?: ButtonVariant;
@@ -206,12 +207,12 @@ export function StepperNav<TData extends Record<string, unknown>>({
       {(title || description) && (
         <div>
           {title && (
-            <h1 className="text-2xl font-bold tracking-tight text-[var(--text-primary)]">
+            <h1 className="text-2xl font-bold tracking-tight text-primary">
               {title}
             </h1>
           )}
           {description && (
-            <p className="mt-1 text-sm text-[var(--text-muted)]">{description}</p>
+            <p className="mt-1 text-sm text-muted">{description}</p>
           )}
         </div>
       )}
@@ -242,13 +243,13 @@ export function StepperNav<TData extends Record<string, unknown>>({
                     className={cn(
                       "flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-xs font-semibold transition-colors",
                       status === "completed" &&
-                        "border-[var(--brand)] bg-[var(--brand)] text-[var(--brand-contrast)]",
+                        "border-brand bg-brand text-brand-contrast",
                       status === "active" &&
-                        "border-[var(--brand)] bg-[var(--bg-surface)] text-[var(--brand)]",
+                        "border-brand bg-surface text-brand",
                       status === "upcoming" &&
-                        "border-[var(--border)] bg-[var(--bg-surface)] text-[var(--text-placeholder)]",
+                        "border-subtle bg-surface text-placeholder",
                       status === "skipped" &&
-                        "border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-muted)]",
+                        "border-subtle bg-surface-2 text-muted",
                     )}
                   >
                     {status === "completed" ? <Check className="size-4" /> : index + 1}
@@ -258,8 +259,8 @@ export function StepperNav<TData extends Record<string, unknown>>({
                     className={cn(
                       "hidden text-xs font-medium md:block",
                       status === "active" || status === "completed"
-                        ? "text-[var(--text-primary)]"
-                        : "text-[var(--text-muted)]",
+                        ? "text-primary"
+                        : "text-muted",
                     )}
                   >
                     {step.label}
@@ -271,7 +272,7 @@ export function StepperNav<TData extends Record<string, unknown>>({
                   <div
                     className={cn(
                       "mx-2 h-0.5 flex-1",
-                      status === "completed" ? "bg-[var(--brand)]" : "bg-[var(--border)]",
+                      status === "completed" ? "bg-brand" : "bg-[var(--border)]",
                     )}
                   />
                 )}
@@ -280,7 +281,7 @@ export function StepperNav<TData extends Record<string, unknown>>({
           })}
         </ol>
         {/* Mobile: the labels above are hidden, so name the current step here */}
-        <p className="mt-2 text-center text-sm font-medium text-[var(--text-primary)] md:hidden">
+        <p className="mt-2 text-center text-sm font-medium text-primary md:hidden">
           {l.step(wizard.currentStepIndex + 1, wizard.steps.length)}
           {" — "}
           {wizard.currentStep.label}
@@ -299,7 +300,7 @@ export function StepperNav<TData extends Record<string, unknown>>({
         <div
           role="alert"
           className={cn(
-            "text-sm text-[var(--danger)]",
+            "text-sm text-danger",
             alertFrameClass("danger"),
           )}
         >
@@ -308,7 +309,7 @@ export function StepperNav<TData extends Record<string, unknown>>({
       )}
 
       {/* Navigation bar */}
-      <div className="flex items-center justify-between border-t border-[var(--border)] pt-4">
+      <div className="flex items-center justify-between border-t border-subtle pt-4">
         {/* The empty span keeps the right-hand group on the right when Cancel is off. */}
         {wizard.canCancel ? (
           <Button variant="secondary" onClick={wizard.cancel}>
@@ -342,10 +343,10 @@ export function StepperNav<TData extends Record<string, unknown>>({
       {wizard.showCancelDialog && (
         <Modal onClose={wizard.dismissCancel} labelledBy={cancelTitleId} className="space-y-4">
           <div className="space-y-1.5">
-            <h2 id={cancelTitleId} className="text-lg font-semibold text-[var(--text-primary)]">
+            <h2 id={cancelTitleId} className="text-lg font-semibold text-primary">
               {l.cancelTitle}
             </h2>
-            <p className="text-sm text-[var(--text-muted)]">{l.confirmCancel}</p>
+            <p className="text-sm text-muted">{l.confirmCancel}</p>
           </div>
           <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
             <Button variant="secondary" onClick={wizard.dismissCancel}>

package/src/wizard/types.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { DEFAULT_WIZARD_LABELS } from "./wizard-labels";
 
 export type FieldErrors = Record<string, string>;
 
@@ -252,29 +253,13 @@ export interface WizardLabels {
   done?: string;
 }
 
-/** Typed with the two optional keys made required, so code reading the defaults
- *  directly (the fallback in `useWizard`) needs no `!`. */
-export const DEFAULT_WIZARD_LABELS: WizardLabels &
-  Required<Pick<WizardLabels, "missingRequired" | "genericError" | "done">> = {
-  cancel: "Cancel",
-  back: "Back",
-  next: "Next",
-  skip: "Skip",
-  finish: "Finish",
-  submitting: "Creating…",
-  steps: "Steps",
-  step: (current, total) => `Step ${current} of ${total}`,
-  cancelTitle: "Discard this form?",
-  confirmCancel: "Your entries will be lost.",
-  cancelConfirmLabel: "Discard",
-  cancelDismissLabel: "Keep editing",
-  reviewTitle: "Review",
-  edit: "Edit",
-  missingRequired: "Please fill in all required fields.",
-  genericError: "An error occurred",
-  done: "Done",
-};
+// The English words live in ./wizard-labels, a module of words (round 0.34).
+export { DEFAULT_WIZARD_LABELS };
 
+/** @deprecated 0.34 — `useKitLabels("wizard", DEFAULT_WIZARD_LABELS, labels)`, which the
+ *  provider reaches too, or StepperNav's and WizardSummary's own `labels`; removed in 0.35
+ *  (refactor audit 2026-10, API-6a). A merge from before the provider, which no kit
+ *  component calls. */
 export function resolveWizardLabels(labels?: Partial<WizardLabels>): WizardLabels {
   return labels ? { ...DEFAULT_WIZARD_LABELS, ...labels } : DEFAULT_WIZARD_LABELS;
 }

package/src/wizard/wizard-labels.ts

@@ -0,0 +1,29 @@
+// The English words of the wizard, in a module with no other code: the English catalogue
+// (src/i18n/defaults.ts) imports them as it imports every component's `*-labels.ts`.
+// ./types re-exports them. Until 0.34 they sat in ./types, the rule's one exception
+// outside the provider (round 0.34, DOC-6's sev-1 note).
+
+import type { WizardLabels } from "./types";
+
+/** Typed with the two optional keys made required, so code reading the defaults
+ *  directly (the fallback in `useWizard`) needs no `!`. */
+export const DEFAULT_WIZARD_LABELS: WizardLabels &
+  Required<Pick<WizardLabels, "missingRequired" | "genericError" | "done">> = {
+  cancel: "Cancel",
+  back: "Back",
+  next: "Next",
+  skip: "Skip",
+  finish: "Finish",
+  submitting: "Creating…",
+  steps: "Steps",
+  step: (current, total) => `Step ${current} of ${total}`,
+  cancelTitle: "Discard this form?",
+  confirmCancel: "Your entries will be lost.",
+  cancelConfirmLabel: "Discard",
+  cancelDismissLabel: "Keep editing",
+  reviewTitle: "Review",
+  edit: "Edit",
+  missingRequired: "Please fill in all required fields.",
+  genericError: "An error occurred",
+  done: "Done",
+};

package/src/wizard/wizard-step.tsx

@@ -49,8 +49,8 @@ export function WizardStep({
   const Heading = HEADING[headingLevel];
   const heading = (
     <>
-      {hasTitle && <Heading className="text-lg font-semibold text-[var(--text-primary)]">{title}</Heading>}
-      {hasDescription && <p className="text-sm text-[var(--text-muted)]">{description}</p>}
+      {hasTitle && <Heading className="text-lg font-semibold text-primary">{title}</Heading>}
+      {hasDescription && <p className="text-sm text-muted">{description}</p>}
     </>
   );
   return (

package/src/wizard/wizard-summary.tsx

@@ -1,9 +1,10 @@
 import { Pencil } from "lucide-react";
-import { Card, CardAction, CardContent, CardHeader, CardTitle, IconButton } from "../components/ui";
+import { Card, CardAction, CardContent, CardHeader, CardTitle } from "../components/card";
+import { IconButton } from "../components/icon-button";
 import { Tooltip } from "../components/tooltip";
 import type { SummarySection, WizardLabels } from "./types";
 import { DEFAULT_WIZARD_LABELS } from "./types";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 
 /**
  * The review step: one card per section, each row a label/value pair, each card
@@ -29,13 +30,13 @@ export function WizardSummary({
   onEditStep?: (stepIndex: number) => void;
   /** Disable every edit button (e.g. `wizard.isSubmitting`). */
   disabled?: boolean;
-  labels?: Partial<WizardLabels>;
+  labels?: LabelOverride<WizardLabels>;
 }) {
   const l = useKitLabels("wizard", DEFAULT_WIZARD_LABELS, labels);
 
   return (
     <div className="space-y-4">
-      <h2 className="text-lg font-semibold text-[var(--text-primary)]">{l.reviewTitle}</h2>
+      <h2 className="text-lg font-semibold text-primary">{l.reviewTitle}</h2>
       {sections.map((section, sIdx) => (
         <Card key={sIdx}>
           {/* CardHeader is a grid, and CardAction is the top-right column it
@@ -68,11 +69,11 @@ export function WizardSummary({
               {section.items.map((item, iIdx) => (
                 <div key={iIdx}>
                   {iIdx > 0 && (
-                    <div className="mb-2 border-t border-[var(--border)]" role="presentation" />
+                    <div className="mb-2 border-t border-subtle" role="presentation" />
                   )}
                   <div className="flex items-start justify-between gap-4">
-                    <dt className="text-[var(--text-muted)]">{item.label}</dt>
-                    <dd className="text-end font-medium text-[var(--text-primary)]">
+                    <dt className="text-muted">{item.label}</dt>
+                    <dd className="text-end font-medium text-primary">
                       {item.value}
                     </dd>
                   </div>