Refactor DesignToken to add classification information to the global Design Token

This commit is contained in:
chinboy
2025-10-16 11:36:52 +08:00
parent a338bad430
commit 3f31e83de7
19 changed files with 386 additions and 79 deletions
+32 -3
View File
@@ -145,20 +145,49 @@ public class ThemeConfigProvider : Control, IThemeConfigProvider
}
Debug.Assert(calculator != null);
// TODO 看后期是否需要改进,做一个缓存
var seedTokenKeys = DesignToken.GetTokenProperties(DesignTokenKind.Seed).Select(p => p.Name).ToHashSet();
var mapTokenKeys = DesignToken.GetTokenProperties(DesignTokenKind.Map).Select(p => p.Name).ToHashSet();
var aliasTokenKeys = DesignToken.GetTokenProperties(DesignTokenKind.Alias).Select(p => p.Name).ToHashSet();
var sharedTokenConfigMap = new Dictionary<DesignTokenKind, Dictionary<string, string>>();
sharedTokenConfigMap[DesignTokenKind.Seed] = new Dictionary<string, string>();
sharedTokenConfigMap[DesignTokenKind.Map] = new Dictionary<string, string>();
sharedTokenConfigMap[DesignTokenKind.Alias] = new Dictionary<string, string>();
var sharedTokenConfig = new Dictionary<string, string>();
foreach (var tokenSetter in SharedTokenSetters)
{
sharedTokenConfig.Add(tokenSetter.Key, tokenSetter.Value);
if (seedTokenKeys.Contains(tokenSetter.Key))
{
sharedTokenConfigMap[DesignTokenKind.Seed].Add(tokenSetter.Key, tokenSetter.Value);
}
else if (mapTokenKeys.Contains(tokenSetter.Key))
{
sharedTokenConfigMap[DesignTokenKind.Map].Add(tokenSetter.Key, tokenSetter.Value);
}
else if (aliasTokenKeys.Contains(tokenSetter.Key))
{
sharedTokenConfigMap[DesignTokenKind.Alias].Add(tokenSetter.Key, tokenSetter.Value);
}
}
_sharedToken.LoadConfig(sharedTokenConfig);
_sharedToken.LoadConfig(sharedTokenConfigMap[DesignTokenKind.Seed]);
// 计算得到 Map Tokens
calculator.Calculate(_sharedToken);
// 覆盖 Map Token
_sharedToken.LoadConfig(sharedTokenConfigMap[DesignTokenKind.Map]);
// 交付最终的基础色
_sharedToken.ColorBgBase = calculator.ColorBgBase;
_sharedToken.ColorTextBase = calculator.ColorTextBase;
_sharedToken.CalculateAliasTokenValues();
// 覆盖 Alias Token
_sharedToken.LoadConfig(sharedTokenConfigMap[DesignTokenKind.Alias]);
var resourceDictionary = new ResourceDictionary();
_sharedToken.BuildResourceDictionary(resourceDictionary);
@@ -8,7 +8,7 @@ namespace AtomUI.Theme.TokenSystem;
public abstract class AbstractDesignToken : IDesignToken
{
private readonly IDictionary<string, object?> _tokenAccessCache;
private readonly Dictionary<string, object?> _tokenAccessCache = new Dictionary<string, object?>();
private static readonly Dictionary<Type, ITokenValueConverter> _valueConverters;
static AbstractDesignToken()
@@ -24,44 +24,42 @@ public abstract class AbstractDesignToken : IDesignToken
_valueConverters.Add(valueConverter.TargetType(), valueConverter);
}
}
public AbstractDesignToken()
{
_tokenAccessCache = new Dictionary<string, object?>();
}
internal virtual void LoadConfig(IDictionary<string, string> tokenConfigInfo)
{
try
{
var type = GetType();
var tokenPropertyMap =
type.GetProperties(BindingFlags.Public | BindingFlags.NonPublic | BindingFlags.Instance | BindingFlags.FlattenHierarchy)
.ToDictionary(p => p.Name);
foreach (var tokenInfo in tokenConfigInfo)
if (tokenConfigInfo.Count > 0)
{
var tokenName = tokenInfo.Key;
if (!tokenPropertyMap.ContainsKey(tokenInfo.Key))
var type = GetType();
var tokenPropertyMap =
type.GetProperties(BindingFlags.Public | BindingFlags.NonPublic | BindingFlags.Instance | BindingFlags.FlattenHierarchy)
.ToDictionary(p => p.Name);
foreach (var tokenInfo in tokenConfigInfo)
{
var logger = Logger.TryGet(LogEventLevel.Warning, AtomUILogArea.Theme);
logger?.Log(this, $"Token property: '{tokenInfo.Key}' found in token {type.Name}.'");
continue;
}
var property = tokenPropertyMap[tokenName];
var propertyType = property.PropertyType;
if (_valueConverters.ContainsKey(propertyType))
{
property.SetValue(this, _valueConverters[propertyType].Convert(tokenConfigInfo[tokenName]));
}
else
{
try
var tokenName = tokenInfo.Key;
if (!tokenPropertyMap.ContainsKey(tokenInfo.Key))
{
property.SetValue(tokenName, tokenConfigInfo[tokenName]);
var logger = Logger.TryGet(LogEventLevel.Warning, AtomUILogArea.Theme);
logger?.Log(this, $"Token property: '{tokenInfo.Key}' found in token {type.Name}.'");
continue;
}
catch (Exception ex)
var property = tokenPropertyMap[tokenName];
var propertyType = property.PropertyType;
if (_valueConverters.ContainsKey(propertyType))
{
throw new InvalidOperationException($"Unable to set token property: {tokenName}, maybe value type mismatch.", ex);
property.SetValue(this, _valueConverters[propertyType].Convert(tokenConfigInfo[tokenName]));
}
else
{
try
{
property.SetValue(tokenName, tokenConfigInfo[tokenName]);
}
catch (Exception ex)
{
throw new InvalidOperationException($"Unable to set token property: {tokenName}, maybe value type mismatch.", ex);
}
}
}
}
@@ -0,0 +1,8 @@
namespace AtomUI.Theme.TokenSystem;
public enum DesignTokenKind
{
Seed,
Map,
Alias
}
@@ -0,0 +1,12 @@
namespace AtomUI.Theme.TokenSystem;
[AttributeUsage(AttributeTargets.Property, Inherited = false, AllowMultiple=false)]
public class DesignTokenKindAttribute : Attribute
{
public DesignTokenKind Kind { get; }
public DesignTokenKindAttribute(DesignTokenKind kind)
{
Kind = kind;
}
}
@@ -10,120 +10,140 @@ public partial class DesignToken
/// 内容区域背景色(悬停)
/// 控制内容区域背景色在鼠标悬停时的样式。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorFillContentHover { get; set; }
/// <summary>
/// 替代背景色
/// 控制元素替代背景色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorFillAlter { get; set; }
/// <summary>
/// 内容区域背景色
/// 控制内容区域的背景色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorFillContent { get; set; }
/// <summary>
/// 容器禁用态下的背景色
/// 控制容器在禁用状态下的背景色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorBgContainerDisabled { get; set; }
/// <summary>
/// 文本悬停态背景色
/// 控制文本在悬停状态下的背景色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorBgTextHover { get; set; }
/// <summary>
/// 文本激活态背景色
/// 控制文本在激活状态下的背景色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorBgTextActive { get; set; }
/// <summary>
/// 背景边框颜色
/// 控制元素背景边框的颜色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorBorderBg { get; set; }
/// <summary>
/// 分割线颜色
/// 用于作为分割线的颜色,此颜色和 colorBorderSecondary 的颜色一致,但是用的是透明色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorSplit { get; set; }
/// <summary>
/// 占位文本颜色
/// 控制占位文本的颜色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorTextPlaceholder { get; set; }
/// <summary>
/// 禁用字体颜色
/// 控制禁用状态下的字体颜色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorTextDisabled { get; set; }
/// <summary>
/// 标题字体颜色
/// 控制标题字体颜色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorTextHeading { get; set; }
/// <summary>
/// 文本标签字体颜色
/// 控制文本标签字体颜色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorTextLabel { get; set; }
/// <summary>
/// 文本描述字体颜色
/// 控制文本描述字体颜色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorTextDescription { get; set; }
/// <summary>
/// 固定文本高亮颜色
/// 控制带背景色的文本,例如 Primary Button 组件中的文本高亮颜色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorTextLightSolid { get; set; }
/// <summary>
/// 弱操作图标颜色
/// 控制弱操作图标的颜色,例如 allowClear 或 Alert 关闭按钮。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorIcon { get; set; }
/// <summary>
/// 弱操作图标悬浮态颜色
/// 控制弱操作图标在悬浮状态下的颜色,例如 allowClear 或 Alert 关闭按钮。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorIconHover { get; set; }
/// <summary>
/// 高亮颜色
/// 控制页面元素高亮时的颜色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorHighlight { get; set; }
/// <summary>
/// 输入组件的 Outline 颜色
/// 控制输入组件的外轮廓线颜色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorControlOutline { get; set; }
/// <summary>
/// 警告状态下的 Outline 颜色
/// 控制输入组件警告状态下的外轮廓线颜色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorWarningOutline { get; set; }
/// <summary>
/// 错误状态下的 Outline 颜色
/// 控制输入组件错误状态下的外轮廓线颜色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorErrorOutline { get; set; }
// Font
@@ -131,32 +151,38 @@ public partial class DesignToken
/// 选择器、级联选择器等中的操作图标字体大小
/// 控制选择器、级联选择器等中的操作图标字体大小。正常情况下与 fontSizeSM 相同。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double FontSizeIcon { get; set; }
/// <summary>
/// 内联 Icon 大小定义, 最小的尺寸
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double IconSizeXS { get; set; }
/// <summary>
/// 内联 Icon 大小定义
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double IconSizeSM { get; set; }
/// <summary>
/// 内联 Icon 大小定义, 正常的尺寸
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double IconSize { get; set; }
/// <summary>
/// 内联 Icon 大小定义, 最大的尺寸
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double IconSizeLG { get; set; }
/// <summary>
/// 标题类组件(如 h1、h2、h3)或选中项的字体粗细
/// 控制标题类组件(如 h1、h2、h3)或选中项的字体粗细。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public FontWeight FontWeightStrong { get; set; }
// Control
@@ -164,56 +190,67 @@ public partial class DesignToken
/// 输入组件的外轮廓线宽度
/// 控制标题类组件(如 h1、h2、h3)或选中项的字体粗细。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double ControlOutlineWidth { get; set; }
/// <summary>
/// 控制组件项在鼠标悬浮时的背景颜色
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ControlItemBgHover { get; set; } // Note. It also is a color
/// <summary>
/// 控制组件项在激活状态下的背景颜色
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ControlItemBgActive { get; set; } // Note. It also is a color
/// <summary>
/// 控制组件项在鼠标悬浮且激活状态下的背景颜色
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ControlItemBgActiveHover { get; set; } // Note. It also is a color
/// <summary>
/// 控制组件的交互大小
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double ControlInteractiveSize { get; set; }
/// <summary>
/// 控制组件项在禁用状态下的激活背景颜色
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ControlItemBgActiveDisabled { get; set; } // Note. It also is a color
/// <summary>
/// 线条宽度(聚焦态)
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double LineWidthFocus { get; set; }
/// <summary>
/// 聚焦态边框厚度
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Thickness FocusVisualBorderThickness { get; set; }
/// <summary>
/// 聚焦态边框颜色
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Color ColorFocusBorder { get; set; }
/// <summary>
/// 波浪动画的波动范围
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double WaveAnimationRange { get; set; }
/// <summary>
/// 波浪动画的初始透明度
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double WaveStartOpacity { get; set; }
// Padding
@@ -221,6 +258,7 @@ public partial class DesignToken
/// 极小内间距
/// 控制元素的极小内间距。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double UniformlyPaddingXXS { get; set; }
// Padding
@@ -228,79 +266,91 @@ public partial class DesignToken
/// 极小内间距
/// 控制元素的极小内间距。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Thickness PaddingXXS { get; set; }
/// <summary>
/// 特小内间距
/// 控制元素的特小内间距。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double UniformlyPaddingXS { get; set; }
/// <summary>
/// 特小内间距
/// 控制元素的特小内间距。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Thickness PaddingXS { get; set; }
/// <summary>
/// 小内间距
/// 控制元素的小内间距。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double UniformlyPaddingSM { get; set; }
/// <summary>
/// 小内间距
/// 控制元素的小内间距。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Thickness PaddingSM { get; set; }
/// <summary>
/// 内间距
/// 控制元素的内间距。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double UniformlyPadding { get; set; }
/// <summary>
/// 内间距
/// 控制元素的内间距。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Thickness Padding { get; set; }
/// <summary>
/// 中等内间距
/// 控制元素的中等内间距。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double UniformlyPaddingMD { get; set; }
/// <summary>
/// 中等内间距
/// 控制元素的中等内间距。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Thickness PaddingMD { get; set; }
/// <summary>
/// 大内间距
/// 控制元素的大内间距。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double UniformlyPaddingLG { get; set; }
/// <summary>
/// 大内间距
/// 控制元素的大内间距。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Thickness PaddingLG { get; set; }
/// <summary>
/// 特大内间距
/// 控制元素的特大内间距。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double UniformlyPaddingXL { get; set; }
/// <summary>
/// 特大内间距
/// 控制元素的特大内间距。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Thickness PaddingXL { get; set; }
// Padding Content
@@ -308,178 +358,209 @@ public partial class DesignToken
/// 内容水平内间距(LG)
/// 控制内容元素水平内间距,适用于大屏幕设备。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double PaddingContentHorizontalLG { get; set; }
/// <summary>
/// 内容水平内间距
/// 控制内容元素水平内间距。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double PaddingContentHorizontal { get; set; }
/// <summary>
/// 内容水平内间距(SM)
/// 控制内容元素水平内间距,适用于小屏幕设备。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double PaddingContentHorizontalSM { get; set; }
/// <summary>
/// 内容水平内间距(XS)
/// 控制内容元素水平内间距,适用于小屏幕设备。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double PaddingContentHorizontalXS { get; set; }
/// <summary>
/// 内容垂直内间距(LG)
/// 控制内容元素垂直内间距,适用于大屏幕设备。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double PaddingContentVerticalLG { get; set; }
/// <summary>
/// 内容垂直内间距
/// 控制内容元素垂直内间距。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double PaddingContentVertical { get; set; }
/// <summary>
/// 内容垂直内间距(SM)
/// 控制内容元素垂直内间距,适用于小屏幕设备。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double PaddingContentVerticalSM { get; set; }
/// <summary>
/// 外边距 XXS
/// 控制元素外边距,最小尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double UniformlyMarginXXS { get; set; }
/// <summary>
/// 外边距 XXS
/// 控制元素外边距,最小尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Thickness MarginXXS { get; set; }
/// <summary>
/// 外边距 XS
/// 控制元素外边距,小尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double UniformlyMarginXS { get; set; }
/// <summary>
/// 外边距 XS
/// 控制元素外边距,小尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Thickness MarginXS { get; set; }
/// <summary>
/// 外边距 SM
/// 控制元素外边距,中小尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double UniformlyMarginSM { get; set; }
/// <summary>
/// 外边距 SM
/// 控制元素外边距,中小尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Thickness MarginSM { get; set; }
/// <summary>
/// 外边距
/// 控制元素外边距,中等尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double UniformlyMargin { get; set; }
/// <summary>
/// 外边距
/// 控制元素外边距,中等尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Thickness Margin { get; set; }
/// <summary>
/// 外边距 MD
/// 控制元素外边距,中大尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double UniformlyMarginMD { get; set; }
/// <summary>
/// 外边距 MD
/// 控制元素外边距,中大尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Thickness MarginMD { get; set; }
/// <summary>
/// 外边距 LG
/// 控制元素外边距,大尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double UniformlyMarginLG { get; set; }
/// <summary>
/// 外边距 LG
/// 控制元素外边距,大尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Thickness MarginLG { get; set; }
/// <summary>
/// 外边距 XL
/// 控制元素外边距,超大尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double UniformlyMarginXL { get; set; }
/// <summary>
/// 外边距 XL
/// 控制元素外边距,超大尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Thickness MarginXL { get; set; }
/// <summary>
/// 外边距 XXL
/// 控制元素外边距,最大尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double UniformlyMarginXXL { get; set; }
/// <summary>
/// 外边距 XXL
/// 控制元素外边距,最大尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public Thickness MarginXXL { get; set; }
/// <summary>
/// 布局元素之间间隔,最小尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double SpacingXXS { get; set; }
/// <summary>
/// 布局元素之间间隔,小尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double SpacingXS { get; set; }
/// <summary>
/// 布局元素之间间隔,中小尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double SpacingSM { get; set; }
/// <summary>
/// 布局元素之间间隔,中等尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double Spacing { get; set; }
/// <summary>
/// 布局元素之间间隔,中大尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double SpacingMD { get; set; }
/// <summary>
/// 布局元素之间间隔,大尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double SpacingLG { get; set; }
/// <summary>
/// 布局元素之间间隔,超大尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double SpacingXL { get; set; }
/// <summary>
/// 布局元素之间间隔,最大尺寸。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double SpacingXXL { get; set; }
// =============== Legacy: should be remove ===============
@@ -487,54 +568,63 @@ public partial class DesignToken
/// 加载状态透明度
/// 控制加载状态的透明度。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double OpacityLoading { get; set; }
/// <summary>
/// 一级阴影
/// 控制元素阴影样式。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public BoxShadows BoxShadows { get; set; }
/// <summary>
/// 二级阴影
/// 控制元素二级阴影样式。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public BoxShadows BoxShadowsSecondary { get; set; }
/// <summary>
/// 三级阴影
/// 控制元素三级盒子阴影样式。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public BoxShadows BoxShadowsTertiary { get; set; }
/// <summary>
/// 链接文本装饰
/// 控制链接文本的装饰样式。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public TextDecorationInfo? LinkDecoration { get; set; }
/// <summary>
/// 链接鼠标悬浮时文本装饰
/// 控制链接鼠标悬浮时文本的装饰样式。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public TextDecorationInfo? LinkHoverDecoration { get; set; }
/// <summary>
/// 链接聚焦时文本装饰
/// 控制链接聚焦时文本的装饰样式。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public TextDecorationInfo? LinkFocusDecoration { get; set; }
/// <summary>
/// 控制水平内间距
/// 控制元素水平内间距。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double ControlPadding { get; set; }
/// <summary>
/// 控制中小尺寸水平内间距
/// 控制元素中小尺寸水平内间距。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public double ControlPaddingSM { get; set; }
// Media queries breakpoints
@@ -542,101 +632,118 @@ public partial class DesignToken
/// 屏幕宽度(像素) - 超小屏幕
/// 控制超小屏幕的屏幕宽度。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public int ScreenXS { get; set; }
/// <summary>
/// 屏幕宽度(像素) - 超小屏幕最小值
/// 控制超小屏幕的最小宽度。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public int ScreenXSMin { get; set; }
/// <summary>
/// 屏幕宽度(像素) - 超小屏幕最大值
/// 控制超小屏幕的最大宽度。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public int ScreenXSMax { get; set; }
/// <summary>
/// 屏幕宽度(像素) - 小屏幕
/// 控制小屏幕的屏幕宽度。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public int ScreenSM { get; set; }
/// <summary>
/// 屏幕宽度(像素) - 小屏幕最小值
/// 控制小屏幕的最小宽度。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public int ScreenSMMin { get; set; }
/// <summary>
/// 屏幕宽度(像素) - 小屏幕最大值
/// 控制小屏幕的最大宽度。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public int ScreenSMMax { get; set; }
/// <summary>
/// 屏幕宽度(像素) - 中等屏幕
/// 控制中等屏幕的屏幕宽度。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public int ScreenMD { get; set; }
/// <summary>
/// 屏幕宽度(像素) - 中等屏幕最小值
/// 控制中等屏幕的最小宽度。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public int ScreenMDMin { get; set; }
/// <summary>
/// 屏幕宽度(像素) - 中等屏幕最大值
/// 控制中等屏幕的最大宽度。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public int ScreenMDMax { get; set; }
/// <summary>
/// 屏幕宽度(像素) - 大屏幕
/// 控制大屏幕的屏幕宽度。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public int ScreenLG { get; set; }
/// <summary>
/// 屏幕宽度(像素) - 大屏幕最小值
/// 控制大屏幕的最小宽度。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public int ScreenLGMin { get; set; }
/// <summary>
/// 屏幕宽度(像素) - 大屏幕最大值
/// 控制大屏幕的最大宽度。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public int ScreenLGMax { get; set; }
/// <summary>
/// 屏幕宽度(像素) - 超大屏幕
/// 控制超大屏幕的屏幕宽度。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public int ScreenXL { get; set; }
/// <summary>
/// 屏幕宽度(像素) - 超大屏幕最小值
/// 控制超大屏幕的最小宽度。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public int ScreenXLMin { get; set; }
/// <summary>
/// 屏幕宽度(像素) - 超大屏幕最大值
/// 控制超大屏幕的最大宽度。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public int ScreenXLMax { get; set; }
/// <summary>
/// 屏幕宽度(像素) - 超超大屏幕
/// 控制超超大屏幕的屏幕宽度。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public int ScreenXXL { get; set; }
/// <summary>
/// 屏幕宽度(像素) - 超超大屏幕最小值
/// 控制超超大屏幕的最小宽度。
/// </summary>
[DesignTokenKind(DesignTokenKind.Alias)]
public int ScreenXXLMin { get; set; }
}
@@ -9,36 +9,42 @@ public partial class DesignToken
/// 错误色的浅色背景颜色
/// 1 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorErrorBg { get; set; }
/// <summary>
/// 错误色的浅色背景色悬浮态
/// 2 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorErrorBgHover { get; set; }
/// <summary>
/// 错误色的浅色背景色激活态
/// 3 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorErrorBgActive { get; set; }
/// <summary>
/// 错误色的描边色
/// 3 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorErrorBorder { get; set; }
/// <summary>
/// 错误色的描边色悬浮态
/// 4 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorErrorBorderHover { get; set; }
/// <summary>
/// 错误色的深色悬浮态
/// 5 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorErrorHover { get; set; }
/// <summary>
@@ -51,23 +57,27 @@ public partial class DesignToken
/// 错误色的深色激活态
/// 7 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorErrorActive { get; set; }
/// <summary>
/// 错误色的文本悬浮态
/// 8 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorErrorTextHover { get; set; }
/// <summary>
/// 错误色的文本默认态
/// 9 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorErrorText { get; set; }
/// <summary>
/// 错误色的文本激活态
/// 10 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorErrorTextActive { get; set; }
}
@@ -9,30 +9,35 @@ public partial class DesignToken
/// 信息色的浅色背景颜色
/// 1 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorInfoBg { get; set; }
/// <summary>
/// 信息色的浅色背景色悬浮态
/// 2 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorInfoBgHover { get; set; }
/// <summary>
/// 信息色的描边色
/// 3 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorInfoBorder { get; set; }
/// <summary>
/// 信息色的描边色悬浮态
/// 4 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorInfoBorderHover { get; set; }
/// <summary>
/// 信息色的深色悬浮态
/// 5 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorInfoHover { get; set; }
/// <summary>
@@ -45,23 +50,27 @@ public partial class DesignToken
/// 信息色的深色激活态
/// 7 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorInfoActive { get; set; }
/// <summary>
/// 信息色的文本悬浮态
/// 8 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorInfoTextHover { get; set; }
/// <summary>
/// 信息色的文本默认态
/// 9 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorInfoText { get; set; }
/// <summary>
/// 信息色的文本激活态
/// 10 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorInfoTextActive { get; set; }
}
@@ -15,11 +15,13 @@ public partial class DesignToken
/// 超链接悬浮颜色
/// 控制超链接悬浮时的颜色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorLinkHover { get; set; }
/// <summary>
/// 超链接激活颜色
/// 控制超链接被点击时的颜色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorLinkActive { get; set; }
}
@@ -9,27 +9,32 @@ public partial class DesignToken
/// 纯白色
/// 不随主题变化的纯白色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorWhite { get; set; } = Color.FromRgb(255, 255, 255);
/// <summary>
/// 浮层的背景蒙层颜色
/// 浮层的背景蒙层颜色,用于遮罩浮层下面的内容,Modal、Drawer 等组件的蒙层使用的是该 token
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorBgMask { get; set; }
/// <summary>
/// 纯黑色
/// 不随主题变化的纯黑色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorBlack { get; set; } = Color.FromRgb(0, 0, 0);
/// <summary>
/// 选择背景色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color SelectionBackground { get; set; }
/// <summary>
/// 选择前景色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color SelectionForeground { get; set; }
}
@@ -10,24 +10,28 @@ public partial class DesignToken
/// 一级文本色
/// 最深的文本色。为了符合W3C标准,默认的文本颜色使用了该色,同时这个颜色也是最深的中性色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorText { get; set; }
/// <summary>
/// 二级文本色
/// 作为第二梯度的文本色,一般用在不那么需要强化文本颜色的场景,例如 Label 文本、Menu 的文本选中态等场景。
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorTextSecondary { get; set; }
/// <summary>
/// 三级文本色
/// 第三级文本色一般用于描述性文本,例如表单的中的补充说明文本、列表的描述性文本等场景。
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorTextTertiary { get; set; }
/// <summary>
/// 四级文本色
/// 第四级文本色是最浅的文本色,例如表单的输入提示文本、禁用色文本等。
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorTextQuaternary { get; set; }
// ---------- Border ---------- //
@@ -35,12 +39,14 @@ public partial class DesignToken
/// 一级边框色
/// 默认使用的边框颜色, 用于分割不同的元素,例如:表单的分割线、卡片的分割线等。
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorBorder { get; set; }
/// <summary>
/// 二级边框色
/// 比默认使用的边框色要浅一级,此颜色和 colorSplit 的颜色一致。使用的是实色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorBorderSecondary { get; set; }
// ---------- Fill ---------- //
@@ -49,24 +55,28 @@ public partial class DesignToken
/// 一级填充色
/// 最深的填充色,用于拉开与二、三级填充色的区分度,目前只用在 Slider 的 hover 效果。
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorFill { get; set; }
/// <summary>
/// 二级填充色
/// 二级填充色可以较为明显地勾勒出元素形体,如 Rate、Skeleton 等。也可以作为三级填充色的 Hover 状态,如 Table 等。
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorFillSecondary { get; set; }
/// <summary>
/// 三级填充色
/// 三级填充色用于勾勒出元素形体的场景,如 Slider、Segmented 等。如无强调需求的情况下,建议使用三级填色作为默认填色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorFillTertiary { get; set; }
/// <summary>
/// 四级填充色
/// 最弱一级的填充色,适用于不易引起注意的色块,例如斑马纹、区分边界的色块等。
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorFillQuaternary { get; set; }
// ---------- Surface ---------- //
@@ -74,30 +84,35 @@ public partial class DesignToken
/// 布局背景色
/// 该色用于页面整体布局的背景色,只有需要在页面中处于 B1 的视觉层级时才会使用该 token,其他用法都是错误的
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorBgLayout { get; set; }
/// <summary>
/// 组件容器背景色
/// 组件的容器背景色,例如:默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorBgContainer { get; set; }
/// <summary>
/// 浮层容器背景色
/// 浮层容器背景色,在暗色模式下该 token 的色值会比 `colorBgContainer` 要亮一些。例如:模态框、弹出框、菜单等。
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorBgElevated { get; set; }
/// <summary>
/// 引起注意的背景色
/// 该色用于引起用户强烈关注注意的背景色,目前只用在 Tooltip 的背景色上。
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorBgSpotlight { get; set; }
/// <summary>
/// 毛玻璃容器背景色
/// 控制毛玻璃容器的背景色,通常为透明色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorBgBlur { get; set; }
// ---------- Solid ---------- //
@@ -105,17 +120,20 @@ public partial class DesignToken
/// 实心的背景颜色,目前只用在默认实心按钮背景色上。
/// Solid background color active state, currently only used in the active effect of the default solid button.
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorBgSolid { get; set; }
/// <summary>
/// 实心的背景颜色激活态,目前只用在默认实心按钮的 active 效果。
/// Solid background color active state, currently only used in the active effect of the default solid button.
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorBgSolidActive { get; set; }
/// <summary>
/// 实心的背景颜色悬浮态,目前只用在默认实心按钮的 hover 效果。
/// Solid background color hover state, currently only used in the hover effect of the default solid button.
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorBgSolidHover { get; set; }
}
@@ -17,6 +17,7 @@ public partial class DesignToken
/// 主色浅色背景颜色,一般用于视觉层级较弱的选中状态。
/// 1 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorPrimaryBg { get; set; }
/// <summary>
@@ -24,6 +25,7 @@ public partial class DesignToken
/// 与主色浅色背景颜色相对应的悬浮态颜色。
/// 2 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorPrimaryBgHover { get; set; }
/// <summary>
@@ -31,6 +33,7 @@ public partial class DesignToken
/// 主色梯度下的描边用色,用在 Slider 等组件的描边上。
/// 3 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorPrimaryBorder { get; set; }
/// <summary>
@@ -38,6 +41,7 @@ public partial class DesignToken
/// 主色梯度下的描边用色的悬浮态,Slider 、Button 等组件的描边 Hover 时会使用。
/// 4 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorPrimaryBorderHover { get; set; }
/// <summary>
@@ -45,6 +49,7 @@ public partial class DesignToken
/// 主色梯度下的悬浮态。
/// 5 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorPrimaryHover { get; set; }
/// <summary>
@@ -52,6 +57,7 @@ public partial class DesignToken
/// 主色梯度下的深色激活态。
/// 7 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorPrimaryActive { get; set; }
/// <summary>
@@ -59,6 +65,7 @@ public partial class DesignToken
/// 主色梯度下的文本悬浮态。
/// 8 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorPrimaryTextHover { get; set; }
/// <summary>
@@ -66,6 +73,7 @@ public partial class DesignToken
/// 主色梯度下的文本颜色。
/// 9 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorPrimaryText { get; set; }
/// <summary>
@@ -73,5 +81,6 @@ public partial class DesignToken
/// 主色梯度下的文本激活态。
/// 10 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorPrimaryTextActive { get; set; }
}
@@ -10,6 +10,7 @@ public partial class DesignToken
/// 成功色的浅色背景颜色,用于 Tag 和 Alert 的成功态背景色
/// 1 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorSuccessBg { get; set; }
/// <summary>
@@ -17,6 +18,7 @@ public partial class DesignToken
/// 成功色浅色背景颜色,一般用于视觉层级较弱的选中状态,不过 antd 目前没有使用到该 token
/// 2 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorSuccessBgHover { get; set; }
/// <summary>
@@ -24,18 +26,21 @@ public partial class DesignToken
/// 成功色的描边色,用于 Tag 和 Alert 的成功态描边色
/// 3 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorSuccessBorder { get; set; }
/// <summary>
/// 成功色的描边色悬浮态
/// 4 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorSuccessBorderHover { get; set; }
/// <summary>
/// 成功色的深色悬浮态
/// 5 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorSuccessHover { get; set; }
/// <summary>
@@ -49,23 +54,27 @@ public partial class DesignToken
/// 成功色的深色激活态
/// 7 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorSuccessActive { get; set; }
/// <summary>
/// 成功色的文本悬浮态
/// 8 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorSuccessTextHover { get; set; }
/// <summary>
/// 成功色的文本默认态
/// 9 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorSuccessText { get; set; }
/// <summary>
/// 成功色的文本激活态
/// 10 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorSuccessTextActive { get; set; }
}
@@ -9,30 +9,35 @@ public partial class DesignToken
/// 警戒色的浅色背景颜色
/// 1 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorWarningBg { get; set; }
/// <summary>
/// 警戒色的浅色背景色悬浮态
/// 2 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorWarningBgHover { get; set; }
/// <summary>
/// 警戒色的描边色
/// 3 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorWarningBorder { get; set; }
/// <summary>
/// 警戒色的描边色悬浮态
/// 4 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorWarningBorderHover { get; set; }
/// <summary>
/// 警戒色的深色悬浮态
/// 5 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorWarningHover { get; set; }
/// <summary>
@@ -46,23 +51,27 @@ public partial class DesignToken
/// 警戒色的深色激活态
/// 7 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorWarningActive { get; set; }
/// <summary>
/// 警戒色的文本悬浮态
/// 8 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorWarningTextHover { get; set; }
/// <summary>
/// 警戒色的文本默认态
/// 9 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorWarningText { get; set; }
/// <summary>
/// 警戒色的文本激活态
/// 10 号色
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Color ColorWarningTextActive { get; set; }
}
@@ -7,107 +7,126 @@ public partial class DesignToken
/// <summary>
/// 小号字体大小
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double FontSizeSM { get; set; }
/// <summary>
/// 大号字体大小
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double FontSizeLG { get; set; }
/// <summary>
/// 超大号字体大小
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double FontSizeXL { get; set; }
/// <summary>
/// 一级标题字号
/// H1 标签所使用的字号
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double FontSizeHeading1 { get; set; } = 38;
/// <summary>
/// 二级标题字号
/// h2 标签所使用的字号
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double FontSizeHeading2 { get; set; } = 30;
/// <summary>
/// 三级标题字号
/// h3 标签使用的字号
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double FontSizeHeading3 { get; set; } = 24;
/// <summary>
/// 四级标题字号
/// h4 标签使用的字号
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double FontSizeHeading4 { get; set; } = 20;
/// <summary>
/// 五级标题字号
/// h5 标签使用的字号
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double FontSizeHeading5 { get; set; } = 16;
// LineHeight
/// <summary>
/// 文本行高
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double LineHeightRatio { get; set; }
/// <summary>
/// 大型文本行高
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double LineHeightRatioLG { get; set; }
/// <summary>
/// 小型文本行高
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double LineHeightRatioSM { get; set; }
// TextHeight
/// <summary>
/// Round of fontSize * lineHeight
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double FontHeight { get; set; }
/// <summary>
/// Round of fontSizeSM * lineHeightSM
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double FontHeightSM { get; set; }
/// <summary>
/// Round of fontSizeLG * lineHeightLG
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double FontHeightLG { get; set; }
/// <summary>
/// 一级标题行高
/// H1 标签所使用的行高
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double LineHeightHeading1 { get; set; }
/// <summary>
/// 二级标题行高
/// h2 标签所使用的行高
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double LineHeightHeading2 { get; set; }
/// <summary>
/// 三级标题行高
/// h3 标签所使用的行高
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double LineHeightHeading3 { get; set; }
/// <summary>
/// 四级标题行高
/// h4 标签所使用的行高
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double LineHeightHeading4 { get; set; }
/// <summary>
/// 五级标题行高
/// h5 标签所使用的行高
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double LineHeightHeading5 { get; set; }
}
@@ -6,15 +6,18 @@ public partial class DesignToken
/// <summary>
/// 更小的组件高度
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double ControlHeightXS { get; set; }
/// <summary>
/// 较小的组件高度
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double ControlHeightSM { get; set; }
/// <summary>
/// 较高的组件高度
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double ControlHeightLG { get; set; }
}
@@ -6,70 +6,81 @@ namespace AtomUI.Theme.TokenSystem;
[GlobalDesignToken]
public partial class DesignToken
{
/// <summary>
/// 品牌主色
/// 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后,我们会自动帮你生成一套完整的色板,并赋予它们有效的设计语义
/// </summary>
public Color ColorPrimary { get; set; }
/// <summary>
/// 品牌主色
/// 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后,我们会自动帮你生成一套完整的色板,并赋予它们有效的设计语义
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public Color ColorPrimary { get; set; }
/// <summary>
/// 成功色
/// 用于表示操作成功的 Token 序列,如 Result、Progress 等组件会使用该组梯度变量。
/// </summary>
public Color ColorSuccess { get; set; }
/// <summary>
/// 成功色
/// 用于表示操作成功的 Token 序列,如 Result、Progress 等组件会使用该组梯度变量。
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public Color ColorSuccess { get; set; }
/// <summary>
/// 警戒色
/// 用于表示操作警告的 Token 序列,如 Notification、 Alert等警告类组件或 Input 输入类等组件会使用该组梯度变量。
/// </summary>
public Color ColorWarning { get; set; }
/// <summary>
/// 警戒色
/// 用于表示操作警告的 Token 序列,如 Notification、 Alert等警告类组件或 Input 输入类等组件会使用该组梯度变量。
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public Color ColorWarning { get; set; }
/// <summary>
/// 错误色
/// 用于表示操作失败的 Token 序列,如失败按钮、错误状态提示(Result)组件等。
/// </summary>
public Color ColorError { get; set; }
/// <summary>
/// 错误色
/// 用于表示操作失败的 Token 序列,如失败按钮、错误状态提示(Result)组件等。
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public Color ColorError { get; set; }
/// <summary>
/// 信息色
/// 用于表示操作信息的 Token 序列,如 Alert 、Tag、 Progress 等组件都有用到该组梯度变量。
/// </summary>
public Color ColorInfo { get; set; }
/// <summary>
/// 信息色
/// 用于表示操作信息的 Token 序列,如 Alert 、Tag、 Progress 等组件都有用到该组梯度变量。
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public Color ColorInfo { get; set; }
/// <summary>
/// 基础文本色
/// 用于派生文本色梯度的基础变量,v5 中我们添加了一层文本色的派生算法可以产出梯度明确的文本色的梯度变量。但请不要在代码中直接使用该 Seed Token !
/// </summary>
public Color? ColorTextBase { get; set; }
/// <summary>
/// 基础文本色
/// 用于派生文本色梯度的基础变量,v5 中我们添加了一层文本色的派生算法可以产出梯度明确的文本色的梯度变量。但请不要在代码中直接使用该 Seed Token !
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public Color? ColorTextBase { get; set; }
/// <summary>
/// 基础背景色
/// 用于派生背景色梯度的基础变量,v5 中我们添加了一层背景色的派生算法可以产出梯度明确的背景色的梯度变量。但请不要在代码中直接使用该 Seed Token !
/// </summary>
public Color? ColorBgBase { get; set; }
/// <summary>
/// 基础背景色
/// 用于派生背景色梯度的基础变量,v5 中我们添加了一层背景色的派生算法可以产出梯度明确的背景色的梯度变量。但请不要在代码中直接使用该 Seed Token !
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public Color? ColorBgBase { get; set; }
/// <summary>
/// 超链接颜色
/// 控制超链接的颜色。
/// </summary>
public Color? ColorLink { get; set; }
/// <summary>
/// 超链接颜色
/// 控制超链接的颜色。
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public Color? ColorLink { get; set; }
/// <summary>
/// 透明色
/// </summary>
public Color ColorTransparent { get; set; }
/// <summary>
/// 透明色
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public Color ColorTransparent { get; set; }
// ---------- Font ---------- //
/// <summary>
/// 字体
/// Ant Design 的字体家族中优先使用系统默认的界面字体,同时提供了一套利于屏显的备用字体库,来维护在不同平台以及浏览器的显示下,字体始终保持良好的易读性和可读性,体现了友好、稳定和专业的特性。
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public FontFamily? FontFamily { get; set; }
/// <summary>
/// 默认字号
/// 设计系统中使用最广泛的字体大小,文本梯度也将基于该字号进行派生。
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public double FontSize { get; set; } = 14;
// ---------- Line ---------- //
@@ -77,12 +88,14 @@ public partial class DesignToken
/// 基础线宽
/// 用于控制组件边框、分割线等的宽度
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public double LineWidth { get; set; } = 1;
/// <summary>
/// 线条样式
/// 用于控制组件边框、分割线等的样式,默认是实线
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public LineStyle LineType { get; set; } = LineStyle.Solid;
// ---------- BorderRadius ---------- //
@@ -90,30 +103,35 @@ public partial class DesignToken
/// 基础圆角
/// 基础组件的圆角大小,例如按钮、输入框、卡片等
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public CornerRadius BorderRadius { get; set; }
/// <summary>
/// 尺寸变化单位
/// 用于控制组件尺寸的变化单位,在 Ant Design 中我们的基础单位为 4 ,便于更加细致地控制尺寸梯度
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public double SizeUnit { get; set; } = 4;
/// <summary>
/// 尺寸步长
/// 用于控制组件尺寸的基础步长,尺寸步长结合尺寸变化单位,就可以派生各种尺寸梯度。通过调整步长即可得到不同的布局模式,例如 V5 紧凑模式下的尺寸步长为 2
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public double SizeStep { get; set; } = 4;
/// <summary>
/// 基础高度
/// Ant Design 中按钮和输入框等基础控件的高度
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public double SizePopupArrow { get; set; } = 16;
/// <summary>
/// 基础高度
/// Ant Design 中按钮和输入框等基础控件的高度
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public double ControlHeight { get; set; } = 32;
// ---------- zIndex ---------- //
@@ -121,18 +139,21 @@ public partial class DesignToken
/// 浮层基础 zIndex
/// 所有组件的基础 Z 轴值,用于一些悬浮类的组件的可以基于该值 Z 轴控制层级,例如 BackTop、 Affix 等
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public int ZIndexBase { get; set; } = 0;
/// <summary>
/// 浮层基础 zIndex
/// 浮层类组件的基础 Z 轴值,用于一些悬浮类的组件的可以基于该值 Z 轴控制层级,例如 FloatButton、 Affix、Modal 等
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public int ZIndexPopupBase { get; set; } = 1000;
// ---------- Opacity ---------- //
/// <summary>
/// 图片不透明度
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public double OpacityImage { get; set; } = 1.0;
// ---------- motion ---------- //
@@ -140,11 +161,13 @@ public partial class DesignToken
/// 动画时长变化单位
/// 用于控制动画时长的变化单位
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public int MotionUnit { get; set; } = 100;
/// <summary>
/// 动画基础时长。
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public int MotionBase { get; set; } = 0;
// ---------- Style ---------- //
@@ -153,6 +176,7 @@ public partial class DesignToken
///
/// 用于将组件的视觉效果变为线框化,如果需要使用 V4 的效果,需要开启配置项
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public bool Wireframe { get; set; } = false;
/// <summary>
@@ -160,6 +184,7 @@ public partial class DesignToken
///
/// 用于配置动画效果,为 `false` 时则关闭动画
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public bool EnableMotion { get; set; } = true;
/// <summary>
@@ -167,5 +192,6 @@ public partial class DesignToken
///
/// 按钮,单选按钮等点击后的波浪动画效果
/// </summary>
[DesignTokenKind(DesignTokenKind.Seed)]
public bool EnableWaveSpirit { get; set; } = true;
}
@@ -6,46 +6,55 @@ public partial class DesignToken
/// <summary>
/// XXL
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double SizeXXL { get; set; } = 48;
/// <summary>
/// XL
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double SizeXL { get; set; } = 32;
/// <summary>
/// LG
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double SizeLG { get; set; } = 24;
/// <summary>
/// MD
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double SizeMD { get; set; } = 20;
/// <summary>
/// Same as size by default, but could be larger in compact mode
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double SizeMS { get; set; }
/// <summary>
/// 默认
/// 默认尺寸
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double Size { get; set; } = 16;
/// <summary>
/// SM
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double SizeSM { get; set; } = 12;
/// <summary>
/// XS
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double SizeXS { get; set; } = 8;
/// <summary>
/// XXS
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double SizeXXS { get; set; } = 4;
}
@@ -9,54 +9,64 @@ public partial class DesignToken
/// 线宽
/// 描边类组件的默认线宽,如 Button、Input、Select 等输入类控件。
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public double LineWidthBold { get; set; } = 1;
/// <summary>
/// 边框的宽细
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public Thickness BorderThickness { get; set; }
/// <summary>
/// XS号圆角
/// XS号圆角,用于组件中的一些小圆角,如 Segmented 、Arrow 等一些内部圆角的组件样式中。
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public CornerRadius BorderRadiusXS { get; set; } = new CornerRadius(2);
/// <summary>
/// SM号圆角
/// SM号圆角,用于组件小尺寸下的圆角,如 Button、Input、Select 等输入类控件在 small size 下的圆角
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public CornerRadius BorderRadiusSM { get; set; } = new CornerRadius(4);
/// <summary>
/// LG号圆角
/// LG号圆角,用于组件中的一些大圆角,如 Card、Modal 等一些组件样式。
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public CornerRadius BorderRadiusLG { get; set; } = new CornerRadius(8);
/// <summary>
/// 外部圆角
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public CornerRadius BorderRadiusOuter { get; set; } = new CornerRadius(4);
// Motion
/// <summary>
/// 动效播放速度,快速。用于小型元素动画交互
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public TimeSpan MotionDurationFast { get; set; }
/// <summary>
/// 动效播放速度,中速。用于中型元素动画交互
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public TimeSpan MotionDurationMid { get; set; }
/// <summary>
/// 动效播放速度,慢速。用于大型元素如面板动画交互
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public TimeSpan MotionDurationSlow { get; set; }
/// <summary>
/// 动效播放速度,最慢速。用于大型元素如面板动画交互
/// </summary>
[DesignTokenKind(DesignTokenKind.Map)]
public TimeSpan MotionDurationVerySlow { get; set; }
}
@@ -1,4 +1,5 @@
using AtomUI.Media;
using System.Reflection;
using AtomUI.Media;
using AtomUI.Theme.Palette;
using AtomUI.Theme.Styling;
using Avalonia;
@@ -274,4 +275,18 @@ public partial class DesignToken : AbstractDesignToken
Color = ColorUtils.FromRgbF(0.02, 0, 0, 0)
}]);
}
internal static IEnumerable<PropertyInfo> GetTokenProperties(DesignTokenKind kind)
{
var type = typeof(DesignToken);
var tokenProperties = type.GetProperties(BindingFlags.Public |
BindingFlags.NonPublic |
BindingFlags.Instance |
BindingFlags.FlattenHierarchy);
return tokenProperties.Where(prop =>
{
var attribute = prop.GetCustomAttribute<DesignTokenKindAttribute>();
return attribute != null && attribute.Kind == kind;
});
}
}