@motion-proto/live-tokens 0.37.0 → 0.39.0

package/CHANGELOG.md

@@ -1,5 +1,71 @@
 # Changelog
 
+## 0.39.0 — One unified palette model (no gray "mode")
+
+### Changed (breaking)
+
+- **The chromatic/gray palette split collapses into a single OKLCH (Lightness /
+  Chroma / Hue) model.** A neutral is no longer a special "mode"; it is an
+  ordinary low-chroma palette with calm defaults (a low but non-zero base chroma,
+  a wider neutral lightness ramp). One derivation path (`computePaletteColor`)
+  now serves every palette, and the Neutral / Alternate editors show the same
+  full L/C/H picker, lock-to-500 toggle, and derived-scale snapping as accents.
+  `PaletteConfig` drops its gray vocabulary (`tintHue`, `tintChroma`,
+  `grayLightnessCurve`, `graySaturationCurve`); `baseColor`, `lightnessCurve`,
+  and `saturationCurve` are now universal, and the internal `mode` prop is
+  removed from the palette editors.
+- **Token names are unchanged** — this is a theme-config schema change, not a
+  `tokens.css` migration, so no consumer CSS or token references are affected.
+  The shipped `default.json` was regenerated; the neutral shift is sub-1-LSB per
+  channel and every derived `--surface-*` / `--text-*` / `--color-*` token is
+  byte-identical.
+
+### Fixed
+
+- **A component's surface control no longer vanishes when its fill is a flat
+  colour.** `componentGradientSource` returned `undefined` for any non-gradient
+  alias and `GradientEditor` renders only `{#if gradient}`, so the surface editor
+  disappeared whenever a fill was a plain colour (e.g. SectionDivider's default
+  transparent). The editor now synthesizes a none/solid single-stop snapshot from
+  a flat (or absent) alias so the type picker always renders, and promotes the
+  flat alias to a real gradient on first edit. SectionDivider's section heading is
+  renamed "Background" → "Surface" to match Panel and disambiguate it from the
+  preview backdrop control.
+- **Palette colour overrides now apply live while you drag.** A new Text /
+  Surfaces / Borders override previously reached neither the live page nor the
+  preview swatch until commit — `handleColorChange` only wrote to the store when
+  the key was already an override. Every drag tick now writes (the open session
+  collapses to one undo entry; cancel/confirm clean up no-ops), and the per-step
+  hex text tracks the live colour too.
+
+### Migration
+
+- **Consumer themes migrate automatically on load.** `unifyGrayPalettes` (run in
+  `loadFromFile` after `renamePrimaryPaletteKey`) close-maps existing neutrals to
+  the unified form: `baseColor` snaps to the effective step-500 colour (preserving
+  the subtle tint and the neutral lightness ramp), the saturation curve becomes
+  flat-100, and the palette is locked to base. Every palette drops the four
+  vestigial gray fields, and the `gray-lightness` / `gray-saturation` curve-offset
+  keys fold into `lightness` / `saturation`. Default and flat-saturation neutrals
+  are visually identical; only a hand-shaped gray *saturation* curve migrates
+  approximately and may want a quick manual retune.
+
+## 0.38.0 — Overridable scroll reset for smooth-scroll hosts
+
+### Added
+
+- **`setScrollReset(fn)` lets a host route navigation's scroll reset through its
+  own scroll system.** On a non-hash `navigate()` the router resets the viewport
+  to the top. That default calls `window.scrollTo(0, 0)`, which is invisible to
+  consumers driving scroll with a smooth-scroll library (Lenis, Locomotive):
+  their scroll position is decoupled from the window, so the rendered page stays
+  put — most visibly when `LiveTokensRouter` intercepts an in-page link (e.g. a
+  card) and the new page opens mid-scroll instead of at the top. Register a reset
+  that drives your provider (`setScrollReset(() => lenis.scrollTo(0, { immediate: true }))`)
+  and both the overlay's nav and intercepted links reset correctly. Hash targets
+  still skip the reset so in-page anchors are unaffected. Backward compatible —
+  unset, the native `window.scrollTo` behavior is unchanged.
+
 ## 0.37.0 — ImageLightbox `capNatural` accepts a multiple
 
 ### Added

package/dist-plugin/index.cjs

