目标是做一套“拿来就能用”的按钮系统：同一个按钮组件（Primary / Secondary / Tertiary），支持 Size（S/M/L）、State（Default / Hover / Pressed / Disabled）与 Theme（Light / Dark）切换。整个项目只维护一份组件结构，换主题时不改组件、不换样式表，只切换变量模式即可。
1）在右侧面板打开 Variables，创建一个 Collection：Theme。
2）在 Collection 里创建两个 Mode：Light 与 Dark。
3）先不要急着做“按钮专用颜色”，先做语义 token（推荐命名）：
color/bg/surface、color/bg/surface-2、color/text/primary、color/text/invert、color/border/default、color/brand/primary、color/brand/primary-pressed。
4）为 Light / Dark 分别赋值：Light 里 surface 更浅、text 更深；Dark 里 surface 更深、text 更浅。品牌色建议两套模式保持一致或仅微调明度，保证识别度。
5）再补齐状态相关 token（最少）：
btn/primary/bg、btn/primary/bg-hover、btn/primary/bg-pressed、btn/primary/text、btn/primary/text-disabled、btn/primary/bg-disabled。
提示：如果你不想 token 太多，也可以用 alias（变量引用变量）实现：btn/primary/bg → color/brand/primary，hover/pressed 指向对应的 brand token。
1）新建一个 Frame 作为按钮容器，开启 Auto Layout（水平），Padding 建议：左右 16、上下 10，Gap 8。
2）按钮里放：可选 Leading Icon、文本 Text、可选 Trailing Icon。三者都用 Auto Layout 包起来。
3）把文本层设置为 Hug contents；按钮容器设置为 Hug contents（或 Fill container 视使用场景）。
4）按钮圆角建议也做成变量或样式（如 radius/8）。尺寸体系做成变量更方便统一。
1）把按钮组件创建为 Component，并添加 Variants。
2）属性建议这样拆（清晰且可扩展）：
Type：Primary / Secondary / Tertiary
Size：S / M / L
State：Default / Hover / Pressed / Disabled
3）Size 的差异只改：Padding、字体大小、图标尺寸。不要改结构。
4）State 的差异只改：背景、边框、文字颜色（全部来自变量）。避免手填具体色值。
1）选中按钮背景 Fill，点变量图标，将其绑定到：btn/primary/bg（不同 Type 用不同 token）。
2）边框 Stroke 也绑定变量（Secondary/Tertiary 常用）。
3）文字颜色绑定 btn/primary/text；Disabled 时改为 btn/primary/text-disabled。
4）Hover/Pressed 不需要做交互原型也能实现：直接用 State 变体表达即可。想要真实交互时，再在 Prototype 里用 While hovering / While pressing 切换到对应 State。
1）打开 Variables 面板，切换 Collection 的 Mode：Light → Dark。
2）你应该看到同一套按钮组件整体颜色随之变化（背景、文字、边框一致切换）。
3）如果某个元素没跟着变，说明它仍在用“硬编码色值”，回到组件里把它绑定到变量。
1）随便复制 6 个按钮到画布：不同 Type/Size/State 混合。
2）切换 Light/Dark，确认所有按钮都正确变化，尤其是 Disabled 的对比度与可读性。
3）把按钮放到浅色/深色背景上各看一遍，检查边框是否足够清晰。
4）检查文字：不要出现“浅色模式 OK、深色模式发灰”的情况；必要时为 Dark 模式单独调整 text token。
1）给按钮组件加说明（De ion），写清楚属性含义与推荐场景。
2）在 Library 发布组件；团队成员启用库后，直接插入按钮即可。
3）后续要改品牌色或深色背景对比度，只需要改变量值（或 alias），无需改每个组件。
坑 1：变量命名混乱 → 先用语义 token（surface/text/border/brand），再让组件 token 引用语义 token。
坑 2：Hover/Pressed 颜色手填 → 全部做成变量，或至少用 alias 指向 brand token，便于全局调整。
坑 3：深色模式对比不足 → Dark 模式里提升文字亮度、降低背景明度差；必要时给 border token 单独一套值。
坑 4：组件越来越重 → 属性保持少而清晰；不要在按钮里塞过多可选元素，把图标作为开关即可。
