AtomUI/docs/Desktop.Controls/ImagePreviewer/ImagePreviewerToken.md

ImagePreviewer Design Token

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

---

Token 资源访问方式

在 AXAML 中使用组件级 Token：

{atom:ImagePreviewerTokenResource PreviewOperationSize}
{atom:ImagePreviewerTokenResource PreviewOperationColor}
{atom:ImagePreviewerTokenResource MaskBgColor}
{atom:ImagePreviewerTokenResource NavButtonBgColor}

在 AXAML 中使用全局共享 Token：

{atom:SharedTokenResource EnableMotion}
{atom:SharedTokenResource ColorBgLayout}
{atom:SharedTokenResource IconSizeLG}

---

组件级 Token 一览

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

操作图标 Token

Token 名	类型	来源	说明
PreviewOperationSize	double	SharedToken.FontSizeIcon * 1.5	预览操作按钮的图标大小
PreviewOperationColor	Color	SharedToken.ColorTextLightSolid (alpha 0.85)	预览操作按钮正常态图标颜色（半透明白色）
PreviewOperationHoverColor	Color	SharedToken.ColorTextLightSolid	预览操作按钮悬浮态图标颜色（不透明白色）
PreviewOperationColorDisabled	Color	SharedToken.ColorTextDisabled	预览操作按钮禁用态图标颜色

导航按钮 Token

Token 名	类型	来源	说明
ImagePreviewSwitchSize	double	SharedToken.ControlHeightLG	左/右图片切换按钮尺寸
NavButtonBgColor	Color	SharedToken.ColorBgMask (alpha 0.1)	导航按钮正常态背景颜色（低透明度）
NavButtonBgHoverColor	Color	SharedToken.ColorBgMask (alpha 0.2)	导航按钮悬浮态背景颜色（稍高透明度）

封面 Token

Token 名	类型	来源	说明
MaskBgColor	Color	rgba(0, 0, 0, 0.3)	封面遮罩半透明背景色
CoverImageWidth	double	固定 200	ImageGroupPreviewer 封面缩略图默认宽度

对话框 Token

Token 名	类型	来源	说明
DialogMinWidth	double	固定 710	预览窗口最小宽度
DialogMinHeight	double	固定 240	预览窗口最小高度
TitleBarBackgroundColor	Color	亮色模式：SharedToken.ColorBorderSecondary.Darken(1)；暗色模式：SharedToken.ColorBorderSecondary	预览窗口标题栏背景色（暗色主题自动适配）

浮动工具栏 Token

Token 名	类型	来源	说明
FloatToolbarPadding	Thickness	SharedToken.UniformlyPaddingLG / 2, 0	浮动工具栏水平内间距
FloatToolbarIndicatorPadding	Thickness	SharedToken.UniformlyPaddingXS, 0	浮动工具栏索引指示器内间距

---

主题中使用的全局 SharedToken

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

Token 资源键	使用场景
EnableMotion	全局动画开关
SpacingXXS	封面指示器内图标与文字间距
SpacingXS	浮动工具栏指示器与操作区域间距
PaddingXS	导航按钮内间距
PaddingSM	浮动工具栏操作按钮内间距
Margin	ImageViewer 内导航按钮外边距
MarginXS	对话框内导航按钮外边距
MarginLG	浮动工具栏底部外边距
IconSizeLG	标题栏工具栏图标大小
ColorTextLightSolid	封面遮罩指示器文字/图标颜色
ColorBgLayout	预览对话框背景色
ColorBgTextHover	标题栏工具栏按钮悬浮背景色
ColorBgTextActive	标题栏工具栏按钮按下背景色

---

Token 对外观的影响

操作按钮状态映射

状态	图标颜色	背景色
正常	PreviewOperationColor（85% 白色）	透明
悬浮	PreviewOperationHoverColor（100% 白色）	—
禁用	PreviewOperationColorDisabled	—

导航按钮状态映射

状态	图标颜色	背景色
正常	PreviewOperationColor	NavButtonBgColor（10% 遮罩色）
悬浮	PreviewOperationHoverColor	NavButtonBgHoverColor（20% 遮罩色）
禁用	PreviewOperationColorDisabled	透明

暗色主题适配

TitleBarBackgroundColor 根据 isDarkMode 参数自动调整：

• 亮色模式：ColorBorderSecondary.Darken(1)（较深）
• 暗色模式：ColorBorderSecondary（原始值）

其余颜色 Token 由 SharedToken 的暗色主题算法自动重新计算。