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-light-v2.scss ADDED
@@ -0,0 +1,443 @@
1
+ @import './new-tokens-v2.scss';
2
+
3
+ @layer base {
4
+ :root {
5
+
6
+ // Colors Text
7
+ --Colors-Text-Default: var(--Gray-900);
8
+ --Colors-Text-Subtle: var(--Gray-700);
9
+ --Colors-Text-Subtler: var(--Gray-600);
10
+ --Colors-Text-Subtlest: var(--Gray-500);
11
+ --Colors-Text-Disabled: var(--Gray-400);
12
+ --Colors-Text-Bolder: var(--Gray-50);
13
+ --Colors-Text-Static-White: var(--Basic-White);
14
+ --Colors-Text-Static-Black: var(--Gray-900);
15
+ --Colors-Text-Brand-Subtle: var(--Brand-400);
16
+ --Colors-Text-Brand-Default: var(--Brand-500);
17
+ --Colors-Text-Brand-Bolder: var(--Brand-600);
18
+ --Colors-Text-Critical-Subtle: var(--Error-400);
19
+ --Colors-Text-Critical-Default: var(--Error-500);
20
+ --Colors-Text-Critical-Bolder: var(--Error-600);
21
+ --Colors-Text-Warning-Subtle: var(--Warning-400);
22
+ --Colors-Text-Warning-Default: var(--Warning-500);
23
+ --Colors-Text-Warning-Bolder: var(--Warning-600);
24
+ --Colors-Text-Success-Subtle: var(--Success-400);
25
+ --Colors-Text-Success-Default: var(--Success-500);
26
+ --Colors-Text-Success-Bolder: var(--Success-600);
27
+
28
+ // Colors Foreground
29
+ --Colors-Foreground-Default: var(--Gray-900);
30
+ --Colors-Foreground-Subtle: var(--Gray-700);
31
+ --Colors-Foreground-Subtler: var(--Gray-600);
32
+ --Colors-Foreground-Subtlest: var(--Gray-500);
33
+ --Colors-Foreground-Disabled: var(--Gray-400);
34
+ --Colors-Foreground-Bolder: var(--Gray-50);
35
+ --Colors-Foreground-Static-White: var(--Basic-White);
36
+ --Colors-Foreground-Static-Black: var(--Gray-900);
37
+ --Colors-Foreground-Brand-Subtle: var(--Brand-400);
38
+ --Colors-Foreground-Brand-Default: var(--Brand-500);
39
+ --Colors-Foreground-Brand-Bolder: var(--Brand-600);
40
+ --Colors-Foreground-Critical-Subtle: var(--Error-400);
41
+ --Colors-Foreground-Critical-Default: var(--Error-500);
42
+ --Colors-Foreground-Critical-Bolder: var(--Error-600);
43
+ --Colors-Foreground-Warning-Subtle: var(--Warning-400);
44
+ --Colors-Foreground-Warning-Default: var(--Warning-500);
45
+ --Colors-Foreground-Warning-Bolder: var(--Warning-600);
46
+ --Colors-Foreground-Success-Subtle: var(--Success-400);
47
+ --Colors-Foreground-Success-Default: var(--Success-500);
48
+ --Colors-Foreground-Success-Bolder: var(--Success-600);
49
+
50
+ // Colors Background
51
+ --Colors-Background-Surface-Default: var(--Basic-White);
52
+ --Colors-Background-Surface-Subtle: var(--Gray-200);
53
+ --Colors-Background-Surface-Muted: var(--Gray-300);
54
+ --Colors-Background-Normal-Primary-Default: var(--Gray-25);
55
+ --Colors-Background-Normal-Primary-Hover: var(--Gray-50);
56
+ --Colors-Background-Normal-Primary-Active: var(--Gray-100);
57
+ --Colors-Background-Normal-Secondary-Default: var(--Gray-100);
58
+ --Colors-Background-Normal-Secondary-Alt: var(--Gray-25);
59
+ --Colors-Background-Normal-Secondary-Hover: var(--Gray-300);
60
+ --Colors-Background-Normal-Secondary-Active: var(--Gray-200);
61
+ --Colors-Background-Normal-Tertiary-Default: var(--Gray-300);
62
+ --Colors-Background-Normal-Tertiary-Hover: var(--Gray-400);
63
+ --Colors-Background-Normal-Tertiary-Active: var(--Gray-500);
64
+ --Colors-Background-Neutral-Primary-Default: var(--Gray-50);
65
+ --Colors-Background-Neutral-Primary-Hover: var(--Gray-200);
66
+ --Colors-Background-Neutral-Primary-Active: var(--Gray-300);
67
+ --Colors-Background-Neutral-Secondary-Default: var(--Basic-White);
68
+ --Colors-Background-Neutral-Secondary-Hover: var(--Gray-50);
69
+ --Colors-Background-Neutral-Secondary-Active: var(--Gray-100);
70
+ --Colors-Background-Neutral-Tertiary-Default: var(--Gray-200);
71
+ --Colors-Background-Neutral-Tertiary-Hover: var(--Gray-300);
72
+ --Colors-Background-Neutral-Tertiary-Active: var(--Gray-400);
73
+ --Colors-Background-Utilities-Bolder: var(--Gray-950);
74
+ --Colors-Background-Utilities-None: var(--Basic-None);
75
+ --Colors-Background-Utilities-Overlay: var(--Opacity-Black-70);
76
+ --Colors-Background-Utilities-Static-White: var(--Basic-White);
77
+ --Colors-Background-Utilities-Static-Black: var(--Gray-950);
78
+ --Colors-Background-Utilities-Modal: var(--Basic-White);
79
+ --Colors-Background-Brand-Default: var(--Brand-50);
80
+ --Colors-Background-Brand-Alt: var(--Brand-500);
81
+ --Colors-Background-Brand-Subtle: var(--Brand-100);
82
+ --Colors-Background-Brand-Hover: var(--Brand-100);
83
+ --Colors-Background-Brand-Active: var(--Brand-200);
84
+ --Colors-Background-Brand-Bolder: var(--Brand-600);
85
+ --Colors-Background-Critical-Default: var(--Error-50);
86
+ --Colors-Background-Critical-Alt: var(--Error-500);
87
+ --Colors-Background-Critical-Subtle: var(--Error-100);
88
+ --Colors-Background-Critical-Hover: var(--Error-100);
89
+ --Colors-Background-Critical-Active: var(--Error-200);
90
+ --Colors-Background-Critical-Bolder: var(--Error-600);
91
+ --Colors-Background-Warning-Default: var(--Warning-50);
92
+ --Colors-Background-Warning-Alt: var(--Warning-500);
93
+ --Colors-Background-Warning-Subtle: var(--Warning-100);
94
+ --Colors-Background-Warning-Hover: var(--Warning-100);
95
+ --Colors-Background-Warning-Active: var(--Warning-200);
96
+ --Colors-Background-Warning-Bolder: var(--Warning-600);
97
+ --Colors-Background-Success-Default: var(--Success-50);
98
+ --Colors-Background-Success-Alt: var(--Success-500);
99
+ --Colors-Background-Success-Subtle: var(--Success-100);
100
+ --Colors-Background-Success-Hover: var(--Success-100);
101
+ --Colors-Background-Success-Active: var(--Success-200);
102
+ --Colors-Background-Success-Bolder: var(--Success-600);
103
+ --Colors-Background-Info-Default: var(--Dodger-Blue-50);
104
+ --Colors-Background-Info-Alt: var(--Dodger-Blue-500);
105
+ --Colors-Background-Info-Subtle: var(--Dodger-Blue-100);
106
+ --Colors-Background-Info-Hover: var(--Dodger-Blue-100);
107
+ --Colors-Background-Info-Active: var(--Dodger-Blue-200);
108
+ --Colors-Background-Info-Bolder: var(--Dodger-Blue-600);
109
+ --Colors-Background-Soft: var(--Gray-50);
110
+ --Colors-Background-Clean: var(--Gray-25);
111
+
112
+ // Colors Border
113
+ --Colors-Border-Default: var(--Gray-200);
114
+ --Colors-Border-Alt: var(--Gray-300);
115
+ --Colors-Border-Hover: var(--Gray-300);
116
+ --Colors-Border-Active: var(--Gray-400);
117
+ --Colors-Border-Bolder: var(--Gray-900);
118
+ --Colors-Border-Brand: var(--Brand-500);
119
+ --Colors-Border-Brand-alt: var(--Brand-200);
120
+ --Colors-Border-Critical: var(--Error-500);
121
+ --Colors-Border-Success: var(--Success-500);
122
+ --Colors-Border-Warning: var(--Warning-500);
123
+ --Colors-Border-Opaque: var(--Opacity-White-1);
124
+ --Colors-Border-Static: var(--Gray-200);
125
+
126
+ // Colors Alpha
127
+ --Colors-Alpha-White-1: var(--Opacity-White-1);
128
+ --Colors-Alpha-White-3: var(--Opacity-White-3);
129
+ --Colors-Alpha-White-5: var(--Opacity-White-5);
130
+ --Colors-Alpha-White-8: var(--Opacity-White-8);
131
+ --Colors-Alpha-White-12: var(--Opacity-White-12);
132
+ --Colors-Alpha-White-16: var(--Opacity-White-16);
133
+ --Colors-Alpha-White-20: var(--Opacity-White-20);
134
+ --Colors-Alpha-White-30: var(--Opacity-White-30);
135
+ --Colors-Alpha-White-40: var(--Opacity-White-40);
136
+ --Colors-Alpha-White-50: var(--Opacity-White-50);
137
+ --Colors-Alpha-White-60: var(--Opacity-White-60);
138
+ --Colors-Alpha-White-70: var(--Opacity-White-70);
139
+ --Colors-Alpha-White-80: var(--Opacity-White-80);
140
+ --Colors-Alpha-White-90: var(--Opacity-White-90);
141
+ --Colors-Alpha-White-95: var(--Opacity-White-95);
142
+ --Colors-Alpha-White-100: var(--Opacity-White-100);
143
+ --Colors-Alpha-Black-1: var(--Opacity-Black-1);
144
+ --Colors-Alpha-Black-3: var(--Opacity-Black-3);
145
+ --Colors-Alpha-Black-5: var(--Opacity-Black-5);
146
+ --Colors-Alpha-Black-8: var(--Opacity-Black-8);
147
+ --Colors-Alpha-Black-12: var(--Opacity-Black-12);
148
+ --Colors-Alpha-Black-16: var(--Opacity-Black-16);
149
+ --Colors-Alpha-Black-20: var(--Opacity-Black-20);
150
+ --Colors-Alpha-Black-30: var(--Opacity-Black-30);
151
+ --Colors-Alpha-Black-40: var(--Opacity-Black-40);
152
+ --Colors-Alpha-Black-50: var(--Opacity-Black-50);
153
+ --Colors-Alpha-Black-60: var(--Opacity-Black-60);
154
+ --Colors-Alpha-Black-70: var(--Opacity-Black-70);
155
+ --Colors-Alpha-Black-80: var(--Opacity-Black-80);
156
+ --Colors-Alpha-Black-90: var(--Opacity-Black-90);
157
+ --Colors-Alpha-Black-95: var(--Opacity-Black-95);
158
+ --Colors-Alpha-Black-100: var(--Opacity-Black-100);
159
+
160
+ // Colors Beta
161
+ --Colors-Beta-White-1: var(--Opacity-White-1);
162
+ --Colors-Beta-White-3: var(--Opacity-White-3);
163
+ --Colors-Beta-White-5: var(--Opacity-White-5);
164
+ --Colors-Beta-White-8: var(--Opacity-White-8);
165
+ --Colors-Beta-White-12: var(--Opacity-White-12);
166
+ --Colors-Beta-White-16: var(--Opacity-White-16);
167
+ --Colors-Beta-White-20: var(--Opacity-White-20);
168
+ --Colors-Beta-White-30: var(--Opacity-White-30);
169
+ --Colors-Beta-White-40: var(--Opacity-White-40);
170
+ --Colors-Beta-White-50: var(--Opacity-White-50);
171
+ --Colors-Beta-White-60: var(--Opacity-White-60);
172
+ --Colors-Beta-White-70: var(--Opacity-White-70);
173
+ --Colors-Beta-White-80: var(--Opacity-White-80);
174
+ --Colors-Beta-White-90: var(--Opacity-White-90);
175
+ --Colors-Beta-White-95: var(--Opacity-White-95);
176
+ --Colors-Beta-White-100: var(--Opacity-White-100);
177
+ --Colors-Beta-Black-1: var(--Opacity-Black-1);
178
+ --Colors-Beta-Black-3: var(--Opacity-Black-3);
179
+ --Colors-Beta-Black-5: var(--Opacity-Black-5);
180
+ --Colors-Beta-Black-8: var(--Opacity-Black-8);
181
+ --Colors-Beta-Black-12: var(--Opacity-Black-12);
182
+ --Colors-Beta-Black-16: var(--Opacity-Black-16);
183
+ --Colors-Beta-Black-20: var(--Opacity-Black-20);
184
+ --Colors-Beta-Black-30: var(--Opacity-Black-30);
185
+ --Colors-Beta-Black-40: var(--Opacity-Black-40);
186
+ --Colors-Beta-Black-50: var(--Opacity-Black-50);
187
+ --Colors-Beta-Black-60: var(--Opacity-Black-60);
188
+ --Colors-Beta-Black-70: var(--Opacity-Black-70);
189
+ --Colors-Beta-Black-80: var(--Opacity-Black-80);
190
+ --Colors-Beta-Black-90: var(--Opacity-Black-90);
191
+ --Colors-Beta-Black-95: var(--Opacity-Black-95);
192
+ --Colors-Beta-Black-100: var(--Opacity-Black-100);
193
+
194
+ // Colors Marketing
195
+ --Colors-Marketing-Purple-Heart-50: var(--Purple-Heart-50);
196
+ --Colors-Marketing-Purple-Heart-100: var(--Purple-Heart-100);
197
+ --Colors-Marketing-Purple-Heart-200: var(--Purple-Heart-200);
198
+ --Colors-Marketing-Purple-Heart-300: var(--Purple-Heart-300);
199
+ --Colors-Marketing-Purple-Heart-400: var(--Purple-Heart-400);
200
+ --Colors-Marketing-Purple-Heart-500: var(--Purple-Heart-500);
201
+ --Colors-Marketing-Purple-Heart-600: var(--Purple-Heart-600);
202
+ --Colors-Marketing-Purple-Heart-700: var(--Purple-Heart-700);
203
+ --Colors-Marketing-Purple-Heart-800: var(--Purple-Heart-800);
204
+ --Colors-Marketing-Purple-Heart-900: var(--Purple-Heart-900);
205
+ --Colors-Marketing-Purple-Heart-950: var(--Purple-Heart-950);
206
+ --Colors-Marketing-Purple-Heart-1000: var(--Purple-Heart-1000);
207
+ --Colors-Marketing-Purple-Heart-Variant-50: var(--Purple-Heart-Variant-50);
208
+ --Colors-Marketing-Purple-Heart-Variant-100: var(--Purple-Heart-Variant-100);
209
+ --Colors-Marketing-Magenta--Fuchsia-50: var(--Magenta-Fuchsia-50);
210
+ --Colors-Marketing-Magenta--Fuchsia-100: var(--Magenta-Fuchsia-100);
211
+ --Colors-Marketing-Magenta--Fuchsia-200: var(--Magenta-Fuchsia-200);
212
+ --Colors-Marketing-Magenta--Fuchsia-300: var(--Magenta-Fuchsia-300);
213
+ --Colors-Marketing-Magenta--Fuchsia-400: var(--Magenta-Fuchsia-400);
214
+ --Colors-Marketing-Magenta--Fuchsia-500: var(--Magenta-Fuchsia-500);
215
+ --Colors-Marketing-Magenta--Fuchsia-600: var(--Magenta-Fuchsia-600);
216
+ --Colors-Marketing-Magenta--Fuchsia-700: var(--Magenta-Fuchsia-700);
217
+ --Colors-Marketing-Magenta--Fuchsia-800: var(--Magenta-Fuchsia-800);
218
+ --Colors-Marketing-Magenta--Fuchsia-900: var(--Magenta-Fuchsia-900);
219
+ --Colors-Marketing-Magenta--Fuchsia-950: var(--Magenta-Fuchsia-950);
220
+ --Colors-Marketing-Magenta--Fuchsia-1000: var(--Magenta-Fuchsia-1000);
221
+ --Colors-Marketing-Magenta--Fuchsia-Variant-50: var(--Magenta-Fuchsia-Variant-50);
222
+ --Colors-Marketing-Magenta--Fuchsia-Variant-100: var(--Magenta-Fuchsia-Variant-100);
223
+ --Colors-Marketing-Hollywood-Cerise-50: var(--Hollywood-Cerise-50);
224
+ --Colors-Marketing-Hollywood-Cerise-100: var(--Hollywood-Cerise-100);
225
+ --Colors-Marketing-Hollywood-Cerise-200: var(--Hollywood-Cerise-200);
226
+ --Colors-Marketing-Hollywood-Cerise-300: var(--Hollywood-Cerise-300);
227
+ --Colors-Marketing-Hollywood-Cerise-400: var(--Hollywood-Cerise-400);
228
+ --Colors-Marketing-Hollywood-Cerise-500: var(--Hollywood-Cerise-500);
229
+ --Colors-Marketing-Hollywood-Cerise-600: var(--Hollywood-Cerise-600);
230
+ --Colors-Marketing-Hollywood-Cerise-700: var(--Hollywood-Cerise-700);
231
+ --Colors-Marketing-Hollywood-Cerise-800: var(--Hollywood-Cerise-800);
232
+ --Colors-Marketing-Hollywood-Cerise-900: var(--Hollywood-Cerise-900);
233
+ --Colors-Marketing-Hollywood-Cerise-950: var(--Hollywood-Cerise-950);
234
+ --Colors-Marketing-Hollywood-Cerise-1000: var(--Hollywood-Cerise-1000);
235
+ --Colors-Marketing-Hollywood-Cerise-Variant-50: var(--Hollywood-Cerise-Variant-50);
236
+ --Colors-Marketing-Hollywood-Cerise-Variant-100: var(--Hollywood-Cerise-Variant-100);
237
+ --Colors-Marketing-Red-Ribbon-50: var(--Red-Ribbon-50);
238
+ --Colors-Marketing-Red-Ribbon-100: var(--Red-Ribbon-100);
239
+ --Colors-Marketing-Red-Ribbon-200: var(--Red-Ribbon-200);
240
+ --Colors-Marketing-Red-Ribbon-300: var(--Red-Ribbon-300);
241
+ --Colors-Marketing-Red-Ribbon-400: var(--Red-Ribbon-400);
242
+ --Colors-Marketing-Red-Ribbon-500: var(--Red-Ribbon-500);
243
+ --Colors-Marketing-Red-Ribbon-600: var(--Red-Ribbon-600);
244
+ --Colors-Marketing-Red-Ribbon-700: var(--Red-Ribbon-700);
245
+ --Colors-Marketing-Red-Ribbon-800: var(--Red-Ribbon-800);
246
+ --Colors-Marketing-Red-Ribbon-900: var(--Red-Ribbon-900);
247
+ --Colors-Marketing-Red-Ribbon-950: var(--Red-Ribbon-950);
248
+ --Colors-Marketing-Red-Ribbon-1000: var(--Red-Ribbon-1000);
249
+ --Colors-Marketing-Red-Ribbon-Variant-50: var(--Red-Ribbon-Variant-50);
250
+ --Colors-Marketing-Red-Ribbon-Variant-100: var(--Red-Ribbon-Variant-100);
251
+ --Colors-Marketing-Crusta-50: var(--Crusta-50);
252
+ --Colors-Marketing-Crusta-100: var(--Crusta-100);
253
+ --Colors-Marketing-Crusta-200: var(--Crusta-200);
254
+ --Colors-Marketing-Crusta-300: var(--Crusta-300);
255
+ --Colors-Marketing-Crusta-400: var(--Crusta-400);
256
+ --Colors-Marketing-Crusta-500: var(--Crusta-500);
257
+ --Colors-Marketing-Crusta-600: var(--Crusta-600);
258
+ --Colors-Marketing-Crusta-700: var(--Crusta-700);
259
+ --Colors-Marketing-Crusta-800: var(--Crusta-800);
260
+ --Colors-Marketing-Crusta-900: var(--Crusta-900);
261
+ --Colors-Marketing-Crusta-950: var(--Crusta-950);
262
+ --Colors-Marketing-Crusta-1000: var(--Crusta-1000);
263
+ --Colors-Marketing-Crusta-Variant-50: var(--Crusta-Variant-50);
264
+ --Colors-Marketing-Crusta-Variant-100: var(--Crusta-Variant-100);
265
+ --Colors-Marketing-Candlelight-50: var(--Candlelight-50);
266
+ --Colors-Marketing-Candlelight-100: var(--Candlelight-100);
267
+ --Colors-Marketing-Candlelight-200: var(--Candlelight-200);
268
+ --Colors-Marketing-Candlelight-300: var(--Candlelight-300);
269
+ --Colors-Marketing-Candlelight-400: var(--Candlelight-400);
270
+ --Colors-Marketing-Candlelight-500: var(--Candlelight-500);
271
+ --Colors-Marketing-Candlelight-600: var(--Candlelight-600);
272
+ --Colors-Marketing-Candlelight-700: var(--Candlelight-700);
273
+ --Colors-Marketing-Candlelight-800: var(--Candlelight-800);
274
+ --Colors-Marketing-Candlelight-900: var(--Candlelight-900);
275
+ --Colors-Marketing-Candlelight-950: var(--Candlelight-950);
276
+ --Colors-Marketing-Candlelight-1000: var(--Candlelight-1000);
277
+ --Colors-Marketing-Candlelight-Variant-50: var(--Candlelight-Variant-50);
278
+ --Colors-Marketing-Candlelight-Variant-100: var(--Candlelight-Variant-100);
279
+ --Colors-Marketing-Inch-Worm-50: var(--Inch-Worm-50);
280
+ --Colors-Marketing-Inch-Worm-100: var(--Inch-Worm-100);
281
+ --Colors-Marketing-Inch-Worm-200: var(--Inch-Worm-200);
282
+ --Colors-Marketing-Inch-Worm-300: var(--Inch-Worm-300);
283
+ --Colors-Marketing-Inch-Worm-400: var(--Inch-Worm-400);
284
+ --Colors-Marketing-Inch-Worm-500: var(--Inch-Worm-500);
285
+ --Colors-Marketing-Inch-Worm-600: var(--Inch-Worm-600);
286
+ --Colors-Marketing-Inch-Worm-700: var(--Inch-Worm-700);
287
+ --Colors-Marketing-Inch-Worm-800: var(--Inch-Worm-800);
288
+ --Colors-Marketing-Inch-Worm-900: var(--Inch-Worm-900);
289
+ --Colors-Marketing-Inch-Worm-950: var(--Inch-Worm-950);
290
+ --Colors-Marketing-Inch-Worm-1000: var(--Inch-Worm-1000);
291
+ --Colors-Marketing-Inch-Worm-Variant-50: var(--Inch-Worm-Variant-50);
292
+ --Colors-Marketing-Inch-Worm-Variant-100: var(--Inch-Worm-Variant-100);
293
+ --Colors-Marketing-Malachite-50: var(--Malachite-50);
294
+ --Colors-Marketing-Malachite-100: var(--Malachite-100);
295
+ --Colors-Marketing-Malachite-200: var(--Malachite-200);
296
+ --Colors-Marketing-Malachite-300: var(--Malachite-300);
297
+ --Colors-Marketing-Malachite-400: var(--Malachite-400);
298
+ --Colors-Marketing-Malachite-500: var(--Malachite-500);
299
+ --Colors-Marketing-Malachite-600: var(--Malachite-600);
300
+ --Colors-Marketing-Malachite-700: var(--Malachite-700);
301
+ --Colors-Marketing-Malachite-800: var(--Malachite-800);
302
+ --Colors-Marketing-Malachite-900: var(--Malachite-900);
303
+ --Colors-Marketing-Malachite-950: var(--Malachite-950);
304
+ --Colors-Marketing-Malachite-1000: var(--Malachite-1000);
305
+ --Colors-Marketing-Malachite-Variant-50: var(--Malachite-Variant-50);
306
+ --Colors-Marketing-Malachite-Variant-100: var(--Malachite-Variant-100);
307
+ --Colors-Marketing-Turquoise-Blue-50: var(--Turquoise-Blue-50);
308
+ --Colors-Marketing-Turquoise-Blue-100: var(--Turquoise-Blue-100);
309
+ --Colors-Marketing-Turquoise-Blue-200: var(--Turquoise-Blue-200);
310
+ --Colors-Marketing-Turquoise-Blue-300: var(--Turquoise-Blue-300);
311
+ --Colors-Marketing-Turquoise-Blue-400: var(--Turquoise-Blue-400);
312
+ --Colors-Marketing-Turquoise-Blue-500: var(--Turquoise-Blue-500);
313
+ --Colors-Marketing-Turquoise-Blue-600: var(--Turquoise-Blue-600);
314
+ --Colors-Marketing-Turquoise-Blue-700: var(--Turquoise-Blue-700);
315
+ --Colors-Marketing-Turquoise-Blue-800: var(--Turquoise-Blue-800);
316
+ --Colors-Marketing-Turquoise-Blue-900: var(--Turquoise-Blue-900);
317
+ --Colors-Marketing-Turquoise-Blue-950: var(--Turquoise-Blue-950);
318
+ --Colors-Marketing-Turquoise-Blue-1000: var(--Turquoise-Blue-1000);
319
+ --Colors-Marketing-Turquoise-Blue-Variant-50: var(--Turquoise-Blue-Variant-50);
320
+ --Colors-Marketing-Turquoise-Blue-Variant-100: var(--Turquoise-Blue-Variant-100);
321
+ --Colors-Marketing-Dodger-Blue-50: var(--Dodger-Blue-50);
322
+ --Colors-Marketing-Dodger-Blue-100: var(--Dodger-Blue-100);
323
+ --Colors-Marketing-Dodger-Blue-200: var(--Dodger-Blue-200);
324
+ --Colors-Marketing-Dodger-Blue-300: var(--Dodger-Blue-300);
325
+ --Colors-Marketing-Dodger-Blue-400: var(--Dodger-Blue-400);
326
+ --Colors-Marketing-Dodger-Blue-500: var(--Dodger-Blue-500);
327
+ --Colors-Marketing-Dodger-Blue-600: var(--Dodger-Blue-600);
328
+ --Colors-Marketing-Dodger-Blue-700: var(--Dodger-Blue-700);
329
+ --Colors-Marketing-Dodger-Blue-800: var(--Dodger-Blue-800);
330
+ --Colors-Marketing-Dodger-Blue-900: var(--Dodger-Blue-900);
331
+ --Colors-Marketing-Dodger-Blue-950: var(--Dodger-Blue-950);
332
+ --Colors-Marketing-Dodger-Blue-1000: var(--Dodger-Blue-1000);
333
+ --Colors-Marketing-Dodger-Blue-Variant-50: var(--Dodger-Blue-Variant-50);
334
+ --Colors-Marketing-Dodger-Blue-Variant-100: var(--Dodger-Blue-Variant-100);
335
+
336
+ // Colors Utility (v2: map to Gray / Dodger-Blue / Turquoise-Blue / Purple-Heart / Candlelight / Crusta / etc.)
337
+ --Colors-Utility-Gray-5: var(--Gray-25);
338
+ --Colors-Utility-Gray-10: var(--Gray-50);
339
+ --Colors-Utility-Gray-20: var(--Gray-100);
340
+ --Colors-Utility-Gray-30: var(--Gray-200);
341
+ --Colors-Utility-Gray-40: var(--Gray-300);
342
+ --Colors-Utility-Gray-50: var(--Gray-400);
343
+ --Colors-Utility-Gray-60: var(--Gray-500);
344
+ --Colors-Utility-Gray-70: var(--Gray-600);
345
+ --Colors-Utility-Gray-80: var(--Gray-700);
346
+ --Colors-Utility-Olive-5: var(--Malachite-25);
347
+ --Colors-Utility-Olive-10: var(--Malachite-50);
348
+ --Colors-Utility-Olive-20: var(--Malachite-100);
349
+ --Colors-Utility-Olive-30: var(--Malachite-200);
350
+ --Colors-Utility-Olive-40: var(--Malachite-300);
351
+ --Colors-Utility-Olive-50: var(--Malachite-400);
352
+ --Colors-Utility-Olive-60: var(--Malachite-500);
353
+ --Colors-Utility-Olive-70: var(--Malachite-600);
354
+ --Colors-Utility-Olive-80: var(--Malachite-700);
355
+ --Colors-Utility-Teal-5: var(--Turquoise-Blue-25);
356
+ --Colors-Utility-Teal-10: var(--Turquoise-Blue-50);
357
+ --Colors-Utility-Teal-20: var(--Turquoise-Blue-100);
358
+ --Colors-Utility-Teal-30: var(--Turquoise-Blue-200);
359
+ --Colors-Utility-Teal-40: var(--Turquoise-Blue-300);
360
+ --Colors-Utility-Teal-50: var(--Turquoise-Blue-500);
361
+ --Colors-Utility-Teal-60: var(--Turquoise-Blue-600);
362
+ --Colors-Utility-Teal-70: var(--Turquoise-Blue-700);
363
+ --Colors-Utility-Teal-80: var(--Turquoise-Blue-800);
364
+ --Colors-Utility-Lake-Blue-5: var(--Dodger-Blue-25);
365
+ --Colors-Utility-Lake-Blue-10: var(--Dodger-Blue-50);
366
+ --Colors-Utility-Lake-Blue-20: var(--Dodger-Blue-100);
367
+ --Colors-Utility-Lake-Blue-30: var(--Dodger-Blue-200);
368
+ --Colors-Utility-Lake-Blue-40: var(--Dodger-Blue-400);
369
+ --Colors-Utility-Lake-Blue-50: var(--Dodger-Blue-500);
370
+ --Colors-Utility-Lake-Blue-60: var(--Dodger-Blue-600);
371
+ --Colors-Utility-Lake-Blue-70: var(--Dodger-Blue-700);
372
+ --Colors-Utility-Lake-Blue-80: var(--Dodger-Blue-800);
373
+ --Colors-Utility-Cobalt-5: var(--Dodger-Blue-1000);
374
+ --Colors-Utility-Cobalt-10: var(--Dodger-Blue-900);
375
+ --Colors-Utility-Cobalt-20: var(--Dodger-Blue-800);
376
+ --Colors-Utility-Cobalt-30: var(--Dodger-Blue-700);
377
+ --Colors-Utility-Cobalt-40: var(--Dodger-Blue-600);
378
+ --Colors-Utility-Cobalt-50: var(--Dodger-Blue-500);
379
+ --Colors-Utility-Cobalt-60: var(--Dodger-Blue-400);
380
+ --Colors-Utility-Cobalt-70: var(--Dodger-Blue-300);
381
+ --Colors-Utility-Cobalt-80: var(--Dodger-Blue-200);
382
+ --Colors-Utility-Berry-Pink-5: var(--Magenta-Fuchsia-25);
383
+ --Colors-Utility-Berry-Pink-10: var(--Magenta-Fuchsia-50);
384
+ --Colors-Utility-Berry-Pink-20: var(--Magenta-Fuchsia-100);
385
+ --Colors-Utility-Berry-Pink-30: var(--Magenta-Fuchsia-200);
386
+ --Colors-Utility-Berry-Pink-40: var(--Magenta-Fuchsia-400);
387
+ --Colors-Utility-Berry-Pink-50: var(--Magenta-Fuchsia-500);
388
+ --Colors-Utility-Berry-Pink-60: var(--Magenta-Fuchsia-600);
389
+ --Colors-Utility-Berry-Pink-70: var(--Magenta-Fuchsia-700);
390
+ --Colors-Utility-Berry-Pink-80: var(--Magenta-Fuchsia-800);
391
+ --Colors-Utility-Terracotta-5: var(--Crusta-25);
392
+ --Colors-Utility-Terracotta-10: var(--Crusta-50);
393
+ --Colors-Utility-Terracotta-20: var(--Crusta-100);
394
+ --Colors-Utility-Terracotta-30: var(--Crusta-200);
395
+ --Colors-Utility-Terracotta-40: var(--Crusta-400);
396
+ --Colors-Utility-Terracotta-50: var(--Crusta-500);
397
+ --Colors-Utility-Terracotta-60: var(--Crusta-600);
398
+ --Colors-Utility-Terracotta-70: var(--Crusta-700);
399
+ --Colors-Utility-Terracotta-80: var(--Crusta-800);
400
+ --Colors-Utility-Terracotta-Variant-10: var(--Crusta-Variant-50);
401
+ --Colors-Utility-Terracotta-Variant-20: var(--Crusta-200);
402
+ --Colors-Utility-Terracotta-Variant-30: var(--Crusta-400);
403
+ --Colors-Utility-Terracotta-Variant-40: var(--Crusta-600);
404
+ --Colors-Utility-Ember-5: var(--Candlelight-25);
405
+ --Colors-Utility-Ember-10: var(--Candlelight-50);
406
+ --Colors-Utility-Ember-20: var(--Candlelight-100);
407
+ --Colors-Utility-Ember-30: var(--Candlelight-200);
408
+ --Colors-Utility-Ember-40: var(--Candlelight-400);
409
+ --Colors-Utility-Ember-50: var(--Candlelight-500);
410
+ --Colors-Utility-Ember-60: var(--Candlelight-600);
411
+ --Colors-Utility-Ember-70: var(--Candlelight-700);
412
+ --Colors-Utility-Ember-80: var(--Candlelight-800);
413
+ --Colors-Utility-Khaki-5: var(--Candlelight-25);
414
+ --Colors-Utility-Khaki-10: var(--Candlelight-50);
415
+ --Colors-Utility-Khaki-20: var(--Candlelight-100);
416
+ --Colors-Utility-Khaki-30: var(--Candlelight-200);
417
+ --Colors-Utility-Khaki-40: var(--Candlelight-400);
418
+ --Colors-Utility-Khaki-50: var(--Candlelight-500);
419
+ --Colors-Utility-Khaki-60: var(--Candlelight-600);
420
+ --Colors-Utility-Khaki-70: var(--Candlelight-700);
421
+ --Colors-Utility-Khaki-80: var(--Candlelight-800);
422
+ --Colors-Utility-Purple-5: var(--Brand-25);
423
+ --Colors-Utility-Purple-10: var(--Brand-50);
424
+ --Colors-Utility-Purple-20: var(--Brand-100);
425
+ --Colors-Utility-Purple-30: var(--Brand-200);
426
+ --Colors-Utility-Purple-40: var(--Brand-400);
427
+ --Colors-Utility-Purple-50: var(--Brand-500);
428
+ --Colors-Utility-Purple-60: var(--Brand-600);
429
+ --Colors-Utility-Purple-70: var(--Brand-700);
430
+ --Colors-Utility-Purple-80: var(--Brand-800);
431
+ --Colors-Utility-Plum-Purple-5: var(--Purple-Heart-25);
432
+ --Colors-Utility-Plum-Purple-10: var(--Purple-Heart-50);
433
+ --Colors-Utility-Plum-Purple-20: var(--Purple-Heart-100);
434
+ --Colors-Utility-Plum-Purple-30: var(--Purple-Heart-200);
435
+ --Colors-Utility-Plum-Purple-40: var(--Purple-Heart-400);
436
+ --Colors-Utility-Plum-Purple-50: var(--Purple-Heart-500);
437
+ --Colors-Utility-Plum-Purple-60: var(--Purple-Heart-600);
438
+ --Colors-Utility-Plum-Purple-70: var(--Purple-Heart-700);
439
+ --Colors-Utility-Plum-Purple-80: var(--Purple-Heart-800);
440
+ --Colors-FaceTime-White: var(--Opacity-White-20);
441
+ --Colors-FaceTime-Black: var(--Opacity-Black-20);
442
+ }
443
+ }
package/dist/styles/global.scss CHANGED
@@ -2,11 +2,11 @@
2
2
  @tailwind components;
3
3
  @tailwind utilities;
4
4
 
5
- @import './new-tokens.scss';
6
- @import './design2-light.scss';
7
- @import './design2-dark.scss';
8
- @import './components-light.scss';
9
- @import './components-dark.scss';
5
+ @import './new-tokens-v2.scss';
6
+ @import './design2-light-v2.scss';
7
+ @import './design2-dark-v2.scss';
8
+ @import './components-light-v2.scss';
9
+ @import './components-dark-v2.scss';
10
10
 
11
11
  @layer components {
12
12
  .button-hover-underline::after {