@lobehub/ui 6.0.0-beta.6 → 6.0.0-beta.8

package/es/styles/createGlobalStyle.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { useTheme } from "./theme/scope.mjs";
 import { css, injectGlobal } from "./css.mjs";
+import { useTheme } from "./theme/scope.mjs";
 import { useMemo } from "react";
 //#region src/styles/createGlobalStyle.ts
 const createGlobalStyle = (template, ...args) => {

package/es/styles/index.d.mts

@@ -1,9 +1,10 @@
 import { NeutralColors, NeutralColorsObj, PrimaryColors, PrimaryColorsObj, findCustomThemeName, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches } from "./customTheme.mjs";
+import { CustomPrimaryColor, LobePrimaryColor, isCustomPrimaryColor } from "./theme/customPrimary.mjs";
 import { CreateLobeTokenParams, LobeToken, createLobeToken } from "./theme/createLobeToken.mjs";
 import { LobeAppearance, LobeTheme, LobeThemeScript, LobeThemeScriptProps, LobeThemeState, ResponsiveState, ThemeScope, ThemeScopeProps, setLobeTheme, useResponsive, useTheme, useThemeMode } from "./theme/scope.mjs";
 import { createGlobalStyle } from "./createGlobalStyle.mjs";
 import { LobeCssVar, StaticStyleExtract, StaticStyleUtils, createStaticStyles, css, cssVar, cx, extractStaticStyle, injectGlobal, keyframes, responsive } from "./css.mjs";
 import { staticStylish } from "./theme/customStylishStatic.mjs";
 import { generateColorNeutralPalette, generateColorPalette } from "./theme/generateColorPalette.mjs";
-import { getGlobalCss, getThemeCss } from "./theme/themeCss.mjs";
-export { type CreateLobeTokenParams, type LobeAppearance, type LobeCssVar, type LobeTheme, LobeThemeScript, type LobeThemeScriptProps, type LobeThemeState, type LobeToken, NeutralColors, NeutralColorsObj, PrimaryColors, PrimaryColorsObj, type ResponsiveState, type StaticStyleExtract, type StaticStyleUtils, ThemeScope, type ThemeScopeProps, createGlobalStyle, createLobeToken, createStaticStyles, css, cssVar, cx, extractStaticStyle, findCustomThemeName, generateColorNeutralPalette, generateColorPalette, getGlobalCss, getThemeCss, injectGlobal, keyframes, staticStylish as lobeStaticStylish, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches, responsive, setLobeTheme, useResponsive, useTheme, useThemeMode };
+import { getCustomPrimaryCss, getGlobalCss, getThemeCss } from "./theme/themeCss.mjs";
+export { type CreateLobeTokenParams, type CustomPrimaryColor, type LobeAppearance, type LobeCssVar, type LobePrimaryColor, type LobeTheme, LobeThemeScript, type LobeThemeScriptProps, type LobeThemeState, type LobeToken, NeutralColors, NeutralColorsObj, PrimaryColors, PrimaryColorsObj, type ResponsiveState, type StaticStyleExtract, type StaticStyleUtils, ThemeScope, type ThemeScopeProps, createGlobalStyle, createLobeToken, createStaticStyles, css, cssVar, cx, extractStaticStyle, findCustomThemeName, generateColorNeutralPalette, generateColorPalette, getCustomPrimaryCss, getGlobalCss, getThemeCss, injectGlobal, isCustomPrimaryColor, keyframes, staticStylish as lobeStaticStylish, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches, responsive, setLobeTheme, useResponsive, useTheme, useThemeMode };

package/es/styles/index.mjs

@@ -1,9 +1,10 @@
 import { generateColorNeutralPalette, generateColorPalette } from "./theme/generateColorPalette.mjs";
+import { findCustomThemeName, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches } from "./customTheme.mjs";
+import { isCustomPrimaryColor } from "./theme/customPrimary.mjs";
 import { createLobeToken } from "./theme/createLobeToken.mjs";
-import { LobeThemeScript, ThemeScope, setLobeTheme, useResponsive, useTheme, useThemeMode } from "./theme/scope.mjs";
 import { createStaticStyles, css, cssVar, cx, extractStaticStyle, injectGlobal, keyframes, responsive } from "./css.mjs";
+import { getCustomPrimaryCss, getGlobalCss, getThemeCss } from "./theme/themeCss.mjs";
+import { LobeThemeScript, ThemeScope, setLobeTheme, useResponsive, useTheme, useThemeMode } from "./theme/scope.mjs";
 import { createGlobalStyle } from "./createGlobalStyle.mjs";
-import { findCustomThemeName, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches } from "./customTheme.mjs";
 import { staticStylish } from "./theme/customStylishStatic.mjs";
-import { getGlobalCss, getThemeCss } from "./theme/themeCss.mjs";
-export { LobeThemeScript, ThemeScope, createGlobalStyle, createLobeToken, createStaticStyles, css, cssVar, cx, extractStaticStyle, findCustomThemeName, generateColorNeutralPalette, generateColorPalette, getGlobalCss, getThemeCss, injectGlobal, keyframes, staticStylish as lobeStaticStylish, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches, responsive, setLobeTheme, useResponsive, useTheme, useThemeMode };
+export { LobeThemeScript, ThemeScope, createGlobalStyle, createLobeToken, createStaticStyles, css, cssVar, cx, extractStaticStyle, findCustomThemeName, generateColorNeutralPalette, generateColorPalette, getCustomPrimaryCss, getGlobalCss, getThemeCss, injectGlobal, isCustomPrimaryColor, keyframes, staticStylish as lobeStaticStylish, neutralColors, neutralColorsSwatches, primaryColors, primaryColorsSwatches, responsive, setLobeTheme, useResponsive, useTheme, useThemeMode };

package/es/styles/stylex/props.mjs

@@ -1,10 +1,10 @@
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 //#region src/styles/stylex/props.ts
 const styleProps = (styles, className, style) => {
 	const p = stylex.props(styles);
 	return {
-		className: clsx(p.className, className),
+		className: clsx$1(p.className, className),
 		style: p.style || style ? {
 			...p.style,
 			...style

package/es/styles/stylex/props.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"props.mjs","names":[],"sources":["../../../src/styles/stylex/props.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport type { CSSProperties } from 'react';\n\nexport const styleProps = (\n  styles: stylex.StyleXArray<\n    | stylex.CompiledStyles\n    | boolean\n    | null\n    | undefined\n    | Readonly<[stylex.CompiledStyles, stylex.InlineStyles]>\n  >,\n  className?: string,\n  style?: CSSProperties,\n): { className: string; style: CSSProperties | undefined } => {\n  const p = stylex.props(styles);\n  return {\n    className: clsx(p.className, className),\n    style: p.style || style ? { ...p.style, ...style } : undefined,\n  };\n};\n"],"mappings":";;;AAGA,MAAa,cAAc,QAAyI,WAAoB,UAGnL;CACH,MAAM,IAAI,OAAO,MAAM,MAAM;CAC7B,OAAO;EACL,WAAW,KAAK,EAAE,WAAW,SAAS;EACtC,OAAO,EAAE,SAAS,QAAQ;GACxB,GAAG,EAAE;GACL,GAAG;EACL,IAAI,KAAA;CACN;AACF"}
+{"version":3,"file":"props.mjs","names":["clsx"],"sources":["../../../src/styles/stylex/props.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport type { CSSProperties } from 'react';\n\nexport const styleProps = (\n  styles: stylex.StyleXArray<\n    | stylex.CompiledStyles\n    | boolean\n    | null\n    | undefined\n    | Readonly<[stylex.CompiledStyles, stylex.InlineStyles]>\n  >,\n  className?: string,\n  style?: CSSProperties,\n): { className: string; style: CSSProperties | undefined } => {\n  const p = stylex.props(styles);\n  return {\n    className: clsx(p.className, className),\n    style: p.style || style ? { ...p.style, ...style } : undefined,\n  };\n};\n"],"mappings":";;;AAGA,MAAa,cAAc,QAAyI,WAAoB,UAGnL;CACH,MAAM,IAAI,OAAO,MAAM,MAAM;CAC7B,OAAO;EACL,WAAWA,OAAK,EAAE,WAAW,SAAS;EACtC,OAAO,EAAE,SAAS,QAAQ;GACxB,GAAG,EAAE;GACL,GAAG;EACL,IAAI,KAAA;CACN;AACF"}

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

@@ -1,9 +1,10 @@
-import { NeutralColors, PrimaryColors } from "../customTheme.mjs";
+import { NeutralColors } from "../customTheme.mjs";
+import { LobePrimaryColor } from "./customPrimary.mjs";
 //#region src/styles/theme/createLobeToken.d.ts
 export interface CreateLobeTokenParams {
   appearance: 'light' | 'dark';
   neutralColor?: NeutralColors;
-  primaryColor?: PrimaryColors;
+  primaryColor?: LobePrimaryColor;
 }
 export declare const createLobeTokenGroups: ({ appearance, neutralColor, primaryColor }: CreateLobeTokenParams) => {
   neutral: {

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, PrimaryColors } from '../customTheme';\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?: PrimaryColors;\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":";;;;;AAYA,MAAa,yBAAyB,EACpC,YACA,cACA,mBAC2B;CAC3B,MAAM,UAAU,mBAAmB,UAAU;CAE7C,OAAO;EACL,SAAS,mBAAmB,YAAY,cAAc,OAAO;EAC7D;EACA,SAAS,mBAAmB,YAAY,YAAY;EACpD,QAAQ;CACV;AACF;AASA,MAAa,mBAAmB,WAA6C;CAC3E,MAAM,SAAS,sBAAsB,MAAM;CAE3C,OAAO;EAAE,GAAG,OAAO;EAAQ,GAAG,OAAO;EAAS,GAAG,OAAO;EAAS,GAAG,OAAO;CAAQ;AACrF"}
+{"version":3,"file":"createLobeToken.mjs","names":[],"sources":["../../../src/styles/theme/createLobeToken.ts"],"sourcesContent":["import type { 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/scope.d.mts

@@ -1,4 +1,5 @@
-import { NeutralColors, PrimaryColors } from "../customTheme.mjs";
+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
@@ -6,7 +7,7 @@ export type LobeAppearance = 'light' | 'dark';
 export interface LobeThemeState {
   appearance: LobeAppearance;
   neutralColor?: NeutralColors;
-  primaryColor?: PrimaryColors;
+  primaryColor?: LobePrimaryColor;
 }
 export declare const setLobeTheme: (state: Partial<LobeThemeState>, root?: HTMLElement) => void;
 export interface ThemeScopeProps extends Partial<LobeThemeState> {
@@ -40,7 +41,7 @@ export interface LobeThemeScriptProps {
   appearance?: LobeAppearance | 'system';
   neutralColor?: NeutralColors;
   nonce?: string;
-  primaryColor?: PrimaryColors;
+  primaryColor?: LobePrimaryColor;
 }
 export declare const LobeThemeScript: ({ appearance, neutralColor, nonce, primaryColor }: LobeThemeScriptProps) => import("react").JSX.Element;
 //#endregion

package/es/styles/theme/scope.mjs

@@ -1,8 +1,10 @@
 "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 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/styles/theme/scope.tsx
 const ATTRIBUTES = [
 	"data-theme",
@@ -14,11 +16,23 @@ const toAttributes = ({ appearance, neutralColor, primaryColor }) => ({
 	"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);
 };
@@ -54,21 +68,26 @@ const ThemeScope = ({ appearance, children, className, neutralColor, primaryColo
 	const state = useMemo(() => ({
 		appearance: appearance ?? parent.appearance,
 		neutralColor: neutralColor ?? parent.neutralColor,
-		primaryColor: primaryColor ?? parent.primaryColor
+		primaryColor: normalizePrimary(primaryColor) ?? parent.primaryColor
 	}), [
 		appearance,
 		neutralColor,
 		primaryColor,
 		parent
 	]);
-	return /* @__PURE__ */ jsx(ThemeScopeContext, {
+	const customPrimary = isCustomPrimaryColor(state.primaryColor) ? state.primaryColor : void 0;
+	return /* @__PURE__ */ jsxs(ThemeScopeContext, {
 		value: state,
-		children: /* @__PURE__ */ jsx("div", {
+		children: [customPrimary && /* @__PURE__ */ jsx("style", {
+			href: customPrimaryStyleId(customPrimary),
+			precedence: "lobe-theme",
+			children: getCustomPrimaryCss(customPrimary)
+		}), /* @__PURE__ */ jsx("div", {
 			className,
 			style,
 			...toAttributes(state),
 			children
-		})
+		})]
 	});
 };
 const useThemeMode = () => {
@@ -133,10 +152,13 @@ const subscribeResponsive = (onChange) => {
 };
 const useResponsive = () => useSyncExternalStore(subscribeResponsive, getResponsiveSnapshot, () => SERVER_RESPONSIVE);
 const LobeThemeScript = ({ appearance, neutralColor, nonce, primaryColor }) => {
-	const script = `(function(a,p,n){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);}).apply(null,${JSON.stringify([
+	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,
-		primaryColor ?? null,
-		neutralColor ?? null
+		primary ?? null,
+		neutralColor ?? null,
+		...custom
 	])})`;
 	return /* @__PURE__ */ jsx("script", {
 		suppressHydrationWarning: true,

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

@@ -1 +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, PrimaryColors } from '../customTheme';\nimport { createLobeToken, type LobeToken } from './createLobeToken';\nimport { staticToken } from './token/static';\n\nexport type LobeAppearance = 'light' | 'dark';\n\nexport interface LobeThemeState {\n  appearance: LobeAppearance;\n  neutralColor?: NeutralColors;\n  primaryColor?: PrimaryColors;\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\nexport const setLobeTheme = (\n  state: Partial<LobeThemeState>,\n  root: HTMLElement = document.documentElement,\n) => {\n  const next = { ...readThemeState(root), ...state };\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 PrimaryColors) || 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: primaryColor ?? parent.primaryColor,\n    }),\n    [appearance, neutralColor, primaryColor, parent],\n  );\n\n  return (\n    <ThemeScopeContext value={state}>\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?: PrimaryColors;\n}\n\nexport const LobeThemeScript = ({\n  appearance,\n  neutralColor,\n  nonce,\n  primaryColor,\n}: LobeThemeScriptProps) => {\n  const args = JSON.stringify([appearance ?? null, primaryColor ?? null, neutralColor ?? null]);\n  const script = `(function(a,p,n){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);}).apply(null,${args})`;\n\n  return (\n    <script suppressHydrationWarning dangerouslySetInnerHTML={{ __html: script }} nonce={nonce} />\n  );\n};\n"],"mappings":"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"}
+{"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

@@ -1,4 +1,6 @@
+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

package/es/styles/theme/themeCss.mjs

@@ -1,12 +1,26 @@
+import { neutralColors, primaryColors } from "../customTheme.mjs";
 import { createLobeTokenGroups } from "./createLobeToken.mjs";
 import { toCssVarName, toCssVariables } from "../css.mjs";
-import { neutralColors, primaryColors } from "../customTheme.mjs";
 //#region src/styles/theme/themeCss.ts
 const v = (key) => `var(${toCssVarName(key)})`;
 const ring = {
 	dark: "0 0 0 1px rgb(255 255 255 / 18%)",
 	light: "0 0 0 1px rgb(0 0 0 / 5%)"
 };
+const surface = {
+	dark: {
+		"--lobe-fill-border": v("colorFillSecondary"),
+		"--lobe-fill-border-strong": v("colorFill"),
+		"--lobe-table-cell-bg": "transparent",
+		"--lobe-table-surface": v("colorFillQuaternary")
+	},
+	light: {
+		"--lobe-fill-border": v("colorFill"),
+		"--lobe-fill-border-strong": `color-mix(in srgb, ${v("colorFill")}, ${v("colorText")} 15%)`,
+		"--lobe-table-cell-bg": "initial",
+		"--lobe-table-surface": "initial"
+	}
+};
 const rule = (selector, declarations) => `${selector} {\n${Object.entries(declarations).map(([name, value]) => `  ${name}: ${value};`).join("\n")}\n}`;
 const appearanceRule = (selector, appearance) => {
 	const { neutral, palette, primary, static: base } = createLobeTokenGroups({ appearance });
@@ -23,6 +37,7 @@ const appearanceRule = (selector, appearance) => {
 	return rule(selector, {
 		...toCssVariables(token),
 		"--lobe-ring": ring[appearance],
+		...surface[appearance],
 		"color-scheme": appearance
 	});
 };
@@ -34,6 +49,13 @@ const colorRules = (appearance) => [...Object.keys(primaryColors).map((primaryCo
 	appearance,
 	neutralColor
 }).neutral)))];
+const getCustomPrimaryCss = (color) => {
+	const hex = color.toLowerCase();
+	return ["light", "dark"].map((appearance) => rule(`[data-primary-color='${hex}']${appearanceSelector(appearance)}`, toCssVariables(createLobeTokenGroups({
+		appearance,
+		primaryColor: hex
+	}).primary))).join("\n\n");
+};
 const essentialCss = `@layer lobe-ui {
   .lobe-brand-loading path {
     fill: currentcolor;
@@ -313,6 +335,6 @@ const getThemeCss = () => cached ??= [
 ].join("\n\n");
 const getGlobalCss = () => `${layerOrder}\n\n${globalCss}`;
 //#endregion
-export { getGlobalCss, getThemeCss };
+export { getCustomPrimaryCss, getGlobalCss, getThemeCss };
 
 //# sourceMappingURL=themeCss.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"themeCss.mjs","names":[],"sources":["../../../src/styles/theme/themeCss.ts"],"sourcesContent":["import { toCssVariables, toCssVarName } from '../css';\nimport { neutralColors, primaryColors } from '../customTheme';\nimport { createLobeTokenGroups } from './createLobeToken';\nimport type { LobeAppearance } from './scope';\n\nconst v = (key: string) => `var(${toCssVarName(key)})`;\n\nconst ring: Record<LobeAppearance, string> = {\n  dark: '0 0 0 1px rgb(255 255 255 / 18%)',\n  light: '0 0 0 1px rgb(0 0 0 / 5%)',\n};\n\nconst rule = (selector: string, declarations: Record<string, number | string>) =>\n  `${selector} {\\n${Object.entries(declarations)\n    .map(([name, value]) => `  ${name}: ${value};`)\n    .join('\\n')}\\n}`;\n\nconst appearanceRule = (selector: string, appearance: LobeAppearance) => {\n  const { neutral, palette, primary, static: base } = createLobeTokenGroups({ appearance });\n  const token =\n    appearance === 'light'\n      ? { ...base, ...palette, ...primary, ...neutral }\n      : { ...palette, ...primary, ...neutral };\n\n  return rule(selector, {\n    ...toCssVariables(token),\n    '--lobe-ring': ring[appearance],\n    'color-scheme': appearance,\n  });\n};\n\nconst appearanceSelector = (appearance: LobeAppearance) =>\n  appearance === 'dark' ? \"[data-theme='dark']\" : \":not([data-theme='dark'])\";\n\nconst colorRules = (appearance: LobeAppearance) => [\n  ...(Object.keys(primaryColors) as (keyof typeof primaryColors)[]).map((primaryColor) =>\n    rule(\n      `[data-primary-color='${primaryColor}']${appearanceSelector(appearance)}`,\n      toCssVariables(createLobeTokenGroups({ appearance, primaryColor }).primary),\n    ),\n  ),\n  ...(Object.keys(neutralColors) as (keyof typeof neutralColors)[]).map((neutralColor) =>\n    rule(\n      `[data-neutral-color='${neutralColor}']${appearanceSelector(appearance)}`,\n      toCssVariables(createLobeTokenGroups({ appearance, neutralColor }).neutral),\n    ),\n  ),\n];\n\nconst essentialCss = `@layer lobe-ui {\n  .lobe-brand-loading path {\n    fill: currentcolor;\n    fill-opacity: 0;\n    stroke: currentcolor;\n    stroke-dasharray: 1000;\n    stroke-dashoffset: 1000;\n    stroke-width: 0.25em;\n\n    animation:\n      draw 2s cubic-bezier(0.4, 0, 0.2, 1) infinite,\n      fill 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n}\n\n@layer lobe-popup {\n  .lobe-context-trigger[data-popup-open],\n  .lobe-dropdown-menu-trigger[data-popup-open] {\n    background: ${v('colorFillTertiary')};\n  }\n}\n\n@layer lobe-base {\n  :where(body, body [data-theme]) {\n    color: ${v('colorText')};\n    font-family: ${v('fontFamily')};\n    font-size: ${v('fontSize')};\n    line-height: ${v('lineHeight')};\n  }\n\n  :where(body) :where(a) {\n    cursor: pointer;\n\n    color: ${v('colorLink')};\n    text-decoration: none;\n\n    background-color: transparent;\n    outline: none;\n\n    transition: color ${v('motionDurationSlow')};\n  }\n\n  :where(body) :where(a):hover {\n    color: ${v('colorLinkHover')};\n  }\n\n  :where(body) :where(a):active {\n    color: ${v('colorLinkActive')};\n  }\n\n  :where(body) :where(a):focus-visible {\n    outline: ${v('lineWidthFocus')} solid ${v('colorPrimaryBorder')};\n    outline-offset: 1px;\n  }\n\n  :where(body) :where(a)[disabled] {\n    cursor: not-allowed;\n    color: ${v('colorTextDisabled')};\n  }\n\n  :where(.lobe-flex) {\n    --lobe-flex: 0 1 auto;\n    --lobe-flex-direction: column;\n    --lobe-flex-wrap: nowrap;\n    --lobe-flex-justify: flex-start;\n    --lobe-flex-align: stretch;\n    --lobe-flex-width: auto;\n    --lobe-flex-height: auto;\n    --lobe-flex-padding: 0;\n    --lobe-flex-padding-inline: var(--lobe-flex-padding);\n    --lobe-flex-padding-block: var(--lobe-flex-padding);\n    --lobe-flex-gap: 0;\n\n    display: flex;\n    flex: var(--lobe-flex);\n    flex-flow: var(--lobe-flex-direction) var(--lobe-flex-wrap);\n    gap: var(--lobe-flex-gap);\n    align-items: var(--lobe-flex-align);\n    justify-content: var(--lobe-flex-justify);\n\n    width: var(--lobe-flex-width);\n    height: var(--lobe-flex-height);\n    padding: var(--lobe-flex-padding);\n    padding-block: var(--lobe-flex-padding-block);\n    padding-inline: var(--lobe-flex-padding-inline);\n  }\n\n  .lobe-flex-hidden {\n    display: none;\n  }\n}\n\n@keyframes draw {\n  0% {\n    stroke-dashoffset: 1000;\n  }\n\n  100% {\n    stroke-dashoffset: 0;\n  }\n}\n\n@keyframes fill {\n  30% {\n    fill-opacity: 0.05;\n  }\n\n  100% {\n    fill-opacity: 1;\n  }\n}`;\n\nconst globalCss = `@layer lobe-base {\n  :root {\n    --font-settings: 'cv01', 'tnum', 'kern';\n    --font-variations: 'opsz' auto, tabular-nums;\n\n    font-synthesis: style;\n    text-autospace: normal;\n  }\n\n  html {\n    overscroll-behavior: none;\n  }\n\n  body {\n    overflow: hidden auto;\n\n    min-height: 100vh;\n    margin: 0;\n    padding: 0;\n\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    font-optical-sizing: auto;\n    font-kerning: normal;\n    font-variant-ligatures: common-ligatures contextual;\n    font-variant-numeric: tabular-nums;\n    font-size-adjust: from-font;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    text-wrap: pretty;\n    text-size-adjust: 100%;\n    text-rendering: optimizelegibility;\n    overflow-wrap: anywhere;\n    vertical-align: baseline;\n\n    background-color: ${v('colorBgLayout')};\n\n    font-synthesis: style;\n\n    -webkit-overflow-scrolling: touch;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  html,\n  body {\n    width: 100%;\n    height: 100%;\n  }\n\n  [tabindex='-1']:focus {\n    outline: none;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin-block: 0 0.5em;\n    font-weight: 500;\n  }\n\n  p,\n  ol,\n  ul,\n  dl,\n  pre {\n    margin-block: 0 1em;\n  }\n\n  ol ol,\n  ul ul,\n  ol ul,\n  ul ol {\n    margin-block-end: 0;\n  }\n\n  dd {\n    margin-block-end: 0.5em;\n    margin-inline-start: 0;\n  }\n\n  blockquote,\n  figure {\n    margin-block: 0 1em;\n    margin-inline: 0;\n  }\n\n  img {\n    border-style: none;\n    vertical-align: middle;\n  }\n\n  table {\n    border-collapse: collapse;\n  }\n\n  input,\n  button,\n  select,\n  optgroup,\n  textarea {\n    margin: 0;\n\n    font-family: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  textarea {\n    resize: vertical;\n    overflow: auto;\n  }\n\n  fieldset {\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: ${v('fontFamilyCode')} !important;\n    font-feature-settings:\n      'liga' 0,\n      'calt' 0;\n    font-variant-ligatures: none;\n\n    span {\n      font-family: ${v('fontFamilyCode')} !important;\n    }\n  }\n\n  ::selection {\n    color: #000;\n    background: ${v('yellow9')};\n\n    -webkit-text-fill-color: unset !important;\n  }\n\n  * {\n    scrollbar-color: ${v('colorFill')} transparent;\n    scrollbar-width: thin;\n    box-sizing: border-box;\n    vertical-align: baseline;\n  }\n}`;\n\nconst layerOrder = '@layer lobe-base, lobe-popup, lobe-ui;';\n\nlet cached: string | undefined;\n\nexport const getThemeCss = () =>\n  (cached ??= [\n    layerOrder,\n    appearanceRule(\":root, [data-theme='light']\", 'light'),\n    appearanceRule(\"[data-theme='dark']\", 'dark'),\n    ...colorRules('light'),\n    ...colorRules('dark'),\n    essentialCss,\n  ].join('\\n\\n'));\n\nexport const getGlobalCss = () => `${layerOrder}\\n\\n${globalCss}`;\n"],"mappings":";;;;AAKA,MAAM,KAAK,QAAgB,OAAO,aAAa,GAAG,EAAE;AAEpD,MAAM,OAAuC;CAC3C,MAAM;CACN,OAAO;AACT;AAEA,MAAM,QAAQ,UAAkB,iBAC9B,GAAG,SAAS,MAAM,OAAO,QAAQ,YAAY,CAAC,CAC3C,KAAK,CAAC,MAAM,WAAW,KAAK,KAAK,IAAI,MAAM,EAAE,CAAC,CAC9C,KAAK,IAAI,EAAE;AAEhB,MAAM,kBAAkB,UAAkB,eAA+B;CACvE,MAAM,EAAE,SAAS,SAAS,SAAS,QAAQ,SAAS,sBAAsB,EAAE,WAAW,CAAC;CACxF,MAAM,QACJ,eAAe,UACX;EAAE,GAAG;EAAM,GAAG;EAAS,GAAG;EAAS,GAAG;CAAQ,IAC9C;EAAE,GAAG;EAAS,GAAG;EAAS,GAAG;CAAQ;CAE3C,OAAO,KAAK,UAAU;EACpB,GAAG,eAAe,KAAK;EACvB,eAAe,KAAK;EACpB,gBAAgB;CAClB,CAAC;AACH;AAEA,MAAM,sBAAsB,eAC1B,eAAe,SAAS,wBAAwB;AAElD,MAAM,cAAc,eAA+B,CACjD,GAAI,OAAO,KAAK,aAAa,CAAC,CAAoC,KAAK,iBACrE,KACE,wBAAwB,aAAa,IAAI,mBAAmB,UAAU,KACtE,eAAe,sBAAsB;CAAE;CAAY;AAAa,CAAC,CAAC,CAAC,OAAO,CAC5E,CACF,GACA,GAAI,OAAO,KAAK,aAAa,CAAC,CAAoC,KAAK,iBACrE,KACE,wBAAwB,aAAa,IAAI,mBAAmB,UAAU,KACtE,eAAe,sBAAsB;CAAE;CAAY;AAAa,CAAC,CAAC,CAAC,OAAO,CAC5E,CACF,CACF;AAEA,MAAM,eAAe;;;;;;;;;;;;;;;;;;kBAkBH,EAAE,mBAAmB,EAAE;;;;;;aAM5B,EAAE,WAAW,EAAE;mBACT,EAAE,YAAY,EAAE;iBAClB,EAAE,UAAU,EAAE;mBACZ,EAAE,YAAY,EAAE;;;;;;aAMtB,EAAE,WAAW,EAAE;;;;;;wBAMJ,EAAE,oBAAoB,EAAE;;;;aAInC,EAAE,gBAAgB,EAAE;;;;aAIpB,EAAE,iBAAiB,EAAE;;;;eAInB,EAAE,gBAAgB,EAAE,SAAS,EAAE,oBAAoB,EAAE;;;;;;aAMvD,EAAE,mBAAmB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDpC,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAmCM,EAAE,eAAe,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAgGxB,EAAE,gBAAgB,EAAE;;;;;;;qBAOlB,EAAE,gBAAgB,EAAE;;;;;;kBAMvB,EAAE,SAAS,EAAE;;;;;;uBAMR,EAAE,WAAW,EAAE;;;;;;AAOtC,MAAM,aAAa;AAEnB,IAAI;AAEJ,MAAa,oBACV,WAAW;CACV;CACA,eAAe,+BAA+B,OAAO;CACrD,eAAe,uBAAuB,MAAM;CAC5C,GAAG,WAAW,OAAO;CACrB,GAAG,WAAW,MAAM;CACpB;AACF,CAAC,CAAC,KAAK,MAAM;AAEf,MAAa,qBAAqB,GAAG,WAAW,MAAM"}
+{"version":3,"file":"themeCss.mjs","names":[],"sources":["../../../src/styles/theme/themeCss.ts"],"sourcesContent":["import { toCssVariables, toCssVarName } from '../css';\nimport { neutralColors, primaryColors } from '../customTheme';\nimport { createLobeTokenGroups } from './createLobeToken';\nimport type { CustomPrimaryColor } from './customPrimary';\nimport type { LobeAppearance } from './scope';\n\nconst v = (key: string) => `var(${toCssVarName(key)})`;\n\nconst ring: Record<LobeAppearance, string> = {\n  dark: '0 0 0 1px rgb(255 255 255 / 18%)',\n  light: '0 0 0 1px rgb(0 0 0 / 5%)',\n};\n\n/* `initial` makes a light scope nested in a dark one fall back to each variant's own fill\n   instead of inheriting the dark table surface. */\nconst surface: Record<LobeAppearance, Record<string, string>> = {\n  dark: {\n    '--lobe-fill-border': v('colorFillSecondary'),\n    '--lobe-fill-border-strong': v('colorFill'),\n    '--lobe-table-cell-bg': 'transparent',\n    '--lobe-table-surface': v('colorFillQuaternary'),\n  },\n  light: {\n    '--lobe-fill-border': v('colorFill'),\n    '--lobe-fill-border-strong': `color-mix(in srgb, ${v('colorFill')}, ${v('colorText')} 15%)`,\n    '--lobe-table-cell-bg': 'initial',\n    '--lobe-table-surface': 'initial',\n  },\n};\n\nconst rule = (selector: string, declarations: Record<string, number | string>) =>\n  `${selector} {\\n${Object.entries(declarations)\n    .map(([name, value]) => `  ${name}: ${value};`)\n    .join('\\n')}\\n}`;\n\nconst appearanceRule = (selector: string, appearance: LobeAppearance) => {\n  const { neutral, palette, primary, static: base } = createLobeTokenGroups({ appearance });\n  const token =\n    appearance === 'light'\n      ? { ...base, ...palette, ...primary, ...neutral }\n      : { ...palette, ...primary, ...neutral };\n\n  return rule(selector, {\n    ...toCssVariables(token),\n    '--lobe-ring': ring[appearance],\n    ...surface[appearance],\n    'color-scheme': appearance,\n  });\n};\n\nconst appearanceSelector = (appearance: LobeAppearance) =>\n  appearance === 'dark' ? \"[data-theme='dark']\" : \":not([data-theme='dark'])\";\n\nconst colorRules = (appearance: LobeAppearance) => [\n  ...(Object.keys(primaryColors) as (keyof typeof primaryColors)[]).map((primaryColor) =>\n    rule(\n      `[data-primary-color='${primaryColor}']${appearanceSelector(appearance)}`,\n      toCssVariables(createLobeTokenGroups({ appearance, primaryColor }).primary),\n    ),\n  ),\n  ...(Object.keys(neutralColors) as (keyof typeof neutralColors)[]).map((neutralColor) =>\n    rule(\n      `[data-neutral-color='${neutralColor}']${appearanceSelector(appearance)}`,\n      toCssVariables(createLobeTokenGroups({ appearance, neutralColor }).neutral),\n    ),\n  ),\n];\n\nexport const getCustomPrimaryCss = (color: CustomPrimaryColor) => {\n  const hex = color.toLowerCase();\n  return (['light', 'dark'] as const)\n    .map((appearance) =>\n      rule(\n        `[data-primary-color='${hex}']${appearanceSelector(appearance)}`,\n        toCssVariables(\n          createLobeTokenGroups({ appearance, primaryColor: hex as CustomPrimaryColor }).primary,\n        ),\n      ),\n    )\n    .join('\\n\\n');\n};\n\nconst essentialCss = `@layer lobe-ui {\n  .lobe-brand-loading path {\n    fill: currentcolor;\n    fill-opacity: 0;\n    stroke: currentcolor;\n    stroke-dasharray: 1000;\n    stroke-dashoffset: 1000;\n    stroke-width: 0.25em;\n\n    animation:\n      draw 2s cubic-bezier(0.4, 0, 0.2, 1) infinite,\n      fill 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n  }\n}\n\n@layer lobe-popup {\n  .lobe-context-trigger[data-popup-open],\n  .lobe-dropdown-menu-trigger[data-popup-open] {\n    background: ${v('colorFillTertiary')};\n  }\n}\n\n@layer lobe-base {\n  :where(body, body [data-theme]) {\n    color: ${v('colorText')};\n    font-family: ${v('fontFamily')};\n    font-size: ${v('fontSize')};\n    line-height: ${v('lineHeight')};\n  }\n\n  :where(body) :where(a) {\n    cursor: pointer;\n\n    color: ${v('colorLink')};\n    text-decoration: none;\n\n    background-color: transparent;\n    outline: none;\n\n    transition: color ${v('motionDurationSlow')};\n  }\n\n  :where(body) :where(a):hover {\n    color: ${v('colorLinkHover')};\n  }\n\n  :where(body) :where(a):active {\n    color: ${v('colorLinkActive')};\n  }\n\n  :where(body) :where(a):focus-visible {\n    outline: ${v('lineWidthFocus')} solid ${v('colorPrimaryBorder')};\n    outline-offset: 1px;\n  }\n\n  :where(body) :where(a)[disabled] {\n    cursor: not-allowed;\n    color: ${v('colorTextDisabled')};\n  }\n\n  :where(.lobe-flex) {\n    --lobe-flex: 0 1 auto;\n    --lobe-flex-direction: column;\n    --lobe-flex-wrap: nowrap;\n    --lobe-flex-justify: flex-start;\n    --lobe-flex-align: stretch;\n    --lobe-flex-width: auto;\n    --lobe-flex-height: auto;\n    --lobe-flex-padding: 0;\n    --lobe-flex-padding-inline: var(--lobe-flex-padding);\n    --lobe-flex-padding-block: var(--lobe-flex-padding);\n    --lobe-flex-gap: 0;\n\n    display: flex;\n    flex: var(--lobe-flex);\n    flex-flow: var(--lobe-flex-direction) var(--lobe-flex-wrap);\n    gap: var(--lobe-flex-gap);\n    align-items: var(--lobe-flex-align);\n    justify-content: var(--lobe-flex-justify);\n\n    width: var(--lobe-flex-width);\n    height: var(--lobe-flex-height);\n    padding: var(--lobe-flex-padding);\n    padding-block: var(--lobe-flex-padding-block);\n    padding-inline: var(--lobe-flex-padding-inline);\n  }\n\n  .lobe-flex-hidden {\n    display: none;\n  }\n}\n\n@keyframes draw {\n  0% {\n    stroke-dashoffset: 1000;\n  }\n\n  100% {\n    stroke-dashoffset: 0;\n  }\n}\n\n@keyframes fill {\n  30% {\n    fill-opacity: 0.05;\n  }\n\n  100% {\n    fill-opacity: 1;\n  }\n}`;\n\nconst globalCss = `@layer lobe-base {\n  :root {\n    --font-settings: 'cv01', 'tnum', 'kern';\n    --font-variations: 'opsz' auto, tabular-nums;\n\n    font-synthesis: style;\n    text-autospace: normal;\n  }\n\n  html {\n    overscroll-behavior: none;\n  }\n\n  body {\n    overflow: hidden auto;\n\n    min-height: 100vh;\n    margin: 0;\n    padding: 0;\n\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    font-optical-sizing: auto;\n    font-kerning: normal;\n    font-variant-ligatures: common-ligatures contextual;\n    font-variant-numeric: tabular-nums;\n    font-size-adjust: from-font;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    text-wrap: pretty;\n    text-size-adjust: 100%;\n    text-rendering: optimizelegibility;\n    overflow-wrap: anywhere;\n    vertical-align: baseline;\n\n    background-color: ${v('colorBgLayout')};\n\n    font-synthesis: style;\n\n    -webkit-overflow-scrolling: touch;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  html,\n  body {\n    width: 100%;\n    height: 100%;\n  }\n\n  [tabindex='-1']:focus {\n    outline: none;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin-block: 0 0.5em;\n    font-weight: 500;\n  }\n\n  p,\n  ol,\n  ul,\n  dl,\n  pre {\n    margin-block: 0 1em;\n  }\n\n  ol ol,\n  ul ul,\n  ol ul,\n  ul ol {\n    margin-block-end: 0;\n  }\n\n  dd {\n    margin-block-end: 0.5em;\n    margin-inline-start: 0;\n  }\n\n  blockquote,\n  figure {\n    margin-block: 0 1em;\n    margin-inline: 0;\n  }\n\n  img {\n    border-style: none;\n    vertical-align: middle;\n  }\n\n  table {\n    border-collapse: collapse;\n  }\n\n  input,\n  button,\n  select,\n  optgroup,\n  textarea {\n    margin: 0;\n\n    font-family: inherit;\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  textarea {\n    resize: vertical;\n    overflow: auto;\n  }\n\n  fieldset {\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: ${v('fontFamilyCode')} !important;\n    font-feature-settings:\n      'liga' 0,\n      'calt' 0;\n    font-variant-ligatures: none;\n\n    span {\n      font-family: ${v('fontFamilyCode')} !important;\n    }\n  }\n\n  ::selection {\n    color: #000;\n    background: ${v('yellow9')};\n\n    -webkit-text-fill-color: unset !important;\n  }\n\n  * {\n    scrollbar-color: ${v('colorFill')} transparent;\n    scrollbar-width: thin;\n    box-sizing: border-box;\n    vertical-align: baseline;\n  }\n}`;\n\nconst layerOrder = '@layer lobe-base, lobe-popup, lobe-ui;';\n\nlet cached: string | undefined;\n\nexport const getThemeCss = () =>\n  (cached ??= [\n    layerOrder,\n    appearanceRule(\":root, [data-theme='light']\", 'light'),\n    appearanceRule(\"[data-theme='dark']\", 'dark'),\n    ...colorRules('light'),\n    ...colorRules('dark'),\n    essentialCss,\n  ].join('\\n\\n'));\n\nexport const getGlobalCss = () => `${layerOrder}\\n\\n${globalCss}`;\n"],"mappings":"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"}

package/es/styles/theme/token/primary.mjs

@@ -1,12 +1,16 @@
 import primary from "../../../color/colors/primary.mjs";
 import { colorScales } from "../../../color/colors/index.mjs";
 import { generateColorPalette } from "../generateColorPalette.mjs";
+import { generatePrimaryScale, isCustomPrimaryColor } from "../customPrimary.mjs";
 //#region src/styles/theme/token/primary.ts
+const resolveScale = (primaryColor) => {
+	if (isCustomPrimaryColor(primaryColor)) return generatePrimaryScale(primaryColor);
+	return primaryColor && colorScales[primaryColor] || primary;
+};
 const createPrimaryToken = (appearance, primaryColor) => {
-	const scale = primaryColor && colorScales[primaryColor] || primary;
 	const token = generateColorPalette({
 		appearance,
-		scale,
+		scale: resolveScale(primaryColor),
 		type: "Primary"
 	});
 	return {

package/es/styles/theme/token/primary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"primary.mjs","names":[],"sources":["../../../../src/styles/theme/token/primary.ts"],"sourcesContent":["import { colorScales, primary } from '@/color/colors';\n\nimport type { PrimaryColors } from '../../customTheme';\nimport { generateColorPalette } from '../generateColorPalette';\n\nexport const createPrimaryToken = (appearance: 'light' | 'dark', primaryColor?: PrimaryColors) => {\n  const scale = (primaryColor && colorScales[primaryColor]) || primary;\n  const token = generateColorPalette({ appearance, scale, type: 'Primary' });\n\n  return {\n    ...token,\n    controlItemBgActive: token.colorPrimaryBg,\n    controlItemBgActiveHover: token.colorPrimaryBgHover,\n  };\n};\n"],"mappings":";;;;AAKA,MAAa,sBAAsB,YAA8B,iBAAiC;CAChG,MAAM,QAAS,gBAAgB,YAAY,iBAAkB;CAC7D,MAAM,QAAQ,qBAAqB;EAAE;EAAY;EAAO,MAAM;CAAU,CAAC;CAEzE,OAAO;EACL,GAAG;EACH,qBAAqB,MAAM;EAC3B,0BAA0B,MAAM;CAClC;AACF"}
+{"version":3,"file":"primary.mjs","names":[],"sources":["../../../../src/styles/theme/token/primary.ts"],"sourcesContent":["import { colorScales, primary } from '@/color/colors';\n\nimport {\n  generatePrimaryScale,\n  isCustomPrimaryColor,\n  type LobePrimaryColor,\n} from '../customPrimary';\nimport { generateColorPalette } from '../generateColorPalette';\n\nconst resolveScale = (primaryColor?: LobePrimaryColor) => {\n  if (isCustomPrimaryColor(primaryColor)) return generatePrimaryScale(primaryColor);\n  return (primaryColor && colorScales[primaryColor]) || primary;\n};\n\nexport const createPrimaryToken = (\n  appearance: 'light' | 'dark',\n  primaryColor?: LobePrimaryColor,\n) => {\n  const token = generateColorPalette({\n    appearance,\n    scale: resolveScale(primaryColor),\n    type: 'Primary',\n  });\n\n  return {\n    ...token,\n    controlItemBgActive: token.colorPrimaryBg,\n    controlItemBgActiveHover: token.colorPrimaryBgHover,\n  };\n};\n"],"mappings":";;;;;AASA,MAAM,gBAAgB,iBAAoC;CACxD,IAAI,qBAAqB,YAAY,GAAG,OAAO,qBAAqB,YAAY;CAChF,OAAQ,gBAAgB,YAAY,iBAAkB;AACxD;AAEA,MAAa,sBACX,YACA,iBACG;CACH,MAAM,QAAQ,qBAAqB;EACjC;EACA,OAAO,aAAa,YAAY;EAChC,MAAM;CACR,CAAC;CAED,OAAO;EACL,GAAG;EACH,qBAAqB,MAAM;EAC3B,0BAA0B,MAAM;CAClC;AACF"}

package/es/theme.css

@@ -785,6 +785,10 @@
   --lobe-control-item-bg-hover: rgba(0, 0, 0, 0.03);
   --lobe-control-tmp-outline: rgba(0, 0, 0, 0.015);
   --lobe-ring: 0 0 0 1px rgb(0 0 0 / 5%);
+  --lobe-fill-border: var(--lobe-color-fill);
+  --lobe-fill-border-strong: color-mix(in srgb, var(--lobe-color-fill), var(--lobe-color-text) 15%);
+  --lobe-table-cell-bg: initial;
+  --lobe-table-surface: initial;
   color-scheme: light;
 }
 
@@ -1458,6 +1462,10 @@
   --lobe-control-item-bg-hover: rgba(255, 255, 255, 0.06);
   --lobe-control-tmp-outline: rgba(255, 255, 255, 0.02);
   --lobe-ring: 0 0 0 1px rgb(255 255 255 / 18%);
+  --lobe-fill-border: var(--lobe-color-fill-secondary);
+  --lobe-fill-border-strong: var(--lobe-color-fill);
+  --lobe-table-cell-bg: transparent;
+  --lobe-table-surface: var(--lobe-color-fill-quaternary);
   color-scheme: dark;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "6.0.0-beta.6",
+  "version": "6.0.0-beta.8",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -85,6 +85,10 @@
       "types": "./es/FormKit/index.d.mts",
       "import": "./es/FormKit/index.mjs"
     },
+    "./pro-table": {
+      "types": "./es/ProTable/index.d.mts",
+      "import": "./es/ProTable/index.mjs"
+    },
     "./global.css": "./es/global.css",
     "./theme.css": "./es/theme.css",
     "./style.css": "./es/style.css",
@@ -149,6 +153,7 @@
     "@stylexjs/stylex": "0.19.1",
     "@tanstack/form-core": "^1.33.5",
     "@tanstack/react-table": "^9.2.8",
+    "@tanstack/react-virtual": "^3.14.18",
     "beautiful-mermaid": "^1.1.3",
     "chroma-js": "^3.2.0",
     "clsx": "^2.1.1",