@multiplatform.one/theme 7.34.4 → 7.35.0

package/src/theme/createThemes.ts

@@ -1,9 +1,6 @@
 import * as Colors from "@tamagui/colors";
-import {
-  createThemes as tamaguiCreateThemes,
-  type CreateThemesProps,
-} from "@tamagui/theme-builder";
-import { themes as tamaguiThemes } from "@tamagui/themes";
+import { createThemes as tamaguiCreateThemes } from "@tamagui/theme-builder";
+import { defaultChildrenThemes, v5Templates } from "@tamagui/themes/v5";
 import {
   aaTextContrastRatio,
   contrastRatio,
@@ -13,45 +10,18 @@ import {
 } from "./colorRules";
 
 /**
- * MPO-40. Radix aims a scale's step 11 at the AA text floor against ITS OWN
- * step 1-2, never against a foreign neutral. mpo paints intent ink on the BASE
- * theme's surfaces, and on `$color2` — `#f9f9fa`, the ground 35 catalog
- * surfaces and every gallery board actually paint — light `yellow11`
- * (`#9e6c00`) measures 4.34:1 and light `green11` (`#218358`) 4.48:1, both
- * under `colorRules`' `aaTextContrastRatio` of 4.5. So the stock stop is right
- * upstream and wrong here.
- *
- * Only these two stops move. Light `red11` clears at 4.95:1 and every dark
- * intent stop clears by 8.49:1 or more, measured, so red and both dark ramps
- * stay untouched stock Radix — as does every other step of yellow and green.
- *
- * The replacements are the smallest darkening that clears the floor on the
- * strictest base surface while holding the hue — dE76 1.94 for warning and
- * 0.70 for success, both far under the ~2.3 just-noticeable difference, so
- * neither intent hue visibly shifts.
- *
- * THESE ARE QUANTIZED VALUES, and that is not a detail. `createThemes` stores
- * every palette entry through color2k as `hsla()` with INTEGER degrees and
- * percentages, so the reachable palette is coarser than hex and a hex chosen
- * on paper is not what renders. The first pass here picked `#996800` /
- * `#208156` by minimising CIEDE2000 in hex space; `#208156` quantized to the
- * SAME `hsla(154, 60%, 32%)` as the stock stop and changed nothing at all,
- * while `#996800` landed two hundredths off its predicted ratio. Both values
- * below were searched in the quantized space and confirmed against the built
- * theme, not against the arithmetic.
- *
- * `$color11` is ALSO the solid intent Button's resting fill (`step(10)` in
- * `defaults/builderOptions.ts`), so this shifts that fill by the same
- * imperceptible amount. It improves it: the solid warning Button's
- * luminance-picked on-fill label was itself at 4.48:1 — a second, unpinned AA
- * miss. The `pickReadableForeground` anchor does not flip for either intent,
- * so no label changes colour.
+ * MPO-40. Radix step 11 targets its own surface, but intent ink also paints on
+ * the base page. The v5 $background/$color2 is hsla(0, 0%, 97%, 1): the
+ * previous warning/success floors fall to 4.48/4.47:1 there. These replacements
+ * were searched in integer HSL (color2k's stored space), minimizing dE76 from
+ * stock within one degree of its hue, then checked against the built theme.
+ * Only light step 11 changes; the base ramp stays stock v5.
  */
 const intentInkFloor = {
-  /** stored `hsla(41, 100%, 30%)`; 4.34:1 -> 4.56:1 on the base `$color2` */
-  warning: "#996900",
-  /** stored `hsla(155, 64%, 31%)`; 4.48:1 -> 4.56:1 on the base `$color2` */
-  success: "#1c8257",
+  /** Stored hsla(41, 99%, 30%, 1); 4.54:1 on $color2, dE76 2.54. */
+  warning: "#986801",
+  /** Stored hsla(154, 63%, 31%, 1); 4.53:1 on $color2, dE76 0.82. */
+  success: "#1d8156",
 } as const;
 
 /**
@@ -67,16 +37,28 @@ function withIntentInkFloor(palette: string[], ink: string): string[] {
   return stepped;
 }
 
-const grayTheme = {
-  dark_gray: tamaguiThemes.dark,
-  dark_gray_active: tamaguiThemes.dark_active,
-  dark_gray_alt1: tamaguiThemes.dark_alt1,
-  dark_gray_alt2: tamaguiThemes.dark_alt2,
-  light_gray: tamaguiThemes.light,
-  light_gray_active: tamaguiThemes.light_active,
-  light_gray_alt1: tamaguiThemes.light_alt1,
-  light_gray_alt2: tamaguiThemes.light_alt2,
-};
+export const houseComponentThemes = {
+  Button: { template: "surface2" },
+  Input: { template: "surface1" },
+  TextArea: { template: "surface1" },
+  Progress: { template: "surface1" },
+  ProgressIndicator: { template: "surface3" },
+  Slider: { template: "surface1" },
+  SliderActive: { template: "surface3" },
+  SliderThumb: { template: "surface2" },
+  Switch: { template: "surface2" },
+  Card: { template: "surface1" },
+  ListItem: { template: "surface1" },
+  SelectTrigger: { template: "surface1" },
+  SelectItem: { template: "surface1" },
+  InputContainerFrame: { template: "surface1" },
+} as const;
+
+export const houseGrandChildrenThemes = {
+  active: { template: "surface3" },
+  alt1: { template: "surface1" },
+  alt2: { template: "surface2" },
+} as const;
 
 export interface Shadows {
   shadow1: string;
@@ -116,7 +98,8 @@ export interface GetThemeProps {
 }
 
 export interface CreateThemesBuilderOptions {
-  grandChildrenThemes?: CreateThemesProps["grandChildrenThemes"];
+  componentThemes?: Parameters<typeof tamaguiCreateThemes>[0]["componentThemes"];
+  grandChildrenThemes?: Parameters<typeof tamaguiCreateThemes>[0]["grandChildrenThemes"];
   getTheme?: (props: GetThemeProps) => Record<string, string | number | null | undefined>;
 }
 
@@ -283,23 +266,10 @@ function nearestHoldingStep(
 }
 
 /**
- * Axiom 12 LEGIBLE FLOOR on the scheme's accent pair (MPO-448, MPO-449). The
- * theme-builder reads `accentBackground` and `accentColor` off fixed palette
- * slots, and the house dark accent ramp puts both on the wrong side of the
- * floor: the fill (`#7766cc`) carries text at 4.02:1 against either scheme
- * anchor, and the ink (`#46349d`) reads 1.74:1 on the dark page. LC-05 keeps
- * the channel and frees the step, so each token walks to the nearest accent
- * step that holds its floor and stays put where it already does (light).
- *
- * - `accentBackground` is a text-bearing solid: its better anchor (`$color1`
- *   or `$color12`) clears 4.5:1 on it, and it keeps the 3:1 graphic tier
- *   against the page, because dots, edges and bars paint it bare.
- * - `accentColor` is accent ink: 4.5:1 on the page and the first raised
- *   surface (`$color1`-`$color3`).
- *
- * Every theme of the scheme that inherited the base pair (the intent
- * children) takes the corrected pair; one that set its own (the inverse
- * component themes) keeps it.
+ * MPO-448 / MPO-449. Keep the accent fill readable with its better base anchor
+ * (4.5:1), and visible against the page (3:1). Accent ink needs 4.5:1 on
+ * color1..color3. Walk to the nearest holding accent step; themes with their
+ * own pair keep it.
  */
 function holdAccentFloor(
   themes: Record<string, Record<string, string>>,
@@ -339,6 +309,53 @@ function holdAccentFloor(
   return out;
 }
 
+/**
+ * FZ-7158 WP-b2 / DF-06. The off Switch track is the first grey step that
+ * holds 3:1 under the white thumb and 1.5:1 from the accent on track, and
+ * 3:1 on the page and surface1 when a step can hold all four. Dark's accent
+ * fill sits between gray9 and gray10, so dark falls back to gray7 and the
+ * thumb carries the page contrast. Hover is one step toward the page, press
+ * one step away. Runs after holdAccentFloor, which settles the on track.
+ * Only the scheme roots carry the keys and every child inherits them: one
+ * copy per theme overruns the CSS budget in createDefaultThemeConfig.spec.ts.
+ */
+const switchOffSteps = [10, 9, 8, 7, 6, 5] as const;
+const switchStateContrastRatio = 1.5;
+
+function holdSwitchTrack(
+  themes: Record<string, Record<string, string>>,
+): Record<string, Record<string, string>> {
+  const out: Record<string, Record<string, string>> = { ...themes };
+  for (const scheme of ["light", "dark"] as const) {
+    const base = themes[scheme];
+    if (!base) continue;
+    const thumb = luminanceOf(base.switchThumb ?? "#ffffff");
+    const on = luminanceOf(base.accentBackground);
+    const surfaces = [base.background, base.color3].map(luminanceOf);
+    if (thumb === null || on === null || surfaces.some((lum) => lum === null)) continue;
+    const holds = (step: number, onPage: boolean) => {
+      const lum = luminanceOf(base[`gray${step}`]);
+      return (
+        lum !== null &&
+        contrastRatio(lum, thumb) >= minContrastRatio &&
+        contrastRatio(lum, on) >= switchStateContrastRatio &&
+        (!onPage || surfaces.every((surface) => contrastRatio(lum, surface!) >= minContrastRatio))
+      );
+    };
+    const off =
+      switchOffSteps.find((step) => holds(step, true)) ??
+      switchOffSteps.find((step) => holds(step, false));
+    if (off === undefined) continue;
+    const paint = {
+      switchTrackOff: base[`gray${off}`],
+      switchTrackOffHover: base[`gray${off - 1}`],
+      switchTrackOffPress: base[`gray${off + 1}`],
+    };
+    out[scheme] = { ...base, ...paint };
+  }
+  return out;
+}
+
 /** The hues the code syntax palette paints (MPO-468). */
 const syntaxInkHues = ["purple", "green", "blue", "orange", "red"] as const;
 
@@ -354,14 +371,9 @@ function mixHex(from: string, to: string, share: number): string {
 }
 
 /**
- * Axiom 12 LEGIBLE FLOOR on code syntax ink (MPO-468). Radix aims a hue's
- * step 11 at 4.5:1 on its own steps 1-2, but code paints on the raised
- * `$color3`, where light `green11`, `blue11` and `orange11` measure 4.22,
- * 4.27 and 4.04:1. Every theme that carries the hue ramps gets a
- * `syntax<Hue>` ink: step 11, walked toward step 12 in twentieths until it
- * clears 4.5:1 on that theme's `$color3` and on the hue's step-3 wash, which
- * diff lines paint. Dark keeps step 11; a theme where no step holds gets no
- * token and inherits its parent's.
+ * MPO-468. Syntax ink paints on both color3 and the hue's step-3 diff wash.
+ * Radix only targets its own page, so walk step 11 toward step 12 in twentieths
+ * until both surfaces clear 4.5:1. A theme with no holding step inherits.
  */
 function holdSyntaxFloor(
   themes: Record<string, Record<string, string>>,
@@ -393,24 +405,71 @@ function holdSyntaxFloor(
   return out;
 }
 
+const namedInkHues = Object.keys(defaultChildrenThemes).filter((hue) => hue !== "neutral");
+
+/**
+ * Radix aims a hue's step 11 at 4.5:1 on its own steps 1-2, but status text,
+ * diffs and links paint the named step 11 on v5's grey page and surface1 card
+ * (`$background` and `$color3`), where light green, blue, orange, yellow, teal
+ * and red measured 3.85 to 4.45:1. Walk each named step 11 toward step 12 in
+ * twentieths until both surfaces clear 4.5:1. A step that already holds stays.
+ * v5's `neutral` is a mid-grey control palette, never page ink, so it is left out.
+ */
+function holdNamedInkFloor(
+  themes: Record<string, Record<string, string>>,
+): Record<string, Record<string, string>> {
+  const out: Record<string, Record<string, string>> = { ...themes };
+  for (const [name, theme] of Object.entries(themes)) {
+    const surfaces = [luminanceOf(theme.background), luminanceOf(theme.color3)];
+    if (surfaces.some((surface) => surface === null)) continue;
+    const ink: Record<string, string> = {};
+    for (const hue of namedInkHues) {
+      const from = theme[`${hue}11`] ? normalizeToHex(theme[`${hue}11`]) : null;
+      const to = theme[`${hue}12`] ? normalizeToHex(theme[`${hue}12`]) : null;
+      if (!from || !to) continue;
+      for (let step = 0; step <= 20; step++) {
+        const candidate = mixHex(from, to, step / 20);
+        const lum = relativeLuminance(candidate);
+        if (surfaces.every((surface) => contrastRatio(lum, surface!) >= aaTextContrastRatio)) {
+          if (step > 0) ink[`${hue}11`] = candidate;
+          break;
+        }
+      }
+    }
+    if (Object.keys(ink).length > 0) out[name] = { ...theme, ...ink };
+  }
+  return out;
+}
+
 const defaultLightShadows: Shadows = {
-  shadow1: "rgba(0,0,0,0.12)",
-  shadow2: "rgba(0,0,0,0.16)",
-  shadow3: "rgba(0,0,0,0.22)",
-  shadow4: "rgba(0,0,0,0.28)",
-  shadow5: "rgba(0,0,0,0.34)",
-  shadow6: "rgba(0,0,0,0.4)",
+  shadow1: "rgba(0,0,0,0.04)",
+  shadow2: "rgba(0,0,0,0.08)",
+  shadow3: "rgba(0,0,0,0.12)",
+  shadow4: "rgba(0,0,0,0.22)",
+  shadow5: "rgba(0,0,0,0.33)",
+  shadow6: "rgba(0,0,0,0.44)",
 };
 
 const defaultDarkShadows: Shadows = {
-  shadow1: "rgba(0,0,0,0.2)",
-  shadow2: "rgba(0,0,0,0.3)",
-  shadow3: "rgba(0,0,0,0.4)",
-  shadow4: "rgba(0,0,0,0.5)",
-  shadow5: "rgba(0,0,0,0.6)",
-  shadow6: "rgba(0,0,0,0.7)",
+  shadow1: "rgba(0,0,0,0.15)",
+  shadow2: "rgba(0,0,0,0.23)",
+  shadow3: "rgba(0,0,0,0.33)",
+  shadow4: "rgba(0,0,0,0.45)",
+  shadow5: "rgba(0,0,0,0.65)",
+  shadow6: "rgba(0,0,0,0.8)",
 };
 
+const childrenHues = [
+  "blue",
+  "red",
+  "green",
+  "yellow",
+  "orange",
+  "pink",
+  "purple",
+  "gray",
+] as const;
+
 export function createThemesBuilder(
   baseTheme: BaseThemeBuilderDefinition,
   accentTheme: ThemeBuilderDefinition,
@@ -424,128 +483,24 @@ export function createThemesBuilder(
     },
     extra: {
       light: {
-        ...Colors.amber,
-        ...Colors.amberA,
-        ...Colors.blue,
-        ...Colors.blueA,
-        ...Colors.bronze,
-        ...Colors.bronzeA,
-        ...Colors.brown,
-        ...Colors.brownA,
-        ...Colors.crimson,
-        ...Colors.crimsonA,
-        ...Colors.cyan,
-        ...Colors.cyanA,
-        ...Colors.gold,
-        ...Colors.goldA,
-        ...Colors.grass,
-        ...Colors.grassA,
-        ...Colors.gray,
-        ...Colors.grayA,
-        ...Colors.green,
-        ...Colors.greenA,
-        ...Colors.indigo,
-        ...Colors.indigoA,
-        ...Colors.lime,
-        ...Colors.limeA,
-        ...Colors.mauve,
-        ...Colors.mauveA,
-        ...Colors.mint,
-        ...Colors.mintA,
-        ...Colors.olive,
-        ...Colors.oliveA,
-        ...Colors.orange,
-        ...Colors.orangeA,
-        ...Colors.pink,
-        ...Colors.pinkA,
-        ...Colors.plum,
-        ...Colors.plumA,
-        ...Colors.purple,
-        ...Colors.purpleA,
-        ...Colors.red,
-        ...Colors.redA,
-        ...Colors.sage,
-        ...Colors.sageA,
-        ...Colors.sand,
-        ...Colors.sandA,
-        ...Colors.sky,
-        ...Colors.skyA,
-        ...Colors.slate,
-        ...Colors.slateA,
-        ...Colors.teal,
-        ...Colors.tealA,
-        ...Colors.tomato,
-        ...Colors.tomatoA,
-        ...Colors.violet,
-        ...Colors.violetA,
-        ...Colors.yellow,
-        ...Colors.yellowA,
+        ...Object.assign({}, ...Object.values(defaultChildrenThemes).map((theme) => theme.light)),
         ...baseTheme.lightShadows,
-        shadowColor: baseTheme.lightShadows?.shadow1 || defaultLightShadows.shadow1,
+        shadowColor: baseTheme.lightShadows?.shadow3 || defaultLightShadows.shadow3,
       },
       dark: {
-        ...Colors.amberDark,
-        ...Colors.amberDarkA,
-        ...Colors.blueDark,
-        ...Colors.blueDarkA,
-        ...Colors.bronzeDark,
-        ...Colors.bronzeDarkA,
-        ...Colors.brownDark,
-        ...Colors.brownDarkA,
-        ...Colors.crimsonDark,
-        ...Colors.crimsonDarkA,
-        ...Colors.cyanDark,
-        ...Colors.cyanDarkA,
-        ...Colors.goldDark,
-        ...Colors.goldDarkA,
-        ...Colors.grassDark,
-        ...Colors.grassDarkA,
-        ...Colors.grayDark,
-        ...Colors.grayDarkA,
-        ...Colors.greenDark,
-        ...Colors.greenDarkA,
-        ...Colors.indigoDark,
-        ...Colors.indigoDarkA,
-        ...Colors.limeDark,
-        ...Colors.limeDarkA,
-        ...Colors.mauveDark,
-        ...Colors.mauveDarkA,
-        ...Colors.mintDark,
-        ...Colors.mintDarkA,
-        ...Colors.oliveDark,
-        ...Colors.oliveDarkA,
-        ...Colors.orangeDark,
-        ...Colors.orangeDarkA,
-        ...Colors.pinkDark,
-        ...Colors.pinkDarkA,
-        ...Colors.plumDark,
-        ...Colors.plumDarkA,
-        ...Colors.purpleDark,
-        ...Colors.purpleDarkA,
-        ...Colors.redDark,
-        ...Colors.redDarkA,
-        ...Colors.sageDark,
-        ...Colors.sageDarkA,
-        ...Colors.sandDark,
-        ...Colors.sandDarkA,
-        ...Colors.skyDark,
-        ...Colors.skyDarkA,
-        ...Colors.slateDark,
-        ...Colors.slateDarkA,
-        ...Colors.tealDark,
-        ...Colors.tealDarkA,
-        ...Colors.tomatoDark,
-        ...Colors.tomatoDarkA,
-        ...Colors.violetDark,
-        ...Colors.violetDarkA,
-        ...Colors.yellowDark,
-        ...Colors.yellowDarkA,
+        ...Object.assign({}, ...Object.values(defaultChildrenThemes).map((theme) => theme.dark)),
         ...baseTheme.darkShadows,
-        shadowColor: baseTheme.darkShadows?.shadow1 || defaultDarkShadows.shadow1,
+        shadowColor: baseTheme.darkShadows?.shadow3 || defaultDarkShadows.shadow3,
       },
     },
   };
   const childrenThemes = {
+    ...Object.fromEntries(
+      childrenHues.map((name) => {
+        const { light, dark } = defaultChildrenThemes[name];
+        return [name, { palette: { light: Object.values(light), dark: Object.values(dark) } }];
+      }),
+    ),
     warning: {
       palette: {
         dark: Object.values(Colors.yellowDark),
@@ -566,6 +521,9 @@ export function createThemesBuilder(
     },
   };
   const createThemesProps: Record<string, unknown> = {
+    templates: v5Templates,
+    componentThemes: options?.componentThemes ?? houseComponentThemes,
+    grandChildrenThemes: options?.grandChildrenThemes ?? houseGrandChildrenThemes,
     base,
     childrenThemes,
     accent: {
@@ -575,23 +533,16 @@ export function createThemesBuilder(
       },
     },
   };
-  if (options?.grandChildrenThemes) {
-    createThemesProps.grandChildrenThemes = options.grandChildrenThemes;
-  }
   if (getTheme) {
     createThemesProps.getTheme = getTheme;
   }
   const initialTheme = tamaguiCreateThemes(
     createThemesProps as Parameters<typeof tamaguiCreateThemes>[0],
   );
-  const themes = holdSyntaxFloor(
-    holdAccentFloor(
-      neutralizeSemanticEntryText(
-        neutralizeTintText({
-          ...grayTheme,
-          ...tamaguiThemes,
-          ...initialTheme,
-        }),
+  const themes = holdSwitchTrack(
+    holdSyntaxFloor(
+      holdNamedInkFloor(
+        holdAccentFloor(neutralizeSemanticEntryText(neutralizeTintText(initialTheme))),
       ),
     ),
   );
@@ -601,6 +552,9 @@ export function createThemesBuilder(
     },
     addTheme<K extends string>(name: K, theme: ThemeBuilderDefinition) {
       const addThemeProps: Record<string, unknown> = {
+        templates: v5Templates,
+        componentThemes: options?.componentThemes ?? houseComponentThemes,
+        grandChildrenThemes: options?.grandChildrenThemes ?? houseGrandChildrenThemes,
         base,
         childrenThemes,
         accent: {
@@ -610,9 +564,6 @@ export function createThemesBuilder(
           },
         },
       };
-      if (options?.grandChildrenThemes) {
-        addThemeProps.grandChildrenThemes = options.grandChildrenThemes;
-      }
       if (getTheme) {
         addThemeProps.getTheme = getTheme;
       }

package/src/theme/defaults/accent.ts

@@ -1,39 +1,7 @@
+import { defaultDarkPalette, defaultLightPalette } from "@tamagui/themes/v5";
 import type { ThemeBuilderDefinition } from "../createThemes";
 
 export const defaultAccentTheme: ThemeBuilderDefinition = {
-  darkPalette: [
-    "hsla(250, 50%, 35%, 1)",
-    "hsla(250, 50%, 38%, 1)",
-    "hsla(250, 50%, 41%, 1)",
-    "hsla(250, 50%, 43%, 1)",
-    "hsla(250, 50%, 46%, 1)",
-    "hsla(250, 50%, 49%, 1)",
-    "hsla(250, 50%, 52%, 1)",
-    "hsla(250, 50%, 54%, 1)",
-    "hsla(250, 50%, 57%, 1)",
-    "hsla(250, 50%, 60%, 1)",
-    "hsla(250, 50%, 90%, 1)",
-    "hsla(250, 50%, 95%, 1)",
-  ],
-  // Mirrors the darkPalette's shape: SOLID brand surfaces across [0..9] with
-  // near-white foreground anchors at [10..11]. The theme-builder takes
-  // palette[11] as the sub-theme `color` and palette[3] as the Button
-  // surface — the old ramp (95%->40%, no light anchor) put 40%-purple text
-  // on a 62%-purple button (2.3:1). Solid-with-white matches how tamagui v4
-  // ships its accent (bg 9%, color white, 17.9:1); here: button 48%/98%
-  // = 7.7:1.
-  lightPalette: [
-    "hsla(250, 50%, 62%, 1)",
-    "hsla(250, 50%, 58%, 1)",
-    "hsla(250, 50%, 54%, 1)",
-    "hsla(250, 50%, 48%, 1)",
-    "hsla(250, 50%, 46%, 1)",
-    "hsla(250, 50%, 44%, 1)",
-    "hsla(250, 50%, 42%, 1)",
-    "hsla(250, 50%, 40%, 1)",
-    "hsla(250, 50%, 38%, 1)",
-    "hsla(250, 50%, 36%, 1)",
-    "hsla(250, 50%, 95%, 1)",
-    "hsla(250, 50%, 98%, 1)",
-  ],
+  lightPalette: [...defaultDarkPalette],
+  darkPalette: [...defaultLightPalette],
 };

package/src/theme/defaults/base.ts

@@ -1,63 +1,24 @@
+import { defaultDarkPalette, defaultLightPalette } from "@tamagui/themes/v5";
 import type { BaseThemeBuilderDefinition } from "../createThemes";
 
+// The default is Tamagui's v5 ramp.
 export const defaultBaseTheme: BaseThemeBuilderDefinition = {
-  // Radix-mauve-shaped neutral ramps with a slight purple tint (hue 270)
-  // harmonizing with the hsla(250) accent: near-white surfaces (1-2),
-  // component/hover steps (3-5), borders (6-8), solid/muted (9-10),
-  // readable text (11-12).
-  //
-  // Step 10 (muted-ink tier) is the catalog's de-facto "muted text" step —
-  // placeholderColor, and ~20 components/stories set `color="$color10"` on
-  // hints, captions, counts, subtitles and placeholders (UX-P01/UX-015).
-  // At its old lightness (light 52% / dark 48%) it measured 3.76–3.98:1 on
-  // color1/color2 — under the AA 4.5:1 floor for normal text (Axiom 12
-  // LEGIBLE FLOOR). Re-anchored to light 46% / dark 54%, the lowest change
-  // that clears 4.5:1 on BOTH page surfaces in both schemes (light 4.9/4.7,
-  // dark 4.8/4.6) while staying a distinct tier above color11. Its non-text
-  // roles (boundary rings, spinners, slider thumb — all ≥3:1 targets) only
-  // gain contrast, so the shift is one-directional safe.
-  darkPalette: [
-    "hsla(270, 6%, 8.7%, 1)",
-    "hsla(270, 6%, 10.5%, 1)",
-    "hsla(270, 6%, 13.5%, 1)",
-    "hsla(270, 6%, 16%, 1)",
-    "hsla(270, 6%, 18.5%, 1)",
-    "hsla(270, 6%, 21.5%, 1)",
-    "hsla(270, 6%, 25.5%, 1)",
-    "hsla(270, 6%, 32%, 1)",
-    "hsla(270, 6%, 43%, 1)",
-    "hsla(270, 6%, 54%, 1)",
-    "hsla(270, 6%, 62.5%, 1)",
-    "hsla(270, 6%, 94%, 1)",
-  ],
-  lightPalette: [
-    "hsla(270, 6%, 99.5%, 1)",
-    "hsla(270, 6%, 98.2%, 1)",
-    "hsla(270, 6%, 95.2%, 1)",
-    "hsla(270, 6%, 92.5%, 1)",
-    "hsla(270, 6%, 90%, 1)",
-    "hsla(270, 6%, 87%, 1)",
-    "hsla(270, 6%, 82.5%, 1)",
-    "hsla(270, 6%, 75%, 1)",
-    "hsla(270, 6%, 56.5%, 1)",
-    "hsla(270, 6%, 46%, 1)",
-    "hsla(270, 6%, 40%, 1)",
-    "hsla(270, 6%, 14%, 1)",
-  ],
+  lightPalette: [...defaultLightPalette],
+  darkPalette: [...defaultDarkPalette],
   lightShadows: {
     shadow1: "rgba(0,0,0,0.04)",
     shadow2: "rgba(0,0,0,0.08)",
-    shadow3: "rgba(0,0,0,0.16)",
-    shadow4: "rgba(0,0,0,0.24)",
-    shadow5: "rgba(0,0,0,0.32)",
-    shadow6: "rgba(0,0,0,0.4)",
+    shadow3: "rgba(0,0,0,0.12)",
+    shadow4: "rgba(0,0,0,0.22)",
+    shadow5: "rgba(0,0,0,0.33)",
+    shadow6: "rgba(0,0,0,0.44)",
   },
   darkShadows: {
-    shadow1: "rgba(0,0,0,0.2)",
-    shadow2: "rgba(0,0,0,0.3)",
-    shadow3: "rgba(0,0,0,0.4)",
-    shadow4: "rgba(0,0,0,0.5)",
-    shadow5: "rgba(0,0,0,0.6)",
-    shadow6: "rgba(0,0,0,0.7)",
+    shadow1: "rgba(0,0,0,0.15)",
+    shadow2: "rgba(0,0,0,0.23)",
+    shadow3: "rgba(0,0,0,0.33)",
+    shadow4: "rgba(0,0,0,0.45)",
+    shadow5: "rgba(0,0,0,0.65)",
+    shadow6: "rgba(0,0,0,0.8)",
   },
 };