@codecademy/gamut-styles 17.6.5-alpha.dbb438.0 → 17.6.5-alpha.e8bc80.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 +29 -1
  2. package/dist/themes/core.d.ts +14 -0
  3. package/dist/themes/core.js +6 -2
  4. package/dist/themes/lxStudio.d.ts +31 -1
  5. package/dist/themes/platform.d.ts +33 -1
  6. package/dist/themes/platform.js +2 -0
  7. package/dist/variables/colors.d.ts +6 -0
  8. package/dist/variables/colors.js +4 -2
  9. package/package.json +3 -3
package/dist/themes/admin.d.ts CHANGED
@@ -119,9 +119,11 @@ 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
129
  readonly "red-0": "#E85D7F";
@@ -166,6 +168,8 @@ export declare const adminTheme: Record<"breakpoints", {
166
168
  selected: "navy-100";
167
169
  disabled: "navy-200";
168
170
  hover: "navy-200";
171
+ success: "green-0";
172
+ warning: "yellow-0";
169
173
  };
170
174
  shadow: {
171
175
  primary: "navy-800";
@@ -214,6 +218,8 @@ export declare const adminTheme: Record<"breakpoints", {
214
218
  selected: "white-100";
215
219
  disabled: "white-200";
216
220
  hover: "white-200";
221
+ success: "green-900";
222
+ warning: "yellow-900";
217
223
  };
218
224
  shadow: {
219
225
  primary: "white";
@@ -281,9 +287,11 @@ export declare const adminTheme: Record<"breakpoints", {
281
287
  readonly "green-100": "#EAFDC6";
282
288
  readonly "green-400": "#AEE938";
283
289
  readonly "green-700": "#008A27";
290
+ readonly "green-900": "#151C07";
284
291
  readonly "yellow-0": "#FFFAE5";
285
292
  readonly "yellow-400": "#CCA900";
286
293
  readonly "yellow-500": "#FFD300";
294
+ readonly "yellow-900": "#211B00";
287
295
  readonly "pink-0": "#FFF5FF";
288
296
  readonly "pink-400": "#F966FF";
289
297
  readonly "red-0": "#E85D7F";
@@ -329,6 +337,8 @@ export declare const adminTheme: Record<"breakpoints", {
329
337
  selected: "navy-100";
330
338
  disabled: "navy-200";
331
339
  hover: "navy-200";
340
+ success: "green-0";
341
+ warning: "yellow-0";
332
342
  };
333
343
  shadow: {
334
344
  primary: "navy-800";
@@ -378,6 +388,8 @@ export declare const adminTheme: Record<"breakpoints", {
378
388
  selected: "white-100";
379
389
  disabled: "white-200";
380
390
  hover: "white-200";
391
+ success: "green-900";
392
+ warning: "yellow-900";
381
393
  };
382
394
  shadow: {
383
395
  primary: "white";
@@ -448,9 +460,11 @@ export declare const adminTheme: Record<"breakpoints", {
448
460
  readonly "green-100": "#EAFDC6";
449
461
  readonly "green-400": "#AEE938";
450
462
  readonly "green-700": "#008A27";
463
+ readonly "green-900": "#151C07";
451
464
  readonly "yellow-0": "#FFFAE5";
452
465
  readonly "yellow-400": "#CCA900";
453
466
  readonly "yellow-500": "#FFD300";
467
+ readonly "yellow-900": "#211B00";
454
468
  readonly "pink-0": "#FFF5FF";
455
469
  readonly "pink-400": "#F966FF";
456
470
  readonly "red-0": "#E85D7F";
@@ -527,9 +541,11 @@ export declare const adminTheme: Record<"breakpoints", {
527
541
  readonly "green-100": "#EAFDC6";
528
542
  readonly "green-400": "#AEE938";
529
543
  readonly "green-700": "#008A27";
544
+ readonly "green-900": "#151C07";
530
545
  readonly "yellow-0": "#FFFAE5";
531
546
  readonly "yellow-400": "#CCA900";
532
547
  readonly "yellow-500": "#FFD300";
548
+ readonly "yellow-900": "#211B00";
533
549
  readonly "pink-0": "#FFF5FF";
534
550
  readonly "pink-400": "#F966FF";
535
551
  readonly "red-0": "#E85D7F";
@@ -573,6 +589,8 @@ export declare const adminTheme: Record<"breakpoints", {
573
589
  selected: "navy-100";
574
590
  disabled: "navy-200";
575
591
  hover: "navy-200";
592
+ success: "green-0";
593
+ warning: "yellow-0";
576
594
  };
577
595
  shadow: {
578
596
  primary: "navy-800";
@@ -621,6 +639,8 @@ export declare const adminTheme: Record<"breakpoints", {
621
639
  selected: "white-100";
622
640
  disabled: "white-200";
623
641
  hover: "white-200";
642
+ success: "green-900";
643
+ warning: "yellow-900";
624
644
  };
625
645
  shadow: {
626
646
  primary: "white";
@@ -688,9 +708,11 @@ export declare const adminTheme: Record<"breakpoints", {
688
708
  readonly "green-100": "#EAFDC6";
689
709
  readonly "green-400": "#AEE938";
690
710
  readonly "green-700": "#008A27";
711
+ readonly "green-900": "#151C07";
691
712
  readonly "yellow-0": "#FFFAE5";
692
713
  readonly "yellow-400": "#CCA900";
693
714
  readonly "yellow-500": "#FFD300";
715
+ readonly "yellow-900": "#211B00";
694
716
  readonly "pink-0": "#FFF5FF";
695
717
  readonly "pink-400": "#F966FF";
696
718
  readonly "red-0": "#E85D7F";
@@ -736,6 +758,8 @@ export declare const adminTheme: Record<"breakpoints", {
736
758
  selected: "navy-100";
737
759
  disabled: "navy-200";
738
760
  hover: "navy-200";
761
+ success: "green-0";
762
+ warning: "yellow-0";
739
763
  };
740
764
  shadow: {
741
765
  primary: "navy-800";
@@ -785,6 +809,8 @@ export declare const adminTheme: Record<"breakpoints", {
785
809
  selected: "white-100";
786
810
  disabled: "white-200";
787
811
  hover: "white-200";
812
+ success: "green-900";
813
+ warning: "yellow-900";
788
814
  };
789
815
  shadow: {
790
816
  primary: "white";
@@ -867,9 +893,11 @@ export declare const adminTheme: Record<"breakpoints", {
867
893
  readonly "green-100": "#EAFDC6";
868
894
  readonly "green-400": "#AEE938";
869
895
  readonly "green-700": "#008A27";
896
+ readonly "green-900": "#151C07";
870
897
  readonly "yellow-0": "#FFFAE5";
871
898
  readonly "yellow-400": "#CCA900";
872
899
  readonly "yellow-500": "#FFD300";
900
+ readonly "yellow-900": "#211B00";
873
901
  readonly "pink-0": "#FFF5FF";
874
902
  readonly "pink-400": "#F966FF";
875
903
  readonly "red-0": "#E85D7F";
@@ -893,7 +921,7 @@ export declare const adminTheme: Record<"breakpoints", {
893
921
  readonly "white-200": string;
894
922
  readonly "white-600": string;
895
923
  readonly "white-700": string;
896
- }, "-"> | "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") => 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;
897
925
  }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
898
926
  export type AdminThemeShape = typeof adminTheme;
899
927
  export interface AdminTheme extends AdminThemeShape {
package/dist/themes/core.d.ts CHANGED
@@ -118,9 +118,11 @@ 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
128
  readonly "red-0": "#E85D7F";
@@ -165,6 +167,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
165
167
  selected: "navy-100";
166
168
  disabled: "navy-200";
167
169
  hover: "navy-200";
170
+ success: "green-0";
171
+ warning: "yellow-0";
168
172
  };
169
173
  shadow: {
170
174
  primary: "navy-800";
@@ -213,6 +217,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
213
217
  selected: "white-100";
214
218
  disabled: "white-200";
215
219
  hover: "white-200";
220
+ success: "green-900";
221
+ warning: "yellow-900";
216
222
  };
217
223
  shadow: {
218
224
  primary: "white";
@@ -280,9 +286,11 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
280
286
  readonly "green-100": "#EAFDC6";
281
287
  readonly "green-400": "#AEE938";
282
288
  readonly "green-700": "#008A27";
289
+ readonly "green-900": "#151C07";
283
290
  readonly "yellow-0": "#FFFAE5";
284
291
  readonly "yellow-400": "#CCA900";
285
292
  readonly "yellow-500": "#FFD300";
293
+ readonly "yellow-900": "#211B00";
286
294
  readonly "pink-0": "#FFF5FF";
287
295
  readonly "pink-400": "#F966FF";
288
296
  readonly "red-0": "#E85D7F";
@@ -328,6 +336,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
328
336
  selected: "navy-100";
329
337
  disabled: "navy-200";
330
338
  hover: "navy-200";
339
+ success: "green-0";
340
+ warning: "yellow-0";
331
341
  };
332
342
  shadow: {
333
343
  primary: "navy-800";
@@ -377,6 +387,8 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
377
387
  selected: "white-100";
378
388
  disabled: "white-200";
379
389
  hover: "white-200";
390
+ success: "green-900";
391
+ warning: "yellow-900";
380
392
  };
381
393
  shadow: {
382
394
  primary: "white";
@@ -447,9 +459,11 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
447
459
  readonly "green-100": "#EAFDC6";
448
460
  readonly "green-400": "#AEE938";
449
461
  readonly "green-700": "#008A27";
462
+ readonly "green-900": "#151C07";
450
463
  readonly "yellow-0": "#FFFAE5";
451
464
  readonly "yellow-400": "#CCA900";
452
465
  readonly "yellow-500": "#FFD300";
466
+ readonly "yellow-900": "#211B00";
453
467
  readonly "pink-0": "#FFF5FF";
454
468
  readonly "pink-400": "#F966FF";
455
469
  readonly "red-0": "#E85D7F";
package/dist/themes/core.js CHANGED
@@ -36,7 +36,9 @@ export const coreTheme = createTheme({
36
36
  primary: 'beige',
37
37
  selected: 'navy-100',
38
38
  disabled: 'navy-200',
39
- hover: 'navy-200'
39
+ hover: 'navy-200',
40
+ success: 'green-0',
41
+ warning: 'yellow-0'
40
42
  },
41
43
  shadow: {
42
44
  primary: 'navy-800',
@@ -85,7 +87,9 @@ export const coreTheme = createTheme({
85
87
  primary: 'navy-900',
86
88
  selected: 'white-100',
87
89
  disabled: 'white-200',
88
- hover: 'white-200'
90
+ hover: 'white-200',
91
+ success: 'green-900',
92
+ warning: 'yellow-900'
89
93
  },
90
94
  shadow: {
91
95
  primary: 'white',
package/dist/themes/lxStudio.d.ts CHANGED
@@ -129,9 +129,11 @@ 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
139
  readonly "red-0": "#E85D7F";
@@ -175,6 +177,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
175
177
  selected: "navy-100";
176
178
  disabled: "navy-200";
177
179
  hover: "navy-200";
180
+ success: "green-0";
181
+ warning: "yellow-0";
178
182
  };
179
183
  shadow: {
180
184
  primary: "navy-800";
@@ -223,6 +227,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
223
227
  selected: "white-100";
224
228
  disabled: "white-200";
225
229
  hover: "white-200";
230
+ success: "green-900";
231
+ warning: "yellow-900";
226
232
  };
227
233
  shadow: {
228
234
  primary: "white";
@@ -290,9 +296,11 @@ export declare const lxStudioTheme: Record<"breakpoints", {
290
296
  readonly "green-100": "#EAFDC6";
291
297
  readonly "green-400": "#AEE938";
292
298
  readonly "green-700": "#008A27";
299
+ readonly "green-900": "#151C07";
293
300
  readonly "yellow-0": "#FFFAE5";
294
301
  readonly "yellow-400": "#CCA900";
295
302
  readonly "yellow-500": "#FFD300";
303
+ readonly "yellow-900": "#211B00";
296
304
  readonly "pink-0": "#FFF5FF";
297
305
  readonly "pink-400": "#F966FF";
298
306
  readonly "red-0": "#E85D7F";
@@ -338,6 +346,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
338
346
  selected: "navy-100";
339
347
  disabled: "navy-200";
340
348
  hover: "navy-200";
349
+ success: "green-0";
350
+ warning: "yellow-0";
341
351
  };
342
352
  shadow: {
343
353
  primary: "navy-800";
@@ -387,6 +397,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
387
397
  selected: "white-100";
388
398
  disabled: "white-200";
389
399
  hover: "white-200";
400
+ success: "green-900";
401
+ warning: "yellow-900";
390
402
  };
391
403
  shadow: {
392
404
  primary: "white";
@@ -457,9 +469,11 @@ export declare const lxStudioTheme: Record<"breakpoints", {
457
469
  readonly "green-100": "#EAFDC6";
458
470
  readonly "green-400": "#AEE938";
459
471
  readonly "green-700": "#008A27";
472
+ readonly "green-900": "#151C07";
460
473
  readonly "yellow-0": "#FFFAE5";
461
474
  readonly "yellow-400": "#CCA900";
462
475
  readonly "yellow-500": "#FFD300";
476
+ readonly "yellow-900": "#211B00";
463
477
  readonly "pink-0": "#FFF5FF";
464
478
  readonly "pink-400": "#F966FF";
465
479
  readonly "red-0": "#E85D7F";
@@ -531,9 +545,11 @@ export declare const lxStudioTheme: Record<"breakpoints", {
531
545
  "green-100": "#EAFDC6";
532
546
  "green-400": "#AEE938";
533
547
  "green-700": "#008A27";
548
+ "green-900": "#151C07";
534
549
  "yellow-0": "#FFFAE5";
535
550
  "yellow-400": "#CCA900";
536
551
  "yellow-500": "#FFD300";
552
+ "yellow-900": "#211B00";
537
553
  "pink-0": "#FFF5FF";
538
554
  "pink-400": "#F966FF";
539
555
  "red-0": "#E85D7F";
@@ -620,9 +636,11 @@ export declare const lxStudioTheme: Record<"breakpoints", {
620
636
  readonly "green-100": "#EAFDC6";
621
637
  readonly "green-400": "#AEE938";
622
638
  readonly "green-700": "#008A27";
639
+ readonly "green-900": "#151C07";
623
640
  readonly "yellow-0": "#FFFAE5";
624
641
  readonly "yellow-400": "#CCA900";
625
642
  readonly "yellow-500": "#FFD300";
643
+ readonly "yellow-900": "#211B00";
626
644
  readonly "pink-0": "#FFF5FF";
627
645
  readonly "pink-400": "#F966FF";
628
646
  readonly "red-0": "#E85D7F";
@@ -666,6 +684,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
666
684
  selected: "navy-100";
667
685
  disabled: "navy-200";
668
686
  hover: "navy-200";
687
+ success: "green-0";
688
+ warning: "yellow-0";
669
689
  };
670
690
  shadow: {
671
691
  primary: "navy-800";
@@ -714,6 +734,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
714
734
  selected: "white-100";
715
735
  disabled: "white-200";
716
736
  hover: "white-200";
737
+ success: "green-900";
738
+ warning: "yellow-900";
717
739
  };
718
740
  shadow: {
719
741
  primary: "white";
@@ -781,9 +803,11 @@ export declare const lxStudioTheme: Record<"breakpoints", {
781
803
  readonly "green-100": "#EAFDC6";
782
804
  readonly "green-400": "#AEE938";
783
805
  readonly "green-700": "#008A27";
806
+ readonly "green-900": "#151C07";
784
807
  readonly "yellow-0": "#FFFAE5";
785
808
  readonly "yellow-400": "#CCA900";
786
809
  readonly "yellow-500": "#FFD300";
810
+ readonly "yellow-900": "#211B00";
787
811
  readonly "pink-0": "#FFF5FF";
788
812
  readonly "pink-400": "#F966FF";
789
813
  readonly "red-0": "#E85D7F";
@@ -850,9 +874,11 @@ export declare const lxStudioTheme: Record<"breakpoints", {
850
874
  "green-100": "#EAFDC6";
851
875
  "green-400": "#AEE938";
852
876
  "green-700": "#008A27";
877
+ "green-900": "#151C07";
853
878
  "yellow-0": "#FFFAE5";
854
879
  "yellow-400": "#CCA900";
855
880
  "yellow-500": "#FFD300";
881
+ "yellow-900": "#211B00";
856
882
  "pink-0": "#FFF5FF";
857
883
  "pink-400": "#F966FF";
858
884
  "red-0": "#E85D7F";
@@ -898,6 +924,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
898
924
  selected: "navy-100";
899
925
  disabled: "navy-200";
900
926
  hover: "navy-200";
927
+ success: "green-0";
928
+ warning: "yellow-0";
901
929
  };
902
930
  shadow: {
903
931
  primary: "navy-800";
@@ -947,6 +975,8 @@ export declare const lxStudioTheme: Record<"breakpoints", {
947
975
  selected: "white-100";
948
976
  disabled: "white-200";
949
977
  hover: "white-200";
978
+ success: "green-900";
979
+ warning: "yellow-900";
950
980
  };
951
981
  shadow: {
952
982
  primary: "white";
@@ -1003,7 +1033,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
1003
1033
  }, "-", "_">;
1004
1034
  }>;
1005
1035
  mode: "light";
1006
- _getColorValue: (color: "beige" | "blue" | "navy" | "green" | "yellow" | "pink" | "red" | "orange" | "hyper" | "white" | "beige-100" | "blue-0" | "blue-100" | "blue-300" | "blue-400" | "blue-500" | "blue-800" | "navy-100" | "navy-300" | "navy-400" | "navy-500" | "navy-800" | "navy-200" | "navy-600" | "navy-700" | "navy-900" | "green-0" | "green-100" | "green-400" | "green-700" | "yellow-0" | "yellow-400" | "yellow-500" | "pink-0" | "pink-400" | "red-0" | "red-100" | "red-500" | "red-600" | "orange-100" | "orange-500" | "hyper-400" | "hyper-500" | "gray-100" | "gray-300" | "gray-800" | "gray-200" | "gray-600" | "gray-900" | "white-100" | "white-300" | "white-400" | "white-500" | "white-200" | "white-600" | "white-700" | "black" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-disabled" | "text-accent" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "shadow-secondary" | "shadow-primary" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | "lxStudioSuccess" | "lxStudioBgPrimary" | "lxStudioPurple" | "lxStudioPurpleHover") => string;
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-100" | "red-500" | "red-600" | "orange-100" | "orange-500" | "hyper-400" | "hyper-500" | "gray-100" | "gray-300" | "gray-800" | "gray-200" | "gray-600" | "gray-900" | "white-100" | "white-300" | "white-400" | "white-500" | "white-200" | "white-600" | "white-700" | "black" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-disabled" | "text-accent" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-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;
1007
1037
  }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
1008
1038
  export type LxStudioThemeShape = typeof lxStudioTheme;
1009
1039
  export interface LxStudioTheme extends LxStudioThemeShape {
package/dist/themes/platform.d.ts CHANGED
@@ -76,6 +76,10 @@ 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
+ */
79
83
  readonly 24: string;
80
84
  readonly 32: string;
81
85
  readonly 40: string;
@@ -129,9 +133,11 @@ export declare const platformTheme: Record<"breakpoints", {
129
133
  readonly "green-100": "#EAFDC6";
130
134
  readonly "green-400": "#AEE938";
131
135
  readonly "green-700": "#008A27";
136
+ readonly "green-900": "#151C07";
132
137
  readonly "yellow-0": "#FFFAE5";
133
138
  readonly "yellow-400": "#CCA900";
134
139
  readonly "yellow-500": "#FFD300";
140
+ readonly "yellow-900": "#211B00";
135
141
  readonly "pink-0": "#FFF5FF";
136
142
  readonly "pink-400": "#F966FF";
137
143
  readonly "red-0": "#E85D7F";
@@ -176,6 +182,8 @@ export declare const platformTheme: Record<"breakpoints", {
176
182
  selected: "navy-100";
177
183
  disabled: "navy-200";
178
184
  hover: "navy-200";
185
+ success: "green-0";
186
+ warning: "yellow-0";
179
187
  };
180
188
  shadow: {
181
189
  primary: "navy-800";
@@ -224,6 +232,8 @@ export declare const platformTheme: Record<"breakpoints", {
224
232
  selected: "white-100";
225
233
  disabled: "white-200";
226
234
  hover: "white-200";
235
+ success: "green-900";
236
+ warning: "yellow-900";
227
237
  };
228
238
  shadow: {
229
239
  primary: "white";
@@ -291,9 +301,11 @@ export declare const platformTheme: Record<"breakpoints", {
291
301
  readonly "green-100": "#EAFDC6";
292
302
  readonly "green-400": "#AEE938";
293
303
  readonly "green-700": "#008A27";
304
+ readonly "green-900": "#151C07";
294
305
  readonly "yellow-0": "#FFFAE5";
295
306
  readonly "yellow-400": "#CCA900";
296
307
  readonly "yellow-500": "#FFD300";
308
+ readonly "yellow-900": "#211B00";
297
309
  readonly "pink-0": "#FFF5FF";
298
310
  readonly "pink-400": "#F966FF";
299
311
  readonly "red-0": "#E85D7F";
@@ -339,6 +351,8 @@ export declare const platformTheme: Record<"breakpoints", {
339
351
  selected: "navy-100";
340
352
  disabled: "navy-200";
341
353
  hover: "navy-200";
354
+ success: "green-0";
355
+ warning: "yellow-0";
342
356
  };
343
357
  shadow: {
344
358
  primary: "navy-800";
@@ -388,6 +402,8 @@ export declare const platformTheme: Record<"breakpoints", {
388
402
  selected: "white-100";
389
403
  disabled: "white-200";
390
404
  hover: "white-200";
405
+ success: "green-900";
406
+ warning: "yellow-900";
391
407
  };
392
408
  shadow: {
393
409
  primary: "white";
@@ -458,9 +474,11 @@ export declare const platformTheme: Record<"breakpoints", {
458
474
  readonly "green-100": "#EAFDC6";
459
475
  readonly "green-400": "#AEE938";
460
476
  readonly "green-700": "#008A27";
477
+ readonly "green-900": "#151C07";
461
478
  readonly "yellow-0": "#FFFAE5";
462
479
  readonly "yellow-400": "#CCA900";
463
480
  readonly "yellow-500": "#FFD300";
481
+ readonly "yellow-900": "#211B00";
464
482
  readonly "pink-0": "#FFF5FF";
465
483
  readonly "pink-400": "#F966FF";
466
484
  readonly "red-0": "#E85D7F";
@@ -599,9 +617,11 @@ export declare const platformTheme: Record<"breakpoints", {
599
617
  readonly "green-100": "#EAFDC6";
600
618
  readonly "green-400": "#AEE938";
601
619
  readonly "green-700": "#008A27";
620
+ readonly "green-900": "#151C07";
602
621
  readonly "yellow-0": "#FFFAE5";
603
622
  readonly "yellow-400": "#CCA900";
604
623
  readonly "yellow-500": "#FFD300";
624
+ readonly "yellow-900": "#211B00";
605
625
  readonly "pink-0": "#FFF5FF";
606
626
  readonly "pink-400": "#F966FF";
607
627
  readonly "red-0": "#E85D7F";
@@ -645,6 +665,8 @@ export declare const platformTheme: Record<"breakpoints", {
645
665
  selected: "navy-100";
646
666
  disabled: "navy-200";
647
667
  hover: "navy-200";
668
+ success: "green-0";
669
+ warning: "yellow-0";
648
670
  };
649
671
  shadow: {
650
672
  primary: "navy-800";
@@ -693,6 +715,8 @@ export declare const platformTheme: Record<"breakpoints", {
693
715
  selected: "white-100";
694
716
  disabled: "white-200";
695
717
  hover: "white-200";
718
+ success: "green-900";
719
+ warning: "yellow-900";
696
720
  };
697
721
  shadow: {
698
722
  primary: "white";
@@ -760,9 +784,11 @@ export declare const platformTheme: Record<"breakpoints", {
760
784
  readonly "green-100": "#EAFDC6";
761
785
  readonly "green-400": "#AEE938";
762
786
  readonly "green-700": "#008A27";
787
+ readonly "green-900": "#151C07";
763
788
  readonly "yellow-0": "#FFFAE5";
764
789
  readonly "yellow-400": "#CCA900";
765
790
  readonly "yellow-500": "#FFD300";
791
+ readonly "yellow-900": "#211B00";
766
792
  readonly "pink-0": "#FFF5FF";
767
793
  readonly "pink-400": "#F966FF";
768
794
  readonly "red-0": "#E85D7F";
@@ -819,6 +845,8 @@ export declare const platformTheme: Record<"breakpoints", {
819
845
  selected: "navy-100";
820
846
  disabled: "navy-200";
821
847
  hover: "navy-200";
848
+ success: "green-0";
849
+ warning: "yellow-0";
822
850
  };
823
851
  shadow: {
824
852
  primary: "navy-800";
@@ -868,6 +896,8 @@ export declare const platformTheme: Record<"breakpoints", {
868
896
  selected: "white-100";
869
897
  disabled: "white-200";
870
898
  hover: "white-200";
899
+ success: "green-900";
900
+ warning: "yellow-900";
871
901
  };
872
902
  shadow: {
873
903
  primary: "white";
@@ -1001,9 +1031,11 @@ export declare const platformTheme: Record<"breakpoints", {
1001
1031
  readonly "green-100": "#EAFDC6";
1002
1032
  readonly "green-400": "#AEE938";
1003
1033
  readonly "green-700": "#008A27";
1034
+ readonly "green-900": "#151C07";
1004
1035
  readonly "yellow-0": "#FFFAE5";
1005
1036
  readonly "yellow-400": "#CCA900";
1006
1037
  readonly "yellow-500": "#FFD300";
1038
+ readonly "yellow-900": "#211B00";
1007
1039
  readonly "pink-0": "#FFF5FF";
1008
1040
  readonly "pink-400": "#F966FF";
1009
1041
  readonly "red-0": "#E85D7F";
@@ -1027,7 +1059,7 @@ export declare const platformTheme: Record<"breakpoints", {
1027
1059
  readonly "white-200": string;
1028
1060
  readonly "white-600": string;
1029
1061
  readonly "white-700": string;
1030
- }, "-"> | "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<{
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<{
1031
1063
  readonly lightBeige: "#FFFBF8";
1032
1064
  readonly gold: "#8A7300";
1033
1065
  readonly teal: "#027E97";
package/dist/themes/platform.js CHANGED
@@ -2,6 +2,8 @@ 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
+
5
7
  /**
6
8
  * @description This is an extended theme for the learning environment with an expanded set of tokens
7
9
  * That are not needed for the rest of the application.
package/dist/variables/colors.d.ts CHANGED
@@ -26,11 +26,13 @@ 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";
@@ -127,9 +129,11 @@ export declare const corePalette: {
127
129
  readonly "green-100": "#EAFDC6";
128
130
  readonly "green-400": "#AEE938";
129
131
  readonly "green-700": "#008A27";
132
+ readonly "green-900": "#151C07";
130
133
  readonly "yellow-0": "#FFFAE5";
131
134
  readonly "yellow-400": "#CCA900";
132
135
  readonly "yellow-500": "#FFD300";
136
+ readonly "yellow-900": "#211B00";
133
137
  readonly "pink-0": "#FFF5FF";
134
138
  readonly "pink-400": "#F966FF";
135
139
  readonly "red-0": "#E85D7F";
@@ -247,9 +251,11 @@ export declare const lxStudioPalette: {
247
251
  "green-100": "#EAFDC6";
248
252
  "green-400": "#AEE938";
249
253
  "green-700": "#008A27";
254
+ "green-900": "#151C07";
250
255
  "yellow-0": "#FFFAE5";
251
256
  "yellow-400": "#CCA900";
252
257
  "yellow-500": "#FFD300";
258
+ "yellow-900": "#211B00";
253
259
  "pink-0": "#FFF5FF";
254
260
  "pink-400": "#F966FF";
255
261
  "red-0": "#E85D7F";
package/dist/variables/colors.js CHANGED
@@ -34,12 +34,14 @@ 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',
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@codecademy/gamut-styles",
3
3
  "description": "Styleguide & Component library for codecademy.com",
4
- "version": "17.6.5-alpha.dbb438.0",
4
+ "version": "17.6.5-alpha.e8bc80.0",
5
5
  "author": "Jake Hiller <jake@codecademy.com>",
6
6
  "dependencies": {
7
- "@codecademy/variance": "0.22.2-alpha.dbb438.0",
7
+ "@codecademy/variance": "0.22.1",
8
8
  "@emotion/is-prop-valid": "^1.1.0",
9
9
  "polished": "^4.1.2"
10
10
  },
@@ -34,5 +34,5 @@
34
34
  "scripts": {
35
35
  "build": "nx build @codecademy/gamut-styles"
36
36
  },
37
- "gitHead": "b0fa08bdef460b233854ba5e47d5e78286e0be7c"
37
+ "gitHead": "d5ddad8e2a817c16085cf516d8b7716057abcd24"
38
38
  }