@codecademy/gamut-styles 17.6.0-alpha.4fa030.0 → 17.6.1-alpha.63a3d2.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 (11) hide show
  1. package/dist/themes/admin.d.ts +17 -41
  2. package/dist/themes/core.d.ts +8 -20
  3. package/dist/themes/core.js +4 -4
  4. package/dist/themes/index.d.ts +1 -0
  5. package/dist/themes/index.js +2 -1
  6. package/dist/themes/lxStudio.d.ts +1010 -0
  7. package/dist/themes/lxStudio.js +54 -0
  8. package/dist/themes/platform.d.ts +17 -41
  9. package/dist/variables/colors.d.ts +85 -4
  10. package/dist/variables/colors.js +18 -16
  11. package/package.json +3 -2
package/dist/themes/lxStudio.d.ts ADDED
@@ -0,0 +1,1010 @@
1
+ export declare const lxStudioBorderRadii: {
2
+ none: string;
3
+ sm: string;
4
+ md: string;
5
+ lg: string;
6
+ xl: string;
7
+ full: string;
8
+ };
9
+ export declare const lxStudioTheme: Record<"breakpoints", {
10
+ xs: string;
11
+ sm: string;
12
+ md: string;
13
+ lg: string;
14
+ xl: string;
15
+ }> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"breakpoints", {
16
+ xs: string;
17
+ sm: string;
18
+ md: string;
19
+ lg: string;
20
+ xl: string;
21
+ }> & import("@codecademy/variance/dist/createTheme/types").Merge<{
22
+ borderRadii: {
23
+ none: string;
24
+ sm: string;
25
+ md: string;
26
+ lg: string;
27
+ xl: string;
28
+ full: string;
29
+ };
30
+ fontFamily: {
31
+ readonly accent: "\"Apercu\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
32
+ readonly base: "\"Apercu\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
33
+ readonly monospace: "Monaco, Menlo, \"Ubuntu Mono\", \"Droid Sans Mono\", Consolas,\nmonospace";
34
+ readonly system: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\",\n\"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif";
35
+ };
36
+ elements: Record<"elements", import("@codecademy/variance").KeyAsVariable<{
37
+ readonly headerHeight: {
38
+ readonly base: "4rem";
39
+ readonly md: "5rem";
40
+ };
41
+ readonly headerZ: 15;
42
+ }, "elements">> & {
43
+ readonly headerHeight: {
44
+ readonly base: "4rem";
45
+ readonly md: "5rem";
46
+ };
47
+ readonly headerZ: 15;
48
+ };
49
+ breakpoints: {
50
+ xs: string;
51
+ sm: string;
52
+ md: string;
53
+ lg: string;
54
+ xl: string;
55
+ };
56
+ fontSize: {
57
+ readonly 64: string;
58
+ readonly 44: string;
59
+ readonly 34: string;
60
+ readonly 26: string;
61
+ readonly 22: string;
62
+ readonly 20: string;
63
+ readonly 18: string;
64
+ readonly 16: string;
65
+ readonly 14: string;
66
+ };
67
+ lineHeight: {
68
+ readonly base: 1.5;
69
+ readonly spacedTitle: 1.3;
70
+ readonly title: 1.2;
71
+ };
72
+ fontWeight: {
73
+ readonly base: 400;
74
+ readonly title: 700;
75
+ readonly 700: 700;
76
+ readonly 400: 400;
77
+ };
78
+ spacing: {
79
+ readonly 0: 0;
80
+ readonly 4: string;
81
+ readonly 8: string;
82
+ readonly 12: string;
83
+ readonly 16: string;
84
+ readonly 24: string;
85
+ readonly 32: string;
86
+ readonly 40: string;
87
+ readonly 48: string;
88
+ readonly 64: string;
89
+ readonly 96: string;
90
+ };
91
+ _variables: import("@codecademy/variance/dist/createTheme/types").Assign<Record<string, import("@codecademy/variance").CSSObject>, Record<string, import("@codecademy/variance").CSSObject>> & Record<string, import("@codecademy/variance").CSSObject>;
92
+ _tokens: import("@codecademy/variance/dist/createTheme/types").Assign<Record<string | number, any>, Record<string | number, any>> & Record<string | number, any>;
93
+ colors: import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
94
+ readonly beige: "#FFF0E5";
95
+ readonly blue: "#1557FF";
96
+ readonly green: "#008A27";
97
+ readonly hyper: "#3A10E5";
98
+ readonly lightBlue: "#66C4FF";
99
+ readonly lightGreen: "#AEE938";
100
+ readonly navy: "#10162F";
101
+ readonly orange: "#FF8C00";
102
+ readonly paleBlue: "#F5FCFF";
103
+ readonly paleGreen: "#F5FFE3";
104
+ readonly palePink: "#FFF5FF";
105
+ readonly paleYellow: "#FFFAE5";
106
+ readonly pink: "#F966FF";
107
+ readonly paleRed: "#DC5879";
108
+ readonly red: "#E91C11";
109
+ readonly yellow: "#FFD300";
110
+ readonly black: "#000000";
111
+ readonly white: "#ffffff";
112
+ readonly "beige-100": "#FFF0E5";
113
+ readonly "blue-0": "#F5FCFF";
114
+ readonly "blue-100": "#D3F2FF";
115
+ readonly "blue-300": "#66C4FF";
116
+ readonly "blue-400": "#3388FF";
117
+ readonly "blue-500": "#1557FF";
118
+ readonly "blue-800": "#1D2340";
119
+ readonly "navy-100": string;
120
+ readonly "navy-300": string;
121
+ readonly "navy-400": string;
122
+ readonly "navy-500": string;
123
+ readonly "navy-800": "#10162F";
124
+ readonly "navy-200": string;
125
+ readonly "navy-600": string;
126
+ readonly "navy-700": string;
127
+ readonly "navy-900": "#0A0D1C";
128
+ readonly "green-0": "#F5FFE3";
129
+ readonly "green-100": "#EAFDC6";
130
+ readonly "green-400": "#AEE938";
131
+ readonly "green-700": "#008A27";
132
+ readonly "yellow-0": "#FFFAE5";
133
+ readonly "yellow-400": "#CCA900";
134
+ readonly "yellow-500": "#FFD300";
135
+ readonly "pink-0": "#FFF5FF";
136
+ readonly "pink-400": "#F966FF";
137
+ readonly "red-0": "#E85D7F";
138
+ readonly "red-100": "#DC5879";
139
+ readonly "red-500": "#E91C11";
140
+ readonly "red-600": "#BE1809";
141
+ readonly "orange-100": "#FFE8CC";
142
+ readonly "orange-500": "#FF8C00";
143
+ readonly "hyper-400": "#5533FF";
144
+ readonly "hyper-500": "#3A10E5";
145
+ readonly "gray-100": "#F5F5F5";
146
+ readonly "gray-300": "#E0E0E0";
147
+ readonly "gray-800": "#616161";
148
+ readonly "gray-200": "#EEEEEE";
149
+ readonly "gray-600": "#9E9E9E";
150
+ readonly "gray-900": "#424242";
151
+ readonly "white-100": string;
152
+ readonly "white-300": string;
153
+ readonly "white-400": string;
154
+ readonly "white-500": string;
155
+ readonly "white-200": string;
156
+ readonly "white-600": string;
157
+ readonly "white-700": string;
158
+ }, "-">, "color">, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
159
+ text: {
160
+ _: "navy-800";
161
+ accent: "navy-900";
162
+ disabled: "navy-500";
163
+ secondary: "navy-600";
164
+ };
165
+ feedback: {
166
+ error: "red-600";
167
+ success: "green-700";
168
+ warning: "yellow";
169
+ };
170
+ background: {
171
+ _: "white";
172
+ contrast: "white";
173
+ current: "white";
174
+ primary: "beige";
175
+ selected: "navy-100";
176
+ disabled: "navy-200";
177
+ hover: "navy-200";
178
+ };
179
+ shadow: {
180
+ primary: "navy-800";
181
+ secondary: "navy-600";
182
+ };
183
+ primary: {
184
+ _: "hyper-500";
185
+ hover: "hyper-400";
186
+ inverse: "yellow-500";
187
+ };
188
+ secondary: {
189
+ _: "navy-800";
190
+ hover: "navy-700";
191
+ };
192
+ danger: {
193
+ _: "red-500";
194
+ hover: "red-600";
195
+ };
196
+ interface: {
197
+ _: "hyper-500";
198
+ hover: "hyper-400";
199
+ };
200
+ border: {
201
+ primary: "navy-800";
202
+ secondary: "navy-600";
203
+ tertiary: "navy-300";
204
+ disabled: "navy-500";
205
+ };
206
+ } | {
207
+ text: {
208
+ _: "white";
209
+ accent: "beige";
210
+ disabled: "white-500";
211
+ secondary: "white-600";
212
+ };
213
+ feedback: {
214
+ error: "red-0";
215
+ success: "green-400";
216
+ warning: "yellow-0";
217
+ };
218
+ background: {
219
+ _: "navy-800";
220
+ contrast: "black";
221
+ current: "navy-800";
222
+ primary: "navy-900";
223
+ selected: "white-100";
224
+ disabled: "white-200";
225
+ hover: "white-200";
226
+ };
227
+ shadow: {
228
+ primary: "white";
229
+ secondary: "white-600";
230
+ };
231
+ primary: {
232
+ _: "yellow-500";
233
+ hover: "yellow-400";
234
+ inverse: "hyper-500";
235
+ };
236
+ secondary: {
237
+ _: "white";
238
+ hover: "white-700";
239
+ };
240
+ danger: {
241
+ _: "red-0";
242
+ hover: "red-100";
243
+ };
244
+ interface: {
245
+ _: "yellow-500";
246
+ hover: "yellow-400";
247
+ };
248
+ border: {
249
+ primary: "white";
250
+ secondary: "white-600";
251
+ tertiary: "white-300";
252
+ disabled: "white-500";
253
+ };
254
+ }, "-", "_">, "colors"> & import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
255
+ readonly beige: "#FFF0E5";
256
+ readonly blue: "#1557FF";
257
+ readonly green: "#008A27";
258
+ readonly hyper: "#3A10E5";
259
+ readonly lightBlue: "#66C4FF";
260
+ readonly lightGreen: "#AEE938";
261
+ readonly navy: "#10162F";
262
+ readonly orange: "#FF8C00";
263
+ readonly paleBlue: "#F5FCFF";
264
+ readonly paleGreen: "#F5FFE3";
265
+ readonly palePink: "#FFF5FF";
266
+ readonly paleYellow: "#FFFAE5";
267
+ readonly pink: "#F966FF";
268
+ readonly paleRed: "#DC5879";
269
+ readonly red: "#E91C11";
270
+ readonly yellow: "#FFD300";
271
+ readonly black: "#000000";
272
+ readonly white: "#ffffff";
273
+ readonly "beige-100": "#FFF0E5";
274
+ readonly "blue-0": "#F5FCFF";
275
+ readonly "blue-100": "#D3F2FF";
276
+ readonly "blue-300": "#66C4FF";
277
+ readonly "blue-400": "#3388FF";
278
+ readonly "blue-500": "#1557FF";
279
+ readonly "blue-800": "#1D2340";
280
+ readonly "navy-100": string;
281
+ readonly "navy-300": string;
282
+ readonly "navy-400": string;
283
+ readonly "navy-500": string;
284
+ readonly "navy-800": "#10162F";
285
+ readonly "navy-200": string;
286
+ readonly "navy-600": string;
287
+ readonly "navy-700": string;
288
+ readonly "navy-900": "#0A0D1C";
289
+ readonly "green-0": "#F5FFE3";
290
+ readonly "green-100": "#EAFDC6";
291
+ readonly "green-400": "#AEE938";
292
+ readonly "green-700": "#008A27";
293
+ readonly "yellow-0": "#FFFAE5";
294
+ readonly "yellow-400": "#CCA900";
295
+ readonly "yellow-500": "#FFD300";
296
+ readonly "pink-0": "#FFF5FF";
297
+ readonly "pink-400": "#F966FF";
298
+ readonly "red-0": "#E85D7F";
299
+ readonly "red-100": "#DC5879";
300
+ readonly "red-500": "#E91C11";
301
+ readonly "red-600": "#BE1809";
302
+ readonly "orange-100": "#FFE8CC";
303
+ readonly "orange-500": "#FF8C00";
304
+ readonly "hyper-400": "#5533FF";
305
+ readonly "hyper-500": "#3A10E5";
306
+ readonly "gray-100": "#F5F5F5";
307
+ readonly "gray-300": "#E0E0E0";
308
+ readonly "gray-800": "#616161";
309
+ readonly "gray-200": "#EEEEEE";
310
+ readonly "gray-600": "#9E9E9E";
311
+ readonly "gray-900": "#424242";
312
+ readonly "white-100": string;
313
+ readonly "white-300": string;
314
+ readonly "white-400": string;
315
+ readonly "white-500": string;
316
+ readonly "white-200": string;
317
+ readonly "white-600": string;
318
+ readonly "white-700": string;
319
+ }, "-">, "color">>;
320
+ modes: import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
321
+ light: import("@codecademy/variance").LiteralPaths<{
322
+ text: {
323
+ _: "navy-800";
324
+ accent: "navy-900";
325
+ disabled: "navy-500";
326
+ secondary: "navy-600";
327
+ };
328
+ feedback: {
329
+ error: "red-600";
330
+ success: "green-700";
331
+ warning: "yellow";
332
+ };
333
+ background: {
334
+ _: "white";
335
+ contrast: "white";
336
+ current: "white";
337
+ primary: "beige";
338
+ selected: "navy-100";
339
+ disabled: "navy-200";
340
+ hover: "navy-200";
341
+ };
342
+ shadow: {
343
+ primary: "navy-800";
344
+ secondary: "navy-600";
345
+ };
346
+ primary: {
347
+ _: "hyper-500";
348
+ hover: "hyper-400";
349
+ inverse: "yellow-500";
350
+ };
351
+ secondary: {
352
+ _: "navy-800";
353
+ hover: "navy-700";
354
+ };
355
+ danger: {
356
+ _: "red-500";
357
+ hover: "red-600";
358
+ };
359
+ interface: {
360
+ _: "hyper-500";
361
+ hover: "hyper-400";
362
+ };
363
+ border: {
364
+ primary: "navy-800";
365
+ secondary: "navy-600";
366
+ tertiary: "navy-300";
367
+ disabled: "navy-500";
368
+ };
369
+ }, "-", "_">;
370
+ dark: import("@codecademy/variance").LiteralPaths<{
371
+ text: {
372
+ _: "white";
373
+ accent: "beige";
374
+ disabled: "white-500";
375
+ secondary: "white-600";
376
+ };
377
+ feedback: {
378
+ error: "red-0";
379
+ success: "green-400";
380
+ warning: "yellow-0";
381
+ };
382
+ background: {
383
+ _: "navy-800";
384
+ contrast: "black";
385
+ current: "navy-800";
386
+ primary: "navy-900";
387
+ selected: "white-100";
388
+ disabled: "white-200";
389
+ hover: "white-200";
390
+ };
391
+ shadow: {
392
+ primary: "white";
393
+ secondary: "white-600";
394
+ };
395
+ primary: {
396
+ _: "yellow-500";
397
+ hover: "yellow-400";
398
+ inverse: "hyper-500";
399
+ };
400
+ secondary: {
401
+ _: "white";
402
+ hover: "white-700";
403
+ };
404
+ danger: {
405
+ _: "red-0";
406
+ hover: "red-100";
407
+ };
408
+ interface: {
409
+ _: "yellow-500";
410
+ hover: "yellow-400";
411
+ };
412
+ border: {
413
+ primary: "white";
414
+ secondary: "white-600";
415
+ tertiary: "white-300";
416
+ disabled: "white-500";
417
+ };
418
+ }, "-", "_">;
419
+ }>;
420
+ mode: "light" | "dark";
421
+ _getColorValue: (color: import("@codecademy/variance").Path<{
422
+ readonly beige: "#FFF0E5";
423
+ readonly blue: "#1557FF";
424
+ readonly green: "#008A27";
425
+ readonly hyper: "#3A10E5";
426
+ readonly lightBlue: "#66C4FF";
427
+ readonly lightGreen: "#AEE938";
428
+ readonly navy: "#10162F";
429
+ readonly orange: "#FF8C00";
430
+ readonly paleBlue: "#F5FCFF";
431
+ readonly paleGreen: "#F5FFE3";
432
+ readonly palePink: "#FFF5FF";
433
+ readonly paleYellow: "#FFFAE5";
434
+ readonly pink: "#F966FF";
435
+ readonly paleRed: "#DC5879";
436
+ readonly red: "#E91C11";
437
+ readonly yellow: "#FFD300";
438
+ readonly black: "#000000";
439
+ readonly white: "#ffffff";
440
+ readonly "beige-100": "#FFF0E5";
441
+ readonly "blue-0": "#F5FCFF";
442
+ readonly "blue-100": "#D3F2FF";
443
+ readonly "blue-300": "#66C4FF";
444
+ readonly "blue-400": "#3388FF";
445
+ readonly "blue-500": "#1557FF";
446
+ readonly "blue-800": "#1D2340";
447
+ readonly "navy-100": string;
448
+ readonly "navy-300": string;
449
+ readonly "navy-400": string;
450
+ readonly "navy-500": string;
451
+ readonly "navy-800": "#10162F";
452
+ readonly "navy-200": string;
453
+ readonly "navy-600": string;
454
+ readonly "navy-700": string;
455
+ readonly "navy-900": "#0A0D1C";
456
+ readonly "green-0": "#F5FFE3";
457
+ readonly "green-100": "#EAFDC6";
458
+ readonly "green-400": "#AEE938";
459
+ readonly "green-700": "#008A27";
460
+ readonly "yellow-0": "#FFFAE5";
461
+ readonly "yellow-400": "#CCA900";
462
+ readonly "yellow-500": "#FFD300";
463
+ readonly "pink-0": "#FFF5FF";
464
+ readonly "pink-400": "#F966FF";
465
+ readonly "red-0": "#E85D7F";
466
+ readonly "red-100": "#DC5879";
467
+ readonly "red-500": "#E91C11";
468
+ readonly "red-600": "#BE1809";
469
+ readonly "orange-100": "#FFE8CC";
470
+ readonly "orange-500": "#FF8C00";
471
+ readonly "hyper-400": "#5533FF";
472
+ readonly "hyper-500": "#3A10E5";
473
+ readonly "gray-100": "#F5F5F5";
474
+ readonly "gray-300": "#E0E0E0";
475
+ readonly "gray-800": "#616161";
476
+ readonly "gray-200": "#EEEEEE";
477
+ readonly "gray-600": "#9E9E9E";
478
+ readonly "gray-900": "#424242";
479
+ readonly "white-100": string;
480
+ readonly "white-300": string;
481
+ readonly "white-400": string;
482
+ readonly "white-500": string;
483
+ readonly "white-200": string;
484
+ readonly "white-600": string;
485
+ readonly "white-700": string;
486
+ }, "-">) => string;
487
+ borders: import("@codecademy/variance").LiteralPaths<{
488
+ 1: string;
489
+ 2: string;
490
+ }, "-">;
491
+ } & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
492
+ lxStudioSuccess: "#06844F";
493
+ lxStudioBgPrimary: "#FAFBFC";
494
+ lxStudioPurple: "#5628FE";
495
+ lxStudioPurpleHover: "#7955FC";
496
+ beige: "#FFF0E5";
497
+ blue: "#1557FF";
498
+ green: "#008A27";
499
+ hyper: "#3A10E5";
500
+ lightBlue: "#66C4FF";
501
+ lightGreen: "#AEE938";
502
+ navy: "#10162F";
503
+ orange: "#FF8C00";
504
+ paleBlue: "#F5FCFF";
505
+ paleGreen: "#F5FFE3";
506
+ palePink: "#FFF5FF";
507
+ paleYellow: "#FFFAE5";
508
+ pink: "#F966FF";
509
+ paleRed: "#DC5879";
510
+ red: "#E91C11";
511
+ yellow: "#FFD300";
512
+ black: "#000000";
513
+ white: "#ffffff";
514
+ "beige-100": "#FFF0E5";
515
+ "blue-0": "#F5FCFF";
516
+ "blue-100": "#D3F2FF";
517
+ "blue-300": "#66C4FF";
518
+ "blue-400": "#3388FF";
519
+ "blue-500": "#1557FF";
520
+ "blue-800": "#1D2340";
521
+ "navy-100": string;
522
+ "navy-300": string;
523
+ "navy-400": string;
524
+ "navy-500": string;
525
+ "navy-800": "#10162F";
526
+ "navy-200": string;
527
+ "navy-600": string;
528
+ "navy-700": string;
529
+ "navy-900": "#0A0D1C";
530
+ "green-0": "#F5FFE3";
531
+ "green-100": "#EAFDC6";
532
+ "green-400": "#AEE938";
533
+ "green-700": "#008A27";
534
+ "yellow-0": "#FFFAE5";
535
+ "yellow-400": "#CCA900";
536
+ "yellow-500": "#FFD300";
537
+ "pink-0": "#FFF5FF";
538
+ "pink-400": "#F966FF";
539
+ "red-0": "#E85D7F";
540
+ "red-100": "#DC5879";
541
+ "red-500": "#E91C11";
542
+ "red-600": "#BE1809";
543
+ "orange-100": "#FFE8CC";
544
+ "orange-500": "#FF8C00";
545
+ "hyper-400": "#5533FF";
546
+ "hyper-500": "#3A10E5";
547
+ "gray-100": "#F5F5F5";
548
+ "gray-300": "#E0E0E0";
549
+ "gray-800": "#616161";
550
+ "gray-200": "#EEEEEE";
551
+ "gray-600": "#9E9E9E";
552
+ "gray-900": "#424242";
553
+ "white-100": string;
554
+ "white-300": string;
555
+ "white-400": string;
556
+ "white-500": string;
557
+ "white-200": string;
558
+ "white-600": string;
559
+ "white-700": string;
560
+ }, "-">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
561
+ colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
562
+ feedback: {
563
+ success: "lxStudioSuccess";
564
+ };
565
+ background: {
566
+ primary: "lxStudioBgPrimary";
567
+ };
568
+ shadow: {
569
+ primary: "navy-200";
570
+ };
571
+ primary: {
572
+ _: "lxStudioPurple";
573
+ hover: "lxStudioPurpleHover";
574
+ };
575
+ interface: {
576
+ _: "hyper-500";
577
+ hover: "hyper-400";
578
+ };
579
+ border: {
580
+ primary: "navy-400";
581
+ tertiary: "navy-800";
582
+ disabled: "navy-300";
583
+ };
584
+ }, "-", "_">, "colors"> & import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
585
+ readonly beige: "#FFF0E5";
586
+ readonly blue: "#1557FF";
587
+ readonly green: "#008A27";
588
+ readonly hyper: "#3A10E5";
589
+ readonly lightBlue: "#66C4FF";
590
+ readonly lightGreen: "#AEE938";
591
+ readonly navy: "#10162F";
592
+ readonly orange: "#FF8C00";
593
+ readonly paleBlue: "#F5FCFF";
594
+ readonly paleGreen: "#F5FFE3";
595
+ readonly palePink: "#FFF5FF";
596
+ readonly paleYellow: "#FFFAE5";
597
+ readonly pink: "#F966FF";
598
+ readonly paleRed: "#DC5879";
599
+ readonly red: "#E91C11";
600
+ readonly yellow: "#FFD300";
601
+ readonly black: "#000000";
602
+ readonly white: "#ffffff";
603
+ readonly "beige-100": "#FFF0E5";
604
+ readonly "blue-0": "#F5FCFF";
605
+ readonly "blue-100": "#D3F2FF";
606
+ readonly "blue-300": "#66C4FF";
607
+ readonly "blue-400": "#3388FF";
608
+ readonly "blue-500": "#1557FF";
609
+ readonly "blue-800": "#1D2340";
610
+ readonly "navy-100": string;
611
+ readonly "navy-300": string;
612
+ readonly "navy-400": string;
613
+ readonly "navy-500": string;
614
+ readonly "navy-800": "#10162F";
615
+ readonly "navy-200": string;
616
+ readonly "navy-600": string;
617
+ readonly "navy-700": string;
618
+ readonly "navy-900": "#0A0D1C";
619
+ readonly "green-0": "#F5FFE3";
620
+ readonly "green-100": "#EAFDC6";
621
+ readonly "green-400": "#AEE938";
622
+ readonly "green-700": "#008A27";
623
+ readonly "yellow-0": "#FFFAE5";
624
+ readonly "yellow-400": "#CCA900";
625
+ readonly "yellow-500": "#FFD300";
626
+ readonly "pink-0": "#FFF5FF";
627
+ readonly "pink-400": "#F966FF";
628
+ readonly "red-0": "#E85D7F";
629
+ readonly "red-100": "#DC5879";
630
+ readonly "red-500": "#E91C11";
631
+ readonly "red-600": "#BE1809";
632
+ readonly "orange-100": "#FFE8CC";
633
+ readonly "orange-500": "#FF8C00";
634
+ readonly "hyper-400": "#5533FF";
635
+ readonly "hyper-500": "#3A10E5";
636
+ readonly "gray-100": "#F5F5F5";
637
+ readonly "gray-300": "#E0E0E0";
638
+ readonly "gray-800": "#616161";
639
+ readonly "gray-200": "#EEEEEE";
640
+ readonly "gray-600": "#9E9E9E";
641
+ readonly "gray-900": "#424242";
642
+ readonly "white-100": string;
643
+ readonly "white-300": string;
644
+ readonly "white-400": string;
645
+ readonly "white-500": string;
646
+ readonly "white-200": string;
647
+ readonly "white-600": string;
648
+ readonly "white-700": string;
649
+ }, "-">, "color">, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
650
+ text: {
651
+ _: "navy-800";
652
+ accent: "navy-900";
653
+ disabled: "navy-500";
654
+ secondary: "navy-600";
655
+ };
656
+ feedback: {
657
+ error: "red-600";
658
+ success: "green-700";
659
+ warning: "yellow";
660
+ };
661
+ background: {
662
+ _: "white";
663
+ contrast: "white";
664
+ current: "white";
665
+ primary: "beige";
666
+ selected: "navy-100";
667
+ disabled: "navy-200";
668
+ hover: "navy-200";
669
+ };
670
+ shadow: {
671
+ primary: "navy-800";
672
+ secondary: "navy-600";
673
+ };
674
+ primary: {
675
+ _: "hyper-500";
676
+ hover: "hyper-400";
677
+ inverse: "yellow-500";
678
+ };
679
+ secondary: {
680
+ _: "navy-800";
681
+ hover: "navy-700";
682
+ };
683
+ danger: {
684
+ _: "red-500";
685
+ hover: "red-600";
686
+ };
687
+ interface: {
688
+ _: "hyper-500";
689
+ hover: "hyper-400";
690
+ };
691
+ border: {
692
+ primary: "navy-800";
693
+ secondary: "navy-600";
694
+ tertiary: "navy-300";
695
+ disabled: "navy-500";
696
+ };
697
+ } | {
698
+ text: {
699
+ _: "white";
700
+ accent: "beige";
701
+ disabled: "white-500";
702
+ secondary: "white-600";
703
+ };
704
+ feedback: {
705
+ error: "red-0";
706
+ success: "green-400";
707
+ warning: "yellow-0";
708
+ };
709
+ background: {
710
+ _: "navy-800";
711
+ contrast: "black";
712
+ current: "navy-800";
713
+ primary: "navy-900";
714
+ selected: "white-100";
715
+ disabled: "white-200";
716
+ hover: "white-200";
717
+ };
718
+ shadow: {
719
+ primary: "white";
720
+ secondary: "white-600";
721
+ };
722
+ primary: {
723
+ _: "yellow-500";
724
+ hover: "yellow-400";
725
+ inverse: "hyper-500";
726
+ };
727
+ secondary: {
728
+ _: "white";
729
+ hover: "white-700";
730
+ };
731
+ danger: {
732
+ _: "red-0";
733
+ hover: "red-100";
734
+ };
735
+ interface: {
736
+ _: "yellow-500";
737
+ hover: "yellow-400";
738
+ };
739
+ border: {
740
+ primary: "white";
741
+ secondary: "white-600";
742
+ tertiary: "white-300";
743
+ disabled: "white-500";
744
+ };
745
+ }, "-", "_">, "colors"> & import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
746
+ readonly beige: "#FFF0E5";
747
+ readonly blue: "#1557FF";
748
+ readonly green: "#008A27";
749
+ readonly hyper: "#3A10E5";
750
+ readonly lightBlue: "#66C4FF";
751
+ readonly lightGreen: "#AEE938";
752
+ readonly navy: "#10162F";
753
+ readonly orange: "#FF8C00";
754
+ readonly paleBlue: "#F5FCFF";
755
+ readonly paleGreen: "#F5FFE3";
756
+ readonly palePink: "#FFF5FF";
757
+ readonly paleYellow: "#FFFAE5";
758
+ readonly pink: "#F966FF";
759
+ readonly paleRed: "#DC5879";
760
+ readonly red: "#E91C11";
761
+ readonly yellow: "#FFD300";
762
+ readonly black: "#000000";
763
+ readonly white: "#ffffff";
764
+ readonly "beige-100": "#FFF0E5";
765
+ readonly "blue-0": "#F5FCFF";
766
+ readonly "blue-100": "#D3F2FF";
767
+ readonly "blue-300": "#66C4FF";
768
+ readonly "blue-400": "#3388FF";
769
+ readonly "blue-500": "#1557FF";
770
+ readonly "blue-800": "#1D2340";
771
+ readonly "navy-100": string;
772
+ readonly "navy-300": string;
773
+ readonly "navy-400": string;
774
+ readonly "navy-500": string;
775
+ readonly "navy-800": "#10162F";
776
+ readonly "navy-200": string;
777
+ readonly "navy-600": string;
778
+ readonly "navy-700": string;
779
+ readonly "navy-900": "#0A0D1C";
780
+ readonly "green-0": "#F5FFE3";
781
+ readonly "green-100": "#EAFDC6";
782
+ readonly "green-400": "#AEE938";
783
+ readonly "green-700": "#008A27";
784
+ readonly "yellow-0": "#FFFAE5";
785
+ readonly "yellow-400": "#CCA900";
786
+ readonly "yellow-500": "#FFD300";
787
+ readonly "pink-0": "#FFF5FF";
788
+ readonly "pink-400": "#F966FF";
789
+ readonly "red-0": "#E85D7F";
790
+ readonly "red-100": "#DC5879";
791
+ readonly "red-500": "#E91C11";
792
+ readonly "red-600": "#BE1809";
793
+ readonly "orange-100": "#FFE8CC";
794
+ readonly "orange-500": "#FF8C00";
795
+ readonly "hyper-400": "#5533FF";
796
+ readonly "hyper-500": "#3A10E5";
797
+ readonly "gray-100": "#F5F5F5";
798
+ readonly "gray-300": "#E0E0E0";
799
+ readonly "gray-800": "#616161";
800
+ readonly "gray-200": "#EEEEEE";
801
+ readonly "gray-600": "#9E9E9E";
802
+ readonly "gray-900": "#424242";
803
+ readonly "white-100": string;
804
+ readonly "white-300": string;
805
+ readonly "white-400": string;
806
+ readonly "white-500": string;
807
+ readonly "white-200": string;
808
+ readonly "white-600": string;
809
+ readonly "white-700": string;
810
+ }, "-">, "color">>, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
811
+ lxStudioSuccess: "#06844F";
812
+ lxStudioBgPrimary: "#FAFBFC";
813
+ lxStudioPurple: "#5628FE";
814
+ lxStudioPurpleHover: "#7955FC";
815
+ beige: "#FFF0E5";
816
+ blue: "#1557FF";
817
+ green: "#008A27";
818
+ hyper: "#3A10E5";
819
+ lightBlue: "#66C4FF";
820
+ lightGreen: "#AEE938";
821
+ navy: "#10162F";
822
+ orange: "#FF8C00";
823
+ paleBlue: "#F5FCFF";
824
+ paleGreen: "#F5FFE3";
825
+ palePink: "#FFF5FF";
826
+ paleYellow: "#FFFAE5";
827
+ pink: "#F966FF";
828
+ paleRed: "#DC5879";
829
+ red: "#E91C11";
830
+ yellow: "#FFD300";
831
+ black: "#000000";
832
+ white: "#ffffff";
833
+ "beige-100": "#FFF0E5";
834
+ "blue-0": "#F5FCFF";
835
+ "blue-100": "#D3F2FF";
836
+ "blue-300": "#66C4FF";
837
+ "blue-400": "#3388FF";
838
+ "blue-500": "#1557FF";
839
+ "blue-800": "#1D2340";
840
+ "navy-100": string;
841
+ "navy-300": string;
842
+ "navy-400": string;
843
+ "navy-500": string;
844
+ "navy-800": "#10162F";
845
+ "navy-200": string;
846
+ "navy-600": string;
847
+ "navy-700": string;
848
+ "navy-900": "#0A0D1C";
849
+ "green-0": "#F5FFE3";
850
+ "green-100": "#EAFDC6";
851
+ "green-400": "#AEE938";
852
+ "green-700": "#008A27";
853
+ "yellow-0": "#FFFAE5";
854
+ "yellow-400": "#CCA900";
855
+ "yellow-500": "#FFD300";
856
+ "pink-0": "#FFF5FF";
857
+ "pink-400": "#F966FF";
858
+ "red-0": "#E85D7F";
859
+ "red-100": "#DC5879";
860
+ "red-500": "#E91C11";
861
+ "red-600": "#BE1809";
862
+ "orange-100": "#FFE8CC";
863
+ "orange-500": "#FF8C00";
864
+ "hyper-400": "#5533FF";
865
+ "hyper-500": "#3A10E5";
866
+ "gray-100": "#F5F5F5";
867
+ "gray-300": "#E0E0E0";
868
+ "gray-800": "#616161";
869
+ "gray-200": "#EEEEEE";
870
+ "gray-600": "#9E9E9E";
871
+ "gray-900": "#424242";
872
+ "white-100": string;
873
+ "white-300": string;
874
+ "white-400": string;
875
+ "white-500": string;
876
+ "white-200": string;
877
+ "white-600": string;
878
+ "white-700": string;
879
+ }, "-">, "color">>;
880
+ modes: import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
881
+ light: import("@codecademy/variance").LiteralPaths<{
882
+ text: {
883
+ _: "navy-800";
884
+ accent: "navy-900";
885
+ disabled: "navy-500";
886
+ secondary: "navy-600";
887
+ };
888
+ feedback: {
889
+ error: "red-600";
890
+ success: "green-700";
891
+ warning: "yellow";
892
+ };
893
+ background: {
894
+ _: "white";
895
+ contrast: "white";
896
+ current: "white";
897
+ primary: "beige";
898
+ selected: "navy-100";
899
+ disabled: "navy-200";
900
+ hover: "navy-200";
901
+ };
902
+ shadow: {
903
+ primary: "navy-800";
904
+ secondary: "navy-600";
905
+ };
906
+ primary: {
907
+ _: "hyper-500";
908
+ hover: "hyper-400";
909
+ inverse: "yellow-500";
910
+ };
911
+ secondary: {
912
+ _: "navy-800";
913
+ hover: "navy-700";
914
+ };
915
+ danger: {
916
+ _: "red-500";
917
+ hover: "red-600";
918
+ };
919
+ interface: {
920
+ _: "hyper-500";
921
+ hover: "hyper-400";
922
+ };
923
+ border: {
924
+ primary: "navy-800";
925
+ secondary: "navy-600";
926
+ tertiary: "navy-300";
927
+ disabled: "navy-500";
928
+ };
929
+ }, "-", "_">;
930
+ dark: import("@codecademy/variance").LiteralPaths<{
931
+ text: {
932
+ _: "white";
933
+ accent: "beige";
934
+ disabled: "white-500";
935
+ secondary: "white-600";
936
+ };
937
+ feedback: {
938
+ error: "red-0";
939
+ success: "green-400";
940
+ warning: "yellow-0";
941
+ };
942
+ background: {
943
+ _: "navy-800";
944
+ contrast: "black";
945
+ current: "navy-800";
946
+ primary: "navy-900";
947
+ selected: "white-100";
948
+ disabled: "white-200";
949
+ hover: "white-200";
950
+ };
951
+ shadow: {
952
+ primary: "white";
953
+ secondary: "white-600";
954
+ };
955
+ primary: {
956
+ _: "yellow-500";
957
+ hover: "yellow-400";
958
+ inverse: "hyper-500";
959
+ };
960
+ secondary: {
961
+ _: "white";
962
+ hover: "white-700";
963
+ };
964
+ danger: {
965
+ _: "red-0";
966
+ hover: "red-100";
967
+ };
968
+ interface: {
969
+ _: "yellow-500";
970
+ hover: "yellow-400";
971
+ };
972
+ border: {
973
+ primary: "white";
974
+ secondary: "white-600";
975
+ tertiary: "white-300";
976
+ disabled: "white-500";
977
+ };
978
+ }, "-", "_">;
979
+ }>, {
980
+ light: import("@codecademy/variance").LiteralPaths<{
981
+ feedback: {
982
+ success: "lxStudioSuccess";
983
+ };
984
+ background: {
985
+ primary: "lxStudioBgPrimary";
986
+ };
987
+ shadow: {
988
+ primary: "navy-200";
989
+ };
990
+ primary: {
991
+ _: "lxStudioPurple";
992
+ hover: "lxStudioPurpleHover";
993
+ };
994
+ interface: {
995
+ _: "hyper-500";
996
+ hover: "hyper-400";
997
+ };
998
+ border: {
999
+ primary: "navy-400";
1000
+ tertiary: "navy-800";
1001
+ disabled: "navy-300";
1002
+ };
1003
+ }, "-", "_">;
1004
+ }>;
1005
+ mode: "light";
1006
+ _getColorValue: (color: "beige" | "blue" | "navy" | "green" | "yellow" | "pink" | "red" | "orange" | "hyper" | "white" | "beige-100" | "blue-0" | "blue-100" | "blue-300" | "blue-400" | "blue-500" | "blue-800" | "navy-100" | "navy-300" | "navy-400" | "navy-500" | "navy-800" | "navy-200" | "navy-600" | "navy-700" | "navy-900" | "green-0" | "green-100" | "green-400" | "green-700" | "yellow-0" | "yellow-400" | "yellow-500" | "pink-0" | "pink-400" | "red-0" | "red-100" | "red-500" | "red-600" | "orange-100" | "orange-500" | "hyper-400" | "hyper-500" | "gray-100" | "gray-300" | "gray-800" | "gray-200" | "gray-600" | "gray-900" | "white-100" | "white-300" | "white-400" | "white-500" | "white-200" | "white-600" | "white-700" | "black" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-disabled" | "text-accent" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "shadow-secondary" | "shadow-primary" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | "lxStudioSuccess" | "lxStudioBgPrimary" | "lxStudioPurple" | "lxStudioPurpleHover") => string;
1007
+ }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
1008
+ export type LxStudioThemeShape = typeof lxStudioTheme;
1009
+ export interface LxStudioTheme extends LxStudioThemeShape {
1010
+ }