@codecademy/gamut-styles 17.6.5-alpha.fed1a2.0 → 17.7.0-alpha.1dc930.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 +40 -73
  2. package/dist/themes/core.d.ts +22 -36
  3. package/dist/themes/core.js +10 -13
  4. package/dist/themes/lxStudio.d.ts +42 -79
  5. package/dist/themes/platform.d.ts +81 -115
  6. package/dist/themes/platform.js +15 -18
  7. package/dist/variables/colors.d.ts +10 -22
  8. package/dist/variables/colors.js +7 -11
  9. package/dist/variables/responsive.d.ts +8 -0
  10. package/dist/variables/responsive.js +8 -0
  11. package/package.json +3 -3
package/dist/themes/admin.d.ts CHANGED
@@ -1,4 +1,9 @@
1
1
  export declare const adminTheme: Record<"breakpoints", {
2
+ c_xs: string;
3
+ c_sm: string;
4
+ c_md: string;
5
+ c_lg: string;
6
+ c_xl: string;
2
7
  xs: string;
3
8
  sm: string;
4
9
  md: string;
@@ -11,6 +16,11 @@ export declare const adminTheme: Record<"breakpoints", {
11
16
  };
12
17
  readonly headerZ: 15;
13
18
  }, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
19
+ c_xs: string;
20
+ c_sm: string;
21
+ c_md: string;
22
+ c_lg: string;
23
+ c_xl: string;
14
24
  xs: string;
15
25
  sm: string;
16
26
  md: string;
