-
Notifications
You must be signed in to change notification settings - Fork 0
/
theme.config.js
201 lines (163 loc) · 5.04 KB
/
theme.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
module.exports = {
/*"brand-primary": "#f08300",
"primary-button-fill-tap":"#fd6a05",
"font-size-caption":'14px',
"color-text-caption": "#aaa", // 辅助描述*/
}
/*
@hd: 1px; // 基本单位
// 支付宝钱包默认主题
// https://github.com/ant-design/ant-design-mobile/wiki/设计变量表及命名规范
// 色彩
// ---
// 文字色
@color-text-base: #000; // 基本
@color-text-base-inverse: #fff; // 基本 - 反色
@color-text-secondary: #a4a9b0; // 辅助色
@color-text-placeholder: #bbb; // 文本框提示
@color-text-disabled: #bbb; // 失效
@color-text-caption: #888; // 辅助描述
@color-text-paragraph: #333; // 段落
@color-link: @brand-primary; // 链接
// 背景色
@fill-base: #fff; // 组件默认背景
@fill-body: #f5f5f9; // 页面背景
@fill-tap: #ddd; // 组件默认背景 - 按下
@fill-disabled: #ddd; // 通用失效背景
@fill-mask: rgba(0, 0, 0, 0.4); // 遮罩背景
@color-icon-base: #ccc; // 许多小图标的背景，比如一些小圆点，加减号
@fill-grey: #f7f7f7;
// 透明度
@opacity-disabled: 0.3; // switch checkbox radio 等组件禁用的透明度
// 全局/品牌色
@brand-primary: #108ee9;
@brand-primary-tap: #1284d6;
@brand-success: #6abf47;
@brand-warning: #ffc600;
@brand-error: #f4333c;
@brand-important: #ff5b05; // 用于小红点
@brand-wait: #108ee9;
// 边框色
@border-color-base: #ddd;
// 字体尺寸
// ---
@font-size-icontext: 10 * @hd;
@font-size-caption-sm: 12 * @hd;
@font-size-base: 14 * @hd;
@font-size-subhead: 15 * @hd;
@font-size-caption: 16 * @hd;
@font-size-heading: 17 * @hd;
// 圆角
// ---
@radius-xs: 2 * @hd;
@radius-sm: 3 * @hd;
@radius-md: 5 * @hd;
@radius-lg: 7 * @hd;
@radius-circle: 50%;
// 边框尺寸
// ---
@border-width-sm: 1PX;
@border-width-md: 1PX;
@border-width-lg: 2 * @hd;
// 间距
// ---
// 水平间距
@h-spacing-sm: 5 * @hd;
@h-spacing-md: 8 * @hd;
@h-spacing-lg: 15 * @hd;
// 垂直间距
@v-spacing-xs: 3 * @hd;
@v-spacing-sm: 6 * @hd;
@v-spacing-md: 9 * @hd;
@v-spacing-lg: 15 * @hd;
@v-spacing-xl: 21 * @hd;
// 高度
// ---
@line-height-base: 1; // 单行行高
@line-height-paragraph: 1.5; // 多行行高
// 图标尺寸
// ---
@icon-size-xxs: 15 * @hd;
@icon-size-xs: 18 * @hd;
@icon-size-sm: 21 * @hd;
@icon-size-md: 22 * @hd; // 导航条上的图标、grid的图标大小
@icon-size-lg: 36 * @hd;
// 动画缓动
// ---
@ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
// 组件变量
// ---
@actionsheet-item-height: 50 * @hd;
@actionsheet-item-font-size: 18 * @hd;
// button
@button-height: 47 * @hd;
@button-font-size: 18 * @hd;
@button-height-sm: 30 * @hd;
@button-font-size-sm: 13 * @hd;
@primary-button-fill: @brand-primary;
@primary-button-fill-tap: #0e80d2;
@ghost-button-color: @brand-primary; // 同时应用于背景、文字颜色、边框色
@ghost-button-fill-tap: fade(@brand-primary, 60%);
@warning-button-fill: #e94f4f;
@warning-button-fill-tap: #d24747;
@link-button-fill-tap: #ddd;
@link-button-font-size: 16 * @hd;
// modal
@modal-font-size-heading: 18 * @hd;
@modal-button-font-size: 18 * @hd; // 按钮字号
@modal-button-height: 50 * @hd; // 按钮高度
// list
@list-title-height: 30 * @hd;
@list-item-height-sm: 35 * @hd;
@list-item-height: 44 * @hd;
// input
@input-label-width: 17 * @hd; // InputItem、TextareaItem 文字长度基础值
@input-font-size: 17 * @hd;
@input-color-icon: #ccc; // input clear icon 的背景色
@input-color-icon-tap: @brand-primary;
// tabs
@tabs-color: @brand-primary;
@tabs-height: 43.5 * @hd;
@tabs-font-size-heading: 15 * @hd;
@tabs-ink-bar-height: @border-width-lg;
// segmented-control
@segmented-control-color: @brand-primary; // 同时应用于背景、文字颜色、边框色
@segmented-control-height: 27 * @hd;
@segmented-control-fill-tap: fade(@brand-primary, 0.1);
// tab-bar
@tab-bar-fill: #ebeeef;
@tab-bar-height: 50 * @hd;
// toast
@toast-fill: rgba(58, 58, 58, 0.9); // toast, activity-indicator 的背景颜色
// search-bar
@search-bar-fill: #efeff4;
@search-bar-height: 44 * @hd;
@search-bar-input-height: 28 * @hd;
@search-bar-font-size: 15 * @hd;
@search-color-icon: #bbb; // input search icon 的背景色
// notice-bar
@notice-bar-fill: #fefcec;
@notice-bar-height: 36 * @hd;
@notice-bar-color: #f76a24;
// switch
@switch-fill: #4dd865;
@switch-fill-android: @brand-primary;
// tag
@tag-height: 25 * @hd;
@tag-height-sm: 15 * @hd;
@tag-color: @brand-primary;
// keyboard
@keyboard-confirm-color: @brand-primary;
@keyboard-confirm-tap-color: @brand-primary-tap;
// picker
@option-height: 42 * @hd; // picker 标题的高度
// z-index
@progress-zindex: 2000;
@popover-zindex: 1999;
@toast-zindex: 1999;
@action-sheet-zindex: 1000; // actonsheet 会放到 popup / modal 中
@picker-zindex: 1000;
@popup-zindex: 999;
@modal-zindex: 999; // modal.alert 应该最大，其他应该较小
@tabs-pagination-zindex: 999;
*/