AtomUI/docs/Desktop.Controls/RadioButton/RadioButtonToken.md

RadioButton Design Token

RadioButton 控件使用 RadioButtonToken（Token ID: "RadioButton"）作为组件级 Design Token，所有视觉属性均从全局 SharedToken 派生，不硬编码任何具体值。

---

Token 资源访问方式

在 AXAML 中使用组件级 Token：

{atom:RadioButtonTokenResource RadioSize}
{atom:RadioButtonTokenResource DotSize}
{atom:RadioButtonTokenResource TextMargin}
{atom:RadioButtonTokenResource DotColorDisabled}

在 AXAML 中使用全局共享 Token：

{atom:SharedTokenResource ColorPrimary}
{atom:SharedTokenResource ColorBorder}
{atom:SharedTokenResource ColorBgContainer}
{atom:SharedTokenResource BorderThickness}

---

组件级 Token 一览

以下是 RadioButtonToken 定义的全部组件级 Token，按功能分组说明。

指示器尺寸 Token

Token 名	类型	来源	说明
RadioSize	double	SharedToken.FontSizeLG	单选框圆形指示器的外框大小（宽 = 高 = RadioSize）
DotSize	double	RadioSize - (DotPadding + LineWidth) × 2	选中时内部圆点的最终大小（基于 RadioSize 动态计算）
DotPadding	double	固定 4	圆点与外框之间的内间距

颜色 Token

Token 名	类型	来源	说明
RadioColor	Color	SharedToken.ColorWhite	选中态圆点内部颜色（通常为白色）
RadioBgColor	Color	SharedToken.ColorPrimary	选中态指示器背景色（主题主色）
DotColorDisabled	Color	SharedToken.ColorTextDisabled	禁用态选中圆点颜色（灰色）

间距 Token

Token 名	类型	来源	说明
TextMargin	Thickness	SharedToken.UniformlyMarginXS, 0, SharedToken.UniformlyMarginXS, 0	文本内容与指示器之间的左右间距

---

主题中使用的全局 SharedToken

除组件级 Token 外，RadioButton 的 ControlTheme 还直接引用了以下全局 SharedToken：

颜色相关

Token 资源键	使用场景
ColorText	单选框文本颜色（正常态）
ColorTextDisabled	禁用态文本颜色
ColorPrimary	选中态指示器边框色和背景色
ColorBorder	未选中态指示器边框色；禁用态指示器边框色
ColorBgContainer	未选中态指示器背景色
ColorBgContainerDisabled	禁用态指示器背景色

动画相关

Token 资源键	使用场景
EnableMotion	全局动画开关，控制是否启用过渡动画
EnableWaveSpirit	全局波纹开关，控制是否启用选中波纹效果
BorderThickness	指示器默认边框厚度

间距相关（RadioButtonGroup 使用）

Token 资源键	使用场景
SpacingXS	RadioButtonGroup 的默认 ItemSpacing 和 LineSpacing 值

---

Token 对外观的具体影响

选中状态与 Token 映射

状态	指示器背景	指示器边框	圆点颜色	文本颜色
未选中	ColorBgContainer	ColorBorder	—	ColorText
未选中 + 悬浮	ColorBgContainer	ColorPrimary	—	ColorText
选中	ColorPrimary	ColorPrimary	RadioColor（白色）	ColorText
禁用（未选中）	ColorBgContainerDisabled	ColorBorder	—	ColorTextDisabled
禁用（选中）	ColorBgContainerDisabled	ColorBorder	DotColorDisabled（灰色）	ColorTextDisabled

指示器尺寸计算逻辑

RadioSize = SharedToken.FontSizeLG
DotPadding = 4                          （内间距，固定值）
DotSize = RadioSize - (DotPadding + SharedToken.LineWidth) × 2  （内部圆点直径）

指示器在不同状态下的圆点效果大小（RadioDotEffectSize）：

• 选中 + 启用：DotSize（完整大小）
• 选中 + 禁用：RadioSize - DotPadding × 2（稍大，填充更多区域）
• 未选中：DotSize × 0.6（缩小，动画起始点）

过渡动画与 Token 的关系

RadioIndicator 的过渡动画在 IsMotionEnabled = true 时启用，包括：

过渡属性	过渡类型	持续时间	说明
RadioBorderBrush	SolidColorBrushTransition	默认 MotionDurationMid	边框颜色在选中/未选中/悬浮之间平滑切换
RadioDotEffectSize	DoubleTransition	默认 MotionDurationMid	圆点大小缩放，产生选中/取消选中的弹性效果
RadioBackground	SolidColorBrushTransition	MotionDurationFast	背景色在透明/主色之间快速切换

暗色模式适配

Token 值通过 CalculateTokenValues(bool isDarkMode) 在暗色模式下自动适配：

• SharedToken.ColorPrimary 在暗色模式下为适配暗色背景的主色调
• SharedToken.ColorBgContainer 在暗色模式下为深色背景
• SharedToken.ColorBorder 在暗色模式下为低对比度边框色
• 无需额外配置，切换主题时自动响应