@@ -18,6 +28,11 @@ export declare const adminTheme: Record<"breakpoints", {
18
28
  xl: string;
19
29
  }> & import("@codecademy/variance/dist/createTheme/types").Merge<{
20
30
  breakpoints: {
31
+ c_xs: string;
32
+ c_sm: string;
33
+ c_md: string;
34
+ c_lg: string;
35
+ c_xl: string;
21
36
  xs: string;
22
37
  sm: string;
23
38
  md: string;
@@ -119,19 +134,15 @@ export declare const adminTheme: Record<"breakpoints", {
119
134
  readonly "green-100": "#EAFDC6";
120
135
  readonly "green-400": "#AEE938";
121
136
  readonly "green-700": "#008A27";
122
- readonly "green-900": "#151C07";
123
137
  readonly "yellow-0": "#FFFAE5";
124
138
  readonly "yellow-400": "#CCA900";
125
139
  readonly "yellow-500": "#FFD300";
126
- readonly "yellow-900": "#211B00";
127
140
  readonly "pink-0": "#FFF5FF";
128
141
  readonly "pink-400": "#F966FF";
129
- readonly "red-0": "#FBF1F0";
130
- readonly "red-300": "#E85D7F";
131
- readonly "red-400": "#DC5879";
142
+ readonly "red-0": "#E85D7F";
143
+ readonly "red-100": "#DC5879";
132
144
  readonly "red-500": "#E91C11";
133
145
  readonly "red-600": "#BE1809";
134
- readonly "red-900": "#280503";
135
146
  readonly "orange-100": "#FFE8CC";
136
147
  readonly "orange-500": "#FF8C00";
137
148
  readonly "hyper-400": "#5533FF";
@@ -170,9 +181,6 @@ export declare const adminTheme: Record<"breakpoints", {
170
181
  selected: "navy-100";
171
182
  disabled: "navy-200";
172
183
  hover: "navy-200";
173
- success: "green-0";
174
- warning: "yellow-0";
175
- error: "red-0";
176
184
  };
177
185
  shadow: {
178
186
  primary: "navy-800";
@@ -209,7 +217,7 @@ export declare const adminTheme: Record<"breakpoints", {
209
217
  secondary: "white-600";
210
218
  };
211
219
  feedback: {
212
- error: "red-300";
220
+ error: "red-0";
213
221
  success: "green-400";
214
222
  warning: "yellow-0";
215
223
  };
@@ -221,9 +229,6 @@ export declare const adminTheme: Record<"breakpoints", {
221
229
  selected: "white-100";
222
230
  disabled: "white-200";
223
231
  hover: "white-200";
224
- success: "green-900";
225
- warning: "yellow-900";
226
- error: "red-900";
227
232
  };
228
233
  shadow: {
229
234
  primary: "white";
@@ -239,8 +244,8 @@ export declare const adminTheme: Record<"breakpoints", {
239
244
  hover: "white-700";
240
245
  };
241
246
  danger: {
242
- _: "red-300";
243
- hover: "red-400";
247
+ _: "red-0";
248
+ hover: "red-100";
244
249
  };
245
250
  interface: {
246
251
  _: "yellow-500";
@@ -291,19 +296,15 @@ export declare const adminTheme: Record<"breakpoints", {
291
296
  readonly "green-100": "#EAFDC6";
292
297
  readonly "green-400": "#AEE938";
293
298
  readonly "green-700": "#008A27";
294
- readonly "green-900": "#151C07";
295
299
  readonly "yellow-0": "#FFFAE5";
296
300
  readonly "yellow-400": "#CCA900";
297
301
  readonly "yellow-500": "#FFD300";
298
- readonly "yellow-900": "#211B00";
299
302
  readonly "pink-0": "#FFF5FF";
300
303
  readonly "pink-400": "#F966FF";
301
- readonly "red-0": "#FBF1F0";
302
- readonly "red-300": "#E85D7F";
303
- readonly "red-400": "#DC5879";
304
+ readonly "red-0": "#E85D7F";
305
+ readonly "red-100": "#DC5879";
304
306
  readonly "red-500": "#E91C11";
305
307
  readonly "red-600": "#BE1809";
306
- readonly "red-900": "#280503";
307
308
  readonly "orange-100": "#FFE8CC";
308
309
  readonly "orange-500": "#FF8C00";
309
310
  readonly "hyper-400": "#5533FF";
@@ -343,9 +344,6 @@ export declare const adminTheme: Record<"breakpoints", {
343
344
  selected: "navy-100";
344
345
  disabled: "navy-200";
345
346
  hover: "navy-200";
346
- success: "green-0";
347
- warning: "yellow-0";
348
- error: "red-0";
349
347
  };
350
348
  shadow: {
351
349
  primary: "navy-800";
@@ -383,7 +381,7 @@ export declare const adminTheme: Record<"breakpoints", {
383
381
  secondary: "white-600";
384
382
  };
385
383
  feedback: {
386
- error: "red-300";
384
+ error: "red-0";
387
385
  success: "green-400";
388
386
  warning: "yellow-0";
389
387
  };
@@ -395,9 +393,6 @@ export declare const adminTheme: Record<"breakpoints", {
395
393
  selected: "white-100";
396
394
  disabled: "white-200";
397
395
  hover: "white-200";
398
- success: "green-900";
399
- warning: "yellow-900";
400
- error: "red-900";
401
396
  };
402
397
  shadow: {
403
398
  primary: "white";
@@ -413,8 +408,8 @@ export declare const adminTheme: Record<"breakpoints", {
413
408
  hover: "white-700";
414
409
  };
415
410
  danger: {
416
- _: "red-300";
417
- hover: "red-400";
411
+ _: "red-0";
412
+ hover: "red-100";
418
413
  };
419
414
  interface: {
420
415
  _: "yellow-500";
@@ -468,19 +463,15 @@ export declare const adminTheme: Record<"breakpoints", {
468
463
  readonly "green-100": "#EAFDC6";
469
464
  readonly "green-400": "#AEE938";
470
465
  readonly "green-700": "#008A27";
471
- readonly "green-900": "#151C07";
472
466
  readonly "yellow-0": "#FFFAE5";
473
467
  readonly "yellow-400": "#CCA900";
474
468
  readonly "yellow-500": "#FFD300";
475
- readonly "yellow-900": "#211B00";
476
469
  readonly "pink-0": "#FFF5FF";
477
470
  readonly "pink-400": "#F966FF";
478
- readonly "red-0": "#FBF1F0";
479
- readonly "red-300": "#E85D7F";
480
- readonly "red-400": "#DC5879";
471
+ readonly "red-0": "#E85D7F";
472
+ readonly "red-100": "#DC5879";
481
473
  readonly "red-500": "#E91C11";
482
474
  readonly "red-600": "#BE1809";
483
- readonly "red-900": "#280503";
484
475
  readonly "orange-100": "#FFE8CC";
485
476
  readonly "orange-500": "#FF8C00";
486
477
  readonly "hyper-400": "#5533FF";
@@ -551,19 +542,15 @@ export declare const adminTheme: Record<"breakpoints", {
551
542
  readonly "green-100": "#EAFDC6";
552
543
  readonly "green-400": "#AEE938";
553
544
  readonly "green-700": "#008A27";
554
- readonly "green-900": "#151C07";
555
545
  readonly "yellow-0": "#FFFAE5";
556
546
  readonly "yellow-400": "#CCA900";
557
547
  readonly "yellow-500": "#FFD300";
558
- readonly "yellow-900": "#211B00";
559
548
  readonly "pink-0": "#FFF5FF";
560
549
  readonly "pink-400": "#F966FF";
561
- readonly "red-0": "#FBF1F0";
562
- readonly "red-300": "#E85D7F";
563
- readonly "red-400": "#DC5879";
550
+ readonly "red-0": "#E85D7F";
551
+ readonly "red-100": "#DC5879";
564
552
  readonly "red-500": "#E91C11";
565
553
  readonly "red-600": "#BE1809";
566
- readonly "red-900": "#280503";
567
554
  readonly "orange-100": "#FFE8CC";
568
555
  readonly "orange-500": "#FF8C00";
569
556
  readonly "hyper-400": "#5533FF";
@@ -601,9 +588,6 @@ export declare const adminTheme: Record<"breakpoints", {
601
588
  selected: "navy-100";
602
589
  disabled: "navy-200";
603
590
  hover: "navy-200";
604
- success: "green-0";
605
- warning: "yellow-0";
606
- error: "red-0";
607
591
  };
608
592
  shadow: {
609
593
  primary: "navy-800";
@@ -640,7 +624,7 @@ export declare const adminTheme: Record<"breakpoints", {
640
624
  secondary: "white-600";
641
625
  };
642
626
  feedback: {
643
- error: "red-300";
627
+ error: "red-0";
644
628
  success: "green-400";
645
629
  warning: "yellow-0";
646
630
  };
@@ -652,9 +636,6 @@ export declare const adminTheme: Record<"breakpoints", {
652
636
  selected: "white-100";
653
637
  disabled: "white-200";
654
638
  hover: "white-200";
655
- success: "green-900";
656
- warning: "yellow-900";
657
- error: "red-900";
658
639
  };
659
640
  shadow: {
660
641
  primary: "white";
@@ -670,8 +651,8 @@ export declare const adminTheme: Record<"breakpoints", {
670
651
  hover: "white-700";
671
652
  };
672
653
  danger: {
673
- _: "red-300";
674
- hover: "red-400";
654
+ _: "red-0";
655
+ hover: "red-100";
675
656
  };
676
657
  interface: {
677
658
  _: "yellow-500";
@@ -722,19 +703,15 @@ export declare const adminTheme: Record<"breakpoints", {
722
703
  readonly "green-100": "#EAFDC6";
723
704
  readonly "green-400": "#AEE938";
724
705
  readonly "green-700": "#008A27";
725
- readonly "green-900": "#151C07";
726
706
  readonly "yellow-0": "#FFFAE5";
727
707
  readonly "yellow-400": "#CCA900";
728
708
  readonly "yellow-500": "#FFD300";
729
- readonly "yellow-900": "#211B00";
730
709
  readonly "pink-0": "#FFF5FF";
731
710
  readonly "pink-400": "#F966FF";
732
- readonly "red-0": "#FBF1F0";
733
- readonly "red-300": "#E85D7F";
734
- readonly "red-400": "#DC5879";
711
+ readonly "red-0": "#E85D7F";
712
+ readonly "red-100": "#DC5879";
735
713
  readonly "red-500": "#E91C11";
736
714
  readonly "red-600": "#BE1809";
737
- readonly "red-900": "#280503";
738
715
  readonly "orange-100": "#FFE8CC";
739
716
  readonly "orange-500": "#FF8C00";
740
717
  readonly "hyper-400": "#5533FF";
@@ -774,9 +751,6 @@ export declare const adminTheme: Record<"breakpoints", {
774
751
  selected: "navy-100";
775
752
  disabled: "navy-200";
776
753
  hover: "navy-200";
777
- success: "green-0";
778
- warning: "yellow-0";
779
- error: "red-0";
780
754
  };
781
755
  shadow: {
782
756
  primary: "navy-800";
@@ -814,7 +788,7 @@ export declare const adminTheme: Record<"breakpoints", {
814
788
  secondary: "white-600";
815
789
  };
816
790
  feedback: {
817
- error: "red-300";
791
+ error: "red-0";
818
792
  success: "green-400";
819
793
  warning: "yellow-0";
820
794
  };
@@ -826,9 +800,6 @@ export declare const adminTheme: Record<"breakpoints", {
826
800
  selected: "white-100";
827
801
  disabled: "white-200";
828
802
  hover: "white-200";
829
- success: "green-900";
830
- warning: "yellow-900";
831
- error: "red-900";
832
803
  };
833
804
  shadow: {
834
805
  primary: "white";
@@ -844,8 +815,8 @@ export declare const adminTheme: Record<"breakpoints", {
844
815
  hover: "white-700";
845
816
  };
846
817
  danger: {
847
- _: "red-300";
848
- hover: "red-400";
818
+ _: "red-0";
819
+ hover: "red-100";
849
820
  };
850
821
  interface: {
851
822
  _: "yellow-500";
@@ -911,19 +882,15 @@ export declare const adminTheme: Record<"breakpoints", {
911
882
  readonly "green-100": "#EAFDC6";
912
883
  readonly "green-400": "#AEE938";
913
884
  readonly "green-700": "#008A27";
914
- readonly "green-900": "#151C07";
915
885
  readonly "yellow-0": "#FFFAE5";
916
886
  readonly "yellow-400": "#CCA900";
917
887
  readonly "yellow-500": "#FFD300";
918
- readonly "yellow-900": "#211B00";
919
888
  readonly "pink-0": "#FFF5FF";
920
889
  readonly "pink-400": "#F966FF";
921
- readonly "red-0": "#FBF1F0";
922
- readonly "red-300": "#E85D7F";
923
- readonly "red-400": "#DC5879";
890
+ readonly "red-0": "#E85D7F";
891
+ readonly "red-100": "#DC5879";
924
892
  readonly "red-500": "#E91C11";
925
893
  readonly "red-600": "#BE1809";
926
- readonly "red-900": "#280503";
927
894
  readonly "orange-100": "#FFE8CC";
928
895
  readonly "orange-500": "#FF8C00";
929
896
  readonly "hyper-400": "#5533FF";
@@ -941,7 +908,7 @@ export declare const adminTheme: Record<"breakpoints", {
941
908
  readonly "white-200": string;
942
909
  readonly "white-600": string;
943
910
  readonly "white-700": string;
944
- }, "-"> | "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-error" | "background-success" | "background-warning" | "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") => string;
911
+ }, "-"> | "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") => string;
945
912
  }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
946
913
  export type AdminThemeShape = typeof adminTheme;
947
914
  export interface AdminTheme extends AdminThemeShape {
package/dist/themes/core.d.ts CHANGED
@@ -10,6 +10,11 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
10
10
  };
11
11
  readonly headerZ: 15;
12
12
  }, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
13
+ c_xs: string;
14
+ c_sm: string;
15
+ c_md: string;
16
+ c_lg: string;
17
+ c_xl: string;
13
18
  xs: string;
14
19
  sm: string;
15
20
  md: string;
@@ -17,6 +22,11 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
17
22
  xl: string;
18
23
  }> & import("@codecademy/variance/dist/createTheme/types").Merge<{
19
24
  breakpoints: {
25
+ c_xs: string;
26
+ c_sm: string;
27
+ c_md: string;
28
+ c_lg: string;
29
+ c_xl: string;
20
30
  xs: string;
21
31
  sm: string;
22
32
  md: string;
@@ -118,19 +128,15 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
118
128
  readonly "green-100": "#EAFDC6";
119
129
  readonly "green-400": "#AEE938";
120
130
  readonly "green-700": "#008A27";
121
- readonly "green-900": "#151C07";
122
131
  readonly "yellow-0": "#FFFAE5";
123
132
  readonly "yellow-400": "#CCA900";
124
133
  readonly "yellow-500": "#FFD300";
125
- readonly "yellow-900": "#211B00";
126
134
  readonly "pink-0": "#FFF5FF";
127
135
  readonly "pink-400": "#F966FF";
128
- readonly "red-0": "#FBF1F0";
129
- readonly "red-300": "#E85D7F";
130
- readonly "red-400": "#DC5879";
136
+ readonly "red-0": "#E85D7F";
137
+ readonly "red-100": "#DC5879";
131
138
  readonly "red-500": "#E91C11";
132
139
  readonly "red-600": "#BE1809";
133
- readonly "red-900": "#280503";
134
140
  readonly "orange-100": "#FFE8CC";
135
141
  readonly "orange-500": "#FF8C00";
136
142
  readonly "hyper-400": "#5533FF";
@@ -169,9 +175,6 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
169
175
  selected: "navy-100";
170
176
  disabled: "navy-200";
171
177
  hover: "navy-200";
172
- success: "green-0";
173
- warning: "yellow-0";
174
- error: "red-0";
175
178
  };
176
179
  shadow: {
177
180
  primary: "navy-800";
@@ -208,7 +211,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
208
211
  secondary: "white-600";
209
212
  };
210
213
  feedback: {
211
- error: "red-300";
214
+ error: "red-0";
212
215
  success: "green-400";
213
216
  warning: "yellow-0";
214
217
  };
@@ -220,9 +223,6 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
220
223
  selected: "white-100";
221
224
  disabled: "white-200";
222
225
  hover: "white-200";
223
- success: "green-900";
224
- warning: "yellow-900";
225
- error: "red-900";
226
226
  };
227
227
  shadow: {
228
228
  primary: "white";
@@ -238,8 +238,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
238
238
  hover: "white-700";
239
239
  };
240
240
  danger: {
241
- _: "red-300";
242
- hover: "red-400";
241
+ _: "red-0";
242
+ hover: "red-100";
243
243
  };
244
244
  interface: {
245
245
  _: "yellow-500";
@@ -290,19 +290,15 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
290
290
  readonly "green-100": "#EAFDC6";
291
291
  readonly "green-400": "#AEE938";
292
292
  readonly "green-700": "#008A27";
293
- readonly "green-900": "#151C07";
294
293
  readonly "yellow-0": "#FFFAE5";
295
294
  readonly "yellow-400": "#CCA900";
296
295
  readonly "yellow-500": "#FFD300";
297
- readonly "yellow-900": "#211B00";
298
296
  readonly "pink-0": "#FFF5FF";
299
297
  readonly "pink-400": "#F966FF";
300
- readonly "red-0": "#FBF1F0";
301
- readonly "red-300": "#E85D7F";
302
- readonly "red-400": "#DC5879";
298
+ readonly "red-0": "#E85D7F";
299
+ readonly "red-100": "#DC5879";
303
300
  readonly "red-500": "#E91C11";
304
301
  readonly "red-600": "#BE1809";
305
- readonly "red-900": "#280503";
306
302
  readonly "orange-100": "#FFE8CC";
307
303
  readonly "orange-500": "#FF8C00";
308
304
  readonly "hyper-400": "#5533FF";
@@ -342,9 +338,6 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
342
338
  selected: "navy-100";
343
339
  disabled: "navy-200";
344
340
  hover: "navy-200";
345
- success: "green-0";
346
- warning: "yellow-0";
347
- error: "red-0";
348
341
  };
349
342
  shadow: {
350
343
  primary: "navy-800";
@@ -382,7 +375,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
382
375
  secondary: "white-600";
383
376
  };
384
377
  feedback: {
385
- error: "red-300";
378
+ error: "red-0";
386
379
  success: "green-400";
387
380
  warning: "yellow-0";
388
381
  };
@@ -394,9 +387,6 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
394
387
  selected: "white-100";
395
388
  disabled: "white-200";
396
389
  hover: "white-200";
397
- success: "green-900";
398
- warning: "yellow-900";
399
- error: "red-900";
400
390
  };
401
391
  shadow: {
402
392
  primary: "white";
@@ -412,8 +402,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
412
402
  hover: "white-700";
413
403
  };
414
404
  danger: {
415
- _: "red-300";
416
- hover: "red-400";
405
+ _: "red-0";
406
+ hover: "red-100";
417
407
  };
418
408
  interface: {
419
409
  _: "yellow-500";
@@ -467,19 +457,15 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
467
457
  readonly "green-100": "#EAFDC6";
468
458
  readonly "green-400": "#AEE938";
469
459
  readonly "green-700": "#008A27";
470
- readonly "green-900": "#151C07";
471
460
  readonly "yellow-0": "#FFFAE5";
472
461
  readonly "yellow-400": "#CCA900";
473
462
  readonly "yellow-500": "#FFD300";
474
- readonly "yellow-900": "#211B00";
475
463
  readonly "pink-0": "#FFF5FF";
476
464
  readonly "pink-400": "#F966FF";
477
- readonly "red-0": "#FBF1F0";
478
- readonly "red-300": "#E85D7F";
479
- readonly "red-400": "#DC5879";
465
+ readonly "red-0": "#E85D7F";
466
+ readonly "red-100": "#DC5879";
480
467
  readonly "red-500": "#E91C11";
481
468
  readonly "red-600": "#BE1809";
482
- readonly "red-900": "#280503";
483
469
  readonly "orange-100": "#FFE8CC";
484
470
  readonly "orange-500": "#FF8C00";
485
471
  readonly "hyper-400": "#5533FF";
package/dist/themes/core.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { createTheme } from '@codecademy/variance';
2
- import { borderRadii, corePalette, elements, fontFamily, fontSize, fontWeight, lineHeight, mediaQueries, spacing } from '../variables';
2
+ import { borderRadii, containerQueries, corePalette, elements, fontFamily, fontSize, fontWeight, lineHeight, mediaQueries, spacing } from '../variables';
3
3
 
4
4
  /**
5
5
  * @description This is the core theme that all other Codecademy themes are extended from
@@ -8,7 +8,10 @@ import { borderRadii, corePalette, elements, fontFamily, fontSize, fontWeight, l
8
8
  */
9
9
 
10
10
  export const coreTheme = createTheme({
11
- breakpoints: mediaQueries,
11
+ breakpoints: {
12
+ ...mediaQueries,
13
+ ...containerQueries
14
+ },
12
15
  borderRadii,
13
16
  fontSize,
14
17
  fontFamily,
@@ -36,10 +39,7 @@ export const coreTheme = createTheme({
36
39
  primary: 'beige',
37
40
  selected: 'navy-100',
38
41
  disabled: 'navy-200',
39
- hover: 'navy-200',
40
- success: 'green-0',
41
- warning: 'yellow-0',
42
- error: 'red-0'
42
+ hover: 'navy-200'
43
43
  },
44
44
  shadow: {
45
45
  primary: 'navy-800',
@@ -77,7 +77,7 @@ export const coreTheme = createTheme({
77
77
  secondary: 'white-600'
78
78
  },
79
79
  feedback: {
80
- error: 'red-300',
80
+ error: 'red-0',
81
81
  success: 'green-400',
82
82
  warning: 'yellow-0'
83
83
  },
@@ -88,10 +88,7 @@ export const coreTheme = createTheme({
88
88
  primary: 'navy-900',
89
89
  selected: 'white-100',
90
90
  disabled: 'white-200',
91
- hover: 'white-200',
92
- success: 'green-900',
93
- warning: 'yellow-900',
94
- error: 'red-900'
91
+ hover: 'white-200'
95
92
  },
96
93
  shadow: {
97
94
  primary: 'white',
@@ -107,8 +104,8 @@ export const coreTheme = createTheme({
107
104
  hover: 'white-700'
108
105
  },
109
106
  danger: {
110
- _: 'red-300',
111
- hover: 'red-400'
107
+ _: 'red-0',
108
+ hover: 'red-100'
112
109
  },
113
110
  interface: {
114
111
  _: 'yellow-500',