UI/packages/design/tokens/tokens.css

/* @ui-arch design tokens - light theme defaults + dark theme overrides
   分组：颜色 / 混色浓度 / 圆角 / 间距 / 字号 / 字距 / 字重与行高 / 边框 / 阴影 / 动效 / 焦点环 / 控件高度 / 层级
   约定：皮肤包（packages/skin/ui/ui.css）只能消费 var(--ua-*)，禁止硬编码颜色、阴影、时长、字号；
   本文件是令牌唯一来源，ua tokens / llms-full.txt / MCP get_tokens 全部从这里派生。 */
:root {
  /* ---- 颜色：语义色，暗色主题逐个覆盖 ---- */
  --ua-color-bg: #ffffff; /* 页面底色：弹层、卡片之外的最底层 */
  --ua-color-surface: #f6f7f9; /* 表面色：卡片 / 表头 / 次级容器 */
  --ua-color-surface-2: color-mix(in srgb, var(--ua-color-text) 4%, var(--ua-color-bg)); /* 表面二阶：悬停底、次级容器 */
  --ua-color-surface-3: color-mix(in srgb, var(--ua-color-text) 8%, var(--ua-color-bg)); /* 表面三阶：按下底、最深容器 */
  --ua-color-surface-inset: color-mix(in srgb, var(--ua-color-text) 5%, var(--ua-color-bg)); /* 凹陷区：输入框 / 代码块底 */
  --ua-color-text: #1c1e21; /* 主文本色：正文与标题共用 */
  --ua-color-text-muted: #676d78; /* 辅助文本色：说明、占位、次要信息（比 #6b7280 略深：凹陷底上原值仅 4.39，过不了 AA 4.5） */
  --ua-color-text-secondary: #4b5158; /* 次级文本色：介于主文本与辅助文本之间 */
  --ua-color-text-faint: #9aa0a8; /* 三级文本色：禁用、极弱说明 */
  --ua-color-overlay: rgba(0, 0, 0, 0.45); /* 遮罩：抽屉 / 弹窗 / 命令面板等半透明底 */
  --ua-color-overlay-strong: rgba(0, 0, 0, 0.6); /* 强遮罩：大图预览等需要更强聚焦的浮层 */
  --ua-color-border: rgba(0, 0, 0, 0.15); /* 基础边框色：输入框 / 卡片 / 分割线 */
  --ua-color-scrollbar: rgba(0, 0, 0, 0.22); /* 滚动条拇指色：比边框重一档，白底上看得清又不抢内容 */
  --ua-color-scrollbar-hover: rgba(0, 0, 0, 0.38); /* 滚动条拇指悬停色：加深表示可拖拽 */
  --ua-color-highlight: rgba(255, 255, 255, 0.5); /* 内高光白：主按钮等实色控件顶缘的 1px 高光（暗色必须降档，否则刺眼） */
  --ua-color-accent: #185fa5; /* 强调色：主操作、选中态、焦点环底色 */
  --ua-color-accent-contrast: #ffffff; /* 强调色上的文字色：保证主按钮对比度 */
  --ua-color-accent-soft: color-mix(in srgb, var(--ua-color-accent) 72%, var(--ua-color-bg)); /* 柔和强调色：细线 / 指示条 / 内嵌焦点环用，纯 accent 做 2px 实线会发刺 */
  --ua-color-tint-accent: color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-soft), transparent); /* 语义淡底标准档：选中底、激活项底 */
  --ua-color-tint-accent-weak: color-mix(in srgb, var(--ua-color-accent) 5%, transparent); /* 语义淡底弱档：悬停底、极弱强调底 */
  --ua-color-danger: #a32d2d; /* 危险色：错误、删除、校验失败 */
  --ua-color-success: #0f6e56; /* 成功色：完成、通过、正向结果 */
  --ua-color-warning: #9a6b1f; /* 警告色：提醒、需注意但不阻断 */

  /* ---- 混色浓度：color-mix 里「混入多少」的档位，百分比亮暗通用（近档已就近收敛：12→10、16/20/24→18、40→45、65/80→70） ---- */
  --ua-alpha-soft: 10%; /* 淡底档：选中底、激活项底、语义色淡底 */
  --ua-alpha-tint: 18%; /* 弱强调档：hover 淡底、警示淡底、白色细纹 */
  --ua-alpha-line: 30%; /* 描边调和档：边框色里混入文本色加深 */
  --ua-alpha-mid: 45%; /* 中浓档：半透虚线边、淡化滚动条底 */
  --ua-alpha-strong: 55%; /* 强调档：语义色图标底、强调描边 */
  --ua-alpha-heavy: 70%; /* 重档：渐变端点、近实色的弱化描边 */

  /* ---- 圆角：三档，控件用小、卡片用中、弹层用大 ---- */
  --ua-radius-sm: 4px; /* 小圆角：按钮 / 输入框 / 标签等控件 */
  --ua-radius-md: 8px; /* 中圆角：卡片 / 面板 / 分组容器 */
  --ua-radius-lg: 12px; /* 大圆角：弹窗 / 抽屉等浮层外壳 */
  --ua-radius-md-inset: calc(var(--ua-radius-md) - 1px); /* 内衬圆角：贴边的内层块（输入附加块等）与外层弧线对齐，减去 1px 边框 */

  /* ---- 间距：4px 基准四档 + 表格单元格复合值 ---- */
  --ua-space-1: 4px; /* 间距 1 档：图标与文字之间、紧邻元素 */
  --ua-space-2: 8px; /* 间距 2 档：控件内边距、同组元素间隔 */
  --ua-space-3: 12px; /* 间距 3 档：表单行内边距、卡片内边距 */
  --ua-space-4: 16px;
  --ua-space-05: 2px; /* 半步：微型内距（紧凑徽标内衬、选中点偏移） */
  --ua-space-15: 6px; /* 一档半：紧凑控件内距（小按钮 / 标签） */
  --ua-space-25: 10px; /* 二档半：标准控件内距（介于 8 与 12 之间的既有主流值） */
  --ua-space-35: 14px; /* 三档半：宽松行内距（列表行 / 菜单行） */ /* 间距 4 档：区块内边距、卡片间距 */
  --ua-space-table-cell: var(--ua-space-2) var(--ua-space-3); /* 表格单元格内边距：上下 2 档 / 左右 3 档 */
  --ua-space-6: 24px; /* 六档：空状态整行留白等大面积竖直呼吸（比 4 档再松一档，不进半步梯子） */
  --ua-space-indent: 22px; /* 层级缩进：树 / 时间线每级缩进量与图标列宽度对齐，不参与常规内距梯子 */

  /* ---- 字号：五档主轴 + 三档展示字号 + 两档相对缩放（10/11px 统一归入 xs，避免单独成档） ---- */
  --ua-font-size-xs: 11px; /* 最小字号：角标 / 辅助说明 / 密排表格 */
  --ua-font-size-sm: 12px; /* 小字号：次级文本、表头、提示 */
  --ua-font-size-md: 13px; /* 正文字号：控件文本与默认正文 */
  --ua-font-size-lg: 14px; /* 大字号：强调正文、卡片标题 */
  --ua-font-size-xl: 16px; /* 次标题字号：分组标题、弹窗标题 */
  --ua-font-size-2xl: 18px; /* 标题字号：页面区块标题 */
  --ua-font-size-3xl: 22px; /* 图标字号：评分星、开关内嵌图标等由字符撑起的图形 */
  --ua-font-size-4xl: 26px; /* 指标字号：统计卡片的主数值 */
  --ua-font-size-5xl: 34px; /* 插画字号：空状态、结果页的大号字符图标 */
  --ua-font-size-scale-md: 0.92em; /* 相对缩放档（相对父级）：代码片段等需跟上下文缩放的文本 */
  --ua-font-size-scale-sm: 0.85em; /* 相对缩放小档：行内小图标随文字一起缩，不建绝对像素 */

  /* ---- 字距：两档，宽档给表头 / 分组小标题做节奏，紧档给大标题收边 ---- */
  --ua-tracking-wide: 0.04em; /* 宽档：表头、分组标题、大写小标题（小字号需要字距才不糊成一团） */
  --ua-tracking-tight: -0.01em; /* 紧档：大标题反向收边，字号越大越需要收紧才不散 */

  /* ---- 字重与行高：标题 / 正文 / 辅助三档 ---- */
  --ua-weight-normal: 400; /* 正文档：正文与表单值 */
  --ua-weight-medium: 500; /* 辅助强调档：控件文本、表头、次要标题 */
  --ua-weight-semibold: 600; /* 标题档：区块标题、关键数值 */
  --ua-weight-bold: 700; /* 特重档：统计大数字等少数强调位 */
  --ua-leading-none: 1; /* 单行档：图标 / 数字 / 按钮文字的垂直居中 */
  --ua-leading-tight: 1.35; /* 紧凑档：标题、单行控件 */
  --ua-leading-normal: 1.55; /* 正文档：多行正文、说明文字 */

  /* ---- 边框：细分（比基础边框更淡，用于分割线，避免 1px 线过重） ---- */
  --ua-border-subtle: color-mix(in srgb, var(--ua-color-border) 60%, transparent); /* 细分边框色（专用于分割线）：表格行线 / 卡片页脚 / 弹窗抽屉页头页脚 / 列表项 / 选项卡底边 / 折叠面板与步骤条连接线 / 分隔线组件 */

  /* ---- 阴影：四档 elevation，柔和优先（扩散大、透明度低） ---- */
  --ua-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06); /* 1 档：贴地投影，用于卡片 / 输入组 / 轻浮起 */
  --ua-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.1); /* 2 档：下拉菜单 / 选择面板 / 气泡提示 */
  --ua-shadow-3: 0 10px 28px rgba(0, 0, 0, 0.12); /* 3 档：浮层 / 悬浮面板 / 拖拽中的卡片 */
  --ua-shadow-4: 0 18px 44px rgba(0, 0, 0, 0.14); /* 4 档：模态弹窗 / 抽屉 / 通知中心等最高层 */
  --ua-shadow-accent: 0 3px 10px color-mix(in srgb, var(--ua-color-accent) 25%, transparent); /* 主题色投影：主按钮 / 强调控件悬停浮起 */
  --ua-shadow-accent-strong: 0 8px 20px color-mix(in srgb, var(--ua-color-accent) 35%, transparent); /* 主题色强投影：返回顶部等悬浮强调件 */
  --ua-shadow-highlight: inset 0 1px 0 var(--ua-color-highlight); /* 内高光型：实色控件顶缘 1px 高光（1px 是细线语义，不进 elevation 四档） */
  --ua-shadow-hairline: inset 0 -1px 0 var(--ua-border-subtle); /* 描边型：粘性表头 / 吸底条底部的 1px 细线（用阴影画线，不占布局高度） */
  --ua-shadow-inset-border: inset 0 0 0 1px var(--ua-color-border); /* 描边型：日历「今天」等只需要一圈细内框、不想改盒模型的场景 */
  --ua-shadow-inset-accent: inset 0 0 0 1px var(--ua-color-accent); /* 描边型：强调色内框，标记「今天」这类弱选中态 */
  --ua-shadow-gap: 0 0 0 2px var(--ua-color-bg); /* 断口型：用底色描一圈把相邻元素分开（头像组叠层、角标与按钮边缘） */

  /* ---- 动效：四档交互时长 + 四档循环时长 + 两条主缓动曲线 ---- */
  --ua-duration-fast: 0.15s; /* 快：hover / 聚焦 / 颜色与边框变化（既有样式的主流时长） */
  --ua-duration-base: 0.2s; /* 中：展开收起 / 位移 / 透明度过渡 */
  --ua-duration-slow: 0.25s; /* 慢：浮层出入场 / 较大面积变化 */
  --ua-duration-slower: 0.35s; /* 更慢：进度条宽度推进 / 描边长度等大跨度形变（比浮层出场再长一档） */
  --ua-duration-loop-fast: 0.6s; /* 循环快档：条纹滚动等细微循环 */
  --ua-duration-loop-mid: 0.8s; /* 循环中档：加载转圈 / 开关内转圈（0.7 与 0.8 收敛到此档） */
  --ua-duration-loop-slow: 1.2s; /* 循环慢档：骨架扫光 / 不确定进度条（1.4 收敛到此档） */
  --ua-duration-loop-long: 1.6s; /* 循环长档：时间线呼吸等低频脉冲，别再用在加载态上 */
  --ua-duration-step: 0.02s; /* 微步档：交错入场的单项间隔（20ms），只供 calc(n * var(--ua-duration-step)) 派生，不直接当过渡时长 */
  --ua-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* 标准缓动：先快后缓，控件交互默认用这条 */
  --ua-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* 出场缓动：元素进入视口 / 弹层出现时使用 */
  --ua-ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1); /* 回弹缓动：弹窗本体、悬浮按钮这类需要一点过冲的入场 */
  --ua-translate-1: 1px; /* 位移 1 档：hover 微上浮（行内小件） */
  --ua-translate-2: 2px; /* 位移 2 档：hover 上浮标准档（按钮 / 卡片 / 悬浮件） */
  --ua-translate-3: 3px; /* 位移 3 档：贴边入场偏移（tooltip 箭头侧滑等几何配对位移） */
  --ua-translate-4: 4px; /* 位移 4 档：小型弹层入场（下拉菜单 / 气泡滑入） */
  --ua-translate-6: 6px; /* 位移 6 档：入场位移中档（alert / 通知条滑入） */
  --ua-translate-8: 8px; /* 位移 8 档：浮动件入场（悬浮按钮弹出 / 大弹层滑入；既有 10px 收敛到此档） */
  --ua-translate-12: 12px; /* 位移 12 档：长距离滑入（toast 侧边进出场 / 开关行程） */

  /* ---- 焦点环：统一外环与内嵌两种形态，全部由强调色派生 ---- */
  --ua-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 22%, transparent); /* 外焦点环：输入框 / 按钮 / 可聚焦控件 */
  --ua-focus-ring-inset: inset 0 0 0 2px color-mix(in srgb, var(--ua-color-accent) 40%, transparent); /* 内嵌焦点环：内部已裁切或需要贴合边框的控件 */
  --ua-focus-ring-warning: 0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 25%, transparent); /* 语义警告焦点环：评分等以警告色为主色的控件 */
  --ua-focus-ring-danger: 0 0 0 3px color-mix(in srgb, var(--ua-color-danger) 18%, transparent); /* 错误强调环：校验失败时叠在被标红控件外侧，比 danger 描边更外扩一圈 */
  --ua-focus-ring-pulse: 0 0 0 5px color-mix(in srgb, var(--ua-color-accent) 4%, transparent); /* 呼吸光晕档：与焦点环交替出现做脉冲动画（时间线条目） */
  --ua-focus-ring-selected: 0 0 0 1.5px var(--ua-color-accent-soft); /* 选中环（非焦点）：细一档 + 柔和色，2px 实色在色板/网格里像加粗边框 */
  --ua-focus-outline: 2px solid var(--ua-color-accent); /* 外焦点描边（outline 路线）：键盘可见性标准档 */
  --ua-focus-outline-inset: 1.5px solid var(--ua-color-accent-soft); /* 内嵌焦点描边：密集列表细一档 + 柔和色，2px 实线像粗边框 */
  --ua-focus-outline-soft: 2px solid color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-mid), transparent); /* 柔和外描边：大面积控件用淡化主题色 */

  /* ---- 控件高度：三档，略放大以提升可点面积 ---- */
  --ua-control-h-sm: 28px; /* 小控件高度：紧凑工具栏、标签内嵌按钮 */
  --ua-control-h-md: 34px; /* 中控件高度：输入框 / 下拉 / 按钮的默认档 */
  --ua-control-h-lg: 40px; /* 大控件高度：主按钮、搜索框、移动端触控目标 */

  /* ---- 层级：五档，数值留出间隙便于中间插入 ---- */
  --ua-z-dropdown: 100; /* 下拉层：菜单 / 选择面板 / 气泡 */
  --ua-z-sticky: 200; /* 粘性层：表头、吸顶工具栏 */
  --ua-z-overlay: 300; /* 遮罩层：模态背后的半透明遮罩 */
  --ua-z-modal: 400; /* 模态层：弹窗 / 抽屉本体 */
  --ua-z-toast: 500; /* 通知层：全局消息提示，永远最高 */
}

