myshell-react-lib 0.2.45 → 0.3.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.
Files changed (18) hide show
  1. package/dist/index.cjs +114 -87
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +14 -8
  4. package/dist/index.d.ts +14 -8
  5. package/dist/index.js +115 -88
  6. package/dist/index.js.map +1 -1
  7. package/dist/styles/components-dark-v2.scss +220 -0
  8. package/dist/styles/components-light-v2.scss +220 -0
  9. package/dist/styles/design2-dark-v2.scss +443 -0
  10. package/dist/styles/design2-light-v2.scss +443 -0
  11. package/dist/styles/global.scss +5 -5
  12. package/dist/styles/new-tokens-v2.scss +518 -0
  13. package/package.json +2 -2
  14. package/dist/styles/components-dark.scss +0 -210
  15. package/dist/styles/components-light.scss +0 -208
  16. package/dist/styles/design2-dark.scss +0 -332
  17. package/dist/styles/design2-light.scss +0 -366
  18. package/dist/styles/new-tokens.scss +0 -264
package/dist/styles/design2-light.scss DELETED
@@ -1,366 +0,0 @@
1
- @import './new-tokens.scss';
2
-
3
- @layer base {
4
- :root {
5
- // Colors Background Normal
6
- --Colors-Background-Normal-Primary-Default: var(--Neutral-99);
7
- --Colors-Background-Normal-Primary-Hover: var(--Neutral-98);
8
- --Colors-Background-Normal-Primary-Active: var(--Neutral-90);
9
- --Colors-Background-Normal-Primary-Alt: var(--Neutral-100);
10
-
11
- // Colors Background Normal Secondary
12
- --Colors-Background-Normal-Secondary-Default: var(--Neutral-98);
13
- --Colors-Background-Normal-Secondary-Alt: var(--Neutral-100);
14
- --Colors-Background-Normal-Secondary-Hover: var(--Neutral-95);
15
- --Colors-Background-Normal-Secondary-Active: var(--Neutral-90);
16
-
17
- // Colors Background Normal Tertiary
18
- --Colors-Background-Normal-Tertiary-Default: var(--Neutral-100);
19
- --Colors-Background-Normal-Tertiary-Hover: var(--Neutral-98);
20
- --Colors-Background-Normal-Tertiary-Active: var(--Neutral-95);
21
-
22
- // Colors Background Neutral Primary
23
- --Colors-Background-Neutral-Primary-Default: var(--Neutral-98);
24
- --Colors-Background-Neutral-Primary-Hover: var(--Neutral-95);
25
- --Colors-Background-Neutral-Primary-Active: var(--Neutral-90);
26
-
27
- // Colors Background Neutral Secondary
28
- --Colors-Background-Neutral-Secondary-Default: var(--Neutral-99);
29
- --Colors-Background-Neutral-Secondary-Hover: var(--Neutral-98);
30
- --Colors-Background-Neutral-Secondary-Active: var(--Neutral-95);
31
-
32
- // Colors Background Neutral Tertiary
33
- --Colors-Background-Neutral-Tertiary-Default: var(--Neutral-98);
34
- --Colors-Background-Neutral-Tertiary-Hover: var(--Neutral-95);
35
- --Colors-Background-Neutral-Tertiary-Active: var(--Neutral-90);
36
-
37
- // Colors Background Neutral On Surface
38
- --Colors-Background-Neutral-On-Surface-Default: var(--Opacity-On-Surface-10);
39
- --Colors-Background-Neutral-On-Surface-Hover: var(--Opacity-On-Surface-20);
40
- --Colors-Background-Neutral-On-Surface-Active: var(--Opacity-On-Surface-30);
41
- --Colors-Background-Neutral-On-Surface-Disabled: var(--Opacity-On-Surface-10);
42
- --Colors-Background-Neutral-On-Surface-Alt: var(--Opacity-On-Surface-40);
43
-
44
- // Colors Background Utilities
45
- --Colors-Background-Utilities-Bolder: var(--Neutral-5);
46
- --Colors-Background-Utilities-None: var(--Basic-None);
47
- --Colors-Background-Utilities-Overlay: var(--Opacity-Black-70);
48
- --Colors-Background-Utilities-Static-White: var(--Neutral-99);
49
- --Colors-Background-Utilities-Static-Black: var(--Neutral-5);
50
- --Colors-Background-Utilities-Modal:var(--Neutral-100);
51
-
52
- // Colors Background Brand
53
- --Colors-Background-Brand-Default: var(--Pure-Mauve-95);
54
- --Colors-Background-Brand-Alt: var(--Pure-Mauve-95);
55
- --Colors-Background-Brand-Subtle: var(--Pure-Mauve-98);
56
- --Colors-Background-Brand-Hover: var(--Pure-Mauve-90);
57
- --Colors-Background-Brand-Active: var(--Pure-Mauve-80);
58
- --Colors-Background-Brand-Bolder: var(--Pure-Mauve-30);
59
-
60
- // Colors Background Critical
61
- --Colors-Background-Critical-Default: var(--Terracotta-90);
62
- --Colors-Background-Critical-Alt: var(--Terracotta-90);
63
- --Colors-Background-Critical-Subtle: var(--Terracotta-95);
64
- --Colors-Background-Critical-Hover: var(--Terracotta-80);
65
- --Colors-Background-Critical-Active: var(--Terracotta-70);
66
- --Colors-Background-Critical-Bolder: var(--Terracotta-30);
67
-
68
- // Colors Background Warning
69
- --Colors-Background-Warning-Default: var(--Khaki-90);
70
- --Colors-Background-Warning-Alt: var(--Khaki-90);
71
- --Colors-Background-Warning-Subtle: var(--Khaki-95);
72
- --Colors-Background-Warning-Hover: var(--Khaki-80);
73
- --Colors-Background-Warning-Active: var(--Khaki-70);
74
- --Colors-Background-Warning-Bolder: var(--Khaki-30);
75
-
76
- // Colors Background Success
77
- --Colors-Background-Success-Default: var(--Teal-95);
78
- --Colors-Background-Success-Alt: var(--Teal-95);
79
- --Colors-Background-Success-Subtle: var(--Teal-98);
80
- --Colors-Background-Success-Hover: var(--Teal-90);
81
- --Colors-Background-Success-Active: var(--Teal-80);
82
- --Colors-Background-Success-Bolder: var(--Teal-30);
83
-
84
- // Colors Background Info
85
- --Colors-Background-Info-Default: var(--Lake-Blue-90);
86
- --Colors-Background-Info-Alt: var(--Lake-Blue-90);
87
- --Colors-Background-Info-Subtle: var(--Lake-Blue-95);
88
- --Colors-Background-Info-Hover: var(--Lake-Blue-80);
89
- --Colors-Background-Info-Active: var(--Lake-Blue-70);
90
- --Colors-Background-Info-Bolder: var(--Lake-Blue-30);
91
-
92
- // Colors Text
93
- --Colors-Text-Default: var(--Neutral-5);
94
- --Colors-Text-Subtle: var(--Neutral-30);
95
- --Colors-Text-Subtler: var(--Neutral-40);
96
- --Colors-Text-Subtlest: var(--Neutral-60);
97
- --Colors-Text-Disabled: var(--Neutral-80);
98
- --Colors-Text-Bolder: var(--Neutral-100); //对应旧版inverse
99
-
100
- // Colors Text Static
101
- --Colors-Text-Static-White: var(--Neutral-100);
102
- --Colors-Text-Static-Black: var(--Neutral-5);
103
-
104
- // Colors Text Brand
105
- --Colors-Text-Brand-Subtle: var(--Pure-Mauve-70);
106
- --Colors-Text-Brand-Default: var(--Pure-Mauve-50);
107
- --Colors-Text-Brand-Bolder: var(--Pure-Mauve-30);
108
-
109
- // Colors Text Critical
110
- --Colors-Text-Critical-Subtle: var(--Terracotta-70);
111
- --Colors-Text-Critical-Default: var(--Terracotta-50);
112
- --Colors-Text-Critical-Bolder: var(--Terracotta-30);
113
-
114
- // Colors Text Warning
115
- --Colors-Text-Warning-Subtle: var(--Khaki-80);
116
- --Colors-Text-Warning-Default: var(--Khaki-60);
117
- --Colors-Text-Warning-Bolder: var(--Khaki-30);
118
-
119
- // Colors Text Success
120
- --Colors-Text-Success-Subtle: var(--Teal-70);
121
- --Colors-Text-Success-Default: var(--Teal-50);
122
- --Colors-Text-Success-Bolder: var(--Teal-30);
123
-
124
-
125
- // Colort Foreground
126
- --Colors-Foreground-Default: var(--Neutral-5);
127
- --Colors-Foreground-Subtle: var(--Neutral-30);
128
- --Colors-Foreground-Subtler: var(--Neutral-40);
129
- --Colors-Foreground-Subtlest: var(--Neutral-50);
130
- --Colors-Foreground-Disabled: var(--Neutral-80);
131
- --Colors-Foreground-Bolder: var(--Neutral-100);
132
-
133
- // Colors Foreground Static
134
- --Colors-Foreground-Static-White: var(--Neutral-100);
135
- --Colors-Foreground-Static-Black: var(--Neutral-5);
136
-
137
- // Colors Foreground Brand
138
- --Colors-Foreground-Brand-Subtle: var(--Pure-Mauve-70);
139
- --Colors-Foreground-Brand-Default: var(--Pure-Mauve-50);
140
- --Colors-Foreground-Brand-Bolder: var(--Pure-Mauve-30);
141
-
142
- // Colors Foreground Critical
143
- --Colors-Foreground-Critical-Subtle: var(--Terracotta-70);
144
- --Colors-Foreground-Critical-Default: var(--Terracotta-50);
145
- --Colors-Foreground-Critical-Bolder: var(--Terracotta-30);
146
-
147
- // Colors Foreground Warning
148
- --Colors-Foreground-Warning-Subtle: var(--Khaki-80);
149
- --Colors-Foreground-Warning-Default: var(--Khaki-60);
150
- --Colors-Foreground-Warning-Bolder: var(--Khaki-30);
151
-
152
- // Colors Foreground Success
153
- --Colors-Foreground-Success-Subtle: var(--Teal-70);
154
- --Colors-Foreground-Success-Default: var(--Teal-50);
155
- --Colors-Foreground-Success-Bolder: var(--Teal-30);
156
-
157
-
158
- // Colors Border
159
- --Colors-Border-Default: var(--Neutral-95);
160
- --Colors-Border-Alt: var(--Neutral-95);
161
- --Colors-Border-Hover: var(--Neutral-90);
162
- --Colors-Border-Active: var(--Neutral-80);
163
- --Colors-Border-Bolder: var(--Neutral-5);
164
- --Colors-Border-Brand: var(--Pure-Mauve-50);
165
- --Colors-Border-Brand_alt: var(--Pure-Mauve-80);
166
- --Colors-Border-Critical: var(--Terracotta-50);
167
- --Colors-Border-Success: var(--Teal-50);
168
- --Colors-Border-Warning: var(--Khaki-50);
169
- --Colors-Border-Opaque: var(--Opacity-White-1);
170
- --Colors-Border-Static: var(--Neutral-95);
171
-
172
- // Colors Alpha
173
- --Colors-Alpha-White-1: var(--Opacity-White-1);
174
- --Colors-Alpha-White-3: var(--Opacity-White-3);
175
- --Colors-Alpha-White-5: var(--Opacity-White-5);
176
- --Colors-Alpha-White-8: var(--Opacity-White-8);
177
- --Colors-Alpha-White-12: var(--Opacity-White-12);
178
- --Colors-Alpha-White-16: var(--Opacity-White-16);
179
- --Colors-Alpha-White-20: var(--Opacity-White-20);
180
- --Colors-Alpha-White-30: var(--Opacity-White-30);
181
- --Colors-Alpha-White-40: var(--Opacity-White-40);
182
- --Colors-Alpha-White-50: var(--Opacity-White-50);
183
- --Colors-Alpha-White-60: var(--Opacity-White-60);
184
- --Colors-Alpha-White-70: var(--Opacity-White-70);
185
- --Colors-Alpha-White-80: var(--Opacity-White-80);
186
- --Colors-Alpha-White-90: var(--Opacity-White-90);
187
- --Colors-Alpha-White-95: var(--Opacity-White-95);
188
- --Colors-Alpha-White-100: var(--Opacity-White-100);
189
- --Colors-Alpha-Black-1: var(--Opacity-Black-1);
190
- --Colors-Alpha-Black-3: var(--Opacity-Black-3);
191
- --Colors-Alpha-Black-5: var(--Opacity-Black-5);
192
- --Colors-Alpha-Black-8: var(--Opacity-Black-8);
193
- --Colors-Alpha-Black-12: var(--Opacity-Black-12);
194
- --Colors-Alpha-Black-16: var(--Opacity-Black-16);
195
- --Colors-Alpha-Black-20: var(--Opacity-Black-20);
196
- --Colors-Alpha-Black-30: var(--Opacity-Black-30);
197
- --Colors-Alpha-Black-40: var(--Opacity-Black-40);
198
- --Colors-Alpha-Black-50: var(--Opacity-Black-50);
199
- --Colors-Alpha-Black-60: var(--Opacity-Black-60);
200
- --Colors-Alpha-Black-70: var(--Opacity-Black-70);
201
- --Colors-Alpha-Black-80: var(--Opacity-Black-80);
202
- --Colors-Alpha-Black-90: var(--Opacity-Black-90);
203
- --Colors-Alpha-Black-95: var(--Opacity-Black-95);
204
- --Colors-Alpha-Black-100: var(--Opacity-Black-100);
205
-
206
- // Colors beta
207
- --Colors-Beta-White-1: var(--Opacity-White-1);
208
- --Colors-Beta-White-3: var(--Opacity-White-3);
209
- --Colors-Beta-White-5: var(--Opacity-White-5);
210
- --Colors-Beta-White-8: var(--Opacity-White-8);
211
- --Colors-Beta-White-12: var(--Opacity-White-12);
212
- --Colors-Beta-White-16: var(--Opacity-White-16);
213
- --Colors-Beta-White-20: var(--Opacity-White-20);
214
- --Colors-Beta-White-30: var(--Opacity-White-30);
215
- --Colors-Beta-White-40: var(--Opacity-White-40);
216
- --Colors-Beta-White-50: var(--Opacity-White-50);
217
- --Colors-Beta-White-60: var(--Opacity-White-60);
218
- --Colors-Beta-White-70: var(--Opacity-White-70);
219
- --Colors-Beta-White-80: var(--Opacity-White-80);
220
- --Colors-Beta-White-90: var(--Opacity-White-90);
221
- --Colors-Beta-White-95: var(--Opacity-White-95);
222
- --Colors-Beta-White-100: var(--Opacity-White-100);
223
- --Colors-Beta-Black-1: var(--Opacity-Black-1);
224
- --Colors-Beta-Black-3: var(--Opacity-Black-3);
225
- --Colors-Beta-Black-5: var(--Opacity-Black-5);
226
- --Colors-Beta-Black-8: var(--Opacity-Black-8);
227
- --Colors-Beta-Black-12: var(--Opacity-Black-12);
228
- --Colors-Beta-Black-16: var(--Opacity-Black-16);
229
- --Colors-Beta-Black-20: var(--Opacity-Black-20);
230
- --Colors-Beta-Black-30: var(--Opacity-Black-30);
231
- --Colors-Beta-Black-40: var(--Opacity-Black-40);
232
- --Colors-Beta-Black-50: var(--Opacity-Black-50);
233
- --Colors-Beta-Black-60: var(--Opacity-Black-60);
234
- --Colors-Beta-Black-70: var(--Opacity-Black-70);
235
- --Colors-Beta-Black-80: var(--Opacity-Black-80);
236
- --Colors-Beta-Black-90: var(--Opacity-Black-90);
237
- --Colors-Beta-Black-95: var(--Opacity-Black-95);
238
- --Colors-Beta-Black-100: var(--Opacity-Black-100);
239
-
240
- // Colors Utility Gray
241
- --Colors-Utility-Gray-5: var(--Neutral-Variant-98);
242
- --Colors-Utility-Gray-10: var(--Neutral-Variant-95);
243
- --Colors-Utility-Gray-20: var(--Neutral-Variant-90);
244
- --Colors-Utility-Gray-30: var(--Neutral-Variant-80);
245
- --Colors-Utility-Gray-40: var(--Neutral-Variant-70);
246
- --Colors-Utility-Gray-50: var(--Neutral-Variant-60);
247
- --Colors-Utility-Gray-60: var(--Neutral-Variant-50);
248
- --Colors-Utility-Gray-70: var(--Neutral-Variant-40);
249
- --Colors-Utility-Gray-80: var(--Neutral-Variant-30);
250
-
251
- // Colors Utility Olive
252
- --Colors-Utility-Olive-5: var(--Olive-98);
253
- --Colors-Utility-Olive-10: var(--Olive-95);
254
- --Colors-Utility-Olive-20: var(--Olive-90);
255
- --Colors-Utility-Olive-30: var(--Olive-80);
256
- --Colors-Utility-Olive-40: var(--Olive-70);
257
- --Colors-Utility-Olive-50: var(--Olive-60);
258
- --Colors-Utility-Olive-60: var(--Olive-50);
259
- --Colors-Utility-Olive-70: var(--Olive-40);
260
- --Colors-Utility-Olive-80: var(--Olive-30);
261
-
262
- // Colors Utility Teal
263
- --Colors-Utility-Teal-5: var(--Teal-98);
264
- --Colors-Utility-Teal-10: var(--Teal-95);
265
- --Colors-Utility-Teal-20: var(--Teal-90);
266
- --Colors-Utility-Teal-30: var(--Teal-80);
267
- --Colors-Utility-Teal-40: var(--Teal-70);
268
- --Colors-Utility-Teal-50: var(--Teal-60);
269
- --Colors-Utility-Teal-60: var(--Teal-50);
270
- --Colors-Utility-Teal-70: var(--Teal-40);
271
- --Colors-Utility-Teal-80: var(--Teal-30);
272
-
273
- // Colors Utility Terracotta
274
- --Colors-Utility-Lake-Blue-5: var(--Lake-Blue-98);
275
- --Colors-Utility-Lake-Blue-10: var(--Lake-Blue-95);
276
- --Colors-Utility-Lake-Blue-20: var(--Lake-Blue-90);
277
- --Colors-Utility-Lake-Blue-30: var(--Lake-Blue-80);
278
- --Colors-Utility-Lake-Blue-40: var(--Lake-Blue-70);
279
- --Colors-Utility-Lake-Blue-50: var(--Lake-Blue-60);
280
- --Colors-Utility-Lake-Blue-60: var(--Lake-Blue-50);
281
- --Colors-Utility-Lake-Blue-70: var(--Lake-Blue-40);
282
- --Colors-Utility-Lake-Blue-80: var(--Lake-Blue-30);
283
-
284
- // Colors Utility Cobalt
285
- --Colors-Utility-Cobalt-5: var(--Cobalt-98);
286
- --Colors-Utility-Cobalt-10: var(--Cobalt-95);
287
- --Colors-Utility-Cobalt-20: var(--Cobalt-90);
288
- --Colors-Utility-Cobalt-30: var(--Cobalt-80);
289
- --Colors-Utility-Cobalt-40: var(--Cobalt-70);
290
- --Colors-Utility-Cobalt-50: var(--Cobalt-60);
291
- --Colors-Utility-Cobalt-60: var(--Cobalt-50);
292
- --Colors-Utility-Cobalt-70: var(--Cobalt-40);
293
- --Colors-Utility-Cobalt-80: var(--Cobalt-30);
294
-
295
- // Colors Utility Berry Pink
296
- --Colors-Utility-Berry-Pink-5: var(--Berry-Pink-98);
297
- --Colors-Utility-Berry-Pink-10: var(--Berry-Pink-95);
298
- --Colors-Utility-Berry-Pink-20: var(--Berry-Pink-90);
299
- --Colors-Utility-Berry-Pink-30: var(--Berry-Pink-80);
300
- --Colors-Utility-Berry-Pink-40: var(--Berry-Pink-70);
301
- --Colors-Utility-Berry-Pink-50: var(--Berry-Pink-60);
302
- --Colors-Utility-Berry-Pink-60: var(--Berry-Pink-50);
303
- --Colors-Utility-Berry-Pink-70: var(--Berry-Pink-40);
304
- --Colors-Utility-Berry-Pink-80: var(--Berry-Pink-30);
305
-
306
- // Colors Utility Terracotta
307
- --Colors-Utility-Terracotta-5: var(--Terracotta-98);
308
- --Colors-Utility-Terracotta-10: var(--Terracotta-95);
309
- --Colors-Utility-Terracotta-20: var(--Terracotta-90);
310
- --Colors-Utility-Terracotta-30: var(--Terracotta-80);
311
- --Colors-Utility-Terracotta-40: var(--Terracotta-70);
312
- --Colors-Utility-Terracotta-50: var(--Terracotta-60);
313
- --Colors-Utility-Terracotta-60: var(--Terracotta-50);
314
- --Colors-Utility-Terracotta-70: var(--Terracotta-40);
315
- --Colors-Utility-Terracotta-80: var(--Terracotta-30);
316
-
317
- // Colors Utility Ember
318
- --Colors-Utility-Ember-5: var(--Ember-98);
319
- --Colors-Utility-Ember-10: var(--Ember-95);
320
- --Colors-Utility-Ember-20: var(--Ember-90);
321
- --Colors-Utility-Ember-30: var(--Ember-80);
322
- --Colors-Utility-Ember-40: var(--Ember-70);
323
- --Colors-Utility-Ember-50: var(--Ember-60);
324
- --Colors-Utility-Ember-60: var(--Ember-50);
325
- --Colors-Utility-Ember-70: var(--Ember-40);
326
- --Colors-Utility-Ember-80: var(--Ember-30);
327
-
328
- // Colors Utility Khaki
329
- --Colors-Utility-Khaki-5: var(--Khaki-98);
330
- --Colors-Utility-Khaki-10: var(--Khaki-95);
331
- --Colors-Utility-Khaki-20: var(--Khaki-90);
332
- --Colors-Utility-Khaki-30: var(--Khaki-80);
333
- --Colors-Utility-Khaki-40: var(--Khaki-70);
334
- --Colors-Utility-Khaki-50: var(--Khaki-60);
335
- --Colors-Utility-Khaki-60: var(--Khaki-50);
336
- --Colors-Utility-Khaki-70: var(--Khaki-40);
337
- --Colors-Utility-Khaki-80: var(--Khaki-30);
338
-
339
- // Colors Utility Purple
340
- --Colors-Utility-Purple-5: var(--Pure-Mauve-99);
341
- --Colors-Utility-Purple-10: var(--Pure-Mauve-98);
342
- --Colors-Utility-Purple-20: var(--Pure-Mauve-95);
343
- --Colors-Utility-Purple-30: var(--Pure-Mauve-90);
344
- --Colors-Utility-Purple-40: var(--Pure-Mauve-80);
345
- --Colors-Utility-Purple-50: var(--Pure-Mauve-70);
346
- --Colors-Utility-Purple-60: var(--Pure-Mauve-60);
347
- --Colors-Utility-Purple-70: var(--Pure-Mauve-50);
348
- --Colors-Utility-Purple-80: var(--Pure-Mauve-40);
349
-
350
- // Colors Utility Plum Purple
351
- --Colors-Utility-Plum-Purple-5: var(--Plum-Purple-98);
352
- --Colors-Utility-Plum-Purple-10: var(--Plum-Purple-95);
353
- --Colors-Utility-Plum-Purple-20: var(--Plum-Purple-90);
354
- --Colors-Utility-Plum-Purple-30: var(--Plum-Purple-80);
355
- --Colors-Utility-Plum-Purple-40: var(--Plum-Purple-70);
356
- --Colors-Utility-Plum-Purple-50: var(--Plum-Purple-60);
357
- --Colors-Utility-Plum-Purple-60: var(--Plum-Purple-50);
358
- --Colors-Utility-Plum-Purple-70: var(--Plum-Purple-40);
359
- --Colors-Utility-Plum-Purple-80: var(--Plum-Purple-30);
360
-
361
- --Colors-FaceTime-White: var(--Opacity-White-20);
362
- --Colors-FaceTime-Black: var(--Opacity-Black-20);
363
-
364
- }
365
- }
366
-
package/dist/styles/new-tokens.scss DELETED
@@ -1,264 +0,0 @@
1
- @layer base {
2
- :root {
3
- // Basic
4
- --Basic-White: #ffffff;
5
- --Basic-Black: #000000;
6
- --Basic-None: #ffffff00;
7
-
8
- // Pure_Mauve
9
- --Pure-Mauve-0: #000000;
10
- --Pure-Mauve-5: #100f22;
11
- --Pure-Mauve-10: #1b192d;
12
- --Pure-Mauve-20: #352b4a;
13
- --Pure-Mauve-30: #53436f;
14
- --Pure-Mauve-40: #655186;
15
- --Pure-Mauve-50: #7860a1;
16
- --Pure-Mauve-60: #826aaf;
17
- --Pure-Mauve-70: #9d8dc5;
18
- --Pure-Mauve-80: #b8aed7;
19
- --Pure-Mauve-90: #cbc6e6;
20
- --Pure-Mauve-95: #dad6f1;
21
- --Pure-Mauve-98: #e8e6f7;
22
- --Pure-Mauve-99: #f9f7fc;
23
- --Pure-Mauve-100: #ffffff;
24
-
25
- // Neutral
26
- --Neutral-0: #000000;
27
- --Neutral-5: #121110;
28
- --Neutral-10: #242220;
29
- --Neutral-20: #302e2b;
30
- --Neutral-30: #47443f;
31
- --Neutral-40: #5c5854;
32
- --Neutral-50: #7a7671;
33
- --Neutral-60: #948f8b;
34
- --Neutral-70: #B2AFAB;
35
- --Neutral-80: #C7C4C1;
36
- --Neutral-90: #E3E1DE;
37
- --Neutral-95: #EBE9E8;
38
- --Neutral-98: #f5f4f2;
39
- --Neutral-99: #fcfbfa;
40
- --Neutral-100: #fffefd;
41
-
42
- // Neutral Variant
43
- --Neutral-Variant-0: #000000;
44
- --Neutral-Variant-5: #111111;
45
- --Neutral-Variant-10: #1c1c1c;
46
- --Neutral-Variant-20: #212121;
47
- --Neutral-Variant-25: #292929;
48
- --Neutral-Variant-30: #303030;
49
- --Neutral-Variant-40: #474747;
50
- --Neutral-Variant-50: #5C5C5C;
51
- --Neutral-Variant-60: #939393;
52
- --Neutral-Variant-70: #a8a8a8;
53
- --Neutral-Variant-80: #bfbfbf;
54
- --Neutral-Variant-90: #dedede;
55
- --Neutral-Variant-95: #e6e6e6;
56
- --Neutral-Variant-98: #f2f2f2;
57
- --Neutral-Variant-99: #fafafa;
58
- --Neutral-Variant-100: #ffffff;
59
-
60
- // Terracotta
61
- --Terracotta-0: #000000;
62
- --Terracotta-5: #2b0100;
63
- --Terracotta-10: #3f0300;
64
- --Terracotta-20: #530904;
65
- --Terracotta-30: #881f0f;
66
- --Terracotta-40: #a93724;
67
- --Terracotta-50: #ca4f3a;
68
- --Terracotta-60: #EC5F47;
69
- --Terracotta-70: #ff8a75;
70
- --Terracotta-80: #ffb4a6;
71
- --Terracotta-90: #ffdad4;
72
- --Terracotta-95: #ffede9;
73
- --Terracotta-98: #fff8f6;
74
- --Terracotta-99: #fffcfb;
75
- --Terracotta-100: #ffffff;
76
-
77
- //新增Terracotta / Variant
78
-
79
- --Terracotta-Variant-10:#260D0C;
80
- --Terracotta-Variant-20:#461A18;
81
- --Terracotta-Variant-30:#652A22;
82
- --Terracotta-Variant-40:#81362A;
83
-
84
-
85
- // Ember
86
- --Ember-0: #000000;
87
- --Ember-5: #230900;
88
- --Ember-10: #341100;
89
- --Ember-20: #552000;
90
- --Ember-30: #793100;
91
- --Ember-40: #9f4200;
92
- --Ember-50: #c55505;
93
- --Ember-60: #e76d24;
94
- --Ember-70: #ff8d4e;
95
- --Ember-80: #ffb692;
96
- --Ember-90: #ffdbcb;
97
- --Ember-95: #ffede6;
98
- --Ember-98: #fff4f0;
99
- --Ember-99: #fffcfb;
100
- --Ember-100: #ffffff;
101
-
102
- // Khaki
103
- --Khaki-0: #000000;
104
- --Khaki-5: #171000;
105
- --Khaki-10: #241a00;
106
- --Khaki-20: #3d2e00;
107
- --Khaki-30: #584400;
108
- --Khaki-40: #755b00;
109
- --Khaki-50: #917312;
110
- --Khaki-60: #ad8d2d;
111
- --Khaki-70: #E0BA4D;
112
- --Khaki-80: #F0CF78;
113
- --Khaki-90: #fae3aa;
114
- --Khaki-95: #fff2d9;
115
- --Khaki-98: #fff8eb;
116
- --Khaki-99: #fffefb;
117
- --Khaki-100: #ffffff;
118
-
119
- // Olive
120
- --Olive-0: #000000;
121
- --Olive-5: #0b1400;
122
- --Olive-10: #131f00;
123
- --Olive-20: #243600;
124
- --Olive-30: #374e0b;
125
- --Olive-40: #4e6622;
126
- --Olive-50: #667f39;
127
- --Olive-60: #7f9a50;
128
- --Olive-70: #99b567;
129
- --Olive-80: #b4d180;
130
- --Olive-90: #d0ed99;
131
- --Olive-95: #def2b8;
132
- --Olive-98: #f1ffd2;
133
- --Olive-99: #f9ffe6;
134
- --Olive-100: #ffffff;
135
-
136
- // Teal
137
- --Teal-0: #000000;
138
- --Teal-5: #00150f;
139
- --Teal-10: #002018;
140
- --Teal-20: #00382c;
141
- --Teal-30: #005140;
142
- --Teal-40: #006b56;
143
- --Teal-50: #00876d;
144
- --Teal-60: #21B38F;
145
- --Teal-70: #51bda0;
146
- --Teal-80: #6fd9bb;
147
- --Teal-90: #98f4d7;
148
- --Teal-95: #C4F5E4;
149
- --Teal-98: #E4FCF2;
150
- --Teal-99: #f3fff9;
151
- --Teal-100: #ffffff;
152
-
153
- // Cobalt
154
- --Cobalt-0: #000000;
155
- --Cobalt-5: #000449;
156
- --Cobalt-10: #000767;
157
- --Cobalt-20: #182282;
158
- --Cobalt-30: #323c99;
159
- --Cobalt-40: #323c99;
160
- --Cobalt-50: #646ece;
161
- --Cobalt-60: #7e88ea;
162
- --Cobalt-70: #9ba4ff;
163
- --Cobalt-80: #bdc2ff;
164
- --Cobalt-90: #dfe0ff;
165
- --Cobalt-95: #f1efff;
166
- --Cobalt-98: #fbf8ff;
167
- --Cobalt-99: #fffbff;
168
- --Cobalt-100: #ffffff;
169
-
170
- // Berry_Pink
171
- --Berry-Pink-0: #000000;
172
- --Berry-Pink-5: #2b0010;
173
- --Berry-Pink-10: #3f001a;
174
- --Berry-Pink-20: #610c2e;
175
- --Berry-Pink-30: #7e2544;
176
- --Berry-Pink-40: #9d3d5c;
177
- --Berry-Pink-50: #bb5574;
178
- --Berry-Pink-60: #db6e8e;
179
- --Berry-Pink-70: #fa88a8;
180
- --Berry-Pink-80: #ffb1c4;
181
- --Berry-Pink-90: #ffd9e0;
182
- --Berry-Pink-95: #ffecef;
183
- --Berry-Pink-98: #fff8f8;
184
- --Berry-Pink-99: #fffbff;
185
- --Berry-Pink-100: #ffffff;
186
-
187
- // Lake_Blue
188
- --Lake-Blue-0: #000000;
189
- --Lake-Blue-5: #001224;
190
- --Lake-Blue-10: #001d35;
191
- --Lake-Blue-20: #003256;
192
- --Lake-Blue-30: #00497a;
193
- --Lake-Blue-40: #266296;
194
- --Lake-Blue-50: #447bb0;
195
- --Lake-Blue-60: #5f95cc;
196
- --Lake-Blue-70: #7aafe8;
197
- --Lake-Blue-80: #9ccaff;
198
- --Lake-Blue-90: #d0e4ff;
199
- --Lake-Blue-95: #e9f1ff;
200
- --Lake-Blue-98: #f8f9ff;
201
- --Lake-Blue-99: #fdfcff;
202
- --Lake-Blue-100: #ffffff;
203
-
204
- // Plum_Purple
205
- --Plum-Purple-0: #000000;
206
- --Plum-Purple-5: #2b001c;
207
- --Plum-Purple-10: #3f0029;
208
- --Plum-Purple-20: #610c43;
209
- --Plum-Purple-30: #7e255f;
210
- --Plum-Purple-40: #9d3d7b;
211
- --Plum-Purple-50: #bb5597;
212
- --Plum-Purple-60: #db6eb5;
213
- --Plum-Purple-70: #fa88d2;
214
- --Plum-Purple-80: #ffb1e4;
215
- --Plum-Purple-90: #ffd9f2;
216
- --Plum-Purple-95: #ffecf8;
217
- --Plum-Purple-98: #fff8fd;
218
- --Plum-Purple-99: #fffbfe;
219
- --Plum-Purple-100: #ffffff;
220
-
221
- // Opacity
222
- // On Surface
223
- --Opacity-On-Surface-10: #F0EFED;
224
- --Opacity-On-Surface-20: #E8E6E3;
225
- --Opacity-On-Surface-30: #DFDCD8;
226
- --Opacity-On-Surface-40: #D6D2CD;
227
-
228
- // White
229
- --Opacity-White-1: #ffffff03;
230
- --Opacity-White-3: #ffffff08;
231
- --Opacity-White-5: #ffffff0d;
232
- --Opacity-White-8: #ffffff14;
233
- --Opacity-White-12: #ffffff1f;
234
- --Opacity-White-16: #ffffff29;
235
- --Opacity-White-20: #ffffff33;
236
- --Opacity-White-30: #ffffff4d;
237
- --Opacity-White-40: #ffffff66;
238
- --Opacity-White-50: #ffffff80;
239
- --Opacity-White-60: #ffffff99;
240
- --Opacity-White-70: #ffffffb2;
241
- --Opacity-White-80: #ffffffcc;
242
- --Opacity-White-90: #ffffffe5;
243
- --Opacity-White-95: #fffffff2;
244
- --Opacity-White-100: #ffffff;
245
-
246
- // Black
247
- --Opacity-Black-1: #00000003;
248
- --Opacity-Black-3: #00000008;
249
- --Opacity-Black-5: #0000000d;
250
- --Opacity-Black-8: #00000014;
251
- --Opacity-Black-12: #0000001f;
252
- --Opacity-Black-16: #00000029;
253
- --Opacity-Black-20: #00000033;
254
- --Opacity-Black-30: #0000004d;
255
- --Opacity-Black-40: #00000066;
256
- --Opacity-Black-50: #00000080;
257
- --Opacity-Black-60: #00000099;
258
- --Opacity-Black-70: #000000b2;
259
- --Opacity-Black-80: #000000cc;
260
- --Opacity-Black-90: #000000e5;
261
- --Opacity-Black-95: #000000f2;
262
- --Opacity-Black-100: #000000;
263
- }
264
- }