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

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

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

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

@@ -0,0 +1,20 @@
+/**
+ * 主题定制（子路径 `@zerodep-dev/vue-tsx-pro-ui/theme-customize`）：把设置（品牌色、中性色、圆角、缩放、字体、动效）套到主题上、
+ * 生成可以粘贴进项目的代码、导出设计令牌（Figma 变量能导入的 JSON）、Radix 色阶、对比度检查、token 目录，
+ * 以及编辑这些设置的界面 ThemeCustomizer 与主题缩略图 ThemeThumbnail。
+ *
+ * 它们要用颜色库（culori）与 Radix 色板，不放在主入口：应用启动时用不到，只在真的要套用设置时才导入，
+ * 例如只有访客改过主题设置时：
+ *
+ *   const { customizeTheme } = await import('@zerodep-dev/vue-tsx-pro-ui/theme-customize');
+ *
+ * 切换主题的 ThemeSwitcher 在 `@zerodep-dev/vue-tsx-pro-ui/patterns`，主题偏好 createThemePreference 在主入口。
+ */
+export { ThemeCustomizer, themeCustomizerCornerStyles, themeCustomizerDynamicStyles, themeCustomizerStyles, type ThemeCustomizerProps, } from './ThemeCustomizer';
+export { ThemeThumbnail, themeThumbnailStyles, type ThemeThumbnailProps } from './ThemeThumbnail';
+export { checkContrast, CONTRAST_PAIRS, type ContrastIssue, type ContrastPair } from './contrast';
+export { customizeTheme, themeSettingsCode, themeSettingsOverrides, type CustomizeOptions, type FontPresets, type MotionPresets, type RadiusPresets, type ThemeSettings, } from './customize';
+export { designTokens, elementDesignTokens, elementThemeValues, themeDesignTokens, themeValues, type DesignToken, type DesignTokenBases, type DesignTokens, type ThemeValues, } from './design-tokens';
+export { themeCustomizerMessages, type ThemeCustomizerMessages } from './messages';
+export { ACCENT_SCALES, ACCENT_STEPS, NEUTRAL_SCALES, NEUTRAL_STEPS, paletteColors, scaleSwatch, type AccentScale, type NeutralScale, type PaletteOptions, } from './palette';
+export { tokenCatalog, type TokenEntry, type TokenGroupEntry } from './token-catalog';

package/dist/theme-customize/index.js

@@ -0,0 +1,9 @@
+import { themeCustomizerMessages } from "./messages.js";
+import { CONTRAST_PAIRS, checkContrast } from "./contrast.js";
+import { tokenCatalog } from "./token-catalog.js";
+import { designTokens, elementDesignTokens, elementThemeValues, themeDesignTokens, themeValues } from "./design-tokens.js";
+import { ACCENT_SCALES, ACCENT_STEPS, NEUTRAL_SCALES, NEUTRAL_STEPS, paletteColors, scaleSwatch } from "./palette.js";
+import { customizeTheme, themeSettingsCode, themeSettingsOverrides } from "./customize.js";
+import { ThemeCustomizer, themeCustomizerCornerStyles, themeCustomizerDynamicStyles, themeCustomizerStyles } from "./ThemeCustomizer.js";
+import { ThemeThumbnail, themeThumbnailStyles } from "./ThemeThumbnail.js";
+export { ACCENT_SCALES, ACCENT_STEPS, CONTRAST_PAIRS, NEUTRAL_SCALES, NEUTRAL_STEPS, ThemeCustomizer, ThemeThumbnail, checkContrast, customizeTheme, designTokens, elementDesignTokens, elementThemeValues, paletteColors, scaleSwatch, themeCustomizerCornerStyles, themeCustomizerDynamicStyles, themeCustomizerMessages, themeCustomizerStyles, themeDesignTokens, themeSettingsCode, themeSettingsOverrides, themeThumbnailStyles, themeValues, tokenCatalog };

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

