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

package/dist/config/theme/theme.js

@@ -0,0 +1,68 @@
+import { t } from "./tokens.js";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/config/theme/theme.ts
+/**
+* 主题：一组 token 的取值。内置主题是 createTheme 生成的只改变量的类（第一次用到时插入规则，换主题只换这个类）；
+* defineTheme 的局部修改在运行时写成 CSS 变量，作用在 Provider 的容器上。
+*/
+/** 明暗两套主题时按系统设置选一套，单个主题原样返回 */
+function resolveTheme(input, prefersDark) {
+	return "light" in input ? prefersDark ? input.dark : input.light : input;
+}
+/**
+* 基于已有主题局部修改：`defineTheme(lightTheme, { colors: { accent: '#e5484d' } })`。
+* 修改按分组合并，未提到的 token 沿用基础主题。
+*/
+function defineTheme(base, overrides, meta = {}) {
+	const merged = { ...base.overrides };
+	for (const [group, values] of Object.entries(overrides)) merged[group] = {
+		...merged[group],
+		...values
+	};
+	return {
+		...base,
+		...meta,
+		overrides: merged
+	};
+}
+/** 主题落到容器元素上的属性：编译期主题的 class、运行时覆盖的 CSS 变量与配色方案 */
+function themeAttrs(theme) {
+	const compiled = css.attrs(...theme.styles);
+	return {
+		class: compiled.class,
+		style: [compiled.style, themeVariables(theme)],
+		"data-theme": theme.name
+	};
+}
+/** 运行时覆盖的 token 写成 CSS 变量，并带上配色方案 */
+function themeVariables(theme) {
+	const variables = { "color-scheme": theme.colorScheme };
+	for (const [group, values] of Object.entries(theme.overrides)) {
+		const tokens = t[group];
+		for (const [token, value] of Object.entries(values ?? {})) variables[variableName(tokens[token])] = value;
+	}
+	return variables;
+}
+/** token 在元素上的当前取值；元素不在主题范围里（没加载组件库的样式、还没挂载）时为空字符串 */
+function tokenValue(element, token) {
+	return getComputedStyle(element).getPropertyValue(variableName(String(token))).trim();
+}
+/**
+* token 在元素上的当前取值，含主题覆盖与媒体查询：`readToken(el, colors.accent)` → `'#3e63dd'`；读不到时报错。
+* 给拿不到 CSS 变量的地方用：JS 动画的时长与缓动（utils/motion/animation 的 themeTransition、useAnimate）、canvas 图表与 3D 场景的颜色。
+*/
+function readToken(element, token) {
+	const value = tokenValue(element, token);
+	if (!value) throw new Error(`读不到主题 token ${String(token)}：元素要已挂载，且在 Provider 或页面的主题范围内`);
+	return value;
+}
+/** token 是 `var(--vtp-colors-accent)`，取出变量名 `--vtp-colors-accent` 才能在行内覆盖 */
+function variableName(token) {
+	const match = /^var\((--[\w-]+)\)$/.exec(token);
+	if (!match) throw new Error(`无法识别的主题变量：${token}`);
+	return match[1];
+}
+//#endregion
+export { defineTheme, readToken, resolveTheme, themeAttrs, themeVariables, tokenValue };
+
+//# sourceMappingURL=theme.js.map

