myshell-react-lib 0.2.45 → 0.3.0

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-dark.scss DELETED
@@ -1,332 +0,0 @@
1
- @import './new-tokens.scss';
2
-
3
- @layer base {
4
- .dark {
5
- // Colors Background Normal Primary
6
- --Colors-Background-Normal-Primary-Default: var(--Neutral-Variant-10);
7
- --Colors-Background-Normal-Primary-Hover: var(--Neutral-Variant-20);
8
- --Colors-Background-Normal-Primary-Active: var(--Neutral-Variant-30);
9
- --Colors-Background-Normal-Primary-Alt: var(--Neutral-Variant-10);
10
-
11
- // Colors Background Normal Secondary
12
- --Colors-Background-Normal-Secondary-Default: var(--Neutral-Variant-20);
13
- --Colors-Background-Normal-Secondary-Alt: var(--Neutral-Variant-20);
14
- --Colors-Background-Normal-Secondary-Hover: var(--Neutral-Variant-30);
15
- --Colors-Background-Normal-Secondary-Active: var(--Neutral-Variant-40);
16
-
17
- // Colors Background Normal Tertiary
18
- --Colors-Background-Normal-Tertiary-Default: var(--Neutral-Variant-30);
19
- --Colors-Background-Normal-Tertiary-Hover: var(--Neutral-Variant-40);
20
- --Colors-Background-Normal-Tertiary-Active: var(--Neutral-Variant-50);
21
-
22
- // Colors Background Neutral Primary
23
- --Colors-Background-Neutral-Primary-Default: var(--Neutral-Variant-5);
24
- --Colors-Background-Neutral-Primary-Hover: var(--Neutral-Variant-10);
25
- --Colors-Background-Neutral-Primary-Active: var(--Neutral-Variant-20);
26
-
27
- // Colors Background Neutral Secondary
28
- --Colors-Background-Neutral-Secondary-Default: var(--Neutral-Variant-10);
29
- --Colors-Background-Neutral-Secondary-Hover: var(--Neutral-Variant-20);
30
- --Colors-Background-Neutral-Secondary-Active: var(--Neutral-Variant-30);
31
-
32
- // Colors Background Neutral Tertiary
33
- --Colors-Background-Neutral-Tertiary-Default: var(--Neutral-Variant-30);
34
- --Colors-Background-Neutral-Tertiary-Hover: var(--Neutral-Variant-40);
35
- --Colors-Background-Neutral-Tertiary-Active: var(--Neutral-Variant-50);
36
-
37
- // Colors Background Neutral On Surface
38
- --Colors-Background-Neutral-On-Surface-Default: var(--Opacity-White-3);
39
- --Colors-Background-Neutral-On-Surface-Hover: var(--Opacity-White-5);
40
- --Colors-Background-Neutral-On-Surface-Active: var(--Opacity-White-8);
41
- --Colors-Background-Neutral-On-Surface-Disabled: var(--Opacity-White-3);
42
- --Colors-Background-Neutral-On-Surface-Alt: var(--Opacity-White-12);
43
-
44
- // Colors Background Utilities
45
- --Colors-Background-Utilities-Bolder: var(--Neutral-Variant-99);
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-Variant-99);
49
- --Colors-Background-Utilities-Static-Black: var(--Neutral-Variant-5);
50
- --Colors-Background-Utilities-Modal:var(--Neutral-Variant-10);
51
-
52
- // Colors Background Brand
53
- --Colors-Background-Brand-Default: var(--Pure-Mauve-20);
54
- --Colors-Background-Brand-Alt: var(--Pure-Mauve-50);
55
- --Colors-Background-Brand-Subtle: var(--Pure-Mauve-10);
56
- --Colors-Background-Brand-Hover: var(--Pure-Mauve-30);
57
- --Colors-Background-Brand-Active: var(--Pure-Mauve-40);
58
- --Colors-Background-Brand-Bolder: var(--Pure-Mauve-80);
59
-
60
- // Colors Background Critical
61
- --Colors-Background-Critical-Default: var(--Terracotta-Variant-20);
62
- --Colors-Background-Critical-Alt: var(--Terracotta-50);
63
- --Colors-Background-Critical-Subtle: var(--Terracotta-Variant-10);
64
- --Colors-Background-Critical-Hover: var(--Terracotta-Variant-30);
65
- --Colors-Background-Critical-Active: var(--Terracotta-Variant-40);
66
- --Colors-Background-Critical-Bolder: var(--Terracotta-80);
67
-
68
- // Colors Background Warning
69
- --Colors-Background-Warning-Default: var(--Khaki-20);
70
- --Colors-Background-Warning-Alt: var(--Khaki-50);
71
- --Colors-Background-Warning-Subtle: var(--Khaki-10);
72
- --Colors-Background-Warning-Hover: var(--Khaki-30);
73
- --Colors-Background-Warning-Active: var(--Khaki-40);
74
- --Colors-Background-Warning-Bolder: var(--Khaki-80);
75
-
76
- // Colors Background Success
77
- --Colors-Background-Success-Default: var(--Teal-20);
78
- --Colors-Background-Success-Alt: var(--Teal-50);
79
- --Colors-Background-Success-Subtle: var(--Teal-10);
80
- --Colors-Background-Success-Hover: var(--Teal-30);
81
- --Colors-Background-Success-Active: var(--Teal-40);
82
- --Colors-Background-Success-Bolder: var(--Teal-80);
83
-
84
- // Colors Background Info
85
- --Colors-Background-Info-Default: var(--Lake-Blue-20);
86
- --Colors-Background-Info-Alt: var(--Lake-Blue-50);
87
- --Colors-Background-Info-Subtle: var(--Lake-Blue-10);
88
- --Colors-Background-Info-Hover: var(--Lake-Blue-30);
89
- --Colors-Background-Info-Active: var(--Lake-Blue-40);
90
- --Colors-Background-Info-Bolder: var(--Lake-Blue-80);
91
-
92
- // Colors Text
93
- --Colors-Text-Default: var(--Neutral-Variant-100);
94
- --Colors-Text-Subtle: var(--Neutral-Variant-90);
95
- --Colors-Text-Subtler: var(--Neutral-Variant-70);
96
- --Colors-Text-Subtlest: var(--Neutral-Variant-50);
97
- --Colors-Text-Disabled: var(--Neutral-Variant-40);
98
- --Colors-Text-Bolder: var(--Neutral-Variant-5);
99
-
100
- // Colors Text Static
101
- --Colors-Text-Static-White: var(--Neutral-Variant-100);
102
- --Colors-Text-Static-Black: var(--Neutral-Variant-5);
103
-
104
- // Colors Text Brand
105
- --Colors-Text-Brand-Subtle: var(--Pure-Mauve-30);
106
- --Colors-Text-Brand-Default: var(--Pure-Mauve-70);
107
- --Colors-Text-Brand-Bolder: var(--Pure-Mauve-90);
108
-
109
- // Colors Text Critical
110
- --Colors-Text-Critical-Subtle: var(--Terracotta-30);
111
- --Colors-Text-Critical-Default: var(--Terracotta-60);
112
- --Colors-Text-Critical-Bolder: var(--Terracotta-90);
113
-
114
- // Colors Text Warning
115
- --Colors-Text-Warning-Subtle: var(--Khaki-30);
116
- --Colors-Text-Warning-Default: var(--Khaki-70);
117
- --Colors-Text-Warning-Bolder: var(--Khaki-90);
118
-
119
- // Colors Text Success
120
- --Colors-Text-Success-Subtle: var(--Teal-30);
121
- --Colors-Text-Success-Default: var(--Teal-60);
122
- --Colors-Text-Success-Bolder: var(--Teal-90);
123
-
124
- // Colors Foreground
125
- --Colors-Foreground-Default: var(--Neutral-Variant-100);
126
- --Colors-Foreground-Subtle: var(--Neutral-Variant-90);
127
- --Colors-Foreground-Subtler: var(--Neutral-Variant-70);
128
- --Colors-Foreground-Subtlest: var(--Neutral-Variant-50);
129
- --Colors-Foreground-Disabled: var(--Neutral-Variant-40);
130
- --Colors-Foreground-Bolder: var(--Neutral-Variant-5);
131
-
132
- // Colors Foreground Static
133
- --Colors-Foreground-Static-White: var(--Neutral-Variant-100);
134
- --Colors-Foreground-Static-Black: var(--Neutral-Variant-5);
135
-
136
- // Colors Foreground Brand
137
- --Colors-Foreground-Brand-Subtle: var(--Pure-Mauve-30);
138
- --Colors-Foreground-Brand-Default: var(--Pure-Mauve-70);
139
- --Colors-Foreground-Brand-Bolder: var(--Pure-Mauve-90);
140
-
141
- // Colors Foreground Critical
142
- --Colors-Foreground-Critical-Subtle: var(--Terracotta-30);
143
- --Colors-Foreground-Critical-Default: var(--Terracotta-60);
144
- --Colors-Foreground-Critical-Bolder: var(--Terracotta-90);
145
-
146
- // Colors Foreground Warning
147
- --Colors-Foreground-Warning-Subtle: var(--Khaki-30);
148
- --Colors-Foreground-Warning-Default: var(--Khaki-70);
149
- --Colors-Foreground-Warning-Bolder: var(--Khaki-90);
150
-
151
- // Colors Foreground Success
152
- --Colors-Foreground-Success-Subtle: var(--Teal-30);
153
- --Colors-Foreground-Success-Default: var(--Teal-60);
154
- --Colors-Foreground-Success-Bolder: var(--Teal-90);
155
-
156
- // Colors Border
157
- --Colors-Border-Default: var(--Neutral-Variant-30);
158
- --Colors-Border-Alt: var(--Neutral-Variant-40);
159
- --Colors-Border-Hover: var(--Neutral-Variant-40);
160
- --Colors-Border-Active: var(--Neutral-Variant-50);
161
- --Colors-Border-Bolder: var(--Neutral-Variant-100);
162
- --Colors-Border-Brand: var(--Pure-Mauve-60);
163
- --Colors-Border-Brand_alt: var(--Pure-Mauve-40);
164
- --Colors-Border-Critical: var(--Terracotta-60);
165
- --Colors-Border-Success: var(--Teal-60);
166
- --Colors-Border-Warning: var(--Khaki-60);
167
- --Colors-Border-Opaque: var(--Opacity-White-8);
168
- --Colors-Border-Static: var(--Neutral-Variant-95);
169
-
170
- // Colors Alpha
171
- --Colors-Alpha-White-1: var(--Opacity-Black-1);
172
- --Colors-Alpha-White-3: var(--Opacity-Black-3);
173
- --Colors-Alpha-White-5: var(--Opacity-Black-5);
174
- --Colors-Alpha-White-8: var(--Opacity-Black-8);
175
- --Colors-Alpha-White-12: var(--Opacity-Black-12);
176
- --Colors-Alpha-White-16: var(--Opacity-Black-16);
177
- --Colors-Alpha-White-20: var(--Opacity-Black-20);
178
- --Colors-Alpha-White-30: var(--Opacity-Black-30);
179
- --Colors-Alpha-White-40: var(--Opacity-Black-40);
180
- --Colors-Alpha-White-50: var(--Opacity-Black-50);
181
- --Colors-Alpha-White-60: var(--Opacity-Black-60);
182
- --Colors-Alpha-White-70: var(--Opacity-Black-70);
183
- --Colors-Alpha-White-80: var(--Opacity-Black-80);
184
- --Colors-Alpha-White-90: var(--Opacity-Black-90);
185
- --Colors-Alpha-White-95: var(--Opacity-Black-95);
186
- --Colors-Alpha-White-100: var(--Opacity-Black-100);
187
- --Colors-Alpha-Black-1: var(--Opacity-White-1);
188
- --Colors-Alpha-Black-3: var(--Opacity-White-3);
189
- --Colors-Alpha-Black-5: var(--Opacity-White-5);
190
- --Colors-Alpha-Black-8: var(--Opacity-White-8);
191
- --Colors-Alpha-Black-12: var(--Opacity-White-12);
192
- --Colors-Alpha-Black-16: var(--Opacity-White-16);
193
- --Colors-Alpha-Black-20: var(--Opacity-White-20);
194
- --Colors-Alpha-Black-30: var(--Opacity-White-30);
195
- --Colors-Alpha-Black-40: var(--Opacity-White-40);
196
- --Colors-Alpha-Black-50: var(--Opacity-White-50);
197
- --Colors-Alpha-Black-60: var(--Opacity-White-60);
198
- --Colors-Alpha-Black-70: var(--Opacity-White-70);
199
- --Colors-Alpha-Black-80: var(--Opacity-White-80);
200
- --Colors-Alpha-Black-90: var(--Opacity-White-90);
201
- --Colors-Alpha-Black-95: var(--Opacity-White-95);
202
- --Colors-Alpha-Black-100: var(--Opacity-White-100);
203
-
204
- // Colors beta (与亮色模式一套token值)
205
-
206
- // Colors Utility Gray
207
- --Colors-Utility-Gray-5: var(--Neutral-Variant-10);
208
- --Colors-Utility-Gray-10: var(--Neutral-Variant-20);
209
- --Colors-Utility-Gray-20: var(--Neutral-Variant-30);
210
- --Colors-Utility-Gray-30: var(--Neutral-Variant-40);
211
- --Colors-Utility-Gray-40: var(--Neutral-Variant-50);
212
- --Colors-Utility-Gray-50: var(--Neutral-Variant-60);
213
- --Colors-Utility-Gray-60: var(--Neutral-Variant-70);
214
- --Colors-Utility-Gray-70: var(--Neutral-Variant-80);
215
- --Colors-Utility-Gray-80: var(--Neutral-Variant-90);
216
-
217
- // Colors Utility Olive
218
- --Colors-Utility-Olive-5: var(--Olive-10);
219
- --Colors-Utility-Olive-10: var(--Olive-20);
220
- --Colors-Utility-Olive-20: var(--Olive-30);
221
- --Colors-Utility-Olive-30: var(--Olive-40);
222
- --Colors-Utility-Olive-40: var(--Olive-50);
223
- --Colors-Utility-Olive-50: var(--Olive-60);
224
- --Colors-Utility-Olive-60: var(--Olive-70);
225
- --Colors-Utility-Olive-70: var(--Olive-80);
226
- --Colors-Utility-Olive-80: var(--Olive-90);
227
-
228
- // Colors Utility Teal
229
- --Colors-Utility-Teal-5: var(--Teal-10);
230
- --Colors-Utility-Teal-10: var(--Teal-20);
231
- --Colors-Utility-Teal-20: var(--Teal-30);
232
- --Colors-Utility-Teal-30: var(--Teal-40);
233
- --Colors-Utility-Teal-40: var(--Teal-50);
234
- --Colors-Utility-Teal-50: var(--Teal-60);
235
- --Colors-Utility-Teal-60: var(--Teal-70);
236
- --Colors-Utility-Teal-70: var(--Teal-80);
237
- --Colors-Utility-Teal-80: var(--Teal-90);
238
-
239
- // Colors Utility Lake Blue
240
- --Colors-Utility-Lake-Blue-5: var(--Lake-Blue-10);
241
- --Colors-Utility-Lake-Blue-10: var(--Lake-Blue-20);
242
- --Colors-Utility-Lake-Blue-20: var(--Lake-Blue-30);
243
- --Colors-Utility-Lake-Blue-30: var(--Lake-Blue-40);
244
- --Colors-Utility-Lake-Blue-40: var(--Lake-Blue-50);
245
- --Colors-Utility-Lake-Blue-50: var(--Lake-Blue-60);
246
- --Colors-Utility-Lake-Blue-60: var(--Lake-Blue-70);
247
- --Colors-Utility-Lake-Blue-70: var(--Lake-Blue-80);
248
- --Colors-Utility-Lake-Blue-80: var(--Lake-Blue-90);
249
-
250
- // Colors Utility Cobalt
251
- --Colors-Utility-Cobalt-5: var(--Cobalt-10);
252
- --Colors-Utility-Cobalt-10: var(--Cobalt-20);
253
- --Colors-Utility-Cobalt-20: var(--Cobalt-30);
254
- --Colors-Utility-Cobalt-30: var(--Cobalt-40);
255
- --Colors-Utility-Cobalt-40: var(--Cobalt-50);
256
- --Colors-Utility-Cobalt-50: var(--Cobalt-60);
257
- --Colors-Utility-Cobalt-60: var(--Cobalt-70);
258
- --Colors-Utility-Cobalt-70: var(--Cobalt-80);
259
- --Colors-Utility-Cobalt-80: var(--Cobalt-90);
260
-
261
- // Colors Utility Berry Pink
262
- --Colors-Utility-Berry-Pink-5: var(--Berry-Pink-10);
263
- --Colors-Utility-Berry-Pink-10: var(--Berry-Pink-20);
264
- --Colors-Utility-Berry-Pink-20: var(--Berry-Pink-30);
265
- --Colors-Utility-Berry-Pink-30: var(--Berry-Pink-40);
266
- --Colors-Utility-Berry-Pink-40: var(--Berry-Pink-50);
267
- --Colors-Utility-Berry-Pink-50: var(--Berry-Pink-60);
268
- --Colors-Utility-Berry-Pink-60: var(--Berry-Pink-70);
269
- --Colors-Utility-Berry-Pink-70: var(--Berry-Pink-80);
270
- --Colors-Utility-Berry-Pink-80: var(--Berry-Pink-90);
271
-
272
- // Colors Utility Terracotta
273
- --Colors-Utility-Terracotta-5: var(--Terracotta-10);
274
- --Colors-Utility-Terracotta-10: var(--Terracotta-20);
275
- --Colors-Utility-Terracotta-20: var(--Terracotta-30);
276
- --Colors-Utility-Terracotta-30: var(--Terracotta-40);
277
- --Colors-Utility-Terracotta-40: var(--Terracotta-50);
278
- --Colors-Utility-Terracotta-50: var(--Terracotta-60);
279
- --Colors-Utility-Terracotta-60: var(--Terracotta-70);
280
- --Colors-Utility-Terracotta-70: var(--Terracotta-80);
281
- --Colors-Utility-Terracotta-80: var(--Terracotta-90);
282
-
283
- // Colors Utility Ember
284
- --Colors-Utility-Ember-5: var(--Ember-10);
285
- --Colors-Utility-Ember-10: var(--Ember-20);
286
- --Colors-Utility-Ember-20: var(--Ember-30);
287
- --Colors-Utility-Ember-30: var(--Ember-40);
288
- --Colors-Utility-Ember-40: var(--Ember-50);
289
- --Colors-Utility-Ember-50: var(--Ember-60);
290
- --Colors-Utility-Ember-60: var(--Ember-70);
291
- --Colors-Utility-Ember-70: var(--Ember-80);
292
- --Colors-Utility-Ember-80: var(--Ember-90);
293
-
294
- // Colors Utility Khaki
295
- --Colors-Utility-Khaki-5: var(--Khaki-10);
296
- --Colors-Utility-Khaki-10: var(--Khaki-20);
297
- --Colors-Utility-Khaki-20: var(--Khaki-30);
298
- --Colors-Utility-Khaki-30: var(--Khaki-40);
299
- --Colors-Utility-Khaki-40: var(--Khaki-50);
300
- --Colors-Utility-Khaki-50: var(--Khaki-60);
301
- --Colors-Utility-Khaki-60: var(--Khaki-70);
302
- --Colors-Utility-Khaki-70: var(--Khaki-80);
303
- --Colors-Utility-Khaki-80: var(--Khaki-90);
304
-
305
- // Colors Utility Purple
306
- --Colors-Utility-Purple-5: var(--Pure-Mauve-10);
307
- --Colors-Utility-Purple-10: var(--Pure-Mauve-20);
308
- --Colors-Utility-Purple-20: var(--Pure-Mauve-30);
309
- --Colors-Utility-Purple-30: var(--Pure-Mauve-40);
310
- --Colors-Utility-Purple-40: var(--Pure-Mauve-50);
311
- --Colors-Utility-Purple-50: var(--Pure-Mauve-60);
312
- --Colors-Utility-Purple-60: var(--Pure-Mauve-70);
313
- --Colors-Utility-Purple-70: var(--Pure-Mauve-80);
314
- --Colors-Utility-Purple-80: var(--Pure-Mauve-90);
315
-
316
- // Colors Utility Plum Purple
317
- --Colors-Utility-Plum-Purple-5: var(--Plum-Purple-10);
318
- --Colors-Utility-Plum-Purple-10: var(--Plum-Purple-20);
319
- --Colors-Utility-Plum-Purple-20: var(--Plum-Purple-30);
320
- --Colors-Utility-Plum-Purple-30: var(--Plum-Purple-40);
321
- --Colors-Utility-Plum-Purple-40: var(--Plum-Purple-50);
322
- --Colors-Utility-Plum-Purple-50: var(--Plum-Purple-60);
323
- --Colors-Utility-Plum-Purple-60: var(--Plum-Purple-70);
324
- --Colors-Utility-Plum-Purple-70: var(--Plum-Purple-80);
325
- --Colors-Utility-Plum-Purple-80: var(--Plum-Purple-90);
326
-
327
- --Colors-FaceTime-White: var(--Opacity-Black-20);
328
- --Colors-FaceTime-Black: var(--Opacity-White-20);
329
-
330
-
331
- }
332
- }