AtomUI/docs/Desktop.Controls/Steps/StepsToken.md

Steps Design Token

Steps 控件使用 StepsToken（Token ID: "Steps"）作为组件级 Design Token。Steps 拥有约 50+ 个 Token，覆盖四种步骤状态（Wait/Process/Finish/Error）× 多种展示风格（Default/Navigation/Inline/Dot）的完整颜色和尺寸体系。

---

Token 资源访问方式

在 AXAML 中使用组件级 Token：

{atom:StepsTokenResource IconSize}
{atom:StepsTokenResource ProcessIconColor}
{atom:StepsTokenResource WaitTitleColor}

在 AXAML 中使用全局共享 Token：

{atom:SharedTokenResource ColorPrimary}
{atom:SharedTokenResource ColorError}
{atom:SharedTokenResource Spacing}

---

组件级 Token 一览

尺寸 / 布局 Token

Token 名	类型	来源	说明
IconSize	double	SharedToken.ControlHeight	标准指示器容器尺寸
IconFontSize	double	SharedToken.FontSize	标准指示器内数字字号
IconSizeSM	double	SharedToken.FontSizeHeading3	小尺寸指示器容器尺寸
CustomIconSize	double	SharedToken.ControlHeight	自定义图标指示器容器尺寸
CustomIconFontSize	double	SharedToken.ControlHeightSM	自定义图标字号
DotSize	double	ControlHeight / 4	点状指示器尺寸
DotCurrentSize	double	ControlHeightLG / 4	当前步骤点状指示器尺寸
DescriptionMaxWidth	double	140	描述区域最大宽度
StepsProgressSize	double	SharedToken.ControlHeightLG	进度环尺寸

间距 Token

Token 名	类型	来源	说明
HorizontalHeaderMargin	Thickness	(0, 0, UniformlyMargin, 0)	水平标签排列的外间距
HorizontalDotMargin	Thickness	(UniformlyMarginXS, 0)	水平点状指示器外间距
VerticalDotMargin	Thickness	(0, UniformlyMarginXS)	垂直点状指示器外间距
VerticalItemSpacing	double	SpacingXXS * 1.5	垂直排列时步骤项间距
VerticalDescriptionPadding	Thickness	(0, 0, 0, UniformlyPaddingXS)	垂直描述内间距
VerticalLabelContentMargin	Thickness	(0, UniformlyMarginSM, 0, 0)	垂直标签与图标间距
VerticalNavArrowMargin	Thickness	(0, UniformlyMarginSM)	导航箭头外间距
VerticalNavArrowMarginSM	Thickness	(0, UniformlyMarginXS)	导航箭头外间距（小尺寸）
NavItemGutter	double	SharedToken.Spacing	导航类型内容与指示线间距
NavItemGutterSM	double	SharedToken.SpacingXS	导航类型间距（小尺寸）

进度环 Token

Token 名	类型	来源	说明
ProgressFramePadding	Thickness	LineWidthBold * 2	进度环与指示器的间距
ProgressFramePaddingSM	Thickness	LineWidthBold	进度环间距（小尺寸）
ProgressGrooveColor	Color	SharedToken.ColorSplit	进度环底色（未完成部分）
ProgressColor	Color	SharedToken.ColorPrimary	进度环前景色（已完成部分）
DotLineThickness	double	LineWidth * 3	点状连接线粗细

导航箭头 Token

Token 名	类型	来源	说明
NavArrowColor	Color	SharedToken.ColorTextDisabled	导航箭头颜色
StepsNavActiveColor	Color	SharedToken.ColorPrimary	导航风格激活态颜色

---

四种状态的颜色 Token

Steps 为每种步骤状态定义了完整的颜色 Token 集合：

Wait（等待）状态

Token 名	来源	用途
WaitIconColor	ColorTextLabel	指示器内数字/图标颜色
WaitIconBgColor	ColorFillContent	指示器背景色
WaitIconBorderColor	Transparent	指示器边框色
WaitTitleColor	ColorTextDescription	步骤标题颜色
WaitDescriptionColor	ColorTextDescription	步骤描述颜色
WaitTailColor	ColorSplit	连接线颜色
WaitDotColor	ColorTextDisabled	点状指示器颜色

Process（进行中）状态

Token 名	来源	用途
ProcessIconColor	ColorTextLightSolid	指示器内数字颜色（白色）
ProcessIconBgColor	ColorPrimary	指示器背景色（主色调）
ProcessIconBorderColor	ColorPrimary	指示器边框色
ProcessTitleColor	ColorText	步骤标题颜色（深色）
ProcessDescriptionColor	ColorText	步骤描述颜色
ProcessTailColor	ColorSplit	连接线颜色
ProcessDotColor	ColorPrimary	点状指示器颜色（主色调）

Finish（完成）状态

Token 名	来源	用途
FinishIconColor	ColorPrimary	指示器内图标颜色（主色调）
FinishIconBgColor	ControlItemBgActive	指示器背景色
FinishIconBorderColor	ControlItemBgActive	指示器边框色
FinishTitleColor	ColorText	步骤标题颜色
FinishDescriptionColor	ColorTextDescription	步骤描述颜色
FinishTailColor	ColorPrimary	连接线颜色（主色调）
FinishDotColor	ColorPrimary	点状指示器颜色

Error（错误）状态

Token 名	来源	用途
ErrorIconColor	ColorTextLightSolid	指示器内图标颜色（白色）
ErrorIconBgColor	ColorError	指示器背景色（错误色）
ErrorIconBorderColor	ColorError	指示器边框色
ErrorTitleColor	ColorError	步骤标题颜色（错误色）
ErrorDescriptionColor	ColorError	步骤描述颜色
ErrorTailColor	ColorSplit	连接线颜色
ErrorDotColor	ColorError	点状指示器颜色

---

Inline 风格专用 Token

Token 名	类型	来源	说明
InlineDotSize	double	6	内联指示器点的尺寸
InlineHeaderMargin	Thickness	(0, MarginXS - LineWidth, 0, 0)	内联标题外间距
InlineHeaderPadding	Thickness	(MarginXS, 0)	内联标题内间距
InlineItemPadding	Thickness	(0, MarginXS)	内联步骤项内间距
InlineTitleColor	Color	ColorTextQuaternary	内联标题颜色
InlineTailColor	Color	ColorBorderSecondary	内联连接线颜色

---

Token 对外观的影响总结

状态颜色映射

Wait    →  灰色调（ColorFillContent / ColorTextDescription / ColorTextDisabled）
Process →  主色调（ColorPrimary / ColorTextLightSolid / ColorText）
Finish  →  完成态（ColorPrimary 图标 + ControlItemBgActive 背景）
Error   →  错误色（ColorError 全系列）

尺寸变体影响

Token	标准尺寸	小尺寸（SizeType=Small）
指示器尺寸	IconSize（ControlHeight）	IconSizeSM（FontSizeHeading3）
进度环间距	ProgressFramePadding	ProgressFramePaddingSM
导航箭头间距	VerticalNavArrowMargin	VerticalNavArrowMarginSM
导航间距	NavItemGutter	NavItemGutterSM

过渡动画

StepsItem 和 StepsItemIndicator 均支持以下过渡动画：

• StepsItem：Background、Foreground、SubTitleForeground、DescriptionForeground 的 SolidColorBrushTransition，以及导航指示线的 TransformOperationsTransition
• StepsItemIndicator：Background、BorderBrush、Foreground 的 SolidColorBrushTransition，以及 Width/Height 的 DoubleTransition