@@ -0,0 +1,74 @@
+/** 主题编辑器（ThemeCustomizer）自带的文案：不在 Lang 里，新增一种语言不必翻（见 config/lang/messages.ts） */
+import type { MessageTable } from '../config/lang/messages';
+import type { AccentScale, NeutralScale } from './palette';
+/** ThemeCustomizer 的文案 */
+export interface ThemeCustomizerMessages {
+    /** 品牌色一组的标题，默认“品牌色” */
+    readonly accent: string;
+    /** 中性色一组的标题，默认“中性色” */
+    readonly neutral: string;
+    /** 沿用主题本来的颜色，默认“主题默认” */
+    readonly themeDefault: string;
+    /** 品牌色、中性色色阶的名字（主题编辑器的色块），如 indigo → “靛蓝” */
+    readonly colorNames: Readonly<Record<AccentScale | NeutralScale, string>>;
+    /** 圆角一组的标题，默认“圆角” */
+    readonly radius: string;
+    /** 圆角选项，默认“直角” */
+    readonly radiusNone: string;
+    /** 圆角选项，默认“小” */
+    readonly radiusSmall: string;
+    /** 圆角选项，默认“中” */
+    readonly radiusMedium: string;
+    /** 圆角选项，默认“大” */
+    readonly radiusLarge: string;
+    /** 缩放一组的标题，默认“缩放” */
+    readonly scaling: string;
+    /** 字体一组的标题，默认“字体” */
+    readonly font: string;
+    /** 字体选项，默认“无衬线” */
+    readonly fontSans: string;
+    /** 字体选项，默认“衬线标题” */
+    readonly fontSerifHeadings: string;
+    /** 动效一组的标题，默认“动效” */
+    readonly motion: string;
+    /** 动效选项，默认“关闭” */
+    readonly motionNone: string;
+    /** 动效选项，默认“快” */
+    readonly motionFast: string;
+    /** 动效选项，默认“正常” */
+    readonly motionNormal: string;
+    /** 动效选项，默认“慢” */
+    readonly motionSlow: string;
+    /** 对比度检查一组的标题，默认“对比度” */
+    readonly contrast: string;
+    /** 配色全部达到对比度要求时的提示；count 是检查了多少组颜色 */
+    readonly contrastOk: (count: number) => string;
+    /** 一处对比度不够：前景 / 背景 token、实际与要求的对比度 */
+    readonly contrastIssue: (pair: string, ratio: string, minimum: number) => string;
+    /** 导出代码一组的标题，默认“代码” */
+    readonly code: string;
+    /** 恢复默认设置的按钮，默认“恢复默认” */
+    readonly reset: string;
+    /** 把导出代码存成文件的按钮，默认“下载” */
+    readonly download: string;
+    /** 把当前主题存成设计令牌（Figma 变量能导入的 JSON）的按钮，默认“下载 Figma 变量” */
+    readonly downloadTokens: string;
+    /** 颜色分组的标题，默认“颜色” */
+    readonly groupColor: string;
+    /** 颜色分组的说明 */
+    readonly groupColorHint: string;
+    /** 形状与尺寸分组的标题，默认“形状与尺寸” */
+    readonly groupShape: string;
+    /** 形状与尺寸分组的说明 */
+    readonly groupShapeHint: string;
+    /** 字体与动效分组的标题，默认“字体与动效” */
+    readonly groupType: string;
+    /** 字体与动效分组的说明 */
+    readonly groupTypeHint: string;
+    /** 检查与导出分组的标题，默认“检查与导出” */
+    readonly groupExport: string;
+    /** 检查与导出分组的说明 */
+    readonly groupExportHint: string;
+}
+/** ThemeCustomizer 的文案表 */
+export declare const themeCustomizerMessages: MessageTable<ThemeCustomizerMessages>;

package/dist/theme-customize/messages.js

