@lobehub/ui 6.0.0-beta.9 → 6.0.1

package/es/styles/theme/createLobeToken.d.mts

@@ -1,12 +1,13 @@
-import { NeutralColors } from "../customTheme.mjs";
+import { LobeNeutralColor } from "./customNeutral.mjs";
 import { LobePrimaryColor } from "./customPrimary.mjs";
 //#region src/styles/theme/createLobeToken.d.ts
 export interface CreateLobeTokenParams {
   appearance: 'light' | 'dark';
-  neutralColor?: NeutralColors;
+  neutralColor?: LobeNeutralColor;
+  palette?: string;
   primaryColor?: LobePrimaryColor;
 }
-export declare const createLobeTokenGroups: ({ appearance, neutralColor, primaryColor }: CreateLobeTokenParams) => {
+export declare const createLobeTokenGroups: ({ appearance, neutralColor, palette: paletteName, primaryColor }: CreateLobeTokenParams) => {
   neutral: {
     colorBgContainerDisabled: string;
     colorBgContainerSecondary: string;
@@ -29,6 +30,10 @@ export declare const createLobeTokenGroups: ({ appearance, neutralColor, primary
     controlItemBgActiveDisabled: string;
     controlItemBgHover: string;
     controlTmpOutline: string;
+    colorText: string;
+    colorTextQuaternary: string;
+    colorTextSecondary: string;
+    colorTextTertiary: string;
     colorBgContainer: string;
     colorBgElevated: string;
     colorBgLayout: string;
@@ -40,10 +45,6 @@ export declare const createLobeTokenGroups: ({ appearance, neutralColor, primary
     colorFillQuaternary: string;
     colorFillSecondary: string;
     colorFillTertiary: string;
-    colorText: string;
-    colorTextQuaternary: string;
-    colorTextSecondary: string;
-    colorTextTertiary: string;
   };
   palette: {
     colorErrorAffix: string;
@@ -1291,6 +1292,9 @@ export declare const createLobeTokenGroups: ({ appearance, neutralColor, primary
     motionEaseOutBack: string;
     motionEaseOutCirc: string;
     motionEaseOutQuint: string;
+    motionSpringBouncy: string;
+    motionSpringSmooth: string;
+    motionSpringSnappy: string;
     motionUnit: number;
     opacityImage: number;
     opacityLoading: number;

package/es/styles/theme/createLobeToken.mjs

@@ -1,10 +1,11 @@
+import { resolveStatusScales } from "./customPalette.mjs";
 import { createNeutralToken } from "./token/neutral.mjs";
 import { createPaletteToken } from "./token/palette.mjs";
 import { createPrimaryToken } from "./token/primary.mjs";
 import { staticToken } from "./token/static.mjs";
 //#region src/styles/theme/createLobeToken.ts
-const createLobeTokenGroups = ({ appearance, neutralColor, primaryColor }) => {
-	const palette = createPaletteToken(appearance);
+const createLobeTokenGroups = ({ appearance, neutralColor, palette: paletteName, primaryColor }) => {
+	const palette = createPaletteToken(appearance, resolveStatusScales(paletteName));
 	return {
 		neutral: createNeutralToken(appearance, neutralColor, palette),
 		palette,

package/es/styles/theme/createLobeToken.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"createLobeToken.mjs","names":[],"sources":["../../../src/styles/theme/createLobeToken.ts"],"sourcesContent":["import type { NeutralColors } from '../customTheme';\nimport type { LobePrimaryColor } from './customPrimary';\nimport { createNeutralToken } from './token/neutral';\nimport { createPaletteToken } from './token/palette';\nimport { createPrimaryToken } from './token/primary';\nimport { staticToken } from './token/static';\n\nexport interface CreateLobeTokenParams {\n  appearance: 'light' | 'dark';\n  neutralColor?: NeutralColors;\n  primaryColor?: LobePrimaryColor;\n}\n\nexport const createLobeTokenGroups = ({\n  appearance,\n  neutralColor,\n  primaryColor,\n}: CreateLobeTokenParams) => {\n  const palette = createPaletteToken(appearance);\n\n  return {\n    neutral: createNeutralToken(appearance, neutralColor, palette),\n    palette,\n    primary: createPrimaryToken(appearance, primaryColor),\n    static: staticToken,\n  };\n};\n\nexport type LobeTokenGroups = ReturnType<typeof createLobeTokenGroups>;\n\nexport type LobeToken = LobeTokenGroups['static'] &\n  LobeTokenGroups['palette'] &\n  LobeTokenGroups['primary'] &\n  LobeTokenGroups['neutral'];\n\nexport const createLobeToken = (params: CreateLobeTokenParams): LobeToken => {\n  const groups = createLobeTokenGroups(params);\n\n  return { ...groups.static, ...groups.palette, ...groups.primary, ...groups.neutral };\n};\n"],"mappings":";;;;;AAaA,MAAa,yBAAyB,EACpC,YACA,cACA,mBAC2B;CAC3B,MAAM,UAAU,mBAAmB,UAAU;CAE7C,OAAO;EACL,SAAS,mBAAmB,YAAY,cAAc,OAAO;EAC7D;EACA,SAAS,mBAAmB,YAAY,YAAY;EACpD,QAAQ;CACV;AACF;AASA,MAAa,mBAAmB,WAA6C;CAC3E,MAAM,SAAS,sBAAsB,MAAM;CAE3C,OAAO;EAAE,GAAG,OAAO;EAAQ,GAAG,OAAO;EAAS,GAAG,OAAO;EAAS,GAAG,OAAO;CAAQ;AACrF"}
+{"version":3,"file":"createLobeToken.mjs","names":[],"sources":["../../../src/styles/theme/createLobeToken.ts"],"sourcesContent":["import type { LobeNeutralColor } from './customNeutral';\nimport { resolveStatusScales } from './customPalette';\nimport type { LobePrimaryColor } from './customPrimary';\nimport { createNeutralToken } from './token/neutral';\nimport { createPaletteToken } from './token/palette';\nimport { createPrimaryToken } from './token/primary';\nimport { staticToken } from './token/static';\n\nexport interface CreateLobeTokenParams {\n  appearance: 'light' | 'dark';\n  neutralColor?: LobeNeutralColor;\n  palette?: string;\n  primaryColor?: LobePrimaryColor;\n}\n\nexport const createLobeTokenGroups = ({\n  appearance,\n  neutralColor,\n  palette: paletteName,\n  primaryColor,\n}: CreateLobeTokenParams) => {\n  const palette = createPaletteToken(appearance, resolveStatusScales(paletteName));\n\n  return {\n    neutral: createNeutralToken(appearance, neutralColor, palette),\n    palette,\n    primary: createPrimaryToken(appearance, primaryColor),\n    static: staticToken,\n  };\n};\n\nexport type LobeTokenGroups = ReturnType<typeof createLobeTokenGroups>;\n\nexport type LobeToken = LobeTokenGroups['static'] &\n  LobeTokenGroups['palette'] &\n  LobeTokenGroups['primary'] &\n  LobeTokenGroups['neutral'];\n\nexport const createLobeToken = (params: CreateLobeTokenParams): LobeToken => {\n  const groups = createLobeTokenGroups(params);\n\n  return { ...groups.static, ...groups.palette, ...groups.primary, ...groups.neutral };\n};\n"],"mappings":";;;;;;AAeA,MAAa,yBAAyB,EACpC,YACA,cACA,SAAS,aACT,mBAC2B;CAC3B,MAAM,UAAU,mBAAmB,YAAY,oBAAoB,WAAW,CAAC;CAE/E,OAAO;EACL,SAAS,mBAAmB,YAAY,cAAc,OAAO;EAC7D;EACA,SAAS,mBAAmB,YAAY,YAAY;EACpD,QAAQ;CACV;AACF;AASA,MAAa,mBAAmB,WAA6C;CAC3E,MAAM,SAAS,sBAAsB,MAAM;CAE3C,OAAO;EAAE,GAAG,OAAO;EAAQ,GAAG,OAAO;EAAS,GAAG,OAAO;EAAS,GAAG,OAAO;CAAQ;AACrF"}

package/es/styles/theme/customNeutral.d.mts

@@ -0,0 +1,28 @@
+import { ColorScaleItem } from "../../color/types.mjs";
+import { NeutralColors } from "../customTheme.mjs";
+import { NeutralTextLadder } from "./token/neutralText.mjs";
+//#region src/styles/theme/customNeutral.d.ts
+/** Any 6-digit hex: tints the default gray ladder with its hue and chroma. */
+export type CustomNeutralColor = `#${string}`;
+/** A preset, a 6-digit hex, or a name registered with `registerLobeNeutral`. */
+export type LobeNeutralColor = NeutralColors | CustomNeutralColor | (string & {});
+export interface LobeNeutralScale {
+  /** Full 13-step scale (light / dark solid + alpha), same shape as the presets. */
+  scale: ColorScaleItem;
+  /** Text ladder [text, secondary, tertiary, quaternary]; defaults to the scale's steps 12/10/8/6. */
+  text?: Partial<NeutralTextLadder>;
+}
+export interface ResolvedNeutral {
+  scale: ColorScaleItem;
+  text: NeutralTextLadder;
+}
+export declare const isCustomNeutralColor: (value?: string) => value is CustomNeutralColor;
+/**
+ * Register a full custom neutral scale under `name`, then select it with
+ * `setLobeTheme({ neutralColor: name })` / `ThemeScope` / `LobeThemeScript`.
+ */
+export declare const registerLobeNeutral: (name: string, neutral: LobeNeutralScale | ColorScaleItem) => void;
+/** Same construction as the presets: the gray ladder's lightness, retinted to the hex's hue. */
+export declare const generateNeutralScale: (color: CustomNeutralColor) => ResolvedNeutral;
+//#endregion
+//# sourceMappingURL=customNeutral.d.mts.map

package/es/styles/theme/customNeutral.mjs

@@ -0,0 +1,84 @@
+import { notifyPaletteChange } from "./customPalette.mjs";
+import gray from "../../color/colors/gray.mjs";
+import { neutralColorScales } from "../../color/neutrals/index.mjs";
+import { neutralText } from "./token/neutralText.mjs";
+import chroma from "chroma-js";
+//#region src/styles/theme/customNeutral.ts
+const HEX = /^#[\da-f]{6}$/i;
+const NAME = /^[\w-]+$/;
+const MAX_CHROMA = .05;
+const isCustomNeutralColor = (value) => !!value && HEX.test(value);
+const registry = /* @__PURE__ */ new Map();
+const isRegisteredNeutral = (name) => !!name && registry.has(name);
+/**
+* Register a full custom neutral scale under `name`, then select it with
+* `setLobeTheme({ neutralColor: name })` / `ThemeScope` / `LobeThemeScript`.
+*/
+const registerLobeNeutral = (name, neutral) => {
+	if (!NAME.test(name)) throw new Error(`Invalid neutral name "${name}": use letters, digits, _ or -`);
+	if (name in neutralColorScales) throw new Error(`"${name}" is a built-in neutral preset`);
+	registry.set(name, "scale" in neutral ? neutral : { scale: neutral });
+	notifyPaletteChange();
+};
+const tint = (color, h, c) => {
+	const source = chroma(color);
+	const [l] = source.oklch();
+	return chroma.oklch(l, c, h).alpha(source.alpha());
+};
+const tintSteps = (steps, h, c, alpha) => steps.map((step) => alpha ? tint(step, h, c).css() : tint(step, h, c).hex());
+const cache = /* @__PURE__ */ new Map();
+/** Same construction as the presets: the gray ladder's lightness, retinted to the hex's hue. */
+const generateNeutralScale = (color) => {
+	const hex = color.toLowerCase();
+	const cached = cache.get(hex);
+	if (cached) return cached;
+	const [, rawC, rawH] = chroma(hex).oklch();
+	const h = Number.isNaN(rawH) ? 0 : rawH;
+	const c = Math.min(rawC || 0, MAX_CHROMA);
+	const base = neutralText.gray;
+	const result = {
+		scale: {
+			dark: tintSteps(gray.dark, h, c, false),
+			darkA: tintSteps(gray.darkA, h, c, true),
+			light: tintSteps(gray.light, h, c, false),
+			lightA: tintSteps(gray.lightA, h, c, true)
+		},
+		text: {
+			dark: tintSteps(base.dark, h, c, false),
+			light: tintSteps(base.light, h, c, false)
+		}
+	};
+	cache.set(hex, result);
+	return result;
+};
+const ladderOf = (scale, appearance) => {
+	const s = scale[appearance];
+	return [
+		s[12],
+		s[10],
+		s[8],
+		s[6]
+	];
+};
+const resolveNeutral = (neutralColor) => {
+	if (isCustomNeutralColor(neutralColor)) return generateNeutralScale(neutralColor);
+	const registered = neutralColor ? registry.get(neutralColor) : void 0;
+	if (registered) return {
+		scale: registered.scale,
+		text: {
+			dark: registered.text?.dark ?? ladderOf(registered.scale, "dark"),
+			light: registered.text?.light ?? ladderOf(registered.scale, "light")
+		}
+	};
+	const preset = neutralColor && neutralColor in neutralColorScales ? neutralColor : void 0;
+	return {
+		scale: preset && neutralColorScales[preset] || gray,
+		text: neutralText[preset || "gray"]
+	};
+};
+/** True when the value needs its own injected stylesheet (not a built-in preset). */
+const isCustomNeutral = (value) => isCustomNeutralColor(value) || isRegisteredNeutral(value);
+//#endregion
+export { generateNeutralScale, isCustomNeutral, isCustomNeutralColor, isRegisteredNeutral, registerLobeNeutral, resolveNeutral };
+
+//# sourceMappingURL=customNeutral.mjs.map

package/es/styles/theme/customNeutral.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"customNeutral.mjs","names":[],"sources":["../../../src/styles/theme/customNeutral.ts"],"sourcesContent":["import chroma from 'chroma-js';\n\nimport { gray } from '@/color/colors';\nimport { neutralColorScales } from '@/color/neutrals';\nimport type { ColorScaleItem } from '@/color/types';\n\nimport type { NeutralColors } from '../customTheme';\nimport { notifyPaletteChange } from './customPalette';\nimport { neutralText,type NeutralTextLadder } from './token/neutralText';\n\n/** Any 6-digit hex: tints the default gray ladder with its hue and chroma. */\nexport type CustomNeutralColor = `#${string}`;\n/** A preset, a 6-digit hex, or a name registered with `registerLobeNeutral`. */\nexport type LobeNeutralColor = NeutralColors | CustomNeutralColor | (string & {});\n\nexport interface LobeNeutralScale {\n  /** Full 13-step scale (light / dark solid + alpha), same shape as the presets. */\n  scale: ColorScaleItem;\n  /** Text ladder [text, secondary, tertiary, quaternary]; defaults to the scale's steps 12/10/8/6. */\n  text?: Partial<NeutralTextLadder>;\n}\n\nexport interface ResolvedNeutral {\n  scale: ColorScaleItem;\n  text: NeutralTextLadder;\n}\n\nconst HEX = /^#[\\da-f]{6}$/i;\nconst NAME = /^[\\w-]+$/;\n// Neutrals stay neutral: presets peak around 0.02 oklch chroma.\nconst MAX_CHROMA = 0.05;\n\nexport const isCustomNeutralColor = (value?: string): value is CustomNeutralColor =>\n  !!value && HEX.test(value);\n\nconst registry = new Map<string, LobeNeutralScale>();\n\nexport const isRegisteredNeutral = (name?: string): name is string => !!name && registry.has(name);\n\n/**\n * Register a full custom neutral scale under `name`, then select it with\n * `setLobeTheme({ neutralColor: name })` / `ThemeScope` / `LobeThemeScript`.\n */\nexport const registerLobeNeutral = (name: string, neutral: LobeNeutralScale | ColorScaleItem) => {\n  if (!NAME.test(name))\n    throw new Error(`Invalid neutral name \"${name}\": use letters, digits, _ or -`);\n  if (name in neutralColorScales) throw new Error(`\"${name}\" is a built-in neutral preset`);\n  registry.set(name, 'scale' in neutral ? neutral : { scale: neutral });\n  notifyPaletteChange();\n};\n\nconst tint = (color: string, h: number, c: number) => {\n  const source = chroma(color);\n  const [l] = source.oklch();\n  return chroma.oklch(l, c, h).alpha(source.alpha());\n};\n\nconst tintSteps = <T extends readonly string[]>(steps: T, h: number, c: number, alpha: boolean) =>\n  steps.map((step) => (alpha ? tint(step, h, c).css() : tint(step, h, c).hex())) as unknown as T;\n\nconst cache = new Map<string, ResolvedNeutral>();\n\n/** Same construction as the presets: the gray ladder's lightness, retinted to the hex's hue. */\nexport const generateNeutralScale = (color: CustomNeutralColor): ResolvedNeutral => {\n  const hex = color.toLowerCase();\n  const cached = cache.get(hex);\n  if (cached) return cached;\n\n  const [, rawC, rawH] = chroma(hex).oklch();\n  const h = Number.isNaN(rawH) ? 0 : rawH;\n  const c = Math.min(rawC || 0, MAX_CHROMA);\n  const base = neutralText.gray;\n  const result: ResolvedNeutral = {\n    scale: {\n      dark: tintSteps(gray.dark, h, c, false),\n      darkA: tintSteps(gray.darkA, h, c, true),\n      light: tintSteps(gray.light, h, c, false),\n      lightA: tintSteps(gray.lightA, h, c, true),\n    },\n    text: {\n      dark: tintSteps(base.dark, h, c, false),\n      light: tintSteps(base.light, h, c, false),\n    },\n  };\n\n  cache.set(hex, result);\n  return result;\n};\n\nconst ladderOf = (scale: ColorScaleItem, appearance: 'light' | 'dark') => {\n  const s = scale[appearance];\n  return [s[12], s[10], s[8], s[6]] as [string, string, string, string];\n};\n\nexport const resolveNeutral = (neutralColor?: LobeNeutralColor): ResolvedNeutral => {\n  if (isCustomNeutralColor(neutralColor)) return generateNeutralScale(neutralColor);\n  const registered = neutralColor ? registry.get(neutralColor) : undefined;\n  if (registered)\n    return {\n      scale: registered.scale,\n      text: {\n        dark: registered.text?.dark ?? ladderOf(registered.scale, 'dark'),\n        light: registered.text?.light ?? ladderOf(registered.scale, 'light'),\n      },\n    };\n  const preset =\n    neutralColor && neutralColor in neutralColorScales\n      ? (neutralColor as NeutralColors)\n      : undefined;\n  return {\n    scale: (preset && neutralColorScales[preset]) || gray,\n    text: neutralText[preset || 'gray'],\n  };\n};\n\n/** True when the value needs its own injected stylesheet (not a built-in preset). */\nexport const isCustomNeutral = (value?: string): value is string =>\n  isCustomNeutralColor(value) || isRegisteredNeutral(value);\n"],"mappings":";;;;;;AA2BA,MAAM,MAAM;AACZ,MAAM,OAAO;AAEb,MAAM,aAAa;AAEnB,MAAa,wBAAwB,UACnC,CAAC,CAAC,SAAS,IAAI,KAAK,KAAK;AAE3B,MAAM,2BAAW,IAAI,IAA8B;AAEnD,MAAa,uBAAuB,SAAkC,CAAC,CAAC,QAAQ,SAAS,IAAI,IAAI;;;;;AAMjG,MAAa,uBAAuB,MAAc,YAA+C;CAC/F,IAAI,CAAC,KAAK,KAAK,IAAI,GACjB,MAAM,IAAI,MAAM,yBAAyB,KAAK,+BAA+B;CAC/E,IAAI,QAAQ,oBAAoB,MAAM,IAAI,MAAM,IAAI,KAAK,+BAA+B;CACxF,SAAS,IAAI,MAAM,WAAW,UAAU,UAAU,EAAE,OAAO,QAAQ,CAAC;CACpE,oBAAoB;AACtB;AAEA,MAAM,QAAQ,OAAe,GAAW,MAAc;CACpD,MAAM,SAAS,OAAO,KAAK;CAC3B,MAAM,CAAC,KAAK,OAAO,MAAM;CACzB,OAAO,OAAO,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,MAAM,OAAO,MAAM,CAAC;AACnD;AAEA,MAAM,aAA0C,OAAU,GAAW,GAAW,UAC9E,MAAM,KAAK,SAAU,QAAQ,KAAK,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,IAAI,KAAK,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAAE;AAE/E,MAAM,wBAAQ,IAAI,IAA6B;;AAG/C,MAAa,wBAAwB,UAA+C;CAClF,MAAM,MAAM,MAAM,YAAY;CAC9B,MAAM,SAAS,MAAM,IAAI,GAAG;CAC5B,IAAI,QAAQ,OAAO;CAEnB,MAAM,GAAG,MAAM,QAAQ,OAAO,GAAG,CAAC,CAAC,MAAM;CACzC,MAAM,IAAI,OAAO,MAAM,IAAI,IAAI,IAAI;CACnC,MAAM,IAAI,KAAK,IAAI,QAAQ,GAAG,UAAU;CACxC,MAAM,OAAO,YAAY;CACzB,MAAM,SAA0B;EAC9B,OAAO;GACL,MAAM,UAAU,KAAK,MAAM,GAAG,GAAG,KAAK;GACtC,OAAO,UAAU,KAAK,OAAO,GAAG,GAAG,IAAI;GACvC,OAAO,UAAU,KAAK,OAAO,GAAG,GAAG,KAAK;GACxC,QAAQ,UAAU,KAAK,QAAQ,GAAG,GAAG,IAAI;EAC3C;EACA,MAAM;GACJ,MAAM,UAAU,KAAK,MAAM,GAAG,GAAG,KAAK;GACtC,OAAO,UAAU,KAAK,OAAO,GAAG,GAAG,KAAK;EAC1C;CACF;CAEA,MAAM,IAAI,KAAK,MAAM;CACrB,OAAO;AACT;AAEA,MAAM,YAAY,OAAuB,eAAiC;CACxE,MAAM,IAAI,MAAM;CAChB,OAAO;EAAC,EAAE;EAAK,EAAE;EAAK,EAAE;EAAI,EAAE;CAAE;AAClC;AAEA,MAAa,kBAAkB,iBAAqD;CAClF,IAAI,qBAAqB,YAAY,GAAG,OAAO,qBAAqB,YAAY;CAChF,MAAM,aAAa,eAAe,SAAS,IAAI,YAAY,IAAI,KAAA;CAC/D,IAAI,YACF,OAAO;EACL,OAAO,WAAW;EAClB,MAAM;GACJ,MAAM,WAAW,MAAM,QAAQ,SAAS,WAAW,OAAO,MAAM;GAChE,OAAO,WAAW,MAAM,SAAS,SAAS,WAAW,OAAO,OAAO;EACrE;CACF;CACF,MAAM,SACJ,gBAAgB,gBAAgB,qBAC3B,eACD,KAAA;CACN,OAAO;EACL,OAAQ,UAAU,mBAAmB,WAAY;EACjD,MAAM,YAAY,UAAU;CAC9B;AACF;;AAGA,MAAa,mBAAmB,UAC9B,qBAAqB,KAAK,KAAK,oBAAoB,KAAK"}

package/es/styles/theme/customPalette.d.mts

@@ -0,0 +1,6 @@
+import { StatusColorScales } from "../../color/status/index.mjs";
+//#region src/styles/theme/customPalette.d.ts
+export type LobeStatusPalette = Partial<StatusColorScales>;
+export declare const registerLobePalette: (name: string, palette: LobeStatusPalette) => void;
+//#endregion
+//# sourceMappingURL=customPalette.d.mts.map

package/es/styles/theme/customPalette.mjs

@@ -0,0 +1,32 @@
+import { statusColorScales } from "../../color/status/index.mjs";
+//#region src/styles/theme/customPalette.ts
+const NAME = /^[\w-]+$/;
+const registry = /* @__PURE__ */ new Map();
+const listeners = /* @__PURE__ */ new Set();
+let revision = 0;
+const registerLobePalette = (name, palette) => {
+	if (!NAME.test(name)) throw new Error(`Invalid palette name "${name}": use letters, digits, _ or -`);
+	registry.set(name, palette);
+	notifyPaletteChange();
+};
+/** Bumps the revision so mounted scopes / useTheme pick up a re-registered palette or neutral. */
+const notifyPaletteChange = () => {
+	revision++;
+	for (const listener of listeners) listener();
+};
+const getPaletteRevision = () => revision;
+const subscribePalettes = (listener) => {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+};
+const isRegisteredPalette = (name) => !!name && registry.has(name);
+const resolveStatusScales = (name) => isRegisteredPalette(name) ? {
+	...statusColorScales,
+	...registry.get(name)
+} : statusColorScales;
+//#endregion
+export { getPaletteRevision, isRegisteredPalette, notifyPaletteChange, registerLobePalette, resolveStatusScales, subscribePalettes };
+
+//# sourceMappingURL=customPalette.mjs.map

package/es/styles/theme/customPalette.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"customPalette.mjs","names":[],"sources":["../../../src/styles/theme/customPalette.ts"],"sourcesContent":["import { type StatusColorScales, statusColorScales } from '@/color/status';\n\nexport type LobeStatusPalette = Partial<StatusColorScales>;\n\nconst NAME = /^[\\w-]+$/;\n\nconst registry = new Map<string, LobeStatusPalette>();\nconst listeners = new Set<() => void>();\nlet revision = 0;\n\nexport const registerLobePalette = (name: string, palette: LobeStatusPalette) => {\n  if (!NAME.test(name))\n    throw new Error(`Invalid palette name \"${name}\": use letters, digits, _ or -`);\n  registry.set(name, palette);\n  notifyPaletteChange();\n};\n\n/** Bumps the revision so mounted scopes / useTheme pick up a re-registered palette or neutral. */\nexport const notifyPaletteChange = () => {\n  revision++;\n  for (const listener of listeners) listener();\n};\n\nexport const getPaletteRevision = () => revision;\n\nexport const subscribePalettes = (listener: () => void) => {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n};\n\nexport const isRegisteredPalette = (name?: string): name is string => !!name && registry.has(name);\n\nexport const resolveStatusScales = (name?: string): StatusColorScales =>\n  isRegisteredPalette(name) ? { ...statusColorScales, ...registry.get(name) } : statusColorScales;\n"],"mappings":";;AAIA,MAAM,OAAO;AAEb,MAAM,2BAAW,IAAI,IAA+B;AACpD,MAAM,4BAAY,IAAI,IAAgB;AACtC,IAAI,WAAW;AAEf,MAAa,uBAAuB,MAAc,YAA+B;CAC/E,IAAI,CAAC,KAAK,KAAK,IAAI,GACjB,MAAM,IAAI,MAAM,yBAAyB,KAAK,+BAA+B;CAC/E,SAAS,IAAI,MAAM,OAAO;CAC1B,oBAAoB;AACtB;;AAGA,MAAa,4BAA4B;CACvC;CACA,KAAK,MAAM,YAAY,WAAW,SAAS;AAC7C;AAEA,MAAa,2BAA2B;AAExC,MAAa,qBAAqB,aAAyB;CACzD,UAAU,IAAI,QAAQ;CACtB,aAAa;EACX,UAAU,OAAO,QAAQ;CAC3B;AACF;AAEA,MAAa,uBAAuB,SAAkC,CAAC,CAAC,QAAQ,SAAS,IAAI,IAAI;AAEjG,MAAa,uBAAuB,SAClC,oBAAoB,IAAI,IAAI;CAAE,GAAG;CAAmB,GAAG,SAAS,IAAI,IAAI;AAAE,IAAI"}

package/es/styles/theme/customPrimary.mjs

@@ -1,3 +1,4 @@
+import gray from "../../color/colors/gray.mjs";
 import { colorScales } from "../../color/colors/index.mjs";
 import { primaryColors } from "../customTheme.mjs";
 import chroma from "chroma-js";
@@ -5,12 +6,26 @@ import chroma from "chroma-js";
 const HEX = /^#[\da-f]{6}$/i;
 const isCustomPrimaryColor = (value) => !!value && HEX.test(value);
 const ANCHOR = 9;
-const ANCHORED_STEPS = /* @__PURE__ */ new Set([
-	7,
-	8,
-	10
-]);
+const SHIFT_WEIGHT = [
+	0,
+	0,
+	0,
+	0,
+	0,
+	.25,
+	.5,
+	.75,
+	1,
+	1,
+	1,
+	.5,
+	0
+];
+const MIN_STEP_GAP = .015;
+const LIGHTNESS_WEIGHT = 100;
 const MAX_CHROMA_RATIO = 2;
+const DARK_SURFACE = gray.dark[1];
+const MIN_DARK_CONTRAST = 4.5;
 const oklch = (color) => {
 	const [l, c, h] = chroma(color).oklch();
 	return {
@@ -23,17 +38,35 @@ const hueDistance = (a, b) => {
 	const d = Math.abs(a - b) % 360;
 	return d > 180 ? 360 - d : d;
 };
-const nearestPreset = (hue) => Object.keys(primaryColors).reduce((best, name) => hueDistance(oklch(primaryColors[name]).h, hue) < hueDistance(oklch(primaryColors[best]).h, hue) ? name : best);
+const presetDistance = (name, target) => {
+	const preset = oklch(primaryColors[name]);
+	return hueDistance(preset.h, target.h) + LIGHTNESS_WEIGHT * Math.abs(preset.l - target.l);
+};
+const nearestPreset = (target) => Object.keys(primaryColors).reduce((best, name) => presetDistance(name, target) < presetDistance(best, target) ? name : best);
 const clamp = (value) => Math.min(1, Math.max(0, value));
-const retintSolid = (steps, target, hex) => {
+const readableOnDark = (hex) => {
+	const { c, h, l } = oklch(hex);
+	let lightness = l;
+	let color = hex;
+	while (chroma.contrast(color, DARK_SURFACE) < MIN_DARK_CONTRAST && lightness < 1) {
+		lightness = Math.min(1, lightness + .005);
+		color = chroma.oklch(lightness, c, h).hex();
+	}
+	return color;
+};
+const orderLightness = (lightness, direction) => {
+	const ordered = [...lightness];
+	for (let i = 10; i < ordered.length; i++) ordered[i] = direction > 0 ? Math.max(ordered[i], ordered[i - 1] + MIN_STEP_GAP) : Math.min(ordered[i], ordered[i - 1] - MIN_STEP_GAP);
+	for (let i = 8; i >= 0; i--) ordered[i] = direction > 0 ? Math.min(ordered[i], ordered[i + 1] - MIN_STEP_GAP) : Math.max(ordered[i], ordered[i + 1] + MIN_STEP_GAP);
+	return ordered.map(clamp);
+};
+const retintSolid = (steps, target, hex, direction) => {
 	const anchor = oklch(steps[ANCHOR]);
 	const ratio = anchor.c > 0 ? Math.min(target.c / anchor.c, MAX_CHROMA_RATIO) : 0;
-	return steps.map((step, i) => {
-		if (i === ANCHOR) return hex;
-		const { c, l } = oklch(step);
-		const lightness = ANCHORED_STEPS.has(i) ? clamp(target.l + l - anchor.l) : l;
-		return chroma.oklch(lightness, c * ratio, target.h).hex();
-	});
+	const shift = target.l - anchor.l;
+	const source = steps.map(oklch);
+	const lightness = orderLightness(source.map(({ l }, i) => i === ANCHOR ? target.l : l + SHIFT_WEIGHT[i] * shift), direction);
+	return source.map(({ c }, i) => i === ANCHOR ? hex : chroma.oklch(lightness[i], c * ratio, target.h).hex());
 };
 const retintAlpha = (steps, solid, target) => {
 	const anchor = oklch(solid[ANCHOR]);
@@ -50,11 +83,13 @@ const generatePrimaryScale = (color) => {
 	const cached = cache.get(hex);
 	if (cached) return cached;
 	const target = oklch(hex);
-	const preset = colorScales[nearestPreset(target.h)];
+	const preset = colorScales[nearestPreset(target)];
+	const darkHex = readableOnDark(hex);
+	const darkTarget = oklch(darkHex);
 	const scale = {
-		dark: retintSolid(preset.dark, target, hex),
-		darkA: retintAlpha(preset.darkA, preset.dark, target),
-		light: retintSolid(preset.light, target, hex),
+		dark: retintSolid(preset.dark, darkTarget, darkHex, 1),
+		darkA: retintAlpha(preset.darkA, preset.dark, darkTarget),
+		light: retintSolid(preset.light, target, hex, -1),
 		lightA: retintAlpha(preset.lightA, preset.light, target)
 	};
 	cache.set(hex, scale);

package/es/styles/theme/customPrimary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"customPrimary.mjs","names":[],"sources":["../../../src/styles/theme/customPrimary.ts"],"sourcesContent":["import chroma from 'chroma-js';\n\nimport { colorScales } from '@/color/colors';\nimport type { ColorScaleItem } from '@/color/types';\n\nimport { type PrimaryColors, primaryColors } from '../customTheme';\n\nexport type CustomPrimaryColor = `#${string}`;\nexport type LobePrimaryColor = PrimaryColors | CustomPrimaryColor;\n\nconst HEX = /^#[\\da-f]{6}$/i;\n\nexport const isCustomPrimaryColor = (value?: string): value is CustomPrimaryColor =>\n  !!value && HEX.test(value);\n\nconst ANCHOR = 9;\nconst ANCHORED_STEPS = new Set([7, 8, 10]);\nconst MAX_CHROMA_RATIO = 2;\n\nconst oklch = (color: string) => {\n  const [l, c, h] = chroma(color).oklch();\n  return { c, h: Number.isNaN(h) ? 0 : h, l };\n};\n\nconst hueDistance = (a: number, b: number) => {\n  const d = Math.abs(a - b) % 360;\n  return d > 180 ? 360 - d : d;\n};\n\nconst nearestPreset = (hue: number) =>\n  (Object.keys(primaryColors) as PrimaryColors[]).reduce((best, name) =>\n    hueDistance(oklch(primaryColors[name]).h, hue) < hueDistance(oklch(primaryColors[best]).h, hue)\n      ? name\n      : best,\n  );\n\nconst clamp = (value: number) => Math.min(1, Math.max(0, value));\n\ntype Steps = ColorScaleItem['light'];\n\nconst retintSolid = (steps: Steps, target: ReturnType<typeof oklch>, hex: string): Steps => {\n  const anchor = oklch(steps[ANCHOR]);\n  const ratio = anchor.c > 0 ? Math.min(target.c / anchor.c, MAX_CHROMA_RATIO) : 0;\n\n  return steps.map((step, i) => {\n    if (i === ANCHOR) return hex;\n    const { c, l } = oklch(step);\n    const lightness = ANCHORED_STEPS.has(i) ? clamp(target.l + l - anchor.l) : l;\n    return chroma.oklch(lightness, c * ratio, target.h).hex();\n  }) as Steps;\n};\n\nconst retintAlpha = (steps: Steps, solid: Steps, target: ReturnType<typeof oklch>): Steps => {\n  const anchor = oklch(solid[ANCHOR]);\n  const ratio = anchor.c > 0 ? Math.min(target.c / anchor.c, MAX_CHROMA_RATIO) : 0;\n\n  return steps.map((step) => {\n    const color = chroma(step);\n    const { c, l } = oklch(step);\n    return chroma\n      .oklch(l, c * ratio, target.h)\n      .alpha(color.alpha())\n      .css();\n  }) as Steps;\n};\n\nconst cache = new Map<string, ColorScaleItem>();\n\nexport const generatePrimaryScale = (color: CustomPrimaryColor): ColorScaleItem => {\n  const hex = color.toLowerCase();\n  const cached = cache.get(hex);\n  if (cached) return cached;\n\n  const target = oklch(hex);\n  const preset = colorScales[nearestPreset(target.h)];\n  const scale: ColorScaleItem = {\n    dark: retintSolid(preset.dark, target, hex),\n    darkA: retintAlpha(preset.darkA, preset.dark, target),\n    light: retintSolid(preset.light, target, hex),\n    lightA: retintAlpha(preset.lightA, preset.light, target),\n  };\n\n  cache.set(hex, scale);\n  return scale;\n};\n"],"mappings":";;;;AAUA,MAAM,MAAM;AAEZ,MAAa,wBAAwB,UACnC,CAAC,CAAC,SAAS,IAAI,KAAK,KAAK;AAE3B,MAAM,SAAS;AACf,MAAM,iCAAiB,IAAI,IAAI;CAAC;CAAG;CAAG;AAAE,CAAC;AACzC,MAAM,mBAAmB;AAEzB,MAAM,SAAS,UAAkB;CAC/B,MAAM,CAAC,GAAG,GAAG,KAAK,OAAO,KAAK,CAAC,CAAC,MAAM;CACtC,OAAO;EAAE;EAAG,GAAG,OAAO,MAAM,CAAC,IAAI,IAAI;EAAG;CAAE;AAC5C;AAEA,MAAM,eAAe,GAAW,MAAc;CAC5C,MAAM,IAAI,KAAK,IAAI,IAAI,CAAC,IAAI;CAC5B,OAAO,IAAI,MAAM,MAAM,IAAI;AAC7B;AAEA,MAAM,iBAAiB,QACpB,OAAO,KAAK,aAAa,CAAC,CAAqB,QAAQ,MAAM,SAC5D,YAAY,MAAM,cAAc,KAAK,CAAC,CAAC,GAAG,GAAG,IAAI,YAAY,MAAM,cAAc,KAAK,CAAC,CAAC,GAAG,GAAG,IAC1F,OACA,IACN;AAEF,MAAM,SAAS,UAAkB,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC;AAI/D,MAAM,eAAe,OAAc,QAAkC,QAAuB;CAC1F,MAAM,SAAS,MAAM,MAAM,OAAO;CAClC,MAAM,QAAQ,OAAO,IAAI,IAAI,KAAK,IAAI,OAAO,IAAI,OAAO,GAAG,gBAAgB,IAAI;CAE/E,OAAO,MAAM,KAAK,MAAM,MAAM;EAC5B,IAAI,MAAM,QAAQ,OAAO;EACzB,MAAM,EAAE,GAAG,MAAM,MAAM,IAAI;EAC3B,MAAM,YAAY,eAAe,IAAI,CAAC,IAAI,MAAM,OAAO,IAAI,IAAI,OAAO,CAAC,IAAI;EAC3E,OAAO,OAAO,MAAM,WAAW,IAAI,OAAO,OAAO,CAAC,CAAC,CAAC,IAAI;CAC1D,CAAC;AACH;AAEA,MAAM,eAAe,OAAc,OAAc,WAA4C;CAC3F,MAAM,SAAS,MAAM,MAAM,OAAO;CAClC,MAAM,QAAQ,OAAO,IAAI,IAAI,KAAK,IAAI,OAAO,IAAI,OAAO,GAAG,gBAAgB,IAAI;CAE/E,OAAO,MAAM,KAAK,SAAS;EACzB,MAAM,QAAQ,OAAO,IAAI;EACzB,MAAM,EAAE,GAAG,MAAM,MAAM,IAAI;EAC3B,OAAO,OACJ,MAAM,GAAG,IAAI,OAAO,OAAO,CAAC,CAAC,CAC7B,MAAM,MAAM,MAAM,CAAC,CAAC,CACpB,IAAI;CACT,CAAC;AACH;AAEA,MAAM,wBAAQ,IAAI,IAA4B;AAE9C,MAAa,wBAAwB,UAA8C;CACjF,MAAM,MAAM,MAAM,YAAY;CAC9B,MAAM,SAAS,MAAM,IAAI,GAAG;CAC5B,IAAI,QAAQ,OAAO;CAEnB,MAAM,SAAS,MAAM,GAAG;CACxB,MAAM,SAAS,YAAY,cAAc,OAAO,CAAC;CACjD,MAAM,QAAwB;EAC5B,MAAM,YAAY,OAAO,MAAM,QAAQ,GAAG;EAC1C,OAAO,YAAY,OAAO,OAAO,OAAO,MAAM,MAAM;EACpD,OAAO,YAAY,OAAO,OAAO,QAAQ,GAAG;EAC5C,QAAQ,YAAY,OAAO,QAAQ,OAAO,OAAO,MAAM;CACzD;CAEA,MAAM,IAAI,KAAK,KAAK;CACpB,OAAO;AACT"}
+{"version":3,"file":"customPrimary.mjs","names":[],"sources":["../../../src/styles/theme/customPrimary.ts"],"sourcesContent":["import chroma from 'chroma-js';\n\nimport { colorScales, gray } from '@/color/colors';\nimport type { ColorScaleItem } from '@/color/types';\n\nimport { type PrimaryColors, primaryColors } from '../customTheme';\n\nexport type CustomPrimaryColor = `#${string}`;\nexport type LobePrimaryColor = PrimaryColors | CustomPrimaryColor;\n\nconst HEX = /^#[\\da-f]{6}$/i;\n\nexport const isCustomPrimaryColor = (value?: string): value is CustomPrimaryColor =>\n  !!value && HEX.test(value);\n\nconst ANCHOR = 9;\nconst SHIFT_WEIGHT = [0, 0, 0, 0, 0, 0.25, 0.5, 0.75, 1, 1, 1, 0.5, 0];\nconst MIN_STEP_GAP = 0.015;\nconst LIGHTNESS_WEIGHT = 100;\nconst MAX_CHROMA_RATIO = 2;\nconst DARK_SURFACE = gray.dark[1];\nconst MIN_DARK_CONTRAST = 4.5;\n\nconst oklch = (color: string) => {\n  const [l, c, h] = chroma(color).oklch();\n  return { c, h: Number.isNaN(h) ? 0 : h, l };\n};\n\nconst hueDistance = (a: number, b: number) => {\n  const d = Math.abs(a - b) % 360;\n  return d > 180 ? 360 - d : d;\n};\n\nconst presetDistance = (name: PrimaryColors, target: ReturnType<typeof oklch>) => {\n  const preset = oklch(primaryColors[name]);\n  return hueDistance(preset.h, target.h) + LIGHTNESS_WEIGHT * Math.abs(preset.l - target.l);\n};\n\nconst nearestPreset = (target: ReturnType<typeof oklch>) =>\n  (Object.keys(primaryColors) as PrimaryColors[]).reduce((best, name) =>\n    presetDistance(name, target) < presetDistance(best, target) ? name : best,\n  );\n\nconst clamp = (value: number) => Math.min(1, Math.max(0, value));\n\nconst readableOnDark = (hex: string) => {\n  const { c, h, l } = oklch(hex);\n  let lightness = l;\n  let color = hex;\n  while (chroma.contrast(color, DARK_SURFACE) < MIN_DARK_CONTRAST && lightness < 1) {\n    lightness = Math.min(1, lightness + 0.005);\n    color = chroma.oklch(lightness, c, h).hex();\n  }\n  return color;\n};\n\nconst orderLightness = (lightness: number[], direction: 1 | -1) => {\n  const ordered = [...lightness];\n  for (let i = ANCHOR + 1; i < ordered.length; i++)\n    ordered[i] =\n      direction > 0\n        ? Math.max(ordered[i], ordered[i - 1] + MIN_STEP_GAP)\n        : Math.min(ordered[i], ordered[i - 1] - MIN_STEP_GAP);\n  for (let i = ANCHOR - 1; i >= 0; i--)\n    ordered[i] =\n      direction > 0\n        ? Math.min(ordered[i], ordered[i + 1] - MIN_STEP_GAP)\n        : Math.max(ordered[i], ordered[i + 1] + MIN_STEP_GAP);\n  return ordered.map(clamp);\n};\n\ntype Steps = ColorScaleItem['light'];\n\nconst retintSolid = (\n  steps: Steps,\n  target: ReturnType<typeof oklch>,\n  hex: string,\n  direction: 1 | -1,\n): Steps => {\n  const anchor = oklch(steps[ANCHOR]);\n  const ratio = anchor.c > 0 ? Math.min(target.c / anchor.c, MAX_CHROMA_RATIO) : 0;\n  const shift = target.l - anchor.l;\n  const source = steps.map(oklch);\n  const lightness = orderLightness(\n    source.map(({ l }, i) => (i === ANCHOR ? target.l : l + SHIFT_WEIGHT[i] * shift)),\n    direction,\n  );\n\n  return source.map(({ c }, i) =>\n    i === ANCHOR ? hex : chroma.oklch(lightness[i], c * ratio, target.h).hex(),\n  ) as Steps;\n};\n\nconst retintAlpha = (steps: Steps, solid: Steps, target: ReturnType<typeof oklch>): Steps => {\n  const anchor = oklch(solid[ANCHOR]);\n  const ratio = anchor.c > 0 ? Math.min(target.c / anchor.c, MAX_CHROMA_RATIO) : 0;\n\n  return steps.map((step) => {\n    const color = chroma(step);\n    const { c, l } = oklch(step);\n    return chroma\n      .oklch(l, c * ratio, target.h)\n      .alpha(color.alpha())\n      .css();\n  }) as Steps;\n};\n\nconst cache = new Map<string, ColorScaleItem>();\n\nexport const generatePrimaryScale = (color: CustomPrimaryColor): ColorScaleItem => {\n  const hex = color.toLowerCase();\n  const cached = cache.get(hex);\n  if (cached) return cached;\n\n  const target = oklch(hex);\n  const preset = colorScales[nearestPreset(target)];\n  const darkHex = readableOnDark(hex);\n  const darkTarget = oklch(darkHex);\n  const scale: ColorScaleItem = {\n    dark: retintSolid(preset.dark, darkTarget, darkHex, 1),\n    darkA: retintAlpha(preset.darkA, preset.dark, darkTarget),\n    light: retintSolid(preset.light, target, hex, -1),\n    lightA: retintAlpha(preset.lightA, preset.light, target),\n  };\n\n  cache.set(hex, scale);\n  return scale;\n};\n"],"mappings":"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"}

package/es/styles/theme/scope.d.mts

@@ -1,4 +1,4 @@
-import { NeutralColors } from "../customTheme.mjs";
+import { LobeNeutralColor } from "./customNeutral.mjs";
 import { LobePrimaryColor } from "./customPrimary.mjs";
 import { LobeToken } from "./createLobeToken.mjs";
 import { CSSProperties, ReactNode } from "react";
@@ -6,7 +6,8 @@ import { CSSProperties, ReactNode } from "react";
 export type LobeAppearance = 'light' | 'dark';
 export interface LobeThemeState {
   appearance: LobeAppearance;
-  neutralColor?: NeutralColors;
+  neutralColor?: LobeNeutralColor;
+  palette?: string;
   primaryColor?: LobePrimaryColor;
 }
 export declare const setLobeTheme: (state: Partial<LobeThemeState>, root?: HTMLElement) => void;
@@ -15,7 +16,7 @@ export interface ThemeScopeProps extends Partial<LobeThemeState> {
   className?: string;
   style?: CSSProperties;
 }
-export declare const ThemeScope: ({ appearance, children, className, neutralColor, primaryColor, style }: ThemeScopeProps) => import("react").JSX.Element;
+export declare const ThemeScope: ({ appearance, children, className, neutralColor, palette, primaryColor, style }: ThemeScopeProps) => import("react").JSX.Element;
 export declare const useThemeMode: () => {
   appearance: LobeAppearance;
   isDarkMode: boolean;
@@ -39,11 +40,12 @@ export type ResponsiveState = Record<Breakpoint | 'mobile' | 'tablet' | 'laptop'
 export declare const useResponsive: () => ResponsiveState;
 export interface LobeThemeScriptProps {
   appearance?: LobeAppearance | 'system';
-  neutralColor?: NeutralColors;
+  neutralColor?: LobeNeutralColor;
   nonce?: string;
+  palette?: string;
   primaryColor?: LobePrimaryColor;
 }
-export declare const LobeThemeScript: ({ appearance, neutralColor, nonce, primaryColor }: LobeThemeScriptProps) => import("react").JSX.Element;
+export declare const LobeThemeScript: ({ appearance, neutralColor, nonce, palette, primaryColor }: LobeThemeScriptProps) => import("react").JSX.Element;
 //#endregion
 export {};
 //# sourceMappingURL=scope.d.mts.map

package/es/styles/theme/scope.mjs

@@ -1,18 +1,22 @@
 "use client";
+import { getPaletteRevision, isRegisteredPalette, subscribePalettes } from "./customPalette.mjs";
+import { isCustomNeutral } from "./customNeutral.mjs";
 import { isCustomPrimaryColor } from "./customPrimary.mjs";
 import { staticToken } from "./token/static.mjs";
 import { createLobeToken } from "./createLobeToken.mjs";
-import { getCustomPrimaryCss } from "./themeCss.mjs";
+import { getCustomNeutralCss, getCustomPaletteCss, getCustomPrimaryCss, getPaletteNeutralCss } from "./themeCss.mjs";
 import { createContext, use, useMemo, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/styles/theme/scope.tsx
 const ATTRIBUTES = [
 	"data-theme",
 	"data-primary-color",
-	"data-neutral-color"
+	"data-neutral-color",
+	"data-palette"
 ];
-const toAttributes = ({ appearance, neutralColor, primaryColor }) => ({
+const toAttributes = ({ appearance, neutralColor, palette, primaryColor }) => ({
 	"data-neutral-color": neutralColor,
+	"data-palette": palette,
 	"data-primary-color": primaryColor,
 	"data-theme": appearance
 });
@@ -26,6 +30,46 @@ const ensureCustomPrimaryStyle = (color, doc) => {
 	style.textContent = getCustomPrimaryCss(color);
 	doc.head.append(style);
 };
+const normalizeNeutral = (color) => color?.startsWith("#") ? color.toLowerCase() : color;
+/** Encodes hex vs registered name so `#0e1010` and a neutral named `0e1010` never collide. */
+const neutralKey = (value) => value.startsWith("#") ? `hex-${value.slice(1)}` : `name-${value}`;
+const neutralStyleId = (value) => `lobe-neutral-${neutralKey(value)}`;
+/** Written every time (a re-registered neutral must replace its old rules). */
+const ensureNeutralStyle = (value, doc) => {
+	const id = neutralStyleId(value);
+	let style = doc.getElementById(id);
+	if (!style) {
+		style = doc.createElement("style");
+		style.id = id;
+		doc.head.append(style);
+	}
+	const css = getCustomNeutralCss(value);
+	if (style.textContent !== css) style.textContent = css;
+};
+const paletteStyleId = (name) => `lobe-palette-${name}`;
+const ensurePaletteStyle = (name, doc) => {
+	const id = paletteStyleId(name);
+	let style = doc.getElementById(id);
+	if (!style) {
+		style = doc.createElement("style");
+		style.id = id;
+		doc.head.append(style);
+	}
+	const css = getCustomPaletteCss(name);
+	if (style.textContent !== css) style.textContent = css;
+};
+const paletteNeutralStyleId = (name, neutral) => `lobe-palette-${name}--neutral-${neutralKey(neutral)}`;
+const ensurePaletteNeutralStyle = (name, neutral, doc) => {
+	const id = paletteNeutralStyleId(name, neutral);
+	let style = doc.getElementById(id);
+	if (!style) {
+		style = doc.createElement("style");
+		style.id = id;
+		doc.head.append(style);
+	}
+	const css = getPaletteNeutralCss(name, neutral);
+	if (style.textContent !== css) style.textContent = css;
+};
 const setLobeTheme = (state, root = document.documentElement) => {
 	const next = {
 		...readThemeState(root),
@@ -33,15 +77,23 @@ const setLobeTheme = (state, root = document.documentElement) => {
 	};
 	next.primaryColor = normalizePrimary(next.primaryColor);
 	if (isCustomPrimaryColor(next.primaryColor)) ensureCustomPrimaryStyle(next.primaryColor, root.ownerDocument);
+	next.neutralColor = normalizeNeutral(next.neutralColor);
+	if (isCustomNeutral(next.neutralColor)) ensureNeutralStyle(next.neutralColor, root.ownerDocument);
+	if (isRegisteredPalette(next.palette)) {
+		ensurePaletteStyle(next.palette, root.ownerDocument);
+		if (next.neutralColor) ensurePaletteNeutralStyle(next.palette, next.neutralColor, root.ownerDocument);
+	}
 	for (const [name, value] of Object.entries(toAttributes(next))) if (value) root.setAttribute(name, value);
 	else root.removeAttribute(name);
 };
 const readThemeState = (el) => ({
 	appearance: el.dataset.theme === "dark" ? "dark" : "light",
 	neutralColor: el.dataset.neutralColor || void 0,
+	palette: el.dataset.palette || void 0,
 	primaryColor: el.dataset.primaryColor || void 0
 });
-const stateKey = (state) => `${state.appearance}|${state.primaryColor ?? ""}|${state.neutralColor ?? ""}`;
+const stateKey = (state) => `${state.appearance}|${state.primaryColor ?? ""}|${state.neutralColor ?? ""}|${state.palette ?? ""}`;
+const usePaletteRevision = () => useSyncExternalStore(subscribePalettes, getPaletteRevision, getPaletteRevision);
 const SERVER_STATE = { appearance: "light" };
 let rootSnapshot = SERVER_STATE;
 const getRootSnapshot = () => {
@@ -63,31 +115,54 @@ const useThemeState = () => {
 	const root = useSyncExternalStore(subscribeRoot, getRootSnapshot, () => SERVER_STATE);
 	return scoped ?? root;
 };
-const ThemeScope = ({ appearance, children, className, neutralColor, primaryColor, style }) => {
+const ThemeScope = ({ appearance, children, className, neutralColor, palette, primaryColor, style }) => {
 	const parent = useThemeState();
 	const state = useMemo(() => ({
 		appearance: appearance ?? parent.appearance,
-		neutralColor: neutralColor ?? parent.neutralColor,
+		neutralColor: normalizeNeutral(neutralColor) ?? parent.neutralColor,
+		palette: palette ?? parent.palette,
 		primaryColor: normalizePrimary(primaryColor) ?? parent.primaryColor
 	}), [
 		appearance,
 		neutralColor,
+		palette,
 		primaryColor,
 		parent
 	]);
 	const customPrimary = isCustomPrimaryColor(state.primaryColor) ? state.primaryColor : void 0;
+	const paletteRevision = usePaletteRevision();
+	const customPalette = isRegisteredPalette(state.palette) ? state.palette : void 0;
+	const customNeutral = isCustomNeutral(state.neutralColor) ? state.neutralColor : void 0;
 	return /* @__PURE__ */ jsxs(ThemeScopeContext, {
 		value: state,
-		children: [customPrimary && /* @__PURE__ */ jsx("style", {
-			href: customPrimaryStyleId(customPrimary),
-			precedence: "lobe-theme",
-			children: getCustomPrimaryCss(customPrimary)
-		}), /* @__PURE__ */ jsx("div", {
-			className,
-			style,
-			...toAttributes(state),
-			children
-		})]
+		children: [
+			customPrimary && /* @__PURE__ */ jsx("style", {
+				href: customPrimaryStyleId(customPrimary),
+				precedence: "lobe-theme",
+				children: getCustomPrimaryCss(customPrimary)
+			}),
+			customNeutral && /* @__PURE__ */ jsx("style", {
+				href: `${neutralStyleId(customNeutral)}-${paletteRevision}`,
+				precedence: "lobe-theme",
+				children: getCustomNeutralCss(customNeutral)
+			}),
+			customPalette && /* @__PURE__ */ jsx("style", {
+				href: `${paletteStyleId(customPalette)}-${paletteRevision}`,
+				precedence: "lobe-theme",
+				children: getCustomPaletteCss(customPalette)
+			}),
+			customPalette && state.neutralColor && /* @__PURE__ */ jsx("style", {
+				href: `${paletteNeutralStyleId(customPalette, state.neutralColor)}-${paletteRevision}`,
+				precedence: "lobe-theme",
+				children: getPaletteNeutralCss(customPalette, state.neutralColor)
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className,
+				style,
+				...toAttributes(state),
+				children
+			})
+		]
 	});
 };
 const useThemeMode = () => {
@@ -100,7 +175,7 @@ const useThemeMode = () => {
 const themeCache = /* @__PURE__ */ new Map();
 const useTheme = () => {
 	const state = useThemeState();
-	const key = stateKey(state);
+	const key = `${stateKey(state)}@${usePaletteRevision()}`;
 	let theme = themeCache.get(key);
 	if (!theme) {
 		theme = {
@@ -151,14 +226,22 @@ const subscribeResponsive = (onChange) => {
 	};
 };
 const useResponsive = () => useSyncExternalStore(subscribeResponsive, getResponsiveSnapshot, () => SERVER_RESPONSIVE);
-const LobeThemeScript = ({ appearance, neutralColor, nonce, primaryColor }) => {
+const LobeThemeScript = ({ appearance, neutralColor, nonce, palette, primaryColor }) => {
 	const primary = normalizePrimary(primaryColor);
-	const custom = isCustomPrimaryColor(primary) ? [customPrimaryStyleId(primary), getCustomPrimaryCss(primary)] : [null, null];
-	const script = `(function(a,p,n,i,c){var d=document.documentElement;if(a==='system')a=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';if(a)d.setAttribute('data-theme',a);else if(!d.hasAttribute('data-theme'))d.setAttribute('data-theme','light');if(p)d.setAttribute('data-primary-color',p);if(n)d.setAttribute('data-neutral-color',n);if(c&&!document.getElementById(i)){var s=document.createElement('style');s.id=i;s.textContent=c;document.head.appendChild(s);}}).apply(null,${JSON.stringify([
+	const styles = [];
+	if (isCustomPrimaryColor(primary)) styles.push([customPrimaryStyleId(primary), getCustomPrimaryCss(primary)]);
+	const neutral = normalizeNeutral(neutralColor);
+	if (isCustomNeutral(neutral)) styles.push([neutralStyleId(neutral), getCustomNeutralCss(neutral)]);
+	if (isRegisteredPalette(palette)) {
+		styles.push([paletteStyleId(palette), getCustomPaletteCss(palette)]);
+		if (neutral) styles.push([paletteNeutralStyleId(palette, neutral), getPaletteNeutralCss(palette, neutral)]);
+	}
+	const script = `(function(a,p,n,q,t){var d=document.documentElement;if(a==='system')a=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';if(a)d.setAttribute('data-theme',a);else if(!d.hasAttribute('data-theme'))d.setAttribute('data-theme','light');if(p)d.setAttribute('data-primary-color',p);if(n)d.setAttribute('data-neutral-color',n);if(q)d.setAttribute('data-palette',q);t.forEach(function(x){if(document.getElementById(x[0]))return;var s=document.createElement('style');s.id=x[0];s.textContent=x[1];document.head.appendChild(s);});}).apply(null,${JSON.stringify([
 		appearance ?? null,
 		primary ?? null,
-		neutralColor ?? null,
-		...custom
+		neutral ?? null,
+		palette ?? null,
+		styles
 	])})`;
 	return /* @__PURE__ */ jsx("script", {
 		suppressHydrationWarning: true,