颜色

有格移动端设计规范：规范

主色 （品牌色）

主色调

用于按钮、文字、图标、链接等，其中延伸出辅助色。

h3-color-brand-normal、h3-color-brand-hover

#315EFB、#2041D4

@h3-color-brand-normal: @h3-blue-atla-6; //主色
@h3-color-brand-hover: @h3-blue-atla-7; // hover

功能色

Info

用于信息提示

h3-color-info-bg、h3-color-info-stroke、h3-color-info-normal、h3-color-info-hover

#F0F6FF、#ADC7FF、#315EFB、#2041D4

Success

用于成功提示

h3-color-success-bg、h3-color-success-stroke、h3-color-success-normal、h3-color-success-hover

#E6FFED、#7AE69F、#0ABF5B、#00994A

Warning

用于警告提示

h3-color-warning-bg、h3-color-warning-stroke、h3-color-warning-normal、h3-color-warning-hover

#FFF9E6、#FFD97A、#FF9D00、#D97E00

Error

用于危险按钮、检验提示

h3-color-error-bg、h3-color-error-stroke、h3-color-error-normal、h3-color-error-hover

#FFF1F0、#FFB4B0、#FF3640、#D92332

// 信息
@h3-color-info-bg: @h3-blue-atla-1; //标签背景色
@h3-color-info-stroke: @h3-blue-atla-3; // 标签描边
@h3-color-info-normal: @h3-blue-atla-6; //正常
@h3-color-info-hover: @h3-blue-atla-7; //hover

// 成功
@h3-color-success-bg: @h3-green-atla-1;
@h3-color-success-stroke: @h3-green-atla-3;
@h3-color-success-normal: @h3-green-atla-6;
@h3-color-success-hover: @h3-green-atla-7;

// 警告
@h3-color-warning-bg: @h3-yellow-atla-1;
@h3-color-warning-stroke: @h3-yellow-atla-3;
@h3-color-warning-normal: @h3-yellow-atla-6;
@h3-color-warning-hover: @h3-yellow-atla-7;

// 错误
@h3-color-error-bg: @h3-red-atla-1;
@h3-color-error-stroke: @h3-red-atla-3;
@h3-color-error-normal: @h3-red-atla-6;
@h3-color-error-hover: @h3-red-atla-7;

背景颜色

#F5F6F9

h3-color-fill-global

#E8EAF1

h3-color-fill-disabled

rgba(18,25,51,0.85)

h3-color-fill-toast

// 背景颜色
@h3-color-fill-global: ...; //全局背景色、次要按钮、搜索框
@h3-color-fill-disabled: ...; //失效按钮、禁用图标
@h3-color-fill-toast: ...; // 轻提示、加载背景色

边框线颜色

rgba(209,211,228,0.48)

h3-color-line-divider

#D1D3E4

h3-color-line-stroke

#315EFB

h3-color-line-primary

//边框线颜色
@h3-color-line-divider: ...; // Tab页分割线 、分割线 1
@h3-color-line-stroke: ...; // 按钮描边、分割线2
@h3-color-line-primary: ...; //按钮描边

字体颜色

#121933

h3-color-text-primary

#707481

h3-color-text-secondary

#BBBECA

h3-color-text-disabled

//字体颜色
@h3-color-text-primary: #121933; //一极黑 标题正文
@h3-color-text-secondary: #707481; //二极黑 辅助文本
@h3-color-text-disabled: #BBBECA; //三极黑 失效文本