myshell-react-lib 0.1.16 → 0.1.19

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