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

package/dist/config/theme/tokens.js

@@ -0,0 +1,480 @@
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/config/theme/tokens.ts
+/**
+* 主题 tokens：组件里的颜色、字体、间距、圆角、阴影、动效都只从这里取，不写裸值。
+* 每组一个 defineVars，变量名是 `--vtp-组名-token`。这里的取值即亮色主题，暗色主题见 dark.ts。
+*
+* 用法：值整个就是一个 token 时写字符串 '_md'、'_space.md'（COMPONENTS.md §4），文件末尾的 defineTokens 登记各组，
+* 样式引擎展开样式时按组名查到变量；utils/props.ts 导入这个模块，组件渲染之前一定登记过。
+* 值里夹着 token（计算、多值、混色）时在模板字符串里用 `t`：
+*
+*   transition: `opacity ${t.durations.md} ${t.easings.standard}`,
+*   marginInlineStart: `calc(-1 * ${t.borderWidths.xs})`,
+*
+* 取舍参考：
+*   - 颜色与阴影取自 Radix Colors / Radix Themes，按 Radix 12 级的用途约定映射成语义 token
+*     （1–2 背景，3–5 交互填充，6–8 边框，9–10 实色，11–12 文字）
+*   - 尺寸、间距、圆角用 em，随组件字号等比缩放（字号即尺寸档位，见 COMPONENTS.md §3）；
+*     边框宽度用 px，容器宽度用 rem
+*   - 分组参考 Stitches / Chakra / Panda 的 token 分类，组名即样式里短写的对照组（@zerodep-dev/vue-tsx-pro-tsx 的 token-map.ts）
+*   - 动效时长与缓动参考 Material 3
+*   - 分档：一般 xs–xl 五档，需要时加 none（去掉）与 full（全圆）；颜色、行高、字间距、不透明度按语义命名
+*   - 不设 z-index：弹出层、对话框用原生 popover / dialog，渲染在顶层（top layer），不参与层叠顺序
+*/
+/** 颜色：slate 中性色、indigo 品牌色、red 危险、green 成功、amber 警告、blue 信息 */
+var colors = css.defineVars("vtp-colors", {
+	/** 页面背景。slate 1：亮色 `#fcfcfd`，暗色 `#111113` */
+	background: "#fcfcfd",
+	/** 卡片、输入框等表面。亮色 slate 1 `#fcfcfd`，暗色 slate 2 `#18191b` */
+	surface: "#fcfcfd",
+	/** 弱化的区域背景：表头、侧栏、代码块。slate 2：亮色 `#f9f9fb`，暗色 `#18191b` */
+	surfaceMuted: "#f9f9fb",
+	/**
+	* 浮层（弹出框、菜单、对话框）表面，靠描边与阴影区分层级。亮色 slate 1 `#fcfcfd`，暗色 slate 2 `#18191b`
+	* （不取第 3 级：那是 fill，浮层里的填充会看不见）
+	*/
+	surfaceRaised: "#fcfcfd",
+	/** 填充：标签、开关关闭态、弱按钮。slate 3：亮色 `#f0f0f3`，暗色 `#212225` */
+	fill: "#f0f0f3",
+	/** 填充悬停；也用于幽灵按钮、菜单项的悬停背景。slate 4：亮色 `#e8e8ec`，暗色 `#272a2d` */
+	fillHover: "#e8e8ec",
+	/** 填充按下、选中。slate 5：亮色 `#e0e1e6`，暗色 `#2e3135` */
+	fillActive: "#e0e1e6",
+	/** 主要文字。slate 12：亮色 `#1c2024`，暗色 `#edeef0` */
+	text: "#1c2024",
+	/** 次要文字、说明、图标。slate 11：亮色 `#60646c`，暗色 `#b0b4ba` */
+	textMuted: "#60646c",
+	/** 输入框占位文字。slate 10：亮色 `#80838d`，暗色 `#777b84` */
+	textPlaceholder: "#80838d",
+	/** 不可用的文字。slate 8：亮色 `#b9bbc6`，暗色 `#5a6169` */
+	textDisabled: "#b9bbc6",
+	/** 弱边框：分割线、表格线。slate 6：亮色 `#d9d9e0`，暗色 `#363a3f` */
+	borderMuted: "#d9d9e0",
+	/** 普通边框：输入框、卡片、浮层。slate 7：亮色 `#cdced6`，暗色 `#43484e` */
+	border: "#cdced6",
+	/** 强调边框：悬停。slate 8：亮色 `#b9bbc6`，暗色 `#5a6169` */
+	borderStrong: "#b9bbc6",
+	/** 品牌色实色：主按钮、选中的复选框。indigo 9：两套主题都是 `#3e63dd` */
+	accent: "#3e63dd",
+	/** 品牌色实色悬停。亮色 indigo 10 `#3358d4`；暗色比实色更深一点 `#3758d4`（indigo 10 `#5472e4` 配白字只有 4.28:1） */
+	accentHover: "#3358d4",
+	/** 品牌色实色上的文字与图标。Radix 规定 indigo 9 上用白字：`#ffffff` */
+	accentContrast: "#ffffff",
+	/** 品牌色文字：链接、选中项的文字。indigo 11：亮色 `#3a5bc7`，暗色 `#9eb1ff` */
+	accentText: "#3a5bc7",
+	/** 品牌色浅底：选中行、弱主按钮。indigo 3：亮色 `#edf2fe`，暗色 `#182449` */
+	accentSoft: "#edf2fe",
+	/** 品牌色浅底悬停。indigo 4：亮色 `#e1e9ff`，暗色 `#1d2e62` */
+	accentSoftHover: "#e1e9ff",
+	/** 品牌色边框：选中的卡片、弱主按钮描边。indigo 7：亮色 `#abbdf9`，暗色 `#3a4f97` */
+	accentBorder: "#abbdf9",
+	/**
+	* 危险实色：危险按钮的底色，上面放 dangerContrast（白色）文字，要满足 4.5:1。
+	* red 9 配白字只有 3.91:1，所以亮色用 red 11 `#ce2c31`（5.21:1），暗色用 red 8 `#b54548`（5.37:1）
+	*/
+	danger: "#ce2c31",
+	/** 危险实色悬停：比实色更深一点，白字才满足 4.5:1（red 10 只有 4.37:1）。亮色 `#b8272c`，暗色 `#a33b3e` */
+	dangerHover: "#b8272c",
+	/** 危险实色上的文字与图标：`#ffffff` */
+	dangerContrast: "#ffffff",
+	/** 危险文字：错误提示。亮色比 red 11 深一点 `#b8272c`（red 11 在 dangerSoftHover 上只有 4.07:1），暗色 red 11 `#ff9592` */
+	dangerText: "#b8272c",
+	/** 危险浅底：错误提示条。red 3：亮色 `#feebec`，暗色 `#3b1219` */
+	dangerSoft: "#feebec",
+	/** 危险浅底悬停。red 4：亮色 `#ffdbdc`，暗色 `#500f1c` */
+	dangerSoftHover: "#ffdbdc",
+	/** 危险边框：校验失败的输入框。red 7：亮色 `#f4a9aa`，暗色 `#8c333a` */
+	dangerBorder: "#f4a9aa",
+	/**
+	* 成功文字与图标。亮色 green 12 `#193b2d`，暗色 green 11 `#3dd68c`。
+	* 亮色不用 11 级：green 11 在 successSoft（green 3）上只有 4.21:1，标记、提示条里的文字不到 4.5
+	*/
+	successText: "#193b2d",
+	/** 成功浅底。green 3：亮色 `#e6f6eb`，暗色 `#132d21` */
+	successSoft: "#e6f6eb",
+	/** 成功边框。green 7：亮色 `#8eceaa`，暗色 `#28684a` */
+	successBorder: "#8eceaa",
+	/**
+	* 成功实色：成功按钮、实底徽标的底色，上面放 successContrast。亮色 `#008751`，暗色 green 9 `#30a46c`。
+	* 黄、绿、蓝的 9 级很亮：配白字不到 4.5:1 时亮色加深到够，暗色改配深色字。图形（勾选框、进度条）的填充仍用 successText：实色不一定在表面上到 3:1
+	*/
+	success: "#008751",
+	/** 成功实色悬停：与 successContrast 的对比度只升不降（白字时加深，深色字时调亮）。亮色 `#007143`，暗色 `#52af7d` */
+	successHover: "#007143",
+	/** 成功实色上的文字与图标。亮色 `#ffffff`，暗色 `#111113` */
+	successContrast: "#ffffff",
+	/** 成功浅底悬停。green 4：亮色 `#d6f1df`，暗色 `#113b29` */
+	successSoftHover: "#d6f1df",
+	/**
+	* 警告文字与图标。亮色 amber 12 `#4f3422`，暗色 amber 11 `#ffca16`。
+	* 亮色不用 11 级：amber 11（`#ab6400`）在页面背景上对比度 4.49，不到 WCAG AA 的 4.5
+	*/
+	warningText: "#4f3422",
+	/** 警告浅底。amber 3：亮色 `#fff7c2`，暗色 `#302008` */
+	warningSoft: "#fff7c2",
+	/** 警告边框。amber 7：亮色 `#e9c162`，暗色 `#714f19` */
+	warningBorder: "#e9c162",
+	/**
+	* 警告实色：警告按钮、实底徽标的底色，上面放 warningContrast。亮色 `#ffc53d`，暗色 amber 9 `#ffc53d`。
+	* 黄、绿、蓝的 9 级很亮：配白字不到 4.5:1 时亮色加深到够，暗色改配深色字。图形（勾选框、进度条）的填充仍用 warningText：实色不一定在表面上到 3:1
+	*/
+	warning: "#ffc53d",
+	/** 警告实色悬停：与 warningContrast 的对比度只升不降（白字时加深，深色字时调亮）。亮色 `#ffcd5f`，暗色 `#ffcd5f` */
+	warningHover: "#ffcd5f",
+	/** 警告实色上的文字与图标。亮色 `#4f3422`，暗色 `#111113` */
+	warningContrast: "#4f3422",
+	/** 警告浅底悬停。amber 4：亮色 `#ffee9c`，暗色 `#3f2700` */
+	warningSoftHover: "#ffee9c",
+	/**
+	* 信息文字与图标。亮色 blue 12 `#113264`，暗色 blue 11 `#70b8ff`。
+	* 亮色不用 11 级：blue 11 在 infoSoft（blue 3）上只有 4.25:1
+	*/
+	infoText: "#113264",
+	/** 信息浅底。blue 3：亮色 `#e6f4fe`，暗色 `#0d2847` */
+	infoSoft: "#e6f4fe",
+	/** 信息边框。blue 7：亮色 `#8ec8f6`，暗色 `#205d9e` */
+	infoBorder: "#8ec8f6",
+	/**
+	* 信息实色：信息按钮、实底徽标的底色，上面放 infoContrast。亮色 `#0073e0`，暗色 blue 9 `#0090ff`。
+	* 黄、绿、蓝的 9 级很亮：配白字不到 4.5:1 时亮色加深到够，暗色改配深色字。图形（勾选框、进度条）的填充仍用 infoText：实色不一定在表面上到 3:1
+	*/
+	info: "#0073e0",
+	/** 信息实色悬停：与 infoContrast 的对比度只升不降（白字时加深，深色字时调亮）。亮色 `#0060bd`，暗色 `#3d9fff` */
+	infoHover: "#0060bd",
+	/** 信息实色上的文字与图标。亮色 `#ffffff`，暗色 `#111113` */
+	infoContrast: "#ffffff",
+	/** 信息浅底悬停。blue 4：亮色 `#d5efff`，暗色 `#003362` */
+	infoSoftHover: "#d5efff",
+	/** 反色表面。slate 12：亮色 `#1c2024`，暗色 `#edeef0` */
+	inverseSurface: "#1c2024",
+	/** 反色表面上的文字。slate 1：亮色 `#fcfcfd`，暗色 `#111113` */
+	inverseText: "#fcfcfd",
+	/**
+	* 焦点环（:focus-visible）。indigo 9：两套主题都是 `#3e63dd`。
+	* Radix 建议 7–8 级，但亮色下对比度不到 3:1（WCAG 2.2 焦点外观要求），所以用 9 级
+	*/
+	focusRing: "#3e63dd",
+	/** 模态遮罩。亮色 blackA 6 `rgba(0, 0, 0, 0.4)`，暗色 blackA 8 `rgba(0, 0, 0, 0.6)` */
+	overlay: "rgba(0, 0, 0, 0.4)",
+	/** 选中文字的底色（::selection）。indigo 5：亮色 `#d2deff`，暗色 `#253974` */
+	selection: "#d2deff",
+	/** 高亮标记：搜索命中、`<mark>`。amber 4：亮色 `#ffee9c`，暗色 `#3f2700` */
+	highlight: "#ffee9c",
+	/** 半透明表面：吸顶的顶栏（配合背景模糊）。页面背景加 80% 不透明 */
+	surfaceTranslucent: "rgba(252, 252, 253, 0.8)",
+	/** 关键字。indigo 11：亮色 `#3a5bc7`，暗色 `#9eb1ff` */
+	codeKeyword: "#3a5bc7",
+	/** 字符串。亮色比 green 11 深一点 `#1c7a51`（在代码块背景上 green 11 只有 4.49:1），暗色 green 11 `#3dd68c` */
+	codeString: "#1c7a51",
+	/** 数字、常量。亮色比 orange 11 深一点 `#bb4500`（orange 11 在代码块背景上只有 4.29:1），暗色 orange 11 `#ffa057` */
+	codeNumber: "#bb4500",
+	/** 函数名。violet 11：亮色 `#6550b9`，暗色 `#baa7ff` */
+	codeFunction: "#6550b9",
+	/** 类型、类名。亮色比 cyan 11 深一点 `#007590`（cyan 11 在行内代码的底色上只有 4.19:1），暗色 cyan 11 `#4ccce6` */
+	codeType: "#007590",
+	/** 注释、标点。slate 11：亮色 `#60646c`，暗色 `#b0b4ba` */
+	codeComment: "#60646c",
+	/** 标签名（HTML、JSX）。crimson 11：亮色 `#cb1d63`，暗色 `#ff92ad` */
+	codeTag: "#cb1d63",
+	/** 属性名。brown 11：亮色 `#815e46`，暗色 `#dbb594` */
+	codeAttribute: "#815e46",
+	/** diff 新增行的底色。green 3：亮色 `#e6f6eb`，暗色 `#132d21` */
+	codeInserted: "#e6f6eb",
+	/** diff 删除行的底色。red 3：亮色 `#feebec`，暗色 `#3b1219` */
+	codeDeleted: "#feebec",
+	/** 第 1 个系列：跟随品牌色。indigo 9：两套主题都是 `#3e63dd` */
+	chart1: "#3e63dd",
+	/** 第 2 个系列。teal：亮色 10 级 `#0d9b8a`，暗色 9 级 `#12a594` */
+	chart2: "#0d9b8a",
+	/** 第 3 个系列。orange：亮色 10 级 `#ef5f00`，暗色 9 级 `#f76b15` */
+	chart3: "#ef5f00",
+	/** 第 4 个系列。crimson 9：两套主题都是 `#e93d82` */
+	chart4: "#e93d82",
+	/** 第 5 个系列。violet 9：两套主题都是 `#6e56cf` */
+	chart5: "#6e56cf",
+	/** 第 6 个系列。cyan：亮色 10 级 `#0797b9`，暗色 9 级 `#00a2c7` */
+	chart6: "#0797b9",
+	/** 第 7 个系列。grass：亮色 10 级 `#3e9b4f`，暗色 9 级 `#46a758` */
+	chart7: "#3e9b4f",
+	/** 第 8 个系列。amber：亮色 11 级 `#ab6400`（9、10 级在浅色背景上不到 2:1），暗色 9 级 `#ffc53d` */
+	chart8: "#ab6400"
+});
+/** 字体族 */
+var fonts = css.defineVars("vtp-fonts", {
+	/**
+	* 正文字体：西文用系统界面字体；中文在 Windows 上优先“微软雅黑 UI”（界面字号下字距更紧凑），
+	* Linux 上是思源黑体（Noto / Source Han Sans）
+	*/
+	sans: "system-ui, -apple-system, \"Segoe UI\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Source Han Sans SC\", sans-serif",
+	/**
+	* 等宽字体：代码、需要数字对齐的地方。装了 Cascadia Code（Windows 11 自带）、JetBrains Mono 时优先用它们，
+	* 字形比 Consolas 清楚
+	*/
+	mono: "ui-monospace, \"Cascadia Code\", \"JetBrains Mono\", \"SFMono-Regular\", Consolas, \"Liberation Mono\", monospace",
+	/** 衬线字体：书卷感的标题、引文（纸张主题的标题用它） */
+	serif: "\"Noto Serif SC\", \"Source Han Serif SC\", \"Songti SC\", STSong, \"SimSun\", Georgia, serif",
+	/** 标题（H1–H6）的字体：默认同正文，主题可以换成衬线 */
+	heading: "system-ui, -apple-system, \"Segoe UI\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Source Han Sans SC\", sans-serif"
+});
+/** 字号：xs–xl 用于界面文字（也是组件 size 档位对应的字号），xxl、xxxl 用于标题 */
+var fontSizes = css.defineVars("vtp-font-sizes", {
+	/** `12px`：辅助说明、标签 */
+	xs: "12px",
+	/** `13px`：紧凑控件 */
+	sm: "13px",
+	/** `14px`：正文与默认控件；Provider 用它设置区域的基准字号 */
+	md: "14px",
+	/** `16px`：宽松控件、小标题 */
+	lg: "16px",
+	/** `18px`：强调文字、卡片标题 */
+	xl: "18px",
+	/** `24px`：页面标题 */
+	xxl: "24px",
+	/** `30px`：大标题 */
+	xxxl: "30px"
+});
+/** 字重 */
+var fontWeights = css.defineVars("vtp-font-weights", {
+	/** `300` */
+	light: "300",
+	/** `400`：正文 */
+	normal: "400",
+	/** `500`：标签、表头 */
+	medium: "500",
+	/** `600`：按钮、标题 */
+	semibold: "600",
+	/** `700` */
+	bold: "700"
+});
+/** 行高（不带单位，随字号缩放） */
+var lineHeights = css.defineVars("vtp-line-heights", {
+	/** `1`：图标、单行徽标 */
+	none: "1",
+	/** `1.25`：按钮等单行控件、标题 */
+	tight: "1.25",
+	/** `1.375`：紧凑的多行文字 */
+	snug: "1.375",
+	/** `1.5`：正文 */
+	normal: "1.5",
+	/** `1.75`：长文阅读 */
+	relaxed: "1.75"
+});
+/** 字间距（em，随字号缩放）：中文正文保持 normal，大字号标题可以略收紧 */
+var letterSpacings = css.defineVars("vtp-letter-spacings", {
+	/** `-0.02em`：大标题 */
+	tighter: "-0.02em",
+	/** `-0.01em`：小标题 */
+	tight: "-0.01em",
+	/** `0`：正文 */
+	normal: "0",
+	/** `0.02em`：小字号的标签 */
+	wide: "0.02em",
+	/** `0.05em`：全大写的英文标签 */
+	wider: "0.05em"
+});
+/** 间距：em，随组件字号缩放；页面级布局间距由宿主决定 */
+var space = css.defineVars("vtp-space", {
+	/** `0` */
+	none: "0",
+	/** `0.25em`：图标与文字之间、控件的上下内边距 */
+	xs: "0.25em",
+	/** `0.5em`：控件内部元素之间 */
+	sm: "0.5em",
+	/** `0.75em`：输入框水平内边距、浮层内边距 */
+	md: "0.75em",
+	/** `1em`：按钮水平内边距、表单项之间 */
+	lg: "1em",
+	/** `1.5em`：卡片、对话框内边距 */
+	xl: "1.5em"
+});
+/**
+* 尺寸：宽、高、最小最大尺寸。控件规格用 em 随字号缩放；
+* 容器宽度（Container 与页面内容的最大宽度）是页面级的，用 rem，跟随浏览器的字号设置
+*/
+var sizes = css.defineVars("vtp-sizes", {
+	/** `2.25em`：单行控件（按钮、输入框、下拉框）的高度 */
+	control: "2.25em",
+	/** `24px`：可点击区域的最小尺寸（WCAG 2.2 目标尺寸 24×24），与 control 取较大值 */
+	minTarget: "24px",
+	/** `30rem`（480px）：窄内容，如登录表单 */
+	xs: "30rem",
+	/** `40rem`（640px）：表单页、设置页 */
+	sm: "40rem",
+	/** `48rem`（768px）：文章、详情页 */
+	md: "48rem",
+	/** `64rem`（1024px）：常规页面 */
+	lg: "64rem",
+	/** `80rem`（1280px）：宽表格、仪表盘 */
+	xl: "80rem",
+	/** `100%`：占满容器 */
+	full: "100%"
+});
+/**
+* 响应式断点：视口不窄于对应的容器宽度（与 sizes 的 sm / md / lg / xl 一致）。
+* 媒体查询里不能用 CSS 变量，所以是普通常量：
+*
+*   gridTemplateColumns: { default: 'minmax(0, 1fr)', [breakpoints.lg]: 'minmax(0, 1fr) 20rem' }
+*
+* 同一个属性上写了几个断点时，除最后一档外都用 xxOnly（只在这一档）：样式引擎不按宽度给媒体查询排序，
+* 重叠的区间谁生效取决于规则的先后，可能是窄的那档盖住宽的：
+*
+*   gridTemplateColumns: { default: null, [breakpoints.lgOnly]: '16rem 1fr', [breakpoints.xl]: '16rem 1fr 14rem' }
+*/
+var breakpoints = {
+	/** 40rem（640px）以上：大屏手机横屏、小平板 */
+	sm: "@media (min-width: 40rem)",
+	/** 48rem（768px）以上：平板 */
+	md: "@media (min-width: 48rem)",
+	/** 64rem（1024px）以上：桌面，侧栏常驻 */
+	lg: "@media (min-width: 64rem)",
+	/** 80rem（1280px）以上：宽屏，右侧栏也显示 */
+	xl: "@media (min-width: 80rem)",
+	/** 40rem 到 48rem 之间：同一属性写了几个断点时用，避免区间重叠 */
+	smOnly: "@media (min-width: 40rem) and (max-width: 47.99rem)",
+	/** 48rem 到 64rem 之间 */
+	mdOnly: "@media (min-width: 48rem) and (max-width: 63.99rem)",
+	/** 64rem 到 80rem 之间 */
+	lgOnly: "@media (min-width: 64rem) and (max-width: 79.99rem)"
+};
+/** 圆角：em，随组件字号缩放；整体改成直角或更圆时覆盖这一组 */
+var radii = css.defineVars("vtp-radii", {
+	/** `0` */
+	none: "0",
+	/** `0.15em`：控件内的小元素 */
+	xs: "0.15em",
+	/** `0.25em`：标签、复选框 */
+	sm: "0.25em",
+	/** `0.4em`：按钮、输入框 */
+	md: "0.4em",
+	/** `0.7em`：卡片、浮层 */
+	lg: "0.7em",
+	/** `1em`：对话框 */
+	xl: "1em",
+	/** 全圆：胶囊按钮、头像、开关 */
+	full: "9999px"
+});
+/** 边框与描边宽度（px，不随字号缩放）：边框、分隔线、焦点环的宽度与间隔 */
+var borderWidths = css.defineVars("vtp-border-widths", {
+	/** `0` */
+	none: "0",
+	/** `1px`：边框、分隔线 */
+	xs: "1px",
+	/** `2px`：焦点环宽度与间隔、选中态的强调边框 */
+	sm: "2px",
+	/** `3px`：提示条侧边的色条 */
+	md: "3px",
+	/** `4px` */
+	lg: "4px",
+	/** `6px` */
+	xl: "6px"
+});
+/** 阴影：取自 Radix Themes 的第 2–6 级，去掉了模拟边框的 1px 描边（组件自己画边框）；暗色主题另有一套 */
+var shadows = css.defineVars("vtp-shadows", {
+	/** 无阴影 */
+	none: "none",
+	/** 贴近表面：卡片 */
+	xs: "0 1px 1px 0 #00005506, 0 2px 1px -1px rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.05)",
+	/** 轻微浮起：悬停的卡片 */
+	sm: "0 2px 3px -2px #0000330f, 0 3px 12px -4px rgba(0, 0, 0, 0.1), 0 4px 16px -8px rgba(0, 0, 0, 0.1)",
+	/** 浮起：下拉面板 */
+	md: "0 8px 40px rgba(0, 0, 0, 0.05), 0 12px 32px -16px #0000330f",
+	/** 浮层：弹出框、菜单、提示 */
+	lg: "0 12px 60px rgba(0, 0, 0, 0.15), 0 12px 32px -16px #0009321f",
+	/** 对话框 */
+	xl: "0 12px 60px rgba(0, 0, 0, 0.15), 0 16px 64px #00005506, 0 16px 36px -20px #00062e32"
+});
+/** 用户开启“减少动态效果”时，所有时长都变成 0：组件直接用这些 token，不必各自写媒体查询 */
+var reduce = "@media (prefers-reduced-motion: reduce)";
+/** 动效时长（参考 Material 3）；开启“减少动态效果”时自动为 0 */
+var durations = css.defineVars("vtp-durations", {
+	/** `0ms` */
+	none: "0ms",
+	/** `75ms`：按下反馈 */
+	xs: {
+		default: "75ms",
+		[reduce]: "0ms"
+	},
+	/** `120ms`：悬停的颜色变化 */
+	sm: {
+		default: "120ms",
+		[reduce]: "0ms"
+	},
+	/** `200ms`：展开、淡入、浮层出现 */
+	md: {
+		default: "200ms",
+		[reduce]: "0ms"
+	},
+	/** `300ms`：对话框、抽屉 */
+	lg: {
+		default: "300ms",
+		[reduce]: "0ms"
+	},
+	/** `500ms`：大面积的页面切换 */
+	xl: {
+		default: "500ms",
+		[reduce]: "0ms"
+	}
+});
+/** 缓动曲线（参考 Material 3） */
+var easings = css.defineVars("vtp-easings", {
+	/** 标准：位置与尺寸变化 */
+	standard: "cubic-bezier(0.2, 0, 0, 1)",
+	/** 进入：元素出现（先快后慢） */
+	enter: "cubic-bezier(0.05, 0.7, 0.1, 1)",
+	/** 退出：元素消失（先慢后快） */
+	exit: "cubic-bezier(0.3, 0, 0.8, 0.15)"
+});
+/** 不透明度 */
+var opacities = css.defineVars("vtp-opacities", { 
+/** `0.5`：不可用的元素 */
+disabled: "0.5" });
+/** SVG 线宽（图标 24 格画布上的单位，不带单位）；Icon 默认 md，strokeWidth 可以逐个覆盖 */
+var strokeWidths = css.defineVars("vtp-stroke-widths", {
+	/** `1`：细线图标 */
+	xs: "1",
+	/** `1.5` */
+	sm: "1.5",
+	/** `2`：Lucide 的默认线宽 */
+	md: "2",
+	/** `2.5` */
+	lg: "2.5",
+	/** `3`：粗线图标 */
+	xl: "3"
+});
+/** 主题 tokens 的各组：组名 → 变量（`var(--vtp-space-md)`），用法见文件说明 */
+var t = css.defineTokens({
+	/** 颜色：背景与表面、填充、文字、边框、品牌色与状态色、图表色 */
+	colors,
+	/** 字体族 */
+	fonts,
+	/** 字号：xs–xl 是界面文字（组件 size 档位），xxl、xxxl 是标题 */
+	fontSizes,
+	/** 字重 */
+	fontWeights,
+	/** 行高（不带单位，随字号缩放） */
+	lineHeights,
+	/** 字间距（em，随字号缩放） */
+	letterSpacings,
+	/** 间距（em，随组件字号缩放） */
+	space,
+	/** 尺寸：控件高度、最小点击区域、容器宽度 */
+	sizes,
+	/** 圆角（em，随组件字号缩放） */
+	radii,
+	/** 边框与描边宽度（px，不随字号缩放） */
+	borderWidths,
+	/** 阴影：浮起的层级 */
+	shadows,
+	/** 不透明度 */
+	opacities,
+	/** SVG 线宽（图标 24 格画布上的单位） */
+	strokeWidths,
+	/** 动效时长；开启“减少动态效果”时为 0 */
+	durations,
+	/** 缓动曲线 */
+	easings
+});
+//#endregion
+export { borderWidths, breakpoints, colors, durations, easings, fontSizes, fontWeights, fonts, letterSpacings, lineHeights, opacities, radii, shadows, sizes, space, strokeWidths, t };
+
+//# sourceMappingURL=tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../../src/config/theme/tokens.ts"],"sourcesContent":["/**\n * 主题 tokens：组件里的颜色、字体、间距、圆角、阴影、动效都只从这里取，不写裸值。\n * 每组一个 defineVars，变量名是 `--vtp-组名-token`。这里的取值即亮色主题，暗色主题见 dark.ts。\n *\n * 用法：值整个就是一个 token 时写字符串 '_md'、'_space.md'（COMPONENTS.md §4），文件末尾的 defineTokens 登记各组，\n * 样式引擎展开样式时按组名查到变量；utils/props.ts 导入这个模块，组件渲染之前一定登记过。\n * 值里夹着 token（计算、多值、混色）时在模板字符串里用 `t`：\n *\n *   transition: `opacity ${t.durations.md} ${t.easings.standard}`,\n *   marginInlineStart: `calc(-1 * ${t.borderWidths.xs})`,\n *\n * 取舍参考：\n *   - 颜色与阴影取自 Radix Colors / Radix Themes，按 Radix 12 级的用途约定映射成语义 token\n *     （1–2 背景，3–5 交互填充，6–8 边框，9–10 实色，11–12 文字）\n *   - 尺寸、间距、圆角用 em，随组件字号等比缩放（字号即尺寸档位，见 COMPONENTS.md §3）；\n *     边框宽度用 px，容器宽度用 rem\n *   - 分组参考 Stitches / Chakra / Panda 的 token 分类，组名即样式里短写的对照组（@zerodep-dev/vue-tsx-pro-tsx 的 token-map.ts）\n *   - 动效时长与缓动参考 Material 3\n *   - 分档：一般 xs–xl 五档，需要时加 none（去掉）与 full（全圆）；颜色、行高、字间距、不透明度按语义命名\n *   - 不设 z-index：弹出层、对话框用原生 popover / dialog，渲染在顶层（top layer），不参与层叠顺序\n */\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\n\n/** 颜色：slate 中性色、indigo 品牌色、red 危险、green 成功、amber 警告、blue 信息 */\nexport const colors = css.defineVars('vtp-colors', {\n  // ───────── 背景与表面 ─────────\n\n  /** 页面背景。slate 1：亮色 `#fcfcfd`，暗色 `#111113` */\n  background: '#fcfcfd',\n  /** 卡片、输入框等表面。亮色 slate 1 `#fcfcfd`，暗色 slate 2 `#18191b` */\n  surface: '#fcfcfd',\n  /** 弱化的区域背景：表头、侧栏、代码块。slate 2：亮色 `#f9f9fb`，暗色 `#18191b` */\n  surfaceMuted: '#f9f9fb',\n  /**\n   * 浮层（弹出框、菜单、对话框）表面，靠描边与阴影区分层级。亮色 slate 1 `#fcfcfd`，暗色 slate 2 `#18191b`\n   * （不取第 3 级：那是 fill，浮层里的填充会看不见）\n   */\n  surfaceRaised: '#fcfcfd',\n\n  // ───────── 中性填充：没有背景的元素在交互时铺的底色 ─────────\n\n  /** 填充：标签、开关关闭态、弱按钮。slate 3：亮色 `#f0f0f3`，暗色 `#212225` */\n  fill: '#f0f0f3',\n  /** 填充悬停；也用于幽灵按钮、菜单项的悬停背景。slate 4：亮色 `#e8e8ec`，暗色 `#272a2d` */\n  fillHover: '#e8e8ec',\n  /** 填充按下、选中。slate 5：亮色 `#e0e1e6`，暗色 `#2e3135` */\n  fillActive: '#e0e1e6',\n\n  // ───────── 文字 ─────────\n\n  /** 主要文字。slate 12：亮色 `#1c2024`，暗色 `#edeef0` */\n  text: '#1c2024',\n  /** 次要文字、说明、图标。slate 11：亮色 `#60646c`，暗色 `#b0b4ba` */\n  textMuted: '#60646c',\n  /** 输入框占位文字。slate 10：亮色 `#80838d`，暗色 `#777b84` */\n  textPlaceholder: '#80838d',\n  /** 不可用的文字。slate 8：亮色 `#b9bbc6`，暗色 `#5a6169` */\n  textDisabled: '#b9bbc6',\n\n  // ───────── 边框 ─────────\n\n  /** 弱边框：分割线、表格线。slate 6：亮色 `#d9d9e0`，暗色 `#363a3f` */\n  borderMuted: '#d9d9e0',\n  /** 普通边框：输入框、卡片、浮层。slate 7：亮色 `#cdced6`，暗色 `#43484e` */\n  border: '#cdced6',\n  /** 强调边框：悬停。slate 8：亮色 `#b9bbc6`，暗色 `#5a6169` */\n  borderStrong: '#b9bbc6',\n\n  // ───────── 品牌色 ─────────\n\n  /** 品牌色实色：主按钮、选中的复选框。indigo 9：两套主题都是 `#3e63dd` */\n  accent: '#3e63dd',\n  /** 品牌色实色悬停。亮色 indigo 10 `#3358d4`；暗色比实色更深一点 `#3758d4`（indigo 10 `#5472e4` 配白字只有 4.28:1） */\n  accentHover: '#3358d4',\n  /** 品牌色实色上的文字与图标。Radix 规定 indigo 9 上用白字：`#ffffff` */\n  accentContrast: '#ffffff',\n  /** 品牌色文字：链接、选中项的文字。indigo 11：亮色 `#3a5bc7`，暗色 `#9eb1ff` */\n  accentText: '#3a5bc7',\n  /** 品牌色浅底：选中行、弱主按钮。indigo 3：亮色 `#edf2fe`，暗色 `#182449` */\n  accentSoft: '#edf2fe',\n  /** 品牌色浅底悬停。indigo 4：亮色 `#e1e9ff`，暗色 `#1d2e62` */\n  accentSoftHover: '#e1e9ff',\n  /** 品牌色边框：选中的卡片、弱主按钮描边。indigo 7：亮色 `#abbdf9`，暗色 `#3a4f97` */\n  accentBorder: '#abbdf9',\n\n  // ───────── 危险：删除等破坏性操作、校验错误 ─────────\n\n  /**\n   * 危险实色：危险按钮的底色，上面放 dangerContrast（白色）文字，要满足 4.5:1。\n   * red 9 配白字只有 3.91:1，所以亮色用 red 11 `#ce2c31`（5.21:1），暗色用 red 8 `#b54548`（5.37:1）\n   */\n  danger: '#ce2c31',\n  /** 危险实色悬停：比实色更深一点，白字才满足 4.5:1（red 10 只有 4.37:1）。亮色 `#b8272c`，暗色 `#a33b3e` */\n  dangerHover: '#b8272c',\n  /** 危险实色上的文字与图标：`#ffffff` */\n  dangerContrast: '#ffffff',\n  /** 危险文字：错误提示。亮色比 red 11 深一点 `#b8272c`（red 11 在 dangerSoftHover 上只有 4.07:1），暗色 red 11 `#ff9592` */\n  dangerText: '#b8272c',\n  /** 危险浅底：错误提示条。red 3：亮色 `#feebec`，暗色 `#3b1219` */\n  dangerSoft: '#feebec',\n  /** 危险浅底悬停。red 4：亮色 `#ffdbdc`，暗色 `#500f1c` */\n  dangerSoftHover: '#ffdbdc',\n  /** 危险边框：校验失败的输入框。red 7：亮色 `#f4a9aa`，暗色 `#8c333a` */\n  dangerBorder: '#f4a9aa',\n\n  // ───────── 状态色：成功、警告、信息（提示条、徽标、图标、按钮） ─────────\n\n  /**\n   * 成功文字与图标。亮色 green 12 `#193b2d`，暗色 green 11 `#3dd68c`。\n   * 亮色不用 11 级：green 11 在 successSoft（green 3）上只有 4.21:1，标记、提示条里的文字不到 4.5\n   */\n  successText: '#193b2d',\n  /** 成功浅底。green 3：亮色 `#e6f6eb`，暗色 `#132d21` */\n  successSoft: '#e6f6eb',\n  /** 成功边框。green 7：亮色 `#8eceaa`，暗色 `#28684a` */\n  successBorder: '#8eceaa',\n  /**\n   * 成功实色：成功按钮、实底徽标的底色，上面放 successContrast。亮色 `#008751`，暗色 green 9 `#30a46c`。\n   * 黄、绿、蓝的 9 级很亮：配白字不到 4.5:1 时亮色加深到够，暗色改配深色字。图形（勾选框、进度条）的填充仍用 successText：实色不一定在表面上到 3:1\n   */\n  success: '#008751',\n  /** 成功实色悬停：与 successContrast 的对比度只升不降（白字时加深，深色字时调亮）。亮色 `#007143`，暗色 `#52af7d` */\n  successHover: '#007143',\n  /** 成功实色上的文字与图标。亮色 `#ffffff`，暗色 `#111113` */\n  successContrast: '#ffffff',\n  /** 成功浅底悬停。green 4：亮色 `#d6f1df`，暗色 `#113b29` */\n  successSoftHover: '#d6f1df',\n  /**\n   * 警告文字与图标。亮色 amber 12 `#4f3422`，暗色 amber 11 `#ffca16`。\n   * 亮色不用 11 级：amber 11（`#ab6400`）在页面背景上对比度 4.49，不到 WCAG AA 的 4.5\n   */\n  warningText: '#4f3422',\n  /** 警告浅底。amber 3：亮色 `#fff7c2`，暗色 `#302008` */\n  warningSoft: '#fff7c2',\n  /** 警告边框。amber 7：亮色 `#e9c162`，暗色 `#714f19` */\n  warningBorder: '#e9c162',\n  /**\n   * 警告实色：警告按钮、实底徽标的底色，上面放 warningContrast。亮色 `#ffc53d`，暗色 amber 9 `#ffc53d`。\n   * 黄、绿、蓝的 9 级很亮：配白字不到 4.5:1 时亮色加深到够，暗色改配深色字。图形（勾选框、进度条）的填充仍用 warningText：实色不一定在表面上到 3:1\n   */\n  warning: '#ffc53d',\n  /** 警告实色悬停：与 warningContrast 的对比度只升不降（白字时加深，深色字时调亮）。亮色 `#ffcd5f`，暗色 `#ffcd5f` */\n  warningHover: '#ffcd5f',\n  /** 警告实色上的文字与图标。亮色 `#4f3422`，暗色 `#111113` */\n  warningContrast: '#4f3422',\n  /** 警告浅底悬停。amber 4：亮色 `#ffee9c`，暗色 `#3f2700` */\n  warningSoftHover: '#ffee9c',\n  /**\n   * 信息文字与图标。亮色 blue 12 `#113264`，暗色 blue 11 `#70b8ff`。\n   * 亮色不用 11 级：blue 11 在 infoSoft（blue 3）上只有 4.25:1\n   */\n  infoText: '#113264',\n  /** 信息浅底。blue 3：亮色 `#e6f4fe`，暗色 `#0d2847` */\n  infoSoft: '#e6f4fe',\n  /** 信息边框。blue 7：亮色 `#8ec8f6`，暗色 `#205d9e` */\n  infoBorder: '#8ec8f6',\n  /**\n   * 信息实色：信息按钮、实底徽标的底色，上面放 infoContrast。亮色 `#0073e0`，暗色 blue 9 `#0090ff`。\n   * 黄、绿、蓝的 9 级很亮：配白字不到 4.5:1 时亮色加深到够，暗色改配深色字。图形（勾选框、进度条）的填充仍用 infoText：实色不一定在表面上到 3:1\n   */\n  info: '#0073e0',\n  /** 信息实色悬停：与 infoContrast 的对比度只升不降（白字时加深，深色字时调亮）。亮色 `#0060bd`，暗色 `#3d9fff` */\n  infoHover: '#0060bd',\n  /** 信息实色上的文字与图标。亮色 `#ffffff`，暗色 `#111113` */\n  infoContrast: '#ffffff',\n  /** 信息浅底悬停。blue 4：亮色 `#d5efff`，暗色 `#003362` */\n  infoSoftHover: '#d5efff',\n\n  // ───────── 反色：深色提示框、Toast 这类与页面明暗相反的表面 ─────────\n\n  /** 反色表面。slate 12：亮色 `#1c2024`，暗色 `#edeef0` */\n  inverseSurface: '#1c2024',\n  /** 反色表面上的文字。slate 1：亮色 `#fcfcfd`，暗色 `#111113` */\n  inverseText: '#fcfcfd',\n\n  // ───────── 其他 ─────────\n\n  /**\n   * 焦点环（:focus-visible）。indigo 9：两套主题都是 `#3e63dd`。\n   * Radix 建议 7–8 级，但亮色下对比度不到 3:1（WCAG 2.2 焦点外观要求），所以用 9 级\n   */\n  focusRing: '#3e63dd',\n  /** 模态遮罩。亮色 blackA 6 `rgba(0, 0, 0, 0.4)`，暗色 blackA 8 `rgba(0, 0, 0, 0.6)` */\n  overlay: 'rgba(0, 0, 0, 0.4)',\n  /** 选中文字的底色（::selection）。indigo 5：亮色 `#d2deff`，暗色 `#253974` */\n  selection: '#d2deff',\n  /** 高亮标记：搜索命中、`<mark>`。amber 4：亮色 `#ffee9c`，暗色 `#3f2700` */\n  highlight: '#ffee9c',\n  /** 半透明表面：吸顶的顶栏（配合背景模糊）。页面背景加 80% 不透明 */\n  surfaceTranslucent: 'rgba(252, 252, 253, 0.8)',\n  // ───────── 代码高亮：代码块（surfaceMuted）、行内代码与高亮行（fill）、diff 的增删行上都要满足 4.5:1 ─────────\n  /** 关键字。indigo 11：亮色 `#3a5bc7`，暗色 `#9eb1ff` */\n  codeKeyword: '#3a5bc7',\n  /** 字符串。亮色比 green 11 深一点 `#1c7a51`（在代码块背景上 green 11 只有 4.49:1），暗色 green 11 `#3dd68c` */\n  codeString: '#1c7a51',\n  /** 数字、常量。亮色比 orange 11 深一点 `#bb4500`（orange 11 在代码块背景上只有 4.29:1），暗色 orange 11 `#ffa057` */\n  codeNumber: '#bb4500',\n  /** 函数名。violet 11：亮色 `#6550b9`，暗色 `#baa7ff` */\n  codeFunction: '#6550b9',\n  /** 类型、类名。亮色比 cyan 11 深一点 `#007590`（cyan 11 在行内代码的底色上只有 4.19:1），暗色 cyan 11 `#4ccce6` */\n  codeType: '#007590',\n  /** 注释、标点。slate 11：亮色 `#60646c`，暗色 `#b0b4ba` */\n  codeComment: '#60646c',\n  /** 标签名（HTML、JSX）。crimson 11：亮色 `#cb1d63`，暗色 `#ff92ad` */\n  codeTag: '#cb1d63',\n  /** 属性名。brown 11：亮色 `#815e46`，暗色 `#dbb594` */\n  codeAttribute: '#815e46',\n  /** diff 新增行的底色。green 3：亮色 `#e6f6eb`，暗色 `#132d21` */\n  codeInserted: '#e6f6eb',\n  /** diff 删除行的底色。red 3：亮色 `#feebec`，暗色 `#3b1219` */\n  codeDeleted: '#feebec',\n  // ───────── 图表系列：分类色板，按顺序分给各个系列；在页面与卡片背景上都要满足 3:1（WCAG 图形对比度） ─────────\n  // 每个色阶取能到 3:1 的最浅一级：亮色多为 9–10 级，暗色 9 级\n  /** 第 1 个系列：跟随品牌色。indigo 9：两套主题都是 `#3e63dd` */\n  chart1: '#3e63dd',\n  /** 第 2 个系列。teal：亮色 10 级 `#0d9b8a`，暗色 9 级 `#12a594` */\n  chart2: '#0d9b8a',\n  /** 第 3 个系列。orange：亮色 10 级 `#ef5f00`，暗色 9 级 `#f76b15` */\n  chart3: '#ef5f00',\n  /** 第 4 个系列。crimson 9：两套主题都是 `#e93d82` */\n  chart4: '#e93d82',\n  /** 第 5 个系列。violet 9：两套主题都是 `#6e56cf` */\n  chart5: '#6e56cf',\n  /** 第 6 个系列。cyan：亮色 10 级 `#0797b9`，暗色 9 级 `#00a2c7` */\n  chart6: '#0797b9',\n  /** 第 7 个系列。grass：亮色 10 级 `#3e9b4f`，暗色 9 级 `#46a758` */\n  chart7: '#3e9b4f',\n  /** 第 8 个系列。amber：亮色 11 级 `#ab6400`（9、10 级在浅色背景上不到 2:1），暗色 9 级 `#ffc53d` */\n  chart8: '#ab6400',\n});\n\n/** 字体族 */\nexport const fonts = css.defineVars('vtp-fonts', {\n  /**\n   * 正文字体：西文用系统界面字体；中文在 Windows 上优先“微软雅黑 UI”（界面字号下字距更紧凑），\n   * Linux 上是思源黑体（Noto / Source Han Sans）\n   */\n  sans: 'system-ui, -apple-system, \"Segoe UI\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Source Han Sans SC\", sans-serif',\n  /**\n   * 等宽字体：代码、需要数字对齐的地方。装了 Cascadia Code（Windows 11 自带）、JetBrains Mono 时优先用它们，\n   * 字形比 Consolas 清楚\n   */\n  mono: 'ui-monospace, \"Cascadia Code\", \"JetBrains Mono\", \"SFMono-Regular\", Consolas, \"Liberation Mono\", monospace',\n  /** 衬线字体：书卷感的标题、引文（纸张主题的标题用它） */\n  serif: '\"Noto Serif SC\", \"Source Han Serif SC\", \"Songti SC\", STSong, \"SimSun\", Georgia, serif',\n  /** 标题（H1–H6）的字体：默认同正文，主题可以换成衬线 */\n  heading:\n    'system-ui, -apple-system, \"Segoe UI\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei UI\", \"Microsoft YaHei\", \"Noto Sans SC\", \"Source Han Sans SC\", sans-serif',\n});\n\n/** 字号：xs–xl 用于界面文字（也是组件 size 档位对应的字号），xxl、xxxl 用于标题 */\nexport const fontSizes = css.defineVars('vtp-font-sizes', {\n  /** `12px`：辅助说明、标签 */\n  xs: '12px',\n  /** `13px`：紧凑控件 */\n  sm: '13px',\n  /** `14px`：正文与默认控件；Provider 用它设置区域的基准字号 */\n  md: '14px',\n  /** `16px`：宽松控件、小标题 */\n  lg: '16px',\n  /** `18px`：强调文字、卡片标题 */\n  xl: '18px',\n  /** `24px`：页面标题 */\n  xxl: '24px',\n  /** `30px`：大标题 */\n  xxxl: '30px',\n});\n\n/** 字重 */\nexport const fontWeights = css.defineVars('vtp-font-weights', {\n  /** `300` */\n  light: '300',\n  /** `400`：正文 */\n  normal: '400',\n  /** `500`：标签、表头 */\n  medium: '500',\n  /** `600`：按钮、标题 */\n  semibold: '600',\n  /** `700` */\n  bold: '700',\n});\n\n/** 行高（不带单位，随字号缩放） */\nexport const lineHeights = css.defineVars('vtp-line-heights', {\n  /** `1`：图标、单行徽标 */\n  none: '1',\n  /** `1.25`：按钮等单行控件、标题 */\n  tight: '1.25',\n  /** `1.375`：紧凑的多行文字 */\n  snug: '1.375',\n  /** `1.5`：正文 */\n  normal: '1.5',\n  /** `1.75`：长文阅读 */\n  relaxed: '1.75',\n});\n\n/** 字间距（em，随字号缩放）：中文正文保持 normal，大字号标题可以略收紧 */\nexport const letterSpacings = css.defineVars('vtp-letter-spacings', {\n  /** `-0.02em`：大标题 */\n  tighter: '-0.02em',\n  /** `-0.01em`：小标题 */\n  tight: '-0.01em',\n  /** `0`：正文 */\n  normal: '0',\n  /** `0.02em`：小字号的标签 */\n  wide: '0.02em',\n  /** `0.05em`：全大写的英文标签 */\n  wider: '0.05em',\n});\n\n/** 间距：em，随组件字号缩放；页面级布局间距由宿主决定 */\nexport const space = css.defineVars('vtp-space', {\n  /** `0` */\n  none: '0',\n  /** `0.25em`：图标与文字之间、控件的上下内边距 */\n  xs: '0.25em',\n  /** `0.5em`：控件内部元素之间 */\n  sm: '0.5em',\n  /** `0.75em`：输入框水平内边距、浮层内边距 */\n  md: '0.75em',\n  /** `1em`：按钮水平内边距、表单项之间 */\n  lg: '1em',\n  /** `1.5em`：卡片、对话框内边距 */\n  xl: '1.5em',\n});\n\n/**\n * 尺寸：宽、高、最小最大尺寸。控件规格用 em 随字号缩放；\n * 容器宽度（Container 与页面内容的最大宽度）是页面级的，用 rem，跟随浏览器的字号设置\n */\nexport const sizes = css.defineVars('vtp-sizes', {\n  /** `2.25em`：单行控件（按钮、输入框、下拉框）的高度 */\n  control: '2.25em',\n  /** `24px`：可点击区域的最小尺寸（WCAG 2.2 目标尺寸 24×24），与 control 取较大值 */\n  minTarget: '24px',\n  /** `30rem`（480px）：窄内容，如登录表单 */\n  xs: '30rem',\n  /** `40rem`（640px）：表单页、设置页 */\n  sm: '40rem',\n  /** `48rem`（768px）：文章、详情页 */\n  md: '48rem',\n  /** `64rem`（1024px）：常规页面 */\n  lg: '64rem',\n  /** `80rem`（1280px）：宽表格、仪表盘 */\n  xl: '80rem',\n  /** `100%`：占满容器 */\n  full: '100%',\n});\n\n/**\n * 响应式断点：视口不窄于对应的容器宽度（与 sizes 的 sm / md / lg / xl 一致）。\n * 媒体查询里不能用 CSS 变量，所以是普通常量：\n *\n *   gridTemplateColumns: { default: 'minmax(0, 1fr)', [breakpoints.lg]: 'minmax(0, 1fr) 20rem' }\n *\n * 同一个属性上写了几个断点时，除最后一档外都用 xxOnly（只在这一档）：样式引擎不按宽度给媒体查询排序，\n * 重叠的区间谁生效取决于规则的先后，可能是窄的那档盖住宽的：\n *\n *   gridTemplateColumns: { default: null, [breakpoints.lgOnly]: '16rem 1fr', [breakpoints.xl]: '16rem 1fr 14rem' }\n */\nexport const breakpoints = {\n  /** 40rem（640px）以上：大屏手机横屏、小平板 */\n  sm: '@media (min-width: 40rem)',\n  /** 48rem（768px）以上：平板 */\n  md: '@media (min-width: 48rem)',\n  /** 64rem（1024px）以上：桌面，侧栏常驻 */\n  lg: '@media (min-width: 64rem)',\n  /** 80rem（1280px）以上：宽屏，右侧栏也显示 */\n  xl: '@media (min-width: 80rem)',\n  /** 40rem 到 48rem 之间：同一属性写了几个断点时用，避免区间重叠 */\n  smOnly: '@media (min-width: 40rem) and (max-width: 47.99rem)',\n  /** 48rem 到 64rem 之间 */\n  mdOnly: '@media (min-width: 48rem) and (max-width: 63.99rem)',\n  /** 64rem 到 80rem 之间 */\n  lgOnly: '@media (min-width: 64rem) and (max-width: 79.99rem)',\n  // 字面量类型：条件键的类型要求是 `@${string}`\n} as const;\n\n/** 圆角：em，随组件字号缩放；整体改成直角或更圆时覆盖这一组 */\nexport const radii = css.defineVars('vtp-radii', {\n  /** `0` */\n  none: '0',\n  /** `0.15em`：控件内的小元素 */\n  xs: '0.15em',\n  /** `0.25em`：标签、复选框 */\n  sm: '0.25em',\n  /** `0.4em`：按钮、输入框 */\n  md: '0.4em',\n  /** `0.7em`：卡片、浮层 */\n  lg: '0.7em',\n  /** `1em`：对话框 */\n  xl: '1em',\n  /** 全圆：胶囊按钮、头像、开关 */\n  full: '9999px',\n});\n\n/** 边框与描边宽度（px，不随字号缩放）：边框、分隔线、焦点环的宽度与间隔 */\nexport const borderWidths = css.defineVars('vtp-border-widths', {\n  /** `0` */\n  none: '0',\n  /** `1px`：边框、分隔线 */\n  xs: '1px',\n  /** `2px`：焦点环宽度与间隔、选中态的强调边框 */\n  sm: '2px',\n  /** `3px`：提示条侧边的色条 */\n  md: '3px',\n  /** `4px` */\n  lg: '4px',\n  /** `6px` */\n  xl: '6px',\n});\n\n/** 阴影：取自 Radix Themes 的第 2–6 级，去掉了模拟边框的 1px 描边（组件自己画边框）；暗色主题另有一套 */\nexport const shadows = css.defineVars('vtp-shadows', {\n  /** 无阴影 */\n  none: 'none',\n  /** 贴近表面：卡片 */\n  xs: '0 1px 1px 0 #00005506, 0 2px 1px -1px rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.05)',\n  /** 轻微浮起：悬停的卡片 */\n  sm: '0 2px 3px -2px #0000330f, 0 3px 12px -4px rgba(0, 0, 0, 0.1), 0 4px 16px -8px rgba(0, 0, 0, 0.1)',\n  /** 浮起：下拉面板 */\n  md: '0 8px 40px rgba(0, 0, 0, 0.05), 0 12px 32px -16px #0000330f',\n  /** 浮层：弹出框、菜单、提示 */\n  lg: '0 12px 60px rgba(0, 0, 0, 0.15), 0 12px 32px -16px #0009321f',\n  /** 对话框 */\n  xl: '0 12px 60px rgba(0, 0, 0, 0.15), 0 16px 64px #00005506, 0 16px 36px -20px #00062e32',\n});\n\n/** 用户开启“减少动态效果”时，所有时长都变成 0：组件直接用这些 token，不必各自写媒体查询 */\nconst reduce = '@media (prefers-reduced-motion: reduce)';\n\n/** 动效时长（参考 Material 3）；开启“减少动态效果”时自动为 0 */\nexport const durations = css.defineVars('vtp-durations', {\n  /** `0ms` */\n  none: '0ms',\n  /** `75ms`：按下反馈 */\n  xs: { default: '75ms', [reduce]: '0ms' },\n  /** `120ms`：悬停的颜色变化 */\n  sm: { default: '120ms', [reduce]: '0ms' },\n  /** `200ms`：展开、淡入、浮层出现 */\n  md: { default: '200ms', [reduce]: '0ms' },\n  /** `300ms`：对话框、抽屉 */\n  lg: { default: '300ms', [reduce]: '0ms' },\n  /** `500ms`：大面积的页面切换 */\n  xl: { default: '500ms', [reduce]: '0ms' },\n});\n\n/** 缓动曲线（参考 Material 3） */\nexport const easings = css.defineVars('vtp-easings', {\n  /** 标准：位置与尺寸变化 */\n  standard: 'cubic-bezier(0.2, 0, 0, 1)',\n  /** 进入：元素出现（先快后慢） */\n  enter: 'cubic-bezier(0.05, 0.7, 0.1, 1)',\n  /** 退出：元素消失（先慢后快） */\n  exit: 'cubic-bezier(0.3, 0, 0.8, 0.15)',\n});\n\n/** 不透明度 */\nexport const opacities = css.defineVars('vtp-opacities', {\n  /** `0.5`：不可用的元素 */\n  disabled: '0.5',\n});\n\n/** SVG 线宽（图标 24 格画布上的单位，不带单位）；Icon 默认 md，strokeWidth 可以逐个覆盖 */\nexport const strokeWidths = css.defineVars('vtp-stroke-widths', {\n  /** `1`：细线图标 */\n  xs: '1',\n  /** `1.5` */\n  sm: '1.5',\n  /** `2`：Lucide 的默认线宽 */\n  md: '2',\n  /** `2.5` */\n  lg: '2.5',\n  /** `3`：粗线图标 */\n  xl: '3',\n});\n\n/** 主题 tokens 的各组：组名 → 变量（`var(--vtp-space-md)`），用法见文件说明 */\nexport const t = css.defineTokens({\n  /** 颜色：背景与表面、填充、文字、边框、品牌色与状态色、图表色 */\n  colors,\n  /** 字体族 */\n  fonts,\n  /** 字号：xs–xl 是界面文字（组件 size 档位），xxl、xxxl 是标题 */\n  fontSizes,\n  /** 字重 */\n  fontWeights,\n  /** 行高（不带单位，随字号缩放） */\n  lineHeights,\n  /** 字间距（em，随字号缩放） */\n  letterSpacings,\n  /** 间距（em，随组件字号缩放） */\n  space,\n  /** 尺寸：控件高度、最小点击区域、容器宽度 */\n  sizes,\n  /** 圆角（em，随组件字号缩放） */\n  radii,\n  /** 边框与描边宽度（px，不随字号缩放） */\n  borderWidths,\n  /** 阴影：浮起的层级 */\n  shadows,\n  /** 不透明度 */\n  opacities,\n  /** SVG 线宽（图标 24 格画布上的单位） */\n  strokeWidths,\n  /** 动效时长；开启“减少动态效果”时为 0 */\n  durations,\n  /** 缓动曲线 */\n  easings,\n});\n"],"mappings":"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"}

