IconButton Design Token

IconButton 控件复用 ButtonToken（Token ID: "Button"）作为组件级 Design Token 作用域。由于 IconButton 的模板非常轻量，它主要消费全局 SharedToken 中的值，不直接使用 ButtonToken 中的大部分颜色、间距和字体 Token。

Token 架构说明

为什么复用 ButtonToken？

IconButton 在构造函数中注册了 ButtonToken.ScopeProvider：

public class IconButton : AbstractIconButton
{
    public IconButton()
    {
        this.RegisterTokenResourceScope(ButtonToken.ScopeProvider);
    }
}

这意味着 IconButton 模板中可以使用 {atom:TokenResource ...} 引用 ButtonToken 的所有 Token 属性。但实际上，IconButton 的极简主题模板仅使用全局 SharedToken，并未直接引用 ButtonToken 的组件级 Token。这种设计保留了扩展灵活性——如果未来 IconButton 需要更丰富的样式变体，可以直接引用 ButtonToken 的 Token 而无需修改 Token 作用域注册。

Token 资源访问方式

在 AXAML 中，IconButton 主题使用全局共享 Token：

<!-- IconButton 主题中实际使用的 Token -->
{atom:SharedTokenResource ColorIcon}
{atom:SharedTokenResource ColorIconHover}
{atom:SharedTokenResource ColorText}
{atom:SharedTokenResource ColorTextDisabled}
{atom:SharedTokenResource IconSizeSM}
{atom:SharedTokenResource BorderRadiusSM}
{atom:SharedTokenResource EnableMotion}

消费的全局 SharedToken

以下是 IconButton 主题模板（IconButtonTheme.axaml）中直接引用的全部 SharedToken：

Token 资源键	类型	使用场景
`ColorIcon`	`Color`	正常态图标颜色
`ColorIconHover`	`Color`	悬浮态图标颜色
`ColorText`	`Color`	按下态图标颜色
`ColorTextDisabled`	`Color`	禁用态图标颜色
`IconSizeSM`	`double`	默认图标宽度和高度
`BorderRadiusSM`	`CornerRadius`	默认圆角半径
`EnableMotion`	`bool`	全局动画开关，控制 `IsMotionEnabled` 的默认值

Token 对外观的影响

交互状态与 Token 映射

IconButton 通过 IconBrush 属性在不同状态下自动切换图标颜色：

状态	IconBrush 来源	Background	说明
正常	`ColorIcon`	透明	默认状态，使用主题图标色
悬浮（`:pointerover`）	`ColorIconHover`	透明	鼠标悬浮时图标颜色加深
按下（`:pressed`）	`ColorText`	透明	按压时使用正文色，反馈更强
禁用（`:disabled`）	`ColorTextDisabled`	透明	灰色调，表示不可交互

尺寸与 Token 映射

属性	Token 来源	说明
`IconWidth`	`SharedToken.IconSizeSM`	默认图标宽度（通常为 12px）
`IconHeight`	`SharedToken.IconSizeSM`	默认图标高度（通常为 12px）
`CornerRadius`	`SharedToken.BorderRadiusSM`	默认圆角半径

暗色主题适配

IconButton 的颜色完全由 SharedToken 驱动。当主题切换到暗色模式时：

ColorIcon、ColorIconHover、ColorText、ColorTextDisabled 等 Token 会由暗色主题算法自动重新计算
IconButton 无需额外适配，自动跟随主题变化

与 ButtonToken 的关系

注意：虽然 IconButton 注册了 ButtonToken 作用域，但 ButtonToken 中的大部分 Token（如 PrimaryColor、DefaultBg、DefaultBorderColor、Padding、ContentFontSize 等）对 IconButton 没有直接影响。IconButton 的视觉表现完全由 IconBrush 和全局 SharedToken 的图标色系驱动。

如果需要为 IconButton 添加更丰富的视觉变体（如带背景色的 IconButton），建议通过 Style 覆盖 Background 属性并引用 SharedToken，而非直接引用 ButtonToken 的颜色 Token。

3.8 KiB Raw Permalink Blame History Unescape Escape