@lobehub/ui 6.0.0 → 6.0.2

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

@@ -1,9 +1,9 @@
-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;
 }

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 { 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?: NeutralColors;\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"}
+{"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.mjs

@@ -7,6 +7,10 @@ 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();
 };
@@ -23,6 +27,6 @@ const resolveStatusScales = (name) => isRegisteredPalette(name) ? {
 	...registry.get(name)
 } : statusColorScales;
 //#endregion
-export { getPaletteRevision, isRegisteredPalette, registerLobePalette, resolveStatusScales, subscribePalettes };
+export { getPaletteRevision, isRegisteredPalette, notifyPaletteChange, registerLobePalette, resolveStatusScales, subscribePalettes };
 
 //# sourceMappingURL=customPalette.mjs.map

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

@@ -1 +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  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;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"}
+{"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/customStylishStatic.mjs

@@ -1,167 +1,177 @@
 import { createStaticStyles, keyframes } from "../css.mjs";
 //#region src/styles/theme/customStylishStatic.ts
-const gradient = keyframes`
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
-`;
-const staticStylish = createStaticStyles(({ css, cssVar }) => ({
-	active: css`
-    color: ${cssVar.colorText};
-    background: ${cssVar.colorFillSecondary};
-
-    &:hover {
-      color: ${cssVar.colorText};
-      background: ${cssVar.colorFill};
+const createStylish = () => {
+	const gradient = keyframes`
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
     }
-  `,
-	blur: css`
-    backdrop-filter: saturate(150%) blur(10px);
-  `,
-	blurStrong: css`
-    backdrop-filter: saturate(150%) blur(36px);
-  `,
-	bottomScrollbar: css`
-    ::-webkit-scrollbar {
-      width: 0;
-      height: 4px;
-      background-color: transparent;
+    100% {
+      background-position: 0% 50%;
+    }
+  `;
+	return createStaticStyles(({ css, cssVar }) => ({
+		active: css`
+      color: ${cssVar.colorText};
+      background: ${cssVar.colorFillSecondary};
 
-      &-thumb {
-        border-radius: 4px;
-        background-color: ${cssVar.colorFill};
-        transition: background-color 500ms ${cssVar.motionEaseOut};
+      &:hover {
+        color: ${cssVar.colorText};
+        background: ${cssVar.colorFill};
       }
+    `,
+		blur: css`
+      backdrop-filter: saturate(150%) blur(10px);
+    `,
+		blurStrong: css`
+      backdrop-filter: saturate(150%) blur(36px);
+    `,
+		bottomScrollbar: css`
+      ::-webkit-scrollbar {
+        width: 0;
+        height: 4px;
+        background-color: transparent;
 
-      &-corner {
+        &-thumb {
+          border-radius: 4px;
+          background-color: ${cssVar.colorFill};
+          transition: background-color 500ms ${cssVar.motionEaseOut};
+        }
+
+        &-corner {
+          display: none;
+          width: 0;
+          height: 0;
+        }
+      }
+    `,
+		disabled: css`
+      cursor: not-allowed;
+      opacity: 0.5;
+    `,
+		gradientAnimation: css`
+      border-radius: inherit;
+      background-image: linear-gradient(
+        -45deg,
+        ${cssVar.gold},
+        ${cssVar.magenta},
+        ${cssVar.geekblue},
+        ${cssVar.cyan}
+      );
+      background-size: 400% 400%;
+      animation: 5s ${gradient} 5s ease infinite;
+    `,
+		noScrollbar: css`
+      ::-webkit-scrollbar {
         display: none;
         width: 0;
         height: 0;
+        background-color: transparent;
       }
-    }
-  `,
-	disabled: css`
-    cursor: not-allowed;
-    opacity: 0.5;
-  `,
-	gradientAnimation: css`
-    border-radius: inherit;
-    background-image: linear-gradient(
-      -45deg,
-      ${cssVar.gold},
-      ${cssVar.magenta},
-      ${cssVar.geekblue},
-      ${cssVar.cyan}
-    );
-    background-size: 400% 400%;
-    animation: 5s ${gradient} 5s ease infinite;
-  `,
-	noScrollbar: css`
-    ::-webkit-scrollbar {
-      display: none;
-      width: 0;
-      height: 0;
-      background-color: transparent;
-    }
-  `,
-	resetLinkColor: css`
-    cursor: pointer;
-    color: ${cssVar.colorTextSecondary};
+    `,
+		resetLinkColor: css`
+      cursor: pointer;
+      color: ${cssVar.colorTextSecondary};
 
-    &:hover {
-      color: ${cssVar.colorText};
-    }
-  `,
-	/**
-	* Shadow style using CSS variables.
-	* Note: This uses CSS variables which automatically adapt to light/dark mode.
-	* For more control, use the dynamic version from customStylish.
-	*/
-	shadow: css`
-    box-shadow:
-      0 1px 0 -1px ${cssVar.colorBorder},
-      0 1px 2px -0.5px ${cssVar.colorBorder},
-      0 2px 2px -1px ${cssVar.colorBorderSecondary},
-      0 3px 6px -4px ${cssVar.colorBorderSecondary};
-  `,
-	variantBorderless: css`
-    border: none;
-    background: none;
-    box-shadow: none;
+      &:hover {
+        color: ${cssVar.colorText};
+      }
+    `,
+		/**
+		* Shadow style using CSS variables.
+		* Note: This uses CSS variables which automatically adapt to light/dark mode.
+		* For more control, use the dynamic version from customStylish.
+		*/
+		shadow: css`
+      box-shadow:
+        0 1px 0 -1px ${cssVar.colorBorder},
+        0 1px 2px -0.5px ${cssVar.colorBorder},
+        0 2px 2px -1px ${cssVar.colorBorderSecondary},
+        0 3px 6px -4px ${cssVar.colorBorderSecondary};
+    `,
+		variantBorderless: css`
+      border: none;
+      background: none;
+      box-shadow: none;
+
+      &:hover {
+        background: ${cssVar.colorFillTertiary};
+      }
+    `,
+		/**
+		* Variant borderless danger style.
+		* Note: Uses colorErrorBg as fallback since colorErrorFillTertiary is not in cssVar.
+		* For exact match, use the dynamic version from customStylish.
+		*/
+		variantBorderlessDanger: css`
+      border: none;
+      background: none;
+      box-shadow: none;
 
-    &:hover {
+      &:hover {
+        background: ${cssVar.colorErrorBg};
+        box-shadow: inset 0 0 0 1px ${cssVar.colorErrorBg};
+      }
+    `,
+		variantBorderlessWithoutHover: css`
+      border: none;
+      background: none;
+      box-shadow: none;
+    `,
+		variantFilled: css`
       background: ${cssVar.colorFillTertiary};
-    }
-  `,
-	/**
-	* Variant borderless danger style.
-	* Note: Uses colorErrorBg as fallback since colorErrorFillTertiary is not in cssVar.
-	* For exact match, use the dynamic version from customStylish.
-	*/
-	variantBorderlessDanger: css`
-    border: none;
-    background: none;
-    box-shadow: none;
 
-    &:hover {
+      &:hover {
+        background: ${cssVar.colorFillSecondary};
+      }
+    `,
+		/**
+		* Variant filled danger style.
+		* Note: Uses colorErrorBg as fallback since colorErrorFillTertiary/Secondary are not in cssVar.
+		* For exact match, use the dynamic version from customStylish.
+		*/
+		variantFilledDanger: css`
       background: ${cssVar.colorErrorBg};
-      box-shadow: inset 0 0 0 1px ${cssVar.colorErrorBg};
-    }
-  `,
-	variantBorderlessWithoutHover: css`
-    border: none;
-    background: none;
-    box-shadow: none;
-  `,
-	variantFilled: css`
-    background: ${cssVar.colorFillTertiary};
-
-    &:hover {
-      background: ${cssVar.colorFillSecondary};
-    }
-  `,
-	/**
-	* Variant filled danger style.
-	* Note: Uses colorErrorBg as fallback since colorErrorFillTertiary/Secondary are not in cssVar.
-	* For exact match, use the dynamic version from customStylish.
-	*/
-	variantFilledDanger: css`
-    background: ${cssVar.colorErrorBg};
-
-    &:hover {
-      background: ${cssVar.colorErrorBgHover};
-    }
-  `,
-	variantFilledWithoutHover: css`
-    background: ${cssVar.colorFillTertiary};
-  `,
-	variantOutlined: css`
-    border: 1px solid ${cssVar.colorBorderSecondary};
-    background: ${cssVar.colorBgContainer};
 
-    &:hover {
-      border: 1px solid ${cssVar.colorBorder};
+      &:hover {
+        background: ${cssVar.colorErrorBgHover};
+      }
+    `,
+		variantFilledWithoutHover: css`
+      background: ${cssVar.colorFillTertiary};
+    `,
+		variantOutlined: css`
+      border: 1px solid ${cssVar.colorBorderSecondary};
       background: ${cssVar.colorBgContainer};
-    }
-  `,
-	variantOutlinedDanger: css`
-    border: 1px solid ${cssVar.colorErrorBorder};
 
-    &:hover {
+      &:hover {
+        border: 1px solid ${cssVar.colorBorder};
+        background: ${cssVar.colorBgContainer};
+      }
+    `,
+		variantOutlinedDanger: css`
       border: 1px solid ${cssVar.colorErrorBorder};
-    }
-  `,
-	variantOutlinedWithoutHover: css`
-    border: 1px solid ${cssVar.colorBorderSecondary};
-    background: ${cssVar.colorBgContainer};
-  `
-}));
+
+      &:hover {
+        border: 1px solid ${cssVar.colorErrorBorder};
+      }
+    `,
+		variantOutlinedWithoutHover: css`
+      border: 1px solid ${cssVar.colorBorderSecondary};
+      background: ${cssVar.colorBgContainer};
+    `
+	}));
+};
+let created;
+const resolve = () => created ??= createStylish();
+const staticStylish = new Proxy({}, {
+	get: (_, key) => Reflect.get(resolve(), key),
+	getOwnPropertyDescriptor: (_, key) => Reflect.getOwnPropertyDescriptor(resolve(), key),
+	has: (_, key) => Reflect.has(resolve(), key),
+	ownKeys: () => Reflect.ownKeys(resolve())
+});
 //#endregion
 export { staticStylish };
 

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

@@ -1 +1 @@
-{"version":3,"file":"customStylishStatic.mjs","names":[],"sources":["../../../src/styles/theme/customStylishStatic.ts"],"sourcesContent":["import type { LobeCustomStylish } from '@/types/customStylish';\n\nimport { createStaticStyles, keyframes } from '../css';\n\nconst gradient = keyframes`\n  0% {\n    background-position: 0% 50%;\n  }\n  50% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0% 50%;\n  }\n`;\n\nexport const staticStylish = createStaticStyles(({ css, cssVar }) => ({\n  active: css`\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorFillSecondary};\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  blur: css`\n    backdrop-filter: saturate(150%) blur(10px);\n  `,\n\n  blurStrong: css`\n    backdrop-filter: saturate(150%) blur(36px);\n  `,\n\n  bottomScrollbar: css`\n    ::-webkit-scrollbar {\n      width: 0;\n      height: 4px;\n      background-color: transparent;\n\n      &-thumb {\n        border-radius: 4px;\n        background-color: ${cssVar.colorFill};\n        transition: background-color 500ms ${cssVar.motionEaseOut};\n      }\n\n      &-corner {\n        display: none;\n        width: 0;\n        height: 0;\n      }\n    }\n  `,\n\n  disabled: css`\n    cursor: not-allowed;\n    opacity: 0.5;\n  `,\n\n  gradientAnimation: css`\n    border-radius: inherit;\n    background-image: linear-gradient(\n      -45deg,\n      ${cssVar.gold},\n      ${cssVar.magenta},\n      ${cssVar.geekblue},\n      ${cssVar.cyan}\n    );\n    background-size: 400% 400%;\n    animation: 5s ${gradient} 5s ease infinite;\n  `,\n\n  noScrollbar: css`\n    ::-webkit-scrollbar {\n      display: none;\n      width: 0;\n      height: 0;\n      background-color: transparent;\n    }\n  `,\n\n  resetLinkColor: css`\n    cursor: pointer;\n    color: ${cssVar.colorTextSecondary};\n\n    &:hover {\n      color: ${cssVar.colorText};\n    }\n  `,\n\n  /**\n   * Shadow style using CSS variables.\n   * Note: This uses CSS variables which automatically adapt to light/dark mode.\n   * For more control, use the dynamic version from customStylish.\n   */\n  shadow: css`\n    box-shadow:\n      0 1px 0 -1px ${cssVar.colorBorder},\n      0 1px 2px -0.5px ${cssVar.colorBorder},\n      0 2px 2px -1px ${cssVar.colorBorderSecondary},\n      0 3px 6px -4px ${cssVar.colorBorderSecondary};\n  `,\n\n  variantBorderless: css`\n    border: none;\n    background: none;\n    box-shadow: none;\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n  `,\n\n  /**\n   * Variant borderless danger style.\n   * Note: Uses colorErrorBg as fallback since colorErrorFillTertiary is not in cssVar.\n   * For exact match, use the dynamic version from customStylish.\n   */\n  variantBorderlessDanger: css`\n    border: none;\n    background: none;\n    box-shadow: none;\n\n    &:hover {\n      background: ${cssVar.colorErrorBg};\n      box-shadow: inset 0 0 0 1px ${cssVar.colorErrorBg};\n    }\n  `,\n\n  variantBorderlessWithoutHover: css`\n    border: none;\n    background: none;\n    box-shadow: none;\n  `,\n\n  variantFilled: css`\n    background: ${cssVar.colorFillTertiary};\n\n    &:hover {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  /**\n   * Variant filled danger style.\n   * Note: Uses colorErrorBg as fallback since colorErrorFillTertiary/Secondary are not in cssVar.\n   * For exact match, use the dynamic version from customStylish.\n   */\n  variantFilledDanger: css`\n    background: ${cssVar.colorErrorBg};\n\n    &:hover {\n      background: ${cssVar.colorErrorBgHover};\n    }\n  `,\n\n  variantFilledWithoutHover: css`\n    background: ${cssVar.colorFillTertiary};\n  `,\n\n  variantOutlined: css`\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    background: ${cssVar.colorBgContainer};\n\n    &:hover {\n      border: 1px solid ${cssVar.colorBorder};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n\n  variantOutlinedDanger: css`\n    border: 1px solid ${cssVar.colorErrorBorder};\n\n    &:hover {\n      border: 1px solid ${cssVar.colorErrorBorder};\n    }\n  `,\n\n  variantOutlinedWithoutHover: css`\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    background: ${cssVar.colorBgContainer};\n  `,\n})) as LobeCustomStylish;\n"],"mappings":";;AAIA,MAAM,WAAW,SAAS;;;;;;;;;;;AAY1B,MAAa,gBAAgB,oBAAoB,EAAE,KAAK,cAAc;CACpE,QAAQ,GAAG;aACA,OAAO,UAAU;kBACZ,OAAO,mBAAmB;;;eAG7B,OAAO,UAAU;oBACZ,OAAO,UAAU;;;CAInC,MAAM,GAAG;;;CAIT,YAAY,GAAG;;;CAIf,iBAAiB,GAAG;;;;;;;;4BAQM,OAAO,UAAU;6CACA,OAAO,cAAc;;;;;;;;;;CAWhE,UAAU,GAAG;;;;CAKb,mBAAmB,GAAG;;;;QAIhB,OAAO,KAAK;QACZ,OAAO,QAAQ;QACf,OAAO,SAAS;QAChB,OAAO,KAAK;;;oBAGA,SAAS;;CAG3B,aAAa,GAAG;;;;;;;;CAShB,gBAAgB,GAAG;;aAER,OAAO,mBAAmB;;;eAGxB,OAAO,UAAU;;;;;;;;CAS9B,QAAQ,GAAG;;qBAEQ,OAAO,YAAY;yBACf,OAAO,YAAY;uBACrB,OAAO,qBAAqB;uBAC5B,OAAO,qBAAqB;;CAGjD,mBAAmB,GAAG;;;;;;oBAMJ,OAAO,kBAAkB;;;;;;;;CAS3C,yBAAyB,GAAG;;;;;;oBAMV,OAAO,aAAa;oCACJ,OAAO,aAAa;;;CAItD,+BAA+B,GAAG;;;;;CAMlC,eAAe,GAAG;kBACF,OAAO,kBAAkB;;;oBAGvB,OAAO,mBAAmB;;;;;;;;CAS5C,qBAAqB,GAAG;kBACR,OAAO,aAAa;;;oBAGlB,OAAO,kBAAkB;;;CAI3C,2BAA2B,GAAG;kBACd,OAAO,kBAAkB;;CAGzC,iBAAiB,GAAG;wBACE,OAAO,qBAAqB;kBAClC,OAAO,iBAAiB;;;0BAGhB,OAAO,YAAY;oBACzB,OAAO,iBAAiB;;;CAI1C,uBAAuB,GAAG;wBACJ,OAAO,iBAAiB;;;0BAGtB,OAAO,iBAAiB;;;CAIhD,6BAA6B,GAAG;wBACV,OAAO,qBAAqB;kBAClC,OAAO,iBAAiB;;AAE1C,EAAE"}
+{"version":3,"file":"customStylishStatic.mjs","names":[],"sources":["../../../src/styles/theme/customStylishStatic.ts"],"sourcesContent":["import type { LobeCustomStylish } from '@/types/customStylish';\n\nimport { createStaticStyles, keyframes } from '../css';\n\nconst createStylish = (): LobeCustomStylish => {\n  const gradient = keyframes`\n    0% {\n      background-position: 0% 50%;\n    }\n    50% {\n      background-position: 100% 50%;\n    }\n    100% {\n      background-position: 0% 50%;\n    }\n  `;\n\n  return createStaticStyles(({ css, cssVar }) => ({\n    active: css`\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n\n      &:hover {\n        color: ${cssVar.colorText};\n        background: ${cssVar.colorFill};\n      }\n    `,\n\n    blur: css`\n      backdrop-filter: saturate(150%) blur(10px);\n    `,\n\n    blurStrong: css`\n      backdrop-filter: saturate(150%) blur(36px);\n    `,\n\n    bottomScrollbar: css`\n      ::-webkit-scrollbar {\n        width: 0;\n        height: 4px;\n        background-color: transparent;\n\n        &-thumb {\n          border-radius: 4px;\n          background-color: ${cssVar.colorFill};\n          transition: background-color 500ms ${cssVar.motionEaseOut};\n        }\n\n        &-corner {\n          display: none;\n          width: 0;\n          height: 0;\n        }\n      }\n    `,\n\n    disabled: css`\n      cursor: not-allowed;\n      opacity: 0.5;\n    `,\n\n    gradientAnimation: css`\n      border-radius: inherit;\n      background-image: linear-gradient(\n        -45deg,\n        ${cssVar.gold},\n        ${cssVar.magenta},\n        ${cssVar.geekblue},\n        ${cssVar.cyan}\n      );\n      background-size: 400% 400%;\n      animation: 5s ${gradient} 5s ease infinite;\n    `,\n\n    noScrollbar: css`\n      ::-webkit-scrollbar {\n        display: none;\n        width: 0;\n        height: 0;\n        background-color: transparent;\n      }\n    `,\n\n    resetLinkColor: css`\n      cursor: pointer;\n      color: ${cssVar.colorTextSecondary};\n\n      &:hover {\n        color: ${cssVar.colorText};\n      }\n    `,\n\n    /**\n     * Shadow style using CSS variables.\n     * Note: This uses CSS variables which automatically adapt to light/dark mode.\n     * For more control, use the dynamic version from customStylish.\n     */\n    shadow: css`\n      box-shadow:\n        0 1px 0 -1px ${cssVar.colorBorder},\n        0 1px 2px -0.5px ${cssVar.colorBorder},\n        0 2px 2px -1px ${cssVar.colorBorderSecondary},\n        0 3px 6px -4px ${cssVar.colorBorderSecondary};\n    `,\n\n    variantBorderless: css`\n      border: none;\n      background: none;\n      box-shadow: none;\n\n      &:hover {\n        background: ${cssVar.colorFillTertiary};\n      }\n    `,\n\n    /**\n     * Variant borderless danger style.\n     * Note: Uses colorErrorBg as fallback since colorErrorFillTertiary is not in cssVar.\n     * For exact match, use the dynamic version from customStylish.\n     */\n    variantBorderlessDanger: css`\n      border: none;\n      background: none;\n      box-shadow: none;\n\n      &:hover {\n        background: ${cssVar.colorErrorBg};\n        box-shadow: inset 0 0 0 1px ${cssVar.colorErrorBg};\n      }\n    `,\n\n    variantBorderlessWithoutHover: css`\n      border: none;\n      background: none;\n      box-shadow: none;\n    `,\n\n    variantFilled: css`\n      background: ${cssVar.colorFillTertiary};\n\n      &:hover {\n        background: ${cssVar.colorFillSecondary};\n      }\n    `,\n\n    /**\n     * Variant filled danger style.\n     * Note: Uses colorErrorBg as fallback since colorErrorFillTertiary/Secondary are not in cssVar.\n     * For exact match, use the dynamic version from customStylish.\n     */\n    variantFilledDanger: css`\n      background: ${cssVar.colorErrorBg};\n\n      &:hover {\n        background: ${cssVar.colorErrorBgHover};\n      }\n    `,\n\n    variantFilledWithoutHover: css`\n      background: ${cssVar.colorFillTertiary};\n    `,\n\n    variantOutlined: css`\n      border: 1px solid ${cssVar.colorBorderSecondary};\n      background: ${cssVar.colorBgContainer};\n\n      &:hover {\n        border: 1px solid ${cssVar.colorBorder};\n        background: ${cssVar.colorBgContainer};\n      }\n    `,\n\n    variantOutlinedDanger: css`\n      border: 1px solid ${cssVar.colorErrorBorder};\n\n      &:hover {\n        border: 1px solid ${cssVar.colorErrorBorder};\n      }\n    `,\n\n    variantOutlinedWithoutHover: css`\n      border: 1px solid ${cssVar.colorBorderSecondary};\n      background: ${cssVar.colorBgContainer};\n    `,\n  })) as LobeCustomStylish;\n};\n\nlet created: LobeCustomStylish | undefined;\nconst resolve = () => (created ??= createStylish());\n\n// emotion inserts rules the moment css() runs; building these at import time would put them on every page that imports @lobehub/ui.\nexport const staticStylish = new Proxy({} as LobeCustomStylish, {\n  get: (_, key) => Reflect.get(resolve(), key),\n  getOwnPropertyDescriptor: (_, key) => Reflect.getOwnPropertyDescriptor(resolve(), key),\n  has: (_, key) => Reflect.has(resolve(), key),\n  ownKeys: () => Reflect.ownKeys(resolve()),\n});\n"],"mappings":";;AAIA,MAAM,sBAAyC;CAC7C,MAAM,WAAW,SAAS;;;;;;;;;;;CAY1B,OAAO,oBAAoB,EAAE,KAAK,cAAc;EAC9C,QAAQ,GAAG;eACA,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;iBAG7B,OAAO,UAAU;sBACZ,OAAO,UAAU;;;EAInC,MAAM,GAAG;;;EAIT,YAAY,GAAG;;;EAIf,iBAAiB,GAAG;;;;;;;;8BAQM,OAAO,UAAU;+CACA,OAAO,cAAc;;;;;;;;;;EAWhE,UAAU,GAAG;;;;EAKb,mBAAmB,GAAG;;;;UAIhB,OAAO,KAAK;UACZ,OAAO,QAAQ;UACf,OAAO,SAAS;UAChB,OAAO,KAAK;;;sBAGA,SAAS;;EAG3B,aAAa,GAAG;;;;;;;;EAShB,gBAAgB,GAAG;;eAER,OAAO,mBAAmB;;;iBAGxB,OAAO,UAAU;;;;;;;;EAS9B,QAAQ,GAAG;;uBAEQ,OAAO,YAAY;2BACf,OAAO,YAAY;yBACrB,OAAO,qBAAqB;yBAC5B,OAAO,qBAAqB;;EAGjD,mBAAmB,GAAG;;;;;;sBAMJ,OAAO,kBAAkB;;;;;;;;EAS3C,yBAAyB,GAAG;;;;;;sBAMV,OAAO,aAAa;sCACJ,OAAO,aAAa;;;EAItD,+BAA+B,GAAG;;;;;EAMlC,eAAe,GAAG;oBACF,OAAO,kBAAkB;;;sBAGvB,OAAO,mBAAmB;;;;;;;;EAS5C,qBAAqB,GAAG;oBACR,OAAO,aAAa;;;sBAGlB,OAAO,kBAAkB;;;EAI3C,2BAA2B,GAAG;oBACd,OAAO,kBAAkB;;EAGzC,iBAAiB,GAAG;0BACE,OAAO,qBAAqB;oBAClC,OAAO,iBAAiB;;;4BAGhB,OAAO,YAAY;sBACzB,OAAO,iBAAiB;;;EAI1C,uBAAuB,GAAG;0BACJ,OAAO,iBAAiB;;;4BAGtB,OAAO,iBAAiB;;;EAIhD,6BAA6B,GAAG;0BACV,OAAO,qBAAqB;oBAClC,OAAO,iBAAiB;;CAE1C,EAAE;AACJ;AAEA,IAAI;AACJ,MAAM,gBAAiB,YAAY,cAAc;AAGjD,MAAa,gBAAgB,IAAI,MAAM,CAAC,GAAwB;CAC9D,MAAM,GAAG,QAAQ,QAAQ,IAAI,QAAQ,GAAG,GAAG;CAC3C,2BAA2B,GAAG,QAAQ,QAAQ,yBAAyB,QAAQ,GAAG,GAAG;CACrF,MAAM,GAAG,QAAQ,QAAQ,IAAI,QAAQ,GAAG,GAAG;CAC3C,eAAe,QAAQ,QAAQ,QAAQ,CAAC;AAC1C,CAAC"}

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,7 @@ import { CSSProperties, ReactNode } from "react";
 export type LobeAppearance = 'light' | 'dark';
 export interface LobeThemeState {
   appearance: LobeAppearance;
-  neutralColor?: NeutralColors;
+  neutralColor?: LobeNeutralColor;
   palette?: string;
   primaryColor?: LobePrimaryColor;
 }
@@ -40,7 +40,7 @@ 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;