@codecademy/gamut-styles 17.5.1 → 17.5.2-alpha.02230c.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 +1010 -0
  4. package/dist/themes/lxStudio.js +54 -0
  5. package/dist/variables/colors.d.ts +85 -0
  6. package/dist/variables/colors.js +18 -3
  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,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
+ }
package/dist/themes/lxStudio.js ADDED
@@ -0,0 +1,54 @@
1
+ import { createTheme } from '@codecademy/variance';
2
+ import { fontBase, fontMonospace, fontSystem, 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
+ const lxStudioFontFamily = {
11
+ accent: fontBase,
12
+ base: fontBase,
13
+ monospace: fontMonospace,
14
+ system: fontSystem
15
+ };
16
+ export const lxStudioBorderRadii = {
17
+ none: '0px',
18
+ sm: '4px',
19
+ md: '8px',
20
+ lg: '12px',
21
+ xl: '16px',
22
+ full: '999px'
23
+ };
24
+ export const lxStudioTheme = createTheme({
25
+ ...coreTheme,
26
+ borderRadii: lxStudioBorderRadii,
27
+ fontFamily: lxStudioFontFamily
28
+ }).addColors(lxStudioPalette).addColorModes('light', {
29
+ // these are just the overrides, the rest of the tokens are inherited from coreTheme
30
+ light: {
31
+ feedback: {
32
+ success: 'lxStudioSuccess'
33
+ },
34
+ background: {
35
+ primary: 'lxStudioBgPrimary'
36
+ },
37
+ shadow: {
38
+ primary: 'navy-200'
39
+ },
40
+ primary: {
41
+ _: 'lxStudioPurple',
42
+ hover: 'lxStudioPurpleHover'
43
+ },
44
+ interface: {
45
+ _: 'hyper-500',
46
+ hover: 'hyper-400'
47
+ },
48
+ border: {
49
+ primary: 'navy-400',
50
+ tertiary: 'navy-800',
51
+ disabled: 'navy-300'
52
+ }
53
+ }
54
+ }).build();
package/dist/variables/colors.d.ts CHANGED
@@ -177,6 +177,12 @@ export declare const platformSwatches: {
177
177
  readonly '300': "#B3CCFF";
178
178
  };
179
179
  };
180
+ export declare const truePlatformColors: {
181
+ readonly lightBeige: "#FFFBF8";
182
+ readonly gold: "#8A7300";
183
+ readonly teal: "#027E97";
184
+ readonly purple: "#B3CCFF";
185
+ };
180
186
  export declare const platformPalette: {
181
187
  readonly lightBeige: "#FFFBF8";
182
188
  readonly gold: "#8A7300";
@@ -189,3 +195,82 @@ export declare const platformPalette: {
189
195
  readonly "teal-500": "#027E97";
190
196
  readonly "purple-300": "#B3CCFF";
191
197
  };
198
+ /**
199
+ * LX Studio Colors
200
+ */
201
+ export declare const lxStudioColors: {
202
+ readonly lxStudioSuccess: "#06844F";
203
+ readonly lxStudioBgPrimary: "#FAFBFC";
204
+ readonly lxStudioPurple: "#5628FE";
205
+ readonly lxStudioPurpleHover: "#7955FC";
206
+ };
207
+ export declare const lxStudioPalette: {
208
+ lxStudioSuccess: "#06844F";
209
+ lxStudioBgPrimary: "#FAFBFC";
210
+ lxStudioPurple: "#5628FE";
211
+ lxStudioPurpleHover: "#7955FC";
212
+ beige: "#FFF0E5";
213
+ blue: "#1557FF";
214
+ green: "#008A27";
215
+ hyper: "#3A10E5";
216
+ lightBlue: "#66C4FF";
217
+ lightGreen: "#AEE938";
218
+ navy: "#10162F";
219
+ orange: "#FF8C00";
220
+ paleBlue: "#F5FCFF";
221
+ paleGreen: "#F5FFE3";
222
+ palePink: "#FFF5FF";
223
+ paleYellow: "#FFFAE5";
224
+ pink: "#F966FF";
225
+ paleRed: "#DC5879";
226
+ red: "#E91C11";
227
+ yellow: "#FFD300";
228
+ black: "#000000";
229
+ white: "#ffffff";
230
+ "beige-100": "#FFF0E5";
231
+ "blue-0": "#F5FCFF";
232
+ "blue-100": "#D3F2FF";
233
+ "blue-300": "#66C4FF";
234
+ "blue-400": "#3388FF";
235
+ "blue-500": "#1557FF";
236
+ "blue-800": "#1D2340";
237
+ "navy-100": string;
238
+ "navy-300": string;
239
+ "navy-400": string;
240
+ "navy-500": string;
241
+ "navy-800": "#10162F";
242
+ "navy-200": string;
243
+ "navy-600": string;
244
+ "navy-700": string;
245
+ "navy-900": "#0A0D1C";
246
+ "green-0": "#F5FFE3";
247
+ "green-100": "#EAFDC6";
248
+ "green-400": "#AEE938";
249
+ "green-700": "#008A27";
250
+ "yellow-0": "#FFFAE5";
251
+ "yellow-400": "#CCA900";
252
+ "yellow-500": "#FFD300";
253
+ "pink-0": "#FFF5FF";
254
+ "pink-400": "#F966FF";
255
+ "red-0": "#E85D7F";
256
+ "red-100": "#DC5879";
257
+ "red-500": "#E91C11";
258
+ "red-600": "#BE1809";
259
+ "orange-100": "#FFE8CC";
260
+ "orange-500": "#FF8C00";
261
+ "hyper-400": "#5533FF";
262
+ "hyper-500": "#3A10E5";
263
+ "gray-100": "#F5F5F5";
264
+ "gray-300": "#E0E0E0";
265
+ "gray-800": "#616161";
266
+ "gray-200": "#EEEEEE";
267
+ "gray-600": "#9E9E9E";
268
+ "gray-900": "#424242";
269
+ "white-100": string;
270
+ "white-300": string;
271
+ "white-400": string;
272
+ "white-500": string;
273
+ "white-200": string;
274
+ "white-600": string;
275
+ "white-700": string;
276
+ };
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)
@@ -126,7 +126,7 @@ export const platformSwatches = {
126
126
  '300': '#B3CCFF'
127
127
  }
128
128
  };
129
- const truePlatformColors = {
129
+ export const truePlatformColors = {
130
130
  lightBeige: platformSwatches.beige[0],
131
131
  gold: platformSwatches.gold[800],
132
132
  teal: platformSwatches.teal[500],
@@ -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",
4
+ "version": "17.5.2-alpha.02230c.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": "d6cc3657e862a5035076570bf9f29a3a0b936290"
37
+ "gitHead": "3a0a2efebd5e310bfe2121c0a18487550a141e80"
38
38
  }