最终你会得到一套按钮组件：支持 Primary/Secondary/Text 三种层级、S/M/L 三种尺寸、默认/悬停/按下/禁用四种状态，并且可以一键切换浅色/深色主题。
1）创建变量集合：打开 Variables 面板，新建集合 Theme，创建两种 Mode：Light 与 Dark。
2）按语义命名变量：不要用 #FFFFFF 这类物理颜色命名，推荐这些语义变量：
-- bg/surface
-- bg/brand
-- fg/primary
-- fg/onBrand
-- border/default
-- border/focus
3）分别给 Light/Dark 填值：在 Light 模式填浅色值，在 Dark 模式填深色值，保持同名变量在两种模式都有值。
1）画一个按钮容器：使用 Auto Layout（横向），内边距建议：S=10/14，M=12/18，L=14/22（左右/上下可按你的字号微调）。
2）加入文字层：文字对齐居中，字号建议：S=12，M=14，L=16；行高用 1.4 倍或固定 20/24/28。
3）绑定变量：给按钮填充/文字/描边分别绑定语义变量（例如 Primary：填充绑定 bg/brand，文字绑定 fg/onBrand）。
1）创建组件：选中按钮 Frame，Create component。
2）建立 Variant 维度：在组件属性里创建三组 Variant：
Type：Primary / Secondary / Text
Size：S / M / L
State：Default / Hover / Pressed / Disabled
3）快速生成变体：用 Combine as variants 生成矩阵，再逐个调整不同 Type/State 下的变量绑定（例如 Hover 只改变填充变量或增加 2% 透明度）。
1）在组件层级统一绑定：确保按钮各层样式都是“绑定变量”，不要直接填死颜色。
2）在页面切换 Mode：在 Variables 面板切换 Theme 的 Mode（Light/Dark），你会看到所有绑定的组件一起变化。
3）常见坑：
• 某个层没绑定变量 → 切换主题时不变
• 变体里覆盖了本地样式 → 优先检查每个 Variant 的 Fill/Text 是否仍绑定变量
• Disabled 颜色建议用同一语义变量加透明度，而不是再造一堆新色
把这套按钮发布到团队 Library，并在说明里写清：Type/Size/State 的用法、何时用 Secondary/Text、以及主题切换依赖 Theme 变量集合。