package/dist/config/vue-router.d.ts

@@ -0,0 +1,67 @@
+import type { RouteLocationNormalizedLoaded, Router } from 'vue-router';
+import type { LoadingBarController } from '../feedback/LoadingBar';
+import type { UiRouter } from './context';
+/** 怎样算“当前页” */
+export interface RouteMatches {
+    /** 路径完全相同（默认）：面包屑、分页、标签页 */
+    exact: unknown;
+    /** 当前路径以它开头：侧边导航里 /orders 在 /orders/42 页面也高亮 */
+    prefix: unknown;
+}
+/** vueRouterAdapter 的选项 */
+export interface VueRouterAdapterOptions {
+    /** 怎样算当前页，默认 exact */
+    match?: keyof RouteMatches;
+}
+/** 把 vue-router 的实例转成组件库的路由适配 */
+export declare function vueRouterAdapter(router: Router, { match }?: VueRouterAdapterOptions): UiRouter;
+/**
+ * 路由切换时走顶部加载条：开始跳转时 start，跳完 finish，跳转失败（守卫抛错、懒加载的页面加载失败）时 error。
+ * 被守卫取消、重定向的不算失败。返回取消监听的函数。
+ *
+ *   useRouteLoadingBar(router, loadingBar)
+ */
+export declare function useRouteLoadingBar(router: Router, controller: Pick<LoadingBarController, 'start' | 'finish' | 'error'>): () => void;
+/** 路由页签的一项（与 PageTabs 的 PageTab 同形） */
+export interface RouteTab {
+    /** 路由的路径（不含查询参数）：同一路径一个页签 */
+    path: string;
+    /** 页签上的文字 */
+    title: string;
+    /** 固定的页（首页）：不能关 */
+    pinned?: boolean;
+}
+/** 页签用到的路由信息：当前路由与 router.resolve 的结果都有 */
+export type RouteTabSource = Pick<RouteLocationNormalizedLoaded, 'path' | 'fullPath' | 'meta' | 'params' | 'query'>;
+/** useRouteTabs 的选项 */
+export interface RouteTabsOptions {
+    /** 固定在最前面、不能关的首页 */
+    home?: string;
+    /** 页签的文字：默认取路由的 meta.title，没有时是路径 */
+    title?: (route: RouteTabSource) => string;
+    /** 哪些路由进页签：默认都进（登录页、404 这类返回 false） */
+    include?: (route: RouteLocationNormalizedLoaded) => boolean;
+    /** 最多开几个：超过时关掉最早打开的（固定的、当前的除外），默认不限 */
+    max?: number;
+}
+/** 路由页签的状态：属性名与 PageTabs 的一致，可以整个展开 `<PageTabs {...tabs} />` */
+export interface RouteTabs {
+    /** 打开过的页面，按显示的顺序 */
+    readonly pages: readonly RouteTab[];
+    /** 当前页的路径 */
+    readonly current: string;
+    /** 切到一个页签：回到它上次的完整地址（带查询参数） */
+    onNavigate(path: string): void;
+    /** 关闭页签；关掉的有当前页时跳到旁边的（后面的，没有时前面的） */
+    onClose(paths: readonly string[]): void;
+    /** 按新的顺序排 */
+    onReorder(paths: readonly string[]): void;
+}
+/**
+ * 路由页签（后台的多页签）：进过的路由各一个页签，和 PageTabs 一起放在 AppShell 的 tabs 里。
+ * 同一路径一个页签，切回来时回到它上次的完整地址（筛选条件、页码在查询参数里时不丢）。在组件 setup 里调用。
+ *
+ *   const tabs = useRouteTabs(router, { home: '/' });
+ *   <AppShell tabs={<PageTabs {...tabs} />} …>
+ */
+export declare function useRouteTabs(router: Router, options?: RouteTabsOptions): RouteTabs;