@codecademy/gamut-styles 17.6.5-alpha.2d736e.0 → 17.6.5-alpha.30169d.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 (9) hide show
  1. package/dist/themes/admin.d.ts +35 -7
  2. package/dist/themes/core.d.ts +17 -3
  3. package/dist/themes/core.js +4 -0
  4. package/dist/themes/lxStudio.d.ts +38 -8
  5. package/dist/themes/platform.d.ts +87 -33
  6. package/dist/themes/platform.js +11 -10
  7. package/dist/variables/colors.d.ts +31 -7
  8. package/dist/variables/colors.js +17 -4
  9. package/package.json +2 -2
package/dist/themes/admin.d.ts CHANGED
@@ -119,12 +119,14 @@ export declare const adminTheme: Record<"breakpoints", {
119
119
  readonly "green-100": "#EAFDC6";
120
120
  readonly "green-400": "#AEE938";
121
121
  readonly "green-700": "#008A27";
122
+ readonly "green-900": "#151C07";
122
123
  readonly "yellow-0": "#FFFAE5";
123
124
  readonly "yellow-400": "#CCA900";
124
125
  readonly "yellow-500": "#FFD300";
126
+ readonly "yellow-900": "#211B00";
125
127
  readonly "pink-0": "#FFF5FF";
126
128
  readonly "pink-400": "#F966FF";
127
- readonly "red-0": "##FBF1F0";
129
+ readonly "red-0": "#FBF1F0";
128
130
  readonly "red-300": "#E85D7F";
129
131
  readonly "red-400": "#DC5879";
130
132
  readonly "red-500": "#E91C11";
@@ -168,6 +170,8 @@ export declare const adminTheme: Record<"breakpoints", {
168
170
  selected: "navy-100";
169
171
  disabled: "navy-200";
170
172
  hover: "navy-200";
173
+ success: "green-0";
174
+ warning: "yellow-0";
171
175
  error: "red-0";
172
176
  };
173
177
  shadow: {
@@ -217,6 +221,8 @@ export declare const adminTheme: Record<"breakpoints", {
217
221
  selected: "white-100";
218
222
  disabled: "white-200";
219
223
  hover: "white-200";
224
+ success: "green-900";
225
+ warning: "yellow-900";
220
226
  error: "red-900";
221
227
  };
222
228
  shadow: {
@@ -285,12 +291,14 @@ export declare const adminTheme: Record<"breakpoints", {
285
291
  readonly "green-100": "#EAFDC6";
286
292
  readonly "green-400": "#AEE938";
287
293
  readonly "green-700": "#008A27";
294
+ readonly "green-900": "#151C07";
288
295
  readonly "yellow-0": "#FFFAE5";
289
296
  readonly "yellow-400": "#CCA900";
290
297
  readonly "yellow-500": "#FFD300";
298
+ readonly "yellow-900": "#211B00";
291
299
  readonly "pink-0": "#FFF5FF";
292
300
  readonly "pink-400": "#F966FF";
293
- readonly "red-0": "##FBF1F0";
301
+ readonly "red-0": "#FBF1F0";
294
302
  readonly "red-300": "#E85D7F";
295
303
  readonly "red-400": "#DC5879";
296
304
  readonly "red-500": "#E91C11";
@@ -335,6 +343,8 @@ export declare const adminTheme: Record<"breakpoints", {
335
343
  selected: "navy-100";
336
344
  disabled: "navy-200";
337
345
  hover: "navy-200";
346
+ success: "green-0";
347
+ warning: "yellow-0";
338
348
  error: "red-0";
339
349
  };
340
350
  shadow: {
@@ -385,6 +395,8 @@ export declare const adminTheme: Record<"breakpoints", {
385
395
  selected: "white-100";
386
396
  disabled: "white-200";
387
397
  hover: "white-200";
398
+ success: "green-900";
399
+ warning: "yellow-900";
388
400
  error: "red-900";
389
401
  };
390
402
  shadow: {
@@ -456,12 +468,14 @@ export declare const adminTheme: Record<"breakpoints", {
456
468
  readonly "green-100": "#EAFDC6";
457
469
  readonly "green-400": "#AEE938";
458
470
  readonly "green-700": "#008A27";
471
+ readonly "green-900": "#151C07";
459
472
  readonly "yellow-0": "#FFFAE5";
460
473
  readonly "yellow-400": "#CCA900";
461
474
  readonly "yellow-500": "#FFD300";
475
+ readonly "yellow-900": "#211B00";
462
476
  readonly "pink-0": "#FFF5FF";
463
477
  readonly "pink-400": "#F966FF";
464
- readonly "red-0": "##FBF1F0";
478
+ readonly "red-0": "#FBF1F0";
465
479
  readonly "red-300": "#E85D7F";
466
480
  readonly "red-400": "#DC5879";
467
481
  readonly "red-500": "#E91C11";
@@ -537,12 +551,14 @@ export declare const adminTheme: Record<"breakpoints", {
537
551
  readonly "green-100": "#EAFDC6";
538
552
  readonly "green-400": "#AEE938";
539
553
  readonly "green-700": "#008A27";
554
+ readonly "green-900": "#151C07";
540
555
  readonly "yellow-0": "#FFFAE5";
541
556
  readonly "yellow-400": "#CCA900";
542
557
  readonly "yellow-500": "#FFD300";
558
+ readonly "yellow-900": "#211B00";
543
559
  readonly "pink-0": "#FFF5FF";
544
560
  readonly "pink-400": "#F966FF";
545
- readonly "red-0": "##FBF1F0";
561
+ readonly "red-0": "#FBF1F0";
546
562
  readonly "red-300": "#E85D7F";
547
563
  readonly "red-400": "#DC5879";
548
564
  readonly "red-500": "#E91C11";
@@ -585,6 +601,8 @@ export declare const adminTheme: Record<"breakpoints", {
585
601
  selected: "navy-100";
586
602
  disabled: "navy-200";
587
603
  hover: "navy-200";
604
+ success: "green-0";
605
+ warning: "yellow-0";
588
606
  error: "red-0";
589
607
  };
590
608
  shadow: {
@@ -634,6 +652,8 @@ export declare const adminTheme: Record<"breakpoints", {
634
652
  selected: "white-100";
635
653
  disabled: "white-200";
636
654
  hover: "white-200";
655
+ success: "green-900";
656
+ warning: "yellow-900";
637
657
  error: "red-900";
638
658
  };
639
659
  shadow: {
@@ -702,12 +722,14 @@ export declare const adminTheme: Record<"breakpoints", {
702
722
  readonly "green-100": "#EAFDC6";
703
723
  readonly "green-400": "#AEE938";
704
724
  readonly "green-700": "#008A27";
725
+ readonly "green-900": "#151C07";
705
726
  readonly "yellow-0": "#FFFAE5";
706
727
  readonly "yellow-400": "#CCA900";
707
728
  readonly "yellow-500": "#FFD300";
729
+ readonly "yellow-900": "#211B00";
708
730
  readonly "pink-0": "#FFF5FF";
709
731
  readonly "pink-400": "#F966FF";
710
- readonly "red-0": "##FBF1F0";
732
+ readonly "red-0": "#FBF1F0";
711
733
  readonly "red-300": "#E85D7F";
712
734
  readonly "red-400": "#DC5879";
713
735
  readonly "red-500": "#E91C11";
@@ -752,6 +774,8 @@ export declare const adminTheme: Record<"breakpoints", {
752
774
  selected: "navy-100";
753
775
  disabled: "navy-200";
754
776
  hover: "navy-200";
777
+ success: "green-0";
778
+ warning: "yellow-0";
755
779
  error: "red-0";
756
780
  };
757
781
  shadow: {
@@ -802,6 +826,8 @@ export declare const adminTheme: Record<"breakpoints", {
802
826
  selected: "white-100";
803
827
  disabled: "white-200";
804
828
  hover: "white-200";
829
+ success: "green-900";
830
+ warning: "yellow-900";
805
831
  error: "red-900";
806
832
  };
807
833
  shadow: {
@@ -885,12 +911,14 @@ export declare const adminTheme: Record<"breakpoints", {
885
911
  readonly "green-100": "#EAFDC6";
886
912
  readonly "green-400": "#AEE938";
887
913
  readonly "green-700": "#008A27";
914
+ readonly "green-900": "#151C07";
888
915
  readonly "yellow-0": "#FFFAE5";
889
916
  readonly "yellow-400": "#CCA900";
890
917
  readonly "yellow-500": "#FFD300";
918
+ readonly "yellow-900": "#211B00";
891
919
  readonly "pink-0": "#FFF5FF";
892
920
  readonly "pink-400": "#F966FF";
893
- readonly "red-0": "##FBF1F0";
921
+ readonly "red-0": "#FBF1F0";
894
922
  readonly "red-300": "#E85D7F";
895
923
  readonly "red-400": "#DC5879";
896
924
  readonly "red-500": "#E91C11";
@@ -913,7 +941,7 @@ export declare const adminTheme: Record<"breakpoints", {
913
941
  readonly "white-200": string;
914
942
  readonly "white-600": string;
915
943
  readonly "white-700": string;
916
- }, "-"> | "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-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;
917
945
  }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
918
946
  export type AdminThemeShape = typeof adminTheme;
919
947
  export interface AdminTheme extends AdminThemeShape {
package/dist/themes/core.d.ts CHANGED
@@ -118,12 +118,14 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
118
118
  readonly "green-100": "#EAFDC6";
119
119
  readonly "green-400": "#AEE938";
120
120
  readonly "green-700": "#008A27";
121
+ readonly "green-900": "#151C07";
121
122
  readonly "yellow-0": "#FFFAE5";
122
123
  readonly "yellow-400": "#CCA900";
123
124
  readonly "yellow-500": "#FFD300";
125
+ readonly "yellow-900": "#211B00";
124
126
  readonly "pink-0": "#FFF5FF";
125
127
  readonly "pink-400": "#F966FF";
126
- readonly "red-0": "##FBF1F0";
128
+ readonly "red-0": "#FBF1F0";
127
129
  readonly "red-300": "#E85D7F";
128
130
  readonly "red-400": "#DC5879";
129
131
  readonly "red-500": "#E91C11";
@@ -167,6 +169,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
167
169
  selected: "navy-100";
168
170
  disabled: "navy-200";
169
171
  hover: "navy-200";
172
+ success: "green-0";
173
+ warning: "yellow-0";
170
174
  error: "red-0";
171
175
  };
172
176
  shadow: {
@@ -216,6 +220,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
216
220
  selected: "white-100";
217
221
  disabled: "white-200";
218
222
  hover: "white-200";
223
+ success: "green-900";
224
+ warning: "yellow-900";
219
225
  error: "red-900";
220
226
  };
221
227
  shadow: {
@@ -284,12 +290,14 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
284
290
  readonly "green-100": "#EAFDC6";
285
291
  readonly "green-400": "#AEE938";
286
292
  readonly "green-700": "#008A27";
293
+ readonly "green-900": "#151C07";
287
294
  readonly "yellow-0": "#FFFAE5";
288
295
  readonly "yellow-400": "#CCA900";
289
296
  readonly "yellow-500": "#FFD300";
297
+ readonly "yellow-900": "#211B00";
290
298
  readonly "pink-0": "#FFF5FF";
291
299
  readonly "pink-400": "#F966FF";
292
- readonly "red-0": "##FBF1F0";
300
+ readonly "red-0": "#FBF1F0";
293
301
  readonly "red-300": "#E85D7F";
294
302
  readonly "red-400": "#DC5879";
295
303
  readonly "red-500": "#E91C11";
@@ -334,6 +342,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
334
342
  selected: "navy-100";
335
343
  disabled: "navy-200";
336
344
  hover: "navy-200";
345
+ success: "green-0";
346
+ warning: "yellow-0";
337
347
  error: "red-0";
338
348
  };
339
349
  shadow: {
@@ -384,6 +394,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
384
394
  selected: "white-100";
385
395
  disabled: "white-200";
386
396
  hover: "white-200";
397
+ success: "green-900";
398
+ warning: "yellow-900";
387
399
  error: "red-900";
388
400
  };
389
401
  shadow: {
@@ -455,12 +467,14 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
455
467
  readonly "green-100": "#EAFDC6";
456
468
  readonly "green-400": "#AEE938";
457
469
  readonly "green-700": "#008A27";
470
+ readonly "green-900": "#151C07";
458
471
  readonly "yellow-0": "#FFFAE5";
459
472
  readonly "yellow-400": "#CCA900";
460
473
  readonly "yellow-500": "#FFD300";
474
+ readonly "yellow-900": "#211B00";
461
475
  readonly "pink-0": "#FFF5FF";
462
476
  readonly "pink-400": "#F966FF";
463
- readonly "red-0": "##FBF1F0";
477
+ readonly "red-0": "#FBF1F0";
464
478
  readonly "red-300": "#E85D7F";
465
479
  readonly "red-400": "#DC5879";
466
480
  readonly "red-500": "#E91C11";
package/dist/themes/core.js CHANGED
@@ -37,6 +37,8 @@ export const coreTheme = createTheme({
37
37
  selected: 'navy-100',
38
38
  disabled: 'navy-200',
39
39
  hover: 'navy-200',
40
+ success: 'green-0',
41
+ warning: 'yellow-0',
40
42
  error: 'red-0'
41
43
  },
42
44
  shadow: {
@@ -87,6 +89,8 @@ export const coreTheme = createTheme({
87
89
  selected: 'white-100',
88
90
  disabled: 'white-200',
89
91
  hover: 'white-200',
92
+ success: 'green-900',
93
+ warning: 'yellow-900',
90
94
  error: 'red-900'
91
95
  },
92
96
  shadow: {
package/dist/themes/lxStudio.d.ts CHANGED
@@ -129,12 +129,14 @@ export declare const lxStudioTheme: Record<"breakpoints", {
129
129
  readonly "green-100": "#EAFDC6";
130
130
  readonly "green-400": "#AEE938";
131
131
  readonly "green-700": "#008A27";
132
+ readonly "green-900": "#151C07";
132
133
  readonly "yellow-0": "#FFFAE5";
133
134
  readonly "yellow-400": "#CCA900";
134
135
  readonly "yellow-500": "#FFD300";
136
+ readonly "yellow-900": "#211B00";
135
137
  readonly "pink-0": "#FFF5FF";
136
138
  readonly "pink-400": "#F966FF";
137
- readonly "red-0": "##FBF1F0";
139
+ readonly "red-0": "#FBF1F0";
138
140
  readonly "red-300": "#E85D7F";
139
141
  readonly "red-400": "#DC5879";
140
142
  readonly "red-500": "#E91C11";
@@ -177,6 +179,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
177
179
  selected: "navy-100";
178
180
  disabled: "navy-200";
179
181
  hover: "navy-200";
182
+ success: "green-0";
183
+ warning: "yellow-0";
180
184
  error: "red-0";
181
185
  };
182
186
  shadow: {
@@ -226,6 +230,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
226
230
  selected: "white-100";
227
231
  disabled: "white-200";
228
232
  hover: "white-200";
233
+ success: "green-900";
234
+ warning: "yellow-900";
229
235
  error: "red-900";
230
236
  };
231
237
  shadow: {
@@ -294,12 +300,14 @@ export declare const lxStudioTheme: Record<"breakpoints", {
294
300
  readonly "green-100": "#EAFDC6";
295
301
  readonly "green-400": "#AEE938";
296
302
  readonly "green-700": "#008A27";
303
+ readonly "green-900": "#151C07";
297
304
  readonly "yellow-0": "#FFFAE5";
298
305
  readonly "yellow-400": "#CCA900";
299
306
  readonly "yellow-500": "#FFD300";
307
+ readonly "yellow-900": "#211B00";
300
308
  readonly "pink-0": "#FFF5FF";
301
309
  readonly "pink-400": "#F966FF";
302
- readonly "red-0": "##FBF1F0";
310
+ readonly "red-0": "#FBF1F0";
303
311
  readonly "red-300": "#E85D7F";
304
312
  readonly "red-400": "#DC5879";
305
313
  readonly "red-500": "#E91C11";
@@ -344,6 +352,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
344
352
  selected: "navy-100";
345
353
  disabled: "navy-200";
346
354
  hover: "navy-200";
355
+ success: "green-0";
356
+ warning: "yellow-0";
347
357
  error: "red-0";
348
358
  };
349
359
  shadow: {
@@ -394,6 +404,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
394
404
  selected: "white-100";
395
405
  disabled: "white-200";
396
406
  hover: "white-200";
407
+ success: "green-900";
408
+ warning: "yellow-900";
397
409
  error: "red-900";
398
410
  };
399
411
  shadow: {
@@ -465,12 +477,14 @@ export declare const lxStudioTheme: Record<"breakpoints", {
465
477
  readonly "green-100": "#EAFDC6";
466
478
  readonly "green-400": "#AEE938";
467
479
  readonly "green-700": "#008A27";
480
+ readonly "green-900": "#151C07";
468
481
  readonly "yellow-0": "#FFFAE5";
469
482
  readonly "yellow-400": "#CCA900";
470
483
  readonly "yellow-500": "#FFD300";
484
+ readonly "yellow-900": "#211B00";
471
485
  readonly "pink-0": "#FFF5FF";
472
486
  readonly "pink-400": "#F966FF";
473
- readonly "red-0": "##FBF1F0";
487
+ readonly "red-0": "#FBF1F0";
474
488
  readonly "red-300": "#E85D7F";
475
489
  readonly "red-400": "#DC5879";
476
490
  readonly "red-500": "#E91C11";
@@ -541,12 +555,14 @@ export declare const lxStudioTheme: Record<"breakpoints", {
541
555
  "green-100": "#EAFDC6";
542
556
  "green-400": "#AEE938";
543
557
  "green-700": "#008A27";
558
+ "green-900": "#151C07";
544
559
  "yellow-0": "#FFFAE5";
545
560
  "yellow-400": "#CCA900";
546
561
  "yellow-500": "#FFD300";
562
+ "yellow-900": "#211B00";
547
563
  "pink-0": "#FFF5FF";
548
564
  "pink-400": "#F966FF";
549
- "red-0": "##FBF1F0";
565
+ "red-0": "#FBF1F0";
550
566
  "red-300": "#E85D7F";
551
567
  "red-400": "#DC5879";
552
568
  "red-500": "#E91C11";
@@ -632,12 +648,14 @@ export declare const lxStudioTheme: Record<"breakpoints", {
632
648
  readonly "green-100": "#EAFDC6";
633
649
  readonly "green-400": "#AEE938";
634
650
  readonly "green-700": "#008A27";
651
+ readonly "green-900": "#151C07";
635
652
  readonly "yellow-0": "#FFFAE5";
636
653
  readonly "yellow-400": "#CCA900";
637
654
  readonly "yellow-500": "#FFD300";
655
+ readonly "yellow-900": "#211B00";
638
656
  readonly "pink-0": "#FFF5FF";
639
657
  readonly "pink-400": "#F966FF";
640
- readonly "red-0": "##FBF1F0";
658
+ readonly "red-0": "#FBF1F0";
641
659
  readonly "red-300": "#E85D7F";
642
660
  readonly "red-400": "#DC5879";
643
661
  readonly "red-500": "#E91C11";
@@ -680,6 +698,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
680
698
  selected: "navy-100";
681
699
  disabled: "navy-200";
682
700
  hover: "navy-200";
701
+ success: "green-0";
702
+ warning: "yellow-0";
683
703
  error: "red-0";
684
704
  };
685
705
  shadow: {
@@ -729,6 +749,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
729
749
  selected: "white-100";
730
750
  disabled: "white-200";
731
751
  hover: "white-200";
752
+ success: "green-900";
753
+ warning: "yellow-900";
732
754
  error: "red-900";
733
755
  };
734
756
  shadow: {
@@ -797,12 +819,14 @@ export declare const lxStudioTheme: Record<"breakpoints", {
797
819
  readonly "green-100": "#EAFDC6";
798
820
  readonly "green-400": "#AEE938";
799
821
  readonly "green-700": "#008A27";
822
+ readonly "green-900": "#151C07";
800
823
  readonly "yellow-0": "#FFFAE5";
801
824
  readonly "yellow-400": "#CCA900";
802
825
  readonly "yellow-500": "#FFD300";
826
+ readonly "yellow-900": "#211B00";
803
827
  readonly "pink-0": "#FFF5FF";
804
828
  readonly "pink-400": "#F966FF";
805
- readonly "red-0": "##FBF1F0";
829
+ readonly "red-0": "#FBF1F0";
806
830
  readonly "red-300": "#E85D7F";
807
831
  readonly "red-400": "#DC5879";
808
832
  readonly "red-500": "#E91C11";
@@ -868,12 +892,14 @@ export declare const lxStudioTheme: Record<"breakpoints", {
868
892
  "green-100": "#EAFDC6";
869
893
  "green-400": "#AEE938";
870
894
  "green-700": "#008A27";
895
+ "green-900": "#151C07";
871
896
  "yellow-0": "#FFFAE5";
872
897
  "yellow-400": "#CCA900";
873
898
  "yellow-500": "#FFD300";
899
+ "yellow-900": "#211B00";
874
900
  "pink-0": "#FFF5FF";
875
901
  "pink-400": "#F966FF";
876
- "red-0": "##FBF1F0";
902
+ "red-0": "#FBF1F0";
877
903
  "red-300": "#E85D7F";
878
904
  "red-400": "#DC5879";
879
905
  "red-500": "#E91C11";
@@ -918,6 +944,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
918
944
  selected: "navy-100";
919
945
  disabled: "navy-200";
920
946
  hover: "navy-200";
947
+ success: "green-0";
948
+ warning: "yellow-0";
921
949
  error: "red-0";
922
950
  };
923
951
  shadow: {
@@ -968,6 +996,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
968
996
  selected: "white-100";
969
997
  disabled: "white-200";
970
998
  hover: "white-200";
999
+ success: "green-900";
1000
+ warning: "yellow-900";
971
1001
  error: "red-900";
972
1002
  };
973
1003
  shadow: {
@@ -1025,7 +1055,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
1025
1055
  }, "-", "_">;
1026
1056
  }>;
1027
1057
  mode: "light";
1028
- _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-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-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;
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;
1029
1059
  }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
1030
1060
  export type LxStudioThemeShape = typeof lxStudioTheme;
1031
1061
  export interface LxStudioTheme extends LxStudioThemeShape {
package/dist/themes/platform.d.ts CHANGED
@@ -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;
@@ -133,12 +129,14 @@ export declare const platformTheme: Record<"breakpoints", {
133
129
  readonly "green-100": "#EAFDC6";
134
130
  readonly "green-400": "#AEE938";
135
131
  readonly "green-700": "#008A27";
132
+ readonly "green-900": "#151C07";
136
133
  readonly "yellow-0": "#FFFAE5";
137
134
  readonly "yellow-400": "#CCA900";
138
135
  readonly "yellow-500": "#FFD300";
136
+ readonly "yellow-900": "#211B00";
139
137
  readonly "pink-0": "#FFF5FF";
140
138
  readonly "pink-400": "#F966FF";
141
- readonly "red-0": "##FBF1F0";
139
+ readonly "red-0": "#FBF1F0";
142
140
  readonly "red-300": "#E85D7F";
143
141
  readonly "red-400": "#DC5879";
144
142
  readonly "red-500": "#E91C11";
@@ -182,6 +180,8 @@ export declare const platformTheme: Record<"breakpoints", {
182
180
  selected: "navy-100";
183
181
  disabled: "navy-200";
184
182
  hover: "navy-200";
183
+ success: "green-0";
184
+ warning: "yellow-0";
185
185
  error: "red-0";
186
186
  };
187
187
  shadow: {
@@ -231,6 +231,8 @@ export declare const platformTheme: Record<"breakpoints", {
231
231
  selected: "white-100";
232
232
  disabled: "white-200";
233
233
  hover: "white-200";
234
+ success: "green-900";
235
+ warning: "yellow-900";
234
236
  error: "red-900";
235
237
  };
236
238
  shadow: {
@@ -299,12 +301,14 @@ export declare const platformTheme: Record<"breakpoints", {
299
301
  readonly "green-100": "#EAFDC6";
300
302
  readonly "green-400": "#AEE938";
301
303
  readonly "green-700": "#008A27";
304
+ readonly "green-900": "#151C07";
302
305
  readonly "yellow-0": "#FFFAE5";
303
306
  readonly "yellow-400": "#CCA900";
304
307
  readonly "yellow-500": "#FFD300";
308
+ readonly "yellow-900": "#211B00";
305
309
  readonly "pink-0": "#FFF5FF";
306
310
  readonly "pink-400": "#F966FF";
307
- readonly "red-0": "##FBF1F0";
311
+ readonly "red-0": "#FBF1F0";
308
312
  readonly "red-300": "#E85D7F";
309
313
  readonly "red-400": "#DC5879";
310
314
  readonly "red-500": "#E91C11";
@@ -349,6 +353,8 @@ export declare const platformTheme: Record<"breakpoints", {
349
353
  selected: "navy-100";
350
354
  disabled: "navy-200";
351
355
  hover: "navy-200";
356
+ success: "green-0";
357
+ warning: "yellow-0";
352
358
  error: "red-0";
353
359
  };
354
360
  shadow: {
@@ -399,6 +405,8 @@ export declare const platformTheme: Record<"breakpoints", {
399
405
  selected: "white-100";
400
406
  disabled: "white-200";
401
407
  hover: "white-200";
408
+ success: "green-900";
409
+ warning: "yellow-900";
402
410
  error: "red-900";
403
411
  };
404
412
  shadow: {
@@ -470,12 +478,14 @@ export declare const platformTheme: Record<"breakpoints", {
470
478
  readonly "green-100": "#EAFDC6";
471
479
  readonly "green-400": "#AEE938";
472
480
  readonly "green-700": "#008A27";
481
+ readonly "green-900": "#151C07";
473
482
  readonly "yellow-0": "#FFFAE5";
474
483
  readonly "yellow-400": "#CCA900";
475
484
  readonly "yellow-500": "#FFD300";
485
+ readonly "yellow-900": "#211B00";
476
486
  readonly "pink-0": "#FFF5FF";
477
487
  readonly "pink-400": "#F966FF";
478
- readonly "red-0": "##FBF1F0";
488
+ readonly "red-0": "#FBF1F0";
479
489
  readonly "red-300": "#E85D7F";
480
490
  readonly "red-400": "#DC5879";
481
491
  readonly "red-500": "#E91C11";
@@ -505,22 +515,33 @@ export declare const platformTheme: Record<"breakpoints", {
505
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<{
506
516
  readonly lightBeige: "#FFFBF8";
507
517
  readonly gold: "#8A7300";
508
- readonly teal: "#027E97";
518
+ readonly teal: "#006d82";
509
519
  readonly purple: "#B3CCFF";
520
+ readonly 'comment-light': "#686c7b";
521
+ readonly 'comment-dark': "#84868d";
522
+ readonly 'indent-active-light': "#bcbdc4";
523
+ readonly 'indent-active-dark': "#3b3d49";
524
+ readonly 'indent-inactive-light': "#8e919d";
525
+ readonly 'indent-inactive-dark': "#5f616b";
526
+ readonly 'line-number-light': "#686c7b";
527
+ readonly 'line-number-dark': "#84868d";
510
528
  readonly "beige-0": "#FFFBF8";
511
529
  readonly "pink-800": "#CA00D1";
512
530
  readonly "orange-800": "#D14900";
513
531
  readonly "gold-800": "#8A7300";
514
- readonly "teal-500": "#027E97";
532
+ readonly "teal-500": "#006d82";
515
533
  readonly "purple-300": "#B3CCFF";
516
534
  }, "-">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
517
535
  colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
536
+ background: {
537
+ primary: "blue-0";
538
+ };
518
539
  editor: {
519
540
  attribute: "green-700";
520
541
  annotation: "red-500";
521
542
  atom: "pink-800";
522
543
  basic: "navy-800";
523
- comment: "navy-300";
544
+ comment: "comment-light";
524
545
  constant: "orange-800";
525
546
  decoration: "red-500";
526
547
  invalid: "red-500";
@@ -539,9 +560,9 @@ export declare const platformTheme: Record<"breakpoints", {
539
560
  ui: {
540
561
  background: "white";
541
562
  text: "navy-800";
542
- 'indent-active': "navy-900";
543
- 'indent-inactive': "navy-600";
544
- 'line-number': "navy-300";
563
+ 'indent-active': "indent-active-light";
564
+ 'indent-inactive': "indent-inactive-light";
565
+ 'line-number': "line-number-light";
545
566
  };
546
567
  };
547
568
  } | {
@@ -550,7 +571,7 @@ export declare const platformTheme: Record<"breakpoints", {
550
571
  annotation: "red-300";
551
572
  atom: "pink-400";
552
573
  basic: "white";
553
- comment: "gray-600";
574
+ comment: "comment-dark";
554
575
  constant: "orange-500";
555
576
  decoration: "red-300";
556
577
  invalid: "red-300";
@@ -569,9 +590,9 @@ export declare const platformTheme: Record<"breakpoints", {
569
590
  ui: {
570
591
  background: "navy-900";
571
592
  text: "white";
572
- 'indent-active': "gray-900";
573
- 'indent-inactive': "gray-800";
574
- 'line-number': "gray-600";
593
+ 'indent-active': "indent-active-dark";
594
+ 'indent-inactive': "indent-inactive-dark";
595
+ 'line-number': "line-number-dark";
575
596
  };
576
597
  };
577
598
  }, "-", "_">, "colors"> & import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
@@ -613,12 +634,14 @@ export declare const platformTheme: Record<"breakpoints", {
613
634
  readonly "green-100": "#EAFDC6";
614
635
  readonly "green-400": "#AEE938";
615
636
  readonly "green-700": "#008A27";
637
+ readonly "green-900": "#151C07";
616
638
  readonly "yellow-0": "#FFFAE5";
617
639
  readonly "yellow-400": "#CCA900";
618
640
  readonly "yellow-500": "#FFD300";
641
+ readonly "yellow-900": "#211B00";
619
642
  readonly "pink-0": "#FFF5FF";
620
643
  readonly "pink-400": "#F966FF";
621
- readonly "red-0": "##FBF1F0";
644
+ readonly "red-0": "#FBF1F0";
622
645
  readonly "red-300": "#E85D7F";
623
646
  readonly "red-400": "#DC5879";
624
647
  readonly "red-500": "#E91C11";
@@ -661,6 +684,8 @@ export declare const platformTheme: Record<"breakpoints", {
661
684
  selected: "navy-100";
662
685
  disabled: "navy-200";
663
686
  hover: "navy-200";
687
+ success: "green-0";
688
+ warning: "yellow-0";
664
689
  error: "red-0";
665
690
  };
666
691
  shadow: {
@@ -710,6 +735,8 @@ export declare const platformTheme: Record<"breakpoints", {
710
735
  selected: "white-100";
711
736
  disabled: "white-200";
712
737
  hover: "white-200";
738
+ success: "green-900";
739
+ warning: "yellow-900";
713
740
  error: "red-900";
714
741
  };
715
742
  shadow: {
@@ -778,12 +805,14 @@ export declare const platformTheme: Record<"breakpoints", {
778
805
  readonly "green-100": "#EAFDC6";
779
806
  readonly "green-400": "#AEE938";
780
807
  readonly "green-700": "#008A27";
808
+ readonly "green-900": "#151C07";
781
809
  readonly "yellow-0": "#FFFAE5";
782
810
  readonly "yellow-400": "#CCA900";
783
811
  readonly "yellow-500": "#FFD300";
812
+ readonly "yellow-900": "#211B00";
784
813
  readonly "pink-0": "#FFF5FF";
785
814
  readonly "pink-400": "#F966FF";
786
- readonly "red-0": "##FBF1F0";
815
+ readonly "red-0": "#FBF1F0";
787
816
  readonly "red-300": "#E85D7F";
788
817
  readonly "red-400": "#DC5879";
789
818
  readonly "red-500": "#E91C11";
@@ -809,13 +838,21 @@ export declare const platformTheme: Record<"breakpoints", {
809
838
  }, "-">, "color">>, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
810
839
  readonly lightBeige: "#FFFBF8";
811
840
  readonly gold: "#8A7300";
812
- readonly teal: "#027E97";
841
+ readonly teal: "#006d82";
813
842
  readonly purple: "#B3CCFF";
843
+ readonly 'comment-light': "#686c7b";
844
+ readonly 'comment-dark': "#84868d";
845
+ readonly 'indent-active-light': "#bcbdc4";
846
+ readonly 'indent-active-dark': "#3b3d49";
847
+ readonly 'indent-inactive-light': "#8e919d";
848
+ readonly 'indent-inactive-dark': "#5f616b";
849
+ readonly 'line-number-light': "#686c7b";
850
+ readonly 'line-number-dark': "#84868d";
814
851
  readonly "beige-0": "#FFFBF8";
815
852
  readonly "pink-800": "#CA00D1";
816
853
  readonly "orange-800": "#D14900";
817
854
  readonly "gold-800": "#8A7300";
818
- readonly "teal-500": "#027E97";
855
+ readonly "teal-500": "#006d82";
819
856
  readonly "purple-300": "#B3CCFF";
820
857
  }, "-">, "color">>;
821
858
  modes: import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
@@ -839,6 +876,8 @@ export declare const platformTheme: Record<"breakpoints", {
839
876
  selected: "navy-100";
840
877
  disabled: "navy-200";
841
878
  hover: "navy-200";
879
+ success: "green-0";
880
+ warning: "yellow-0";
842
881
  error: "red-0";
843
882
  };
844
883
  shadow: {
@@ -889,6 +928,8 @@ export declare const platformTheme: Record<"breakpoints", {
889
928
  selected: "white-100";
890
929
  disabled: "white-200";
891
930
  hover: "white-200";
931
+ success: "green-900";
932
+ warning: "yellow-900";
892
933
  error: "red-900";
893
934
  };
894
935
  shadow: {
@@ -921,12 +962,15 @@ export declare const platformTheme: Record<"breakpoints", {
921
962
  }, "-", "_">;
922
963
  }>, {
923
964
  light: import("@codecademy/variance").LiteralPaths<{
965
+ background: {
966
+ primary: "blue-0";
967
+ };
924
968
  editor: {
925
969
  attribute: "green-700";
926
970
  annotation: "red-500";
927
971
  atom: "pink-800";
928
972
  basic: "navy-800";
929
- comment: "navy-300";
973
+ comment: "comment-light";
930
974
  constant: "orange-800";
931
975
  decoration: "red-500";
932
976
  invalid: "red-500";
@@ -945,9 +989,9 @@ export declare const platformTheme: Record<"breakpoints", {
945
989
  ui: {
946
990
  background: "white";
947
991
  text: "navy-800";
948
- 'indent-active': "navy-900";
949
- 'indent-inactive': "navy-600";
950
- 'line-number': "navy-300";
992
+ 'indent-active': "indent-active-light";
993
+ 'indent-inactive': "indent-inactive-light";
994
+ 'line-number': "line-number-light";
951
995
  };
952
996
  };
953
997
  }, "-", "_">;
@@ -957,7 +1001,7 @@ export declare const platformTheme: Record<"breakpoints", {
957
1001
  annotation: "red-300";
958
1002
  atom: "pink-400";
959
1003
  basic: "white";
960
- comment: "gray-600";
1004
+ comment: "comment-dark";
961
1005
  constant: "orange-500";
962
1006
  decoration: "red-300";
963
1007
  invalid: "red-300";
@@ -976,9 +1020,9 @@ export declare const platformTheme: Record<"breakpoints", {
976
1020
  ui: {
977
1021
  background: "navy-900";
978
1022
  text: "white";
979
- 'indent-active': "gray-900";
980
- 'indent-inactive': "gray-800";
981
- 'line-number': "gray-600";
1023
+ 'indent-active': "indent-active-dark";
1024
+ 'indent-inactive': "indent-inactive-dark";
1025
+ 'line-number': "line-number-dark";
982
1026
  };
983
1027
  };
984
1028
  }, "-", "_">;
@@ -1023,12 +1067,14 @@ export declare const platformTheme: Record<"breakpoints", {
1023
1067
  readonly "green-100": "#EAFDC6";
1024
1068
  readonly "green-400": "#AEE938";
1025
1069
  readonly "green-700": "#008A27";
1070
+ readonly "green-900": "#151C07";
1026
1071
  readonly "yellow-0": "#FFFAE5";
1027
1072
  readonly "yellow-400": "#CCA900";
1028
1073
  readonly "yellow-500": "#FFD300";
1074
+ readonly "yellow-900": "#211B00";
1029
1075
  readonly "pink-0": "#FFF5FF";
1030
1076
  readonly "pink-400": "#F966FF";
1031
- readonly "red-0": "##FBF1F0";
1077
+ readonly "red-0": "#FBF1F0";
1032
1078
  readonly "red-300": "#E85D7F";
1033
1079
  readonly "red-400": "#DC5879";
1034
1080
  readonly "red-500": "#E91C11";
@@ -1051,16 +1097,24 @@ export declare const platformTheme: Record<"breakpoints", {
1051
1097
  readonly "white-200": string;
1052
1098
  readonly "white-600": string;
1053
1099
  readonly "white-700": string;
1054
- }, "-"> | "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-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<{
1100
+ }, "-"> | "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<{
1055
1101
  readonly lightBeige: "#FFFBF8";
1056
1102
  readonly gold: "#8A7300";
1057
- readonly teal: "#027E97";
1103
+ readonly teal: "#006d82";
1058
1104
  readonly purple: "#B3CCFF";
1105
+ readonly 'comment-light': "#686c7b";
1106
+ readonly 'comment-dark': "#84868d";
1107
+ readonly 'indent-active-light': "#bcbdc4";
1108
+ readonly 'indent-active-dark': "#3b3d49";
1109
+ readonly 'indent-inactive-light': "#8e919d";
1110
+ readonly 'indent-inactive-dark': "#5f616b";
1111
+ readonly 'line-number-light': "#686c7b";
1112
+ readonly 'line-number-dark': "#84868d";
1059
1113
  readonly "beige-0": "#FFFBF8";
1060
1114
  readonly "pink-800": "#CA00D1";
1061
1115
  readonly "orange-800": "#D14900";
1062
1116
  readonly "gold-800": "#8A7300";
1063
- readonly "teal-500": "#027E97";
1117
+ readonly "teal-500": "#006d82";
1064
1118
  readonly "purple-300": "#B3CCFF";
1065
1119
  }, "-">) => string;
1066
1120
  }> & 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-300',
20
+ comment: 'comment-light',
20
21
  constant: 'orange-800',
21
22
  decoration: 'red-500',
22
23
  invalid: 'red-500',
@@ -35,9 +36,9 @@ export const platformTheme = createTheme(coreTheme).addColors(platformPalette).a
35
36
  ui: {
36
37
  background: 'white',
37
38
  text: 'navy-800',
38
- 'indent-active': 'navy-900',
39
- 'indent-inactive': 'navy-600',
40
- 'line-number': 'navy-300'
39
+ 'indent-active': 'indent-active-light',
40
+ 'indent-inactive': 'indent-inactive-light',
41
+ 'line-number': 'line-number-light'
41
42
  }
42
43
  }
43
44
  },
@@ -47,7 +48,7 @@ export const platformTheme = createTheme(coreTheme).addColors(platformPalette).a
47
48
  annotation: 'red-300',
48
49
  atom: 'pink-400',
49
50
  basic: 'white',
50
- comment: 'gray-600',
51
+ comment: 'comment-dark',
51
52
  constant: 'orange-500',
52
53
  decoration: 'red-300',
53
54
  invalid: 'red-300',
@@ -66,9 +67,9 @@ export const platformTheme = createTheme(coreTheme).addColors(platformPalette).a
66
67
  ui: {
67
68
  background: 'navy-900',
68
69
  text: 'white',
69
- 'indent-active': 'gray-900',
70
- 'indent-inactive': 'gray-800',
71
- 'line-number': 'gray-600'
70
+ 'indent-active': 'indent-active-dark',
71
+ 'indent-inactive': 'indent-inactive-dark',
72
+ 'line-number': 'line-number-dark'
72
73
  }
73
74
  }
74
75
  }
package/dist/variables/colors.d.ts CHANGED
@@ -26,18 +26,20 @@ export declare const coreSwatches: {
26
26
  readonly '100': "#EAFDC6";
27
27
  readonly '400': "#AEE938";
28
28
  readonly '700': "#008A27";
29
+ readonly '900': "#151C07";
29
30
  };
30
31
  readonly yellow: {
31
32
  readonly '0': "#FFFAE5";
32
33
  readonly '400': "#CCA900";
33
34
  readonly '500': "#FFD300";
35
+ readonly '900': "#211B00";
34
36
  };
35
37
  readonly pink: {
36
38
  readonly '0': "#FFF5FF";
37
39
  readonly '400': "#F966FF";
38
40
  };
39
41
  readonly red: {
40
- readonly '0': "##FBF1F0";
42
+ readonly '0': "#FBF1F0";
41
43
  readonly '300': "#E85D7F";
42
44
  readonly '400': "#DC5879";
43
45
  readonly '500': "#E91C11";
@@ -129,12 +131,14 @@ export declare const corePalette: {
129
131
  readonly "green-100": "#EAFDC6";
130
132
  readonly "green-400": "#AEE938";
131
133
  readonly "green-700": "#008A27";
134
+ readonly "green-900": "#151C07";
132
135
  readonly "yellow-0": "#FFFAE5";
133
136
  readonly "yellow-400": "#CCA900";
134
137
  readonly "yellow-500": "#FFD300";
138
+ readonly "yellow-900": "#211B00";
135
139
  readonly "pink-0": "#FFF5FF";
136
140
  readonly "pink-400": "#F966FF";
137
- readonly "red-0": "##FBF1F0";
141
+ readonly "red-0": "#FBF1F0";
138
142
  readonly "red-300": "#E85D7F";
139
143
  readonly "red-400": "#DC5879";
140
144
  readonly "red-500": "#E91C11";
@@ -175,7 +179,7 @@ export declare const platformSwatches: {
175
179
  readonly '800': "#CA00D1";
176
180
  };
177
181
  readonly teal: {
178
- readonly '500': "#027E97";
182
+ readonly '500': "#006d82";
179
183
  };
180
184
  readonly purple: {
181
185
  readonly '300': "#B3CCFF";
@@ -184,19 +188,37 @@ export declare const platformSwatches: {
184
188
  export declare const truePlatformColors: {
185
189
  readonly lightBeige: "#FFFBF8";
186
190
  readonly gold: "#8A7300";
187
- readonly teal: "#027E97";
191
+ readonly teal: "#006d82";
188
192
  readonly purple: "#B3CCFF";
189
193
  };
194
+ export declare const platformEditorColors: {
195
+ readonly 'comment-light': "#686c7b";
196
+ readonly 'comment-dark': "#84868d";
197
+ readonly 'indent-active-light': "#bcbdc4";
198
+ readonly 'indent-active-dark': "#3b3d49";
199
+ readonly 'indent-inactive-light': "#8e919d";
200
+ readonly 'indent-inactive-dark': "#5f616b";
201
+ readonly 'line-number-light': "#686c7b";
202
+ readonly 'line-number-dark': "#84868d";
203
+ };
190
204
  export declare const platformPalette: {
191
205
  readonly lightBeige: "#FFFBF8";
192
206
  readonly gold: "#8A7300";
193
- readonly teal: "#027E97";
207
+ readonly teal: "#006d82";
194
208
  readonly purple: "#B3CCFF";
209
+ readonly 'comment-light': "#686c7b";
210
+ readonly 'comment-dark': "#84868d";
211
+ readonly 'indent-active-light': "#bcbdc4";
212
+ readonly 'indent-active-dark': "#3b3d49";
213
+ readonly 'indent-inactive-light': "#8e919d";
214
+ readonly 'indent-inactive-dark': "#5f616b";
215
+ readonly 'line-number-light': "#686c7b";
216
+ readonly 'line-number-dark': "#84868d";
195
217
  readonly "beige-0": "#FFFBF8";
196
218
  readonly "pink-800": "#CA00D1";
197
219
  readonly "orange-800": "#D14900";
198
220
  readonly "gold-800": "#8A7300";
199
- readonly "teal-500": "#027E97";
221
+ readonly "teal-500": "#006d82";
200
222
  readonly "purple-300": "#B3CCFF";
201
223
  };
202
224
  /**
@@ -251,12 +273,14 @@ export declare const lxStudioPalette: {
251
273
  "green-100": "#EAFDC6";
252
274
  "green-400": "#AEE938";
253
275
  "green-700": "#008A27";
276
+ "green-900": "#151C07";
254
277
  "yellow-0": "#FFFAE5";
255
278
  "yellow-400": "#CCA900";
256
279
  "yellow-500": "#FFD300";
280
+ "yellow-900": "#211B00";
257
281
  "pink-0": "#FFF5FF";
258
282
  "pink-400": "#F966FF";
259
- "red-0": "##FBF1F0";
283
+ "red-0": "#FBF1F0";
260
284
  "red-300": "#E85D7F";
261
285
  "red-400": "#DC5879";
262
286
  "red-500": "#E91C11";
package/dist/variables/colors.js CHANGED
@@ -34,19 +34,21 @@ export const coreSwatches = {
34
34
  '0': '#F5FFE3',
35
35
  '100': '#EAFDC6',
36
36
  '400': '#AEE938',
37
- '700': '#008A27'
37
+ '700': '#008A27',
38
+ '900': '#151C07'
38
39
  },
39
40
  yellow: {
40
41
  '0': '#FFFAE5',
41
42
  '400': '#CCA900',
42
- '500': '#FFD300'
43
+ '500': '#FFD300',
44
+ '900': '#211B00'
43
45
  },
44
46
  pink: {
45
47
  '0': '#FFF5FF',
46
48
  '400': '#F966FF'
47
49
  },
48
50
  red: {
49
- '0': '##FBF1F0',
51
+ '0': '#FBF1F0',
50
52
  '300': '#E85D7F',
51
53
  '400': '#DC5879',
52
54
  '500': '#E91C11',
@@ -122,7 +124,7 @@ export const platformSwatches = {
122
124
  '800': '#CA00D1'
123
125
  },
124
126
  teal: {
125
- '500': '#027E97'
127
+ '500': '#006d82'
126
128
  },
127
129
  purple: {
128
130
  '300': '#B3CCFF'
@@ -134,8 +136,19 @@ export const truePlatformColors = {
134
136
  teal: platformSwatches.teal[500],
135
137
  purple: platformSwatches.purple[300]
136
138
  };
139
+ export const platformEditorColors = {
140
+ 'comment-light': '#686c7b',
141
+ 'comment-dark': '#84868d',
142
+ 'indent-active-light': '#bcbdc4',
143
+ 'indent-active-dark': '#3b3d49',
144
+ 'indent-inactive-light': '#8e919d',
145
+ 'indent-inactive-dark': '#5f616b',
146
+ 'line-number-light': '#686c7b',
147
+ 'line-number-dark': '#84868d'
148
+ };
137
149
  export const platformPalette = {
138
150
  ...flattenScale(platformSwatches),
151
+ ...platformEditorColors,
139
152
  ...truePlatformColors
140
153
  };
141
154
 
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.2d736e.0",
4
+ "version": "17.6.5-alpha.30169d.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": "4b539c58b84f69fafd04768ba9ad202494155fe8"
37
+ "gitHead": "5fb8da41fe54d1adeacf7b44a45b794aa2313928"
38
38
  }