@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.
- package/dist/themes/admin.d.ts +40 -73
- package/dist/themes/core.d.ts +22 -36
- package/dist/themes/core.js +10 -13
- package/dist/themes/lxStudio.d.ts +42 -79
- package/dist/themes/platform.d.ts +81 -115
- package/dist/themes/platform.js +15 -18
- package/dist/variables/colors.d.ts +10 -22
- package/dist/variables/colors.js +7 -11
- package/dist/variables/responsive.d.ts +8 -0
- package/dist/variables/responsive.js +8 -0
- package/package.json +3 -3
|
@@ -7,12 +7,22 @@ export declare const lxStudioBorderRadii: {
|
|
|
7
7
|
full: string;
|
|
8
8
|
};
|
|
9
9
|
export declare const lxStudioTheme: Record<"breakpoints", {
|
|
10
|
+
c_xs: string;
|
|
11
|
+
c_sm: string;
|
|
12
|
+
c_md: string;
|
|
13
|
+
c_lg: string;
|
|
14
|
+
c_xl: string;
|
|
10
15
|
xs: string;
|
|
11
16
|
sm: string;
|
|
12
17
|
md: string;
|
|
13
18
|
lg: string;
|
|
14
19
|
xl: string;
|
|
15
20
|
}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"breakpoints", {
|
|
21
|
+
c_xs: string;
|
|
22
|
+
c_sm: string;
|
|
23
|
+
c_md: string;
|
|
24
|
+
c_lg: string;
|
|
25
|
+
c_xl: string;
|
|
16
26
|
xs: string;
|
|
17
27
|
sm: string;
|
|
18
28
|
md: string;
|
|
@@ -47,6 +57,11 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
47
57
|
readonly headerZ: 15;
|
|
48
58
|
};
|
|
49
59
|
breakpoints: {
|
|
60
|
+
c_xs: string;
|
|
61
|
+
c_sm: string;
|
|
62
|
+
c_md: string;
|
|
63
|
+
c_lg: string;
|
|
64
|
+
c_xl: string;
|
|
50
65
|
xs: string;
|
|
51
66
|
sm: string;
|
|
52
67
|
md: string;
|
|
@@ -129,19 +144,15 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
129
144
|
readonly "green-100": "#EAFDC6";
|
|
130
145
|
readonly "green-400": "#AEE938";
|
|
131
146
|
readonly "green-700": "#008A27";
|
|
132
|
-
readonly "green-900": "#151C07";
|
|
133
147
|
readonly "yellow-0": "#FFFAE5";
|
|
134
148
|
readonly "yellow-400": "#CCA900";
|
|
135
149
|
readonly "yellow-500": "#FFD300";
|
|
136
|
-
readonly "yellow-900": "#211B00";
|
|
137
150
|
readonly "pink-0": "#FFF5FF";
|
|
138
151
|
readonly "pink-400": "#F966FF";
|
|
139
|
-
readonly "red-0": "#
|
|
140
|
-
readonly "red-
|
|
141
|
-
readonly "red-400": "#DC5879";
|
|
152
|
+
readonly "red-0": "#E85D7F";
|
|
153
|
+
readonly "red-100": "#DC5879";
|
|
142
154
|
readonly "red-500": "#E91C11";
|
|
143
155
|
readonly "red-600": "#BE1809";
|
|
144
|
-
readonly "red-900": "#280503";
|
|
145
156
|
readonly "orange-100": "#FFE8CC";
|
|
146
157
|
readonly "orange-500": "#FF8C00";
|
|
147
158
|
readonly "hyper-400": "#5533FF";
|
|
@@ -179,9 +190,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
179
190
|
selected: "navy-100";
|
|
180
191
|
disabled: "navy-200";
|
|
181
192
|
hover: "navy-200";
|
|
182
|
-
success: "green-0";
|
|
183
|
-
warning: "yellow-0";
|
|
184
|
-
error: "red-0";
|
|
185
193
|
};
|
|
186
194
|
shadow: {
|
|
187
195
|
primary: "navy-800";
|
|
@@ -218,7 +226,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
218
226
|
secondary: "white-600";
|
|
219
227
|
};
|
|
220
228
|
feedback: {
|
|
221
|
-
error: "red-
|
|
229
|
+
error: "red-0";
|
|
222
230
|
success: "green-400";
|
|
223
231
|
warning: "yellow-0";
|
|
224
232
|
};
|
|
@@ -230,9 +238,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
230
238
|
selected: "white-100";
|
|
231
239
|
disabled: "white-200";
|
|
232
240
|
hover: "white-200";
|
|
233
|
-
success: "green-900";
|
|
234
|
-
warning: "yellow-900";
|
|
235
|
-
error: "red-900";
|
|
236
241
|
};
|
|
237
242
|
shadow: {
|
|
238
243
|
primary: "white";
|
|
@@ -248,8 +253,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
248
253
|
hover: "white-700";
|
|
249
254
|
};
|
|
250
255
|
danger: {
|
|
251
|
-
_: "red-
|
|
252
|
-
hover: "red-
|
|
256
|
+
_: "red-0";
|
|
257
|
+
hover: "red-100";
|
|
253
258
|
};
|
|
254
259
|
interface: {
|
|
255
260
|
_: "yellow-500";
|
|
@@ -300,19 +305,15 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
300
305
|
readonly "green-100": "#EAFDC6";
|
|
301
306
|
readonly "green-400": "#AEE938";
|
|
302
307
|
readonly "green-700": "#008A27";
|
|
303
|
-
readonly "green-900": "#151C07";
|
|
304
308
|
readonly "yellow-0": "#FFFAE5";
|
|
305
309
|
readonly "yellow-400": "#CCA900";
|
|
306
310
|
readonly "yellow-500": "#FFD300";
|
|
307
|
-
readonly "yellow-900": "#211B00";
|
|
308
311
|
readonly "pink-0": "#FFF5FF";
|
|
309
312
|
readonly "pink-400": "#F966FF";
|
|
310
|
-
readonly "red-0": "#
|
|
311
|
-
readonly "red-
|
|
312
|
-
readonly "red-400": "#DC5879";
|
|
313
|
+
readonly "red-0": "#E85D7F";
|
|
314
|
+
readonly "red-100": "#DC5879";
|
|
313
315
|
readonly "red-500": "#E91C11";
|
|
314
316
|
readonly "red-600": "#BE1809";
|
|
315
|
-
readonly "red-900": "#280503";
|
|
316
317
|
readonly "orange-100": "#FFE8CC";
|
|
317
318
|
readonly "orange-500": "#FF8C00";
|
|
318
319
|
readonly "hyper-400": "#5533FF";
|
|
@@ -352,9 +353,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
352
353
|
selected: "navy-100";
|
|
353
354
|
disabled: "navy-200";
|
|
354
355
|
hover: "navy-200";
|
|
355
|
-
success: "green-0";
|
|
356
|
-
warning: "yellow-0";
|
|
357
|
-
error: "red-0";
|
|
358
356
|
};
|
|
359
357
|
shadow: {
|
|
360
358
|
primary: "navy-800";
|
|
@@ -392,7 +390,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
392
390
|
secondary: "white-600";
|
|
393
391
|
};
|
|
394
392
|
feedback: {
|
|
395
|
-
error: "red-
|
|
393
|
+
error: "red-0";
|
|
396
394
|
success: "green-400";
|
|
397
395
|
warning: "yellow-0";
|
|
398
396
|
};
|
|
@@ -404,9 +402,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
404
402
|
selected: "white-100";
|
|
405
403
|
disabled: "white-200";
|
|
406
404
|
hover: "white-200";
|
|
407
|
-
success: "green-900";
|
|
408
|
-
warning: "yellow-900";
|
|
409
|
-
error: "red-900";
|
|
410
405
|
};
|
|
411
406
|
shadow: {
|
|
412
407
|
primary: "white";
|
|
@@ -422,8 +417,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
422
417
|
hover: "white-700";
|
|
423
418
|
};
|
|
424
419
|
danger: {
|
|
425
|
-
_: "red-
|
|
426
|
-
hover: "red-
|
|
420
|
+
_: "red-0";
|
|
421
|
+
hover: "red-100";
|
|
427
422
|
};
|
|
428
423
|
interface: {
|
|
429
424
|
_: "yellow-500";
|
|
@@ -477,19 +472,15 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
477
472
|
readonly "green-100": "#EAFDC6";
|
|
478
473
|
readonly "green-400": "#AEE938";
|
|
479
474
|
readonly "green-700": "#008A27";
|
|
480
|
-
readonly "green-900": "#151C07";
|
|
481
475
|
readonly "yellow-0": "#FFFAE5";
|
|
482
476
|
readonly "yellow-400": "#CCA900";
|
|
483
477
|
readonly "yellow-500": "#FFD300";
|
|
484
|
-
readonly "yellow-900": "#211B00";
|
|
485
478
|
readonly "pink-0": "#FFF5FF";
|
|
486
479
|
readonly "pink-400": "#F966FF";
|
|
487
|
-
readonly "red-0": "#
|
|
488
|
-
readonly "red-
|
|
489
|
-
readonly "red-400": "#DC5879";
|
|
480
|
+
readonly "red-0": "#E85D7F";
|
|
481
|
+
readonly "red-100": "#DC5879";
|
|
490
482
|
readonly "red-500": "#E91C11";
|
|
491
483
|
readonly "red-600": "#BE1809";
|
|
492
|
-
readonly "red-900": "#280503";
|
|
493
484
|
readonly "orange-100": "#FFE8CC";
|
|
494
485
|
readonly "orange-500": "#FF8C00";
|
|
495
486
|
readonly "hyper-400": "#5533FF";
|
|
@@ -555,19 +546,15 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
555
546
|
"green-100": "#EAFDC6";
|
|
556
547
|
"green-400": "#AEE938";
|
|
557
548
|
"green-700": "#008A27";
|
|
558
|
-
"green-900": "#151C07";
|
|
559
549
|
"yellow-0": "#FFFAE5";
|
|
560
550
|
"yellow-400": "#CCA900";
|
|
561
551
|
"yellow-500": "#FFD300";
|
|
562
|
-
"yellow-900": "#211B00";
|
|
563
552
|
"pink-0": "#FFF5FF";
|
|
564
553
|
"pink-400": "#F966FF";
|
|
565
|
-
"red-0": "#
|
|
566
|
-
"red-
|
|
567
|
-
"red-400": "#DC5879";
|
|
554
|
+
"red-0": "#E85D7F";
|
|
555
|
+
"red-100": "#DC5879";
|
|
568
556
|
"red-500": "#E91C11";
|
|
569
557
|
"red-600": "#BE1809";
|
|
570
|
-
"red-900": "#280503";
|
|
571
558
|
"orange-100": "#FFE8CC";
|
|
572
559
|
"orange-500": "#FF8C00";
|
|
573
560
|
"hyper-400": "#5533FF";
|
|
@@ -648,19 +635,15 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
648
635
|
readonly "green-100": "#EAFDC6";
|
|
649
636
|
readonly "green-400": "#AEE938";
|
|
650
637
|
readonly "green-700": "#008A27";
|
|
651
|
-
readonly "green-900": "#151C07";
|
|
652
638
|
readonly "yellow-0": "#FFFAE5";
|
|
653
639
|
readonly "yellow-400": "#CCA900";
|
|
654
640
|
readonly "yellow-500": "#FFD300";
|
|
655
|
-
readonly "yellow-900": "#211B00";
|
|
656
641
|
readonly "pink-0": "#FFF5FF";
|
|
657
642
|
readonly "pink-400": "#F966FF";
|
|
658
|
-
readonly "red-0": "#
|
|
659
|
-
readonly "red-
|
|
660
|
-
readonly "red-400": "#DC5879";
|
|
643
|
+
readonly "red-0": "#E85D7F";
|
|
644
|
+
readonly "red-100": "#DC5879";
|
|
661
645
|
readonly "red-500": "#E91C11";
|
|
662
646
|
readonly "red-600": "#BE1809";
|
|
663
|
-
readonly "red-900": "#280503";
|
|
664
647
|
readonly "orange-100": "#FFE8CC";
|
|
665
648
|
readonly "orange-500": "#FF8C00";
|
|
666
649
|
readonly "hyper-400": "#5533FF";
|
|
@@ -698,9 +681,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
698
681
|
selected: "navy-100";
|
|
699
682
|
disabled: "navy-200";
|
|
700
683
|
hover: "navy-200";
|
|
701
|
-
success: "green-0";
|
|
702
|
-
warning: "yellow-0";
|
|
703
|
-
error: "red-0";
|
|
704
684
|
};
|
|
705
685
|
shadow: {
|
|
706
686
|
primary: "navy-800";
|
|
@@ -737,7 +717,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
737
717
|
secondary: "white-600";
|
|
738
718
|
};
|
|
739
719
|
feedback: {
|
|
740
|
-
error: "red-
|
|
720
|
+
error: "red-0";
|
|
741
721
|
success: "green-400";
|
|
742
722
|
warning: "yellow-0";
|
|
743
723
|
};
|
|
@@ -749,9 +729,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
749
729
|
selected: "white-100";
|
|
750
730
|
disabled: "white-200";
|
|
751
731
|
hover: "white-200";
|
|
752
|
-
success: "green-900";
|
|
753
|
-
warning: "yellow-900";
|
|
754
|
-
error: "red-900";
|
|
755
732
|
};
|
|
756
733
|
shadow: {
|
|
757
734
|
primary: "white";
|
|
@@ -767,8 +744,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
767
744
|
hover: "white-700";
|
|
768
745
|
};
|
|
769
746
|
danger: {
|
|
770
|
-
_: "red-
|
|
771
|
-
hover: "red-
|
|
747
|
+
_: "red-0";
|
|
748
|
+
hover: "red-100";
|
|
772
749
|
};
|
|
773
750
|
interface: {
|
|
774
751
|
_: "yellow-500";
|
|
@@ -819,19 +796,15 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
819
796
|
readonly "green-100": "#EAFDC6";
|
|
820
797
|
readonly "green-400": "#AEE938";
|
|
821
798
|
readonly "green-700": "#008A27";
|
|
822
|
-
readonly "green-900": "#151C07";
|
|
823
799
|
readonly "yellow-0": "#FFFAE5";
|
|
824
800
|
readonly "yellow-400": "#CCA900";
|
|
825
801
|
readonly "yellow-500": "#FFD300";
|
|
826
|
-
readonly "yellow-900": "#211B00";
|
|
827
802
|
readonly "pink-0": "#FFF5FF";
|
|
828
803
|
readonly "pink-400": "#F966FF";
|
|
829
|
-
readonly "red-0": "#
|
|
830
|
-
readonly "red-
|
|
831
|
-
readonly "red-400": "#DC5879";
|
|
804
|
+
readonly "red-0": "#E85D7F";
|
|
805
|
+
readonly "red-100": "#DC5879";
|
|
832
806
|
readonly "red-500": "#E91C11";
|
|
833
807
|
readonly "red-600": "#BE1809";
|
|
834
|
-
readonly "red-900": "#280503";
|
|
835
808
|
readonly "orange-100": "#FFE8CC";
|
|
836
809
|
readonly "orange-500": "#FF8C00";
|
|
837
810
|
readonly "hyper-400": "#5533FF";
|
|
@@ -892,19 +865,15 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
892
865
|
"green-100": "#EAFDC6";
|
|
893
866
|
"green-400": "#AEE938";
|
|
894
867
|
"green-700": "#008A27";
|
|
895
|
-
"green-900": "#151C07";
|
|
896
868
|
"yellow-0": "#FFFAE5";
|
|
897
869
|
"yellow-400": "#CCA900";
|
|
898
870
|
"yellow-500": "#FFD300";
|
|
899
|
-
"yellow-900": "#211B00";
|
|
900
871
|
"pink-0": "#FFF5FF";
|
|
901
872
|
"pink-400": "#F966FF";
|
|
902
|
-
"red-0": "#
|
|
903
|
-
"red-
|
|
904
|
-
"red-400": "#DC5879";
|
|
873
|
+
"red-0": "#E85D7F";
|
|
874
|
+
"red-100": "#DC5879";
|
|
905
875
|
"red-500": "#E91C11";
|
|
906
876
|
"red-600": "#BE1809";
|
|
907
|
-
"red-900": "#280503";
|
|
908
877
|
"orange-100": "#FFE8CC";
|
|
909
878
|
"orange-500": "#FF8C00";
|
|
910
879
|
"hyper-400": "#5533FF";
|
|
@@ -944,9 +913,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
944
913
|
selected: "navy-100";
|
|
945
914
|
disabled: "navy-200";
|
|
946
915
|
hover: "navy-200";
|
|
947
|
-
success: "green-0";
|
|
948
|
-
warning: "yellow-0";
|
|
949
|
-
error: "red-0";
|
|
950
916
|
};
|
|
951
917
|
shadow: {
|
|
952
918
|
primary: "navy-800";
|
|
@@ -984,7 +950,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
984
950
|
secondary: "white-600";
|
|
985
951
|
};
|
|
986
952
|
feedback: {
|
|
987
|
-
error: "red-
|
|
953
|
+
error: "red-0";
|
|
988
954
|
success: "green-400";
|
|
989
955
|
warning: "yellow-0";
|
|
990
956
|
};
|
|
@@ -996,9 +962,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
996
962
|
selected: "white-100";
|
|
997
963
|
disabled: "white-200";
|
|
998
964
|
hover: "white-200";
|
|
999
|
-
success: "green-900";
|
|
1000
|
-
warning: "yellow-900";
|
|
1001
|
-
error: "red-900";
|
|
1002
965
|
};
|
|
1003
966
|
shadow: {
|
|
1004
967
|
primary: "white";
|
|
@@ -1014,8 +977,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
1014
977
|
hover: "white-700";
|
|
1015
978
|
};
|
|
1016
979
|
danger: {
|
|
1017
|
-
_: "red-
|
|
1018
|
-
hover: "red-
|
|
980
|
+
_: "red-0";
|
|
981
|
+
hover: "red-100";
|
|
1019
982
|
};
|
|
1020
983
|
interface: {
|
|
1021
984
|
_: "yellow-500";
|
|
@@ -1055,7 +1018,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
1055
1018
|
}, "-", "_">;
|
|
1056
1019
|
}>;
|
|
1057
1020
|
mode: "light";
|
|
1058
|
-
_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" | "
|
|
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-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;
|
|
1059
1022
|
}> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
|
|
1060
1023
|
export type LxStudioThemeShape = typeof lxStudioTheme;
|
|
1061
1024
|
export interface LxStudioTheme extends LxStudioThemeShape {
|