@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.
- package/dist/GamutProvider.d.ts +1 -0
- package/dist/GamutProvider.js +5 -2
- package/dist/themes/admin.d.ts +73 -25
- package/dist/themes/core.d.ts +36 -12
- package/dist/themes/core.js +11 -5
- package/dist/themes/lxStudio.d.ts +79 -27
- package/dist/themes/platform.d.ts +149 -61
- package/dist/themes/platform.js +20 -15
- package/dist/variables/colors.d.ts +44 -10
- package/dist/variables/colors.js +24 -7
- package/package.json +3 -3
|
@@ -144,15 +144,19 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
144
144
|
readonly "green-100": "#EAFDC6";
|
|
145
145
|
readonly "green-400": "#AEE938";
|
|
146
146
|
readonly "green-700": "#008A27";
|
|
147
|
+
readonly "green-900": "#151C07";
|
|
147
148
|
readonly "yellow-0": "#FFFAE5";
|
|
148
149
|
readonly "yellow-400": "#CCA900";
|
|
149
150
|
readonly "yellow-500": "#FFD300";
|
|
151
|
+
readonly "yellow-900": "#211B00";
|
|
150
152
|
readonly "pink-0": "#FFF5FF";
|
|
151
153
|
readonly "pink-400": "#F966FF";
|
|
152
|
-
readonly "red-0": "#
|
|
153
|
-
readonly "red-
|
|
154
|
+
readonly "red-0": "#FBF1F0";
|
|
155
|
+
readonly "red-300": "#E85D7F";
|
|
156
|
+
readonly "red-400": "#DC5879";
|
|
154
157
|
readonly "red-500": "#E91C11";
|
|
155
158
|
readonly "red-600": "#BE1809";
|
|
159
|
+
readonly "red-900": "#280503";
|
|
156
160
|
readonly "orange-100": "#FFE8CC";
|
|
157
161
|
readonly "orange-500": "#FF8C00";
|
|
158
162
|
readonly "hyper-400": "#5533FF";
|
|
@@ -190,6 +194,9 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
190
194
|
selected: "navy-100";
|
|
191
195
|
disabled: "navy-200";
|
|
192
196
|
hover: "navy-200";
|
|
197
|
+
success: "green-0";
|
|
198
|
+
warning: "yellow-0";
|
|
199
|
+
error: "red-0";
|
|
193
200
|
};
|
|
194
201
|
shadow: {
|
|
195
202
|
primary: "navy-800";
|
|
@@ -226,7 +233,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
226
233
|
secondary: "white-600";
|
|
227
234
|
};
|
|
228
235
|
feedback: {
|
|
229
|
-
error: "red-
|
|
236
|
+
error: "red-300";
|
|
230
237
|
success: "green-400";
|
|
231
238
|
warning: "yellow-0";
|
|
232
239
|
};
|
|
@@ -238,6 +245,9 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
238
245
|
selected: "white-100";
|
|
239
246
|
disabled: "white-200";
|
|
240
247
|
hover: "white-200";
|
|
248
|
+
success: "green-900";
|
|
249
|
+
warning: "yellow-900";
|
|
250
|
+
error: "red-900";
|
|
241
251
|
};
|
|
242
252
|
shadow: {
|
|
243
253
|
primary: "white";
|
|
@@ -253,8 +263,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
253
263
|
hover: "white-700";
|
|
254
264
|
};
|
|
255
265
|
danger: {
|
|
256
|
-
_: "red-
|
|
257
|
-
hover: "red-
|
|
266
|
+
_: "red-300";
|
|
267
|
+
hover: "red-400";
|
|
258
268
|
};
|
|
259
269
|
interface: {
|
|
260
270
|
_: "yellow-500";
|
|
@@ -305,15 +315,19 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
305
315
|
readonly "green-100": "#EAFDC6";
|
|
306
316
|
readonly "green-400": "#AEE938";
|
|
307
317
|
readonly "green-700": "#008A27";
|
|
318
|
+
readonly "green-900": "#151C07";
|
|
308
319
|
readonly "yellow-0": "#FFFAE5";
|
|
309
320
|
readonly "yellow-400": "#CCA900";
|
|
310
321
|
readonly "yellow-500": "#FFD300";
|
|
322
|
+
readonly "yellow-900": "#211B00";
|
|
311
323
|
readonly "pink-0": "#FFF5FF";
|
|
312
324
|
readonly "pink-400": "#F966FF";
|
|
313
|
-
readonly "red-0": "#
|
|
314
|
-
readonly "red-
|
|
325
|
+
readonly "red-0": "#FBF1F0";
|
|
326
|
+
readonly "red-300": "#E85D7F";
|
|
327
|
+
readonly "red-400": "#DC5879";
|
|
315
328
|
readonly "red-500": "#E91C11";
|
|
316
329
|
readonly "red-600": "#BE1809";
|
|
330
|
+
readonly "red-900": "#280503";
|
|
317
331
|
readonly "orange-100": "#FFE8CC";
|
|
318
332
|
readonly "orange-500": "#FF8C00";
|
|
319
333
|
readonly "hyper-400": "#5533FF";
|
|
@@ -353,6 +367,9 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
353
367
|
selected: "navy-100";
|
|
354
368
|
disabled: "navy-200";
|
|
355
369
|
hover: "navy-200";
|
|
370
|
+
success: "green-0";
|
|
371
|
+
warning: "yellow-0";
|
|
372
|
+
error: "red-0";
|
|
356
373
|
};
|
|
357
374
|
shadow: {
|
|
358
375
|
primary: "navy-800";
|
|
@@ -390,7 +407,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
390
407
|
secondary: "white-600";
|
|
391
408
|
};
|
|
392
409
|
feedback: {
|
|
393
|
-
error: "red-
|
|
410
|
+
error: "red-300";
|
|
394
411
|
success: "green-400";
|
|
395
412
|
warning: "yellow-0";
|
|
396
413
|
};
|
|
@@ -402,6 +419,9 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
402
419
|
selected: "white-100";
|
|
403
420
|
disabled: "white-200";
|
|
404
421
|
hover: "white-200";
|
|
422
|
+
success: "green-900";
|
|
423
|
+
warning: "yellow-900";
|
|
424
|
+
error: "red-900";
|
|
405
425
|
};
|
|
406
426
|
shadow: {
|
|
407
427
|
primary: "white";
|
|
@@ -417,8 +437,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
417
437
|
hover: "white-700";
|
|
418
438
|
};
|
|
419
439
|
danger: {
|
|
420
|
-
_: "red-
|
|
421
|
-
hover: "red-
|
|
440
|
+
_: "red-300";
|
|
441
|
+
hover: "red-400";
|
|
422
442
|
};
|
|
423
443
|
interface: {
|
|
424
444
|
_: "yellow-500";
|
|
@@ -472,15 +492,19 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
472
492
|
readonly "green-100": "#EAFDC6";
|
|
473
493
|
readonly "green-400": "#AEE938";
|
|
474
494
|
readonly "green-700": "#008A27";
|
|
495
|
+
readonly "green-900": "#151C07";
|
|
475
496
|
readonly "yellow-0": "#FFFAE5";
|
|
476
497
|
readonly "yellow-400": "#CCA900";
|
|
477
498
|
readonly "yellow-500": "#FFD300";
|
|
499
|
+
readonly "yellow-900": "#211B00";
|
|
478
500
|
readonly "pink-0": "#FFF5FF";
|
|
479
501
|
readonly "pink-400": "#F966FF";
|
|
480
|
-
readonly "red-0": "#
|
|
481
|
-
readonly "red-
|
|
502
|
+
readonly "red-0": "#FBF1F0";
|
|
503
|
+
readonly "red-300": "#E85D7F";
|
|
504
|
+
readonly "red-400": "#DC5879";
|
|
482
505
|
readonly "red-500": "#E91C11";
|
|
483
506
|
readonly "red-600": "#BE1809";
|
|
507
|
+
readonly "red-900": "#280503";
|
|
484
508
|
readonly "orange-100": "#FFE8CC";
|
|
485
509
|
readonly "orange-500": "#FF8C00";
|
|
486
510
|
readonly "hyper-400": "#5533FF";
|
|
@@ -546,15 +570,19 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
546
570
|
"green-100": "#EAFDC6";
|
|
547
571
|
"green-400": "#AEE938";
|
|
548
572
|
"green-700": "#008A27";
|
|
573
|
+
"green-900": "#151C07";
|
|
549
574
|
"yellow-0": "#FFFAE5";
|
|
550
575
|
"yellow-400": "#CCA900";
|
|
551
576
|
"yellow-500": "#FFD300";
|
|
577
|
+
"yellow-900": "#211B00";
|
|
552
578
|
"pink-0": "#FFF5FF";
|
|
553
579
|
"pink-400": "#F966FF";
|
|
554
|
-
"red-0": "#
|
|
555
|
-
"red-
|
|
580
|
+
"red-0": "#FBF1F0";
|
|
581
|
+
"red-300": "#E85D7F";
|
|
582
|
+
"red-400": "#DC5879";
|
|
556
583
|
"red-500": "#E91C11";
|
|
557
584
|
"red-600": "#BE1809";
|
|
585
|
+
"red-900": "#280503";
|
|
558
586
|
"orange-100": "#FFE8CC";
|
|
559
587
|
"orange-500": "#FF8C00";
|
|
560
588
|
"hyper-400": "#5533FF";
|
|
@@ -635,15 +663,19 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
635
663
|
readonly "green-100": "#EAFDC6";
|
|
636
664
|
readonly "green-400": "#AEE938";
|
|
637
665
|
readonly "green-700": "#008A27";
|
|
666
|
+
readonly "green-900": "#151C07";
|
|
638
667
|
readonly "yellow-0": "#FFFAE5";
|
|
639
668
|
readonly "yellow-400": "#CCA900";
|
|
640
669
|
readonly "yellow-500": "#FFD300";
|
|
670
|
+
readonly "yellow-900": "#211B00";
|
|
641
671
|
readonly "pink-0": "#FFF5FF";
|
|
642
672
|
readonly "pink-400": "#F966FF";
|
|
643
|
-
readonly "red-0": "#
|
|
644
|
-
readonly "red-
|
|
673
|
+
readonly "red-0": "#FBF1F0";
|
|
674
|
+
readonly "red-300": "#E85D7F";
|
|
675
|
+
readonly "red-400": "#DC5879";
|
|
645
676
|
readonly "red-500": "#E91C11";
|
|
646
677
|
readonly "red-600": "#BE1809";
|
|
678
|
+
readonly "red-900": "#280503";
|
|
647
679
|
readonly "orange-100": "#FFE8CC";
|
|
648
680
|
readonly "orange-500": "#FF8C00";
|
|
649
681
|
readonly "hyper-400": "#5533FF";
|
|
@@ -681,6 +713,9 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
681
713
|
selected: "navy-100";
|
|
682
714
|
disabled: "navy-200";
|
|
683
715
|
hover: "navy-200";
|
|
716
|
+
success: "green-0";
|
|
717
|
+
warning: "yellow-0";
|
|
718
|
+
error: "red-0";
|
|
684
719
|
};
|
|
685
720
|
shadow: {
|
|
686
721
|
primary: "navy-800";
|
|
@@ -717,7 +752,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
717
752
|
secondary: "white-600";
|
|
718
753
|
};
|
|
719
754
|
feedback: {
|
|
720
|
-
error: "red-
|
|
755
|
+
error: "red-300";
|
|
721
756
|
success: "green-400";
|
|
722
757
|
warning: "yellow-0";
|
|
723
758
|
};
|
|
@@ -729,6 +764,9 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
729
764
|
selected: "white-100";
|
|
730
765
|
disabled: "white-200";
|
|
731
766
|
hover: "white-200";
|
|
767
|
+
success: "green-900";
|
|
768
|
+
warning: "yellow-900";
|
|
769
|
+
error: "red-900";
|
|
732
770
|
};
|
|
733
771
|
shadow: {
|
|
734
772
|
primary: "white";
|
|
@@ -744,8 +782,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
744
782
|
hover: "white-700";
|
|
745
783
|
};
|
|
746
784
|
danger: {
|
|
747
|
-
_: "red-
|
|
748
|
-
hover: "red-
|
|
785
|
+
_: "red-300";
|
|
786
|
+
hover: "red-400";
|
|
749
787
|
};
|
|
750
788
|
interface: {
|
|
751
789
|
_: "yellow-500";
|
|
@@ -796,15 +834,19 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
796
834
|
readonly "green-100": "#EAFDC6";
|
|
797
835
|
readonly "green-400": "#AEE938";
|
|
798
836
|
readonly "green-700": "#008A27";
|
|
837
|
+
readonly "green-900": "#151C07";
|
|
799
838
|
readonly "yellow-0": "#FFFAE5";
|
|
800
839
|
readonly "yellow-400": "#CCA900";
|
|
801
840
|
readonly "yellow-500": "#FFD300";
|
|
841
|
+
readonly "yellow-900": "#211B00";
|
|
802
842
|
readonly "pink-0": "#FFF5FF";
|
|
803
843
|
readonly "pink-400": "#F966FF";
|
|
804
|
-
readonly "red-0": "#
|
|
805
|
-
readonly "red-
|
|
844
|
+
readonly "red-0": "#FBF1F0";
|
|
845
|
+
readonly "red-300": "#E85D7F";
|
|
846
|
+
readonly "red-400": "#DC5879";
|
|
806
847
|
readonly "red-500": "#E91C11";
|
|
807
848
|
readonly "red-600": "#BE1809";
|
|
849
|
+
readonly "red-900": "#280503";
|
|
808
850
|
readonly "orange-100": "#FFE8CC";
|
|
809
851
|
readonly "orange-500": "#FF8C00";
|
|
810
852
|
readonly "hyper-400": "#5533FF";
|
|
@@ -865,15 +907,19 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
865
907
|
"green-100": "#EAFDC6";
|
|
866
908
|
"green-400": "#AEE938";
|
|
867
909
|
"green-700": "#008A27";
|
|
910
|
+
"green-900": "#151C07";
|
|
868
911
|
"yellow-0": "#FFFAE5";
|
|
869
912
|
"yellow-400": "#CCA900";
|
|
870
913
|
"yellow-500": "#FFD300";
|
|
914
|
+
"yellow-900": "#211B00";
|
|
871
915
|
"pink-0": "#FFF5FF";
|
|
872
916
|
"pink-400": "#F966FF";
|
|
873
|
-
"red-0": "#
|
|
874
|
-
"red-
|
|
917
|
+
"red-0": "#FBF1F0";
|
|
918
|
+
"red-300": "#E85D7F";
|
|
919
|
+
"red-400": "#DC5879";
|
|
875
920
|
"red-500": "#E91C11";
|
|
876
921
|
"red-600": "#BE1809";
|
|
922
|
+
"red-900": "#280503";
|
|
877
923
|
"orange-100": "#FFE8CC";
|
|
878
924
|
"orange-500": "#FF8C00";
|
|
879
925
|
"hyper-400": "#5533FF";
|
|
@@ -913,6 +959,9 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
913
959
|
selected: "navy-100";
|
|
914
960
|
disabled: "navy-200";
|
|
915
961
|
hover: "navy-200";
|
|
962
|
+
success: "green-0";
|
|
963
|
+
warning: "yellow-0";
|
|
964
|
+
error: "red-0";
|
|
916
965
|
};
|
|
917
966
|
shadow: {
|
|
918
967
|
primary: "navy-800";
|
|
@@ -950,7 +999,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
950
999
|
secondary: "white-600";
|
|
951
1000
|
};
|
|
952
1001
|
feedback: {
|
|
953
|
-
error: "red-
|
|
1002
|
+
error: "red-300";
|
|
954
1003
|
success: "green-400";
|
|
955
1004
|
warning: "yellow-0";
|
|
956
1005
|
};
|
|
@@ -962,6 +1011,9 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
962
1011
|
selected: "white-100";
|
|
963
1012
|
disabled: "white-200";
|
|
964
1013
|
hover: "white-200";
|
|
1014
|
+
success: "green-900";
|
|
1015
|
+
warning: "yellow-900";
|
|
1016
|
+
error: "red-900";
|
|
965
1017
|
};
|
|
966
1018
|
shadow: {
|
|
967
1019
|
primary: "white";
|
|
@@ -977,8 +1029,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
977
1029
|
hover: "white-700";
|
|
978
1030
|
};
|
|
979
1031
|
danger: {
|
|
980
|
-
_: "red-
|
|
981
|
-
hover: "red-
|
|
1032
|
+
_: "red-300";
|
|
1033
|
+
hover: "red-400";
|
|
982
1034
|
};
|
|
983
1035
|
interface: {
|
|
984
1036
|
_: "yellow-500";
|
|
@@ -1018,7 +1070,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
1018
1070
|
}, "-", "_">;
|
|
1019
1071
|
}>;
|
|
1020
1072
|
mode: "light";
|
|
1021
|
-
_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-
|
|
1073
|
+
_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" | "green-900" | "yellow-0" | "yellow-400" | "yellow-500" | "yellow-900" | "pink-0" | "pink-400" | "red-0" | "red-300" | "red-400" | "red-500" | "red-600" | "red-900" | "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-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" | "lxStudioSuccess" | "lxStudioBgPrimary" | "lxStudioPurple" | "lxStudioPurpleHover") => string;
|
|
1022
1074
|
}> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
|
|
1023
1075
|
export type LxStudioThemeShape = typeof lxStudioTheme;
|
|
1024
1076
|
export interface LxStudioTheme extends LxStudioThemeShape {
|