package/dist/config/theme/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../../src/config/theme/theme.ts"],"sourcesContent":["/**\n * 主题：一组 token 的取值。内置主题是 createTheme 生成的只改变量的类（第一次用到时插入规则，换主题只换这个类）；\n * defineTheme 的局部修改在运行时写成 CSS 变量，作用在 Provider 的容器上。\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { CssVar, Theme as GroupThemeOf } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { t } from './tokens';\n\ntype Groups = typeof t;\n\n/** 某一组 tokens 的主题（createTheme 的结果） */\nexport type GroupTheme = { [Group in keyof Groups]: GroupThemeOf<Groups[Group]> }[keyof Groups];\n\n/** 按分组覆盖部分 token：`{ colors: { accent: '#e5484d' }, fontSizes: { md: '16px' } }` */\nexport type ThemeOverrides = {\n  -readonly [Group in keyof Groups]?: { [Token in keyof Groups[Group] & string]?: string };\n};\n\n/** 浏览器配色方案（color-scheme） */\nexport interface ColorSchemes {\n  /** 亮色：原生表单控件、滚动条用亮色样式 */\n  light: unknown;\n  /** 暗色：原生表单控件、滚动条用暗色样式 */\n  dark: unknown;\n}\n\n/** 一套主题：defineTheme 的结果，交给 createUi 或 Provider */\nexport interface Theme {\n  /** 主题名，写在容器的 data-theme 上，便于调试与宿主 CSS 定位 */\n  readonly name: string;\n  /** 浏览器配色方案，影响原生表单控件与滚动条 */\n  readonly colorScheme: keyof ColorSchemes;\n  /** 编译期生成的主题样式，每组一个（createTheme 的结果）；内置主题都写全颜色、阴影、字体、圆角，嵌套时不继承外层主题 */\n  readonly styles: readonly GroupTheme[];\n  /** 运行时覆盖的取值 */\n  readonly overrides: ThemeOverrides;\n}\n\n/** 一个主题，或明暗两套主题（跟随系统 prefers-color-scheme 切换） */\nexport type ThemeInput = Theme | { readonly light: Theme; readonly dark: Theme };\n\n/** 明暗两套主题时按系统设置选一套，单个主题原样返回 */\nexport function resolveTheme(input: ThemeInput, prefersDark: boolean): Theme {\n  return 'light' in input ? (prefersDark ? input.dark : input.light) : input;\n}\n\n/**\n * 基于已有主题局部修改：`defineTheme(lightTheme, { colors: { accent: '#e5484d' } })`。\n * 修改按分组合并，未提到的 token 沿用基础主题。\n */\nexport function defineTheme(\n  base: Theme,\n  overrides: ThemeOverrides,\n  meta: Partial<Pick<Theme, 'name' | 'colorScheme'>> = {},\n): Theme {\n  // 分组的键各不相同，按普通对象逐组合并\n  const merged: Record<string, Record<string, string | undefined>> = { ...base.overrides };\n  for (const [group, values] of Object.entries(overrides)) {\n    merged[group] = { ...merged[group], ...values };\n  }\n  return { ...base, ...meta, overrides: merged as ThemeOverrides };\n}\n\n/** 主题落到容器元素上的属性：编译期主题的 class、运行时覆盖的 CSS 变量与配色方案 */\nexport function themeAttrs(theme: Theme) {\n  const compiled = css.attrs(...theme.styles);\n  return {\n    class: compiled.class,\n    style: [compiled.style, themeVariables(theme)],\n    'data-theme': theme.name,\n  };\n}\n\n/** 运行时覆盖的 token 写成 CSS 变量，并带上配色方案 */\nexport function themeVariables(theme: Theme): Record<string, string> {\n  const variables: Record<string, string> = { 'color-scheme': theme.colorScheme };\n  for (const [group, values] of Object.entries(theme.overrides)) {\n    const tokens = t[group as keyof Groups] as unknown as Record<string, string>;\n    for (const [token, value] of Object.entries(values ?? {})) {\n      variables[variableName(tokens[token]!)] = value as string;\n    }\n  }\n  return variables;\n}\n\n/** token 在元素上的当前取值；元素不在主题范围里（没加载组件库的样式、还没挂载）时为空字符串 */\nexport function tokenValue(element: Element, token: CssVar): string {\n  return getComputedStyle(element)\n    .getPropertyValue(variableName(String(token)))\n    .trim();\n}\n\n/**\n * token 在元素上的当前取值，含主题覆盖与媒体查询：`readToken(el, colors.accent)` → `'#3e63dd'`；读不到时报错。\n * 给拿不到 CSS 变量的地方用：JS 动画的时长与缓动（utils/motion/animation 的 themeTransition、useAnimate）、canvas 图表与 3D 场景的颜色。\n */\nexport function readToken(element: Element, token: CssVar): string {\n  const value = tokenValue(element, token);\n  if (!value)\n    throw new Error(\n      `读不到主题 token ${String(token)}：元素要已挂载，且在 Provider 或页面的主题范围内`,\n    );\n  return value;\n}\n\n/** token 是 `var(--vtp-colors-accent)`，取出变量名 `--vtp-colors-accent` 才能在行内覆盖 */\nfunction variableName(token: string) {\n  const match = /^var\\((--[\\w-]+)\\)$/.exec(token);\n  if (!match) throw new Error(`无法识别的主题变量：${token}`);\n  return match[1]!;\n}\n"],"mappings":";;;;;;;;AA0CA,SAAgB,aAAa,OAAmB,aAA6B;CAC3E,OAAO,WAAW,QAAS,cAAc,MAAM,OAAO,MAAM,QAAS;AACvE;;;;;AAMA,SAAgB,YACd,MACA,WACA,OAAqD,CAAC,GAC/C;CAEP,MAAM,SAA6D,EAAE,GAAG,KAAK,UAAU;CACvF,KAAK,MAAM,CAAC,OAAO,WAAW,OAAO,QAAQ,SAAS,GACpD,OAAO,SAAS;EAAE,GAAG,OAAO;EAAQ,GAAG;CAAO;CAEhD,OAAO;EAAE,GAAG;EAAM,GAAG;EAAM,WAAW;CAAyB;AACjE;;AAGA,SAAgB,WAAW,OAAc;CACvC,MAAM,WAAW,IAAI,MAAM,GAAG,MAAM,MAAM;CAC1C,OAAO;EACL,OAAO,SAAS;EAChB,OAAO,CAAC,SAAS,OAAO,eAAe,KAAK,CAAC;EAC7C,cAAc,MAAM;CACtB;AACF;;AAGA,SAAgB,eAAe,OAAsC;CACnE,MAAM,YAAoC,EAAE,gBAAgB,MAAM,YAAY;CAC9E,KAAK,MAAM,CAAC,OAAO,WAAW,OAAO,QAAQ,MAAM,SAAS,GAAG;EAC7D,MAAM,SAAS,EAAE;EACjB,KAAK,MAAM,CAAC,OAAO,UAAU,OAAO,QAAQ,UAAU,CAAC,CAAC,GACtD,UAAU,aAAa,OAAO,MAAO,KAAK;CAE9C;CACA,OAAO;AACT;;AAGA,SAAgB,WAAW,SAAkB,OAAuB;CAClE,OAAO,iBAAiB,OAAO,CAAC,CAC7B,iBAAiB,aAAa,OAAO,KAAK,CAAC,CAAC,CAAC,CAC7C,KAAK;AACV;;;;;AAMA,SAAgB,UAAU,SAAkB,OAAuB;CACjE,MAAM,QAAQ,WAAW,SAAS,KAAK;CACvC,IAAI,CAAC,OACH,MAAM,IAAI,MACR,eAAe,OAAO,KAAK,EAAE,8BAC/B;CACF,OAAO;AACT;;AAGA,SAAS,aAAa,OAAe;CACnC,MAAM,QAAQ,sBAAsB,KAAK,KAAK;CAC9C,IAAI,CAAC,OAAO,MAAM,IAAI,MAAM,aAAa,OAAO;CAChD,OAAO,MAAM;AACf"}