[data-theme='dark'] {
  --ua-color-bg: #101216; /* 暗色页面底色 */
  --ua-color-surface: #1a1c22; /* 暗色表面色 */
  --ua-color-surface-2: color-mix(in srgb, var(--ua-color-text) 5%, var(--ua-color-bg)); /* 暗色表面二阶：悬停底、次级容器 */
  --ua-color-surface-3: color-mix(in srgb, var(--ua-color-text) 10%, var(--ua-color-bg)); /* 暗色表面三阶：按下底、最深容器 */
  --ua-color-surface-inset: color-mix(in srgb, var(--ua-color-text) 6%, var(--ua-color-bg)); /* 暗色凹陷区：输入框 / 代码块底 */
  --ua-color-text: #e7e9ec; /* 暗色主文本色 */
  --ua-color-text-muted: #888780; /* 暗色辅助文本色 */
  --ua-color-text-secondary: #b4bac2; /* 暗色次级文本色 */
  --ua-color-text-faint: #62676f; /* 暗色三级文本色：禁用、极弱说明 */
  --ua-color-overlay: rgba(0, 0, 0, 0.6); /* 暗色遮罩：暗底上需加深才可分辨 */
  --ua-color-overlay-strong: rgba(0, 0, 0, 0.7); /* 暗色强遮罩 */
  --ua-color-border: rgba(255, 255, 255, 0.15); /* 暗色基础边框色：改用白色低透明度，避免黑边在暗底上消失 */
  --ua-color-scrollbar: rgba(255, 255, 255, 0.24); /* 暗色滚动条拇指：暗底上黑拇指完全看不见，改白色低透明度 */
  --ua-color-scrollbar-hover: rgba(255, 255, 255, 0.42); /* 暗色滚动条拇指悬停：亮度再升一档表示可拖拽 */
  --ua-color-highlight: rgba(255, 255, 255, 0.08); /* 暗色内高光：暗底上白高光刺眼，降到 8% 只留一道细光 */
  --ua-color-accent: #4a9aeb; /* 暗色强调色：提亮以保证暗底可读（原 #378add 压在白字/淡底上只有 3.92/4.44，过不了 AA） */
  --ua-color-accent-contrast: #042c53; /* 暗色强调色上的文字色：深色反白，维持对比 */
  --ua-color-accent-soft: color-mix(in srgb, var(--ua-color-accent) 82%, var(--ua-color-bg)); /* 暗色柔和强调色：与亮色同结构，混入暗底即自然降饱和 */
  --ua-color-tint-accent: color-mix(in srgb, var(--ua-color-accent) 14%, transparent); /* 暗色淡底标准档：暗底上淡底不可见，透明度升一档 */
  --ua-color-tint-accent-weak: color-mix(in srgb, var(--ua-color-accent) 8%, transparent); /* 暗色淡底弱档：透明度升一档 */
  --ua-color-danger: #d96a6a; /* 暗色危险色 */
  --ua-color-success: #4fc39e; /* 暗色成功色 */
  --ua-color-warning: #d9a94f; /* 暗色警告色 */

  /* 暗色下投影需要更高黑度才看得见：亮色那套在暗底上几乎不可见 */
  --ua-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3); /* 暗色 1 档：贴地投影 */
  --ua-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4); /* 暗色 2 档：下拉 / 气泡 */
  --ua-shadow-3: 0 10px 28px rgba(0, 0, 0, 0.45); /* 暗色 3 档：浮层 / 悬浮面板 */
  --ua-shadow-4: 0 18px 44px rgba(0, 0, 0, 0.5); /* 暗色 4 档：模态 / 抽屉 / 通知 */
  --ua-shadow-accent: 0 3px 10px color-mix(in srgb, var(--ua-color-accent) 30%, transparent); /* 暗色主题色投影：透明度略升补可见性 */
  --ua-shadow-accent-strong: 0 8px 20px color-mix(in srgb, var(--ua-color-accent) 40%, transparent); /* 暗色主题色强投影 */
  --ua-shadow-highlight: inset 0 1px 0 var(--ua-color-highlight); /* 暗色内高光：值不变、靠 --ua-color-highlight 降到 8%，暗底上仍是一道细光 */
  --ua-shadow-hairline: inset 0 -1px 0 var(--ua-border-subtle); /* 暗色描边细线：随 border-subtle 翻转 */
  --ua-shadow-inset-border: inset 0 0 0 1px var(--ua-color-border); /* 暗色内框 */
  --ua-shadow-inset-accent: inset 0 0 0 1px var(--ua-color-accent); /* 暗色强调内框 */
  --ua-shadow-gap: 0 0 0 2px var(--ua-color-bg); /* 暗色断口：底色翻转后仍断开 */
  --ua-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 34%, transparent); /* 暗色焦点环：透明度略升补对比 */
  --ua-focus-ring-inset: inset 0 0 0 2px color-mix(in srgb, var(--ua-color-accent) 52%, transparent); /* 暗色内嵌焦点环 */
  --ua-focus-ring-warning: 0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 34%, transparent); /* 暗色警告焦点环 */
  --ua-focus-ring-danger: 0 0 0 3px color-mix(in srgb, var(--ua-color-danger) 30%, transparent); /* 暗色错误强调环 */
  --ua-focus-ring-pulse: 0 0 0 5px color-mix(in srgb, var(--ua-color-accent) 8%, transparent); /* 暗色呼吸光晕：暗底上低透明度看不见，加倍 */
  --ua-focus-ring-selected: 0 0 0 1.5px var(--ua-color-accent-soft); /* 暗色选中环：随 accent 翻转并与亮色同口径 */
  --ua-focus-outline: 2px solid var(--ua-color-accent); /* 暗色外焦点描边：随 accent 翻转，与亮色同口径 */
  --ua-focus-outline-inset: 1.5px solid var(--ua-color-accent-soft); /* 暗色内嵌焦点描边：accent-soft 随底色重混 */
  --ua-focus-outline-soft: 2px solid color-mix(in srgb, var(--ua-color-accent) var(--ua-alpha-mid), transparent); /* 暗色柔和外描边：浓度档与亮色一致 */
}