@@ -192,16 +192,16 @@ function sampleCurve(anchors, xPos) {
 
 // src/editor/core/palettes/paletteDerivation.ts
 var PALETTE_SPECS = [
-  { label: "Neutral", cssNamespace: "neutral", mode: "gray", initialColor: "#808080" },
-  { label: "Alternate", cssNamespace: "alternate", mode: "gray", initialColor: "#808080" },
-  { label: "Background", cssNamespace: "canvas", mode: "chromatic", emptySelector: true, initialColor: "#1a1a2e" },
-  { label: "Brand", cssNamespace: "brand", mode: "chromatic", initialColor: "#c93636" },
-  { label: "Accent", cssNamespace: "accent", mode: "chromatic", initialColor: "#f49e0b" },
-  { label: "Special", cssNamespace: "special", mode: "chromatic", initialColor: "#8b5cf6" },
-  { label: "Info", cssNamespace: "info", mode: "chromatic", initialColor: "#3077e8" },
-  { label: "Success", cssNamespace: "success", mode: "chromatic", initialColor: "#21c45d" },
-  { label: "Warning", cssNamespace: "warning", mode: "chromatic", initialColor: "#e66e1a" },
-  { label: "Danger", cssNamespace: "danger", mode: "chromatic", initialColor: "#e8304f" }
+  { label: "Neutral", cssNamespace: "neutral", neutral: true, initialColor: "#70787e" },
+  { label: "Alternate", cssNamespace: "alternate", neutral: true, initialColor: "#817b78" },
+  { label: "Background", cssNamespace: "canvas", emptySelector: true, initialColor: "#1a1a2e" },
+  { label: "Brand", cssNamespace: "brand", initialColor: "#c93636" },
+  { label: "Accent", cssNamespace: "accent", initialColor: "#f49e0b" },
+  { label: "Special", cssNamespace: "special", initialColor: "#8b5cf6" },
+  { label: "Info", cssNamespace: "info", initialColor: "#3077e8" },
+  { label: "Success", cssNamespace: "success", initialColor: "#21c45d" },
+  { label: "Warning", cssNamespace: "warning", initialColor: "#e66e1a" },
+  { label: "Danger", cssNamespace: "danger", initialColor: "#e8304f" }
 ];
 var PALETTE_STEPS = [
   { label: "100" },
@@ -216,19 +216,6 @@ var PALETTE_STEPS = [
   { label: "900" },
   { label: "950" }
 ];
-var GRAY_STEPS = [
-  { label: "100" },
-  { label: "200" },
-  { label: "300" },
-  { label: "400" },
-  { label: "500" },
-  { label: "600" },
-  { label: "700" },
-  { label: "800" },
-  { label: "850" },
-  { label: "900" },
-  { label: "950" }
-];
 var SCALES = [
   {
     title: "Surfaces",
@@ -268,9 +255,6 @@ var SCALES = [
 ];
 var DEFAULT_PALETTE_LIGHTNESS = () => [makeAnchor(0, 95, 5), makeAnchor(100, 8, 5)];
 var DEFAULT_PALETTE_SATURATION = () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)];
-var DEFAULT_GRAY_LIGHTNESS = () => [makeAnchor(0, 92, 5), makeAnchor(100, 3, 5)];
-var DEFAULT_GRAY_SATURATION = () => [makeAnchor(0, 20, 30), makeAnchor(100, 20, 30)];
-var DEFAULT_TINT_CHROMA = 0.04;
 var defaultScaleCurves = {
   Surfaces: {
     lightness: () => [makeAnchor(0, 15, 5), makeAnchor(100, 47, 5)],
@@ -288,9 +272,6 @@ var defaultScaleCurves = {
 function paletteStepKey(label) {
   return `Palette-${label}`;
 }
-function grayStepKey(label) {
-  return `gray-${label}`;
-}
 function stepKey(scaleTitle, stepName) {
   return `${scaleTitle}-${stepName}`;
 }
@@ -306,16 +287,6 @@ function computePaletteColor(index, base, lightnessCurve, saturationCurve, curve
   const clamped = gamutClamp(targetL, targetC, h);
   return oklchToHex(clamped.l, clamped.c, clamped.h);
 }
-function computeGrayColor(index, hue, chroma, grayLightnessCurve, graySaturationCurve, curveOffset) {
-  const xPos = stepIndexToX(index, GRAY_STEPS.length);
-  const lOff = curveOffset["gray-lightness"] ?? 0;
-  const sOff = curveOffset["gray-saturation"] ?? 0;
-  const targetL = Math.max(0, Math.min(100, sampleCurve(grayLightnessCurve, xPos) + lOff)) / 100;
-  const satMul = Math.max(0, Math.min(2, (sampleCurve(graySaturationCurve, xPos) + sOff) / 100));
-  const targetC = chroma * satMul;
-  const clamped = gamutClamp(targetL, targetC, hue);
-  return oklchToHex(clamped.l, clamped.c, clamped.h);
-}
 function computeDerivedColor(step, base, scaleTitle, scaleCurves, curveOffset) {
   const scale = SCALES.find((s) => s.title === scaleTitle);
   const idx = scale.steps.indexOf(step);
@@ -361,36 +332,18 @@ function derivePaletteVars(spec, config) {
   const overrides = config.overrides ?? {};
   const curveOffset = config.curveOffset ?? {};
   const scaleCurves = config.scaleCurves ?? {};
-  let baseForScales;
-  if (spec.mode === "gray") {
-    const grayLightnessCurve = config.grayLightnessCurve ?? DEFAULT_GRAY_LIGHTNESS();
-    const graySaturationCurve = config.graySaturationCurve ?? DEFAULT_GRAY_SATURATION();
-    const tintHue = config.tintHue ?? 240;
-    const tintChroma = config.tintChroma ?? DEFAULT_TINT_CHROMA;
-    let gray500 = "#808080";
-    GRAY_STEPS.forEach((step, index) => {
-      const k = grayStepKey(step.label);
-      const hex = computeGrayColor(index, tintHue, tintChroma, grayLightnessCurve, graySaturationCurve, curveOffset);
-      const effective = k in overrides ? overrides[k] : hex;
-      out[`--color-${spec.cssNamespace}-${step.label}`] = effective;
-      if (step.label === "500") gray500 = hex;
-    });
-    baseForScales = gray500;
-  } else {
-    const lightnessCurve = config.lightnessCurve ?? DEFAULT_PALETTE_LIGHTNESS();
-    const saturationCurve = config.saturationCurve ?? DEFAULT_PALETTE_SATURATION();
-    PALETTE_STEPS.forEach((ps, index) => {
-      const k = paletteStepKey(ps.label);
-      const hex = computePaletteColor(index, baseColor, lightnessCurve, saturationCurve, curveOffset);
-      const effective = k in overrides ? overrides[k] : hex;
-      out[`--color-${spec.cssNamespace}-${ps.label}`] = effective;
-    });
-    baseForScales = baseColor;
-  }
+  const lightnessCurve = config.lightnessCurve ?? DEFAULT_PALETTE_LIGHTNESS();
+  const saturationCurve = config.saturationCurve ?? DEFAULT_PALETTE_SATURATION();
+  PALETTE_STEPS.forEach((ps, index) => {
+    const k = paletteStepKey(ps.label);
+    const hex = computePaletteColor(index, baseColor, lightnessCurve, saturationCurve, curveOffset);
+    const effective = k in overrides ? overrides[k] : hex;
+    out[`--color-${spec.cssNamespace}-${ps.label}`] = effective;
+  });
   for (const scale of SCALES) {
     for (const step of scale.steps) {
       const k = stepKey(scale.title, step.name);
-      const hex = k in overrides ? overrides[k] : computeDerivedColor(step, baseForScales, scale.title, scaleCurves, curveOffset);
+      const hex = k in overrides ? overrides[k] : computeDerivedColor(step, baseColor, scale.title, scaleCurves, curveOffset);
       const varName = scaleToCssVar(scale.title, step.name, spec.cssNamespace);
       if (varName) out[varName] = hex;
     }
@@ -451,12 +404,7 @@ function reconcilePalettesFromCssVars(palettes, cssVars) {
       const anchorHex = cssVars[`--color-${spec.cssNamespace}-500`];
       if (anchorHex && HEX_RE.test(anchorHex.trim())) {
         const hex = anchorHex.trim();
-        if (spec.mode === "gray") {
-          const { c, h } = hexToOklch(hex);
-          next[spec.label] = { ...current, tintHue: h, tintChroma: c, _imported: false };
-        } else {
-          next[spec.label] = { ...current, baseColor: hex, _imported: false };
-        }
+        next[spec.label] = { ...current, baseColor: hex, _imported: false };
         snapped.add(spec.label);
       } else {
         next[spec.label] = { ...current, _imported: false };

package/dist-plugin/index.js

@@ -151,16 +151,16 @@ function sampleCurve(anchors, xPos) {
 
 // src/editor/core/palettes/paletteDerivation.ts
 var PALETTE_SPECS = [
-  { label: "Neutral", cssNamespace: "neutral", mode: "gray", initialColor: "#808080" },
-  { label: "Alternate", cssNamespace: "alternate", mode: "gray", initialColor: "#808080" },
-  { label: "Background", cssNamespace: "canvas", mode: "chromatic", emptySelector: true, initialColor: "#1a1a2e" },
-  { label: "Brand", cssNamespace: "brand", mode: "chromatic", initialColor: "#c93636" },
-  { label: "Accent", cssNamespace: "accent", mode: "chromatic", initialColor: "#f49e0b" },
-  { label: "Special", cssNamespace: "special", mode: "chromatic", initialColor: "#8b5cf6" },
-  { label: "Info", cssNamespace: "info", mode: "chromatic", initialColor: "#3077e8" },
-  { label: "Success", cssNamespace: "success", mode: "chromatic", initialColor: "#21c45d" },
-  { label: "Warning", cssNamespace: "warning", mode: "chromatic", initialColor: "#e66e1a" },
-  { label: "Danger", cssNamespace: "danger", mode: "chromatic", initialColor: "#e8304f" }
+  { label: "Neutral", cssNamespace: "neutral", neutral: true, initialColor: "#70787e" },
+  { label: "Alternate", cssNamespace: "alternate", neutral: true, initialColor: "#817b78" },
+  { label: "Background", cssNamespace: "canvas", emptySelector: true, initialColor: "#1a1a2e" },
+  { label: "Brand", cssNamespace: "brand", initialColor: "#c93636" },
+  { label: "Accent", cssNamespace: "accent", initialColor: "#f49e0b" },
+  { label: "Special", cssNamespace: "special", initialColor: "#8b5cf6" },
+  { label: "Info", cssNamespace: "info", initialColor: "#3077e8" },
+  { label: "Success", cssNamespace: "success", initialColor: "#21c45d" },
+  { label: "Warning", cssNamespace: "warning", initialColor: "#e66e1a" },
+  { label: "Danger", cssNamespace: "danger", initialColor: "#e8304f" }
 ];
 var PALETTE_STEPS = [
   { label: "100" },
@@ -175,19 +175,6 @@ var PALETTE_STEPS = [
   { label: "900" },
   { label: "950" }
 ];
-var GRAY_STEPS = [
-  { label: "100" },
-  { label: "200" },
-  { label: "300" },
-  { label: "400" },
-  { label: "500" },
-  { label: "600" },
-  { label: "700" },
-  { label: "800" },
-  { label: "850" },
-  { label: "900" },
-  { label: "950" }
-];
 var SCALES = [
   {
     title: "Surfaces",
@@ -227,9 +214,6 @@ var SCALES = [
 ];
 var DEFAULT_PALETTE_LIGHTNESS = () => [makeAnchor(0, 95, 5), makeAnchor(100, 8, 5)];
 var DEFAULT_PALETTE_SATURATION = () => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)];
-var DEFAULT_GRAY_LIGHTNESS = () => [makeAnchor(0, 92, 5), makeAnchor(100, 3, 5)];
-var DEFAULT_GRAY_SATURATION = () => [makeAnchor(0, 20, 30), makeAnchor(100, 20, 30)];
-var DEFAULT_TINT_CHROMA = 0.04;
 var defaultScaleCurves = {
   Surfaces: {
     lightness: () => [makeAnchor(0, 15, 5), makeAnchor(100, 47, 5)],
@@ -247,9 +231,6 @@ var defaultScaleCurves = {
 function paletteStepKey(label) {
   return `Palette-${label}`;
 }
-function grayStepKey(label) {
-  return `gray-${label}`;
-}
 function stepKey(scaleTitle, stepName) {
   return `${scaleTitle}-${stepName}`;
 }
@@ -265,16 +246,6 @@ function computePaletteColor(index, base, lightnessCurve, saturationCurve, curve
   const clamped = gamutClamp(targetL, targetC, h);
   return oklchToHex(clamped.l, clamped.c, clamped.h);
 }
-function computeGrayColor(index, hue, chroma, grayLightnessCurve, graySaturationCurve, curveOffset) {
-  const xPos = stepIndexToX(index, GRAY_STEPS.length);
-  const lOff = curveOffset["gray-lightness"] ?? 0;
-  const sOff = curveOffset["gray-saturation"] ?? 0;
-  const targetL = Math.max(0, Math.min(100, sampleCurve(grayLightnessCurve, xPos) + lOff)) / 100;
-  const satMul = Math.max(0, Math.min(2, (sampleCurve(graySaturationCurve, xPos) + sOff) / 100));
-  const targetC = chroma * satMul;
-  const clamped = gamutClamp(targetL, targetC, hue);
-  return oklchToHex(clamped.l, clamped.c, clamped.h);
-}
 function computeDerivedColor(step, base, scaleTitle, scaleCurves, curveOffset) {
   const scale = SCALES.find((s) => s.title === scaleTitle);
   const idx = scale.steps.indexOf(step);
@@ -320,36 +291,18 @@ function derivePaletteVars(spec, config) {
   const overrides = config.overrides ?? {};
   const curveOffset = config.curveOffset ?? {};
   const scaleCurves = config.scaleCurves ?? {};
-  let baseForScales;
-  if (spec.mode === "gray") {
-    const grayLightnessCurve = config.grayLightnessCurve ?? DEFAULT_GRAY_LIGHTNESS();
-    const graySaturationCurve = config.graySaturationCurve ?? DEFAULT_GRAY_SATURATION();
-    const tintHue = config.tintHue ?? 240;
-    const tintChroma = config.tintChroma ?? DEFAULT_TINT_CHROMA;
-    let gray500 = "#808080";
-    GRAY_STEPS.forEach((step, index) => {
-      const k = grayStepKey(step.label);
-      const hex = computeGrayColor(index, tintHue, tintChroma, grayLightnessCurve, graySaturationCurve, curveOffset);
-      const effective = k in overrides ? overrides[k] : hex;
-      out[`--color-${spec.cssNamespace}-${step.label}`] = effective;
-      if (step.label === "500") gray500 = hex;
-    });
-    baseForScales = gray500;
-  } else {
-    const lightnessCurve = config.lightnessCurve ?? DEFAULT_PALETTE_LIGHTNESS();
-    const saturationCurve = config.saturationCurve ?? DEFAULT_PALETTE_SATURATION();
-    PALETTE_STEPS.forEach((ps, index) => {
-      const k = paletteStepKey(ps.label);
-      const hex = computePaletteColor(index, baseColor, lightnessCurve, saturationCurve, curveOffset);
-      const effective = k in overrides ? overrides[k] : hex;
-      out[`--color-${spec.cssNamespace}-${ps.label}`] = effective;
-    });
-    baseForScales = baseColor;
-  }
+  const lightnessCurve = config.lightnessCurve ?? DEFAULT_PALETTE_LIGHTNESS();
+  const saturationCurve = config.saturationCurve ?? DEFAULT_PALETTE_SATURATION();
+  PALETTE_STEPS.forEach((ps, index) => {
+    const k = paletteStepKey(ps.label);
+    const hex = computePaletteColor(index, baseColor, lightnessCurve, saturationCurve, curveOffset);
+    const effective = k in overrides ? overrides[k] : hex;
+    out[`--color-${spec.cssNamespace}-${ps.label}`] = effective;
+  });
   for (const scale of SCALES) {
     for (const step of scale.steps) {
       const k = stepKey(scale.title, step.name);
-      const hex = k in overrides ? overrides[k] : computeDerivedColor(step, baseForScales, scale.title, scaleCurves, curveOffset);
+      const hex = k in overrides ? overrides[k] : computeDerivedColor(step, baseColor, scale.title, scaleCurves, curveOffset);
       const varName = scaleToCssVar(scale.title, step.name, spec.cssNamespace);
       if (varName) out[varName] = hex;
     }
@@ -410,12 +363,7 @@ function reconcilePalettesFromCssVars(palettes, cssVars) {
       const anchorHex = cssVars[`--color-${spec.cssNamespace}-500`];
       if (anchorHex && HEX_RE.test(anchorHex.trim())) {
         const hex = anchorHex.trim();
-        if (spec.mode === "gray") {
-          const { c, h } = hexToOklch(hex);
-          next[spec.label] = { ...current, tintHue: h, tintChroma: c, _imported: false };
-        } else {
-          next[spec.label] = { ...current, baseColor: hex, _imported: false };
-        }
+        next[spec.label] = { ...current, baseColor: hex, _imported: false };
         snapped.add(spec.label);
       } else {
         next[spec.label] = { ...current, _imported: false };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.37.0",
+  "version": "0.39.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [

package/src/editor/component-editor/SectionDividerEditor.svelte

@@ -428,7 +428,7 @@
       {#snippet compositeControls(_stateName)}
         <div class="gradient-bg-section">
           <GradientEditor
-            sectionLabel="Background"
+            sectionLabel="Surface"
             source={gradientSources[v.key]}
             stopIdPrefix={`sectiondivider-${v.key}`}
             familyFilter={getColorFamily(v.key)}

package/src/editor/core/palettes/paletteDerivation.ts

@@ -17,14 +17,14 @@ import { hexToOklch, oklchToHex, gamutClamp } from './oklch';
 import { type CurveAnchor, sampleCurve, makeAnchor } from '../../ui/curveEngine';
 import type { PaletteConfig } from '../themes/themeTypes';
 
-export type PaletteMode = 'chromatic' | 'gray';
-
 export interface PaletteSpec {
   label: string;
   cssNamespace: string;
-  mode: PaletteMode;
   emptySelector?: boolean;
   initialColor: string;
+  /** Seed-default role only: neutrals start with a calm low-chroma base and
+   *  the neutral lightness ramp. The derivation path is identical for all. */
+  neutral?: boolean;
 }
 
 /**
@@ -33,16 +33,16 @@ export interface PaletteSpec {
  * here lets the store seed boot-time vars without depending on the UI tree.
  */
 export const PALETTE_SPECS: readonly PaletteSpec[] = [
-  { label: 'Neutral',    cssNamespace: 'neutral',   mode: 'gray',      initialColor: '#808080' },
-  { label: 'Alternate',  cssNamespace: 'alternate', mode: 'gray',      initialColor: '#808080' },
-  { label: 'Background', cssNamespace: 'canvas',    mode: 'chromatic', emptySelector: true, initialColor: '#1a1a2e' },
-  { label: 'Brand',      cssNamespace: 'brand',     mode: 'chromatic', initialColor: '#c93636' },
-  { label: 'Accent',     cssNamespace: 'accent',    mode: 'chromatic', initialColor: '#f49e0b' },
-  { label: 'Special',    cssNamespace: 'special',   mode: 'chromatic', initialColor: '#8b5cf6' },
-  { label: 'Info',       cssNamespace: 'info',      mode: 'chromatic', initialColor: '#3077e8' },
-  { label: 'Success',    cssNamespace: 'success',   mode: 'chromatic', initialColor: '#21c45d' },
-  { label: 'Warning',    cssNamespace: 'warning',   mode: 'chromatic', initialColor: '#e66e1a' },
-  { label: 'Danger',     cssNamespace: 'danger',    mode: 'chromatic', initialColor: '#e8304f' },
+  { label: 'Neutral',    cssNamespace: 'neutral',   neutral: true, initialColor: '#70787e' },
+  { label: 'Alternate',  cssNamespace: 'alternate', neutral: true, initialColor: '#817b78' },
+  { label: 'Background', cssNamespace: 'canvas',    emptySelector: true, initialColor: '#1a1a2e' },
+  { label: 'Brand',      cssNamespace: 'brand',     initialColor: '#c93636' },
+  { label: 'Accent',     cssNamespace: 'accent',    initialColor: '#f49e0b' },
+  { label: 'Special',    cssNamespace: 'special',   initialColor: '#8b5cf6' },
+  { label: 'Info',       cssNamespace: 'info',      initialColor: '#3077e8' },
+  { label: 'Success',    cssNamespace: 'success',   initialColor: '#21c45d' },
+  { label: 'Warning',    cssNamespace: 'warning',   initialColor: '#e66e1a' },
+  { label: 'Danger',     cssNamespace: 'danger',    initialColor: '#e8304f' },
 ] as const;
 
 const PALETTE_STEPS = [
@@ -51,12 +51,6 @@ const PALETTE_STEPS = [
   { label: '850' }, { label: '900' }, { label: '950' },
 ];
 
-const GRAY_STEPS = [
-  { label: '100' }, { label: '200' }, { label: '300' }, { label: '400' },
-  { label: '500' }, { label: '600' }, { label: '700' }, { label: '800' },
-  { label: '850' }, { label: '900' }, { label: '950' },
-];
-
 interface ScaleStep { name: string; position: number; }
 interface Scale { title: string; isText: boolean; steps: ScaleStep[]; }
 
@@ -97,9 +91,6 @@ const SCALES: readonly Scale[] = [
 
 export const DEFAULT_PALETTE_LIGHTNESS = (): CurveAnchor[] => [makeAnchor(0, 95, 5), makeAnchor(100, 8, 5)];
 export const DEFAULT_PALETTE_SATURATION = (): CurveAnchor[] => [makeAnchor(0, 100, 30), makeAnchor(100, 100, 30)];
-export const DEFAULT_GRAY_LIGHTNESS = (): CurveAnchor[] => [makeAnchor(0, 92, 5), makeAnchor(100, 3, 5)];
-export const DEFAULT_GRAY_SATURATION = (): CurveAnchor[] => [makeAnchor(0, 20, 30), makeAnchor(100, 20, 30)];
-export const DEFAULT_TINT_CHROMA = 0.04;
 
 export const defaultScaleCurves = {
   Surfaces: {
@@ -117,7 +108,6 @@ export const defaultScaleCurves = {
 } as const;
 
 function paletteStepKey(label: string): string { return `Palette-${label}`; }
-function grayStepKey(label: string): string { return `gray-${label}`; }
 function stepKey(scaleTitle: string, stepName: string): string { return `${scaleTitle}-${stepName}`; }
 
 function stepIndexToX(index: number, total: number): number {
@@ -140,24 +130,6 @@ function computePaletteColor(
   return oklchToHex(clamped.l, clamped.c, clamped.h);
 }
 
-function computeGrayColor(
-  index: number,
-  hue: number,
-  chroma: number,
-  grayLightnessCurve: CurveAnchor[],
-  graySaturationCurve: CurveAnchor[],
-  curveOffset: Record<string, number>,
-): string {
-  const xPos = stepIndexToX(index, GRAY_STEPS.length);
-  const lOff = curveOffset['gray-lightness'] ?? 0;
-  const sOff = curveOffset['gray-saturation'] ?? 0;
-  const targetL = Math.max(0, Math.min(100, sampleCurve(grayLightnessCurve, xPos) + lOff)) / 100;
-  const satMul = Math.max(0, Math.min(2, (sampleCurve(graySaturationCurve, xPos) + sOff) / 100));
-  const targetC = chroma * satMul;
-  const clamped = gamutClamp(targetL, targetC, hue);
-  return oklchToHex(clamped.l, clamped.c, clamped.h);
-}
-
 function computeDerivedColor(
   step: ScaleStep,
   base: string,
@@ -212,43 +184,22 @@ export function derivePaletteVars(spec: PaletteSpec, config: PaletteConfig | und
   const overrides = config.overrides ?? {};
   const curveOffset = config.curveOffset ?? {};
   const scaleCurves = config.scaleCurves ?? {};
+  const lightnessCurve = config.lightnessCurve ?? DEFAULT_PALETTE_LIGHTNESS();
+  const saturationCurve = config.saturationCurve ?? DEFAULT_PALETTE_SATURATION();
 
-  let baseForScales: string;
-
-  if (spec.mode === 'gray') {
-    const grayLightnessCurve = config.grayLightnessCurve ?? DEFAULT_GRAY_LIGHTNESS();
-    const graySaturationCurve = config.graySaturationCurve ?? DEFAULT_GRAY_SATURATION();
-    const tintHue = config.tintHue ?? 240;
-    const tintChroma = config.tintChroma ?? DEFAULT_TINT_CHROMA;
-
-    let gray500 = '#808080';
-    GRAY_STEPS.forEach((step, index) => {
-      const k = grayStepKey(step.label);
-      const hex = computeGrayColor(index, tintHue, tintChroma, grayLightnessCurve, graySaturationCurve, curveOffset);
-      const effective = (k in overrides) ? overrides[k] : hex;
-      out[`--color-${spec.cssNamespace}-${step.label}`] = effective;
-      if (step.label === '500') gray500 = hex;
-    });
-    baseForScales = gray500;
-  } else {
-    const lightnessCurve = config.lightnessCurve ?? DEFAULT_PALETTE_LIGHTNESS();
-    const saturationCurve = config.saturationCurve ?? DEFAULT_PALETTE_SATURATION();
-
-    PALETTE_STEPS.forEach((ps, index) => {
-      const k = paletteStepKey(ps.label);
-      const hex = computePaletteColor(index, baseColor, lightnessCurve, saturationCurve, curveOffset);
-      const effective = (k in overrides) ? overrides[k] : hex;
-      out[`--color-${spec.cssNamespace}-${ps.label}`] = effective;
-    });
-    baseForScales = baseColor;
-  }
+  PALETTE_STEPS.forEach((ps, index) => {
+    const k = paletteStepKey(ps.label);
+    const hex = computePaletteColor(index, baseColor, lightnessCurve, saturationCurve, curveOffset);
+    const effective = (k in overrides) ? overrides[k] : hex;
+    out[`--color-${spec.cssNamespace}-${ps.label}`] = effective;
+  });
 
   for (const scale of SCALES) {
     for (const step of scale.steps) {
       const k = stepKey(scale.title, step.name);
       const hex = (k in overrides)
         ? overrides[k]
-        : computeDerivedColor(step, baseForScales, scale.title, scaleCurves, curveOffset);
+        : computeDerivedColor(step, baseColor, scale.title, scaleCurves, curveOffset);
       const varName = scaleToCssVar(scale.title, step.name, spec.cssNamespace);
       if (varName) out[varName] = hex;
     }
@@ -307,12 +258,11 @@ const HEX_RE = /^#[0-9a-f]{6}$/i;
  *
  *   - **Snap** (gated by `_imported`): for any palette whose `_imported` flag
  *     is true, the imported `--color-{ns}-500` value is treated as the
- *     authoritative anchor. Chromatic palettes get `baseColor` snapped to it;
- *     gray palettes (Neutral/Alternate) get `tintHue` + `tintChroma` derived
- *     from it via OKLCH. The flag is then cleared. Editor-authored palettes
- *     (no `_imported`) are left untouched — see `temp/manifest-robustness-plan.md`
- *     §9 for why "snap on any divergence" was wrong: it would have flipped
- *     `themes/default.json`'s accent from teal to olive on first read.
+ *     authoritative anchor and `baseColor` is snapped to it. The flag is then
+ *     cleared. Editor-authored palettes (no `_imported`) are left untouched —
+ *     see `temp/manifest-robustness-plan.md` §9 for why "snap on any
+ *     divergence" was wrong: it would have flipped `themes/default.json`'s
+ *     accent from teal to olive on first read.
  *
  *   - **Consume** (always): every variable the palette's derivation produces
  *     is reported in `consumed` so the caller can strip it from
@@ -345,12 +295,7 @@ export function reconcilePalettesFromCssVars(
       const anchorHex = cssVars[`--color-${spec.cssNamespace}-500`];
       if (anchorHex && HEX_RE.test(anchorHex.trim())) {
         const hex = anchorHex.trim();
-        if (spec.mode === 'gray') {
-          const { c, h } = hexToOklch(hex);
-          next[spec.label] = { ...current, tintHue: h, tintChroma: c, _imported: false };
-        } else {
-          next[spec.label] = { ...current, baseColor: hex, _imported: false };
-        }
+        next[spec.label] = { ...current, baseColor: hex, _imported: false };
         snapped.add(spec.label);
       } else {
         // No anchor in cssVariables to snap to — flag has nothing to do; clear

package/src/editor/core/routing/router.ts

@@ -13,6 +13,17 @@ function rememberPrev(current: string) {
 
 export const route = writable<string>('/');
 
+// Scroll reset on navigation. The default jumps the native viewport to the top,
+// which is invisible to consumers that drive scrolling with a smooth-scroll
+// library (Lenis, Locomotive): their internal scroll position is decoupled from
+// the window, so `window.scrollTo` leaves the rendered page where it was.
+// `setScrollReset` lets such hosts route the reset through their own provider.
+let scrollReset = () => window.scrollTo(0, 0);
+
+export function setScrollReset(fn: () => void) {
+  scrollReset = fn;
+}
+
 let initialised = false;
 
 /**
@@ -43,7 +54,7 @@ export function navigate(path: string) {
     rememberPrev(window.location.pathname || '/');
     history.pushState(null, '', path);
     if (!path.includes('#')) {
-      window.scrollTo(0, 0);
+      scrollReset();
     }
   }
   route.set(pathname);

package/src/editor/core/store/editorStore.ts

@@ -28,6 +28,7 @@ import {
   runMigrations,
 } from '../themes/migrations';
 import { renamePrimaryPaletteKey } from '../themes/migrations/2026-05-13-primary-to-brand';
+import { unifyGrayPalettes } from '../themes/migrations/2026-06-05-palette-unification';
 import { __resetRendererCacheForTests, installRenderer } from './editorRenderer';
 import {
   store,
@@ -511,7 +512,7 @@ const domainLoaders: Record<string, DomainLoader> = {
  */
 export function loadFromFile(theme: Theme): void {
   const next = emptyState();
-  next.palettes = renamePrimaryPaletteKey(structuredClone(theme.editorConfigs ?? {}));
+  next.palettes = unifyGrayPalettes(renamePrimaryPaletteKey(structuredClone(theme.editorConfigs ?? {})));
   next.fonts.sources = structuredClone(theme.fontSources ?? []);
   next.fonts.stacks  = structuredClone(theme.fontStacks  ?? []);
   const rawVars = runMigrations(