@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/styles/theme/createLobeToken.mjs

@@ -0,0 +1,27 @@
+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);
+	return {
+		neutral: createNeutralToken(appearance, neutralColor, palette),
+		palette,
+		primary: createPrimaryToken(appearance, primaryColor),
+		static: staticToken
+	};
+};
+const createLobeToken = (params) => {
+	const groups = createLobeTokenGroups(params);
+	return {
+		...groups.static,
+		...groups.palette,
+		...groups.primary,
+		...groups.neutral
+	};
+};
+//#endregion
+export { createLobeToken, createLobeTokenGroups };
+
+//# sourceMappingURL=createLobeToken.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,7 @@
+import { PrimaryColors } from "../customTheme.mjs";
+//#region src/styles/theme/customPrimary.d.ts
+export type CustomPrimaryColor = `#${string}`;
+export type LobePrimaryColor = PrimaryColors | CustomPrimaryColor;
+export declare const isCustomPrimaryColor: (value?: string) => value is CustomPrimaryColor;
+//#endregion
+//# sourceMappingURL=customPrimary.d.mts.map

package/es/styles/theme/customPrimary.mjs

@@ -0,0 +1,66 @@
+import { colorScales } from "../../color/colors/index.mjs";
+import { primaryColors } from "../customTheme.mjs";
+import chroma from "chroma-js";
+//#region src/styles/theme/customPrimary.ts
+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 MAX_CHROMA_RATIO = 2;
+const oklch = (color) => {
+	const [l, c, h] = chroma(color).oklch();
+	return {
+		c,
+		h: Number.isNaN(h) ? 0 : h,
+		l
+	};
+};
+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 clamp = (value) => Math.min(1, Math.max(0, value));
+const retintSolid = (steps, target, hex) => {
+	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 retintAlpha = (steps, solid, target) => {
+	const anchor = oklch(solid[ANCHOR]);
+	const ratio = anchor.c > 0 ? Math.min(target.c / anchor.c, MAX_CHROMA_RATIO) : 0;
+	return steps.map((step) => {
+		const color = chroma(step);
+		const { c, l } = oklch(step);
+		return chroma.oklch(l, c * ratio, target.h).alpha(color.alpha()).css();
+	});
+};
+const cache = /* @__PURE__ */ new Map();
+const generatePrimaryScale = (color) => {
+	const hex = color.toLowerCase();
+	const cached = cache.get(hex);
+	if (cached) return cached;
+	const target = oklch(hex);
+	const preset = colorScales[nearestPreset(target.h)];
+	const scale = {
+		dark: retintSolid(preset.dark, target, hex),
+		darkA: retintAlpha(preset.darkA, preset.dark, target),
+		light: retintSolid(preset.light, target, hex),
+		lightA: retintAlpha(preset.lightA, preset.light, target)
+	};
+	cache.set(hex, scale);
+	return scale;
+};
+//#endregion
+export { generatePrimaryScale, isCustomPrimaryColor };
+
+//# sourceMappingURL=customPrimary.mjs.map

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

@@ -0,0 +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"}

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

@@ -1,6 +1,5 @@
 import { LobeCustomStylish } from "../../types/customStylish.mjs";
 //#region src/styles/theme/customStylishStatic.d.ts
-declare const staticStylish: LobeCustomStylish;
+export declare const staticStylish: LobeCustomStylish;
 //#endregion
-export { staticStylish };
 //# sourceMappingURL=customStylishStatic.d.mts.map

package/es/styles/theme/customStylishStatic.mjs

@@ -1,12 +1,5 @@
-import { createStaticStyles, keyframes } from "antd-style";
+import { createStaticStyles, keyframes } from "../css.mjs";
 //#region src/styles/theme/customStylishStatic.ts
-/**
-* Static version of custom stylish utilities.
-* This can be used with createStaticStyles for better performance.
-*
-* Note: Some styles that depend on isDarkMode or custom tokens may have limitations.
-* For full dynamic support, use the regular customStylish from './customStylish'.
-*/
 const gradient = keyframes`
   0% {
     background-position: 0% 50%;

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

@@ -1 +1 @@
-{"version":3,"file":"customStylishStatic.mjs","names":[],"sources":["../../../src/styles/theme/customStylishStatic.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\n\nimport type { LobeCustomStylish } from '@/types/customStylish';\n\n/**\n * Static version of custom stylish utilities.\n * This can be used with createStaticStyles for better performance.\n *\n * Note: Some styles that depend on isDarkMode or custom tokens may have limitations.\n * For full dynamic support, use the regular customStylish from './customStylish'.\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":";;;;;;;;;AAWA,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 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"}

package/es/styles/theme/customToken.mjs

@@ -1,6 +1,5 @@
 import { colorScales } from "../../color/colors/index.mjs";
 import { camelCase } from "es-toolkit/compat";
-import { mix } from "polished";
 //#region src/styles/theme/customToken.ts
 const generateColorPalette = ({ name, scale, appearance }) => {
 	const isDarkMode = appearance === "dark";
@@ -53,13 +52,7 @@ const generateCustomColorToken = (isDarkMode) => {
 	};
 	return colorCustomToken;
 };
-const generateCustomToken = ({ isDarkMode, token }) => {
-	return {
-		...generateCustomColorToken(isDarkMode),
-		colorBgContainerSecondary: mix(.5, token.colorBgLayout, token.colorBgContainer)
-	};
-};
 //#endregion
-export { generateCustomColorToken, generateCustomToken };
+export { generateCustomColorToken };
 
 //# sourceMappingURL=customToken.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"customToken.mjs","names":[],"sources":["../../../src/styles/theme/customToken.ts"],"sourcesContent":["import { type AliasToken } from 'antd/es/theme/interface';\nimport { type GetCustomToken } from 'antd-style';\nimport { camelCase } from 'es-toolkit/compat';\nimport { mix } from 'polished';\n\nimport { colorScales } from '@/color/colors';\nimport { type ColorScaleItem } from '@/color/types';\nimport { type LobeCustomToken } from '@/types/customToken';\n\nconst generateColorPalette = ({\n  name,\n  scale,\n  appearance,\n}: {\n  appearance: 'light' | 'dark';\n  name: string;\n  scale: ColorScaleItem;\n}) => {\n  const isDarkMode = appearance === 'dark';\n  return {\n    [`${name}Fill`]: scale[`${appearance}A`][isDarkMode ? 3 : 4],\n    [`${name}FillSecondary`]: scale[`${appearance}A`][isDarkMode ? 2 : 3],\n    [`${name}FillTertiary`]: scale[`${appearance}A`][isDarkMode ? 1 : 2],\n    [`${name}FillQuaternary`]: scale[`${appearance}A`][isDarkMode ? 0 : 1],\n    [`${name}Bg`]: scale[`${appearance}A`][1],\n    [`${name}BgHover`]: scale[`${appearance}A`][2],\n    [`${name}Border`]: scale[appearance][4],\n    [`${name}BorderSecondary`]: scale[appearance][3],\n    [`${name}BorderHover`]: scale[appearance][isDarkMode ? 5 : 3],\n    [`${name}Hover`]: scale[appearance][isDarkMode ? 10 : 8],\n    [`${name}`]: scale[appearance][9],\n    [`${name}Active`]: scale[appearance][isDarkMode ? 7 : 10],\n    [`${name}TextHover`]: scale[`${appearance}A`][isDarkMode ? 10 : 8],\n    [`${name}Text`]: scale[`${appearance}A`][9],\n    [`${name}TextActive`]: scale[`${appearance}A`][isDarkMode ? 7 : 10],\n  };\n};\n\nconst generateCustomColorPalette = ({\n  name,\n  scale,\n  appearance,\n}: {\n  appearance: 'light' | 'dark';\n  name: string;\n  scale: ColorScaleItem;\n}): Partial<AliasToken> => {\n  const colorStepPalette: { [key: string]: string } = {};\n\n  for (const [index, color] of scale[appearance].entries()) {\n    if (index === 0 || index === 12) continue;\n\n    colorStepPalette[`${name}${index}`] = color;\n  }\n  for (const [index, color] of scale[`${appearance}A`].entries()) {\n    if (index === 0 || index === 12) continue;\n\n    colorStepPalette[`${name}${index}A`] = color;\n  }\n\n  return {\n    ...colorStepPalette,\n    ...generateColorPalette({ appearance, name, scale }),\n  };\n};\n\nexport const generateCustomColorToken = (isDarkMode: boolean) => {\n  let colorCustomToken: any = {};\n\n  for (const [type, scale] of Object.entries(colorScales)) {\n    colorCustomToken = {\n      ...colorCustomToken,\n      ...generateCustomColorPalette({\n        appearance: isDarkMode ? 'dark' : 'light',\n        name: camelCase(type),\n        scale,\n      }),\n    };\n  }\n\n  return colorCustomToken;\n};\n\nexport const generateCustomToken: GetCustomToken<LobeCustomToken> = ({ isDarkMode, token }) => {\n  return {\n    ...generateCustomColorToken(isDarkMode),\n    colorBgContainerSecondary: mix(0.5, token.colorBgLayout, token.colorBgContainer),\n  };\n};\n"],"mappings":";;;;AASA,MAAM,wBAAwB,EAC5B,MACA,OACA,iBAKI;CACJ,MAAM,aAAa,eAAe;CAClC,OAAO;GACJ,GAAG,KAAK,QAAQ,MAAM,GAAG,WAAW,GAAG,CAAC,aAAa,IAAI;GACzD,GAAG,KAAK,iBAAiB,MAAM,GAAG,WAAW,GAAG,CAAC,aAAa,IAAI;GAClE,GAAG,KAAK,gBAAgB,MAAM,GAAG,WAAW,GAAG,CAAC,aAAa,IAAI;GACjE,GAAG,KAAK,kBAAkB,MAAM,GAAG,WAAW,GAAG,CAAC,aAAa,IAAI;GACnE,GAAG,KAAK,MAAM,MAAM,GAAG,WAAW,GAAG,CAAC;GACtC,GAAG,KAAK,WAAW,MAAM,GAAG,WAAW,GAAG,CAAC;GAC3C,GAAG,KAAK,UAAU,MAAM,WAAW,CAAC;GACpC,GAAG,KAAK,mBAAmB,MAAM,WAAW,CAAC;GAC7C,GAAG,KAAK,eAAe,MAAM,WAAW,CAAC,aAAa,IAAI;GAC1D,GAAG,KAAK,SAAS,MAAM,WAAW,CAAC,aAAa,KAAK;GACrD,GAAG,SAAS,MAAM,WAAW,CAAC;GAC9B,GAAG,KAAK,UAAU,MAAM,WAAW,CAAC,aAAa,IAAI;GACrD,GAAG,KAAK,aAAa,MAAM,GAAG,WAAW,GAAG,CAAC,aAAa,KAAK;GAC/D,GAAG,KAAK,QAAQ,MAAM,GAAG,WAAW,GAAG,CAAC;GACxC,GAAG,KAAK,cAAc,MAAM,GAAG,WAAW,GAAG,CAAC,aAAa,IAAI;CAClE;AACF;AAEA,MAAM,8BAA8B,EAClC,MACA,OACA,iBAKyB;CACzB,MAAM,mBAA8C,CAAC;CAErD,KAAK,MAAM,CAAC,OAAO,UAAU,MAAM,WAAW,CAAC,QAAQ,GAAG;EACxD,IAAI,UAAU,KAAK,UAAU,IAAI;EAEjC,iBAAiB,GAAG,OAAO,WAAW;CACxC;CACA,KAAK,MAAM,CAAC,OAAO,UAAU,MAAM,GAAG,WAAW,GAAG,CAAC,QAAQ,GAAG;EAC9D,IAAI,UAAU,KAAK,UAAU,IAAI;EAEjC,iBAAiB,GAAG,OAAO,MAAM,MAAM;CACzC;CAEA,OAAO;EACL,GAAG;EACH,GAAG,qBAAqB;GAAE;GAAY;GAAM;EAAM,CAAC;CACrD;AACF;AAEA,MAAa,4BAA4B,eAAwB;CAC/D,IAAI,mBAAwB,CAAC;CAE7B,KAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,WAAW,GACpD,mBAAmB;EACjB,GAAG;EACH,GAAG,2BAA2B;GAC5B,YAAY,aAAa,SAAS;GAClC,MAAM,UAAU,IAAI;GACpB;EACF,CAAC;CACH;CAGF,OAAO;AACT;AAEA,MAAa,uBAAwD,EAAE,YAAY,YAAY;CAC7F,OAAO;EACL,GAAG,yBAAyB,UAAU;EACtC,2BAA2B,IAAI,IAAK,MAAM,eAAe,MAAM,gBAAgB;CACjF;AACF"}
+{"version":3,"file":"customToken.mjs","names":[],"sources":["../../../src/styles/theme/customToken.ts"],"sourcesContent":["import { camelCase } from 'es-toolkit/compat';\n\nimport { colorScales } from '@/color/colors';\nimport { type ColorScaleItem } from '@/color/types';\nimport { type ColorPalettes, type ColorPalettesAlpha, type ColorToken } from '@/types/customToken';\n\nconst generateColorPalette = ({\n  name,\n  scale,\n  appearance,\n}: {\n  appearance: 'light' | 'dark';\n  name: string;\n  scale: ColorScaleItem;\n}) => {\n  const isDarkMode = appearance === 'dark';\n  return {\n    [`${name}Fill`]: scale[`${appearance}A`][isDarkMode ? 3 : 4],\n    [`${name}FillSecondary`]: scale[`${appearance}A`][isDarkMode ? 2 : 3],\n    [`${name}FillTertiary`]: scale[`${appearance}A`][isDarkMode ? 1 : 2],\n    [`${name}FillQuaternary`]: scale[`${appearance}A`][isDarkMode ? 0 : 1],\n    [`${name}Bg`]: scale[`${appearance}A`][1],\n    [`${name}BgHover`]: scale[`${appearance}A`][2],\n    [`${name}Border`]: scale[appearance][4],\n    [`${name}BorderSecondary`]: scale[appearance][3],\n    [`${name}BorderHover`]: scale[appearance][isDarkMode ? 5 : 3],\n    [`${name}Hover`]: scale[appearance][isDarkMode ? 10 : 8],\n    [`${name}`]: scale[appearance][9],\n    [`${name}Active`]: scale[appearance][isDarkMode ? 7 : 10],\n    [`${name}TextHover`]: scale[`${appearance}A`][isDarkMode ? 10 : 8],\n    [`${name}Text`]: scale[`${appearance}A`][9],\n    [`${name}TextActive`]: scale[`${appearance}A`][isDarkMode ? 7 : 10],\n  };\n};\n\nconst generateCustomColorPalette = ({\n  name,\n  scale,\n  appearance,\n}: {\n  appearance: 'light' | 'dark';\n  name: string;\n  scale: ColorScaleItem;\n}) => {\n  const colorStepPalette: { [key: string]: string } = {};\n\n  for (const [index, color] of scale[appearance].entries()) {\n    if (index === 0 || index === 12) continue;\n\n    colorStepPalette[`${name}${index}`] = color;\n  }\n  for (const [index, color] of scale[`${appearance}A`].entries()) {\n    if (index === 0 || index === 12) continue;\n\n    colorStepPalette[`${name}${index}A`] = color;\n  }\n\n  return {\n    ...colorStepPalette,\n    ...generateColorPalette({ appearance, name, scale }),\n  };\n};\n\nexport const generateCustomColorToken = (isDarkMode: boolean) => {\n  let colorCustomToken = {} as ColorPalettes & ColorPalettesAlpha & ColorToken;\n\n  for (const [type, scale] of Object.entries(colorScales)) {\n    colorCustomToken = {\n      ...colorCustomToken,\n      ...generateCustomColorPalette({\n        appearance: isDarkMode ? 'dark' : 'light',\n        name: camelCase(type),\n        scale,\n      }),\n    };\n  }\n\n  return colorCustomToken;\n};\n"],"mappings":";;;AAMA,MAAM,wBAAwB,EAC5B,MACA,OACA,iBAKI;CACJ,MAAM,aAAa,eAAe;CAClC,OAAO;GACJ,GAAG,KAAK,QAAQ,MAAM,GAAG,WAAW,GAAG,CAAC,aAAa,IAAI;GACzD,GAAG,KAAK,iBAAiB,MAAM,GAAG,WAAW,GAAG,CAAC,aAAa,IAAI;GAClE,GAAG,KAAK,gBAAgB,MAAM,GAAG,WAAW,GAAG,CAAC,aAAa,IAAI;GACjE,GAAG,KAAK,kBAAkB,MAAM,GAAG,WAAW,GAAG,CAAC,aAAa,IAAI;GACnE,GAAG,KAAK,MAAM,MAAM,GAAG,WAAW,GAAG,CAAC;GACtC,GAAG,KAAK,WAAW,MAAM,GAAG,WAAW,GAAG,CAAC;GAC3C,GAAG,KAAK,UAAU,MAAM,WAAW,CAAC;GACpC,GAAG,KAAK,mBAAmB,MAAM,WAAW,CAAC;GAC7C,GAAG,KAAK,eAAe,MAAM,WAAW,CAAC,aAAa,IAAI;GAC1D,GAAG,KAAK,SAAS,MAAM,WAAW,CAAC,aAAa,KAAK;GACrD,GAAG,SAAS,MAAM,WAAW,CAAC;GAC9B,GAAG,KAAK,UAAU,MAAM,WAAW,CAAC,aAAa,IAAI;GACrD,GAAG,KAAK,aAAa,MAAM,GAAG,WAAW,GAAG,CAAC,aAAa,KAAK;GAC/D,GAAG,KAAK,QAAQ,MAAM,GAAG,WAAW,GAAG,CAAC;GACxC,GAAG,KAAK,cAAc,MAAM,GAAG,WAAW,GAAG,CAAC,aAAa,IAAI;CAClE;AACF;AAEA,MAAM,8BAA8B,EAClC,MACA,OACA,iBAKI;CACJ,MAAM,mBAA8C,CAAC;CAErD,KAAK,MAAM,CAAC,OAAO,UAAU,MAAM,WAAW,CAAC,QAAQ,GAAG;EACxD,IAAI,UAAU,KAAK,UAAU,IAAI;EAEjC,iBAAiB,GAAG,OAAO,WAAW;CACxC;CACA,KAAK,MAAM,CAAC,OAAO,UAAU,MAAM,GAAG,WAAW,GAAG,CAAC,QAAQ,GAAG;EAC9D,IAAI,UAAU,KAAK,UAAU,IAAI;EAEjC,iBAAiB,GAAG,OAAO,MAAM,MAAM;CACzC;CAEA,OAAO;EACL,GAAG;EACH,GAAG,qBAAqB;GAAE;GAAY;GAAM;EAAM,CAAC;CACrD;AACF;AAEA,MAAa,4BAA4B,eAAwB;CAC/D,IAAI,mBAAmB,CAAC;CAExB,KAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,WAAW,GACpD,mBAAmB;EACjB,GAAG;EACH,GAAG,2BAA2B;GAC5B,YAAY,aAAa,SAAS;GAClC,MAAM,UAAU,IAAI;GACpB;EACF,CAAC;CACH;CAGF,OAAO;AACT"}

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

@@ -1,15 +1,31 @@
 import { ColorScaleItem } from "../../color/types.mjs";
-import { AliasToken } from "antd/es/theme/interface/index.js";
 //#region src/styles/theme/generateColorPalette.d.ts
-declare const generateColorPalette: ({ type, scale, appearance }: {
+type PaletteSuffix = 'Fill' | 'FillSecondary' | 'FillTertiary' | 'FillQuaternary' | 'Bg' | 'BgHover' | 'Border' | 'BorderHover' | 'Hover' | '' | 'Active' | 'TextHover' | 'Text' | 'TextActive';
+export declare const generateColorPalette: <T extends string>({ type, scale, appearance }: {
   appearance: "light" | "dark";
   scale: ColorScaleItem;
-  type: "Primary" | "Success" | "Warning" | "Error" | "Info" | string;
-}) => Partial<AliasToken>;
-declare const generateColorNeutralPalette: ({ scale, appearance }: {
+  type: T;
+}) => Record<`color${Capitalize<T>}${PaletteSuffix}`, string>;
+export declare const generateColorNeutralPalette: ({ scale, appearance }: {
   appearance: "light" | "dark";
   scale: ColorScaleItem;
-}) => Partial<AliasToken>;
+}) => {
+  colorBgContainer: string;
+  colorBgElevated: string;
+  colorBgLayout: string;
+  colorBgMask: string;
+  colorBgSpotlight: string;
+  colorBorder: string;
+  colorBorderSecondary: string;
+  colorFill: string;
+  colorFillQuaternary: string;
+  colorFillSecondary: string;
+  colorFillTertiary: string;
+  colorText: string;
+  colorTextQuaternary: string;
+  colorTextSecondary: string;
+  colorTextTertiary: string;
+};
 //#endregion
-export { generateColorNeutralPalette, generateColorPalette };
+export {};
 //# sourceMappingURL=generateColorPalette.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"generateColorPalette.mjs","names":[],"sources":["../../../src/styles/theme/generateColorPalette.ts"],"sourcesContent":["import type { AliasToken } from 'antd/es/theme/interface';\nimport { capitalize } from 'es-toolkit/compat';\n\nimport type { ColorScaleItem } from '@/color/types';\n\nexport const generateColorPalette = ({\n  type,\n  scale,\n  appearance,\n}: {\n  appearance: 'light' | 'dark';\n  scale: ColorScaleItem;\n  type: 'Primary' | 'Success' | 'Warning' | 'Error' | 'Info' | string;\n}): Partial<AliasToken> => {\n  const name = capitalize(type);\n  const isDarkMode = appearance === 'dark';\n  return {\n    [`color${name}Fill`]: scale[`${appearance}A`][isDarkMode ? 3 : 4],\n    [`color${name}FillSecondary`]: scale[`${appearance}A`][isDarkMode ? 2 : 3],\n    [`color${name}FillTertiary`]: scale[`${appearance}A`][isDarkMode ? 1 : 2],\n    [`color${name}FillQuaternary`]: scale[`${appearance}A`][isDarkMode ? 0 : 1],\n    [`color${name}Bg`]: scale[appearance][1],\n    [`color${name}BgHover`]: scale[appearance][2],\n    [`color${name}Border`]: scale[appearance][4],\n    [`color${name}BorderHover`]: scale[appearance][isDarkMode ? 5 : 3],\n    [`color${name}Hover`]: scale[appearance][isDarkMode ? 10 : 8],\n    [`color${name}`]: scale[appearance][9],\n    [`color${name}Active`]: scale[appearance][isDarkMode ? 7 : 10],\n    [`color${name}TextHover`]: scale[appearance][isDarkMode ? 10 : 8],\n    [`color${name}Text`]: scale[appearance][9],\n    [`color${name}TextActive`]: scale[appearance][isDarkMode ? 7 : 10],\n  };\n};\n\nexport const generateColorNeutralPalette = ({\n  scale,\n  appearance,\n}: {\n  appearance: 'light' | 'dark';\n  scale: ColorScaleItem;\n}): Partial<AliasToken> => {\n  return {\n    colorBgContainer: appearance === 'dark' ? scale[appearance][1] : scale[appearance][0],\n    colorBgElevated: appearance === 'dark' ? scale[appearance][2] : scale[appearance][0],\n    colorBgLayout: appearance === 'dark' ? scale[appearance][0] : scale[appearance][1],\n    colorBgMask: scale.lightA[8],\n    colorBgSpotlight: scale[appearance][4],\n    colorBorder: scale[appearance][3],\n    colorBorderSecondary: scale[appearance][2],\n    colorFill: scale[`${appearance}A`][3],\n    colorFillQuaternary: scale[`${appearance}A`][0],\n    colorFillSecondary: scale[`${appearance}A`][2],\n    colorFillTertiary: scale[`${appearance}A`][1],\n    colorText: scale[appearance][12],\n    colorTextQuaternary: scale[appearance][6],\n    colorTextSecondary: scale[appearance][10],\n    colorTextTertiary: scale[appearance][8],\n  };\n};\n"],"mappings":";;AAKA,MAAa,wBAAwB,EACnC,MACA,OACA,iBAKyB;CACzB,MAAM,OAAO,WAAW,IAAI;CAC5B,MAAM,aAAa,eAAe;CAClC,OAAO;GACJ,QAAQ,KAAK,QAAQ,MAAM,GAAG,WAAW,GAAG,CAAC,aAAa,IAAI;GAC9D,QAAQ,KAAK,iBAAiB,MAAM,GAAG,WAAW,GAAG,CAAC,aAAa,IAAI;GACvE,QAAQ,KAAK,gBAAgB,MAAM,GAAG,WAAW,GAAG,CAAC,aAAa,IAAI;GACtE,QAAQ,KAAK,kBAAkB,MAAM,GAAG,WAAW,GAAG,CAAC,aAAa,IAAI;GACxE,QAAQ,KAAK,MAAM,MAAM,WAAW,CAAC;GACrC,QAAQ,KAAK,WAAW,MAAM,WAAW,CAAC;GAC1C,QAAQ,KAAK,UAAU,MAAM,WAAW,CAAC;GACzC,QAAQ,KAAK,eAAe,MAAM,WAAW,CAAC,aAAa,IAAI;GAC/D,QAAQ,KAAK,SAAS,MAAM,WAAW,CAAC,aAAa,KAAK;GAC1D,QAAQ,SAAS,MAAM,WAAW,CAAC;GACnC,QAAQ,KAAK,UAAU,MAAM,WAAW,CAAC,aAAa,IAAI;GAC1D,QAAQ,KAAK,aAAa,MAAM,WAAW,CAAC,aAAa,KAAK;GAC9D,QAAQ,KAAK,QAAQ,MAAM,WAAW,CAAC;GACvC,QAAQ,KAAK,cAAc,MAAM,WAAW,CAAC,aAAa,IAAI;CACjE;AACF;AAEA,MAAa,+BAA+B,EAC1C,OACA,iBAIyB;CACzB,OAAO;EACL,kBAAkB,eAAe,SAAS,MAAM,WAAW,CAAC,KAAK,MAAM,WAAW,CAAC;EACnF,iBAAiB,eAAe,SAAS,MAAM,WAAW,CAAC,KAAK,MAAM,WAAW,CAAC;EAClF,eAAe,eAAe,SAAS,MAAM,WAAW,CAAC,KAAK,MAAM,WAAW,CAAC;EAChF,aAAa,MAAM,OAAO;EAC1B,kBAAkB,MAAM,WAAW,CAAC;EACpC,aAAa,MAAM,WAAW,CAAC;EAC/B,sBAAsB,MAAM,WAAW,CAAC;EACxC,WAAW,MAAM,GAAG,WAAW,GAAG,CAAC;EACnC,qBAAqB,MAAM,GAAG,WAAW,GAAG,CAAC;EAC7C,oBAAoB,MAAM,GAAG,WAAW,GAAG,CAAC;EAC5C,mBAAmB,MAAM,GAAG,WAAW,GAAG,CAAC;EAC3C,WAAW,MAAM,WAAW,CAAC;EAC7B,qBAAqB,MAAM,WAAW,CAAC;EACvC,oBAAoB,MAAM,WAAW,CAAC;EACtC,mBAAmB,MAAM,WAAW,CAAC;CACvC;AACF"}
+{"version":3,"file":"generateColorPalette.mjs","names":[],"sources":["../../../src/styles/theme/generateColorPalette.ts"],"sourcesContent":["import { capitalize } from 'es-toolkit/compat';\n\nimport type { ColorScaleItem } from '@/color/types';\n\ntype PaletteSuffix =\n  | 'Fill'\n  | 'FillSecondary'\n  | 'FillTertiary'\n  | 'FillQuaternary'\n  | 'Bg'\n  | 'BgHover'\n  | 'Border'\n  | 'BorderHover'\n  | 'Hover'\n  | ''\n  | 'Active'\n  | 'TextHover'\n  | 'Text'\n  | 'TextActive';\n\nexport const generateColorPalette = <T extends string>({\n  type,\n  scale,\n  appearance,\n}: {\n  appearance: 'light' | 'dark';\n  scale: ColorScaleItem;\n  type: T;\n}): Record<`color${Capitalize<T>}${PaletteSuffix}`, string> => {\n  const name = capitalize(type);\n  const isDarkMode = appearance === 'dark';\n  return {\n    [`color${name}Fill`]: scale[`${appearance}A`][isDarkMode ? 3 : 4],\n    [`color${name}FillSecondary`]: scale[`${appearance}A`][isDarkMode ? 2 : 3],\n    [`color${name}FillTertiary`]: scale[`${appearance}A`][isDarkMode ? 1 : 2],\n    [`color${name}FillQuaternary`]: scale[`${appearance}A`][isDarkMode ? 0 : 1],\n    [`color${name}Bg`]: scale[appearance][1],\n    [`color${name}BgHover`]: scale[appearance][2],\n    [`color${name}Border`]: scale[appearance][4],\n    [`color${name}BorderHover`]: scale[appearance][isDarkMode ? 5 : 3],\n    [`color${name}Hover`]: scale[appearance][isDarkMode ? 10 : 8],\n    [`color${name}`]: scale[appearance][9],\n    [`color${name}Active`]: scale[appearance][isDarkMode ? 7 : 10],\n    [`color${name}TextHover`]: scale[appearance][isDarkMode ? 10 : 8],\n    [`color${name}Text`]: scale[appearance][9],\n    [`color${name}TextActive`]: scale[appearance][isDarkMode ? 7 : 10],\n  } as Record<`color${Capitalize<T>}${PaletteSuffix}`, string>;\n};\n\nexport const generateColorNeutralPalette = ({\n  scale,\n  appearance,\n}: {\n  appearance: 'light' | 'dark';\n  scale: ColorScaleItem;\n}) => {\n  return {\n    colorBgContainer: appearance === 'dark' ? scale[appearance][1] : scale[appearance][0],\n    colorBgElevated: appearance === 'dark' ? scale[appearance][2] : scale[appearance][0],\n    colorBgLayout: appearance === 'dark' ? scale[appearance][0] : scale[appearance][1],\n    colorBgMask: scale.lightA[8],\n    colorBgSpotlight: scale[appearance][4],\n    colorBorder: scale[appearance][3],\n    colorBorderSecondary: scale[appearance][2],\n    colorFill: scale[`${appearance}A`][3],\n    colorFillQuaternary: scale[`${appearance}A`][0],\n    colorFillSecondary: scale[`${appearance}A`][2],\n    colorFillTertiary: scale[`${appearance}A`][1],\n    colorText: scale[appearance][12],\n    colorTextQuaternary: scale[appearance][6],\n    colorTextSecondary: scale[appearance][10],\n    colorTextTertiary: scale[appearance][8],\n  };\n};\n"],"mappings":";;AAoBA,MAAa,wBAA0C,EACrD,MACA,OACA,iBAK6D;CAC7D,MAAM,OAAO,WAAW,IAAI;CAC5B,MAAM,aAAa,eAAe;CAClC,OAAO;GACJ,QAAQ,KAAK,QAAQ,MAAM,GAAG,WAAW,GAAG,CAAC,aAAa,IAAI;GAC9D,QAAQ,KAAK,iBAAiB,MAAM,GAAG,WAAW,GAAG,CAAC,aAAa,IAAI;GACvE,QAAQ,KAAK,gBAAgB,MAAM,GAAG,WAAW,GAAG,CAAC,aAAa,IAAI;GACtE,QAAQ,KAAK,kBAAkB,MAAM,GAAG,WAAW,GAAG,CAAC,aAAa,IAAI;GACxE,QAAQ,KAAK,MAAM,MAAM,WAAW,CAAC;GACrC,QAAQ,KAAK,WAAW,MAAM,WAAW,CAAC;GAC1C,QAAQ,KAAK,UAAU,MAAM,WAAW,CAAC;GACzC,QAAQ,KAAK,eAAe,MAAM,WAAW,CAAC,aAAa,IAAI;GAC/D,QAAQ,KAAK,SAAS,MAAM,WAAW,CAAC,aAAa,KAAK;GAC1D,QAAQ,SAAS,MAAM,WAAW,CAAC;GACnC,QAAQ,KAAK,UAAU,MAAM,WAAW,CAAC,aAAa,IAAI;GAC1D,QAAQ,KAAK,aAAa,MAAM,WAAW,CAAC,aAAa,KAAK;GAC9D,QAAQ,KAAK,QAAQ,MAAM,WAAW,CAAC;GACvC,QAAQ,KAAK,cAAc,MAAM,WAAW,CAAC,aAAa,IAAI;CACjE;AACF;AAEA,MAAa,+BAA+B,EAC1C,OACA,iBAII;CACJ,OAAO;EACL,kBAAkB,eAAe,SAAS,MAAM,WAAW,CAAC,KAAK,MAAM,WAAW,CAAC;EACnF,iBAAiB,eAAe,SAAS,MAAM,WAAW,CAAC,KAAK,MAAM,WAAW,CAAC;EAClF,eAAe,eAAe,SAAS,MAAM,WAAW,CAAC,KAAK,MAAM,WAAW,CAAC;EAChF,aAAa,MAAM,OAAO;EAC1B,kBAAkB,MAAM,WAAW,CAAC;EACpC,aAAa,MAAM,WAAW,CAAC;EAC/B,sBAAsB,MAAM,WAAW,CAAC;EACxC,WAAW,MAAM,GAAG,WAAW,GAAG,CAAC;EACnC,qBAAqB,MAAM,GAAG,WAAW,GAAG,CAAC;EAC7C,oBAAoB,MAAM,GAAG,WAAW,GAAG,CAAC;EAC5C,mBAAmB,MAAM,GAAG,WAAW,GAAG,CAAC;EAC3C,WAAW,MAAM,WAAW,CAAC;EAC7B,qBAAqB,MAAM,WAAW,CAAC;EACvC,oBAAoB,MAAM,WAAW,CAAC;EACtC,mBAAmB,MAAM,WAAW,CAAC;CACvC;AACF"}

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

@@ -0,0 +1,49 @@
+import { NeutralColors } from "../customTheme.mjs";
+import { LobePrimaryColor } from "./customPrimary.mjs";
+import { LobeToken } from "./createLobeToken.mjs";
+import { CSSProperties, ReactNode } from "react";
+//#region src/styles/theme/scope.d.ts
+export type LobeAppearance = 'light' | 'dark';
+export interface LobeThemeState {
+  appearance: LobeAppearance;
+  neutralColor?: NeutralColors;
+  primaryColor?: LobePrimaryColor;
+}
+export declare const setLobeTheme: (state: Partial<LobeThemeState>, root?: HTMLElement) => void;
+export interface ThemeScopeProps extends Partial<LobeThemeState> {
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+export declare const ThemeScope: ({ appearance, children, className, neutralColor, primaryColor, style }: ThemeScopeProps) => import("react").JSX.Element;
+export declare const useThemeMode: () => {
+  appearance: LobeAppearance;
+  isDarkMode: boolean;
+};
+export type LobeTheme = LobeToken & {
+  appearance: LobeAppearance;
+  isDarkMode: boolean;
+};
+export declare const useTheme: () => LobeTheme;
+declare const breakpointQueries: {
+  lg: string;
+  md: string;
+  sm: string;
+  xl: string;
+  xs: string;
+  xxl: string;
+  xxxl: string;
+};
+type Breakpoint = keyof typeof breakpointQueries;
+export type ResponsiveState = Record<Breakpoint | 'mobile' | 'tablet' | 'laptop' | 'desktop', boolean>;
+export declare const useResponsive: () => ResponsiveState;
+export interface LobeThemeScriptProps {
+  appearance?: LobeAppearance | 'system';
+  neutralColor?: NeutralColors;
+  nonce?: string;
+  primaryColor?: LobePrimaryColor;
+}
+export declare const LobeThemeScript: ({ appearance, neutralColor, nonce, primaryColor }: LobeThemeScriptProps) => import("react").JSX.Element;
+//#endregion
+export {};
+//# sourceMappingURL=scope.d.mts.map

package/es/styles/theme/scope.mjs

@@ -0,0 +1,172 @@
+"use client";
+import { isCustomPrimaryColor } from "./customPrimary.mjs";
+import { staticToken } from "./token/static.mjs";
+import { createLobeToken } from "./createLobeToken.mjs";
+import { getCustomPrimaryCss } 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"
+];
+const toAttributes = ({ appearance, neutralColor, primaryColor }) => ({
+	"data-neutral-color": neutralColor,
+	"data-primary-color": primaryColor,
+	"data-theme": appearance
+});
+const normalizePrimary = (color) => isCustomPrimaryColor(color) ? color.toLowerCase() : color;
+const customPrimaryStyleId = (color) => `lobe-primary-${color.slice(1)}`;
+const ensureCustomPrimaryStyle = (color, doc) => {
+	const id = customPrimaryStyleId(color);
+	if (doc.getElementById(id)) return;
+	const style = doc.createElement("style");
+	style.id = id;
+	style.textContent = getCustomPrimaryCss(color);
+	doc.head.append(style);
+};
+const setLobeTheme = (state, root = document.documentElement) => {
+	const next = {
+		...readThemeState(root),
+		...state
+	};
+	next.primaryColor = normalizePrimary(next.primaryColor);
+	if (isCustomPrimaryColor(next.primaryColor)) ensureCustomPrimaryStyle(next.primaryColor, 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,
+	primaryColor: el.dataset.primaryColor || void 0
+});
+const stateKey = (state) => `${state.appearance}|${state.primaryColor ?? ""}|${state.neutralColor ?? ""}`;
+const SERVER_STATE = { appearance: "light" };
+let rootSnapshot = SERVER_STATE;
+const getRootSnapshot = () => {
+	const next = readThemeState(document.documentElement);
+	if (stateKey(next) !== stateKey(rootSnapshot)) rootSnapshot = next;
+	return rootSnapshot;
+};
+const subscribeRoot = (onChange) => {
+	const observer = new MutationObserver(onChange);
+	observer.observe(document.documentElement, {
+		attributeFilter: ATTRIBUTES,
+		attributes: true
+	});
+	return () => observer.disconnect();
+};
+const ThemeScopeContext = createContext(null);
+const useThemeState = () => {
+	const scoped = use(ThemeScopeContext);
+	const root = useSyncExternalStore(subscribeRoot, getRootSnapshot, () => SERVER_STATE);
+	return scoped ?? root;
+};
+const ThemeScope = ({ appearance, children, className, neutralColor, primaryColor, style }) => {
+	const parent = useThemeState();
+	const state = useMemo(() => ({
+		appearance: appearance ?? parent.appearance,
+		neutralColor: neutralColor ?? parent.neutralColor,
+		primaryColor: normalizePrimary(primaryColor) ?? parent.primaryColor
+	}), [
+		appearance,
+		neutralColor,
+		primaryColor,
+		parent
+	]);
+	const customPrimary = isCustomPrimaryColor(state.primaryColor) ? state.primaryColor : 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
+		})]
+	});
+};
+const useThemeMode = () => {
+	const { appearance } = useThemeState();
+	return useMemo(() => ({
+		appearance,
+		isDarkMode: appearance === "dark"
+	}), [appearance]);
+};
+const themeCache = /* @__PURE__ */ new Map();
+const useTheme = () => {
+	const state = useThemeState();
+	const key = stateKey(state);
+	let theme = themeCache.get(key);
+	if (!theme) {
+		theme = {
+			...createLobeToken(state),
+			appearance: state.appearance,
+			isDarkMode: state.appearance === "dark"
+		};
+		themeCache.set(key, theme);
+	}
+	return theme;
+};
+const breakpointQueries = {
+	lg: `(min-width: ${staticToken.screenLG}px)`,
+	md: `(min-width: ${staticToken.screenMD}px)`,
+	sm: `(min-width: ${staticToken.screenSM}px)`,
+	xl: `(min-width: ${staticToken.screenXL}px)`,
+	xs: `(max-width: ${staticToken.screenXSMax}px)`,
+	xxl: `(min-width: ${staticToken.screenXXL}px)`,
+	xxxl: `(min-width: ${staticToken.screenXXXL}px)`
+};
+const toResponsive = (matches) => ({
+	...matches,
+	desktop: matches.xxl,
+	laptop: matches.lg,
+	mobile: matches.xs,
+	tablet: matches.md
+});
+const SERVER_RESPONSIVE = toResponsive({
+	lg: false,
+	md: false,
+	sm: false,
+	xl: false,
+	xs: false,
+	xxl: false,
+	xxxl: false
+});
+let responsiveSnapshot = SERVER_RESPONSIVE;
+const getResponsiveSnapshot = () => {
+	const matches = Object.fromEntries(Object.entries(breakpointQueries).map(([key, query]) => [key, matchMedia(query).matches]));
+	if (Object.keys(matches).some((key) => matches[key] !== responsiveSnapshot[key])) responsiveSnapshot = toResponsive(matches);
+	return responsiveSnapshot;
+};
+const subscribeResponsive = (onChange) => {
+	const lists = Object.values(breakpointQueries).map((query) => matchMedia(query));
+	for (const list of lists) list.addEventListener("change", onChange);
+	return () => {
+		for (const list of lists) list.removeEventListener("change", onChange);
+	};
+};
+const useResponsive = () => useSyncExternalStore(subscribeResponsive, getResponsiveSnapshot, () => SERVER_RESPONSIVE);
+const LobeThemeScript = ({ appearance, neutralColor, nonce, 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([
+		appearance ?? null,
+		primary ?? null,
+		neutralColor ?? null,
+		...custom
+	])})`;
+	return /* @__PURE__ */ jsx("script", {
+		suppressHydrationWarning: true,
+		dangerouslySetInnerHTML: { __html: script },
+		nonce
+	});
+};
+//#endregion
+export { LobeThemeScript, ThemeScope, setLobeTheme, useResponsive, useTheme, useThemeMode };
+
+//# sourceMappingURL=scope.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scope.mjs","names":[],"sources":["../../../src/styles/theme/scope.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type CSSProperties,\n  type ReactNode,\n  use,\n  useMemo,\n  useSyncExternalStore,\n} from 'react';\n\nimport type { NeutralColors } from '../customTheme';\nimport { createLobeToken, type LobeToken } from './createLobeToken';\nimport {\n  type CustomPrimaryColor,\n  isCustomPrimaryColor,\n  type LobePrimaryColor,\n} from './customPrimary';\nimport { getCustomPrimaryCss } from './themeCss';\nimport { staticToken } from './token/static';\n\nexport type LobeAppearance = 'light' | 'dark';\n\nexport interface LobeThemeState {\n  appearance: LobeAppearance;\n  neutralColor?: NeutralColors;\n  primaryColor?: LobePrimaryColor;\n}\n\nconst ATTRIBUTES = ['data-theme', 'data-primary-color', 'data-neutral-color'];\n\nconst toAttributes = ({ appearance, neutralColor, primaryColor }: LobeThemeState) => ({\n  'data-neutral-color': neutralColor,\n  'data-primary-color': primaryColor,\n  'data-theme': appearance,\n});\n\nconst normalizePrimary = (color?: LobePrimaryColor) =>\n  isCustomPrimaryColor(color) ? (color.toLowerCase() as CustomPrimaryColor) : color;\n\nconst customPrimaryStyleId = (color: CustomPrimaryColor) => `lobe-primary-${color.slice(1)}`;\n\nconst ensureCustomPrimaryStyle = (color: CustomPrimaryColor, doc: Document) => {\n  const id = customPrimaryStyleId(color);\n  if (doc.getElementById(id)) return;\n  const style = doc.createElement('style');\n  style.id = id;\n  style.textContent = getCustomPrimaryCss(color);\n  doc.head.append(style);\n};\n\nexport const setLobeTheme = (\n  state: Partial<LobeThemeState>,\n  root: HTMLElement = document.documentElement,\n) => {\n  const next = { ...readThemeState(root), ...state };\n  next.primaryColor = normalizePrimary(next.primaryColor);\n  if (isCustomPrimaryColor(next.primaryColor))\n    ensureCustomPrimaryStyle(next.primaryColor, root.ownerDocument);\n  for (const [name, value] of Object.entries(toAttributes(next))) {\n    if (value) root.setAttribute(name, value);\n    else root.removeAttribute(name);\n  }\n};\n\nconst readThemeState = (el: HTMLElement): LobeThemeState => ({\n  appearance: el.dataset.theme === 'dark' ? 'dark' : 'light',\n  neutralColor: (el.dataset.neutralColor as NeutralColors) || undefined,\n  primaryColor: (el.dataset.primaryColor as LobePrimaryColor) || undefined,\n});\n\nconst stateKey = (state: LobeThemeState) =>\n  `${state.appearance}|${state.primaryColor ?? ''}|${state.neutralColor ?? ''}`;\n\nconst SERVER_STATE: LobeThemeState = { appearance: 'light' };\nlet rootSnapshot: LobeThemeState = SERVER_STATE;\n\nconst getRootSnapshot = () => {\n  const next = readThemeState(document.documentElement);\n  if (stateKey(next) !== stateKey(rootSnapshot)) rootSnapshot = next;\n  return rootSnapshot;\n};\n\nconst subscribeRoot = (onChange: () => void) => {\n  const observer = new MutationObserver(onChange);\n  observer.observe(document.documentElement, { attributeFilter: ATTRIBUTES, attributes: true });\n  return () => observer.disconnect();\n};\n\nconst ThemeScopeContext = createContext<LobeThemeState | null>(null);\n\nconst useThemeState = () => {\n  const scoped = use(ThemeScopeContext);\n  const root = useSyncExternalStore(subscribeRoot, getRootSnapshot, () => SERVER_STATE);\n  return scoped ?? root;\n};\n\nexport interface ThemeScopeProps extends Partial<LobeThemeState> {\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport const ThemeScope = ({\n  appearance,\n  children,\n  className,\n  neutralColor,\n  primaryColor,\n  style,\n}: ThemeScopeProps) => {\n  const parent = useThemeState();\n  const state = useMemo<LobeThemeState>(\n    () => ({\n      appearance: appearance ?? parent.appearance,\n      neutralColor: neutralColor ?? parent.neutralColor,\n      primaryColor: normalizePrimary(primaryColor) ?? parent.primaryColor,\n    }),\n    [appearance, neutralColor, primaryColor, parent],\n  );\n  const customPrimary = isCustomPrimaryColor(state.primaryColor) ? state.primaryColor : undefined;\n\n  return (\n    <ThemeScopeContext value={state}>\n      {customPrimary && (\n        <style href={customPrimaryStyleId(customPrimary)} precedence=\"lobe-theme\">\n          {getCustomPrimaryCss(customPrimary)}\n        </style>\n      )}\n      <div className={className} style={style} {...toAttributes(state)}>\n        {children}\n      </div>\n    </ThemeScopeContext>\n  );\n};\n\nexport const useThemeMode = () => {\n  const { appearance } = useThemeState();\n  return useMemo(() => ({ appearance, isDarkMode: appearance === 'dark' }), [appearance]);\n};\n\nexport type LobeTheme = LobeToken & { appearance: LobeAppearance; isDarkMode: boolean };\n\nconst themeCache = new Map<string, LobeTheme>();\n\nexport const useTheme = (): LobeTheme => {\n  const state = useThemeState();\n  const key = stateKey(state);\n  let theme = themeCache.get(key);\n  if (!theme) {\n    theme = {\n      ...createLobeToken(state),\n      appearance: state.appearance,\n      isDarkMode: state.appearance === 'dark',\n    };\n    themeCache.set(key, theme);\n  }\n  return theme;\n};\n\nconst breakpointQueries = {\n  lg: `(min-width: ${staticToken.screenLG}px)`,\n  md: `(min-width: ${staticToken.screenMD}px)`,\n  sm: `(min-width: ${staticToken.screenSM}px)`,\n  xl: `(min-width: ${staticToken.screenXL}px)`,\n  xs: `(max-width: ${staticToken.screenXSMax}px)`,\n  xxl: `(min-width: ${staticToken.screenXXL}px)`,\n  xxxl: `(min-width: ${staticToken.screenXXXL}px)`,\n};\n\ntype Breakpoint = keyof typeof breakpointQueries;\nexport type ResponsiveState = Record<\n  Breakpoint | 'mobile' | 'tablet' | 'laptop' | 'desktop',\n  boolean\n>;\n\nconst toResponsive = (matches: Record<Breakpoint, boolean>): ResponsiveState => ({\n  ...matches,\n  desktop: matches.xxl,\n  laptop: matches.lg,\n  mobile: matches.xs,\n  tablet: matches.md,\n});\n\nconst SERVER_RESPONSIVE = toResponsive({\n  lg: false,\n  md: false,\n  sm: false,\n  xl: false,\n  xs: false,\n  xxl: false,\n  xxxl: false,\n});\nlet responsiveSnapshot = SERVER_RESPONSIVE;\n\nconst getResponsiveSnapshot = () => {\n  const matches = Object.fromEntries(\n    Object.entries(breakpointQueries).map(([key, query]) => [key, matchMedia(query).matches]),\n  ) as Record<Breakpoint, boolean>;\n  const changed = (Object.keys(matches) as Breakpoint[]).some(\n    (key) => matches[key] !== responsiveSnapshot[key],\n  );\n  if (changed) responsiveSnapshot = toResponsive(matches);\n  return responsiveSnapshot;\n};\n\nconst subscribeResponsive = (onChange: () => void) => {\n  const lists = Object.values(breakpointQueries).map((query) => matchMedia(query));\n  for (const list of lists) list.addEventListener('change', onChange);\n  return () => {\n    for (const list of lists) list.removeEventListener('change', onChange);\n  };\n};\n\nexport const useResponsive = () =>\n  useSyncExternalStore(subscribeResponsive, getResponsiveSnapshot, () => SERVER_RESPONSIVE);\n\nexport interface LobeThemeScriptProps {\n  appearance?: LobeAppearance | 'system';\n  neutralColor?: NeutralColors;\n  nonce?: string;\n  primaryColor?: LobePrimaryColor;\n}\n\nexport const LobeThemeScript = ({\n  appearance,\n  neutralColor,\n  nonce,\n  primaryColor,\n}: LobeThemeScriptProps) => {\n  const primary = normalizePrimary(primaryColor);\n  const custom = isCustomPrimaryColor(primary)\n    ? [customPrimaryStyleId(primary), getCustomPrimaryCss(primary)]\n    : [null, null];\n  const args = JSON.stringify([\n    appearance ?? null,\n    primary ?? null,\n    neutralColor ?? null,\n    ...custom,\n  ]);\n  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,${args})`;\n\n  return (\n    <script suppressHydrationWarning dangerouslySetInnerHTML={{ __html: script }} nonce={nonce} />\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import { CustomPrimaryColor } from "./customPrimary.mjs";
+//#region src/styles/theme/themeCss.d.ts
+export declare const getCustomPrimaryCss: (color: CustomPrimaryColor) => string;
+export declare const getThemeCss: () => string;
+export declare const getGlobalCss: () => string;
+//#endregion
+//# sourceMappingURL=themeCss.d.mts.map