@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/theme-customize/contrast.js

@@ -0,0 +1,251 @@
+import { CONTRAST_AA, contrastRatio } from "../utils/data/color.js";
+//#region src/theme-customize/contrast.ts
+/**
+* 主题颜色要满足的对比度（WCAG 2.2 AA）：哪些文字放在哪些底色上、各要多少。
+* pnpm themes:check 按它检查全部内置主题；主题编辑器按它实时提示改出来的配色。
+*/
+/** 文字 4.5:1；大字、图形与界面部件（焦点环、选中的勾选框）3:1；占位文字按 3:1（同多数组件库） */
+var TEXT = CONTRAST_AA.text;
+var UI = CONTRAST_AA.ui;
+/** 要检查的颜色组合 */
+var CONTRAST_PAIRS = [
+	...[
+		"background",
+		"surface",
+		"surfaceMuted",
+		"surfaceRaised",
+		"fill",
+		"fillHover",
+		"fillActive"
+	].map((bg) => [
+		"text",
+		bg,
+		TEXT,
+		"正文"
+	]),
+	...[
+		"background",
+		"surface",
+		"surfaceMuted",
+		"surfaceRaised",
+		"fill"
+	].map((bg) => [
+		"textMuted",
+		bg,
+		TEXT,
+		"次要文字"
+	]),
+	[
+		"textPlaceholder",
+		"surface",
+		UI,
+		"占位文字"
+	],
+	[
+		"accentContrast",
+		"accent",
+		TEXT,
+		"主按钮"
+	],
+	[
+		"accentContrast",
+		"accentHover",
+		TEXT,
+		"主按钮悬停"
+	],
+	...[
+		"background",
+		"surface",
+		"surfaceRaised",
+		"accentSoft",
+		"accentSoftHover"
+	].map((bg) => [
+		"accentText",
+		bg,
+		TEXT,
+		"链接、选中项"
+	]),
+	[
+		"dangerContrast",
+		"danger",
+		TEXT,
+		"危险按钮"
+	],
+	[
+		"dangerContrast",
+		"dangerHover",
+		TEXT,
+		"危险按钮悬停"
+	],
+	...[
+		"background",
+		"surface",
+		"dangerSoft",
+		"dangerSoftHover"
+	].map((bg) => [
+		"dangerText",
+		bg,
+		TEXT,
+		"错误文字"
+	]),
+	...[
+		["successText", "successSoft"],
+		["warningText", "warningSoft"],
+		["infoText", "infoSoft"]
+	].flatMap(([fg, soft]) => [
+		[
+			fg,
+			soft,
+			TEXT,
+			"提示条"
+		],
+		[
+			fg,
+			"background",
+			TEXT,
+			"提示文字"
+		],
+		[
+			fg,
+			"surface",
+			TEXT,
+			"提示文字"
+		]
+	]),
+	...[
+		"success",
+		"warning",
+		"info"
+	].flatMap((tone) => [
+		[
+			`${tone}Contrast`,
+			tone,
+			TEXT,
+			"状态实色（按钮、实底徽标）"
+		],
+		[
+			`${tone}Contrast`,
+			`${tone}Hover`,
+			TEXT,
+			"状态实色悬停"
+		],
+		[
+			`${tone}Text`,
+			`${tone}SoftHover`,
+			TEXT,
+			"状态浅底悬停"
+		]
+	]),
+	[
+		"inverseText",
+		"inverseSurface",
+		TEXT,
+		"反色表面"
+	],
+	...[
+		"codeKeyword",
+		"codeString",
+		"codeNumber",
+		"codeFunction",
+		"codeType",
+		"codeComment",
+		"codeTag",
+		"codeAttribute"
+	].flatMap((fg) => [
+		"surfaceMuted",
+		"fill",
+		"codeInserted",
+		"codeDeleted"
+	].map((bg) => [
+		fg,
+		bg,
+		TEXT,
+		"代码高亮"
+	])),
+	[
+		"text",
+		"codeInserted",
+		TEXT,
+		"diff 新增行"
+	],
+	[
+		"text",
+		"codeDeleted",
+		TEXT,
+		"diff 删除行"
+	],
+	[
+		"text",
+		"selection",
+		TEXT,
+		"选中的文字"
+	],
+	[
+		"text",
+		"highlight",
+		TEXT,
+		"高亮标记"
+	],
+	[
+		"focusRing",
+		"background",
+		UI,
+		"焦点环"
+	],
+	[
+		"focusRing",
+		"surface",
+		UI,
+		"焦点环"
+	],
+	...[
+		"accent",
+		"inverseSurface",
+		"infoText",
+		"successText",
+		"warningText",
+		"dangerText"
+	].flatMap((fg) => [[
+		fg,
+		"surface",
+		UI,
+		"选中的勾选框、开关"
+	], [
+		fg,
+		"fill",
+		UI,
+		"滑块、进度条"
+	]]),
+	...Array.from({ length: 8 }, (_, index) => `chart${index + 1}`).flatMap((fg) => [[
+		fg,
+		"background",
+		UI,
+		"图表系列"
+	], [
+		fg,
+		"surface",
+		UI,
+		"图表系列"
+	]])
+];
+/**
+* 按 CONTRAST_PAIRS 检查一套配色；read 读出 token 的取值（主题文件里的字面量，或页面上算出来的 CSS 变量）。
+* 半透明的背景叠在 background（页面背景）上算
+*/
+function checkContrast(read) {
+	const page = read("background");
+	return CONTRAST_PAIRS.flatMap(([foreground, background, minimum, label]) => {
+		const ratio = contrastRatio(read(foreground), read(background), page);
+		return ratio < minimum ? [{
+			foreground,
+			background,
+			ratio,
+			minimum,
+			label
+		}] : [];
+	});
+}
+//#endregion
+export { CONTRAST_PAIRS, checkContrast };
+
+//# sourceMappingURL=contrast.js.map

