@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.
Files changed (11) hide show
  1. package/dist/GamutProvider.d.ts +1 -0
  2. package/dist/GamutProvider.js +5 -2
  3. package/dist/themes/admin.d.ts +73 -25
  4. package/dist/themes/core.d.ts +36 -12
  5. package/dist/themes/core.js +11 -5
  6. package/dist/themes/lxStudio.d.ts +79 -27
  7. package/dist/themes/platform.d.ts +149 -61
  8. package/dist/themes/platform.js +20 -15
  9. package/dist/variables/colors.d.ts +44 -10
  10. package/dist/variables/colors.js +24 -7
  11. package/package.json +3 -3
package/dist/themes/platform.d.ts CHANGED
@@ -149,15 +149,19 @@ export declare const platformTheme: Record<"breakpoints", {
149
149
  readonly "green-100": "#EAFDC6";
150
150
  readonly "green-400": "#AEE938";
151
151
  readonly "green-700": "#008A27";
152
+ readonly "green-900": "#151C07";
152
153
  readonly "yellow-0": "#FFFAE5";
153
154
  readonly "yellow-400": "#CCA900";
154
155
  readonly "yellow-500": "#FFD300";
156
+ readonly "yellow-900": "#211B00";
155
157
  readonly "pink-0": "#FFF5FF";
156
158
  readonly "pink-400": "#F966FF";
157
- readonly "red-0": "#E85D7F";
158
- readonly "red-100": "#DC5879";
159
+ readonly "red-0": "#FBF1F0";
160
+ readonly "red-300": "#E85D7F";
161
+ readonly "red-400": "#DC5879";
159
162
  readonly "red-500": "#E91C11";
160
163
  readonly "red-600": "#BE1809";
164
+ readonly "red-900": "#280503";
161
165
  readonly "orange-100": "#FFE8CC";
162
166
  readonly "orange-500": "#FF8C00";
163
167
  readonly "hyper-400": "#5533FF";
@@ -196,6 +200,9 @@ export declare const platformTheme: Record<"breakpoints", {
196
200
  selected: "navy-100";
197
201
  disabled: "navy-200";
198
202
  hover: "navy-200";
203
+ success: "green-0";
204
+ warning: "yellow-0";
205
+ error: "red-0";
199
206
  };
200
207
  shadow: {
201
208
  primary: "navy-800";
@@ -232,7 +239,7 @@ export declare const platformTheme: Record<"breakpoints", {
232
239
  secondary: "white-600";
233
240
  };
234
241
  feedback: {
235
- error: "red-0";
242
+ error: "red-300";
236
243
  success: "green-400";
237
244
  warning: "yellow-0";
238
245
  };
@@ -244,6 +251,9 @@ export declare const platformTheme: Record<"breakpoints", {
244
251
  selected: "white-100";
245
252
  disabled: "white-200";
246
253
  hover: "white-200";
254
+ success: "green-900";
255
+ warning: "yellow-900";
256
+ error: "red-900";
247
257
  };
248
258
  shadow: {
249
259
  primary: "white";
@@ -259,8 +269,8 @@ export declare const platformTheme: Record<"breakpoints", {
259
269
  hover: "white-700";
260
270
  };
261
271
  danger: {
262
- _: "red-0";
263
- hover: "red-100";
272
+ _: "red-300";
273
+ hover: "red-400";
264
274
  };
265
275
  interface: {
266
276
  _: "yellow-500";
@@ -311,15 +321,19 @@ export declare const platformTheme: Record<"breakpoints", {
311
321
  readonly "green-100": "#EAFDC6";
312
322
  readonly "green-400": "#AEE938";
313
323
  readonly "green-700": "#008A27";
324
+ readonly "green-900": "#151C07";
314
325
  readonly "yellow-0": "#FFFAE5";
315
326
  readonly "yellow-400": "#CCA900";
316
327
  readonly "yellow-500": "#FFD300";
328
+ readonly "yellow-900": "#211B00";
317
329
  readonly "pink-0": "#FFF5FF";
318
330
  readonly "pink-400": "#F966FF";
319
- readonly "red-0": "#E85D7F";
320
- readonly "red-100": "#DC5879";
331
+ readonly "red-0": "#FBF1F0";
332
+ readonly "red-300": "#E85D7F";
333
+ readonly "red-400": "#DC5879";
321
334
  readonly "red-500": "#E91C11";
322
335
  readonly "red-600": "#BE1809";
336
+ readonly "red-900": "#280503";
323
337
  readonly "orange-100": "#FFE8CC";
324
338
  readonly "orange-500": "#FF8C00";
325
339
  readonly "hyper-400": "#5533FF";
@@ -359,6 +373,9 @@ export declare const platformTheme: Record<"breakpoints", {
359
373
  selected: "navy-100";
360
374
  disabled: "navy-200";
361
375
  hover: "navy-200";
376
+ success: "green-0";
377
+ warning: "yellow-0";
378
+ error: "red-0";
362
379
  };
363
380
  shadow: {
364
381
  primary: "navy-800";
@@ -396,7 +413,7 @@ export declare const platformTheme: Record<"breakpoints", {
396
413
  secondary: "white-600";
397
414
  };
398
415
  feedback: {
399
- error: "red-0";
416
+ error: "red-300";
400
417
  success: "green-400";
401
418
  warning: "yellow-0";
402
419
  };
@@ -408,6 +425,9 @@ export declare const platformTheme: Record<"breakpoints", {
408
425
  selected: "white-100";
409
426
  disabled: "white-200";
410
427
  hover: "white-200";
428
+ success: "green-900";
429
+ warning: "yellow-900";
430
+ error: "red-900";
411
431
  };
412
432
  shadow: {
413
433
  primary: "white";
@@ -423,8 +443,8 @@ export declare const platformTheme: Record<"breakpoints", {
423
443
  hover: "white-700";
424
444
  };
425
445
  danger: {
426
- _: "red-0";
427
- hover: "red-100";
446
+ _: "red-300";
447
+ hover: "red-400";
428
448
  };
429
449
  interface: {
430
450
  _: "yellow-500";
@@ -478,15 +498,19 @@ export declare const platformTheme: Record<"breakpoints", {
478
498
  readonly "green-100": "#EAFDC6";
479
499
  readonly "green-400": "#AEE938";
480
500
  readonly "green-700": "#008A27";
501
+ readonly "green-900": "#151C07";
481
502
  readonly "yellow-0": "#FFFAE5";
482
503
  readonly "yellow-400": "#CCA900";
483
504
  readonly "yellow-500": "#FFD300";
505
+ readonly "yellow-900": "#211B00";
484
506
  readonly "pink-0": "#FFF5FF";
485
507
  readonly "pink-400": "#F966FF";
486
- readonly "red-0": "#E85D7F";
487
- readonly "red-100": "#DC5879";
508
+ readonly "red-0": "#FBF1F0";
509
+ readonly "red-300": "#E85D7F";
510
+ readonly "red-400": "#DC5879";
488
511
  readonly "red-500": "#E91C11";
489
512
  readonly "red-600": "#BE1809";
513
+ readonly "red-900": "#280503";
490
514
  readonly "orange-100": "#FFE8CC";
491
515
  readonly "orange-500": "#FF8C00";
492
516
  readonly "hyper-400": "#5533FF";
@@ -511,22 +535,35 @@ export declare const platformTheme: Record<"breakpoints", {
511
535
  }, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
512
536
  readonly lightBeige: "#FFFBF8";
513
537
  readonly gold: "#8A7300";
514
- readonly teal: "#027E97";
538
+ readonly teal: "#006D82";
515
539
  readonly purple: "#B3CCFF";
540
+ readonly 'comment-light': "#686C7B";
541
+ readonly 'comment-dark': "#84868D";
542
+ readonly 'indent-active-light': "#BCBDC4";
543
+ readonly 'indent-active-dark': "#3B3D49";
544
+ readonly 'indent-inactive-light': "#8E919D";
545
+ readonly 'indent-inactive-dark': "#5F616B";
546
+ readonly 'line-number-active-light': "#31374C";
547
+ readonly 'line-number-active-dark': "#CECFD2";
548
+ readonly 'line-number-inactive-light': "#686C7B";
549
+ readonly 'line-number-inactive-dark': "#84868D";
516
550
  readonly "beige-0": "#FFFBF8";
517
551
  readonly "pink-800": "#CA00D1";
518
552
  readonly "orange-800": "#D14900";
519
553
  readonly "gold-800": "#8A7300";
520
- readonly "teal-500": "#027E97";
554
+ readonly "teal-500": "#006D82";
521
555
  readonly "purple-300": "#B3CCFF";
522
556
  }, "-">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
523
557
  colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
558
+ background: {
559
+ primary: "blue-0";
560
+ };
524
561
  editor: {
525
562
  attribute: "green-700";
526
563
  annotation: "red-500";
527
564
  atom: "pink-800";
528
565
  basic: "navy-800";
529
- comment: "navy-300";
566
+ comment: "comment-light";
530
567
  constant: "orange-800";
531
568
  decoration: "red-500";
532
569
  invalid: "red-500";
@@ -545,39 +582,41 @@ export declare const platformTheme: Record<"breakpoints", {
545
582
  ui: {
546
583
  background: "white";
547
584
  text: "navy-800";
548
- 'indent-active': "navy-900";
549
- 'indent-inactive': "navy-600";
550
- 'line-number': "navy-300";
585
+ 'indent-active': "indent-active-light";
586
+ 'indent-inactive': "indent-inactive-light";
587
+ 'line-number-active': "line-number-active-light";
588
+ 'line-number-inactive': "line-number-inactive-light";
551
589
  };
552
590
  };
553
591
  } | {
554
592
  editor: {
555
593
  attribute: "green-400";
556
- annotation: "red-0";
594
+ annotation: "red-300";
557
595
  atom: "pink-400";
558
596
  basic: "white";
559
- comment: "gray-600";
597
+ comment: "comment-dark";
560
598
  constant: "orange-500";
561
- decoration: "red-0";
562
- invalid: "red-0";
599
+ decoration: "red-300";
600
+ invalid: "red-300";
563
601
  key: "blue-300";
564
602
  keyword: "purple-300";
565
- number: "red-0";
566
- operator: "red-0";
603
+ number: "red-300";
604
+ operator: "red-300";
567
605
  predefined: "white";
568
- property: "red-0";
606
+ property: "red-300";
569
607
  regexp: "green-400";
570
608
  string: "yellow-500";
571
- tag: "red-0";
609
+ tag: "red-300";
572
610
  text: "orange-500";
573
611
  value: "yellow-500";
574
612
  variable: "green-400";
575
613
  ui: {
576
614
  background: "navy-900";
577
615
  text: "white";
578
- 'indent-active': "gray-900";
579
- 'indent-inactive': "gray-800";
580
- 'line-number': "gray-600";
616
+ 'indent-active': "indent-active-dark";
617
+ 'indent-inactive': "indent-inactive-dark";
618
+ 'line-number-active': "line-number-active-dark";
619
+ 'line-number-inactive': "line-number-inactive-dark";
581
620
  };
582
621
  };
583
622
  }, "-", "_">, "colors"> & import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
@@ -619,15 +658,19 @@ export declare const platformTheme: Record<"breakpoints", {
619
658
  readonly "green-100": "#EAFDC6";
620
659
  readonly "green-400": "#AEE938";
621
660
  readonly "green-700": "#008A27";
661
+ readonly "green-900": "#151C07";
622
662
  readonly "yellow-0": "#FFFAE5";
623
663
  readonly "yellow-400": "#CCA900";
624
664
  readonly "yellow-500": "#FFD300";
665
+ readonly "yellow-900": "#211B00";
625
666
  readonly "pink-0": "#FFF5FF";
626
667
  readonly "pink-400": "#F966FF";
627
- readonly "red-0": "#E85D7F";
628
- readonly "red-100": "#DC5879";
668
+ readonly "red-0": "#FBF1F0";
669
+ readonly "red-300": "#E85D7F";
670
+ readonly "red-400": "#DC5879";
629
671
  readonly "red-500": "#E91C11";
630
672
  readonly "red-600": "#BE1809";
673
+ readonly "red-900": "#280503";
631
674
  readonly "orange-100": "#FFE8CC";
632
675
  readonly "orange-500": "#FF8C00";
633
676
  readonly "hyper-400": "#5533FF";
@@ -665,6 +708,9 @@ export declare const platformTheme: Record<"breakpoints", {
665
708
  selected: "navy-100";
666
709
  disabled: "navy-200";
667
710
  hover: "navy-200";
711
+ success: "green-0";
712
+ warning: "yellow-0";
713
+ error: "red-0";
668
714
  };
669
715
  shadow: {
670
716
  primary: "navy-800";
@@ -701,7 +747,7 @@ export declare const platformTheme: Record<"breakpoints", {
701
747
  secondary: "white-600";
702
748
  };
703
749
  feedback: {
704
- error: "red-0";
750
+ error: "red-300";
705
751
  success: "green-400";
706
752
  warning: "yellow-0";
707
753
  };
@@ -713,6 +759,9 @@ export declare const platformTheme: Record<"breakpoints", {
713
759
  selected: "white-100";
714
760
  disabled: "white-200";
715
761
  hover: "white-200";
762
+ success: "green-900";
763
+ warning: "yellow-900";
764
+ error: "red-900";
716
765
  };
717
766
  shadow: {
718
767
  primary: "white";
@@ -728,8 +777,8 @@ export declare const platformTheme: Record<"breakpoints", {
728
777
  hover: "white-700";
729
778
  };
730
779
  danger: {
731
- _: "red-0";
732
- hover: "red-100";
780
+ _: "red-300";
781
+ hover: "red-400";
733
782
  };
734
783
  interface: {
735
784
  _: "yellow-500";
@@ -780,15 +829,19 @@ export declare const platformTheme: Record<"breakpoints", {
780
829
  readonly "green-100": "#EAFDC6";
781
830
  readonly "green-400": "#AEE938";
782
831
  readonly "green-700": "#008A27";
832
+ readonly "green-900": "#151C07";
783
833
  readonly "yellow-0": "#FFFAE5";
784
834
  readonly "yellow-400": "#CCA900";
785
835
  readonly "yellow-500": "#FFD300";
836
+ readonly "yellow-900": "#211B00";
786
837
  readonly "pink-0": "#FFF5FF";
787
838
  readonly "pink-400": "#F966FF";
788
- readonly "red-0": "#E85D7F";
789
- readonly "red-100": "#DC5879";
839
+ readonly "red-0": "#FBF1F0";
840
+ readonly "red-300": "#E85D7F";
841
+ readonly "red-400": "#DC5879";
790
842
  readonly "red-500": "#E91C11";
791
843
  readonly "red-600": "#BE1809";
844
+ readonly "red-900": "#280503";
792
845
  readonly "orange-100": "#FFE8CC";
793
846
  readonly "orange-500": "#FF8C00";
794
847
  readonly "hyper-400": "#5533FF";
@@ -809,13 +862,23 @@ export declare const platformTheme: Record<"breakpoints", {
809
862
  }, "-">, "color">>, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
810
863
  readonly lightBeige: "#FFFBF8";
811
864
  readonly gold: "#8A7300";
812
- readonly teal: "#027E97";
865
+ readonly teal: "#006D82";
813
866
  readonly purple: "#B3CCFF";
867
+ readonly 'comment-light': "#686C7B";
868
+ readonly 'comment-dark': "#84868D";
869
+ readonly 'indent-active-light': "#BCBDC4";
870
+ readonly 'indent-active-dark': "#3B3D49";
871
+ readonly 'indent-inactive-light': "#8E919D";
872
+ readonly 'indent-inactive-dark': "#5F616B";
873
+ readonly 'line-number-active-light': "#31374C";
874
+ readonly 'line-number-active-dark': "#CECFD2";
875
+ readonly 'line-number-inactive-light': "#686C7B";
876
+ readonly 'line-number-inactive-dark': "#84868D";
814
877
  readonly "beige-0": "#FFFBF8";
815
878
  readonly "pink-800": "#CA00D1";
816
879
  readonly "orange-800": "#D14900";
817
880
  readonly "gold-800": "#8A7300";
818
- readonly "teal-500": "#027E97";
881
+ readonly "teal-500": "#006D82";
819
882
  readonly "purple-300": "#B3CCFF";
820
883
  }, "-">, "color">>;
821
884
  modes: import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
@@ -839,6 +902,9 @@ export declare const platformTheme: Record<"breakpoints", {
839
902
  selected: "navy-100";
840
903
  disabled: "navy-200";
841
904
  hover: "navy-200";
905
+ success: "green-0";
906
+ warning: "yellow-0";
907
+ error: "red-0";
842
908
  };
843
909
  shadow: {
844
910
  primary: "navy-800";
@@ -876,7 +942,7 @@ export declare const platformTheme: Record<"breakpoints", {
876
942
  secondary: "white-600";
877
943
  };
878
944
  feedback: {
879
- error: "red-0";
945
+ error: "red-300";
880
946
  success: "green-400";
881
947
  warning: "yellow-0";
882
948
  };
@@ -888,6 +954,9 @@ export declare const platformTheme: Record<"breakpoints", {
888
954
  selected: "white-100";
889
955
  disabled: "white-200";
890
956
  hover: "white-200";
957
+ success: "green-900";
958
+ warning: "yellow-900";
959
+ error: "red-900";
891
960
  };
892
961
  shadow: {
893
962
  primary: "white";
@@ -903,8 +972,8 @@ export declare const platformTheme: Record<"breakpoints", {
903
972
  hover: "white-700";
904
973
  };
905
974
  danger: {
906
- _: "red-0";
907
- hover: "red-100";
975
+ _: "red-300";
976
+ hover: "red-400";
908
977
  };
909
978
  interface: {
910
979
  _: "yellow-500";
@@ -919,12 +988,15 @@ export declare const platformTheme: Record<"breakpoints", {
919
988
  }, "-", "_">;
920
989
  }>, {
921
990
  light: import("@codecademy/variance").LiteralPaths<{
991
+ background: {
992
+ primary: "blue-0";
993
+ };
922
994
  editor: {
923
995
  attribute: "green-700";
924
996
  annotation: "red-500";
925
997
  atom: "pink-800";
926
998
  basic: "navy-800";
927
- comment: "navy-300";
999
+ comment: "comment-light";
928
1000
  constant: "orange-800";
929
1001
  decoration: "red-500";
930
1002
  invalid: "red-500";
@@ -943,40 +1015,42 @@ export declare const platformTheme: Record<"breakpoints", {
943
1015
  ui: {
944
1016
  background: "white";
945
1017
  text: "navy-800";
946
- 'indent-active': "navy-900";
947
- 'indent-inactive': "navy-600";
948
- 'line-number': "navy-300";
1018
+ 'indent-active': "indent-active-light";
1019
+ 'indent-inactive': "indent-inactive-light";
1020
+ 'line-number-active': "line-number-active-light";
1021
+ 'line-number-inactive': "line-number-inactive-light";
949
1022
  };
950
1023
  };
951
1024
  }, "-", "_">;
952
1025
  dark: import("@codecademy/variance").LiteralPaths<{
953
1026
  editor: {
954
1027
  attribute: "green-400";
955
- annotation: "red-0";
1028
+ annotation: "red-300";
956
1029
  atom: "pink-400";
957
1030
  basic: "white";
958
- comment: "gray-600";
1031
+ comment: "comment-dark";
959
1032
  constant: "orange-500";
960
- decoration: "red-0";
961
- invalid: "red-0";
1033
+ decoration: "red-300";
1034
+ invalid: "red-300";
962
1035
  key: "blue-300";
963
1036
  keyword: "purple-300";
964
- number: "red-0";
965
- operator: "red-0";
1037
+ number: "red-300";
1038
+ operator: "red-300";
966
1039
  predefined: "white";
967
- property: "red-0";
1040
+ property: "red-300";
968
1041
  regexp: "green-400";
969
1042
  string: "yellow-500";
970
- tag: "red-0";
1043
+ tag: "red-300";
971
1044
  text: "orange-500";
972
1045
  value: "yellow-500";
973
1046
  variable: "green-400";
974
1047
  ui: {
975
1048
  background: "navy-900";
976
1049
  text: "white";
977
- 'indent-active': "gray-900";
978
- 'indent-inactive': "gray-800";
979
- 'line-number': "gray-600";
1050
+ 'indent-active': "indent-active-dark";
1051
+ 'indent-inactive': "indent-inactive-dark";
1052
+ 'line-number-active': "line-number-active-dark";
1053
+ 'line-number-inactive': "line-number-inactive-dark";
980
1054
  };
981
1055
  };
982
1056
  }, "-", "_">;
@@ -1021,15 +1095,19 @@ export declare const platformTheme: Record<"breakpoints", {
1021
1095
  readonly "green-100": "#EAFDC6";
1022
1096
  readonly "green-400": "#AEE938";
1023
1097
  readonly "green-700": "#008A27";
1098
+ readonly "green-900": "#151C07";
1024
1099
  readonly "yellow-0": "#FFFAE5";
1025
1100
  readonly "yellow-400": "#CCA900";
1026
1101
  readonly "yellow-500": "#FFD300";
1102
+ readonly "yellow-900": "#211B00";
1027
1103
  readonly "pink-0": "#FFF5FF";
1028
1104
  readonly "pink-400": "#F966FF";
1029
- readonly "red-0": "#E85D7F";
1030
- readonly "red-100": "#DC5879";
1105
+ readonly "red-0": "#FBF1F0";
1106
+ readonly "red-300": "#E85D7F";
1107
+ readonly "red-400": "#DC5879";
1031
1108
  readonly "red-500": "#E91C11";
1032
1109
  readonly "red-600": "#BE1809";
1110
+ readonly "red-900": "#280503";
1033
1111
  readonly "orange-100": "#FFE8CC";
1034
1112
  readonly "orange-500": "#FF8C00";
1035
1113
  readonly "hyper-400": "#5533FF";
@@ -1047,16 +1125,26 @@ export declare const platformTheme: Record<"breakpoints", {
1047
1125
  readonly "white-200": string;
1048
1126
  readonly "white-600": string;
1049
1127
  readonly "white-700": string;
1050
- }, "-"> | "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" | import("@codecademy/variance").Path<{
1128
+ }, "-"> | "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<{
1051
1129
  readonly lightBeige: "#FFFBF8";
1052
1130
  readonly gold: "#8A7300";
1053
- readonly teal: "#027E97";
1131
+ readonly teal: "#006D82";
1054
1132
  readonly purple: "#B3CCFF";
1133
+ readonly 'comment-light': "#686C7B";
1134
+ readonly 'comment-dark': "#84868D";
1135
+ readonly 'indent-active-light': "#BCBDC4";
1136
+ readonly 'indent-active-dark': "#3B3D49";
1137
+ readonly 'indent-inactive-light': "#8E919D";
1138
+ readonly 'indent-inactive-dark': "#5F616B";
1139
+ readonly 'line-number-active-light': "#31374C";
1140
+ readonly 'line-number-active-dark': "#CECFD2";
1141
+ readonly 'line-number-inactive-light': "#686C7B";
1142
+ readonly 'line-number-inactive-dark': "#84868D";
1055
1143
  readonly "beige-0": "#FFFBF8";
1056
1144
  readonly "pink-800": "#CA00D1";
1057
1145
  readonly "orange-800": "#D14900";
1058
1146
  readonly "gold-800": "#8A7300";
1059
- readonly "teal-500": "#027E97";
1147
+ readonly "teal-500": "#006D82";
1060
1148
  readonly "purple-300": "#B3CCFF";
1061
1149
  }, "-">) => string;
1062
1150
  }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
package/dist/themes/platform.js CHANGED
@@ -9,12 +9,15 @@ import { coreTheme } from './core';
9
9
 
10
10
  export const platformTheme = createTheme(coreTheme).addColors(platformPalette).addColorModes('dark', {
11
11
  light: {
12
+ background: {
13
+ primary: 'blue-0'
14
+ },
12
15
  editor: {
13
16
  attribute: 'green-700',
14
17
  annotation: 'red-500',
15
18
  atom: 'pink-800',
16
19
  basic: 'navy-800',
17
- comment: 'navy-300',
20
+ comment: 'comment-light',
18
21
  constant: 'orange-800',
19
22
  decoration: 'red-500',
20
23
  invalid: 'red-500',
@@ -33,40 +36,42 @@ export const platformTheme = createTheme(coreTheme).addColors(platformPalette).a
33
36
  ui: {
34
37
  background: 'white',
35
38
  text: 'navy-800',
36
- 'indent-active': 'navy-900',
37
- 'indent-inactive': 'navy-600',
38
- 'line-number': 'navy-300'
39
+ 'indent-active': 'indent-active-light',
40
+ 'indent-inactive': 'indent-inactive-light',
41
+ 'line-number-active': 'line-number-active-light',
42
+ 'line-number-inactive': 'line-number-inactive-light'
39
43
  }
40
44
  }
41
45
  },
42
46
  dark: {
43
47
  editor: {
44
48
  attribute: 'green-400',
45
- annotation: 'red-0',
49
+ annotation: 'red-300',
46
50
  atom: 'pink-400',
47
51
  basic: 'white',
48
- comment: 'gray-600',
52
+ comment: 'comment-dark',
49
53
  constant: 'orange-500',
50
- decoration: 'red-0',
51
- invalid: 'red-0',
54
+ decoration: 'red-300',
55
+ invalid: 'red-300',
52
56
  key: 'blue-300',
53
57
  keyword: 'purple-300',
54
- number: 'red-0',
55
- operator: 'red-0',
58
+ number: 'red-300',
59
+ operator: 'red-300',
56
60
  predefined: 'white',
57
- property: 'red-0',
61
+ property: 'red-300',
58
62
  regexp: 'green-400',
59
63
  string: 'yellow-500',
60
- tag: 'red-0',
64
+ tag: 'red-300',
61
65
  text: 'orange-500',
62
66
  value: 'yellow-500',
63
67
  variable: 'green-400',
64
68
  ui: {
65
69
  background: 'navy-900',
66
70
  text: 'white',
67
- 'indent-active': 'gray-900',
68
- 'indent-inactive': 'gray-800',
69
- 'line-number': 'gray-600'
71
+ 'indent-active': 'indent-active-dark',
72
+ 'indent-inactive': 'indent-inactive-dark',
73
+ 'line-number-active': 'line-number-active-dark',
74
+ 'line-number-inactive': 'line-number-inactive-dark'
70
75
  }
71
76
  }
72
77
  }