Semantic Token

每个 Token 都表达用途，而不是某个固定颜色。切换 Latte / Macchiato 时，业务 utility 不变。

使用规则

• 页面、容器和浮层分别使用 background、surface、surface-elevated，层级同时依赖 tone、border 与 shadow。
• primary 是最高优先级行为；accent 只负责 hover、selection 和轻量选中。
• ring 专用于 focus-visible，不与 primary 强制相等。
• error 是颜色语义，组件层的 destructive 行为映射到它。
• tip 是无状态的建议；有明确系统状态时使用 info。

完整规范

下表由 packages/ui 直接渲染，因此文档值与发布包不会漂移。实心背景与 foreground pairing 需达到 WCAG AA；subtle 组合按正文场景检查。

⌕⌘ K

49 / 49

Token	语义 / 使用边界	Foreground	Latte	Macchiato	UnoCSS
background	页面最底层画布。应用和完整页面背景。避免：不要用来模拟悬浮层。	foreground	#eff1f5 oklch(0.9578 0.0058 264.53)	#181926 oklch(0.2188 0.0255 280.66)	bg-backgroundvar(--pd-color-background)
foreground	页面默认文字和图标。正文及高优先级内容。避免：不要用于彩色实心背景。	—	#4c4f69 oklch(0.4355 0.0430 279.33)	#cad3f5 oklch(0.8708 0.0481 273.67)	text-foregroundvar(--pd-color-foreground)
surface	普通区域容器。侧栏、面板和分组区域。避免：不要替代页面背景。	surface-foreground	#e6e9ef oklch(0.9335 0.0087 264.52)	#1e2030 oklch(0.2493 0.0305 278.44)	bg-surfacevar(--pd-color-surface)
surface-foreground	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#4c4f69 oklch(0.4355 0.0430 279.33)	#cad3f5 oklch(0.8708 0.0481 273.67)	text-surface-foregroundvar(--pd-color-surface-foreground)
surface-subtle	弱化的次级表面。表头、分组和禁用区域。避免：不要承载最高优先级操作。	—	#dce0e8 oklch(0.9060 0.0117 264.51)	#24273a oklch(0.2788 0.0353 276.94)	bg-surface-subtlevar(--pd-color-surface-subtle)
surface-elevated	视觉层级更高的表面。菜单、对话框和浮层。避免：不要仅靠阴影表达层级。	—	#ffffff oklch(1.0000 0.0000 89.88)	#363a4f oklch(0.3538 0.0369 275.99)	bg-surface-elevatedvar(--pd-color-surface-elevated)
card	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#ffffff oklch(1.0000 0.0000 89.88)	#24273a oklch(0.2788 0.0353 276.94)	bg-cardvar(--pd-color-card)
card-foreground	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#4c4f69 oklch(0.4355 0.0430 279.33)	#cad3f5 oklch(0.8708 0.0481 273.67)	text-card-foregroundvar(--pd-color-card-foreground)
popover	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#ffffff oklch(1.0000 0.0000 89.88)	#363a4f oklch(0.3538 0.0369 275.99)	bg-popovervar(--pd-color-popover)
popover-foreground	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#4c4f69 oklch(0.4355 0.0430 279.33)	#cad3f5 oklch(0.8708 0.0481 273.67)	text-popover-foregroundvar(--pd-color-popover-foreground)
primary	最高优先级行为和品牌表达。主按钮、关键选中态。避免：不要铺满大面积背景。	primary-foreground	#006b67 oklch(0.4763 0.0822 190.27)	#008080 oklch(0.5431 0.0927 194.77)	bg-primaryvar(--pd-color-primary)
primary-foreground	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#ffffff oklch(1.0000 0.0000 89.88)	#ffffff oklch(1.0000 0.0000 89.88)	text-primary-foregroundvar(--pd-color-primary-foreground)
primary-strong	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#005450 oklch(0.4021 0.0696 189.22)	#006763 oklch(0.4636 0.0800 190.11)	bg-primary-strongvar(--pd-color-primary-strong)
secondary	次级交互表面。次按钮和弱选中态。避免：不要与 primary 竞争。	secondary-foreground	#e2e7f0 oklch(0.9268 0.0133 262.38)	#363a4f oklch(0.3538 0.0369 275.99)	bg-secondaryvar(--pd-color-secondary)
secondary-foreground	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#414559 oklch(0.3949 0.0342 275.90)	#cad3f5 oklch(0.8708 0.0481 273.67)	text-secondary-foregroundvar(--pd-color-secondary-foreground)
accent	短暂或轻量强调。hover、selection、active。避免：不等同于品牌主色。	accent-foreground	#c8eeea oklch(0.9210 0.0398 188.69)	#344b50 oklch(0.3959 0.0295 212.61)	bg-accentvar(--pd-color-accent)
accent-foreground	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#174f4c oklch(0.3909 0.0573 190.00)	#d8f3ee oklch(0.9431 0.0290 183.34)	text-accent-foregroundvar(--pd-color-accent-foreground)
muted	弱内容背景。占位、禁用和辅助区域。避免：不要用于关键状态。	muted-foreground	#e6e9ef oklch(0.9335 0.0087 264.52)	#24273a oklch(0.2788 0.0353 276.94)	bg-mutedvar(--pd-color-muted)
muted-foreground	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#6c6f85 oklch(0.5471 0.0343 279.08)	#a5adcb oklch(0.7513 0.0441 273.53)	text-muted-foregroundvar(--pd-color-muted-foreground)
border	默认结构边界。卡片、分隔和控件边缘。避免：不要承担焦点指示。	—	#bcc0cc oklch(0.8083 0.0174 271.20)	#494d64 oklch(0.4259 0.0385 276.95)	border-bordervar(--pd-color-border)
border-muted	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#dce0e8 oklch(0.9060 0.0117 264.51)	#363a4f oklch(0.3538 0.0369 275.99)	border-border-mutedvar(--pd-color-border-muted)
border-strong	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#9ca0b0 oklch(0.7077 0.0237 274.60)	#6e738d oklch(0.5608 0.0407 276.47)	border-border-strongvar(--pd-color-border-strong)
input	输入控件边界。表单控件静止态。避免：不要用于 focus ring。	—	#acb0be oklch(0.7584 0.0205 273.15)	#5b6078 oklch(0.4939 0.0389 275.68)	border-inputvar(--pd-color-input)
ring	键盘焦点指示。focus-visible 外环。避免：不要用 hover 代替。	—	#008080 oklch(0.5431 0.0927 194.77)	#8bd5ca oklch(0.8214 0.0755 184.10)	ring-ringvar(--pd-color-ring)
info	明确的信息状态。同步、运行、版本提示。避免：不要用于普通技巧。	info-foreground	#1e66f5 oklch(0.5586 0.2255 262.09)	#8aadf4 oklch(0.7497 0.1101 263.81)	bg-infovar(--pd-color-info)
info-foreground	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#ffffff oklch(1.0000 0.0000 89.88)	#18203b oklch(0.2510 0.0525 269.85)	text-info-foregroundvar(--pd-color-info-foreground)
info-subtle	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#dce8ff oklch(0.9290 0.0338 263.58)	#293a58 oklch(0.3484 0.0573 261.28)	bg-info-subtlevar(--pd-color-info-subtle)
info-subtle-foreground	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#17407f oklch(0.3808 0.1161 259.05)	#b8d4ff oklch(0.8638 0.0672 258.87)	text-info-subtle-foregroundvar(--pd-color-info-subtle-foreground)
info-border	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#8eb2fa oklch(0.7653 0.1113 263.59)	#5276a8 oklch(0.5604 0.0884 256.75)	border-info-bordervar(--pd-color-info-border)
warning	需要注意、仍可继续的状态。风险提示和待处理问题。避免：不要表达已失败。	warning-foreground	#955d00 oklch(0.5281 0.1148 69.42)	#eed49f oklch(0.8790 0.0744 84.75)	bg-warningvar(--pd-color-warning)
warning-foreground	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#ffffff oklch(1.0000 0.0000 89.88)	#3a2c16 oklch(0.3033 0.0406 77.58)	text-warning-foregroundvar(--pd-color-warning-foreground)
warning-subtle	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#fff0d1 oklch(0.9591 0.0436 85.24)	#4a3c28 oklch(0.3655 0.0373 76.02)	bg-warning-subtlevar(--pd-color-warning-subtle)
warning-subtle-foreground	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#67420d oklch(0.4125 0.0822 70.14)	#ffe2a8 oklch(0.9232 0.0806 84.32)	text-warning-subtle-foregroundvar(--pd-color-warning-subtle-foreground)
warning-border	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#dfa94f oklch(0.7681 0.1240 77.77)	#7c6841 oklch(0.5271 0.0609 83.32)	border-warning-bordervar(--pd-color-warning-border)
error	错误和失败的颜色语义。校验失败和危险结果。避免：destructive 应在组件层映射到它。	error-foreground	#bc2446 oklch(0.5222 0.1857 14.83)	#ed8796 oklch(0.7370 0.1252 11.19)	bg-errorvar(--pd-color-error)
error-foreground	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#ffffff oklch(1.0000 0.0000 89.88)	#3b1821 oklch(0.2640 0.0562 5.45)	text-error-foregroundvar(--pd-color-error-foreground)
error-subtle	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#ffe0e7 oklch(0.9341 0.0353 2.49)	#4a2934 oklch(0.3271 0.0515 358.91)	bg-error-subtlevar(--pd-color-error-subtle)
error-subtle-foreground	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#81243b oklch(0.4130 0.1274 10.08)	#ffb8c2 oklch(0.8512 0.0832 9.64)	text-error-subtle-foregroundvar(--pd-color-error-subtle-foreground)
error-border	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#e59aaa oklch(0.7645 0.0917 5.50)	#84515f oklch(0.4970 0.0706 2.18)	border-error-bordervar(--pd-color-error-border)
success	成功完成的状态。保存、同步、检查通过。避免：不要用于普通品牌强调。	success-foreground	#347827 oklch(0.5104 0.1343 140.63)	#a6da95 oklch(0.8350 0.1079 138.15)	bg-successvar(--pd-color-success)
success-foreground	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#ffffff oklch(1.0000 0.0000 89.88)	#1e301d oklch(0.2873 0.0414 143.18)	text-success-foregroundvar(--pd-color-success-foreground)
success-subtle	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#ddf2d7 oklch(0.9384 0.0422 138.73)	#2d4430 oklch(0.3612 0.0447 147.93)	bg-success-subtlevar(--pd-color-success-subtle)
success-subtle-foreground	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#315d28 oklch(0.4329 0.0955 140.31)	#c3edb5 oklch(0.9021 0.0866 137.95)	text-success-subtle-foregroundvar(--pd-color-success-subtle-foreground)
success-border	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#8bc47e oklch(0.7634 0.1136 139.85)	#57795a oklch(0.5411 0.0616 146.91)	border-success-bordervar(--pd-color-success-border)
tip	无状态性质的建议和技巧。推荐、辅助说明、轻量高亮。避免：不要表达系统信息状态。	tip-foreground	#006b67 oklch(0.4763 0.0822 190.27)	#69c7bd oklch(0.7691 0.0910 186.47)	bg-tipvar(--pd-color-tip)
tip-foreground	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#ffffff oklch(1.0000 0.0000 89.88)	#182725 oklch(0.2585 0.0207 185.62)	text-tip-foregroundvar(--pd-color-tip-foreground)
tip-subtle	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#d8f2ef oklch(0.9414 0.0275 188.30)	#274340 oklch(0.3596 0.0344 187.15)	bg-tip-subtlevar(--pd-color-tip-subtle)
tip-subtle-foreground	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#174f4c oklch(0.3909 0.0573 190.00)	#b6e9e2 oklch(0.8967 0.0531 185.94)	text-tip-subtle-foregroundvar(--pd-color-tip-subtle-foreground)
tip-border	语义配对或层级变体。与所属语义组配合使用。避免：脱离所属语义组单独替换。	—	#79bdb7 oklch(0.7514 0.0696 188.71)	#4f7772 oklch(0.5380 0.0455 186.11)	border-tip-bordervar(--pd-color-tip-border)