@@ -0,0 +1,142 @@
+//#region src/theme-customize/messages.ts
+/** ThemeCustomizer 的文案表 */
+var themeCustomizerMessages = {
+	"zh-CN": {
+		accent: "品牌色",
+		neutral: "中性色",
+		themeDefault: "主题默认",
+		colorNames: {
+			tomato: "番茄红",
+			red: "红",
+			ruby: "宝石红",
+			crimson: "绯红",
+			pink: "粉",
+			plum: "梅紫",
+			purple: "紫",
+			violet: "紫罗兰",
+			iris: "鸢尾蓝",
+			indigo: "靛蓝",
+			blue: "蓝",
+			sky: "天蓝",
+			cyan: "青",
+			teal: "水鸭蓝",
+			jade: "翡翠绿",
+			mint: "薄荷绿",
+			green: "绿",
+			grass: "草绿",
+			lime: "青柠",
+			yellow: "黄",
+			amber: "琥珀",
+			orange: "橙",
+			brown: "棕",
+			bronze: "青铜",
+			gold: "金",
+			slate: "岩灰",
+			gray: "灰",
+			mauve: "藕灰",
+			sage: "鼠尾草灰",
+			olive: "橄榄灰",
+			sand: "沙灰"
+		},
+		radius: "圆角",
+		radiusNone: "直角",
+		radiusSmall: "小",
+		radiusMedium: "中",
+		radiusLarge: "大",
+		scaling: "缩放",
+		font: "字体",
+		fontSans: "无衬线",
+		fontSerifHeadings: "衬线标题",
+		motion: "动效",
+		motionNone: "关闭",
+		motionFast: "快",
+		motionNormal: "正常",
+		motionSlow: "慢",
+		contrast: "对比度",
+		contrastOk: (count) => `${count} 组文字与界面部件的颜色都达到 WCAG AA`,
+		contrastIssue: (pair, ratio, minimum) => `${pair}：${ratio}，要求 ${minimum}`,
+		code: "代码",
+		reset: "恢复默认",
+		download: "下载",
+		downloadTokens: "下载 Figma 变量",
+		groupColor: "颜色",
+		groupColorHint: "品牌色用在按钮、链接与选中态；中性色决定背景、文字与边框的灰度",
+		groupShape: "形状与尺寸",
+		groupShapeHint: "圆角按比例作用在所有组件上；缩放同时改字号、间距与控件高度",
+		groupType: "字体与动效",
+		groupTypeHint: "标题的字体与过渡的快慢；系统开了“减少动态效果”时始终不播放",
+		groupExport: "检查与导出",
+		groupExportHint: "改动时实时检查对比度；代码可以直接交给 createUi 的 theme，Figma 变量是 DTCG 格式的 JSON，在 Figma 的变量面板里导入"
+	},
+	"en-US": {
+		accent: "Accent",
+		neutral: "Neutral",
+		themeDefault: "Theme default",
+		colorNames: {
+			tomato: "Tomato",
+			red: "Red",
+			ruby: "Ruby",
+			crimson: "Crimson",
+			pink: "Pink",
+			plum: "Plum",
+			purple: "Purple",
+			violet: "Violet",
+			iris: "Iris",
+			indigo: "Indigo",
+			blue: "Blue",
+			sky: "Sky",
+			cyan: "Cyan",
+			teal: "Teal",
+			jade: "Jade",
+			mint: "Mint",
+			green: "Green",
+			grass: "Grass",
+			lime: "Lime",
+			yellow: "Yellow",
+			amber: "Amber",
+			orange: "Orange",
+			brown: "Brown",
+			bronze: "Bronze",
+			gold: "Gold",
+			slate: "Slate",
+			gray: "Gray",
+			mauve: "Mauve",
+			sage: "Sage",
+			olive: "Olive",
+			sand: "Sand"
+		},
+		radius: "Radius",
+		radiusNone: "None",
+		radiusSmall: "Small",
+		radiusMedium: "Medium",
+		radiusLarge: "Large",
+		scaling: "Scaling",
+		font: "Font",
+		fontSans: "Sans",
+		fontSerifHeadings: "Serif headings",
+		motion: "Motion",
+		motionNone: "Off",
+		motionFast: "Fast",
+		motionNormal: "Normal",
+		motionSlow: "Slow",
+		contrast: "Contrast",
+		contrastOk: (count) => `All ${count} text and UI color pairs meet WCAG AA`,
+		contrastIssue: (pair, ratio, minimum) => `${pair}: ${ratio}, needs ${minimum}`,
+		code: "Code",
+		reset: "Reset",
+		download: "Download",
+		downloadTokens: "Download Figma variables",
+		groupColor: "Color",
+		groupColorHint: "Accent is used for buttons, links and selection; neutral sets the grays of backgrounds, text and borders",
+		groupShape: "Shape and size",
+		groupShapeHint: "Radius scales every component proportionally; scaling changes font size, spacing and control height together",
+		groupType: "Type and motion",
+		groupTypeHint: "Heading font and transition speed; transitions stay off when the system asks for reduced motion",
+		groupExport: "Check and export",
+		groupExportHint: "Contrast is checked as you change things; the code can be passed straight to createUi’s theme, and the Figma variables are DTCG JSON you import in Figma’s variables panel"
+	}
+};
+//#endregion
+export { themeCustomizerMessages };
+
+//# sourceMappingURL=messages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","names":[],"sources":["../../src/theme-customize/messages.ts"],"sourcesContent":["/** 主题编辑器（ThemeCustomizer）自带的文案：不在 Lang 里，新增一种语言不必翻（见 config/lang/messages.ts） */\nimport type { MessageTable } from '../config/lang/messages';\nimport type { AccentScale, NeutralScale } from './palette';\n\n/** ThemeCustomizer 的文案 */\nexport interface ThemeCustomizerMessages {\n  /** 品牌色一组的标题，默认“品牌色” */\n  readonly accent: string;\n  /** 中性色一组的标题，默认“中性色” */\n  readonly neutral: string;\n  /** 沿用主题本来的颜色，默认“主题默认” */\n  readonly themeDefault: string;\n  /** 品牌色、中性色色阶的名字（主题编辑器的色块），如 indigo → “靛蓝” */\n  readonly colorNames: Readonly<Record<AccentScale | NeutralScale, string>>;\n  /** 圆角一组的标题，默认“圆角” */\n  readonly radius: string;\n  /** 圆角选项，默认“直角” */\n  readonly radiusNone: string;\n  /** 圆角选项，默认“小” */\n  readonly radiusSmall: string;\n  /** 圆角选项，默认“中” */\n  readonly radiusMedium: string;\n  /** 圆角选项，默认“大” */\n  readonly radiusLarge: string;\n  /** 缩放一组的标题，默认“缩放” */\n  readonly scaling: string;\n  /** 字体一组的标题，默认“字体” */\n  readonly font: string;\n  /** 字体选项，默认“无衬线” */\n  readonly fontSans: string;\n  /** 字体选项，默认“衬线标题” */\n  readonly fontSerifHeadings: string;\n  /** 动效一组的标题，默认“动效” */\n  readonly motion: string;\n  /** 动效选项，默认“关闭” */\n  readonly motionNone: string;\n  /** 动效选项，默认“快” */\n  readonly motionFast: string;\n  /** 动效选项，默认“正常” */\n  readonly motionNormal: string;\n  /** 动效选项，默认“慢” */\n  readonly motionSlow: string;\n  /** 对比度检查一组的标题，默认“对比度” */\n  readonly contrast: string;\n  /** 配色全部达到对比度要求时的提示；count 是检查了多少组颜色 */\n  readonly contrastOk: (count: number) => string;\n  /** 一处对比度不够：前景 / 背景 token、实际与要求的对比度 */\n  readonly contrastIssue: (pair: string, ratio: string, minimum: number) => string;\n  /** 导出代码一组的标题，默认“代码” */\n  readonly code: string;\n  /** 恢复默认设置的按钮，默认“恢复默认” */\n  readonly reset: string;\n  /** 把导出代码存成文件的按钮，默认“下载” */\n  readonly download: string;\n  /** 把当前主题存成设计令牌（Figma 变量能导入的 JSON）的按钮，默认“下载 Figma 变量” */\n  readonly downloadTokens: string;\n  /** 颜色分组的标题，默认“颜色” */\n  readonly groupColor: string;\n  /** 颜色分组的说明 */\n  readonly groupColorHint: string;\n  /** 形状与尺寸分组的标题，默认“形状与尺寸” */\n  readonly groupShape: string;\n  /** 形状与尺寸分组的说明 */\n  readonly groupShapeHint: string;\n  /** 字体与动效分组的标题，默认“字体与动效” */\n  readonly groupType: string;\n  /** 字体与动效分组的说明 */\n  readonly groupTypeHint: string;\n  /** 检查与导出分组的标题，默认“检查与导出” */\n  readonly groupExport: string;\n  /** 检查与导出分组的说明 */\n  readonly groupExportHint: string;\n}\n\n/** ThemeCustomizer 的文案表 */\nexport const themeCustomizerMessages: MessageTable<ThemeCustomizerMessages> = {\n  'zh-CN': {\n    accent: '品牌色',\n    neutral: '中性色',\n    themeDefault: '主题默认',\n    colorNames: {\n      tomato: '番茄红',\n      red: '红',\n      ruby: '宝石红',\n      crimson: '绯红',\n      pink: '粉',\n      plum: '梅紫',\n      purple: '紫',\n      violet: '紫罗兰',\n      iris: '鸢尾蓝',\n      indigo: '靛蓝',\n      blue: '蓝',\n      sky: '天蓝',\n      cyan: '青',\n      teal: '水鸭蓝',\n      jade: '翡翠绿',\n      mint: '薄荷绿',\n      green: '绿',\n      grass: '草绿',\n      lime: '青柠',\n      yellow: '黄',\n      amber: '琥珀',\n      orange: '橙',\n      brown: '棕',\n      bronze: '青铜',\n      gold: '金',\n      slate: '岩灰',\n      gray: '灰',\n      mauve: '藕灰',\n      sage: '鼠尾草灰',\n      olive: '橄榄灰',\n      sand: '沙灰',\n    },\n    radius: '圆角',\n    radiusNone: '直角',\n    radiusSmall: '小',\n    radiusMedium: '中',\n    radiusLarge: '大',\n    scaling: '缩放',\n    font: '字体',\n    fontSans: '无衬线',\n    fontSerifHeadings: '衬线标题',\n    motion: '动效',\n    motionNone: '关闭',\n    motionFast: '快',\n    motionNormal: '正常',\n    motionSlow: '慢',\n    contrast: '对比度',\n    contrastOk: (count) => `${count} 组文字与界面部件的颜色都达到 WCAG AA`,\n    contrastIssue: (pair, ratio, minimum) => `${pair}：${ratio}，要求 ${minimum}`,\n    code: '代码',\n    reset: '恢复默认',\n    download: '下载',\n    downloadTokens: '下载 Figma 变量',\n    groupColor: '颜色',\n    groupColorHint: '品牌色用在按钮、链接与选中态；中性色决定背景、文字与边框的灰度',\n    groupShape: '形状与尺寸',\n    groupShapeHint: '圆角按比例作用在所有组件上；缩放同时改字号、间距与控件高度',\n    groupType: '字体与动效',\n    groupTypeHint: '标题的字体与过渡的快慢；系统开了“减少动态效果”时始终不播放',\n    groupExport: '检查与导出',\n    groupExportHint:\n      '改动时实时检查对比度；代码可以直接交给 createUi 的 theme，Figma 变量是 DTCG 格式的 JSON，在 Figma 的变量面板里导入',\n  },\n  'en-US': {\n    accent: 'Accent',\n    neutral: 'Neutral',\n    themeDefault: 'Theme default',\n    colorNames: {\n      tomato: 'Tomato',\n      red: 'Red',\n      ruby: 'Ruby',\n      crimson: 'Crimson',\n      pink: 'Pink',\n      plum: 'Plum',\n      purple: 'Purple',\n      violet: 'Violet',\n      iris: 'Iris',\n      indigo: 'Indigo',\n      blue: 'Blue',\n      sky: 'Sky',\n      cyan: 'Cyan',\n      teal: 'Teal',\n      jade: 'Jade',\n      mint: 'Mint',\n      green: 'Green',\n      grass: 'Grass',\n      lime: 'Lime',\n      yellow: 'Yellow',\n      amber: 'Amber',\n      orange: 'Orange',\n      brown: 'Brown',\n      bronze: 'Bronze',\n      gold: 'Gold',\n      slate: 'Slate',\n      gray: 'Gray',\n      mauve: 'Mauve',\n      sage: 'Sage',\n      olive: 'Olive',\n      sand: 'Sand',\n    },\n    radius: 'Radius',\n    radiusNone: 'None',\n    radiusSmall: 'Small',\n    radiusMedium: 'Medium',\n    radiusLarge: 'Large',\n    scaling: 'Scaling',\n    font: 'Font',\n    fontSans: 'Sans',\n    fontSerifHeadings: 'Serif headings',\n    motion: 'Motion',\n    motionNone: 'Off',\n    motionFast: 'Fast',\n    motionNormal: 'Normal',\n    motionSlow: 'Slow',\n    contrast: 'Contrast',\n    contrastOk: (count) => `All ${count} text and UI color pairs meet WCAG AA`,\n    contrastIssue: (pair, ratio, minimum) => `${pair}: ${ratio}, needs ${minimum}`,\n    code: 'Code',\n    reset: 'Reset',\n    download: 'Download',\n    downloadTokens: 'Download Figma variables',\n    groupColor: 'Color',\n    groupColorHint:\n      'Accent is used for buttons, links and selection; neutral sets the grays of backgrounds, text and borders',\n    groupShape: 'Shape and size',\n    groupShapeHint:\n      'Radius scales every component proportionally; scaling changes font size, spacing and control height together',\n    groupType: 'Type and motion',\n    groupTypeHint:\n      'Heading font and transition speed; transitions stay off when the system asks for reduced motion',\n    groupExport: 'Check and export',\n    groupExportHint:\n      'Contrast is checked as you change things; the code can be passed straight to createUi’s theme, and the Figma variables are DTCG JSON you import in Figma’s variables panel',\n  },\n};\n"],"mappings":";;AA2EA,IAAa,0BAAiE;CAC5E,SAAS;EACP,QAAQ;EACR,SAAS;EACT,cAAc;EACd,YAAY;GACV,QAAQ;GACR,KAAK;GACL,MAAM;GACN,SAAS;GACT,MAAM;GACN,MAAM;GACN,QAAQ;GACR,QAAQ;GACR,MAAM;GACN,QAAQ;GACR,MAAM;GACN,KAAK;GACL,MAAM;GACN,MAAM;GACN,MAAM;GACN,MAAM;GACN,OAAO;GACP,OAAO;GACP,MAAM;GACN,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,MAAM;GACN,OAAO;GACP,MAAM;GACN,OAAO;GACP,MAAM;GACN,OAAO;GACP,MAAM;EACR;EACA,QAAQ;EACR,YAAY;EACZ,aAAa;EACb,cAAc;EACd,aAAa;EACb,SAAS;EACT,MAAM;EACN,UAAU;EACV,mBAAmB;EACnB,QAAQ;EACR,YAAY;EACZ,YAAY;EACZ,cAAc;EACd,YAAY;EACZ,UAAU;EACV,aAAa,UAAU,GAAG,MAAM;EAChC,gBAAgB,MAAM,OAAO,YAAY,GAAG,KAAK,GAAG,MAAM,MAAM;EAChE,MAAM;EACN,OAAO;EACP,UAAU;EACV,gBAAgB;EAChB,YAAY;EACZ,gBAAgB;EAChB,YAAY;EACZ,gBAAgB;EAChB,WAAW;EACX,eAAe;EACf,aAAa;EACb,iBACE;CACJ;CACA,SAAS;EACP,QAAQ;EACR,SAAS;EACT,cAAc;EACd,YAAY;GACV,QAAQ;GACR,KAAK;GACL,MAAM;GACN,SAAS;GACT,MAAM;GACN,MAAM;GACN,QAAQ;GACR,QAAQ;GACR,MAAM;GACN,QAAQ;GACR,MAAM;GACN,KAAK;GACL,MAAM;GACN,MAAM;GACN,MAAM;GACN,MAAM;GACN,OAAO;GACP,OAAO;GACP,MAAM;GACN,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,MAAM;GACN,OAAO;GACP,MAAM;GACN,OAAO;GACP,MAAM;GACN,OAAO;GACP,MAAM;EACR;EACA,QAAQ;EACR,YAAY;EACZ,aAAa;EACb,cAAc;EACd,aAAa;EACb,SAAS;EACT,MAAM;EACN,UAAU;EACV,mBAAmB;EACnB,QAAQ;EACR,YAAY;EACZ,YAAY;EACZ,cAAc;EACd,YAAY;EACZ,UAAU;EACV,aAAa,UAAU,OAAO,MAAM;EACpC,gBAAgB,MAAM,OAAO,YAAY,GAAG,KAAK,IAAI,MAAM,UAAU;EACrE,MAAM;EACN,OAAO;EACP,UAAU;EACV,gBAAgB;EAChB,YAAY;EACZ,gBACE;EACF,YAAY;EACZ,gBACE;EACF,WAAW;EACX,eACE;EACF,aAAa;EACb,iBACE;CACJ;AACF"}