@codecademy/gamut-styles 17.7.0-alpha.fc9d3e.0 → 17.7.1-alpha.519a2d.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.
@@ -8,6 +8,7 @@ export interface GamutProviderProps {
8
8
  theme: Theme;
9
9
  variables?: Record<string, CSSObject>;
10
10
  cache?: EmotionCache;
11
+ nonce?: string;
11
12
  }
12
13
  export declare const GamutContext: React.Context<{
13
14
  hasGlobals?: boolean | undefined;
@@ -18,7 +18,8 @@ export const GamutProvider = _ref => {
18
18
  theme = coreTheme,
19
19
  variables,
20
20
  useGlobals = true,
21
- useCache = true
21
+ useCache = true,
22
+ nonce
22
23
  } = _ref;
23
24
  const {
24
25
  hasGlobals,
@@ -28,7 +29,9 @@ export const GamutProvider = _ref => {
28
29
  const shouldInsertGlobals = useGlobals && !hasGlobals;
29
30
 
30
31
  // Do not initialize a new cache if one has been provided as props
31
- const activeCache = useRef(shouldCreateCache && (cache ?? createEmotionCache()));
32
+ const activeCache = useRef(shouldCreateCache && (cache ?? createEmotionCache({
33
+ nonce
34
+ })));
32
35
  const contextValue = {
33
36
  hasGlobals: shouldInsertGlobals,
34
37
  hasCache: shouldCreateCache
@@ -134,15 +134,19 @@ export declare const adminTheme: Record<"breakpoints", {
134
134
  readonly "green-100": "#EAFDC6";
135
135
  readonly "green-400": "#AEE938";
136
136
  readonly "green-700": "#008A27";
137
+ readonly "green-900": "#151C07";
137
138
  readonly "yellow-0": "#FFFAE5";
138
139
  readonly "yellow-400": "#CCA900";
139
140
  readonly "yellow-500": "#FFD300";
141
+ readonly "yellow-900": "#211B00";
140
142
  readonly "pink-0": "#FFF5FF";
141
143
  readonly "pink-400": "#F966FF";
142
- readonly "red-0": "#E85D7F";
143
- readonly "red-100": "#DC5879";
144
+ readonly "red-0": "#FBF1F0";
145
+ readonly "red-300": "#E85D7F";
146
+ readonly "red-400": "#DC5879";
144
147
  readonly "red-500": "#E91C11";
145
148
  readonly "red-600": "#BE1809";
149
+ readonly "red-900": "#280503";
146
150
  readonly "orange-100": "#FFE8CC";
147
151
  readonly "orange-500": "#FF8C00";
148
152
  readonly "hyper-400": "#5533FF";
@@ -181,6 +185,9 @@ export declare const adminTheme: Record<"breakpoints", {
181
185
  selected: "navy-100";
182
186
  disabled: "navy-200";
183
187
  hover: "navy-200";
188
+ success: "green-0";
189
+ warning: "yellow-0";
190
+ error: "red-0";
184
191
  };
185
192
  shadow: {
186
193
  primary: "navy-800";
@@ -217,7 +224,7 @@ export declare const adminTheme: Record<"breakpoints", {
217
224
  secondary: "white-600";
218
225
  };
219
226
  feedback: {
220
- error: "red-0";
227
+ error: "red-300";
221
228
  success: "green-400";
222
229
  warning: "yellow-0";
223
230
  };
@@ -229,6 +236,9 @@ export declare const adminTheme: Record<"breakpoints", {
229
236
  selected: "white-100";
230
237
  disabled: "white-200";
231
238
  hover: "white-200";
239
+ success: "green-900";
240
+ warning: "yellow-900";
241
+ error: "red-900";
232
242
  };
233
243
  shadow: {
234
244
  primary: "white";
@@ -244,8 +254,8 @@ export declare const adminTheme: Record<"breakpoints", {
244
254
  hover: "white-700";
245
255
  };
246
256
  danger: {
247
- _: "red-0";
248
- hover: "red-100";
257
+ _: "red-300";
258
+ hover: "red-400";
249
259
  };
250
260
  interface: {
251
261
  _: "yellow-500";
@@ -296,15 +306,19 @@ export declare const adminTheme: Record<"breakpoints", {
296
306
  readonly "green-100": "#EAFDC6";
297
307
  readonly "green-400": "#AEE938";
298
308
  readonly "green-700": "#008A27";
309
+ readonly "green-900": "#151C07";
299
310
  readonly "yellow-0": "#FFFAE5";
300
311
  readonly "yellow-400": "#CCA900";
301
312
  readonly "yellow-500": "#FFD300";
313
+ readonly "yellow-900": "#211B00";
302
314
  readonly "pink-0": "#FFF5FF";
303
315
  readonly "pink-400": "#F966FF";
304
- readonly "red-0": "#E85D7F";
305
- readonly "red-100": "#DC5879";
316
+ readonly "red-0": "#FBF1F0";
317
+ readonly "red-300": "#E85D7F";
318
+ readonly "red-400": "#DC5879";
306
319
  readonly "red-500": "#E91C11";
307
320
  readonly "red-600": "#BE1809";
321
+ readonly "red-900": "#280503";
308
322
  readonly "orange-100": "#FFE8CC";
309
323
  readonly "orange-500": "#FF8C00";
310
324
  readonly "hyper-400": "#5533FF";
@@ -344,6 +358,9 @@ export declare const adminTheme: Record<"breakpoints", {
344
358
  selected: "navy-100";
345
359
  disabled: "navy-200";
346
360
  hover: "navy-200";
361
+ success: "green-0";
362
+ warning: "yellow-0";
363
+ error: "red-0";
347
364
  };
348
365
  shadow: {
349
366
  primary: "navy-800";
@@ -381,7 +398,7 @@ export declare const adminTheme: Record<"breakpoints", {
381
398
  secondary: "white-600";
382
399
  };
383
400
  feedback: {
384
- error: "red-0";
401
+ error: "red-300";
385
402
  success: "green-400";
386
403
  warning: "yellow-0";
387
404
  };
@@ -393,6 +410,9 @@ export declare const adminTheme: Record<"breakpoints", {
393
410
  selected: "white-100";
394
411
  disabled: "white-200";
395
412
  hover: "white-200";
413
+ success: "green-900";
414
+ warning: "yellow-900";
415
+ error: "red-900";
396
416
  };
397
417
  shadow: {
398
418
  primary: "white";
@@ -408,8 +428,8 @@ export declare const adminTheme: Record<"breakpoints", {
408
428
  hover: "white-700";
409
429
  };
410
430
  danger: {
411
- _: "red-0";
412
- hover: "red-100";
431
+ _: "red-300";
432
+ hover: "red-400";
413
433
  };
414
434
  interface: {
415
435
  _: "yellow-500";
@@ -463,15 +483,19 @@ export declare const adminTheme: Record<"breakpoints", {
463
483
  readonly "green-100": "#EAFDC6";
464
484
  readonly "green-400": "#AEE938";
465
485
  readonly "green-700": "#008A27";
486
+ readonly "green-900": "#151C07";
466
487
  readonly "yellow-0": "#FFFAE5";
467
488
  readonly "yellow-400": "#CCA900";
468
489
  readonly "yellow-500": "#FFD300";
490
+ readonly "yellow-900": "#211B00";
469
491
  readonly "pink-0": "#FFF5FF";
470
492
  readonly "pink-400": "#F966FF";
471
- readonly "red-0": "#E85D7F";
472
- readonly "red-100": "#DC5879";
493
+ readonly "red-0": "#FBF1F0";
494
+ readonly "red-300": "#E85D7F";
495
+ readonly "red-400": "#DC5879";
473
496
  readonly "red-500": "#E91C11";
474
497
  readonly "red-600": "#BE1809";
498
+ readonly "red-900": "#280503";
475
499
  readonly "orange-100": "#FFE8CC";
476
500
  readonly "orange-500": "#FF8C00";
477
501
  readonly "hyper-400": "#5533FF";
@@ -542,15 +566,19 @@ export declare const adminTheme: Record<"breakpoints", {
542
566
  readonly "green-100": "#EAFDC6";
543
567
  readonly "green-400": "#AEE938";
544
568
  readonly "green-700": "#008A27";
569
+ readonly "green-900": "#151C07";
545
570
  readonly "yellow-0": "#FFFAE5";
546
571
  readonly "yellow-400": "#CCA900";
547
572
  readonly "yellow-500": "#FFD300";
573
+ readonly "yellow-900": "#211B00";
548
574
  readonly "pink-0": "#FFF5FF";
549
575
  readonly "pink-400": "#F966FF";
550
- readonly "red-0": "#E85D7F";
551
- readonly "red-100": "#DC5879";
576
+ readonly "red-0": "#FBF1F0";
577
+ readonly "red-300": "#E85D7F";
578
+ readonly "red-400": "#DC5879";
552
579
  readonly "red-500": "#E91C11";
553
580
  readonly "red-600": "#BE1809";
581
+ readonly "red-900": "#280503";
554
582
  readonly "orange-100": "#FFE8CC";
555
583
  readonly "orange-500": "#FF8C00";
556
584
  readonly "hyper-400": "#5533FF";
@@ -588,6 +616,9 @@ export declare const adminTheme: Record<"breakpoints", {
588
616
  selected: "navy-100";
589
617
  disabled: "navy-200";
590
618
  hover: "navy-200";
619
+ success: "green-0";
620
+ warning: "yellow-0";
621
+ error: "red-0";
591
622
  };
592
623
  shadow: {
593
624
  primary: "navy-800";
@@ -624,7 +655,7 @@ export declare const adminTheme: Record<"breakpoints", {
624
655
  secondary: "white-600";
625
656
  };
626
657
  feedback: {
627
- error: "red-0";
658
+ error: "red-300";
628
659
  success: "green-400";
629
660
  warning: "yellow-0";
630
661
  };
@@ -636,6 +667,9 @@ export declare const adminTheme: Record<"breakpoints", {
636
667
  selected: "white-100";
637
668
  disabled: "white-200";
638
669
  hover: "white-200";
670
+ success: "green-900";
671
+ warning: "yellow-900";
672
+ error: "red-900";
639
673
  };
640
674
  shadow: {
641
675
  primary: "white";
@@ -651,8 +685,8 @@ export declare const adminTheme: Record<"breakpoints", {
651
685
  hover: "white-700";
652
686
  };
653
687
  danger: {
654
- _: "red-0";
655
- hover: "red-100";
688
+ _: "red-300";
689
+ hover: "red-400";
656
690
  };
657
691
  interface: {
658
692
  _: "yellow-500";
@@ -703,15 +737,19 @@ export declare const adminTheme: Record<"breakpoints", {
703
737
  readonly "green-100": "#EAFDC6";
704
738
  readonly "green-400": "#AEE938";
705
739
  readonly "green-700": "#008A27";
740
+ readonly "green-900": "#151C07";
706
741
  readonly "yellow-0": "#FFFAE5";
707
742
  readonly "yellow-400": "#CCA900";
708
743
  readonly "yellow-500": "#FFD300";
744
+ readonly "yellow-900": "#211B00";
709
745
  readonly "pink-0": "#FFF5FF";
710
746
  readonly "pink-400": "#F966FF";
711
- readonly "red-0": "#E85D7F";
712
- readonly "red-100": "#DC5879";
747
+ readonly "red-0": "#FBF1F0";
748
+ readonly "red-300": "#E85D7F";
749
+ readonly "red-400": "#DC5879";
713
750
  readonly "red-500": "#E91C11";
714
751
  readonly "red-600": "#BE1809";
752
+ readonly "red-900": "#280503";
715
753
  readonly "orange-100": "#FFE8CC";
716
754
  readonly "orange-500": "#FF8C00";
717
755
  readonly "hyper-400": "#5533FF";
@@ -751,6 +789,9 @@ export declare const adminTheme: Record<"breakpoints", {
751
789
  selected: "navy-100";
752
790
  disabled: "navy-200";
753
791
  hover: "navy-200";
792
+ success: "green-0";
793
+ warning: "yellow-0";
794
+ error: "red-0";
754
795
  };
755
796
  shadow: {
756
797
  primary: "navy-800";
@@ -788,7 +829,7 @@ export declare const adminTheme: Record<"breakpoints", {
788
829
  secondary: "white-600";
789
830
  };
790
831
  feedback: {
791
- error: "red-0";
832
+ error: "red-300";
792
833
  success: "green-400";
793
834
  warning: "yellow-0";
794
835
  };
@@ -800,6 +841,9 @@ export declare const adminTheme: Record<"breakpoints", {
800
841
  selected: "white-100";
801
842
  disabled: "white-200";
802
843
  hover: "white-200";
844
+ success: "green-900";
845
+ warning: "yellow-900";
846
+ error: "red-900";
803
847
  };
804
848
  shadow: {
805
849
  primary: "white";
@@ -815,8 +859,8 @@ export declare const adminTheme: Record<"breakpoints", {
815
859
  hover: "white-700";
816
860
  };
817
861
  danger: {
818
- _: "red-0";
819
- hover: "red-100";
862
+ _: "red-300";
863
+ hover: "red-400";
820
864
  };
821
865
  interface: {
822
866
  _: "yellow-500";
@@ -882,15 +926,19 @@ export declare const adminTheme: Record<"breakpoints", {
882
926
  readonly "green-100": "#EAFDC6";
883
927
  readonly "green-400": "#AEE938";
884
928
  readonly "green-700": "#008A27";
929
+ readonly "green-900": "#151C07";
885
930
  readonly "yellow-0": "#FFFAE5";
886
931
  readonly "yellow-400": "#CCA900";
887
932
  readonly "yellow-500": "#FFD300";
933
+ readonly "yellow-900": "#211B00";
888
934
  readonly "pink-0": "#FFF5FF";
889
935
  readonly "pink-400": "#F966FF";
890
- readonly "red-0": "#E85D7F";
891
- readonly "red-100": "#DC5879";
936
+ readonly "red-0": "#FBF1F0";
937
+ readonly "red-300": "#E85D7F";
938
+ readonly "red-400": "#DC5879";
892
939
  readonly "red-500": "#E91C11";
893
940
  readonly "red-600": "#BE1809";
941
+ readonly "red-900": "#280503";
894
942
  readonly "orange-100": "#FFE8CC";
895
943
  readonly "orange-500": "#FF8C00";
896
944
  readonly "hyper-400": "#5533FF";
@@ -908,7 +956,7 @@ export declare const adminTheme: Record<"breakpoints", {
908
956
  readonly "white-200": string;
909
957
  readonly "white-600": string;
910
958
  readonly "white-700": 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;
959
+ }, "-"> | "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;
912
960
  }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
913
961
  export type AdminThemeShape = typeof adminTheme;
914
962
  export interface AdminTheme extends AdminThemeShape {
@@ -128,15 +128,19 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
128
128
  readonly "green-100": "#EAFDC6";
129
129
  readonly "green-400": "#AEE938";
130
130
  readonly "green-700": "#008A27";
131
+ readonly "green-900": "#151C07";
131
132
  readonly "yellow-0": "#FFFAE5";
132
133
  readonly "yellow-400": "#CCA900";
133
134
  readonly "yellow-500": "#FFD300";
135
+ readonly "yellow-900": "#211B00";
134
136
  readonly "pink-0": "#FFF5FF";
135
137
  readonly "pink-400": "#F966FF";
136
- readonly "red-0": "#E85D7F";
137
- readonly "red-100": "#DC5879";
138
+ readonly "red-0": "#FBF1F0";
139
+ readonly "red-300": "#E85D7F";
140
+ readonly "red-400": "#DC5879";
138
141
  readonly "red-500": "#E91C11";
139
142
  readonly "red-600": "#BE1809";
143
+ readonly "red-900": "#280503";
140
144
  readonly "orange-100": "#FFE8CC";
141
145
  readonly "orange-500": "#FF8C00";
142
146
  readonly "hyper-400": "#5533FF";
@@ -175,6 +179,9 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
175
179
  selected: "navy-100";
176
180
  disabled: "navy-200";
177
181
  hover: "navy-200";
182
+ success: "green-0";
183
+ warning: "yellow-0";
184
+ error: "red-0";
178
185
  };
179
186
  shadow: {
180
187
  primary: "navy-800";
@@ -211,7 +218,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
211
218
  secondary: "white-600";
212
219
  };
213
220
  feedback: {
214
- error: "red-0";
221
+ error: "red-300";
215
222
  success: "green-400";
216
223
  warning: "yellow-0";
217
224
  };
@@ -223,6 +230,9 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
223
230
  selected: "white-100";
224
231
  disabled: "white-200";
225
232
  hover: "white-200";
233
+ success: "green-900";
234
+ warning: "yellow-900";
235
+ error: "red-900";
226
236
  };
227
237
  shadow: {
228
238
  primary: "white";
@@ -238,8 +248,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
238
248
  hover: "white-700";
239
249
  };
240
250
  danger: {
241
- _: "red-0";
242
- hover: "red-100";
251
+ _: "red-300";
252
+ hover: "red-400";
243
253
  };
244
254
  interface: {
245
255
  _: "yellow-500";
@@ -290,15 +300,19 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
290
300
  readonly "green-100": "#EAFDC6";
291
301
  readonly "green-400": "#AEE938";
292
302
  readonly "green-700": "#008A27";
303
+ readonly "green-900": "#151C07";
293
304
  readonly "yellow-0": "#FFFAE5";
294
305
  readonly "yellow-400": "#CCA900";
295
306
  readonly "yellow-500": "#FFD300";
307
+ readonly "yellow-900": "#211B00";
296
308
  readonly "pink-0": "#FFF5FF";
297
309
  readonly "pink-400": "#F966FF";
298
- readonly "red-0": "#E85D7F";
299
- readonly "red-100": "#DC5879";
310
+ readonly "red-0": "#FBF1F0";
311
+ readonly "red-300": "#E85D7F";
312
+ readonly "red-400": "#DC5879";
300
313
  readonly "red-500": "#E91C11";
301
314
  readonly "red-600": "#BE1809";
315
+ readonly "red-900": "#280503";
302
316
  readonly "orange-100": "#FFE8CC";
303
317
  readonly "orange-500": "#FF8C00";
304
318
  readonly "hyper-400": "#5533FF";
@@ -338,6 +352,9 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
338
352
  selected: "navy-100";
339
353
  disabled: "navy-200";
340
354
  hover: "navy-200";
355
+ success: "green-0";
356
+ warning: "yellow-0";
357
+ error: "red-0";
341
358
  };
342
359
  shadow: {
343
360
  primary: "navy-800";
@@ -375,7 +392,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
375
392
  secondary: "white-600";
376
393
  };
377
394
  feedback: {
378
- error: "red-0";
395
+ error: "red-300";
379
396
  success: "green-400";
380
397
  warning: "yellow-0";
381
398
  };
@@ -387,6 +404,9 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
387
404
  selected: "white-100";
388
405
  disabled: "white-200";
389
406
  hover: "white-200";
407
+ success: "green-900";
408
+ warning: "yellow-900";
409
+ error: "red-900";
390
410
  };
391
411
  shadow: {
392
412
  primary: "white";
@@ -402,8 +422,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
402
422
  hover: "white-700";
403
423
  };
404
424
  danger: {
405
- _: "red-0";
406
- hover: "red-100";
425
+ _: "red-300";
426
+ hover: "red-400";
407
427
  };
408
428
  interface: {
409
429
  _: "yellow-500";
@@ -457,15 +477,19 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
457
477
  readonly "green-100": "#EAFDC6";
458
478
  readonly "green-400": "#AEE938";
459
479
  readonly "green-700": "#008A27";
480
+ readonly "green-900": "#151C07";
460
481
  readonly "yellow-0": "#FFFAE5";
461
482
  readonly "yellow-400": "#CCA900";
462
483
  readonly "yellow-500": "#FFD300";
484
+ readonly "yellow-900": "#211B00";
463
485
  readonly "pink-0": "#FFF5FF";
464
486
  readonly "pink-400": "#F966FF";
465
- readonly "red-0": "#E85D7F";
466
- readonly "red-100": "#DC5879";
487
+ readonly "red-0": "#FBF1F0";
488
+ readonly "red-300": "#E85D7F";
489
+ readonly "red-400": "#DC5879";
467
490
  readonly "red-500": "#E91C11";
468
491
  readonly "red-600": "#BE1809";
492
+ readonly "red-900": "#280503";
469
493
  readonly "orange-100": "#FFE8CC";
470
494
  readonly "orange-500": "#FF8C00";
471
495
  readonly "hyper-400": "#5533FF";
@@ -39,7 +39,10 @@ export const coreTheme = createTheme({
39
39
  primary: 'beige',
40
40
  selected: 'navy-100',
41
41
  disabled: 'navy-200',
42
- hover: 'navy-200'
42
+ hover: 'navy-200',
43
+ success: 'green-0',
44
+ warning: 'yellow-0',
45
+ error: 'red-0'
43
46
  },
44
47
  shadow: {
45
48
  primary: 'navy-800',
@@ -77,7 +80,7 @@ export const coreTheme = createTheme({
77
80
  secondary: 'white-600'
78
81
  },
79
82
  feedback: {
80
- error: 'red-0',
83
+ error: 'red-300',
81
84
  success: 'green-400',
82
85
  warning: 'yellow-0'
83
86
  },
@@ -88,7 +91,10 @@ export const coreTheme = createTheme({
88
91
  primary: 'navy-900',
89
92
  selected: 'white-100',
90
93
  disabled: 'white-200',
91
- hover: 'white-200'
94
+ hover: 'white-200',
95
+ success: 'green-900',
96
+ warning: 'yellow-900',
97
+ error: 'red-900'
92
98
  },
93
99
  shadow: {
94
100
  primary: 'white',
@@ -104,8 +110,8 @@ export const coreTheme = createTheme({
104
110
  hover: 'white-700'
105
111
  },
106
112
  danger: {
107
- _: 'red-0',
108
- hover: 'red-100'
113
+ _: 'red-300',
114
+ hover: 'red-400'
109
115
  },
110
116
  interface: {
111
117
  _: 'yellow-500',