@codecademy/gamut-styles 17.6.5-alpha.e8bc80.0 → 17.7.0-alpha.1dc930.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/themes/admin.d.ts +16 -29
  2. package/dist/themes/core.d.ts +10 -14
  3. package/dist/themes/core.js +7 -8
  4. package/dist/themes/lxStudio.d.ts +16 -31
  5. package/dist/themes/platform.d.ts +21 -33
  6. package/dist/themes/platform.js +0 -2
  7. package/dist/variables/colors.d.ts +0 -6
  8. package/dist/variables/colors.js +2 -4
  9. package/dist/variables/responsive.d.ts +8 -0
  10. package/dist/variables/responsive.js +8 -0
  11. package/package.json +3 -3
package/dist/themes/admin.d.ts CHANGED
@@ -1,4 +1,9 @@
1
1
  export declare const adminTheme: Record<"breakpoints", {
2
+ c_xs: string;
3
+ c_sm: string;
4
+ c_md: string;
5
+ c_lg: string;
6
+ c_xl: string;
2
7
  xs: string;
3
8
  sm: string;
4
9
  md: string;
@@ -11,6 +16,11 @@ export declare const adminTheme: Record<"breakpoints", {
11
16
  };
12
17
  readonly headerZ: 15;
13
18
  }, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
19
+ c_xs: string;
20
+ c_sm: string;
21
+ c_md: string;
22
+ c_lg: string;
23
+ c_xl: string;
14
24
  xs: string;
15
25
  sm: string;
16
26
  md: string;