package/dist/theme-customize/contrast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contrast.js","names":[],"sources":["../../src/theme-customize/contrast.ts"],"sourcesContent":["/**\n * 主题颜色要满足的对比度（WCAG 2.2 AA）：哪些文字放在哪些底色上、各要多少。\n * pnpm themes:check 按它检查全部内置主题；主题编辑器按它实时提示改出来的配色。\n */\nimport { CONTRAST_AA, contrastRatio } from '../utils/data/color';\n\n/** 文字 4.5:1；大字、图形与界面部件（焦点环、选中的勾选框）3:1；占位文字按 3:1（同多数组件库） */\nconst TEXT = CONTRAST_AA.text;\nconst UI = CONTRAST_AA.ui;\n\n/** 要检查的一对颜色 token：[前景, 背景, 最低对比度, 说明] */\nexport type ContrastPair = readonly [\n  foreground: string,\n  background: string,\n  minimum: number,\n  label: string,\n];\n\n/** 要检查的颜色组合 */\nexport const CONTRAST_PAIRS: readonly ContrastPair[] = [\n  ...[\n    'background',\n    'surface',\n    'surfaceMuted',\n    'surfaceRaised',\n    'fill',\n    'fillHover',\n    'fillActive',\n  ].map((bg): ContrastPair => ['text', bg, TEXT, '正文']),\n  ...['background', 'surface', 'surfaceMuted', 'surfaceRaised', 'fill'].map((bg): ContrastPair => [\n    'textMuted',\n    bg,\n    TEXT,\n    '次要文字',\n  ]),\n  ['textPlaceholder', 'surface', UI, '占位文字'],\n  ['accentContrast', 'accent', TEXT, '主按钮'],\n  ['accentContrast', 'accentHover', TEXT, '主按钮悬停'],\n  ...['background', 'surface', 'surfaceRaised', 'accentSoft', 'accentSoftHover'].map(\n    (bg): ContrastPair => ['accentText', bg, TEXT, '链接、选中项'],\n  ),\n  ['dangerContrast', 'danger', TEXT, '危险按钮'],\n  ['dangerContrast', 'dangerHover', TEXT, '危险按钮悬停'],\n  ...['background', 'surface', 'dangerSoft', 'dangerSoftHover'].map((bg): ContrastPair => [\n    'dangerText',\n    bg,\n    TEXT,\n    '错误文字',\n  ]),\n  ...[\n    ['successText', 'successSoft'],\n    ['warningText', 'warningSoft'],\n    ['infoText', 'infoSoft'],\n  ].flatMap(([fg, soft]): ContrastPair[] => [\n    [fg, soft, TEXT, '提示条'],\n    [fg, 'background', TEXT, '提示文字'],\n    [fg, 'surface', TEXT, '提示文字'],\n  ]),\n  ...['success', 'warning', 'info'].flatMap((tone): ContrastPair[] => [\n    [`${tone}Contrast`, tone, TEXT, '状态实色（按钮、实底徽标）'],\n    [`${tone}Contrast`, `${tone}Hover`, TEXT, '状态实色悬停'],\n    [`${tone}Text`, `${tone}SoftHover`, TEXT, '状态浅底悬停'],\n  ]),\n  ['inverseText', 'inverseSurface', TEXT, '反色表面'],\n  // 代码块（surfaceMuted）、行内代码与高亮行（fill）、diff 的增删行上都有高亮的代码\n  ...[\n    'codeKeyword',\n    'codeString',\n    'codeNumber',\n    'codeFunction',\n    'codeType',\n    'codeComment',\n    'codeTag',\n    'codeAttribute',\n  ].flatMap((fg) =>\n    ['surfaceMuted', 'fill', 'codeInserted', 'codeDeleted'].map((bg): ContrastPair => [\n      fg,\n      bg,\n      TEXT,\n      '代码高亮',\n    ]),\n  ),\n  ['text', 'codeInserted', TEXT, 'diff 新增行'],\n  ['text', 'codeDeleted', TEXT, 'diff 删除行'],\n  ['text', 'selection', TEXT, '选中的文字'],\n  ['text', 'highlight', TEXT, '高亮标记'],\n  ['focusRing', 'background', UI, '焦点环'],\n  ['focusRing', 'surface', UI, '焦点环'],\n  // 选中的勾选框、开关、滑块与进度条的实底色（tone-styles.ts 的 toneFillStyles、Progress）：在表面与轨道上\n  ...['accent', 'inverseSurface', 'infoText', 'successText', 'warningText', 'dangerText'].flatMap(\n    (fg): ContrastPair[] => [\n      [fg, 'surface', UI, '选中的勾选框、开关'],\n      [fg, 'fill', UI, '滑块、进度条'],\n    ],\n  ),\n  ...Array.from({ length: 8 }, (_, index) => `chart${index + 1}`).flatMap((fg): ContrastPair[] => [\n    [fg, 'background', UI, '图表系列'],\n    [fg, 'surface', UI, '图表系列'],\n  ]),\n];\n\n/** 一处对比度不够的组合 */\nexport interface ContrastIssue {\n  /** 前景 token */\n  foreground: string;\n  /** 背景 token */\n  background: string;\n  /** 实际对比度 */\n  ratio: number;\n  /** 要求的最低对比度 */\n  minimum: number;\n  /** 用途说明 */\n  label: string;\n}\n\n/**\n * 按 CONTRAST_PAIRS 检查一套配色；read 读出 token 的取值（主题文件里的字面量，或页面上算出来的 CSS 变量）。\n * 半透明的背景叠在 background（页面背景）上算\n */\nexport function checkContrast(read: (token: string) => string): ContrastIssue[] {\n  const page = read('background');\n  return CONTRAST_PAIRS.flatMap(([foreground, background, minimum, label]) => {\n    const ratio = contrastRatio(read(foreground), read(background), page);\n    return ratio < minimum ? [{ foreground, background, ratio, minimum, label }] : [];\n  });\n}\n"],"mappings":";;;;;;;AAOA,IAAM,OAAO,YAAY;AACzB,IAAM,KAAK,YAAY;;AAWvB,IAAa,iBAA0C;CACrD,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,OAAqB;EAAC;EAAQ;EAAI;EAAM;CAAI,CAAC;CACpD,GAAG;EAAC;EAAc;EAAW;EAAgB;EAAiB;CAAM,CAAC,CAAC,KAAK,OAAqB;EAC9F;EACA;EACA;EACA;CACF,CAAC;CACD;EAAC;EAAmB;EAAW;EAAI;CAAM;CACzC;EAAC;EAAkB;EAAU;EAAM;CAAK;CACxC;EAAC;EAAkB;EAAe;EAAM;CAAO;CAC/C,GAAG;EAAC;EAAc;EAAW;EAAiB;EAAc;CAAiB,CAAC,CAAC,KAC5E,OAAqB;EAAC;EAAc;EAAI;EAAM;CAAQ,CACzD;CACA;EAAC;EAAkB;EAAU;EAAM;CAAM;CACzC;EAAC;EAAkB;EAAe;EAAM;CAAQ;CAChD,GAAG;EAAC;EAAc;EAAW;EAAc;CAAiB,CAAC,CAAC,KAAK,OAAqB;EACtF;EACA;EACA;EACA;CACF,CAAC;CACD,GAAG;EACD,CAAC,eAAe,aAAa;EAC7B,CAAC,eAAe,aAAa;EAC7B,CAAC,YAAY,UAAU;CACzB,CAAC,CAAC,SAAS,CAAC,IAAI,UAA0B;EACxC;GAAC;GAAI;GAAM;GAAM;EAAK;EACtB;GAAC;GAAI;GAAc;GAAM;EAAM;EAC/B;GAAC;GAAI;GAAW;GAAM;EAAM;CAC9B,CAAC;CACD,GAAG;EAAC;EAAW;EAAW;CAAM,CAAC,CAAC,SAAS,SAAyB;EAClE;GAAC,GAAG,KAAK;GAAW;GAAM;GAAM;EAAe;EAC/C;GAAC,GAAG,KAAK;GAAW,GAAG,KAAK;GAAQ;GAAM;EAAQ;EAClD;GAAC,GAAG,KAAK;GAAO,GAAG,KAAK;GAAY;GAAM;EAAQ;CACpD,CAAC;CACD;EAAC;EAAe;EAAkB;EAAM;CAAM;CAE9C,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,SAAS,OACT;EAAC;EAAgB;EAAQ;EAAgB;CAAa,CAAC,CAAC,KAAK,OAAqB;EAChF;EACA;EACA;EACA;CACF,CAAC,CACH;CACA;EAAC;EAAQ;EAAgB;EAAM;CAAU;CACzC;EAAC;EAAQ;EAAe;EAAM;CAAU;CACxC;EAAC;EAAQ;EAAa;EAAM;CAAO;CACnC;EAAC;EAAQ;EAAa;EAAM;CAAM;CAClC;EAAC;EAAa;EAAc;EAAI;CAAK;CACrC;EAAC;EAAa;EAAW;EAAI;CAAK;CAElC,GAAG;EAAC;EAAU;EAAkB;EAAY;EAAe;EAAe;CAAY,CAAC,CAAC,SACrF,OAAuB,CACtB;EAAC;EAAI;EAAW;EAAI;CAAW,GAC/B;EAAC;EAAI;EAAQ;EAAI;CAAQ,CAC3B,CACF;CACA,GAAG,MAAM,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,UAAU,QAAQ,QAAQ,GAAG,CAAC,CAAC,SAAS,OAAuB,CAC9F;EAAC;EAAI;EAAc;EAAI;CAAM,GAC7B;EAAC;EAAI;EAAW;EAAI;CAAM,CAC5B,CAAC;AACH;;;;;AAoBA,SAAgB,cAAc,MAAkD;CAC9E,MAAM,OAAO,KAAK,YAAY;CAC9B,OAAO,eAAe,SAAS,CAAC,YAAY,YAAY,SAAS,WAAW;EAC1E,MAAM,QAAQ,cAAc,KAAK,UAAU,GAAG,KAAK,UAAU,GAAG,IAAI;EACpE,OAAO,QAAQ,UAAU,CAAC;GAAE;GAAY;GAAY;GAAO;GAAS;EAAM,CAAC,IAAI,CAAC;CAClF,CAAC;AACH"}

package/dist/theme-customize/customize.d.ts

@@ -0,0 +1,65 @@
+import { type AccentScale, type NeutralScale } from './palette';
+import { type Theme, type ThemeOverrides } from '../config/theme/theme';
+/** 圆角档位：默认圆角的倍数 */
+export interface RadiusPresets {
+    /** 直角 */
+    none: unknown;
+    /** 小圆角（默认的 0.5 倍） */
+    small: unknown;
+    /** 默认 */
+    medium: unknown;
+    /** 大圆角（默认的 1.75 倍） */
+    large: unknown;
+}
+/** 字体搭配 */
+export interface FontPresets {
+    /** 正文与标题都是无衬线（默认） */
+    sans: unknown;
+    /** 标题用衬线，正文无衬线：书卷感，长文仍好读 */
+    serifHeadings: unknown;
+}
+/** 动效速度 */
+export interface MotionPresets {
+    /** 关掉过渡与动画 */
+    none: unknown;
+    /** 快（默认时长的 0.6 倍） */
+    fast: unknown;
+    /** 默认 */
+    normal: unknown;
+    /** 慢（默认时长的 1.5 倍） */
+    slow: unknown;
+}
+/** 主题定制的设置；不写的旋钮沿用主题本来的取值 */
+export interface ThemeSettings {
+    /** 品牌色（Radix 色阶） */
+    accent?: AccentScale;
+    /** 中性色（Radix 灰色色阶） */
+    neutral?: NeutralScale;
+    /** 圆角 */
+    radius?: keyof RadiusPresets;
+    /** 缩放：字号的倍数，0.9–1.1；间距、控件高度以 em 计，随字号一起缩放 */
+    scaling?: number;
+    /** 字体搭配 */
+    font?: keyof FontPresets;
+    /** 动效速度 */
+    motion?: keyof MotionPresets;
+}
+/** customizeTheme 的选项 */
+export interface CustomizeOptions {
+    /**
+     * 用户开启了“减少动态效果”：不覆盖动效时长。运行时覆盖写在行内样式上，
+     * 会盖过主题里“减少动态效果时为 0”的媒体查询
+     */
+    reducedMotion?: boolean;
+    /** 基础主题自己的圆角（radii 各档的 CSS 取值）：圆角档位按它缩放；不给时按默认主题的取值 */
+    radii?: Readonly<Record<string, string>>;
+}
+/** 设置换算成 token 覆盖；appearance 决定品牌色、中性色取亮色还是暗色色阶 */
+export declare function themeSettingsOverrides(settings: ThemeSettings, appearance: 'light' | 'dark', { reducedMotion, radii }?: CustomizeOptions): ThemeOverrides;
+/** 在一套主题上套用设置（名字后加 -custom，便于调试时认出来） */
+export declare function customizeTheme(base: Theme, settings: ThemeSettings, options?: CustomizeOptions): Theme;
+/**
+ * 生成套用这些设置的代码：`defineTheme(lightTheme, { … })`，可以直接粘贴到项目里。
+ * baseName 是代码里基础主题的变量名；导出的取值不受“减少动态效果”影响
+ */
+export declare function themeSettingsCode(baseName: string, settings: ThemeSettings, appearance: 'light' | 'dark'): string;

package/dist/theme-customize/customize.js

@@ -0,0 +1,105 @@
+import { defineTheme } from "../config/theme/theme.js";
+import { tokenCatalog } from "./token-catalog.js";
+import { themeValues } from "./design-tokens.js";
+import { paletteColors } from "./palette.js";
+//#region src/theme-customize/customize.ts
+/**
+* 主题定制：几个旋钮（品牌色、中性色、圆角、缩放、字体、动效）换算成 token 覆盖，叠在任意一套主题上。
+* ThemeCustomizer 是它的界面；也可以不要界面，直接用：
+*
+*   const settings = { accent: 'crimson', radius: 'large' };
+*   app.use(createUi({ theme: () => customizeTheme(preference.theme, settings) }));
+*   themeSettingsCode('lightTheme', settings, 'light')   // 生成可以粘贴的 defineTheme(…) 代码
+*
+* 每个旋钮只改相关的一组 token，层级关系不变：换品牌色按 Radix 的级别整组替换（palette.ts），
+* 圆角按这套主题自己的圆角等比缩放（在页面里量出来；服务端用默认值），字号按默认值缩放（token-catalog.ts），
+* 动效按倍数缩放时长。
+*/
+var RADIUS_FACTORS = {
+	none: 0,
+	small: .5,
+	medium: 1,
+	large: 1.75
+};
+var MOTION_FACTORS = {
+	none: 0,
+	fast: .6,
+	normal: 1,
+	slow: 1.5
+};
+/** 某组 token 的默认值 */
+function defaults(group) {
+	const entry = tokenCatalog.find((item) => item.name === group);
+	return Object.fromEntries(entry?.tokens.map((token) => [token.name, token.value]) ?? []);
+}
+/** `0.4em` × 1.75 → `0.7em`：数值部分乘倍数，单位不变；保留三位小数 */
+function scale(value, factor) {
+	const match = /^(-?[\d.]+)([a-z%]*)$/.exec(value);
+	if (!match) return value;
+	return `${Math.round(Number(match[1]) * factor * 1e3) / 1e3}${match[2]}`;
+}
+/** 按倍数缩放一组取值（默认是这组 token 的默认值），跳过指定的键（如圆角的 full、none） */
+function scaleGroup(group, factor, skip = [], values = defaults(group)) {
+	return Object.fromEntries(Object.entries(values).filter(([key]) => !skip.includes(key)).map(([key, value]) => [key, scale(value, factor)]));
+}
+var measuredRadii = /* @__PURE__ */ new WeakMap();
+/**
+* 主题自己的圆角：放进页面里量一次（按主题缓存）。量不到时（服务端、样式还没加载）为 undefined，
+* 按默认值缩放：定制主题不能因为量不到而出错
+*/
+function themeRadii(theme) {
+	if (typeof document === "undefined") return void 0;
+	const cached = measuredRadii.get(theme);
+	if (cached) return cached;
+	try {
+		const radii = themeValues(theme).radii;
+		measuredRadii.set(theme, radii);
+		return radii;
+	} catch {
+		return;
+	}
+}
+/** 设置换算成 token 覆盖；appearance 决定品牌色、中性色取亮色还是暗色色阶 */
+function themeSettingsOverrides(settings, appearance, { reducedMotion = false, radii } = {}) {
+	const overrides = {};
+	const colors = paletteColors({
+		accent: settings.accent,
+		neutral: settings.neutral,
+		appearance
+	});
+	if (Object.keys(colors).length) overrides.colors = colors;
+	if (settings.radius && settings.radius !== "medium") overrides.radii = scaleGroup("radii", RADIUS_FACTORS[settings.radius], ["none", "full"], radii);
+	if (settings.scaling && settings.scaling !== 1) overrides.fontSizes = scaleGroup("fontSizes", settings.scaling);
+	if (settings.font === "serifHeadings") overrides.fonts = { heading: defaults("fonts").serif };
+	if (settings.motion && settings.motion !== "normal" && !reducedMotion) overrides.durations = scaleGroup("durations", MOTION_FACTORS[settings.motion], ["none"]);
+	return overrides;
+}
+/** 在一套主题上套用设置（名字后加 -custom，便于调试时认出来） */
+function customizeTheme(base, settings, options = {}) {
+	const scaled = settings.radius != null && settings.radius !== "medium";
+	const overrides = themeSettingsOverrides(settings, base.colorScheme, {
+		...options,
+		radii: options.radii ?? (scaled ? themeRadii(base) : void 0)
+	});
+	if (!Object.keys(overrides).length) return base;
+	return defineTheme(base, overrides, { name: `${base.name}-custom` });
+}
+/**
+* 生成套用这些设置的代码：`defineTheme(lightTheme, { … })`，可以直接粘贴到项目里。
+* baseName 是代码里基础主题的变量名；导出的取值不受“减少动态效果”影响
+*/
+function themeSettingsCode(baseName, settings, appearance) {
+	return `import { defineTheme, ${baseName} } from '@zerodep-dev/vue-tsx-pro-ui';\n\nexport const myTheme = defineTheme(${baseName}, ${toCode(themeSettingsOverrides(settings, appearance), "")});\n`;
+}
+/** 对象写成代码：键不加引号（都是合法标识符），字符串用单引号（字体名里的双引号原样保留） */
+function toCode(value, indent) {
+	if (typeof value === "string") return `'${value.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}'`;
+	const entries = Object.entries(value);
+	if (!entries.length) return "{}";
+	const inner = `${indent}  `;
+	return `{\n${entries.map(([key, item]) => `${inner}${key}: ${toCode(item, inner)},`).join("\n")}\n${indent}}`;
+}
+//#endregion
+export { customizeTheme, themeSettingsCode, themeSettingsOverrides };
+
+//# sourceMappingURL=customize.js.map

package/dist/theme-customize/customize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customize.js","names":[],"sources":["../../src/theme-customize/customize.ts"],"sourcesContent":["/**\n * 主题定制：几个旋钮（品牌色、中性色、圆角、缩放、字体、动效）换算成 token 覆盖，叠在任意一套主题上。\n * ThemeCustomizer 是它的界面；也可以不要界面，直接用：\n *\n *   const settings = { accent: 'crimson', radius: 'large' };\n *   app.use(createUi({ theme: () => customizeTheme(preference.theme, settings) }));\n *   themeSettingsCode('lightTheme', settings, 'light')   // 生成可以粘贴的 defineTheme(…) 代码\n *\n * 每个旋钮只改相关的一组 token，层级关系不变：换品牌色按 Radix 的级别整组替换（palette.ts），\n * 圆角按这套主题自己的圆角等比缩放（在页面里量出来；服务端用默认值），字号按默认值缩放（token-catalog.ts），\n * 动效按倍数缩放时长。\n */\nimport { themeValues } from './design-tokens';\nimport { paletteColors, type AccentScale, type NeutralScale } from './palette';\nimport { defineTheme, type Theme, type ThemeOverrides } from '../config/theme/theme';\nimport { tokenCatalog } from './token-catalog';\n\n/** 圆角档位：默认圆角的倍数 */\nexport interface RadiusPresets {\n  /** 直角 */\n  none: unknown;\n  /** 小圆角（默认的 0.5 倍） */\n  small: unknown;\n  /** 默认 */\n  medium: unknown;\n  /** 大圆角（默认的 1.75 倍） */\n  large: unknown;\n}\n\n/** 字体搭配 */\nexport interface FontPresets {\n  /** 正文与标题都是无衬线（默认） */\n  sans: unknown;\n  /** 标题用衬线，正文无衬线：书卷感，长文仍好读 */\n  serifHeadings: unknown;\n}\n\n/** 动效速度 */\nexport interface MotionPresets {\n  /** 关掉过渡与动画 */\n  none: unknown;\n  /** 快（默认时长的 0.6 倍） */\n  fast: unknown;\n  /** 默认 */\n  normal: unknown;\n  /** 慢（默认时长的 1.5 倍） */\n  slow: unknown;\n}\n\n/** 主题定制的设置；不写的旋钮沿用主题本来的取值 */\nexport interface ThemeSettings {\n  /** 品牌色（Radix 色阶） */\n  accent?: AccentScale;\n  /** 中性色（Radix 灰色色阶） */\n  neutral?: NeutralScale;\n  /** 圆角 */\n  radius?: keyof RadiusPresets;\n  /** 缩放：字号的倍数，0.9–1.1；间距、控件高度以 em 计，随字号一起缩放 */\n  scaling?: number;\n  /** 字体搭配 */\n  font?: keyof FontPresets;\n  /** 动效速度 */\n  motion?: keyof MotionPresets;\n}\n\n/** customizeTheme 的选项 */\nexport interface CustomizeOptions {\n  /**\n   * 用户开启了“减少动态效果”：不覆盖动效时长。运行时覆盖写在行内样式上，\n   * 会盖过主题里“减少动态效果时为 0”的媒体查询\n   */\n  reducedMotion?: boolean;\n  /** 基础主题自己的圆角（radii 各档的 CSS 取值）：圆角档位按它缩放；不给时按默认主题的取值 */\n  radii?: Readonly<Record<string, string>>;\n}\n\nconst RADIUS_FACTORS: Record<keyof RadiusPresets, number> = {\n  none: 0,\n  small: 0.5,\n  medium: 1,\n  large: 1.75,\n};\nconst MOTION_FACTORS: Record<keyof MotionPresets, number> = {\n  none: 0,\n  fast: 0.6,\n  normal: 1,\n  slow: 1.5,\n};\n\n/** 某组 token 的默认值 */\nfunction defaults(group: string): Record<string, string> {\n  const entry = tokenCatalog.find((item) => item.name === group);\n  return Object.fromEntries(entry?.tokens.map((token) => [token.name, token.value]) ?? []);\n}\n\n/** `0.4em` × 1.75 → `0.7em`：数值部分乘倍数，单位不变；保留三位小数 */\nfunction scale(value: string, factor: number): string {\n  const match = /^(-?[\\d.]+)([a-z%]*)$/.exec(value);\n  if (!match) return value;\n  const scaled = Math.round(Number(match[1]) * factor * 1000) / 1000;\n  return `${scaled}${match[2]}`;\n}\n\n/** 按倍数缩放一组取值（默认是这组 token 的默认值），跳过指定的键（如圆角的 full、none） */\nfunction scaleGroup(\n  group: string,\n  factor: number,\n  skip: readonly string[] = [],\n  values: Readonly<Record<string, string>> = defaults(group),\n) {\n  return Object.fromEntries(\n    Object.entries(values)\n      .filter(([key]) => !skip.includes(key))\n      .map(([key, value]) => [key, scale(value, factor)]),\n  );\n}\n\nconst measuredRadii = new WeakMap<Theme, Readonly<Record<string, string>>>();\n\n/**\n * 主题自己的圆角：放进页面里量一次（按主题缓存）。量不到时（服务端、样式还没加载）为 undefined，\n * 按默认值缩放：定制主题不能因为量不到而出错\n */\nfunction themeRadii(theme: Theme): Readonly<Record<string, string>> | undefined {\n  if (typeof document === 'undefined') return undefined;\n  const cached = measuredRadii.get(theme);\n  if (cached) return cached;\n  try {\n    const radii = themeValues(theme).radii!;\n    measuredRadii.set(theme, radii);\n    return radii;\n  } catch {\n    return undefined;\n  }\n}\n\n/** 设置换算成 token 覆盖；appearance 决定品牌色、中性色取亮色还是暗色色阶 */\nexport function themeSettingsOverrides(\n  settings: ThemeSettings,\n  appearance: 'light' | 'dark',\n  { reducedMotion = false, radii }: CustomizeOptions = {},\n): ThemeOverrides {\n  const overrides: ThemeOverrides = {};\n  const colors = paletteColors({ accent: settings.accent, neutral: settings.neutral, appearance });\n  if (Object.keys(colors).length) overrides.colors = colors;\n  if (settings.radius && settings.radius !== 'medium') {\n    overrides.radii = scaleGroup('radii', RADIUS_FACTORS[settings.radius], ['none', 'full'], radii);\n  }\n  if (settings.scaling && settings.scaling !== 1) {\n    overrides.fontSizes = scaleGroup('fontSizes', settings.scaling);\n  }\n  if (settings.font === 'serifHeadings') {\n    overrides.fonts = { heading: defaults('fonts').serif! };\n  }\n  if (settings.motion && settings.motion !== 'normal' && !reducedMotion) {\n    overrides.durations = scaleGroup('durations', MOTION_FACTORS[settings.motion], ['none']);\n  }\n  return overrides;\n}\n\n/** 在一套主题上套用设置（名字后加 -custom，便于调试时认出来） */\nexport function customizeTheme(\n  base: Theme,\n  settings: ThemeSettings,\n  options: CustomizeOptions = {},\n): Theme {\n  // 圆角按这套主题自己的取值缩放：自带圆角的主题（柠檬）上小、默认、大才是由小到大\n  const scaled = settings.radius != null && settings.radius !== 'medium';\n  const overrides = themeSettingsOverrides(settings, base.colorScheme, {\n    ...options,\n    radii: options.radii ?? (scaled ? themeRadii(base) : undefined),\n  });\n  if (!Object.keys(overrides).length) return base;\n  return defineTheme(base, overrides, { name: `${base.name}-custom` });\n}\n\n/**\n * 生成套用这些设置的代码：`defineTheme(lightTheme, { … })`，可以直接粘贴到项目里。\n * baseName 是代码里基础主题的变量名；导出的取值不受“减少动态效果”影响\n */\nexport function themeSettingsCode(\n  baseName: string,\n  settings: ThemeSettings,\n  appearance: 'light' | 'dark',\n): string {\n  const body = toCode(themeSettingsOverrides(settings, appearance), '');\n  return `import { defineTheme, ${baseName} } from '@zerodep-dev/vue-tsx-pro-ui';\\n\\nexport const myTheme = defineTheme(${baseName}, ${body});\\n`;\n}\n\n/** 对象写成代码：键不加引号（都是合法标识符），字符串用单引号（字体名里的双引号原样保留） */\nfunction toCode(value: unknown, indent: string): string {\n  if (typeof value === 'string') return `'${value.replace(/\\\\/g, '\\\\\\\\').replace(/'/g, \"\\\\'\")}'`;\n  const entries = Object.entries(value as Record<string, unknown>);\n  if (!entries.length) return '{}';\n  const inner = `${indent}  `;\n  const lines = entries.map(([key, item]) => `${inner}${key}: ${toCode(item, inner)},`);\n  return `{\\n${lines.join('\\n')}\\n${indent}}`;\n}\n"],"mappings":"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"}

package/dist/theme-customize/design-tokens.d.ts

@@ -0,0 +1,31 @@
+import { type Theme } from '../config/theme/theme';
+/** 一个设计令牌 */
+export interface DesignToken {
+    /** DTCG 类型：color、dimension、number、duration、fontFamily、shadow、cubicBezier */
+    readonly $type: string;
+    /** 取值：结构按类型（颜色是 colorSpace、components、alpha、hex，长度是 value 与 unit） */
+    readonly $value: unknown;
+    /** 说明，取自 token 目录 */
+    readonly $description?: string;
+}
+/** 设计令牌文件：组名 → token 名 → 令牌 */
+export type DesignTokens = Record<string, Record<string, DesignToken>>;
+/** 一套主题的取值：组名 → token 名 → CSS 取值 */
+export type ThemeValues = Record<string, Record<string, string>>;
+/** 长度换算成 px 的基准 */
+export interface DesignTokenBases {
+    /** 1em 是多少 px：组件的基准字号 */
+    em: number;
+    /** 1rem 是多少 px：根元素字号 */
+    rem: number;
+}
+/** 主题的取值换算成设计令牌；说明取自 token 目录，只导出目录里有的 token */
+export declare function designTokens(values: ThemeValues, bases: DesignTokenBases): DesignTokens;
+/** 元素上实际生效的各组 token 取值（CSS 文本，如 radii.md → '0.4em'）；元素要已挂载 */
+export declare function elementThemeValues(element: Element): ThemeValues;
+/** 元素上实际生效的主题（所在 Provider 或页面根元素的主题）导出为设计令牌；元素要已挂载 */
+export declare function elementDesignTokens(element: Element): DesignTokens;
+/** 一套主题的各组 token 取值（CSS 文本）：主题的取值编译成了样式，要放进页面里量 */
+export declare function themeValues(theme: Theme, container?: Element): ThemeValues;
+/** 一套主题的设计令牌 */
+export declare function themeDesignTokens(theme: Theme, container?: Element): DesignTokens;

package/dist/theme-customize/design-tokens.js

@@ -0,0 +1,183 @@
+import { t } from "../config/theme/tokens.js";
+import { applyStyleAttrs } from "../utils/props.js";
+import { readToken, themeVariables } from "../config/theme/theme.js";
+import { parseColor } from "../utils/data/color.js";
+import { tokenCatalog } from "./token-catalog.js";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { formatHex } from "culori/fn";
+//#region src/theme-customize/design-tokens.ts
+/**
+* 主题导出为设计令牌：W3C 设计令牌社区组（DTCG 2025.10）格式的 JSON，Figma 的变量面板可以直接导入，一个文件成为一个模式。
+*
+*   const tokens = themeDesignTokens(lightTheme);
+*   downloadFile('light.tokens.json', JSON.stringify(tokens, null, 2), 'application/json');
+*
+* 取值是页面上实际生效的 CSS 变量（含运行时覆盖），按 Figma 能导入的类型换算：
+* - 颜色写 sRGB 分量、透明度与 hex；
+* - 长度一律是 px（Figma 只认 px）：em 按主题的 md 字号（组件的基准字号）、rem 按根元素字号换算，百分比这类没有固定长度的不导出；
+* - 时长是秒（Figma 只认 s）；字重、行高、不透明度、描边宽度是数字；
+* - 字体取字体栈里 Figma 自带的开源字体：Figma 里没有系统字体；
+* - 阴影与缓动按 DTCG 的结构写出，Figma 变量没有这两种类型，导入时跳过。
+* 令牌按 token 组分组：colors/accent、space/md，与代码里的 `_accent`、`_space.md` 一一对应。
+*/
+/** Figma 自带的开源字体（Google Fonts）：内置主题的每个字体栈里都有其中一个 */
+var FIGMA_FONTS = [
+	"Noto Sans SC",
+	"Noto Serif SC",
+	"JetBrains Mono"
+];
+var round = (value, digits = 3) => Number(value.toFixed(digits));
+/** 长度换成 px；没有固定长度（百分比、auto）时返回 undefined */
+function toPx(value, bases) {
+	const match = /^(-?[\d.]+)(px|em|rem)?$/.exec(value.trim());
+	if (!match) return void 0;
+	const factor = match[2] === "em" ? bases.em : match[2] === "rem" ? bases.rem : 1;
+	return {
+		value: round(Number(match[1]) * factor),
+		unit: "px"
+	};
+}
+function toColor(value) {
+	const color = parseColor(value);
+	if (!color) throw new Error(`无法解析的颜色：${value}`);
+	return {
+		colorSpace: "srgb",
+		components: [
+			color.r,
+			color.g,
+			color.b
+		].map((channel) => round(channel, 4)),
+		alpha: round(color.alpha ?? 1, 4),
+		hex: formatHex(color)
+	};
+}
+/** CSS 阴影 → DTCG 的阴影层：`0 1px 2px -1px rgba(…)`，多层用逗号隔开（括号里的逗号不算）；none 不导出 */
+function toShadow(value, bases) {
+	if (value.trim() === "none") return void 0;
+	return value.split(/,(?![^(]*\))/).map((layer) => {
+		const parts = layer.trim().split(/\s+(?![^(]*\))/);
+		const lengths = parts.filter((part) => toPx(part, bases));
+		const color = parts.find((part) => part !== "inset" && !lengths.includes(part));
+		const [offsetX, offsetY, blur = "0", spread = "0"] = lengths.map((part) => toPx(part, bases));
+		return {
+			color: toColor(color ?? "black"),
+			offsetX,
+			offsetY,
+			blur,
+			spread,
+			inset: parts.includes("inset")
+		};
+	});
+}
+function toNumber(value) {
+	const number = Number(value);
+	return Number.isFinite(number) ? number : void 0;
+}
+var dimension = (value, bases) => {
+	const px = toPx(value, bases);
+	return px && ["dimension", px];
+};
+var number = (value) => {
+	const result = toNumber(value);
+	return result === void 0 ? void 0 : ["number", result];
+};
+/** 每组的类型；新增 token 组时这里必须补上 */
+var CONVERTERS = {
+	colors: (value) => ["color", toColor(value)],
+	fonts: (value) => {
+		const families = value.split(",").map((family) => family.trim().replace(/^["']|["']$/g, ""));
+		return ["fontFamily", families.find((family) => FIGMA_FONTS.includes(family)) ?? families[0]];
+	},
+	fontSizes: dimension,
+	fontWeights: number,
+	lineHeights: number,
+	letterSpacings: dimension,
+	space: dimension,
+	sizes: dimension,
+	radii: dimension,
+	borderWidths: dimension,
+	shadows: (value, bases) => {
+		const layers = toShadow(value, bases);
+		return layers && ["shadow", layers];
+	},
+	opacities: number,
+	strokeWidths: number,
+	durations: (value) => {
+		const match = /^([\d.]+)(ms|s)$/.exec(value.trim());
+		if (!match) return void 0;
+		return ["duration", {
+			value: round(Number(match[1]) / (match[2] === "ms" ? 1e3 : 1)),
+			unit: "s"
+		}];
+	},
+	easings: (value) => {
+		const match = /^cubic-bezier\(([^)]+)\)$/.exec(value.trim());
+		return match ? ["cubicBezier", match[1].split(",").map(Number)] : void 0;
+	}
+};
+/** 主题的取值换算成设计令牌；说明取自 token 目录，只导出目录里有的 token */
+function designTokens(values, bases) {
+	const result = {};
+	for (const group of tokenCatalog) {
+		const convert = CONVERTERS[group.name];
+		const tokens = {};
+		for (const token of group.tokens) {
+			const value = values[group.name]?.[token.name];
+			const converted = value === void 0 ? void 0 : convert(value, bases);
+			if (!converted) continue;
+			tokens[token.name] = {
+				$type: converted[0],
+				$value: converted[1],
+				$description: token.description
+			};
+		}
+		result[group.name] = tokens;
+	}
+	return result;
+}
+/** 元素上实际生效的各组 token 取值（CSS 文本，如 radii.md → '0.4em'）；元素要已挂载 */
+function elementThemeValues(element) {
+	const read = (group, token) => {
+		const vars = t[group];
+		return readToken(element, vars[token]);
+	};
+	return Object.fromEntries(tokenCatalog.map((group) => [group.name, Object.fromEntries(group.tokens.map((token) => [token.name, read(group.name, token.name)]))]));
+}
+/** 元素上实际生效的主题（所在 Provider 或页面根元素的主题）导出为设计令牌；元素要已挂载 */
+function elementDesignTokens(element) {
+	const values = elementThemeValues(element);
+	const rem = Number.parseFloat(getComputedStyle(element.ownerDocument.documentElement).fontSize);
+	const em = toPx(values.fontSizes.md, {
+		em: rem,
+		rem
+	}).value;
+	return designTokens(values, {
+		em,
+		rem
+	});
+}
+/** 在 container 里挂一个套着这套主题、不显示的空元素，读完就移除 */
+function probeTheme(theme, container, read) {
+	const probe = document.createElement("div");
+	applyStyleAttrs(probe, css.attrs(...theme.styles));
+	for (const [name, value] of Object.entries(themeVariables(theme))) probe.style.setProperty(name, value);
+	probe.hidden = true;
+	container.append(probe);
+	try {
+		return read(probe);
+	} finally {
+		probe.remove();
+	}
+}
+/** 一套主题的各组 token 取值（CSS 文本）：主题的取值编译成了样式，要放进页面里量 */
+function themeValues(theme, container = document.body) {
+	return probeTheme(theme, container, elementThemeValues);
+}
+/** 一套主题的设计令牌 */
+function themeDesignTokens(theme, container = document.body) {
+	return probeTheme(theme, container, elementDesignTokens);
+}
+//#endregion
+export { designTokens, elementDesignTokens, elementThemeValues, themeDesignTokens, themeValues };
+
+//# sourceMappingURL=design-tokens.js.map