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

package/dist/theme-customize/palette.js

@@ -0,0 +1,111 @@
+import { readableText, withAlpha } from "../utils/data/color.js";
+import { amber, amberDark, blue, blueDark, bronze, bronzeDark, brown, brownDark, crimson, crimsonDark, cyan, cyanDark, gold, goldDark, grass, grassDark, gray, grayDark, green, greenDark, indigo, indigoDark, iris, irisDark, jade, jadeDark, lime, limeDark, mauve, mauveDark, mint, mintDark, olive, oliveDark, orange, orangeDark, pink, pinkDark, plum, plumDark, purple, purpleDark, red, redDark, ruby, rubyDark, sage, sageDark, sand, sandDark, sky, skyDark, slate, slateDark, teal, tealDark, tomato, tomatoDark, violet, violetDark, yellow, yellowDark } from "@radix-ui/colors";
+//#region src/theme-customize/palette.ts
+/**
+* 主题配色的 Radix 色阶：每个颜色 token 取色阶的哪一级（亮色、暗色各一级），以及按选中的色阶生成颜色覆盖。
+* 内置主题就是按这张表从 indigo（品牌色）与 slate（中性色）取的值（palette.test 核对）；
+* 主题编辑器换品牌色、中性色时也按它整组替换，层级关系（底色、悬停、边框、文字）保持不变。
+*
+*   defineTheme(lightTheme, { colors: paletteColors({ accent: 'crimson', neutral: 'mauve', appearance: 'light' }) })
+*/
+/** 可选的品牌色：Radix 的彩色色阶，按色相排列（同 Radix 文档的顺序：红、粉、紫、蓝、青、绿、黄、橙，最后是棕、青铜、金） */
+var ACCENT_TABLE = {
+	tomato: [tomato, tomatoDark],
+	red: [red, redDark],
+	ruby: [ruby, rubyDark],
+	crimson: [crimson, crimsonDark],
+	pink: [pink, pinkDark],
+	plum: [plum, plumDark],
+	purple: [purple, purpleDark],
+	violet: [violet, violetDark],
+	iris: [iris, irisDark],
+	indigo: [indigo, indigoDark],
+	blue: [blue, blueDark],
+	sky: [sky, skyDark],
+	cyan: [cyan, cyanDark],
+	teal: [teal, tealDark],
+	jade: [jade, jadeDark],
+	mint: [mint, mintDark],
+	green: [green, greenDark],
+	grass: [grass, grassDark],
+	lime: [lime, limeDark],
+	yellow: [yellow, yellowDark],
+	amber: [amber, amberDark],
+	orange: [orange, orangeDark],
+	brown: [brown, brownDark],
+	bronze: [bronze, bronzeDark],
+	gold: [gold, goldDark]
+};
+/** 可选的中性色：Radix 的灰色色阶（各带一点色相，与品牌色搭配：indigo 配 slate、crimson 配 mauve…） */
+var NEUTRAL_TABLE = {
+	slate: [slate, slateDark],
+	gray: [gray, grayDark],
+	mauve: [mauve, mauveDark],
+	sage: [sage, sageDark],
+	olive: [olive, oliveDark],
+	sand: [sand, sandDark]
+};
+/** 可选的品牌色，按色相排列（主题编辑器按这个顺序列出） */
+var ACCENT_SCALES = Object.keys(ACCENT_TABLE);
+/** 可选的中性色 */
+var NEUTRAL_SCALES = Object.keys(NEUTRAL_TABLE);
+/** 品牌色 token → [亮色取第几级, 暗色取第几级]（Radix 的用途约定：9–10 实色，11 文字，3–4 浅底，7 边框） */
+var ACCENT_STEPS = {
+	accent: [9, 9],
+	accentHover: [10, 10],
+	accentText: [11, 11],
+	accentSoft: [3, 3],
+	accentSoftHover: [4, 4],
+	accentBorder: [7, 7],
+	focusRing: [9, 9],
+	selection: [5, 5],
+	codeKeyword: [11, 11],
+	chart1: [9, 9]
+};
+/** 中性色 token → [亮色取第几级, 暗色取第几级]（1–2 背景，3–5 填充，6–8 边框，11–12 文字） */
+var NEUTRAL_STEPS = {
+	background: [1, 1],
+	surface: [1, 2],
+	surfaceMuted: [2, 2],
+	surfaceRaised: [1, 2],
+	fill: [3, 3],
+	fillHover: [4, 4],
+	fillActive: [5, 5],
+	text: [12, 12],
+	textMuted: [11, 11],
+	textPlaceholder: [10, 10],
+	textDisabled: [8, 8],
+	borderMuted: [6, 6],
+	border: [7, 7],
+	borderStrong: [8, 8],
+	inverseSurface: [12, 12],
+	inverseText: [1, 1],
+	codeComment: [11, 11]
+};
+/** 色阶的代表色（第 9 级实色）：主题编辑器里选色阶的色块 */
+function scaleSwatch(scale, appearance) {
+	return (ACCENT_TABLE[scale] ?? NEUTRAL_TABLE[scale])[appearance === "dark" ? 1 : 0][`${scale}9`];
+}
+/** 半透明表面（粘性顶栏）：背景色加 80% 不透明度 */
+var TRANSLUCENT_ALPHA = .8;
+/** 按选中的色阶生成颜色 token 的覆盖，交给 defineTheme 的 colors */
+function paletteColors({ accent, neutral, appearance }) {
+	const variant = appearance === "dark" ? 1 : 0;
+	const pick = (scale, name, steps) => Object.fromEntries(Object.entries(steps).map(([token, levels]) => [token, scale[`${name}${levels[variant]}`]]));
+	const colors = {};
+	if (accent) {
+		const scale = ACCENT_TABLE[accent][variant];
+		Object.assign(colors, pick(scale, accent, ACCENT_STEPS));
+		colors.accentContrast = readableText(colors.accent);
+	}
+	if (neutral) {
+		const scale = NEUTRAL_TABLE[neutral][variant];
+		Object.assign(colors, pick(scale, neutral, NEUTRAL_STEPS));
+		colors.surfaceTranslucent = withAlpha(colors.background, TRANSLUCENT_ALPHA);
+	}
+	return colors;
+}
+//#endregion
+export { ACCENT_SCALES, ACCENT_STEPS, NEUTRAL_SCALES, NEUTRAL_STEPS, paletteColors, scaleSwatch };
+
+//# sourceMappingURL=palette.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"palette.js","names":[],"sources":["../../src/theme-customize/palette.ts"],"sourcesContent":["/**\n * 主题配色的 Radix 色阶：每个颜色 token 取色阶的哪一级（亮色、暗色各一级），以及按选中的色阶生成颜色覆盖。\n * 内置主题就是按这张表从 indigo（品牌色）与 slate（中性色）取的值（palette.test 核对）；\n * 主题编辑器换品牌色、中性色时也按它整组替换，层级关系（底色、悬停、边框、文字）保持不变。\n *\n *   defineTheme(lightTheme, { colors: paletteColors({ accent: 'crimson', neutral: 'mauve', appearance: 'light' }) })\n */\nimport {\n  amber,\n  amberDark,\n  blue,\n  blueDark,\n  bronze,\n  bronzeDark,\n  brown,\n  brownDark,\n  crimson,\n  crimsonDark,\n  cyan,\n  cyanDark,\n  gold,\n  goldDark,\n  grass,\n  grassDark,\n  gray,\n  grayDark,\n  green,\n  greenDark,\n  indigo,\n  indigoDark,\n  iris,\n  irisDark,\n  jade,\n  jadeDark,\n  lime,\n  limeDark,\n  mauve,\n  mauveDark,\n  mint,\n  mintDark,\n  olive,\n  oliveDark,\n  orange,\n  orangeDark,\n  pink,\n  pinkDark,\n  plum,\n  plumDark,\n  purple,\n  purpleDark,\n  red,\n  redDark,\n  ruby,\n  rubyDark,\n  sage,\n  sageDark,\n  sand,\n  sandDark,\n  sky,\n  skyDark,\n  slate,\n  slateDark,\n  teal,\n  tealDark,\n  tomato,\n  tomatoDark,\n  violet,\n  violetDark,\n  yellow,\n  yellowDark,\n} from '@radix-ui/colors';\nimport { readableText, withAlpha } from '../utils/data/color';\n\n/** 一个 Radix 色阶：12 级，键是 `indigo1`…`indigo12` */\ntype Scale = Record<string, string>;\n\n/** 可选的品牌色：Radix 的彩色色阶，按色相排列（同 Radix 文档的顺序：红、粉、紫、蓝、青、绿、黄、橙，最后是棕、青铜、金） */\nconst ACCENT_TABLE = {\n  tomato: [tomato, tomatoDark],\n  red: [red, redDark],\n  ruby: [ruby, rubyDark],\n  crimson: [crimson, crimsonDark],\n  pink: [pink, pinkDark],\n  plum: [plum, plumDark],\n  purple: [purple, purpleDark],\n  violet: [violet, violetDark],\n  iris: [iris, irisDark],\n  indigo: [indigo, indigoDark],\n  blue: [blue, blueDark],\n  sky: [sky, skyDark],\n  cyan: [cyan, cyanDark],\n  teal: [teal, tealDark],\n  jade: [jade, jadeDark],\n  mint: [mint, mintDark],\n  green: [green, greenDark],\n  grass: [grass, grassDark],\n  lime: [lime, limeDark],\n  yellow: [yellow, yellowDark],\n  amber: [amber, amberDark],\n  orange: [orange, orangeDark],\n  brown: [brown, brownDark],\n  bronze: [bronze, bronzeDark],\n  gold: [gold, goldDark],\n} satisfies Record<string, [Scale, Scale]>;\n\n/** 可选的中性色：Radix 的灰色色阶（各带一点色相，与品牌色搭配：indigo 配 slate、crimson 配 mauve…） */\nconst NEUTRAL_TABLE = {\n  slate: [slate, slateDark],\n  gray: [gray, grayDark],\n  mauve: [mauve, mauveDark],\n  sage: [sage, sageDark],\n  olive: [olive, oliveDark],\n  sand: [sand, sandDark],\n} satisfies Record<string, [Scale, Scale]>;\n\n/** 品牌色色阶的名字 */\nexport type AccentScale = keyof typeof ACCENT_TABLE;\n/** 中性色色阶的名字 */\nexport type NeutralScale = keyof typeof NEUTRAL_TABLE;\n\n/** 可选的品牌色，按色相排列（主题编辑器按这个顺序列出） */\nexport const ACCENT_SCALES = Object.keys(ACCENT_TABLE) as AccentScale[];\n/** 可选的中性色 */\nexport const NEUTRAL_SCALES = Object.keys(NEUTRAL_TABLE) as NeutralScale[];\n\n/** 品牌色 token → [亮色取第几级, 暗色取第几级]（Radix 的用途约定：9–10 实色，11 文字，3–4 浅底，7 边框） */\nexport const ACCENT_STEPS = {\n  accent: [9, 9],\n  accentHover: [10, 10],\n  accentText: [11, 11],\n  accentSoft: [3, 3],\n  accentSoftHover: [4, 4],\n  accentBorder: [7, 7],\n  focusRing: [9, 9],\n  selection: [5, 5],\n  codeKeyword: [11, 11],\n  // 图表的第一个系列跟随品牌色\n  chart1: [9, 9],\n} as const satisfies Record<string, [number, number]>;\n\n/** 中性色 token → [亮色取第几级, 暗色取第几级]（1–2 背景，3–5 填充，6–8 边框，11–12 文字） */\nexport const NEUTRAL_STEPS = {\n  background: [1, 1],\n  surface: [1, 2],\n  surfaceMuted: [2, 2],\n  // 暗色不取第 3 级：那是 fill，滑块轨道、进度条底色、标签放进浮层会看不见；浮层靠描边与阴影分层（同 Radix Themes 的 panel）\n  surfaceRaised: [1, 2],\n  fill: [3, 3],\n  fillHover: [4, 4],\n  fillActive: [5, 5],\n  text: [12, 12],\n  textMuted: [11, 11],\n  textPlaceholder: [10, 10],\n  textDisabled: [8, 8],\n  borderMuted: [6, 6],\n  border: [7, 7],\n  borderStrong: [8, 8],\n  inverseSurface: [12, 12],\n  inverseText: [1, 1],\n  codeComment: [11, 11],\n} as const satisfies Record<string, [number, number]>;\n\n/** 色阶的代表色（第 9 级实色）：主题编辑器里选色阶的色块 */\nexport function scaleSwatch(\n  scale: AccentScale | NeutralScale,\n  appearance: 'light' | 'dark',\n): string {\n  const pair =\n    (ACCENT_TABLE as Record<string, [Scale, Scale]>)[scale] ??\n    (NEUTRAL_TABLE as Record<string, [Scale, Scale]>)[scale]!;\n  return pair[appearance === 'dark' ? 1 : 0][`${scale}9`]!;\n}\n\n/** 半透明表面（粘性顶栏）：背景色加 80% 不透明度 */\nconst TRANSLUCENT_ALPHA = 0.8;\n\n/** paletteColors 的选项 */\nexport interface PaletteOptions {\n  /** 品牌色；不写时不改品牌色 */\n  accent?: AccentScale;\n  /** 中性色；不写时不改中性色 */\n  neutral?: NeutralScale;\n  /** 取亮色还是暗色色阶 */\n  appearance: 'light' | 'dark';\n}\n\n/** 按选中的色阶生成颜色 token 的覆盖，交给 defineTheme 的 colors */\nexport function paletteColors({\n  accent,\n  neutral,\n  appearance,\n}: PaletteOptions): Record<string, string> {\n  const variant = appearance === 'dark' ? 1 : 0;\n  const pick = (scale: Scale, name: string, steps: Record<string, readonly [number, number]>) =>\n    Object.fromEntries(\n      Object.entries(steps).map(([token, levels]) => [token, scale[`${name}${levels[variant]}`]!]),\n    );\n  const colors: Record<string, string> = {};\n  if (accent) {\n    const scale = ACCENT_TABLE[accent][variant];\n    Object.assign(colors, pick(scale, accent, ACCENT_STEPS));\n    // 实色按钮上的文字：亮黄、青柠这类浅色实色配深色字，其余配白字\n    colors.accentContrast = readableText(colors.accent!);\n  }\n  if (neutral) {\n    const scale = NEUTRAL_TABLE[neutral][variant];\n    Object.assign(colors, pick(scale, neutral, NEUTRAL_STEPS));\n    colors.surfaceTranslucent = withAlpha(colors.background!, TRANSLUCENT_ALPHA);\n  }\n  return colors;\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+/** 一个主题 token */
+export interface TokenEntry {
+    /** 键，如 accent */
+    readonly name: string;
+    /** 默认值（亮色主题） */
+    readonly value: string;
+    /** 说明 */
+    readonly description: string;
+}
+/** 一组主题 token */
+export interface TokenGroupEntry {
+    /** 组名，如 colors */
+    readonly name: string;
+    /** 说明 */
+    readonly description: string;
+    /** 组里的 token */
+    readonly tokens: readonly TokenEntry[];
+}
+/** 主题 tokens 的清单：每组每个 token 的默认值与说明（主题编辑器、文档的 token 表用它） */
+export declare const tokenCatalog: readonly TokenGroupEntry[];