色彩系统

Varo 使用角色化色板：每个品牌色和语义色都提供 Dark / Base / Light / Soft 四个稳定层级；文字、边框、填充和背景使用独立的中性色阶。组件只读取语义变量，不自行混色。

Runtime Palette

Base 用于实心状态，Dark 用于按下或强调，Light 用于 hover，Soft 用于弱背景。H5 与小程序共享相同变量和值。

PrimaryWeChat Green#07C160

Primary#07C160Dark #06AD56 · Light #38CD80 · Soft #E6F9EF

微信主色，用于主操作、链接、选中和焦点。

Success#13B248Dark #10973D · Light #42C16D · Soft #E7F7EC

完成、通过和可继续。

Warning#FA9200Dark #D57C00 · Light #FBA833 · Soft #FEF4E5

等待确认和可恢复风险。

Danger#EB3437Dark #C82C2F · Light #EF5D5F · Soft #FDEAEB

失败、删除和不可逆操作。

Component States

组件通过 Base、Light 和 Soft 变量表达默认、hover 与弱提示，不再使用无语义的通用灰色覆盖 tone。

Primary默认 / Hover#07C160 → #38CD80

Success完成 / 弱提示#13B248 / #E7F7EC

Warning警告 / 弱提示#FA9200 / #FEF4E5

Danger危险 / 弱提示#EB3437 / #FDEAEB

Primary

Dark#06AD56

Base#07C160

Light#38CD80

Soft#E6F9EF

Success

Dark#10973D

Base#13B248

Light#42C16D

Soft#E7F7EC

Warning

Dark#D57C00

Base#FA9200

Light#FBA833

Soft#FEF4E5

Danger

Dark#C82C2F

Base#EB3437

Light#EF5D5F

Soft#FDEAEB

Primary Text#303133--varo-ui-text

Regular Text#606266--varo-ui-text-regular

Secondary Text#909399--varo-ui-text-muted

Placeholder#A8ABB2--varo-ui-text-placeholder

Base Border#DCDFE6--varo-ui-border

Base Fill#F0F2F5--varo-ui-fill

Page Background#F2F3F5--varo-ui-bg

Surface#FFFFFF--varo-ui-surface

使用建议

• 实心组件使用 Base；hover 使用 Light；按下或高强调使用 Dark。
• Soft 只作为弱背景，文字和边框仍使用对应语义 Base。
• 正文、次级信息、占位符和禁用态分别使用独立文字变量。
• 边框和填充不得用透明度临时推导；优先使用已定义层级。
• 暗色模式保留相同语义色，重新映射文字、边框、填充和背景层级。