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