@codecademy/gamut-styles 17.6.5-alpha.e8bc80.0 → 17.6.5-alpha.fed1a2.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 +45 -25
- package/dist/themes/core.d.ts +22 -12
- package/dist/themes/core.js +7 -5
- package/dist/themes/lxStudio.d.ts +49 -27
- package/dist/themes/platform.d.ts +87 -65
- package/dist/themes/platform.js +18 -17
- package/dist/variables/colors.d.ts +16 -10
- package/dist/variables/colors.js +7 -5
- package/package.json +2 -2
package/dist/themes/admin.d.ts
CHANGED
|
@@ -126,10 +126,12 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
126
126
|
readonly "yellow-900": "#211B00";
|
|
127
127
|
readonly "pink-0": "#FFF5FF";
|
|
128
128
|
readonly "pink-400": "#F966FF";
|
|
129
|
-
readonly "red-0": "#
|
|
130
|
-
readonly "red-
|
|
129
|
+
readonly "red-0": "#FBF1F0";
|
|
130
|
+
readonly "red-300": "#E85D7F";
|
|
131
|
+
readonly "red-400": "#DC5879";
|
|
131
132
|
readonly "red-500": "#E91C11";
|
|
132
133
|
readonly "red-600": "#BE1809";
|
|
134
|
+
readonly "red-900": "#280503";
|
|
133
135
|
readonly "orange-100": "#FFE8CC";
|
|
134
136
|
readonly "orange-500": "#FF8C00";
|
|
135
137
|
readonly "hyper-400": "#5533FF";
|
|
@@ -170,6 +172,7 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
170
172
|
hover: "navy-200";
|
|
171
173
|
success: "green-0";
|
|
172
174
|
warning: "yellow-0";
|
|
175
|
+
error: "red-0";
|
|
173
176
|
};
|
|
174
177
|
shadow: {
|
|
175
178
|
primary: "navy-800";
|
|
@@ -206,7 +209,7 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
206
209
|
secondary: "white-600";
|
|
207
210
|
};
|
|
208
211
|
feedback: {
|
|
209
|
-
error: "red-
|
|
212
|
+
error: "red-300";
|
|
210
213
|
success: "green-400";
|
|
211
214
|
warning: "yellow-0";
|
|
212
215
|
};
|
|
@@ -220,6 +223,7 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
220
223
|
hover: "white-200";
|
|
221
224
|
success: "green-900";
|
|
222
225
|
warning: "yellow-900";
|
|
226
|
+
error: "red-900";
|
|
223
227
|
};
|
|
224
228
|
shadow: {
|
|
225
229
|
primary: "white";
|
|
@@ -235,8 +239,8 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
235
239
|
hover: "white-700";
|
|
236
240
|
};
|
|
237
241
|
danger: {
|
|
238
|
-
_: "red-
|
|
239
|
-
hover: "red-
|
|
242
|
+
_: "red-300";
|
|
243
|
+
hover: "red-400";
|
|
240
244
|
};
|
|
241
245
|
interface: {
|
|
242
246
|
_: "yellow-500";
|
|
@@ -294,10 +298,12 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
294
298
|
readonly "yellow-900": "#211B00";
|
|
295
299
|
readonly "pink-0": "#FFF5FF";
|
|
296
300
|
readonly "pink-400": "#F966FF";
|
|
297
|
-
readonly "red-0": "#
|
|
298
|
-
readonly "red-
|
|
301
|
+
readonly "red-0": "#FBF1F0";
|
|
302
|
+
readonly "red-300": "#E85D7F";
|
|
303
|
+
readonly "red-400": "#DC5879";
|
|
299
304
|
readonly "red-500": "#E91C11";
|
|
300
305
|
readonly "red-600": "#BE1809";
|
|
306
|
+
readonly "red-900": "#280503";
|
|
301
307
|
readonly "orange-100": "#FFE8CC";
|
|
302
308
|
readonly "orange-500": "#FF8C00";
|
|
303
309
|
readonly "hyper-400": "#5533FF";
|
|
@@ -339,6 +345,7 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
339
345
|
hover: "navy-200";
|
|
340
346
|
success: "green-0";
|
|
341
347
|
warning: "yellow-0";
|
|
348
|
+
error: "red-0";
|
|
342
349
|
};
|
|
343
350
|
shadow: {
|
|
344
351
|
primary: "navy-800";
|
|
@@ -376,7 +383,7 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
376
383
|
secondary: "white-600";
|
|
377
384
|
};
|
|
378
385
|
feedback: {
|
|
379
|
-
error: "red-
|
|
386
|
+
error: "red-300";
|
|
380
387
|
success: "green-400";
|
|
381
388
|
warning: "yellow-0";
|
|
382
389
|
};
|
|
@@ -390,6 +397,7 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
390
397
|
hover: "white-200";
|
|
391
398
|
success: "green-900";
|
|
392
399
|
warning: "yellow-900";
|
|
400
|
+
error: "red-900";
|
|
393
401
|
};
|
|
394
402
|
shadow: {
|
|
395
403
|
primary: "white";
|
|
@@ -405,8 +413,8 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
405
413
|
hover: "white-700";
|
|
406
414
|
};
|
|
407
415
|
danger: {
|
|
408
|
-
_: "red-
|
|
409
|
-
hover: "red-
|
|
416
|
+
_: "red-300";
|
|
417
|
+
hover: "red-400";
|
|
410
418
|
};
|
|
411
419
|
interface: {
|
|
412
420
|
_: "yellow-500";
|
|
@@ -467,10 +475,12 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
467
475
|
readonly "yellow-900": "#211B00";
|
|
468
476
|
readonly "pink-0": "#FFF5FF";
|
|
469
477
|
readonly "pink-400": "#F966FF";
|
|
470
|
-
readonly "red-0": "#
|
|
471
|
-
readonly "red-
|
|
478
|
+
readonly "red-0": "#FBF1F0";
|
|
479
|
+
readonly "red-300": "#E85D7F";
|
|
480
|
+
readonly "red-400": "#DC5879";
|
|
472
481
|
readonly "red-500": "#E91C11";
|
|
473
482
|
readonly "red-600": "#BE1809";
|
|
483
|
+
readonly "red-900": "#280503";
|
|
474
484
|
readonly "orange-100": "#FFE8CC";
|
|
475
485
|
readonly "orange-500": "#FF8C00";
|
|
476
486
|
readonly "hyper-400": "#5533FF";
|
|
@@ -548,10 +558,12 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
548
558
|
readonly "yellow-900": "#211B00";
|
|
549
559
|
readonly "pink-0": "#FFF5FF";
|
|
550
560
|
readonly "pink-400": "#F966FF";
|
|
551
|
-
readonly "red-0": "#
|
|
552
|
-
readonly "red-
|
|
561
|
+
readonly "red-0": "#FBF1F0";
|
|
562
|
+
readonly "red-300": "#E85D7F";
|
|
563
|
+
readonly "red-400": "#DC5879";
|
|
553
564
|
readonly "red-500": "#E91C11";
|
|
554
565
|
readonly "red-600": "#BE1809";
|
|
566
|
+
readonly "red-900": "#280503";
|
|
555
567
|
readonly "orange-100": "#FFE8CC";
|
|
556
568
|
readonly "orange-500": "#FF8C00";
|
|
557
569
|
readonly "hyper-400": "#5533FF";
|
|
@@ -591,6 +603,7 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
591
603
|
hover: "navy-200";
|
|
592
604
|
success: "green-0";
|
|
593
605
|
warning: "yellow-0";
|
|
606
|
+
error: "red-0";
|
|
594
607
|
};
|
|
595
608
|
shadow: {
|
|
596
609
|
primary: "navy-800";
|
|
@@ -627,7 +640,7 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
627
640
|
secondary: "white-600";
|
|
628
641
|
};
|
|
629
642
|
feedback: {
|
|
630
|
-
error: "red-
|
|
643
|
+
error: "red-300";
|
|
631
644
|
success: "green-400";
|
|
632
645
|
warning: "yellow-0";
|
|
633
646
|
};
|
|
@@ -641,6 +654,7 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
641
654
|
hover: "white-200";
|
|
642
655
|
success: "green-900";
|
|
643
656
|
warning: "yellow-900";
|
|
657
|
+
error: "red-900";
|
|
644
658
|
};
|
|
645
659
|
shadow: {
|
|
646
660
|
primary: "white";
|
|
@@ -656,8 +670,8 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
656
670
|
hover: "white-700";
|
|
657
671
|
};
|
|
658
672
|
danger: {
|
|
659
|
-
_: "red-
|
|
660
|
-
hover: "red-
|
|
673
|
+
_: "red-300";
|
|
674
|
+
hover: "red-400";
|
|
661
675
|
};
|
|
662
676
|
interface: {
|
|
663
677
|
_: "yellow-500";
|
|
@@ -715,10 +729,12 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
715
729
|
readonly "yellow-900": "#211B00";
|
|
716
730
|
readonly "pink-0": "#FFF5FF";
|
|
717
731
|
readonly "pink-400": "#F966FF";
|
|
718
|
-
readonly "red-0": "#
|
|
719
|
-
readonly "red-
|
|
732
|
+
readonly "red-0": "#FBF1F0";
|
|
733
|
+
readonly "red-300": "#E85D7F";
|
|
734
|
+
readonly "red-400": "#DC5879";
|
|
720
735
|
readonly "red-500": "#E91C11";
|
|
721
736
|
readonly "red-600": "#BE1809";
|
|
737
|
+
readonly "red-900": "#280503";
|
|
722
738
|
readonly "orange-100": "#FFE8CC";
|
|
723
739
|
readonly "orange-500": "#FF8C00";
|
|
724
740
|
readonly "hyper-400": "#5533FF";
|
|
@@ -760,6 +776,7 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
760
776
|
hover: "navy-200";
|
|
761
777
|
success: "green-0";
|
|
762
778
|
warning: "yellow-0";
|
|
779
|
+
error: "red-0";
|
|
763
780
|
};
|
|
764
781
|
shadow: {
|
|
765
782
|
primary: "navy-800";
|
|
@@ -797,7 +814,7 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
797
814
|
secondary: "white-600";
|
|
798
815
|
};
|
|
799
816
|
feedback: {
|
|
800
|
-
error: "red-
|
|
817
|
+
error: "red-300";
|
|
801
818
|
success: "green-400";
|
|
802
819
|
warning: "yellow-0";
|
|
803
820
|
};
|
|
@@ -811,6 +828,7 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
811
828
|
hover: "white-200";
|
|
812
829
|
success: "green-900";
|
|
813
830
|
warning: "yellow-900";
|
|
831
|
+
error: "red-900";
|
|
814
832
|
};
|
|
815
833
|
shadow: {
|
|
816
834
|
primary: "white";
|
|
@@ -826,8 +844,8 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
826
844
|
hover: "white-700";
|
|
827
845
|
};
|
|
828
846
|
danger: {
|
|
829
|
-
_: "red-
|
|
830
|
-
hover: "red-
|
|
847
|
+
_: "red-300";
|
|
848
|
+
hover: "red-400";
|
|
831
849
|
};
|
|
832
850
|
interface: {
|
|
833
851
|
_: "yellow-500";
|
|
@@ -900,10 +918,12 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
900
918
|
readonly "yellow-900": "#211B00";
|
|
901
919
|
readonly "pink-0": "#FFF5FF";
|
|
902
920
|
readonly "pink-400": "#F966FF";
|
|
903
|
-
readonly "red-0": "#
|
|
904
|
-
readonly "red-
|
|
921
|
+
readonly "red-0": "#FBF1F0";
|
|
922
|
+
readonly "red-300": "#E85D7F";
|
|
923
|
+
readonly "red-400": "#DC5879";
|
|
905
924
|
readonly "red-500": "#E91C11";
|
|
906
925
|
readonly "red-600": "#BE1809";
|
|
926
|
+
readonly "red-900": "#280503";
|
|
907
927
|
readonly "orange-100": "#FFE8CC";
|
|
908
928
|
readonly "orange-500": "#FF8C00";
|
|
909
929
|
readonly "hyper-400": "#5533FF";
|
|
@@ -921,7 +941,7 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
921
941
|
readonly "white-200": string;
|
|
922
942
|
readonly "white-600": string;
|
|
923
943
|
readonly "white-700": string;
|
|
924
|
-
}, "-"> | "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-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;
|
|
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;
|
|
925
945
|
}> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
|
|
926
946
|
export type AdminThemeShape = typeof adminTheme;
|
|
927
947
|
export interface AdminTheme extends AdminThemeShape {
|
package/dist/themes/core.d.ts
CHANGED
|
@@ -125,10 +125,12 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
|
|
|
125
125
|
readonly "yellow-900": "#211B00";
|
|
126
126
|
readonly "pink-0": "#FFF5FF";
|
|
127
127
|
readonly "pink-400": "#F966FF";
|
|
128
|
-
readonly "red-0": "#
|
|
129
|
-
readonly "red-
|
|
128
|
+
readonly "red-0": "#FBF1F0";
|
|
129
|
+
readonly "red-300": "#E85D7F";
|
|
130
|
+
readonly "red-400": "#DC5879";
|
|
130
131
|
readonly "red-500": "#E91C11";
|
|
131
132
|
readonly "red-600": "#BE1809";
|
|
133
|
+
readonly "red-900": "#280503";
|
|
132
134
|
readonly "orange-100": "#FFE8CC";
|
|
133
135
|
readonly "orange-500": "#FF8C00";
|
|
134
136
|
readonly "hyper-400": "#5533FF";
|
|
@@ -169,6 +171,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
|
|
|
169
171
|
hover: "navy-200";
|
|
170
172
|
success: "green-0";
|
|
171
173
|
warning: "yellow-0";
|
|
174
|
+
error: "red-0";
|
|
172
175
|
};
|
|
173
176
|
shadow: {
|
|
174
177
|
primary: "navy-800";
|
|
@@ -205,7 +208,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
|
|
|
205
208
|
secondary: "white-600";
|
|
206
209
|
};
|
|
207
210
|
feedback: {
|
|
208
|
-
error: "red-
|
|
211
|
+
error: "red-300";
|
|
209
212
|
success: "green-400";
|
|
210
213
|
warning: "yellow-0";
|
|
211
214
|
};
|
|
@@ -219,6 +222,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
|
|
|
219
222
|
hover: "white-200";
|
|
220
223
|
success: "green-900";
|
|
221
224
|
warning: "yellow-900";
|
|
225
|
+
error: "red-900";
|
|
222
226
|
};
|
|
223
227
|
shadow: {
|
|
224
228
|
primary: "white";
|
|
@@ -234,8 +238,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
|
|
|
234
238
|
hover: "white-700";
|
|
235
239
|
};
|
|
236
240
|
danger: {
|
|
237
|
-
_: "red-
|
|
238
|
-
hover: "red-
|
|
241
|
+
_: "red-300";
|
|
242
|
+
hover: "red-400";
|
|
239
243
|
};
|
|
240
244
|
interface: {
|
|
241
245
|
_: "yellow-500";
|
|
@@ -293,10 +297,12 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
|
|
|
293
297
|
readonly "yellow-900": "#211B00";
|
|
294
298
|
readonly "pink-0": "#FFF5FF";
|
|
295
299
|
readonly "pink-400": "#F966FF";
|
|
296
|
-
readonly "red-0": "#
|
|
297
|
-
readonly "red-
|
|
300
|
+
readonly "red-0": "#FBF1F0";
|
|
301
|
+
readonly "red-300": "#E85D7F";
|
|
302
|
+
readonly "red-400": "#DC5879";
|
|
298
303
|
readonly "red-500": "#E91C11";
|
|
299
304
|
readonly "red-600": "#BE1809";
|
|
305
|
+
readonly "red-900": "#280503";
|
|
300
306
|
readonly "orange-100": "#FFE8CC";
|
|
301
307
|
readonly "orange-500": "#FF8C00";
|
|
302
308
|
readonly "hyper-400": "#5533FF";
|
|
@@ -338,6 +344,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
|
|
|
338
344
|
hover: "navy-200";
|
|
339
345
|
success: "green-0";
|
|
340
346
|
warning: "yellow-0";
|
|
347
|
+
error: "red-0";
|
|
341
348
|
};
|
|
342
349
|
shadow: {
|
|
343
350
|
primary: "navy-800";
|
|
@@ -375,7 +382,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
|
|
|
375
382
|
secondary: "white-600";
|
|
376
383
|
};
|
|
377
384
|
feedback: {
|
|
378
|
-
error: "red-
|
|
385
|
+
error: "red-300";
|
|
379
386
|
success: "green-400";
|
|
380
387
|
warning: "yellow-0";
|
|
381
388
|
};
|
|
@@ -389,6 +396,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
|
|
|
389
396
|
hover: "white-200";
|
|
390
397
|
success: "green-900";
|
|
391
398
|
warning: "yellow-900";
|
|
399
|
+
error: "red-900";
|
|
392
400
|
};
|
|
393
401
|
shadow: {
|
|
394
402
|
primary: "white";
|
|
@@ -404,8 +412,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
|
|
|
404
412
|
hover: "white-700";
|
|
405
413
|
};
|
|
406
414
|
danger: {
|
|
407
|
-
_: "red-
|
|
408
|
-
hover: "red-
|
|
415
|
+
_: "red-300";
|
|
416
|
+
hover: "red-400";
|
|
409
417
|
};
|
|
410
418
|
interface: {
|
|
411
419
|
_: "yellow-500";
|
|
@@ -466,10 +474,12 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
|
|
|
466
474
|
readonly "yellow-900": "#211B00";
|
|
467
475
|
readonly "pink-0": "#FFF5FF";
|
|
468
476
|
readonly "pink-400": "#F966FF";
|
|
469
|
-
readonly "red-0": "#
|
|
470
|
-
readonly "red-
|
|
477
|
+
readonly "red-0": "#FBF1F0";
|
|
478
|
+
readonly "red-300": "#E85D7F";
|
|
479
|
+
readonly "red-400": "#DC5879";
|
|
471
480
|
readonly "red-500": "#E91C11";
|
|
472
481
|
readonly "red-600": "#BE1809";
|
|
482
|
+
readonly "red-900": "#280503";
|
|
473
483
|
readonly "orange-100": "#FFE8CC";
|
|
474
484
|
readonly "orange-500": "#FF8C00";
|
|
475
485
|
readonly "hyper-400": "#5533FF";
|
package/dist/themes/core.js
CHANGED
|
@@ -38,7 +38,8 @@ export const coreTheme = createTheme({
|
|
|
38
38
|
disabled: 'navy-200',
|
|
39
39
|
hover: 'navy-200',
|
|
40
40
|
success: 'green-0',
|
|
41
|
-
warning: 'yellow-0'
|
|
41
|
+
warning: 'yellow-0',
|
|
42
|
+
error: 'red-0'
|
|
42
43
|
},
|
|
43
44
|
shadow: {
|
|
44
45
|
primary: 'navy-800',
|
|
@@ -76,7 +77,7 @@ export const coreTheme = createTheme({
|
|
|
76
77
|
secondary: 'white-600'
|
|
77
78
|
},
|
|
78
79
|
feedback: {
|
|
79
|
-
error: 'red-
|
|
80
|
+
error: 'red-300',
|
|
80
81
|
success: 'green-400',
|
|
81
82
|
warning: 'yellow-0'
|
|
82
83
|
},
|
|
@@ -89,7 +90,8 @@ export const coreTheme = createTheme({
|
|
|
89
90
|
disabled: 'white-200',
|
|
90
91
|
hover: 'white-200',
|
|
91
92
|
success: 'green-900',
|
|
92
|
-
warning: 'yellow-900'
|
|
93
|
+
warning: 'yellow-900',
|
|
94
|
+
error: 'red-900'
|
|
93
95
|
},
|
|
94
96
|
shadow: {
|
|
95
97
|
primary: 'white',
|
|
@@ -105,8 +107,8 @@ export const coreTheme = createTheme({
|
|
|
105
107
|
hover: 'white-700'
|
|
106
108
|
},
|
|
107
109
|
danger: {
|
|
108
|
-
_: 'red-
|
|
109
|
-
hover: 'red-
|
|
110
|
+
_: 'red-300',
|
|
111
|
+
hover: 'red-400'
|
|
110
112
|
},
|
|
111
113
|
interface: {
|
|
112
114
|
_: 'yellow-500',
|
|
@@ -136,10 +136,12 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
136
136
|
readonly "yellow-900": "#211B00";
|
|
137
137
|
readonly "pink-0": "#FFF5FF";
|
|
138
138
|
readonly "pink-400": "#F966FF";
|
|
139
|
-
readonly "red-0": "#
|
|
140
|
-
readonly "red-
|
|
139
|
+
readonly "red-0": "#FBF1F0";
|
|
140
|
+
readonly "red-300": "#E85D7F";
|
|
141
|
+
readonly "red-400": "#DC5879";
|
|
141
142
|
readonly "red-500": "#E91C11";
|
|
142
143
|
readonly "red-600": "#BE1809";
|
|
144
|
+
readonly "red-900": "#280503";
|
|
143
145
|
readonly "orange-100": "#FFE8CC";
|
|
144
146
|
readonly "orange-500": "#FF8C00";
|
|
145
147
|
readonly "hyper-400": "#5533FF";
|
|
@@ -179,6 +181,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
179
181
|
hover: "navy-200";
|
|
180
182
|
success: "green-0";
|
|
181
183
|
warning: "yellow-0";
|
|
184
|
+
error: "red-0";
|
|
182
185
|
};
|
|
183
186
|
shadow: {
|
|
184
187
|
primary: "navy-800";
|
|
@@ -215,7 +218,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
215
218
|
secondary: "white-600";
|
|
216
219
|
};
|
|
217
220
|
feedback: {
|
|
218
|
-
error: "red-
|
|
221
|
+
error: "red-300";
|
|
219
222
|
success: "green-400";
|
|
220
223
|
warning: "yellow-0";
|
|
221
224
|
};
|
|
@@ -229,6 +232,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
229
232
|
hover: "white-200";
|
|
230
233
|
success: "green-900";
|
|
231
234
|
warning: "yellow-900";
|
|
235
|
+
error: "red-900";
|
|
232
236
|
};
|
|
233
237
|
shadow: {
|
|
234
238
|
primary: "white";
|
|
@@ -244,8 +248,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
244
248
|
hover: "white-700";
|
|
245
249
|
};
|
|
246
250
|
danger: {
|
|
247
|
-
_: "red-
|
|
248
|
-
hover: "red-
|
|
251
|
+
_: "red-300";
|
|
252
|
+
hover: "red-400";
|
|
249
253
|
};
|
|
250
254
|
interface: {
|
|
251
255
|
_: "yellow-500";
|
|
@@ -303,10 +307,12 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
303
307
|
readonly "yellow-900": "#211B00";
|
|
304
308
|
readonly "pink-0": "#FFF5FF";
|
|
305
309
|
readonly "pink-400": "#F966FF";
|
|
306
|
-
readonly "red-0": "#
|
|
307
|
-
readonly "red-
|
|
310
|
+
readonly "red-0": "#FBF1F0";
|
|
311
|
+
readonly "red-300": "#E85D7F";
|
|
312
|
+
readonly "red-400": "#DC5879";
|
|
308
313
|
readonly "red-500": "#E91C11";
|
|
309
314
|
readonly "red-600": "#BE1809";
|
|
315
|
+
readonly "red-900": "#280503";
|
|
310
316
|
readonly "orange-100": "#FFE8CC";
|
|
311
317
|
readonly "orange-500": "#FF8C00";
|
|
312
318
|
readonly "hyper-400": "#5533FF";
|
|
@@ -348,6 +354,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
348
354
|
hover: "navy-200";
|
|
349
355
|
success: "green-0";
|
|
350
356
|
warning: "yellow-0";
|
|
357
|
+
error: "red-0";
|
|
351
358
|
};
|
|
352
359
|
shadow: {
|
|
353
360
|
primary: "navy-800";
|
|
@@ -385,7 +392,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
385
392
|
secondary: "white-600";
|
|
386
393
|
};
|
|
387
394
|
feedback: {
|
|
388
|
-
error: "red-
|
|
395
|
+
error: "red-300";
|
|
389
396
|
success: "green-400";
|
|
390
397
|
warning: "yellow-0";
|
|
391
398
|
};
|
|
@@ -399,6 +406,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
399
406
|
hover: "white-200";
|
|
400
407
|
success: "green-900";
|
|
401
408
|
warning: "yellow-900";
|
|
409
|
+
error: "red-900";
|
|
402
410
|
};
|
|
403
411
|
shadow: {
|
|
404
412
|
primary: "white";
|
|
@@ -414,8 +422,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
414
422
|
hover: "white-700";
|
|
415
423
|
};
|
|
416
424
|
danger: {
|
|
417
|
-
_: "red-
|
|
418
|
-
hover: "red-
|
|
425
|
+
_: "red-300";
|
|
426
|
+
hover: "red-400";
|
|
419
427
|
};
|
|
420
428
|
interface: {
|
|
421
429
|
_: "yellow-500";
|
|
@@ -476,10 +484,12 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
476
484
|
readonly "yellow-900": "#211B00";
|
|
477
485
|
readonly "pink-0": "#FFF5FF";
|
|
478
486
|
readonly "pink-400": "#F966FF";
|
|
479
|
-
readonly "red-0": "#
|
|
480
|
-
readonly "red-
|
|
487
|
+
readonly "red-0": "#FBF1F0";
|
|
488
|
+
readonly "red-300": "#E85D7F";
|
|
489
|
+
readonly "red-400": "#DC5879";
|
|
481
490
|
readonly "red-500": "#E91C11";
|
|
482
491
|
readonly "red-600": "#BE1809";
|
|
492
|
+
readonly "red-900": "#280503";
|
|
483
493
|
readonly "orange-100": "#FFE8CC";
|
|
484
494
|
readonly "orange-500": "#FF8C00";
|
|
485
495
|
readonly "hyper-400": "#5533FF";
|
|
@@ -552,10 +562,12 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
552
562
|
"yellow-900": "#211B00";
|
|
553
563
|
"pink-0": "#FFF5FF";
|
|
554
564
|
"pink-400": "#F966FF";
|
|
555
|
-
"red-0": "#
|
|
556
|
-
"red-
|
|
565
|
+
"red-0": "#FBF1F0";
|
|
566
|
+
"red-300": "#E85D7F";
|
|
567
|
+
"red-400": "#DC5879";
|
|
557
568
|
"red-500": "#E91C11";
|
|
558
569
|
"red-600": "#BE1809";
|
|
570
|
+
"red-900": "#280503";
|
|
559
571
|
"orange-100": "#FFE8CC";
|
|
560
572
|
"orange-500": "#FF8C00";
|
|
561
573
|
"hyper-400": "#5533FF";
|
|
@@ -643,10 +655,12 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
643
655
|
readonly "yellow-900": "#211B00";
|
|
644
656
|
readonly "pink-0": "#FFF5FF";
|
|
645
657
|
readonly "pink-400": "#F966FF";
|
|
646
|
-
readonly "red-0": "#
|
|
647
|
-
readonly "red-
|
|
658
|
+
readonly "red-0": "#FBF1F0";
|
|
659
|
+
readonly "red-300": "#E85D7F";
|
|
660
|
+
readonly "red-400": "#DC5879";
|
|
648
661
|
readonly "red-500": "#E91C11";
|
|
649
662
|
readonly "red-600": "#BE1809";
|
|
663
|
+
readonly "red-900": "#280503";
|
|
650
664
|
readonly "orange-100": "#FFE8CC";
|
|
651
665
|
readonly "orange-500": "#FF8C00";
|
|
652
666
|
readonly "hyper-400": "#5533FF";
|
|
@@ -686,6 +700,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
686
700
|
hover: "navy-200";
|
|
687
701
|
success: "green-0";
|
|
688
702
|
warning: "yellow-0";
|
|
703
|
+
error: "red-0";
|
|
689
704
|
};
|
|
690
705
|
shadow: {
|
|
691
706
|
primary: "navy-800";
|
|
@@ -722,7 +737,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
722
737
|
secondary: "white-600";
|
|
723
738
|
};
|
|
724
739
|
feedback: {
|
|
725
|
-
error: "red-
|
|
740
|
+
error: "red-300";
|
|
726
741
|
success: "green-400";
|
|
727
742
|
warning: "yellow-0";
|
|
728
743
|
};
|
|
@@ -736,6 +751,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
736
751
|
hover: "white-200";
|
|
737
752
|
success: "green-900";
|
|
738
753
|
warning: "yellow-900";
|
|
754
|
+
error: "red-900";
|
|
739
755
|
};
|
|
740
756
|
shadow: {
|
|
741
757
|
primary: "white";
|
|
@@ -751,8 +767,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
751
767
|
hover: "white-700";
|
|
752
768
|
};
|
|
753
769
|
danger: {
|
|
754
|
-
_: "red-
|
|
755
|
-
hover: "red-
|
|
770
|
+
_: "red-300";
|
|
771
|
+
hover: "red-400";
|
|
756
772
|
};
|
|
757
773
|
interface: {
|
|
758
774
|
_: "yellow-500";
|
|
@@ -810,10 +826,12 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
810
826
|
readonly "yellow-900": "#211B00";
|
|
811
827
|
readonly "pink-0": "#FFF5FF";
|
|
812
828
|
readonly "pink-400": "#F966FF";
|
|
813
|
-
readonly "red-0": "#
|
|
814
|
-
readonly "red-
|
|
829
|
+
readonly "red-0": "#FBF1F0";
|
|
830
|
+
readonly "red-300": "#E85D7F";
|
|
831
|
+
readonly "red-400": "#DC5879";
|
|
815
832
|
readonly "red-500": "#E91C11";
|
|
816
833
|
readonly "red-600": "#BE1809";
|
|
834
|
+
readonly "red-900": "#280503";
|
|
817
835
|
readonly "orange-100": "#FFE8CC";
|
|
818
836
|
readonly "orange-500": "#FF8C00";
|
|
819
837
|
readonly "hyper-400": "#5533FF";
|
|
@@ -881,10 +899,12 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
881
899
|
"yellow-900": "#211B00";
|
|
882
900
|
"pink-0": "#FFF5FF";
|
|
883
901
|
"pink-400": "#F966FF";
|
|
884
|
-
"red-0": "#
|
|
885
|
-
"red-
|
|
902
|
+
"red-0": "#FBF1F0";
|
|
903
|
+
"red-300": "#E85D7F";
|
|
904
|
+
"red-400": "#DC5879";
|
|
886
905
|
"red-500": "#E91C11";
|
|
887
906
|
"red-600": "#BE1809";
|
|
907
|
+
"red-900": "#280503";
|
|
888
908
|
"orange-100": "#FFE8CC";
|
|
889
909
|
"orange-500": "#FF8C00";
|
|
890
910
|
"hyper-400": "#5533FF";
|
|
@@ -926,6 +946,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
926
946
|
hover: "navy-200";
|
|
927
947
|
success: "green-0";
|
|
928
948
|
warning: "yellow-0";
|
|
949
|
+
error: "red-0";
|
|
929
950
|
};
|
|
930
951
|
shadow: {
|
|
931
952
|
primary: "navy-800";
|
|
@@ -963,7 +984,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
963
984
|
secondary: "white-600";
|
|
964
985
|
};
|
|
965
986
|
feedback: {
|
|
966
|
-
error: "red-
|
|
987
|
+
error: "red-300";
|
|
967
988
|
success: "green-400";
|
|
968
989
|
warning: "yellow-0";
|
|
969
990
|
};
|
|
@@ -977,6 +998,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
977
998
|
hover: "white-200";
|
|
978
999
|
success: "green-900";
|
|
979
1000
|
warning: "yellow-900";
|
|
1001
|
+
error: "red-900";
|
|
980
1002
|
};
|
|
981
1003
|
shadow: {
|
|
982
1004
|
primary: "white";
|
|
@@ -992,8 +1014,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
992
1014
|
hover: "white-700";
|
|
993
1015
|
};
|
|
994
1016
|
danger: {
|
|
995
|
-
_: "red-
|
|
996
|
-
hover: "red-
|
|
1017
|
+
_: "red-300";
|
|
1018
|
+
hover: "red-400";
|
|
997
1019
|
};
|
|
998
1020
|
interface: {
|
|
999
1021
|
_: "yellow-500";
|
|
@@ -1033,7 +1055,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
|
|
|
1033
1055
|
}, "-", "_">;
|
|
1034
1056
|
}>;
|
|
1035
1057
|
mode: "light";
|
|
1036
|
-
_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-
|
|
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" | "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;
|
|
1037
1059
|
}> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
|
|
1038
1060
|
export type LxStudioThemeShape = typeof lxStudioTheme;
|
|
1039
1061
|
export interface LxStudioTheme extends LxStudioThemeShape {
|
|
@@ -76,10 +76,6 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
76
76
|
readonly 8: string;
|
|
77
77
|
readonly 12: string;
|
|
78
78
|
readonly 16: string;
|
|
79
|
-
/**
|
|
80
|
-
* @description This is an extended theme for the learning environment with an expanded set of tokens
|
|
81
|
-
* That are not needed for the rest of the application.
|
|
82
|
-
*/
|
|
83
79
|
readonly 24: string;
|
|
84
80
|
readonly 32: string;
|
|
85
81
|
readonly 40: string;
|
|
@@ -140,10 +136,12 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
140
136
|
readonly "yellow-900": "#211B00";
|
|
141
137
|
readonly "pink-0": "#FFF5FF";
|
|
142
138
|
readonly "pink-400": "#F966FF";
|
|
143
|
-
readonly "red-0": "#
|
|
144
|
-
readonly "red-
|
|
139
|
+
readonly "red-0": "#FBF1F0";
|
|
140
|
+
readonly "red-300": "#E85D7F";
|
|
141
|
+
readonly "red-400": "#DC5879";
|
|
145
142
|
readonly "red-500": "#E91C11";
|
|
146
143
|
readonly "red-600": "#BE1809";
|
|
144
|
+
readonly "red-900": "#280503";
|
|
147
145
|
readonly "orange-100": "#FFE8CC";
|
|
148
146
|
readonly "orange-500": "#FF8C00";
|
|
149
147
|
readonly "hyper-400": "#5533FF";
|
|
@@ -184,6 +182,7 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
184
182
|
hover: "navy-200";
|
|
185
183
|
success: "green-0";
|
|
186
184
|
warning: "yellow-0";
|
|
185
|
+
error: "red-0";
|
|
187
186
|
};
|
|
188
187
|
shadow: {
|
|
189
188
|
primary: "navy-800";
|
|
@@ -220,7 +219,7 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
220
219
|
secondary: "white-600";
|
|
221
220
|
};
|
|
222
221
|
feedback: {
|
|
223
|
-
error: "red-
|
|
222
|
+
error: "red-300";
|
|
224
223
|
success: "green-400";
|
|
225
224
|
warning: "yellow-0";
|
|
226
225
|
};
|
|
@@ -234,6 +233,7 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
234
233
|
hover: "white-200";
|
|
235
234
|
success: "green-900";
|
|
236
235
|
warning: "yellow-900";
|
|
236
|
+
error: "red-900";
|
|
237
237
|
};
|
|
238
238
|
shadow: {
|
|
239
239
|
primary: "white";
|
|
@@ -249,8 +249,8 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
249
249
|
hover: "white-700";
|
|
250
250
|
};
|
|
251
251
|
danger: {
|
|
252
|
-
_: "red-
|
|
253
|
-
hover: "red-
|
|
252
|
+
_: "red-300";
|
|
253
|
+
hover: "red-400";
|
|
254
254
|
};
|
|
255
255
|
interface: {
|
|
256
256
|
_: "yellow-500";
|
|
@@ -308,10 +308,12 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
308
308
|
readonly "yellow-900": "#211B00";
|
|
309
309
|
readonly "pink-0": "#FFF5FF";
|
|
310
310
|
readonly "pink-400": "#F966FF";
|
|
311
|
-
readonly "red-0": "#
|
|
312
|
-
readonly "red-
|
|
311
|
+
readonly "red-0": "#FBF1F0";
|
|
312
|
+
readonly "red-300": "#E85D7F";
|
|
313
|
+
readonly "red-400": "#DC5879";
|
|
313
314
|
readonly "red-500": "#E91C11";
|
|
314
315
|
readonly "red-600": "#BE1809";
|
|
316
|
+
readonly "red-900": "#280503";
|
|
315
317
|
readonly "orange-100": "#FFE8CC";
|
|
316
318
|
readonly "orange-500": "#FF8C00";
|
|
317
319
|
readonly "hyper-400": "#5533FF";
|
|
@@ -353,6 +355,7 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
353
355
|
hover: "navy-200";
|
|
354
356
|
success: "green-0";
|
|
355
357
|
warning: "yellow-0";
|
|
358
|
+
error: "red-0";
|
|
356
359
|
};
|
|
357
360
|
shadow: {
|
|
358
361
|
primary: "navy-800";
|
|
@@ -390,7 +393,7 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
390
393
|
secondary: "white-600";
|
|
391
394
|
};
|
|
392
395
|
feedback: {
|
|
393
|
-
error: "red-
|
|
396
|
+
error: "red-300";
|
|
394
397
|
success: "green-400";
|
|
395
398
|
warning: "yellow-0";
|
|
396
399
|
};
|
|
@@ -404,6 +407,7 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
404
407
|
hover: "white-200";
|
|
405
408
|
success: "green-900";
|
|
406
409
|
warning: "yellow-900";
|
|
410
|
+
error: "red-900";
|
|
407
411
|
};
|
|
408
412
|
shadow: {
|
|
409
413
|
primary: "white";
|
|
@@ -419,8 +423,8 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
419
423
|
hover: "white-700";
|
|
420
424
|
};
|
|
421
425
|
danger: {
|
|
422
|
-
_: "red-
|
|
423
|
-
hover: "red-
|
|
426
|
+
_: "red-300";
|
|
427
|
+
hover: "red-400";
|
|
424
428
|
};
|
|
425
429
|
interface: {
|
|
426
430
|
_: "yellow-500";
|
|
@@ -481,10 +485,12 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
481
485
|
readonly "yellow-900": "#211B00";
|
|
482
486
|
readonly "pink-0": "#FFF5FF";
|
|
483
487
|
readonly "pink-400": "#F966FF";
|
|
484
|
-
readonly "red-0": "#
|
|
485
|
-
readonly "red-
|
|
488
|
+
readonly "red-0": "#FBF1F0";
|
|
489
|
+
readonly "red-300": "#E85D7F";
|
|
490
|
+
readonly "red-400": "#DC5879";
|
|
486
491
|
readonly "red-500": "#E91C11";
|
|
487
492
|
readonly "red-600": "#BE1809";
|
|
493
|
+
readonly "red-900": "#280503";
|
|
488
494
|
readonly "orange-100": "#FFE8CC";
|
|
489
495
|
readonly "orange-500": "#FF8C00";
|
|
490
496
|
readonly "hyper-400": "#5533FF";
|
|
@@ -509,22 +515,25 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
509
515
|
}, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
|
|
510
516
|
readonly lightBeige: "#FFFBF8";
|
|
511
517
|
readonly gold: "#8A7300";
|
|
512
|
-
readonly teal: "#
|
|
518
|
+
readonly teal: "#006d82";
|
|
513
519
|
readonly purple: "#B3CCFF";
|
|
514
520
|
readonly "beige-0": "#FFFBF8";
|
|
515
521
|
readonly "pink-800": "#CA00D1";
|
|
516
522
|
readonly "orange-800": "#D14900";
|
|
517
523
|
readonly "gold-800": "#8A7300";
|
|
518
|
-
readonly "teal-500": "#
|
|
524
|
+
readonly "teal-500": "#006d82";
|
|
519
525
|
readonly "purple-300": "#B3CCFF";
|
|
520
526
|
}, "-">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
|
|
521
527
|
colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
|
|
528
|
+
background: {
|
|
529
|
+
primary: "blue-0";
|
|
530
|
+
};
|
|
522
531
|
editor: {
|
|
523
532
|
attribute: "green-700";
|
|
524
533
|
annotation: "red-500";
|
|
525
534
|
atom: "pink-800";
|
|
526
535
|
basic: "navy-800";
|
|
527
|
-
comment: "navy-
|
|
536
|
+
comment: "navy-500";
|
|
528
537
|
constant: "orange-800";
|
|
529
538
|
decoration: "red-500";
|
|
530
539
|
invalid: "red-500";
|
|
@@ -543,39 +552,39 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
543
552
|
ui: {
|
|
544
553
|
background: "white";
|
|
545
554
|
text: "navy-800";
|
|
546
|
-
'indent-active': "navy-
|
|
547
|
-
'indent-inactive': "navy-
|
|
548
|
-
'line-number': "navy-
|
|
555
|
+
'indent-active': "navy-300";
|
|
556
|
+
'indent-inactive': "navy-400";
|
|
557
|
+
'line-number': "navy-500";
|
|
549
558
|
};
|
|
550
559
|
};
|
|
551
560
|
} | {
|
|
552
561
|
editor: {
|
|
553
562
|
attribute: "green-400";
|
|
554
|
-
annotation: "red-
|
|
563
|
+
annotation: "red-300";
|
|
555
564
|
atom: "pink-400";
|
|
556
565
|
basic: "white";
|
|
557
|
-
comment: "
|
|
566
|
+
comment: "white-500";
|
|
558
567
|
constant: "orange-500";
|
|
559
|
-
decoration: "red-
|
|
560
|
-
invalid: "red-
|
|
568
|
+
decoration: "red-300";
|
|
569
|
+
invalid: "red-300";
|
|
561
570
|
key: "blue-300";
|
|
562
571
|
keyword: "purple-300";
|
|
563
|
-
number: "red-
|
|
564
|
-
operator: "red-
|
|
572
|
+
number: "red-300";
|
|
573
|
+
operator: "red-300";
|
|
565
574
|
predefined: "white";
|
|
566
|
-
property: "red-
|
|
575
|
+
property: "red-300";
|
|
567
576
|
regexp: "green-400";
|
|
568
577
|
string: "yellow-500";
|
|
569
|
-
tag: "red-
|
|
578
|
+
tag: "red-300";
|
|
570
579
|
text: "orange-500";
|
|
571
580
|
value: "yellow-500";
|
|
572
581
|
variable: "green-400";
|
|
573
582
|
ui: {
|
|
574
583
|
background: "navy-900";
|
|
575
584
|
text: "white";
|
|
576
|
-
'indent-active': "
|
|
577
|
-
'indent-inactive': "
|
|
578
|
-
'line-number': "
|
|
585
|
+
'indent-active': "white-300";
|
|
586
|
+
'indent-inactive': "white-400";
|
|
587
|
+
'line-number': "white-500";
|
|
579
588
|
};
|
|
580
589
|
};
|
|
581
590
|
}, "-", "_">, "colors"> & import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
|
|
@@ -624,10 +633,12 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
624
633
|
readonly "yellow-900": "#211B00";
|
|
625
634
|
readonly "pink-0": "#FFF5FF";
|
|
626
635
|
readonly "pink-400": "#F966FF";
|
|
627
|
-
readonly "red-0": "#
|
|
628
|
-
readonly "red-
|
|
636
|
+
readonly "red-0": "#FBF1F0";
|
|
637
|
+
readonly "red-300": "#E85D7F";
|
|
638
|
+
readonly "red-400": "#DC5879";
|
|
629
639
|
readonly "red-500": "#E91C11";
|
|
630
640
|
readonly "red-600": "#BE1809";
|
|
641
|
+
readonly "red-900": "#280503";
|
|
631
642
|
readonly "orange-100": "#FFE8CC";
|
|
632
643
|
readonly "orange-500": "#FF8C00";
|
|
633
644
|
readonly "hyper-400": "#5533FF";
|
|
@@ -667,6 +678,7 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
667
678
|
hover: "navy-200";
|
|
668
679
|
success: "green-0";
|
|
669
680
|
warning: "yellow-0";
|
|
681
|
+
error: "red-0";
|
|
670
682
|
};
|
|
671
683
|
shadow: {
|
|
672
684
|
primary: "navy-800";
|
|
@@ -703,7 +715,7 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
703
715
|
secondary: "white-600";
|
|
704
716
|
};
|
|
705
717
|
feedback: {
|
|
706
|
-
error: "red-
|
|
718
|
+
error: "red-300";
|
|
707
719
|
success: "green-400";
|
|
708
720
|
warning: "yellow-0";
|
|
709
721
|
};
|
|
@@ -717,6 +729,7 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
717
729
|
hover: "white-200";
|
|
718
730
|
success: "green-900";
|
|
719
731
|
warning: "yellow-900";
|
|
732
|
+
error: "red-900";
|
|
720
733
|
};
|
|
721
734
|
shadow: {
|
|
722
735
|
primary: "white";
|
|
@@ -732,8 +745,8 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
732
745
|
hover: "white-700";
|
|
733
746
|
};
|
|
734
747
|
danger: {
|
|
735
|
-
_: "red-
|
|
736
|
-
hover: "red-
|
|
748
|
+
_: "red-300";
|
|
749
|
+
hover: "red-400";
|
|
737
750
|
};
|
|
738
751
|
interface: {
|
|
739
752
|
_: "yellow-500";
|
|
@@ -791,10 +804,12 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
791
804
|
readonly "yellow-900": "#211B00";
|
|
792
805
|
readonly "pink-0": "#FFF5FF";
|
|
793
806
|
readonly "pink-400": "#F966FF";
|
|
794
|
-
readonly "red-0": "#
|
|
795
|
-
readonly "red-
|
|
807
|
+
readonly "red-0": "#FBF1F0";
|
|
808
|
+
readonly "red-300": "#E85D7F";
|
|
809
|
+
readonly "red-400": "#DC5879";
|
|
796
810
|
readonly "red-500": "#E91C11";
|
|
797
811
|
readonly "red-600": "#BE1809";
|
|
812
|
+
readonly "red-900": "#280503";
|
|
798
813
|
readonly "orange-100": "#FFE8CC";
|
|
799
814
|
readonly "orange-500": "#FF8C00";
|
|
800
815
|
readonly "hyper-400": "#5533FF";
|
|
@@ -815,13 +830,13 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
815
830
|
}, "-">, "color">>, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
|
|
816
831
|
readonly lightBeige: "#FFFBF8";
|
|
817
832
|
readonly gold: "#8A7300";
|
|
818
|
-
readonly teal: "#
|
|
833
|
+
readonly teal: "#006d82";
|
|
819
834
|
readonly purple: "#B3CCFF";
|
|
820
835
|
readonly "beige-0": "#FFFBF8";
|
|
821
836
|
readonly "pink-800": "#CA00D1";
|
|
822
837
|
readonly "orange-800": "#D14900";
|
|
823
838
|
readonly "gold-800": "#8A7300";
|
|
824
|
-
readonly "teal-500": "#
|
|
839
|
+
readonly "teal-500": "#006d82";
|
|
825
840
|
readonly "purple-300": "#B3CCFF";
|
|
826
841
|
}, "-">, "color">>;
|
|
827
842
|
modes: import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
|
|
@@ -847,6 +862,7 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
847
862
|
hover: "navy-200";
|
|
848
863
|
success: "green-0";
|
|
849
864
|
warning: "yellow-0";
|
|
865
|
+
error: "red-0";
|
|
850
866
|
};
|
|
851
867
|
shadow: {
|
|
852
868
|
primary: "navy-800";
|
|
@@ -884,7 +900,7 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
884
900
|
secondary: "white-600";
|
|
885
901
|
};
|
|
886
902
|
feedback: {
|
|
887
|
-
error: "red-
|
|
903
|
+
error: "red-300";
|
|
888
904
|
success: "green-400";
|
|
889
905
|
warning: "yellow-0";
|
|
890
906
|
};
|
|
@@ -898,6 +914,7 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
898
914
|
hover: "white-200";
|
|
899
915
|
success: "green-900";
|
|
900
916
|
warning: "yellow-900";
|
|
917
|
+
error: "red-900";
|
|
901
918
|
};
|
|
902
919
|
shadow: {
|
|
903
920
|
primary: "white";
|
|
@@ -913,8 +930,8 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
913
930
|
hover: "white-700";
|
|
914
931
|
};
|
|
915
932
|
danger: {
|
|
916
|
-
_: "red-
|
|
917
|
-
hover: "red-
|
|
933
|
+
_: "red-300";
|
|
934
|
+
hover: "red-400";
|
|
918
935
|
};
|
|
919
936
|
interface: {
|
|
920
937
|
_: "yellow-500";
|
|
@@ -929,12 +946,15 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
929
946
|
}, "-", "_">;
|
|
930
947
|
}>, {
|
|
931
948
|
light: import("@codecademy/variance").LiteralPaths<{
|
|
949
|
+
background: {
|
|
950
|
+
primary: "blue-0";
|
|
951
|
+
};
|
|
932
952
|
editor: {
|
|
933
953
|
attribute: "green-700";
|
|
934
954
|
annotation: "red-500";
|
|
935
955
|
atom: "pink-800";
|
|
936
956
|
basic: "navy-800";
|
|
937
|
-
comment: "navy-
|
|
957
|
+
comment: "navy-500";
|
|
938
958
|
constant: "orange-800";
|
|
939
959
|
decoration: "red-500";
|
|
940
960
|
invalid: "red-500";
|
|
@@ -953,40 +973,40 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
953
973
|
ui: {
|
|
954
974
|
background: "white";
|
|
955
975
|
text: "navy-800";
|
|
956
|
-
'indent-active': "navy-
|
|
957
|
-
'indent-inactive': "navy-
|
|
958
|
-
'line-number': "navy-
|
|
976
|
+
'indent-active': "navy-300";
|
|
977
|
+
'indent-inactive': "navy-400";
|
|
978
|
+
'line-number': "navy-500";
|
|
959
979
|
};
|
|
960
980
|
};
|
|
961
981
|
}, "-", "_">;
|
|
962
982
|
dark: import("@codecademy/variance").LiteralPaths<{
|
|
963
983
|
editor: {
|
|
964
984
|
attribute: "green-400";
|
|
965
|
-
annotation: "red-
|
|
985
|
+
annotation: "red-300";
|
|
966
986
|
atom: "pink-400";
|
|
967
987
|
basic: "white";
|
|
968
|
-
comment: "
|
|
988
|
+
comment: "white-500";
|
|
969
989
|
constant: "orange-500";
|
|
970
|
-
decoration: "red-
|
|
971
|
-
invalid: "red-
|
|
990
|
+
decoration: "red-300";
|
|
991
|
+
invalid: "red-300";
|
|
972
992
|
key: "blue-300";
|
|
973
993
|
keyword: "purple-300";
|
|
974
|
-
number: "red-
|
|
975
|
-
operator: "red-
|
|
994
|
+
number: "red-300";
|
|
995
|
+
operator: "red-300";
|
|
976
996
|
predefined: "white";
|
|
977
|
-
property: "red-
|
|
997
|
+
property: "red-300";
|
|
978
998
|
regexp: "green-400";
|
|
979
999
|
string: "yellow-500";
|
|
980
|
-
tag: "red-
|
|
1000
|
+
tag: "red-300";
|
|
981
1001
|
text: "orange-500";
|
|
982
1002
|
value: "yellow-500";
|
|
983
1003
|
variable: "green-400";
|
|
984
1004
|
ui: {
|
|
985
1005
|
background: "navy-900";
|
|
986
1006
|
text: "white";
|
|
987
|
-
'indent-active': "
|
|
988
|
-
'indent-inactive': "
|
|
989
|
-
'line-number': "
|
|
1007
|
+
'indent-active': "white-300";
|
|
1008
|
+
'indent-inactive': "white-400";
|
|
1009
|
+
'line-number': "white-500";
|
|
990
1010
|
};
|
|
991
1011
|
};
|
|
992
1012
|
}, "-", "_">;
|
|
@@ -1038,10 +1058,12 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
1038
1058
|
readonly "yellow-900": "#211B00";
|
|
1039
1059
|
readonly "pink-0": "#FFF5FF";
|
|
1040
1060
|
readonly "pink-400": "#F966FF";
|
|
1041
|
-
readonly "red-0": "#
|
|
1042
|
-
readonly "red-
|
|
1061
|
+
readonly "red-0": "#FBF1F0";
|
|
1062
|
+
readonly "red-300": "#E85D7F";
|
|
1063
|
+
readonly "red-400": "#DC5879";
|
|
1043
1064
|
readonly "red-500": "#E91C11";
|
|
1044
1065
|
readonly "red-600": "#BE1809";
|
|
1066
|
+
readonly "red-900": "#280503";
|
|
1045
1067
|
readonly "orange-100": "#FFE8CC";
|
|
1046
1068
|
readonly "orange-500": "#FF8C00";
|
|
1047
1069
|
readonly "hyper-400": "#5533FF";
|
|
@@ -1059,16 +1081,16 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
1059
1081
|
readonly "white-200": string;
|
|
1060
1082
|
readonly "white-600": string;
|
|
1061
1083
|
readonly "white-700": string;
|
|
1062
|
-
}, "-"> | "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-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" | import("@codecademy/variance").Path<{
|
|
1084
|
+
}, "-"> | "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" | import("@codecademy/variance").Path<{
|
|
1063
1085
|
readonly lightBeige: "#FFFBF8";
|
|
1064
1086
|
readonly gold: "#8A7300";
|
|
1065
|
-
readonly teal: "#
|
|
1087
|
+
readonly teal: "#006d82";
|
|
1066
1088
|
readonly purple: "#B3CCFF";
|
|
1067
1089
|
readonly "beige-0": "#FFFBF8";
|
|
1068
1090
|
readonly "pink-800": "#CA00D1";
|
|
1069
1091
|
readonly "orange-800": "#D14900";
|
|
1070
1092
|
readonly "gold-800": "#8A7300";
|
|
1071
|
-
readonly "teal-500": "#
|
|
1093
|
+
readonly "teal-500": "#006d82";
|
|
1072
1094
|
readonly "purple-300": "#B3CCFF";
|
|
1073
1095
|
}, "-">) => string;
|
|
1074
1096
|
}> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
|
package/dist/themes/platform.js
CHANGED
|
@@ -2,8 +2,6 @@ import { createTheme } from '@codecademy/variance';
|
|
|
2
2
|
import { platformPalette } from '../variables';
|
|
3
3
|
import { coreTheme } from './core';
|
|
4
4
|
|
|
5
|
-
// KENNY: main branch to update color tokens for core + platform themes
|
|
6
|
-
|
|
7
5
|
/**
|
|
8
6
|
* @description This is an extended theme for the learning environment with an expanded set of tokens
|
|
9
7
|
* That are not needed for the rest of the application.
|
|
@@ -11,12 +9,15 @@ import { coreTheme } from './core';
|
|
|
11
9
|
|
|
12
10
|
export const platformTheme = createTheme(coreTheme).addColors(platformPalette).addColorModes('dark', {
|
|
13
11
|
light: {
|
|
12
|
+
background: {
|
|
13
|
+
primary: 'blue-0'
|
|
14
|
+
},
|
|
14
15
|
editor: {
|
|
15
16
|
attribute: 'green-700',
|
|
16
17
|
annotation: 'red-500',
|
|
17
18
|
atom: 'pink-800',
|
|
18
19
|
basic: 'navy-800',
|
|
19
|
-
comment: 'navy-
|
|
20
|
+
comment: 'navy-500',
|
|
20
21
|
constant: 'orange-800',
|
|
21
22
|
decoration: 'red-500',
|
|
22
23
|
invalid: 'red-500',
|
|
@@ -35,40 +36,40 @@ export const platformTheme = createTheme(coreTheme).addColors(platformPalette).a
|
|
|
35
36
|
ui: {
|
|
36
37
|
background: 'white',
|
|
37
38
|
text: 'navy-800',
|
|
38
|
-
'indent-active': 'navy-
|
|
39
|
-
'indent-inactive': 'navy-
|
|
40
|
-
'line-number': 'navy-
|
|
39
|
+
'indent-active': 'navy-300',
|
|
40
|
+
'indent-inactive': 'navy-400',
|
|
41
|
+
'line-number': 'navy-500'
|
|
41
42
|
}
|
|
42
43
|
}
|
|
43
44
|
},
|
|
44
45
|
dark: {
|
|
45
46
|
editor: {
|
|
46
47
|
attribute: 'green-400',
|
|
47
|
-
annotation: 'red-
|
|
48
|
+
annotation: 'red-300',
|
|
48
49
|
atom: 'pink-400',
|
|
49
50
|
basic: 'white',
|
|
50
|
-
comment: '
|
|
51
|
+
comment: 'white-500',
|
|
51
52
|
constant: 'orange-500',
|
|
52
|
-
decoration: 'red-
|
|
53
|
-
invalid: 'red-
|
|
53
|
+
decoration: 'red-300',
|
|
54
|
+
invalid: 'red-300',
|
|
54
55
|
key: 'blue-300',
|
|
55
56
|
keyword: 'purple-300',
|
|
56
|
-
number: 'red-
|
|
57
|
-
operator: 'red-
|
|
57
|
+
number: 'red-300',
|
|
58
|
+
operator: 'red-300',
|
|
58
59
|
predefined: 'white',
|
|
59
|
-
property: 'red-
|
|
60
|
+
property: 'red-300',
|
|
60
61
|
regexp: 'green-400',
|
|
61
62
|
string: 'yellow-500',
|
|
62
|
-
tag: 'red-
|
|
63
|
+
tag: 'red-300',
|
|
63
64
|
text: 'orange-500',
|
|
64
65
|
value: 'yellow-500',
|
|
65
66
|
variable: 'green-400',
|
|
66
67
|
ui: {
|
|
67
68
|
background: 'navy-900',
|
|
68
69
|
text: 'white',
|
|
69
|
-
'indent-active': '
|
|
70
|
-
'indent-inactive': '
|
|
71
|
-
'line-number': '
|
|
70
|
+
'indent-active': 'white-300',
|
|
71
|
+
'indent-inactive': 'white-400',
|
|
72
|
+
'line-number': 'white-500'
|
|
72
73
|
}
|
|
73
74
|
}
|
|
74
75
|
}
|
|
@@ -39,10 +39,12 @@ export declare const coreSwatches: {
|
|
|
39
39
|
readonly '400': "#F966FF";
|
|
40
40
|
};
|
|
41
41
|
readonly red: {
|
|
42
|
-
readonly '0': "#
|
|
43
|
-
readonly '
|
|
42
|
+
readonly '0': "#FBF1F0";
|
|
43
|
+
readonly '300': "#E85D7F";
|
|
44
|
+
readonly '400': "#DC5879";
|
|
44
45
|
readonly '500': "#E91C11";
|
|
45
46
|
readonly '600': "#BE1809";
|
|
47
|
+
readonly '900': "#280503";
|
|
46
48
|
};
|
|
47
49
|
readonly orange: {
|
|
48
50
|
readonly '100': "#FFE8CC";
|
|
@@ -136,10 +138,12 @@ export declare const corePalette: {
|
|
|
136
138
|
readonly "yellow-900": "#211B00";
|
|
137
139
|
readonly "pink-0": "#FFF5FF";
|
|
138
140
|
readonly "pink-400": "#F966FF";
|
|
139
|
-
readonly "red-0": "#
|
|
140
|
-
readonly "red-
|
|
141
|
+
readonly "red-0": "#FBF1F0";
|
|
142
|
+
readonly "red-300": "#E85D7F";
|
|
143
|
+
readonly "red-400": "#DC5879";
|
|
141
144
|
readonly "red-500": "#E91C11";
|
|
142
145
|
readonly "red-600": "#BE1809";
|
|
146
|
+
readonly "red-900": "#280503";
|
|
143
147
|
readonly "orange-100": "#FFE8CC";
|
|
144
148
|
readonly "orange-500": "#FF8C00";
|
|
145
149
|
readonly "hyper-400": "#5533FF";
|
|
@@ -175,7 +179,7 @@ export declare const platformSwatches: {
|
|
|
175
179
|
readonly '800': "#CA00D1";
|
|
176
180
|
};
|
|
177
181
|
readonly teal: {
|
|
178
|
-
readonly '500': "#
|
|
182
|
+
readonly '500': "#006d82";
|
|
179
183
|
};
|
|
180
184
|
readonly purple: {
|
|
181
185
|
readonly '300': "#B3CCFF";
|
|
@@ -184,19 +188,19 @@ export declare const platformSwatches: {
|
|
|
184
188
|
export declare const truePlatformColors: {
|
|
185
189
|
readonly lightBeige: "#FFFBF8";
|
|
186
190
|
readonly gold: "#8A7300";
|
|
187
|
-
readonly teal: "#
|
|
191
|
+
readonly teal: "#006d82";
|
|
188
192
|
readonly purple: "#B3CCFF";
|
|
189
193
|
};
|
|
190
194
|
export declare const platformPalette: {
|
|
191
195
|
readonly lightBeige: "#FFFBF8";
|
|
192
196
|
readonly gold: "#8A7300";
|
|
193
|
-
readonly teal: "#
|
|
197
|
+
readonly teal: "#006d82";
|
|
194
198
|
readonly purple: "#B3CCFF";
|
|
195
199
|
readonly "beige-0": "#FFFBF8";
|
|
196
200
|
readonly "pink-800": "#CA00D1";
|
|
197
201
|
readonly "orange-800": "#D14900";
|
|
198
202
|
readonly "gold-800": "#8A7300";
|
|
199
|
-
readonly "teal-500": "#
|
|
203
|
+
readonly "teal-500": "#006d82";
|
|
200
204
|
readonly "purple-300": "#B3CCFF";
|
|
201
205
|
};
|
|
202
206
|
/**
|
|
@@ -258,10 +262,12 @@ export declare const lxStudioPalette: {
|
|
|
258
262
|
"yellow-900": "#211B00";
|
|
259
263
|
"pink-0": "#FFF5FF";
|
|
260
264
|
"pink-400": "#F966FF";
|
|
261
|
-
"red-0": "#
|
|
262
|
-
"red-
|
|
265
|
+
"red-0": "#FBF1F0";
|
|
266
|
+
"red-300": "#E85D7F";
|
|
267
|
+
"red-400": "#DC5879";
|
|
263
268
|
"red-500": "#E91C11";
|
|
264
269
|
"red-600": "#BE1809";
|
|
270
|
+
"red-900": "#280503";
|
|
265
271
|
"orange-100": "#FFE8CC";
|
|
266
272
|
"orange-500": "#FF8C00";
|
|
267
273
|
"hyper-400": "#5533FF";
|
package/dist/variables/colors.js
CHANGED
|
@@ -48,10 +48,12 @@ export const coreSwatches = {
|
|
|
48
48
|
'400': '#F966FF'
|
|
49
49
|
},
|
|
50
50
|
red: {
|
|
51
|
-
'0': '#
|
|
52
|
-
'
|
|
51
|
+
'0': '#FBF1F0',
|
|
52
|
+
'300': '#E85D7F',
|
|
53
|
+
'400': '#DC5879',
|
|
53
54
|
'500': '#E91C11',
|
|
54
|
-
'600': '#BE1809'
|
|
55
|
+
'600': '#BE1809',
|
|
56
|
+
'900': '#280503'
|
|
55
57
|
},
|
|
56
58
|
orange: {
|
|
57
59
|
'100': '#FFE8CC',
|
|
@@ -93,7 +95,7 @@ export const trueColors = {
|
|
|
93
95
|
palePink: coreSwatches.pink[0],
|
|
94
96
|
paleYellow: coreSwatches.yellow[0],
|
|
95
97
|
pink: coreSwatches.pink[400],
|
|
96
|
-
paleRed: coreSwatches.red[
|
|
98
|
+
paleRed: coreSwatches.red[400],
|
|
97
99
|
red: coreSwatches.red[500],
|
|
98
100
|
yellow: coreSwatches.yellow[500],
|
|
99
101
|
black,
|
|
@@ -122,7 +124,7 @@ export const platformSwatches = {
|
|
|
122
124
|
'800': '#CA00D1'
|
|
123
125
|
},
|
|
124
126
|
teal: {
|
|
125
|
-
'500': '#
|
|
127
|
+
'500': '#006d82'
|
|
126
128
|
},
|
|
127
129
|
purple: {
|
|
128
130
|
'300': '#B3CCFF'
|
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.6.5-alpha.
|
|
4
|
+
"version": "17.6.5-alpha.fed1a2.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": "
|
|
37
|
+
"gitHead": "07a8bf9afd638d400f5be5ba1478d1e3fb92fff2"
|
|
38
38
|
}
|