@aloudata/aloudata-design 0.3.5 → 0.4.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -25,9 +25,6 @@ interface CssExports {
25
25
  'BG90': string;
26
26
  'BG95': string;
27
27
  'BG97': string;
28
- 'BLACK': string;
29
- 'IMAGE_HOLDER': string;
30
- 'MATE': string;
31
28
  'ND0': string;
32
29
  'ND10': string;
33
30
  'ND20': string;
@@ -94,7 +91,94 @@ interface CssExports {
94
91
  'SELECTOR_PADDING_HORIZONTAL_MINI': string;
95
92
  'SELECTOR_PADDING_HORIZONTAL_SMALL': string;
96
93
  'SHADOW_L': string;
97
- 'WHITE': string;
94
+ 'TA10': string;
95
+ 'TA20': string;
96
+ 'TA30': string;
97
+ 'TA40': string;
98
+ 'TA50': string;
99
+ 'TA60': string;
100
+ 'TA70': string;
101
+ 'TA80': string;
102
+ 'TA90': string;
103
+ 'TA95': string;
104
+ 'TA98': string;
105
+ 'TB10': string;
106
+ 'TB20': string;
107
+ 'TB30': string;
108
+ 'TB40': string;
109
+ 'TB50': string;
110
+ 'TB60': string;
111
+ 'TB70': string;
112
+ 'TB80': string;
113
+ 'TB90': string;
114
+ 'TB95': string;
115
+ 'TB98': string;
116
+ 'TC10': string;
117
+ 'TC20': string;
118
+ 'TC30': string;
119
+ 'TC40': string;
120
+ 'TC50': string;
121
+ 'TC60': string;
122
+ 'TC70': string;
123
+ 'TC80': string;
124
+ 'TC90': string;
125
+ 'TC95': string;
126
+ 'TC98': string;
127
+ 'TD10': string;
128
+ 'TD20': string;
129
+ 'TD30': string;
130
+ 'TD40': string;
131
+ 'TD50': string;
132
+ 'TD60': string;
133
+ 'TD70': string;
134
+ 'TD80': string;
135
+ 'TD90': string;
136
+ 'TD95': string;
137
+ 'TD98': string;
138
+ 'TE10': string;
139
+ 'TE20': string;
140
+ 'TE30': string;
141
+ 'TE40': string;
142
+ 'TE50': string;
143
+ 'TE60': string;
144
+ 'TE70': string;
145
+ 'TE80': string;
146
+ 'TE90': string;
147
+ 'TE95': string;
148
+ 'TE98': string;
149
+ 'TF10': string;
150
+ 'TF20': string;
151
+ 'TF30': string;
152
+ 'TF40': string;
153
+ 'TF50': string;
154
+ 'TF60': string;
155
+ 'TF70': string;
156
+ 'TF80': string;
157
+ 'TF90': string;
158
+ 'TF95': string;
159
+ 'TF98': string;
160
+ 'TG10': string;
161
+ 'TG20': string;
162
+ 'TG30': string;
163
+ 'TG40': string;
164
+ 'TG50': string;
165
+ 'TG60': string;
166
+ 'TG70': string;
167
+ 'TG80': string;
168
+ 'TG90': string;
169
+ 'TG95': string;
170
+ 'TG98': string;
171
+ 'TH10': string;
172
+ 'TH20': string;
173
+ 'TH30': string;
174
+ 'TH40': string;
175
+ 'TH50': string;
176
+ 'TH60': string;
177
+ 'TH70': string;
178
+ 'TH80': string;
179
+ 'TH90': string;
180
+ 'TH95': string;
181
+ 'TH98': string;
98
182
  }
99
183
  export const cssExports: CssExports;
100
184
  export default cssExports;
@@ -1,137 +1,258 @@
1
1
  /**
2
2
  *中性浅色背景 Neutral Light
3
- * 主要用于文字颜色
3
+ * 中性色是色彩系统的基础。 UI 设计中的几乎所有东西:文本、表单、背景、分隔线等等通常都是中性的。
4
4
  **/
5
- @NL0: #001A33;
6
- @NL97: fade(@NL0, 3%);
7
- @NL95: fade(@NL0, 5%);
8
- @NL90: fade(@NL0, 10%);
9
- @NL80: fade(@NL0, 20%);
10
- @NL70: fade(@NL0, 30%);
11
- @NL60: fade(@NL0, 40%);
12
- @NL50: fade(@NL0, 50%);
13
- @NL40: fade(@NL0, 60%);
14
- @NL30: fade(@NL0, 70%);
15
- @NL20: fade(@NL0, 80%);
16
- @NL10: fade(@NL0, 90%);
5
+ @NL0: #101828;
6
+ @NL97: fade(@NL0, 3%);//TODO: 版本升级后,删除NL97;新版无此色号
7
+ @NL95:#FCFCFD;
8
+ @NL90: #F9FAFB;
9
+ @NL80: #F2F4F7;
10
+ @NL70: #EAECF0;
11
+ @NL60: #D0D5DD;
12
+ @NL50: #98A2B3;
13
+ @NL40: #667085;
14
+ @NL30: #475467;
15
+ @NL20: #344054;
16
+ @NL10: #1D2939;
17
17
 
18
18
  /**
19
19
  *中性深色背景 Neutral Dark
20
- * 主要用于文字颜色
20
+ * 中性色是色彩系统的基础。 UI 设计中的几乎所有东西:文本、表单、背景、分隔线等等通常都是中性的。
21
21
  **/
22
- @ND0: #FFFFFF;
23
- @ND97: fade(@ND0, 3%);
24
- @ND95: fade(@ND0, 5%);
25
- @ND90: fade(@ND0, 10%);
26
- @ND80: fade(@ND0, 20%);
27
- @ND70: fade(@ND0, 30%);
28
- @ND60: fade(@ND0, 40%);
29
- @ND50: fade(@ND0, 50%);
30
- @ND40: fade(@ND0, 60%);
31
- @ND30: fade(@ND0, 70%);
32
- @ND20: fade(@ND0, 80%);
33
- @ND10: fade(@ND0, 90%);
22
+ @ND0: #FCFCFD;
23
+ @ND97: fade(@ND0, 3%);//TODO: 版本升级后,删除ND97;新版无此色号
24
+ @ND95:#101828;
25
+ @ND90: #1D2939;
26
+ @ND80: #344054;
27
+ @ND70: #475467;
28
+ @ND60: #667085;
29
+ @ND50: #98A2B3;
30
+ @ND40: #D0D5DD;
31
+ @ND30: #EAECF0;
32
+ @ND20: #F2F4F7;
33
+ @ND10: #F9FAFB;
34
34
 
35
35
  /**
36
36
  * 品牌色 Brand
37
- * 用作主操作强调、文字链、品牌传递
37
+ * 主色调是你的 "品牌 "颜色,用于所有互动元素,如按钮、链接、输入等。这种颜色可以定义整体感觉,并能引起人们的情感。
38
38
  **/
39
- @B10: #001252;
40
- @B20: #071E6A;
41
- @B30: #0F2B7F;
42
- @B40: #0F38A6;
43
- @B50: #1945B3;
44
- @B60: #1552DF;
45
- @B70: #5588F6;
46
- @B80: #79A5FE;
47
- @B90: #ABC8FE;
48
- @B95: #D4E4FF;
49
- @B98: #EFF5FF;
39
+ @B10: #194185;
40
+ @B20: #1849A9;
41
+ @B30: #175CD3;
42
+ @B40: #1570EF;
43
+ @B50: #2E90FA;
44
+ @B60: #53B1FD;
45
+ @B70: #84CAFF;
46
+ @B80: #B2DDFF;
47
+ @B90: #D1E9FF;
48
+ @B95: #EFF8FF;
49
+ @B98: #F5FAFF;
50
50
 
51
51
  /**
52
52
  * 辅助A Secondary A
53
- * 表达完成、成功
53
+ * 绿色传达了一个积极的行动,积极的趋势,或成功的确认。
54
54
  **/
55
- @SA10: #003331;
56
- @SA20: #00493F;
57
- @SA30: #015844;
58
- @SA40: #026E4A;
59
- @SA50: #03834C;
60
- @SA60: #05994A;
61
- @SA70: #35C168;
62
- @SA80: #5EE080;
63
- @SA90: #96F4A5;
64
- @SA95: #C9F9CC;
65
- @SA98: #F0FFF0;
55
+ @SA10: #054F31;
56
+ @SA20: #05603A;
57
+ @SA30: #027A48;
58
+ @SA40: #1570EF;
59
+ @SA50: #12B76A;
60
+ @SA60: #32D583;
61
+ @SA70: #6CE9A6;
62
+ @SA80: #A6F4C5;
63
+ @SA90: #D1FADF;
64
+ @SA95: #ECFDF3;
65
+ @SA98: #F6FEF9;
66
66
 
67
67
  /**
68
68
  * 辅助B Secondary B
69
- * 表达提醒、警告
69
+ * 橙色可以传达一个警示信号。这些颜色通常被用于提醒,以抓住用户的注意力。
70
70
  **/
71
- @SB10: #472800;
72
- @SB20: #7A4C07;
73
- @SB30: #93610D;
74
- @SB40: #B77F14;
75
- @SB50: #DB9F1D;
76
- @SB60: #FFC229;
77
- @SB70: #FFD55E;
78
- @SB80: #FFE17E;
79
- @SB90: #FFEEA9;
80
- @SB95: #FFF7D4;
81
- @SB98: #FFFCEB;
71
+ @SB10: #7A2E0E;
72
+ @SB20: #93370D;
73
+ @SB30: #B54708;
74
+ @SB40: #DC6803;
75
+ @SB50: #F79009;
76
+ @SB60: #FDB022;
77
+ @SB70: #FEC84B;
78
+ @SB80: #FEDF89;
79
+ @SB90: #FEF0C7;
80
+ @SB95: #FFFAEB;
81
+ @SB98: #FFFCF5;
82
82
 
83
83
  /**
84
84
  * 辅助C Secondary C
85
- * 表达错误、失败
85
+ * 红色在错误状态和 "破坏性 "行动中使用。它们传达了一种破坏性/负面消极的行动,例如将一个用户从你的团队中删除。
86
86
  **/
87
- @SC10: #4D000B;
88
- @SC20: #76070F;
89
- @SC30: #8F0C0C;
90
- @SC40: #B11E13;
91
- @SC50: #D4361B;
92
- @SC60: #F75426;
93
- @SC70: #FA895B;
94
- @SC80: #FCAB7C;
95
- @SC90: #FECDA8;
96
- @SC95: #FEE9D3;
97
- @SC98: #FFF8F0;
87
+ @SC10: #7A271A;
88
+ @SC20: #912018;
89
+ @SC30: #B42318;
90
+ @SC40: #D92D20;
91
+ @SC50: #F04438;
92
+ @SC60: #F97066;
93
+ @SC70: #FDA29B;
94
+ @SC80: #FECDCA;
95
+ @SC90: #FEE4E2;
96
+ @SC95: #FEF3F2;
97
+ @SC98: #FFFBFA;
98
98
 
99
99
  /**
100
100
  * 背景色 Background
101
- * 主要用于背景色
101
+ * 中性色是色彩系统的基础。 UI 设计中的几乎所有东西:文本、表单、背景、分隔线等等通常都是中性的。
102
102
  **/
103
- @BG0: #121212;
104
- @BG10: #0F1524;
105
- @BG20: #1F2B47;
106
- @BG30: #314168;
107
- @BG40: #455987;
108
- @BG50: #5C71A3;
109
- @BG60: #7A8DB8;
110
- @BG70: #9CA9C9;
111
- @BG80: #BDC6DB;
112
- @BG90: #E7EBF3;
113
- @BG95: #F5F6FA;
114
- @BG97: #FBFCFE;
115
- @BG100: #FFFFFF;
103
+ @BG0: #000000;
104
+ @BG10: #101828;
105
+ @BG20: #1D2939;
106
+ @BG30: #475467;
107
+ @BG40: #667085;
108
+ @BG50: #98A2B3;
109
+ @BG60: #D0D5DD;
110
+ @BG70: #EAECF0;
111
+ @BG80: #F2F4F7;
112
+ @BG90: #F8FAFB;
113
+ @BG95: #F9FAFB;
114
+ @BG97: #FCFCFD;
115
+ @BG100:#FFFFFF;
116
116
 
117
117
 
118
- /***
119
- * 黑白
120
- ***/
121
- @white:#FFFFFF;
122
- @black:#121212;
123
-
124
- /***
125
- * 图片
126
- ***/
127
- @imageholder: fade(#999898, 30%);
128
- @mate: fade(#000000, 50%);
129
-
130
118
  /***
131
119
  * 投影
132
120
  ***/
133
121
  @shadow-L:0px 11px 15px rgba(0, 26, 51, 0.1), 0px 9px 46px rgba(0, 26, 51, 0.05), 0px 24px 38px rgba(0, 26, 51, 0.03);
134
122
 
123
+ // 业务颜色
124
+ // 除了原色之外,在业务、提示和标签等组件中使用一些次要颜色也很有帮助。这些次要颜色应该少用或作为重点使用,而主要颜色应该占优先地位。
125
+
126
+ /**
127
+ * 业务A (Tertiary A)
128
+ **/
129
+
130
+ @TA10: #2B4212;
131
+ @TA20: #335015;
132
+ @TA30: #3F611A;
133
+ @TA40: #4F7A21;
134
+ @TA50: #669F2A;
135
+ @TA60: #86CB3C;
136
+ @TA70: #ACDC79;
137
+ @TA80: #CDEAAF;
138
+ @TA90: #E6F4D7;
139
+ @TA95: #F5FBEE;
140
+ @TA98: #FAFDF7;
141
+
142
+
143
+ /**
144
+ * 业务B (Tertiary B)
145
+ **/
146
+
147
+ @TB10: #134E48;
148
+ @TB20: #125D56;
149
+ @TB30: #0F7569;
150
+ @TB40: #0E9384;
151
+ @TB50: #15B79E;
152
+ @TB60: #2ED2B7;
153
+ @TB70: #5EE9CF;
154
+ @TB80: #99F6E0;
155
+ @TB90: #CCFBEF;
156
+ @TB95: #F0FDF9;
157
+ @TB98: #F6FEFC;
158
+
159
+ /**
160
+ * 业务C (Tertiary C)
161
+ **/
162
+
163
+ @TC10: #013743;
164
+ @TC20: #024D5E;
165
+ @TC30: #036E86;
166
+ @TC40: #0386A4;
167
+ @TC50: #049BBD;
168
+ @TC60: #05AED4;
169
+ @TC70: #72C0DD;
170
+ @TC80: #A1D2E6;
171
+ @TC90: #C5E2EE;
172
+ @TC95: #E4F0F6;
173
+ @TC98: #F1F8FB;
174
+
175
+ /**
176
+ * 业务D (Tertiary D)
177
+ **/
178
+
179
+ @TD10: #2D3282;
180
+ @TD20: #2D31A5;
181
+ @TD30: #3537CC;
182
+ @TD40: #444CE7;
183
+ @TD50: #6071F3;
184
+ @TD60: #7F98F9;
185
+ @TD70: #A3BBFD;
186
+ @TD80: #C7D7FE;
187
+ @TD90: #E0EAFF;
188
+ @TD95: #EEF4FF;
189
+ @TD98: #F5F8FF;
190
+
191
+ /**
192
+ * 业务E (Tertiary E)
193
+ **/
194
+
195
+ @TE10: #271B47;
196
+ @TE20: #382765;
197
+ @TE30: #4F378F;
198
+ @TE40: #6144AF;
199
+ @TE50: #704ECB;
200
+ @TE60: #7E58E3;
201
+ @TE70: #A08AE8;
202
+ @TE80: #BCAFEE;
203
+ @TE90: #D4CDF4;
204
+ @TE95: #EAE7F9;
205
+ @TE98: #F5F3FC;
206
+
207
+ /**
208
+ * 业务F (Tertiary F)
209
+ **/
210
+
211
+ @TF10: #6E1876;
212
+ @TF20: #821890;
213
+ @TF30: #9F1AB0;
214
+ @TF40: #BA24D5;
215
+ @TF50: #D444F1;
216
+ @TF60: #E477FA;
217
+ @TF70: #EDAAFC;
218
+ @TF80: #F6D0FE;
219
+ @TF90: #FBE8FF;
220
+ @TF95: #FDF4FF;
221
+ @TF98: #FEFAFF;
222
+
223
+ /**
224
+ * 业务G (Tertiary G)
225
+ **/
226
+
227
+ @TG10: #851651;
228
+ @TG20: #9E155E;
229
+ @TG30: #C01573;
230
+ @TG40: #DC2590;
231
+ @TG50: #EE46BC;
232
+ @TG60: #F570C7;
233
+ @TG70: #F9A7DF;
234
+ @TG80: #FCCEEE;
235
+ @TG90: #FCE7F6;
236
+ @TG95: #FDF2FA;
237
+ @TG98: #FEF6FB;
238
+
239
+ /**
240
+ * 业务H (Tertiary H)
241
+ **/
242
+
243
+ @TH10: #713B11;
244
+ @TH20: #85490D;
245
+ @TH30: #A15B06;
246
+ @TH40: #CA8403;
247
+ @TH50: #EAA907;
248
+ @TH60: #FAC414;
249
+ @TH70: #FDE272;
250
+ @TH80: #FEEE94;
251
+ @TH90: #FDF7C3;
252
+ @TH95: #FEFBE8;
253
+ @TH98: #FEFDF0;
254
+
255
+
135
256
  // 用css module的能力,将less变量输出给js,供js文件中使用
136
257
  :export {
137
258
  NL0: @NL0;
@@ -215,9 +336,100 @@
215
336
  BG95: @BG95;
216
337
  BG97: @BG97;
217
338
  BG100: @BG100;
218
- WHITE: @white;
219
- BLACK: @black;
220
- IMAGE_HOLDER: @imageholder;
221
- MATE: @mate;
222
339
  SHADOW_L: @shadow-L;
340
+ TA10: @TA10;
341
+ TA20: @TA20;
342
+ TA30: @TA30;
343
+ TA40: @TA40;
344
+ TA50: @TA50;
345
+ TA60: @TA60;
346
+ TA70: @TA70;
347
+ TA80: @TA80;
348
+ TA90: @TA90;
349
+ TA95: @TA95;
350
+ TA98: @TA98;
351
+
352
+ TB10: @TB10;
353
+ TB20: @TB20;
354
+ TB30: @TB30;
355
+ TB40: @TB40;
356
+ TB50: @TB50;
357
+ TB60: @TB60;
358
+ TB70: @TB70;
359
+ TB80: @TB80;
360
+ TB90: @TB90;
361
+ TB95: @TB95;
362
+ TB98: @TB98;
363
+
364
+ TC10: @TC10;
365
+ TC20: @TC20;
366
+ TC30: @TC30;
367
+ TC40: @TC40;
368
+ TC50: @TC50;
369
+ TC60: @TC60;
370
+ TC70: @TC70;
371
+ TC80: @TC80;
372
+ TC90: @TC90;
373
+ TC95: @TC95;
374
+ TC98: @TC98;
375
+
376
+ TD10: @TD10;
377
+ TD20: @TD20;
378
+ TD30: @TD30;
379
+ TD40: @TD40;
380
+ TD50: @TD50;
381
+ TD60: @TD60;
382
+ TD70: @TD70;
383
+ TD80: @TD80;
384
+ TD90: @TD90;
385
+ TD95: @TD95;
386
+ TD98: @TD98;
387
+
388
+ TE10: @TE10;
389
+ TE20: @TE20;
390
+ TE30: @TE30;
391
+ TE40: @TE40;
392
+ TE50: @TE50;
393
+ TE60: @TE60;
394
+ TE70: @TE70;
395
+ TE80: @TE80;
396
+ TE90: @TE90;
397
+ TE95: @TE95;
398
+ TE98: @TE98;
399
+
400
+ TF10: @TF10;
401
+ TF20: @TF20;
402
+ TF30: @TF30;
403
+ TF40: @TF40;
404
+ TF50: @TF50;
405
+ TF60: @TF60;
406
+ TF70: @TF70;
407
+ TF80: @TF80;
408
+ TF90: @TF90;
409
+ TF95: @TF95;
410
+ TF98: @TF98;
411
+
412
+ TG10: @TG10;
413
+ TG20: @TG20;
414
+ TG30: @TG30;
415
+ TG40: @TG40;
416
+ TG50: @TG50;
417
+ TG60: @TG60;
418
+ TG70: @TG70;
419
+ TG80: @TG80;
420
+ TG90: @TG90;
421
+ TG95: @TG95;
422
+ TG98: @TG98;
423
+
424
+ TH10: @TH10;
425
+ TH20: @TH20;
426
+ TH30: @TH30;
427
+ TH40: @TH40;
428
+ TH50: @TH50;
429
+ TH60: @TH60;
430
+ TH70: @TH70;
431
+ TH80: @TH80;
432
+ TH90: @TH90;
433
+ TH95: @TH95;
434
+ TH98: @TH98;
223
435
  }
@@ -25,9 +25,6 @@ interface CssExports {
25
25
  'BG90': string;
26
26
  'BG95': string;
27
27
  'BG97': string;
28
- 'BLACK': string;
29
- 'IMAGE_HOLDER': string;
30
- 'MATE': string;
31
28
  'ND0': string;
32
29
  'ND10': string;
33
30
  'ND20': string;
@@ -86,7 +83,94 @@ interface CssExports {
86
83
  'SC95': string;
87
84
  'SC98': string;
88
85
  'SHADOW_L': string;
89
- 'WHITE': string;
86
+ 'TA10': string;
87
+ 'TA20': string;
88
+ 'TA30': string;
89
+ 'TA40': string;
90
+ 'TA50': string;
91
+ 'TA60': string;
92
+ 'TA70': string;
93
+ 'TA80': string;
94
+ 'TA90': string;
95
+ 'TA95': string;
96
+ 'TA98': string;
97
+ 'TB10': string;
98
+ 'TB20': string;
99
+ 'TB30': string;
100
+ 'TB40': string;
101
+ 'TB50': string;
102
+ 'TB60': string;
103
+ 'TB70': string;
104
+ 'TB80': string;
105
+ 'TB90': string;
106
+ 'TB95': string;
107
+ 'TB98': string;
108
+ 'TC10': string;
109
+ 'TC20': string;
110
+ 'TC30': string;
111
+ 'TC40': string;
112
+ 'TC50': string;
113
+ 'TC60': string;
114
+ 'TC70': string;
115
+ 'TC80': string;
116
+ 'TC90': string;
117
+ 'TC95': string;
118
+ 'TC98': string;
119
+ 'TD10': string;
120
+ 'TD20': string;
121
+ 'TD30': string;
122
+ 'TD40': string;
123
+ 'TD50': string;
124
+ 'TD60': string;
125
+ 'TD70': string;
126
+ 'TD80': string;
127
+ 'TD90': string;
128
+ 'TD95': string;
129
+ 'TD98': string;
130
+ 'TE10': string;
131
+ 'TE20': string;
132
+ 'TE30': string;
133
+ 'TE40': string;
134
+ 'TE50': string;
135
+ 'TE60': string;
136
+ 'TE70': string;
137
+ 'TE80': string;
138
+ 'TE90': string;
139
+ 'TE95': string;
140
+ 'TE98': string;
141
+ 'TF10': string;
142
+ 'TF20': string;
143
+ 'TF30': string;
144
+ 'TF40': string;
145
+ 'TF50': string;
146
+ 'TF60': string;
147
+ 'TF70': string;
148
+ 'TF80': string;
149
+ 'TF90': string;
150
+ 'TF95': string;
151
+ 'TF98': string;
152
+ 'TG10': string;
153
+ 'TG20': string;
154
+ 'TG30': string;
155
+ 'TG40': string;
156
+ 'TG50': string;
157
+ 'TG60': string;
158
+ 'TG70': string;
159
+ 'TG80': string;
160
+ 'TG90': string;
161
+ 'TG95': string;
162
+ 'TG98': string;
163
+ 'TH10': string;
164
+ 'TH20': string;
165
+ 'TH30': string;
166
+ 'TH40': string;
167
+ 'TH50': string;
168
+ 'TH60': string;
169
+ 'TH70': string;
170
+ 'TH80': string;
171
+ 'TH90': string;
172
+ 'TH95': string;
173
+ 'TH98': string;
90
174
  }
91
175
  export const cssExports: CssExports;
92
176
  export default cssExports;
@@ -25,9 +25,6 @@ interface CssExports {
25
25
  'BG90': string;
26
26
  'BG95': string;
27
27
  'BG97': string;
28
- 'BLACK': string;
29
- 'IMAGE_HOLDER': string;
30
- 'MATE': string;
31
28
  'ND0': string;
32
29
  'ND10': string;
33
30
  'ND20': string;
@@ -94,7 +91,94 @@ interface CssExports {
94
91
  'SELECTOR_PADDING_HORIZONTAL_MINI': string;
95
92
  'SELECTOR_PADDING_HORIZONTAL_SMALL': string;
96
93
  'SHADOW_L': string;
97
- 'WHITE': string;
94
+ 'TA10': string;
95
+ 'TA20': string;
96
+ 'TA30': string;
97
+ 'TA40': string;
98
+ 'TA50': string;
99
+ 'TA60': string;
100
+ 'TA70': string;
101
+ 'TA80': string;
102
+ 'TA90': string;
103
+ 'TA95': string;
104
+ 'TA98': string;
105
+ 'TB10': string;
106
+ 'TB20': string;
107
+ 'TB30': string;
108
+ 'TB40': string;
109
+ 'TB50': string;
110
+ 'TB60': string;
111
+ 'TB70': string;
112
+ 'TB80': string;
113
+ 'TB90': string;
114
+ 'TB95': string;
115
+ 'TB98': string;
116
+ 'TC10': string;
117
+ 'TC20': string;
118
+ 'TC30': string;
119
+ 'TC40': string;
120
+ 'TC50': string;
121
+ 'TC60': string;
122
+ 'TC70': string;
123
+ 'TC80': string;
124
+ 'TC90': string;
125
+ 'TC95': string;
126
+ 'TC98': string;
127
+ 'TD10': string;
128
+ 'TD20': string;
129
+ 'TD30': string;
130
+ 'TD40': string;
131
+ 'TD50': string;
132
+ 'TD60': string;
133
+ 'TD70': string;
134
+ 'TD80': string;
135
+ 'TD90': string;
136
+ 'TD95': string;
137
+ 'TD98': string;
138
+ 'TE10': string;
139
+ 'TE20': string;
140
+ 'TE30': string;
141
+ 'TE40': string;
142
+ 'TE50': string;
143
+ 'TE60': string;
144
+ 'TE70': string;
145
+ 'TE80': string;
146
+ 'TE90': string;
147
+ 'TE95': string;
148
+ 'TE98': string;
149
+ 'TF10': string;
150
+ 'TF20': string;
151
+ 'TF30': string;
152
+ 'TF40': string;
153
+ 'TF50': string;
154
+ 'TF60': string;
155
+ 'TF70': string;
156
+ 'TF80': string;
157
+ 'TF90': string;
158
+ 'TF95': string;
159
+ 'TF98': string;
160
+ 'TG10': string;
161
+ 'TG20': string;
162
+ 'TG30': string;
163
+ 'TG40': string;
164
+ 'TG50': string;
165
+ 'TG60': string;
166
+ 'TG70': string;
167
+ 'TG80': string;
168
+ 'TG90': string;
169
+ 'TG95': string;
170
+ 'TG98': string;
171
+ 'TH10': string;
172
+ 'TH20': string;
173
+ 'TH30': string;
174
+ 'TH40': string;
175
+ 'TH50': string;
176
+ 'TH60': string;
177
+ 'TH70': string;
178
+ 'TH80': string;
179
+ 'TH90': string;
180
+ 'TH95': string;
181
+ 'TH98': string;
98
182
  }
99
183
  export const cssExports: CssExports;
100
184
  export default cssExports;
@@ -1,137 +1,258 @@
1
1
  /**
2
2
  *中性浅色背景 Neutral Light
3
- * 主要用于文字颜色
3
+ * 中性色是色彩系统的基础。 UI 设计中的几乎所有东西:文本、表单、背景、分隔线等等通常都是中性的。
4
4
  **/
5
- @NL0: #001A33;
6
- @NL97: fade(@NL0, 3%);
7
- @NL95: fade(@NL0, 5%);
8
- @NL90: fade(@NL0, 10%);
9
- @NL80: fade(@NL0, 20%);
10
- @NL70: fade(@NL0, 30%);
11
- @NL60: fade(@NL0, 40%);
12
- @NL50: fade(@NL0, 50%);
13
- @NL40: fade(@NL0, 60%);
14
- @NL30: fade(@NL0, 70%);
15
- @NL20: fade(@NL0, 80%);
16
- @NL10: fade(@NL0, 90%);
5
+ @NL0: #101828;
6
+ @NL97: fade(@NL0, 3%);//TODO: 版本升级后,删除NL97;新版无此色号
7
+ @NL95:#FCFCFD;
8
+ @NL90: #F9FAFB;
9
+ @NL80: #F2F4F7;
10
+ @NL70: #EAECF0;
11
+ @NL60: #D0D5DD;
12
+ @NL50: #98A2B3;
13
+ @NL40: #667085;
14
+ @NL30: #475467;
15
+ @NL20: #344054;
16
+ @NL10: #1D2939;
17
17
 
18
18
  /**
19
19
  *中性深色背景 Neutral Dark
20
- * 主要用于文字颜色
20
+ * 中性色是色彩系统的基础。 UI 设计中的几乎所有东西:文本、表单、背景、分隔线等等通常都是中性的。
21
21
  **/
22
- @ND0: #FFFFFF;
23
- @ND97: fade(@ND0, 3%);
24
- @ND95: fade(@ND0, 5%);
25
- @ND90: fade(@ND0, 10%);
26
- @ND80: fade(@ND0, 20%);
27
- @ND70: fade(@ND0, 30%);
28
- @ND60: fade(@ND0, 40%);
29
- @ND50: fade(@ND0, 50%);
30
- @ND40: fade(@ND0, 60%);
31
- @ND30: fade(@ND0, 70%);
32
- @ND20: fade(@ND0, 80%);
33
- @ND10: fade(@ND0, 90%);
22
+ @ND0: #FCFCFD;
23
+ @ND97: fade(@ND0, 3%);//TODO: 版本升级后,删除ND97;新版无此色号
24
+ @ND95:#101828;
25
+ @ND90: #1D2939;
26
+ @ND80: #344054;
27
+ @ND70: #475467;
28
+ @ND60: #667085;
29
+ @ND50: #98A2B3;
30
+ @ND40: #D0D5DD;
31
+ @ND30: #EAECF0;
32
+ @ND20: #F2F4F7;
33
+ @ND10: #F9FAFB;
34
34
 
35
35
  /**
36
36
  * 品牌色 Brand
37
- * 用作主操作强调、文字链、品牌传递
37
+ * 主色调是你的 "品牌 "颜色,用于所有互动元素,如按钮、链接、输入等。这种颜色可以定义整体感觉,并能引起人们的情感。
38
38
  **/
39
- @B10: #001252;
40
- @B20: #071E6A;
41
- @B30: #0F2B7F;
42
- @B40: #0F38A6;
43
- @B50: #1945B3;
44
- @B60: #1552DF;
45
- @B70: #5588F6;
46
- @B80: #79A5FE;
47
- @B90: #ABC8FE;
48
- @B95: #D4E4FF;
49
- @B98: #EFF5FF;
39
+ @B10: #194185;
40
+ @B20: #1849A9;
41
+ @B30: #175CD3;
42
+ @B40: #1570EF;
43
+ @B50: #2E90FA;
44
+ @B60: #53B1FD;
45
+ @B70: #84CAFF;
46
+ @B80: #B2DDFF;
47
+ @B90: #D1E9FF;
48
+ @B95: #EFF8FF;
49
+ @B98: #F5FAFF;
50
50
 
51
51
  /**
52
52
  * 辅助A Secondary A
53
- * 表达完成、成功
53
+ * 绿色传达了一个积极的行动,积极的趋势,或成功的确认。
54
54
  **/
55
- @SA10: #003331;
56
- @SA20: #00493F;
57
- @SA30: #015844;
58
- @SA40: #026E4A;
59
- @SA50: #03834C;
60
- @SA60: #05994A;
61
- @SA70: #35C168;
62
- @SA80: #5EE080;
63
- @SA90: #96F4A5;
64
- @SA95: #C9F9CC;
65
- @SA98: #F0FFF0;
55
+ @SA10: #054F31;
56
+ @SA20: #05603A;
57
+ @SA30: #027A48;
58
+ @SA40: #1570EF;
59
+ @SA50: #12B76A;
60
+ @SA60: #32D583;
61
+ @SA70: #6CE9A6;
62
+ @SA80: #A6F4C5;
63
+ @SA90: #D1FADF;
64
+ @SA95: #ECFDF3;
65
+ @SA98: #F6FEF9;
66
66
 
67
67
  /**
68
68
  * 辅助B Secondary B
69
- * 表达提醒、警告
69
+ * 橙色可以传达一个警示信号。这些颜色通常被用于提醒,以抓住用户的注意力。
70
70
  **/
71
- @SB10: #472800;
72
- @SB20: #7A4C07;
73
- @SB30: #93610D;
74
- @SB40: #B77F14;
75
- @SB50: #DB9F1D;
76
- @SB60: #FFC229;
77
- @SB70: #FFD55E;
78
- @SB80: #FFE17E;
79
- @SB90: #FFEEA9;
80
- @SB95: #FFF7D4;
81
- @SB98: #FFFCEB;
71
+ @SB10: #7A2E0E;
72
+ @SB20: #93370D;
73
+ @SB30: #B54708;
74
+ @SB40: #DC6803;
75
+ @SB50: #F79009;
76
+ @SB60: #FDB022;
77
+ @SB70: #FEC84B;
78
+ @SB80: #FEDF89;
79
+ @SB90: #FEF0C7;
80
+ @SB95: #FFFAEB;
81
+ @SB98: #FFFCF5;
82
82
 
83
83
  /**
84
84
  * 辅助C Secondary C
85
- * 表达错误、失败
85
+ * 红色在错误状态和 "破坏性 "行动中使用。它们传达了一种破坏性/负面消极的行动,例如将一个用户从你的团队中删除。
86
86
  **/
87
- @SC10: #4D000B;
88
- @SC20: #76070F;
89
- @SC30: #8F0C0C;
90
- @SC40: #B11E13;
91
- @SC50: #D4361B;
92
- @SC60: #F75426;
93
- @SC70: #FA895B;
94
- @SC80: #FCAB7C;
95
- @SC90: #FECDA8;
96
- @SC95: #FEE9D3;
97
- @SC98: #FFF8F0;
87
+ @SC10: #7A271A;
88
+ @SC20: #912018;
89
+ @SC30: #B42318;
90
+ @SC40: #D92D20;
91
+ @SC50: #F04438;
92
+ @SC60: #F97066;
93
+ @SC70: #FDA29B;
94
+ @SC80: #FECDCA;
95
+ @SC90: #FEE4E2;
96
+ @SC95: #FEF3F2;
97
+ @SC98: #FFFBFA;
98
98
 
99
99
  /**
100
100
  * 背景色 Background
101
- * 主要用于背景色
101
+ * 中性色是色彩系统的基础。 UI 设计中的几乎所有东西:文本、表单、背景、分隔线等等通常都是中性的。
102
102
  **/
103
- @BG0: #121212;
104
- @BG10: #0F1524;
105
- @BG20: #1F2B47;
106
- @BG30: #314168;
107
- @BG40: #455987;
108
- @BG50: #5C71A3;
109
- @BG60: #7A8DB8;
110
- @BG70: #9CA9C9;
111
- @BG80: #BDC6DB;
112
- @BG90: #E7EBF3;
113
- @BG95: #F5F6FA;
114
- @BG97: #FBFCFE;
115
- @BG100: #FFFFFF;
103
+ @BG0: #000000;
104
+ @BG10: #101828;
105
+ @BG20: #1D2939;
106
+ @BG30: #475467;
107
+ @BG40: #667085;
108
+ @BG50: #98A2B3;
109
+ @BG60: #D0D5DD;
110
+ @BG70: #EAECF0;
111
+ @BG80: #F2F4F7;
112
+ @BG90: #F8FAFB;
113
+ @BG95: #F9FAFB;
114
+ @BG97: #FCFCFD;
115
+ @BG100:#FFFFFF;
116
116
 
117
117
 
118
- /***
119
- * 黑白
120
- ***/
121
- @white:#FFFFFF;
122
- @black:#121212;
123
-
124
- /***
125
- * 图片
126
- ***/
127
- @imageholder: fade(#999898, 30%);
128
- @mate: fade(#000000, 50%);
129
-
130
118
  /***
131
119
  * 投影
132
120
  ***/
133
121
  @shadow-L:0px 11px 15px rgba(0, 26, 51, 0.1), 0px 9px 46px rgba(0, 26, 51, 0.05), 0px 24px 38px rgba(0, 26, 51, 0.03);
134
122
 
123
+ // 业务颜色
124
+ // 除了原色之外,在业务、提示和标签等组件中使用一些次要颜色也很有帮助。这些次要颜色应该少用或作为重点使用,而主要颜色应该占优先地位。
125
+
126
+ /**
127
+ * 业务A (Tertiary A)
128
+ **/
129
+
130
+ @TA10: #2B4212;
131
+ @TA20: #335015;
132
+ @TA30: #3F611A;
133
+ @TA40: #4F7A21;
134
+ @TA50: #669F2A;
135
+ @TA60: #86CB3C;
136
+ @TA70: #ACDC79;
137
+ @TA80: #CDEAAF;
138
+ @TA90: #E6F4D7;
139
+ @TA95: #F5FBEE;
140
+ @TA98: #FAFDF7;
141
+
142
+
143
+ /**
144
+ * 业务B (Tertiary B)
145
+ **/
146
+
147
+ @TB10: #134E48;
148
+ @TB20: #125D56;
149
+ @TB30: #0F7569;
150
+ @TB40: #0E9384;
151
+ @TB50: #15B79E;
152
+ @TB60: #2ED2B7;
153
+ @TB70: #5EE9CF;
154
+ @TB80: #99F6E0;
155
+ @TB90: #CCFBEF;
156
+ @TB95: #F0FDF9;
157
+ @TB98: #F6FEFC;
158
+
159
+ /**
160
+ * 业务C (Tertiary C)
161
+ **/
162
+
163
+ @TC10: #013743;
164
+ @TC20: #024D5E;
165
+ @TC30: #036E86;
166
+ @TC40: #0386A4;
167
+ @TC50: #049BBD;
168
+ @TC60: #05AED4;
169
+ @TC70: #72C0DD;
170
+ @TC80: #A1D2E6;
171
+ @TC90: #C5E2EE;
172
+ @TC95: #E4F0F6;
173
+ @TC98: #F1F8FB;
174
+
175
+ /**
176
+ * 业务D (Tertiary D)
177
+ **/
178
+
179
+ @TD10: #2D3282;
180
+ @TD20: #2D31A5;
181
+ @TD30: #3537CC;
182
+ @TD40: #444CE7;
183
+ @TD50: #6071F3;
184
+ @TD60: #7F98F9;
185
+ @TD70: #A3BBFD;
186
+ @TD80: #C7D7FE;
187
+ @TD90: #E0EAFF;
188
+ @TD95: #EEF4FF;
189
+ @TD98: #F5F8FF;
190
+
191
+ /**
192
+ * 业务E (Tertiary E)
193
+ **/
194
+
195
+ @TE10: #271B47;
196
+ @TE20: #382765;
197
+ @TE30: #4F378F;
198
+ @TE40: #6144AF;
199
+ @TE50: #704ECB;
200
+ @TE60: #7E58E3;
201
+ @TE70: #A08AE8;
202
+ @TE80: #BCAFEE;
203
+ @TE90: #D4CDF4;
204
+ @TE95: #EAE7F9;
205
+ @TE98: #F5F3FC;
206
+
207
+ /**
208
+ * 业务F (Tertiary F)
209
+ **/
210
+
211
+ @TF10: #6E1876;
212
+ @TF20: #821890;
213
+ @TF30: #9F1AB0;
214
+ @TF40: #BA24D5;
215
+ @TF50: #D444F1;
216
+ @TF60: #E477FA;
217
+ @TF70: #EDAAFC;
218
+ @TF80: #F6D0FE;
219
+ @TF90: #FBE8FF;
220
+ @TF95: #FDF4FF;
221
+ @TF98: #FEFAFF;
222
+
223
+ /**
224
+ * 业务G (Tertiary G)
225
+ **/
226
+
227
+ @TG10: #851651;
228
+ @TG20: #9E155E;
229
+ @TG30: #C01573;
230
+ @TG40: #DC2590;
231
+ @TG50: #EE46BC;
232
+ @TG60: #F570C7;
233
+ @TG70: #F9A7DF;
234
+ @TG80: #FCCEEE;
235
+ @TG90: #FCE7F6;
236
+ @TG95: #FDF2FA;
237
+ @TG98: #FEF6FB;
238
+
239
+ /**
240
+ * 业务H (Tertiary H)
241
+ **/
242
+
243
+ @TH10: #713B11;
244
+ @TH20: #85490D;
245
+ @TH30: #A15B06;
246
+ @TH40: #CA8403;
247
+ @TH50: #EAA907;
248
+ @TH60: #FAC414;
249
+ @TH70: #FDE272;
250
+ @TH80: #FEEE94;
251
+ @TH90: #FDF7C3;
252
+ @TH95: #FEFBE8;
253
+ @TH98: #FEFDF0;
254
+
255
+
135
256
  // 用css module的能力,将less变量输出给js,供js文件中使用
136
257
  :export {
137
258
  NL0: @NL0;
@@ -215,9 +336,100 @@
215
336
  BG95: @BG95;
216
337
  BG97: @BG97;
217
338
  BG100: @BG100;
218
- WHITE: @white;
219
- BLACK: @black;
220
- IMAGE_HOLDER: @imageholder;
221
- MATE: @mate;
222
339
  SHADOW_L: @shadow-L;
340
+ TA10: @TA10;
341
+ TA20: @TA20;
342
+ TA30: @TA30;
343
+ TA40: @TA40;
344
+ TA50: @TA50;
345
+ TA60: @TA60;
346
+ TA70: @TA70;
347
+ TA80: @TA80;
348
+ TA90: @TA90;
349
+ TA95: @TA95;
350
+ TA98: @TA98;
351
+
352
+ TB10: @TB10;
353
+ TB20: @TB20;
354
+ TB30: @TB30;
355
+ TB40: @TB40;
356
+ TB50: @TB50;
357
+ TB60: @TB60;
358
+ TB70: @TB70;
359
+ TB80: @TB80;
360
+ TB90: @TB90;
361
+ TB95: @TB95;
362
+ TB98: @TB98;
363
+
364
+ TC10: @TC10;
365
+ TC20: @TC20;
366
+ TC30: @TC30;
367
+ TC40: @TC40;
368
+ TC50: @TC50;
369
+ TC60: @TC60;
370
+ TC70: @TC70;
371
+ TC80: @TC80;
372
+ TC90: @TC90;
373
+ TC95: @TC95;
374
+ TC98: @TC98;
375
+
376
+ TD10: @TD10;
377
+ TD20: @TD20;
378
+ TD30: @TD30;
379
+ TD40: @TD40;
380
+ TD50: @TD50;
381
+ TD60: @TD60;
382
+ TD70: @TD70;
383
+ TD80: @TD80;
384
+ TD90: @TD90;
385
+ TD95: @TD95;
386
+ TD98: @TD98;
387
+
388
+ TE10: @TE10;
389
+ TE20: @TE20;
390
+ TE30: @TE30;
391
+ TE40: @TE40;
392
+ TE50: @TE50;
393
+ TE60: @TE60;
394
+ TE70: @TE70;
395
+ TE80: @TE80;
396
+ TE90: @TE90;
397
+ TE95: @TE95;
398
+ TE98: @TE98;
399
+
400
+ TF10: @TF10;
401
+ TF20: @TF20;
402
+ TF30: @TF30;
403
+ TF40: @TF40;
404
+ TF50: @TF50;
405
+ TF60: @TF60;
406
+ TF70: @TF70;
407
+ TF80: @TF80;
408
+ TF90: @TF90;
409
+ TF95: @TF95;
410
+ TF98: @TF98;
411
+
412
+ TG10: @TG10;
413
+ TG20: @TG20;
414
+ TG30: @TG30;
415
+ TG40: @TG40;
416
+ TG50: @TG50;
417
+ TG60: @TG60;
418
+ TG70: @TG70;
419
+ TG80: @TG80;
420
+ TG90: @TG90;
421
+ TG95: @TG95;
422
+ TG98: @TG98;
423
+
424
+ TH10: @TH10;
425
+ TH20: @TH20;
426
+ TH30: @TH30;
427
+ TH40: @TH40;
428
+ TH50: @TH50;
429
+ TH60: @TH60;
430
+ TH70: @TH70;
431
+ TH80: @TH80;
432
+ TH90: @TH90;
433
+ TH95: @TH95;
434
+ TH98: @TH98;
223
435
  }
@@ -25,9 +25,6 @@ interface CssExports {
25
25
  'BG90': string;
26
26
  'BG95': string;
27
27
  'BG97': string;
28
- 'BLACK': string;
29
- 'IMAGE_HOLDER': string;
30
- 'MATE': string;
31
28
  'ND0': string;
32
29
  'ND10': string;
33
30
  'ND20': string;
@@ -86,7 +83,94 @@ interface CssExports {
86
83
  'SC95': string;
87
84
  'SC98': string;
88
85
  'SHADOW_L': string;
89
- 'WHITE': string;
86
+ 'TA10': string;
87
+ 'TA20': string;
88
+ 'TA30': string;
89
+ 'TA40': string;
90
+ 'TA50': string;
91
+ 'TA60': string;
92
+ 'TA70': string;
93
+ 'TA80': string;
94
+ 'TA90': string;
95
+ 'TA95': string;
96
+ 'TA98': string;
97
+ 'TB10': string;
98
+ 'TB20': string;
99
+ 'TB30': string;
100
+ 'TB40': string;
101
+ 'TB50': string;
102
+ 'TB60': string;
103
+ 'TB70': string;
104
+ 'TB80': string;
105
+ 'TB90': string;
106
+ 'TB95': string;
107
+ 'TB98': string;
108
+ 'TC10': string;
109
+ 'TC20': string;
110
+ 'TC30': string;
111
+ 'TC40': string;
112
+ 'TC50': string;
113
+ 'TC60': string;
114
+ 'TC70': string;
115
+ 'TC80': string;
116
+ 'TC90': string;
117
+ 'TC95': string;
118
+ 'TC98': string;
119
+ 'TD10': string;
120
+ 'TD20': string;
121
+ 'TD30': string;
122
+ 'TD40': string;
123
+ 'TD50': string;
124
+ 'TD60': string;
125
+ 'TD70': string;
126
+ 'TD80': string;
127
+ 'TD90': string;
128
+ 'TD95': string;
129
+ 'TD98': string;
130
+ 'TE10': string;
131
+ 'TE20': string;
132
+ 'TE30': string;
133
+ 'TE40': string;
134
+ 'TE50': string;
135
+ 'TE60': string;
136
+ 'TE70': string;
137
+ 'TE80': string;
138
+ 'TE90': string;
139
+ 'TE95': string;
140
+ 'TE98': string;
141
+ 'TF10': string;
142
+ 'TF20': string;
143
+ 'TF30': string;
144
+ 'TF40': string;
145
+ 'TF50': string;
146
+ 'TF60': string;
147
+ 'TF70': string;
148
+ 'TF80': string;
149
+ 'TF90': string;
150
+ 'TF95': string;
151
+ 'TF98': string;
152
+ 'TG10': string;
153
+ 'TG20': string;
154
+ 'TG30': string;
155
+ 'TG40': string;
156
+ 'TG50': string;
157
+ 'TG60': string;
158
+ 'TG70': string;
159
+ 'TG80': string;
160
+ 'TG90': string;
161
+ 'TG95': string;
162
+ 'TG98': string;
163
+ 'TH10': string;
164
+ 'TH20': string;
165
+ 'TH30': string;
166
+ 'TH40': string;
167
+ 'TH50': string;
168
+ 'TH60': string;
169
+ 'TH70': string;
170
+ 'TH80': string;
171
+ 'TH90': string;
172
+ 'TH95': string;
173
+ 'TH98': string;
90
174
  }
91
175
  export const cssExports: CssExports;
92
176
  export default cssExports;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aloudata/aloudata-design",
3
- "version": "0.3.5",
3
+ "version": "0.4.0-beta.1",
4
4
  "scripts": {
5
5
  "start": "dumi dev",
6
6
  "docs:build": "dumi build",