@@ -18,6 +28,11 @@ export declare const adminTheme: Record<"breakpoints", {
18
28
  xl: string;
19
29
  }> & import("@codecademy/variance/dist/createTheme/types").Merge<{
20
30
  breakpoints: {
31
+ c_xs: string;
32
+ c_sm: string;
33
+ c_md: string;
34
+ c_lg: string;
35
+ c_xl: string;
21
36
  xs: string;
22
37
  sm: string;
23
38
  md: string;
@@ -119,11 +134,9 @@ export declare const adminTheme: Record<"breakpoints", {
119
134
  readonly "green-100": "#EAFDC6";
120
135
  readonly "green-400": "#AEE938";
121
136
  readonly "green-700": "#008A27";
122
- readonly "green-900": "#151C07";
123
137
  readonly "yellow-0": "#FFFAE5";
124
138
  readonly "yellow-400": "#CCA900";
125
139
  readonly "yellow-500": "#FFD300";
126
- readonly "yellow-900": "#211B00";
127
140
  readonly "pink-0": "#FFF5FF";
128
141
  readonly "pink-400": "#F966FF";
129
142
  readonly "red-0": "#E85D7F";
@@ -168,8 +181,6 @@ export declare const adminTheme: Record<"breakpoints", {
168
181
  selected: "navy-100";
169
182
  disabled: "navy-200";
170
183
  hover: "navy-200";
171
- success: "green-0";
172
- warning: "yellow-0";
173
184
  };
174
185
  shadow: {
175
186
  primary: "navy-800";
@@ -218,8 +229,6 @@ export declare const adminTheme: Record<"breakpoints", {
218
229
  selected: "white-100";
219
230
  disabled: "white-200";
220
231
  hover: "white-200";
221
- success: "green-900";
222
- warning: "yellow-900";
223
232
  };
224
233
  shadow: {
225
234
  primary: "white";
@@ -287,11 +296,9 @@ export declare const adminTheme: Record<"breakpoints", {
287
296
  readonly "green-100": "#EAFDC6";
288
297
  readonly "green-400": "#AEE938";
289
298
  readonly "green-700": "#008A27";
290
- readonly "green-900": "#151C07";
291
299
  readonly "yellow-0": "#FFFAE5";
292
300
  readonly "yellow-400": "#CCA900";
293
301
  readonly "yellow-500": "#FFD300";
294
- readonly "yellow-900": "#211B00";
295
302
  readonly "pink-0": "#FFF5FF";
296
303
  readonly "pink-400": "#F966FF";
297
304
  readonly "red-0": "#E85D7F";
@@ -337,8 +344,6 @@ export declare const adminTheme: Record<"breakpoints", {
337
344
  selected: "navy-100";
338
345
  disabled: "navy-200";
339
346
  hover: "navy-200";
340
- success: "green-0";
341
- warning: "yellow-0";
342
347
  };
343
348
  shadow: {
344
349
  primary: "navy-800";
@@ -388,8 +393,6 @@ export declare const adminTheme: Record<"breakpoints", {
388
393
  selected: "white-100";
389
394
  disabled: "white-200";
390
395
  hover: "white-200";
391
- success: "green-900";
392
- warning: "yellow-900";
393
396
  };
394
397
  shadow: {
395
398
  primary: "white";
@@ -460,11 +463,9 @@ export declare const adminTheme: Record<"breakpoints", {
460
463
  readonly "green-100": "#EAFDC6";
461
464
  readonly "green-400": "#AEE938";
462
465
  readonly "green-700": "#008A27";
463
- readonly "green-900": "#151C07";
464
466
  readonly "yellow-0": "#FFFAE5";
465
467
  readonly "yellow-400": "#CCA900";
466
468
  readonly "yellow-500": "#FFD300";
467
- readonly "yellow-900": "#211B00";
468
469
  readonly "pink-0": "#FFF5FF";
469
470
  readonly "pink-400": "#F966FF";
470
471
  readonly "red-0": "#E85D7F";
@@ -541,11 +542,9 @@ export declare const adminTheme: Record<"breakpoints", {
541
542
  readonly "green-100": "#EAFDC6";
542
543
  readonly "green-400": "#AEE938";
543
544
  readonly "green-700": "#008A27";
544
- readonly "green-900": "#151C07";
545
545
  readonly "yellow-0": "#FFFAE5";
546
546
  readonly "yellow-400": "#CCA900";
547
547
  readonly "yellow-500": "#FFD300";
548
- readonly "yellow-900": "#211B00";
549
548
  readonly "pink-0": "#FFF5FF";
550
549
  readonly "pink-400": "#F966FF";
551
550
  readonly "red-0": "#E85D7F";
@@ -589,8 +588,6 @@ export declare const adminTheme: Record<"breakpoints", {
589
588
  selected: "navy-100";
590
589
  disabled: "navy-200";
591
590
  hover: "navy-200";
592
- success: "green-0";
593
- warning: "yellow-0";
594
591
  };
595
592
  shadow: {
596
593
  primary: "navy-800";
@@ -639,8 +636,6 @@ export declare const adminTheme: Record<"breakpoints", {
639
636
  selected: "white-100";
640
637
  disabled: "white-200";
641
638
  hover: "white-200";
642
- success: "green-900";
643
- warning: "yellow-900";
644
639
  };
645
640
  shadow: {
646
641
  primary: "white";
@@ -708,11 +703,9 @@ export declare const adminTheme: Record<"breakpoints", {
708
703
  readonly "green-100": "#EAFDC6";
709
704
  readonly "green-400": "#AEE938";
710
705
  readonly "green-700": "#008A27";
711
- readonly "green-900": "#151C07";
712
706
  readonly "yellow-0": "#FFFAE5";
713
707
  readonly "yellow-400": "#CCA900";
714
708
  readonly "yellow-500": "#FFD300";
715
- readonly "yellow-900": "#211B00";
716
709
  readonly "pink-0": "#FFF5FF";
717
710
  readonly "pink-400": "#F966FF";
718
711
  readonly "red-0": "#E85D7F";
@@ -758,8 +751,6 @@ export declare const adminTheme: Record<"breakpoints", {
758
751
  selected: "navy-100";
759
752
  disabled: "navy-200";
760
753
  hover: "navy-200";
761
- success: "green-0";
762
- warning: "yellow-0";
763
754
  };
764
755
  shadow: {
765
756
  primary: "navy-800";
@@ -809,8 +800,6 @@ export declare const adminTheme: Record<"breakpoints", {
809
800
  selected: "white-100";
810
801
  disabled: "white-200";
811
802
  hover: "white-200";
812
- success: "green-900";
813
- warning: "yellow-900";
814
803
  };
815
804
  shadow: {
816
805
  primary: "white";
@@ -893,11 +882,9 @@ export declare const adminTheme: Record<"breakpoints", {
893
882
  readonly "green-100": "#EAFDC6";
894
883
  readonly "green-400": "#AEE938";
895
884
  readonly "green-700": "#008A27";
896
- readonly "green-900": "#151C07";
897
885
  readonly "yellow-0": "#FFFAE5";
898
886
  readonly "yellow-400": "#CCA900";
899
887
  readonly "yellow-500": "#FFD300";
900
- readonly "yellow-900": "#211B00";
901
888
  readonly "pink-0": "#FFF5FF";
902
889
  readonly "pink-400": "#F966FF";
903
890
  readonly "red-0": "#E85D7F";
@@ -921,7 +908,7 @@ export declare const adminTheme: Record<"breakpoints", {
921
908
  readonly "white-200": string;
922
909
  readonly "white-600": string;
923
910
  readonly "white-700": string;
924
- }, "-"> | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-disabled" | "text-accent" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "shadow-secondary" | "shadow-primary" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary") => string;
911
+ }, "-"> | "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;
925
912
  }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
926
913
  export type AdminThemeShape = typeof adminTheme;
927
914
  export interface AdminTheme extends AdminThemeShape {
package/dist/themes/core.d.ts CHANGED
@@ -10,6 +10,11 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
10
10
  };
11
11
  readonly headerZ: 15;
12
12
  }, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
13
+ c_xs: string;
14
+ c_sm: string;
15
+ c_md: string;
16
+ c_lg: string;
17
+ c_xl: string;
13
18
  xs: string;
14
19
  sm: string;
15
20
  md: string;
@@ -17,6 +22,11 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
17
22
  xl: string;
18
23
  }> & import("@codecademy/variance/dist/createTheme/types").Merge<{
19
24
  breakpoints: {
25
+ c_xs: string;
26
+ c_sm: string;
27
+ c_md: string;
28
+ c_lg: string;
29
+ c_xl: string;
20
30
  xs: string;
21
31
  sm: string;
22
32
  md: string;
@@ -118,11 +128,9 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
118
128
  readonly "green-100": "#EAFDC6";
119
129
  readonly "green-400": "#AEE938";
120
130
  readonly "green-700": "#008A27";
121
- readonly "green-900": "#151C07";
122
131
  readonly "yellow-0": "#FFFAE5";
123
132
  readonly "yellow-400": "#CCA900";
124
133
  readonly "yellow-500": "#FFD300";
125
- readonly "yellow-900": "#211B00";
126
134
  readonly "pink-0": "#FFF5FF";
127
135
  readonly "pink-400": "#F966FF";
128
136
  readonly "red-0": "#E85D7F";
@@ -167,8 +175,6 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
167
175
  selected: "navy-100";
168
176
  disabled: "navy-200";
169
177
  hover: "navy-200";
170
- success: "green-0";
171
- warning: "yellow-0";
172
178
  };
173
179
  shadow: {
174
180
  primary: "navy-800";
@@ -217,8 +223,6 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
217
223
  selected: "white-100";
218
224
  disabled: "white-200";
219
225
  hover: "white-200";
220
- success: "green-900";
221
- warning: "yellow-900";
222
226
  };
223
227
  shadow: {
224
228
  primary: "white";
@@ -286,11 +290,9 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
286
290
  readonly "green-100": "#EAFDC6";
287
291
  readonly "green-400": "#AEE938";
288
292
  readonly "green-700": "#008A27";
289
- readonly "green-900": "#151C07";
290
293
  readonly "yellow-0": "#FFFAE5";
291
294
  readonly "yellow-400": "#CCA900";
292
295
  readonly "yellow-500": "#FFD300";
293
- readonly "yellow-900": "#211B00";
294
296
  readonly "pink-0": "#FFF5FF";
295
297
  readonly "pink-400": "#F966FF";
296
298
  readonly "red-0": "#E85D7F";
@@ -336,8 +338,6 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
336
338
  selected: "navy-100";
337
339
  disabled: "navy-200";
338
340
  hover: "navy-200";
339
- success: "green-0";
340
- warning: "yellow-0";
341
341
  };
342
342
  shadow: {
343
343
  primary: "navy-800";
@@ -387,8 +387,6 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
387
387
  selected: "white-100";
388
388
  disabled: "white-200";
389
389
  hover: "white-200";
390
- success: "green-900";
391
- warning: "yellow-900";
392
390
  };
393
391
  shadow: {
394
392
  primary: "white";
@@ -459,11 +457,9 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
459
457
  readonly "green-100": "#EAFDC6";
460
458
  readonly "green-400": "#AEE938";
461
459
  readonly "green-700": "#008A27";
462
- readonly "green-900": "#151C07";
463
460
  readonly "yellow-0": "#FFFAE5";
464
461
  readonly "yellow-400": "#CCA900";
465
462
  readonly "yellow-500": "#FFD300";
466
- readonly "yellow-900": "#211B00";
467
463
  readonly "pink-0": "#FFF5FF";
468
464
  readonly "pink-400": "#F966FF";
469
465
  readonly "red-0": "#E85D7F";
package/dist/themes/core.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { createTheme } from '@codecademy/variance';
2
- import { borderRadii, corePalette, elements, fontFamily, fontSize, fontWeight, lineHeight, mediaQueries, spacing } from '../variables';
2
+ import { borderRadii, containerQueries, corePalette, elements, fontFamily, fontSize, fontWeight, lineHeight, mediaQueries, spacing } from '../variables';
3
3
 
4
4
  /**
5
5
  * @description This is the core theme that all other Codecademy themes are extended from
@@ -8,7 +8,10 @@ import { borderRadii, corePalette, elements, fontFamily, fontSize, fontWeight, l
8
8
  */
9
9
 
10
10
  export const coreTheme = createTheme({
11
- breakpoints: mediaQueries,
11
+ breakpoints: {
12
+ ...mediaQueries,
13
+ ...containerQueries
14
+ },
12
15
  borderRadii,
13
16
  fontSize,
14
17
  fontFamily,
@@ -36,9 +39,7 @@ export const coreTheme = createTheme({
36
39
  primary: 'beige',
37
40
  selected: 'navy-100',
38
41
  disabled: 'navy-200',
39
- hover: 'navy-200',
40
- success: 'green-0',
41
- warning: 'yellow-0'
42
+ hover: 'navy-200'
42
43
  },
43
44
  shadow: {
44
45
  primary: 'navy-800',
@@ -87,9 +88,7 @@ export const coreTheme = createTheme({
87
88
  primary: 'navy-900',
88
89
  selected: 'white-100',
89
90
  disabled: 'white-200',
90
- hover: 'white-200',
91
- success: 'green-900',
92
- warning: 'yellow-900'
91
+ hover: 'white-200'
93
92
  },
94
93
  shadow: {
95
94
  primary: 'white',
package/dist/themes/lxStudio.d.ts CHANGED
@@ -7,12 +7,22 @@ export declare const lxStudioBorderRadii: {
7
7
  full: string;
8
8
  };
9
9
  export declare const lxStudioTheme: Record<"breakpoints", {
10
+ c_xs: string;
11
+ c_sm: string;
12
+ c_md: string;
13
+ c_lg: string;
14
+ c_xl: string;
10
15
  xs: string;
11
16
  sm: string;
12
17
  md: string;
13
18
  lg: string;
14
19
  xl: string;
15
20
  }> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"breakpoints", {
21
+ c_xs: string;
22
+ c_sm: string;
23
+ c_md: string;
24
+ c_lg: string;
25
+ c_xl: string;
16
26
  xs: string;
17
27
  sm: string;
18
28
  md: string;
@@ -47,6 +57,11 @@ export declare const lxStudioTheme: Record<"breakpoints", {
47
57
  readonly headerZ: 15;
48
58
  };
49
59
  breakpoints: {
60
+ c_xs: string;
61
+ c_sm: string;
62
+ c_md: string;
63
+ c_lg: string;
64
+ c_xl: string;
50
65
  xs: string;
51
66
  sm: string;
52
67
  md: string;
@@ -129,11 +144,9 @@ export declare const lxStudioTheme: Record<"breakpoints", {
129
144
  readonly "green-100": "#EAFDC6";
130
145
  readonly "green-400": "#AEE938";
131
146
  readonly "green-700": "#008A27";
132
- readonly "green-900": "#151C07";
133
147
  readonly "yellow-0": "#FFFAE5";
134
148
  readonly "yellow-400": "#CCA900";
135
149
  readonly "yellow-500": "#FFD300";
136
- readonly "yellow-900": "#211B00";
137
150
  readonly "pink-0": "#FFF5FF";
138
151
  readonly "pink-400": "#F966FF";
139
152
  readonly "red-0": "#E85D7F";
@@ -177,8 +190,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
177
190
  selected: "navy-100";
178
191
  disabled: "navy-200";
179
192
  hover: "navy-200";
180
- success: "green-0";
181
- warning: "yellow-0";
182
193
  };
183
194
  shadow: {
184
195
  primary: "navy-800";
@@ -227,8 +238,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
227
238
  selected: "white-100";
228
239
  disabled: "white-200";
229
240
  hover: "white-200";
230
- success: "green-900";
231
- warning: "yellow-900";
232
241
  };
233
242
  shadow: {
234
243
  primary: "white";
@@ -296,11 +305,9 @@ export declare const lxStudioTheme: Record<"breakpoints", {
296
305
  readonly "green-100": "#EAFDC6";
297
306
  readonly "green-400": "#AEE938";
298
307
  readonly "green-700": "#008A27";
299
- readonly "green-900": "#151C07";
300
308
  readonly "yellow-0": "#FFFAE5";
301
309
  readonly "yellow-400": "#CCA900";
302
310
  readonly "yellow-500": "#FFD300";
303
- readonly "yellow-900": "#211B00";
304
311
  readonly "pink-0": "#FFF5FF";
305
312
  readonly "pink-400": "#F966FF";
306
313
  readonly "red-0": "#E85D7F";
@@ -346,8 +353,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
346
353
  selected: "navy-100";
347
354
  disabled: "navy-200";
348
355
  hover: "navy-200";
349
- success: "green-0";
350
- warning: "yellow-0";
351
356
  };
352
357
  shadow: {
353
358
  primary: "navy-800";
@@ -397,8 +402,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
397
402
  selected: "white-100";
398
403
  disabled: "white-200";
399
404
  hover: "white-200";
400
- success: "green-900";
401
- warning: "yellow-900";
402
405
  };
403
406
  shadow: {
404
407
  primary: "white";
@@ -469,11 +472,9 @@ export declare const lxStudioTheme: Record<"breakpoints", {
469
472
  readonly "green-100": "#EAFDC6";
470
473
  readonly "green-400": "#AEE938";
471
474
  readonly "green-700": "#008A27";
472
- readonly "green-900": "#151C07";
473
475
  readonly "yellow-0": "#FFFAE5";
474
476
  readonly "yellow-400": "#CCA900";
475
477
  readonly "yellow-500": "#FFD300";
476
- readonly "yellow-900": "#211B00";
477
478
  readonly "pink-0": "#FFF5FF";
478
479
  readonly "pink-400": "#F966FF";
479
480
  readonly "red-0": "#E85D7F";
@@ -545,11 +546,9 @@ export declare const lxStudioTheme: Record<"breakpoints", {
545
546
  "green-100": "#EAFDC6";
546
547
  "green-400": "#AEE938";
547
548
  "green-700": "#008A27";
548
- "green-900": "#151C07";
549
549
  "yellow-0": "#FFFAE5";
550
550
  "yellow-400": "#CCA900";
551
551
  "yellow-500": "#FFD300";
552
- "yellow-900": "#211B00";
553
552
  "pink-0": "#FFF5FF";
554
553
  "pink-400": "#F966FF";
555
554
  "red-0": "#E85D7F";
@@ -636,11 +635,9 @@ export declare const lxStudioTheme: Record<"breakpoints", {
636
635
  readonly "green-100": "#EAFDC6";
637
636
  readonly "green-400": "#AEE938";
638
637
  readonly "green-700": "#008A27";
639
- readonly "green-900": "#151C07";
640
638
  readonly "yellow-0": "#FFFAE5";
641
639
  readonly "yellow-400": "#CCA900";
642
640
  readonly "yellow-500": "#FFD300";
643
- readonly "yellow-900": "#211B00";
644
641
  readonly "pink-0": "#FFF5FF";
645
642
  readonly "pink-400": "#F966FF";
646
643
  readonly "red-0": "#E85D7F";
@@ -684,8 +681,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
684
681
  selected: "navy-100";
685
682
  disabled: "navy-200";
686
683
  hover: "navy-200";
687
- success: "green-0";
688
- warning: "yellow-0";
689
684
  };
690
685
  shadow: {
691
686
  primary: "navy-800";
@@ -734,8 +729,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
734
729
  selected: "white-100";
735
730
  disabled: "white-200";
736
731
  hover: "white-200";
737
- success: "green-900";
738
- warning: "yellow-900";
739
732
  };
740
733
  shadow: {
741
734
  primary: "white";
@@ -803,11 +796,9 @@ export declare const lxStudioTheme: Record<"breakpoints", {
803
796
  readonly "green-100": "#EAFDC6";
804
797
  readonly "green-400": "#AEE938";
805
798
  readonly "green-700": "#008A27";
806
- readonly "green-900": "#151C07";
807
799
  readonly "yellow-0": "#FFFAE5";
808
800
  readonly "yellow-400": "#CCA900";
809
801
  readonly "yellow-500": "#FFD300";
810
- readonly "yellow-900": "#211B00";
811
802
  readonly "pink-0": "#FFF5FF";
812
803
  readonly "pink-400": "#F966FF";
813
804
  readonly "red-0": "#E85D7F";
@@ -874,11 +865,9 @@ export declare const lxStudioTheme: Record<"breakpoints", {
874
865
  "green-100": "#EAFDC6";
875
866
  "green-400": "#AEE938";
876
867
  "green-700": "#008A27";
877
- "green-900": "#151C07";
878
868
  "yellow-0": "#FFFAE5";
879
869
  "yellow-400": "#CCA900";
880
870
  "yellow-500": "#FFD300";
881
- "yellow-900": "#211B00";
882
871
  "pink-0": "#FFF5FF";
883
872
  "pink-400": "#F966FF";
884
873
  "red-0": "#E85D7F";
@@ -924,8 +913,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
924
913
  selected: "navy-100";
925
914
  disabled: "navy-200";
926
915
  hover: "navy-200";
927
- success: "green-0";
928
- warning: "yellow-0";
929
916
  };
930
917
  shadow: {
931
918
  primary: "navy-800";
@@ -975,8 +962,6 @@ export declare const lxStudioTheme: Record<"breakpoints", {
975
962
  selected: "white-100";
976
963
  disabled: "white-200";
977
964
  hover: "white-200";
978
- success: "green-900";
979
- warning: "yellow-900";
980
965
  };
981
966
  shadow: {
982
967
  primary: "white";
@@ -1033,7 +1018,7 @@ export declare const lxStudioTheme: Record<"breakpoints", {
1033
1018
  }, "-", "_">;
1034
1019
  }>;
1035
1020
  mode: "light";
1036
- _getColorValue: (color: "beige" | "blue" | "navy" | "green" | "yellow" | "pink" | "red" | "orange" | "hyper" | "white" | "beige-100" | "blue-0" | "blue-100" | "blue-300" | "blue-400" | "blue-500" | "blue-800" | "navy-100" | "navy-300" | "navy-400" | "navy-500" | "navy-800" | "navy-200" | "navy-600" | "navy-700" | "navy-900" | "green-0" | "green-100" | "green-400" | "green-700" | "green-900" | "yellow-0" | "yellow-400" | "yellow-500" | "yellow-900" | "pink-0" | "pink-400" | "red-0" | "red-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;
1021
+ _getColorValue: (color: "beige" | "blue" | "navy" | "green" | "yellow" | "pink" | "red" | "orange" | "hyper" | "white" | "beige-100" | "blue-0" | "blue-100" | "blue-300" | "blue-400" | "blue-500" | "blue-800" | "navy-100" | "navy-300" | "navy-400" | "navy-500" | "navy-800" | "navy-200" | "navy-600" | "navy-700" | "navy-900" | "green-0" | "green-100" | "green-400" | "green-700" | "yellow-0" | "yellow-400" | "yellow-500" | "pink-0" | "pink-400" | "red-0" | "red-100" | "red-500" | "red-600" | "orange-100" | "orange-500" | "hyper-400" | "hyper-500" | "gray-100" | "gray-300" | "gray-800" | "gray-200" | "gray-600" | "gray-900" | "white-100" | "white-300" | "white-400" | "white-500" | "white-200" | "white-600" | "white-700" | "black" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-disabled" | "text-accent" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "shadow-secondary" | "shadow-primary" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | "lxStudioSuccess" | "lxStudioBgPrimary" | "lxStudioPurple" | "lxStudioPurpleHover") => string;
1037
1022
  }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
1038
1023
  export type LxStudioThemeShape = typeof lxStudioTheme;
1039
1024
  export interface LxStudioTheme extends LxStudioThemeShape {
package/dist/themes/platform.d.ts CHANGED
@@ -3,12 +3,22 @@
3
3
  * That are not needed for the rest of the application.
4
4
  */
5
5
  export declare const platformTheme: Record<"breakpoints", {
6
+ c_xs: string;
7
+ c_sm: string;
8
+ c_md: string;
9
+ c_lg: string;
10
+ c_xl: string;
6
11
  xs: string;
7
12
  sm: string;
8
13
  md: string;
9
14
  lg: string;
10
15
  xl: string;
11
16
  }> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"breakpoints", {
17
+ c_xs: string;
18
+ c_sm: string;
19
+ c_md: string;
20
+ c_lg: string;
21
+ c_xl: string;
12
22
  xs: string;
13
23
  sm: string;
14
24
  md: string;
@@ -21,6 +31,11 @@ export declare const platformTheme: Record<"breakpoints", {
21
31
  };
22
32
  readonly headerZ: 15;
23
33
  }, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
34
+ c_xs: string;
35
+ c_sm: string;
36
+ c_md: string;
37
+ c_lg: string;
38
+ c_xl: string;
24
39
  xs: string;
25
40
  sm: string;
26
41
  md: string;
@@ -28,6 +43,11 @@ export declare const platformTheme: Record<"breakpoints", {
28
43
  xl: string;
29
44
  }> & import("@codecademy/variance/dist/createTheme/types").Merge<{
30
45
  breakpoints: {
46
+ c_xs: string;
47
+ c_sm: string;
48
+ c_md: string;
49
+ c_lg: string;
50
+ c_xl: string;
31
51
  xs: string;
32
52
  sm: string;
33
53
  md: string;
@@ -76,10 +96,6 @@ export declare const platformTheme: Record<"breakpoints", {
76
96
  readonly 8: string;
77
97
  readonly 12: string;
78
98
  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
99
  readonly 24: string;
84
100
  readonly 32: string;
85
101
  readonly 40: string;
@@ -133,11 +149,9 @@ export declare const platformTheme: Record<"breakpoints", {
133
149
  readonly "green-100": "#EAFDC6";
134
150
  readonly "green-400": "#AEE938";
135
151
  readonly "green-700": "#008A27";
136
- readonly "green-900": "#151C07";
137
152
  readonly "yellow-0": "#FFFAE5";
138
153
  readonly "yellow-400": "#CCA900";
139
154
  readonly "yellow-500": "#FFD300";
140
- readonly "yellow-900": "#211B00";
141
155
  readonly "pink-0": "#FFF5FF";
142
156
  readonly "pink-400": "#F966FF";
143
157
  readonly "red-0": "#E85D7F";
@@ -182,8 +196,6 @@ export declare const platformTheme: Record<"breakpoints", {
182
196
  selected: "navy-100";
183
197
  disabled: "navy-200";
184
198
  hover: "navy-200";
185
- success: "green-0";
186
- warning: "yellow-0";
187
199
  };
188
200
  shadow: {
189
201
  primary: "navy-800";
@@ -232,8 +244,6 @@ export declare const platformTheme: Record<"breakpoints", {
232
244
  selected: "white-100";
233
245
  disabled: "white-200";
234
246
  hover: "white-200";
235
- success: "green-900";
236
- warning: "yellow-900";
237
247
  };
238
248
  shadow: {
239
249
  primary: "white";
@@ -301,11 +311,9 @@ export declare const platformTheme: Record<"breakpoints", {
301
311
  readonly "green-100": "#EAFDC6";
302
312
  readonly "green-400": "#AEE938";
303
313
  readonly "green-700": "#008A27";
304
- readonly "green-900": "#151C07";
305
314
  readonly "yellow-0": "#FFFAE5";
306
315
  readonly "yellow-400": "#CCA900";
307
316
  readonly "yellow-500": "#FFD300";
308
- readonly "yellow-900": "#211B00";
309
317
  readonly "pink-0": "#FFF5FF";
310
318
  readonly "pink-400": "#F966FF";
311
319
  readonly "red-0": "#E85D7F";
@@ -351,8 +359,6 @@ export declare const platformTheme: Record<"breakpoints", {
351
359
  selected: "navy-100";
352
360
  disabled: "navy-200";
353
361
  hover: "navy-200";
354
- success: "green-0";
355
- warning: "yellow-0";
356
362
  };
357
363
  shadow: {
358
364
  primary: "navy-800";
@@ -402,8 +408,6 @@ export declare const platformTheme: Record<"breakpoints", {
402
408
  selected: "white-100";
403
409
  disabled: "white-200";
404
410
  hover: "white-200";
405
- success: "green-900";
406
- warning: "yellow-900";
407
411
  };
408
412
  shadow: {
409
413
  primary: "white";
@@ -474,11 +478,9 @@ export declare const platformTheme: Record<"breakpoints", {
474
478
  readonly "green-100": "#EAFDC6";
475
479
  readonly "green-400": "#AEE938";
476
480
  readonly "green-700": "#008A27";
477
- readonly "green-900": "#151C07";
478
481
  readonly "yellow-0": "#FFFAE5";
479
482
  readonly "yellow-400": "#CCA900";
480
483
  readonly "yellow-500": "#FFD300";
481
- readonly "yellow-900": "#211B00";
482
484
  readonly "pink-0": "#FFF5FF";
483
485
  readonly "pink-400": "#F966FF";
484
486
  readonly "red-0": "#E85D7F";
@@ -617,11 +619,9 @@ export declare const platformTheme: Record<"breakpoints", {
617
619
  readonly "green-100": "#EAFDC6";
618
620
  readonly "green-400": "#AEE938";
619
621
  readonly "green-700": "#008A27";
620
- readonly "green-900": "#151C07";
621
622
  readonly "yellow-0": "#FFFAE5";
622
623
  readonly "yellow-400": "#CCA900";
623
624
  readonly "yellow-500": "#FFD300";
624
- readonly "yellow-900": "#211B00";
625
625
  readonly "pink-0": "#FFF5FF";
626
626
  readonly "pink-400": "#F966FF";
627
627
  readonly "red-0": "#E85D7F";
@@ -665,8 +665,6 @@ export declare const platformTheme: Record<"breakpoints", {
665
665
  selected: "navy-100";
666
666
  disabled: "navy-200";
667
667
  hover: "navy-200";
668
- success: "green-0";
669
- warning: "yellow-0";
670
668
  };
671
669
  shadow: {
672
670
  primary: "navy-800";
@@ -715,8 +713,6 @@ export declare const platformTheme: Record<"breakpoints", {
715
713
  selected: "white-100";
716
714
  disabled: "white-200";
717
715
  hover: "white-200";
718
- success: "green-900";
719
- warning: "yellow-900";
720
716
  };
721
717
  shadow: {
722
718
  primary: "white";
@@ -784,11 +780,9 @@ export declare const platformTheme: Record<"breakpoints", {
784
780
  readonly "green-100": "#EAFDC6";
785
781
  readonly "green-400": "#AEE938";
786
782
  readonly "green-700": "#008A27";
787
- readonly "green-900": "#151C07";
788
783
  readonly "yellow-0": "#FFFAE5";
789
784
  readonly "yellow-400": "#CCA900";
790
785
  readonly "yellow-500": "#FFD300";
791
- readonly "yellow-900": "#211B00";
792
786
  readonly "pink-0": "#FFF5FF";
793
787
  readonly "pink-400": "#F966FF";
794
788
  readonly "red-0": "#E85D7F";
@@ -845,8 +839,6 @@ export declare const platformTheme: Record<"breakpoints", {
845
839
  selected: "navy-100";
846
840
  disabled: "navy-200";
847
841
  hover: "navy-200";
848
- success: "green-0";
849
- warning: "yellow-0";
850
842
  };
851
843
  shadow: {
852
844
  primary: "navy-800";
@@ -896,8 +888,6 @@ export declare const platformTheme: Record<"breakpoints", {
896
888
  selected: "white-100";
897
889
  disabled: "white-200";
898
890
  hover: "white-200";
899
- success: "green-900";
900
- warning: "yellow-900";
901
891
  };
902
892
  shadow: {
903
893
  primary: "white";
@@ -1031,11 +1021,9 @@ export declare const platformTheme: Record<"breakpoints", {
1031
1021
  readonly "green-100": "#EAFDC6";
1032
1022
  readonly "green-400": "#AEE938";
1033
1023
  readonly "green-700": "#008A27";
1034
- readonly "green-900": "#151C07";
1035
1024
  readonly "yellow-0": "#FFFAE5";
1036
1025
  readonly "yellow-400": "#CCA900";
1037
1026
  readonly "yellow-500": "#FFD300";
1038
- readonly "yellow-900": "#211B00";
1039
1027
  readonly "pink-0": "#FFF5FF";
1040
1028
  readonly "pink-400": "#F966FF";
1041
1029
  readonly "red-0": "#E85D7F";
@@ -1059,7 +1047,7 @@ export declare const platformTheme: Record<"breakpoints", {
1059
1047
  readonly "white-200": string;
1060
1048
  readonly "white-600": string;
1061
1049
  readonly "white-700": string;
1062
- }, "-"> | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "border-primary" | "text-disabled" | "text-accent" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-success" | "background-warning" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "shadow-secondary" | "shadow-primary" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-tertiary" | import("@codecademy/variance").Path<{
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<{
1063
1051
  readonly lightBeige: "#FFFBF8";
1064
1052
  readonly gold: "#8A7300";
1065
1053
  readonly teal: "#027E97";
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.
package/dist/variables/colors.d.ts CHANGED
@@ -26,13 +26,11 @@ export declare const coreSwatches: {
26
26
  readonly '100': "#EAFDC6";
27
27
  readonly '400': "#AEE938";
28
28
  readonly '700': "#008A27";
29
- readonly '900': "#151C07";
30
29
  };
31
30
  readonly yellow: {
32
31
  readonly '0': "#FFFAE5";
33
32
  readonly '400': "#CCA900";
34
33
  readonly '500': "#FFD300";
35
- readonly '900': "#211B00";
36
34
  };
37
35
  readonly pink: {
38
36
  readonly '0': "#FFF5FF";
@@ -129,11 +127,9 @@ export declare const corePalette: {
129
127
  readonly "green-100": "#EAFDC6";
130
128
  readonly "green-400": "#AEE938";
131
129
  readonly "green-700": "#008A27";
132
- readonly "green-900": "#151C07";
133
130
  readonly "yellow-0": "#FFFAE5";
134
131
  readonly "yellow-400": "#CCA900";
135
132
  readonly "yellow-500": "#FFD300";
136
- readonly "yellow-900": "#211B00";
137
133
  readonly "pink-0": "#FFF5FF";
138
134
  readonly "pink-400": "#F966FF";
139
135
  readonly "red-0": "#E85D7F";
@@ -251,11 +247,9 @@ export declare const lxStudioPalette: {
251
247
  "green-100": "#EAFDC6";
252
248
  "green-400": "#AEE938";
253
249
  "green-700": "#008A27";
254
- "green-900": "#151C07";
255
250
  "yellow-0": "#FFFAE5";
256
251
  "yellow-400": "#CCA900";
257
252
  "yellow-500": "#FFD300";
258
- "yellow-900": "#211B00";
259
253
  "pink-0": "#FFF5FF";
260
254
  "pink-400": "#F966FF";
261
255
  "red-0": "#E85D7F";
package/dist/variables/colors.js CHANGED
@@ -34,14 +34,12 @@ export const coreSwatches = {
34
34
  '0': '#F5FFE3',
35
35
  '100': '#EAFDC6',
36
36
  '400': '#AEE938',
37
- '700': '#008A27',
38
- '900': '#151C07'
37
+ '700': '#008A27'
39
38
  },
40
39
  yellow: {
41
40
  '0': '#FFFAE5',
42
41
  '400': '#CCA900',
43
- '500': '#FFD300',
44
- '900': '#211B00'
42
+ '500': '#FFD300'
45
43
  },
46
44
  pink: {
47
45
  '0': '#FFF5FF',
package/dist/variables/responsive.d.ts CHANGED
@@ -6,6 +6,7 @@ export declare const breakpoints: {
6
6
  readonly xl: "1440px";
7
7
  };
8
8
  export type MediaSize = keyof typeof breakpoints;
9
+ export type ContainerSize = keyof typeof containerQueries;
9
10
  export declare const mediaQueries: {
10
11
  xs: string;
11
12
  sm: string;
@@ -13,6 +14,13 @@ export declare const mediaQueries: {
13
14
  lg: string;
14
15
  xl: string;
15
16
  };
17
+ export declare const containerQueries: {
18
+ c_xs: string;
19
+ c_sm: string;
20
+ c_md: string;
21
+ c_lg: string;
22
+ c_xl: string;
23
+ };
16
24
  export declare const contentWidths: {
17
25
  md: "1200px";
18
26
  max: "1440px";
package/dist/variables/responsive.js CHANGED
@@ -6,6 +6,7 @@ export const breakpoints = {
6
6
  xl: '1440px'
7
7
  };
8
8
  const createMediaQuery = (size, direction) => `@media only screen and (${direction}-width: ${breakpoints[size]})`;
9
+ const createContainerQuery = (size, direction) => `@container (${direction}-width: ${breakpoints[size]})`;
9
10
  export const mediaQueries = {
10
11
  xs: createMediaQuery('xs', 'min'),
11
12
  sm: createMediaQuery('sm', 'min'),
@@ -13,6 +14,13 @@ export const mediaQueries = {
13
14
  lg: createMediaQuery('lg', 'min'),
14
15
  xl: createMediaQuery('xl', 'min')
15
16
  };
17
+ export const containerQueries = {
18
+ c_xs: createContainerQuery('xs', 'min'),
19
+ c_sm: createContainerQuery('sm', 'min'),
20
+ c_md: createContainerQuery('md', 'min'),
21
+ c_lg: createContainerQuery('lg', 'min'),
22
+ c_xl: createContainerQuery('xl', 'min')
23
+ };
16
24
  export const contentWidths = {
17
25
  md: breakpoints.lg,
18
26
  max: breakpoints.xl
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.e8bc80.0",
4
+ "version": "17.7.0-alpha.1dc930.0",
5
5
  "author": "Jake Hiller <jake@codecademy.com>",
6
6
  "dependencies": {
7
- "@codecademy/variance": "0.22.1",
7
+ "@codecademy/variance": "0.23.0-alpha.1dc930.0",
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": "d5ddad8e2a817c16085cf516d8b7716057abcd24"
37
+ "gitHead": "a03042de4ba6e2bbfa9924659494a4ad0134afa7"
38
38
  }