@codecademy/gamut-styles 15.1.0 → 16.0.0-alpha.2c40eb.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 (7) hide show
  1. package/dist/themes/admin.d.ts +62 -62
  2. package/dist/themes/core.d.ts +31 -31
  3. package/dist/themes/core.js +5 -5
  4. package/dist/themes/platform.d.ts +62 -62
  5. package/dist/variables/colors.d.ts +14 -14
  6. package/dist/variables/colors.js +9 -8
  7. package/package.json +2 -2
package/dist/themes/admin.d.ts CHANGED
@@ -102,14 +102,14 @@ export declare const adminTheme: Record<"breakpoints", {
102
102
  readonly "blue-400": "#3388FF";
103
103
  readonly "blue-500": "#1557FF";
104
104
  readonly "blue-800": "#1D2340";
105
- readonly "navy-100": "#F3F3F5";
106
- readonly "navy-300": "#C3C5CB";
107
- readonly "navy-400": "#9FA2AC";
108
- readonly "navy-500": "#707382";
105
+ readonly "navy-100": string;
106
+ readonly "navy-300": string;
107
+ readonly "navy-400": string;
108
+ readonly "navy-500": string;
109
109
  readonly "navy-800": "#10162F";
110
- readonly "navy-200": "#DBDCE0";
111
- readonly "navy-600": "#585C6D";
112
- readonly "navy-700": "#34394C";
110
+ readonly "navy-200": string;
111
+ readonly "navy-600": string;
112
+ readonly "navy-700": string;
113
113
  readonly "navy-900": "#0A0D1C";
114
114
  readonly "green-100": "#EAFDC6";
115
115
  readonly "green-0": "#F5FFE3";
@@ -187,7 +187,7 @@ export declare const adminTheme: Record<"breakpoints", {
187
187
  text: {
188
188
  _: "white";
189
189
  accent: "beige";
190
- disabled: "navy-200";
190
+ disabled: "white-500";
191
191
  secondary: "white-600";
192
192
  };
193
193
  feedback: {
@@ -200,9 +200,9 @@ export declare const adminTheme: Record<"breakpoints", {
200
200
  contrast: "black";
201
201
  current: "navy-800";
202
202
  primary: "navy-900";
203
- selected: "navy-700";
204
- disabled: "navy-500";
205
- hover: "navy-600";
203
+ selected: "white-100";
204
+ disabled: "white-200";
205
+ hover: "white-200";
206
206
  };
207
207
  shadow: {
208
208
  opaque: "shadow-black-heavy";
@@ -215,7 +215,7 @@ export declare const adminTheme: Record<"breakpoints", {
215
215
  };
216
216
  secondary: {
217
217
  _: "white";
218
- hover: "navy-200";
218
+ hover: "white-700";
219
219
  };
220
220
  danger: {
221
221
  _: "red-0";
@@ -255,14 +255,14 @@ export declare const adminTheme: Record<"breakpoints", {
255
255
  readonly "blue-400": "#3388FF";
256
256
  readonly "blue-500": "#1557FF";
257
257
  readonly "blue-800": "#1D2340";
258
- readonly "navy-100": "#F3F3F5";
259
- readonly "navy-300": "#C3C5CB";
260
- readonly "navy-400": "#9FA2AC";
261
- readonly "navy-500": "#707382";
258
+ readonly "navy-100": string;
259
+ readonly "navy-300": string;
260
+ readonly "navy-400": string;
261
+ readonly "navy-500": string;
262
262
  readonly "navy-800": "#10162F";
263
- readonly "navy-200": "#DBDCE0";
264
- readonly "navy-600": "#585C6D";
265
- readonly "navy-700": "#34394C";
263
+ readonly "navy-200": string;
264
+ readonly "navy-600": string;
265
+ readonly "navy-700": string;
266
266
  readonly "navy-900": "#0A0D1C";
267
267
  readonly "green-100": "#EAFDC6";
268
268
  readonly "green-0": "#F5FFE3";
@@ -342,7 +342,7 @@ export declare const adminTheme: Record<"breakpoints", {
342
342
  text: {
343
343
  _: "white";
344
344
  accent: "beige";
345
- disabled: "navy-200";
345
+ disabled: "white-500";
346
346
  secondary: "white-600";
347
347
  };
348
348
  feedback: {
@@ -355,9 +355,9 @@ export declare const adminTheme: Record<"breakpoints", {
355
355
  contrast: "black";
356
356
  current: "navy-800";
357
357
  primary: "navy-900";
358
- selected: "navy-700";
359
- disabled: "navy-500";
360
- hover: "navy-600";
358
+ selected: "white-100";
359
+ disabled: "white-200";
360
+ hover: "white-200";
361
361
  };
362
362
  shadow: {
363
363
  opaque: "shadow-black-heavy";
@@ -370,7 +370,7 @@ export declare const adminTheme: Record<"breakpoints", {
370
370
  };
371
371
  secondary: {
372
372
  _: "white";
373
- hover: "navy-200";
373
+ hover: "white-700";
374
374
  };
375
375
  danger: {
376
376
  _: "red-0";
@@ -413,14 +413,14 @@ export declare const adminTheme: Record<"breakpoints", {
413
413
  readonly "blue-400": "#3388FF";
414
414
  readonly "blue-500": "#1557FF";
415
415
  readonly "blue-800": "#1D2340";
416
- readonly "navy-100": "#F3F3F5";
417
- readonly "navy-300": "#C3C5CB";
418
- readonly "navy-400": "#9FA2AC";
419
- readonly "navy-500": "#707382";
416
+ readonly "navy-100": string;
417
+ readonly "navy-300": string;
418
+ readonly "navy-400": string;
419
+ readonly "navy-500": string;
420
420
  readonly "navy-800": "#10162F";
421
- readonly "navy-200": "#DBDCE0";
422
- readonly "navy-600": "#585C6D";
423
- readonly "navy-700": "#34394C";
421
+ readonly "navy-200": string;
422
+ readonly "navy-600": string;
423
+ readonly "navy-700": string;
424
424
  readonly "navy-900": "#0A0D1C";
425
425
  readonly "green-100": "#EAFDC6";
426
426
  readonly "green-0": "#F5FFE3";
@@ -507,14 +507,14 @@ export declare const adminTheme: Record<"breakpoints", {
507
507
  readonly "blue-400": "#3388FF";
508
508
  readonly "blue-500": "#1557FF";
509
509
  readonly "blue-800": "#1D2340";
510
- readonly "navy-100": "#F3F3F5";
511
- readonly "navy-300": "#C3C5CB";
512
- readonly "navy-400": "#9FA2AC";
513
- readonly "navy-500": "#707382";
510
+ readonly "navy-100": string;
511
+ readonly "navy-300": string;
512
+ readonly "navy-400": string;
513
+ readonly "navy-500": string;
514
514
  readonly "navy-800": "#10162F";
515
- readonly "navy-200": "#DBDCE0";
516
- readonly "navy-600": "#585C6D";
517
- readonly "navy-700": "#34394C";
515
+ readonly "navy-200": string;
516
+ readonly "navy-600": string;
517
+ readonly "navy-700": string;
518
518
  readonly "navy-900": "#0A0D1C";
519
519
  readonly "green-100": "#EAFDC6";
520
520
  readonly "green-0": "#F5FFE3";
@@ -591,7 +591,7 @@ export declare const adminTheme: Record<"breakpoints", {
591
591
  text: {
592
592
  _: "white";
593
593
  accent: "beige";
594
- disabled: "navy-200";
594
+ disabled: "white-500";
595
595
  secondary: "white-600";
596
596
  };
597
597
  feedback: {
@@ -604,9 +604,9 @@ export declare const adminTheme: Record<"breakpoints", {
604
604
  contrast: "black";
605
605
  current: "navy-800";
606
606
  primary: "navy-900";
607
- selected: "navy-700";
608
- disabled: "navy-500";
609
- hover: "navy-600";
607
+ selected: "white-100";
608
+ disabled: "white-200";
609
+ hover: "white-200";
610
610
  };
611
611
  shadow: {
612
612
  opaque: "shadow-black-heavy";
@@ -619,7 +619,7 @@ export declare const adminTheme: Record<"breakpoints", {
619
619
  };
620
620
  secondary: {
621
621
  _: "white";
622
- hover: "navy-200";
622
+ hover: "white-700";
623
623
  };
624
624
  danger: {
625
625
  _: "red-0";
@@ -659,14 +659,14 @@ export declare const adminTheme: Record<"breakpoints", {
659
659
  readonly "blue-400": "#3388FF";
660
660
  readonly "blue-500": "#1557FF";
661
661
  readonly "blue-800": "#1D2340";
662
- readonly "navy-100": "#F3F3F5";
663
- readonly "navy-300": "#C3C5CB";
664
- readonly "navy-400": "#9FA2AC";
665
- readonly "navy-500": "#707382";
662
+ readonly "navy-100": string;
663
+ readonly "navy-300": string;
664
+ readonly "navy-400": string;
665
+ readonly "navy-500": string;
666
666
  readonly "navy-800": "#10162F";
667
- readonly "navy-200": "#DBDCE0";
668
- readonly "navy-600": "#585C6D";
669
- readonly "navy-700": "#34394C";
667
+ readonly "navy-200": string;
668
+ readonly "navy-600": string;
669
+ readonly "navy-700": string;
670
670
  readonly "navy-900": "#0A0D1C";
671
671
  readonly "green-100": "#EAFDC6";
672
672
  readonly "green-0": "#F5FFE3";
@@ -746,7 +746,7 @@ export declare const adminTheme: Record<"breakpoints", {
746
746
  text: {
747
747
  _: "white";
748
748
  accent: "beige";
749
- disabled: "navy-200";
749
+ disabled: "white-500";
750
750
  secondary: "white-600";
751
751
  };
752
752
  feedback: {
@@ -759,9 +759,9 @@ export declare const adminTheme: Record<"breakpoints", {
759
759
  contrast: "black";
760
760
  current: "navy-800";
761
761
  primary: "navy-900";
762
- selected: "navy-700";
763
- disabled: "navy-500";
764
- hover: "navy-600";
762
+ selected: "white-100";
763
+ disabled: "white-200";
764
+ hover: "white-200";
765
765
  };
766
766
  shadow: {
767
767
  opaque: "shadow-black-heavy";
@@ -774,7 +774,7 @@ export declare const adminTheme: Record<"breakpoints", {
774
774
  };
775
775
  secondary: {
776
776
  _: "white";
777
- hover: "navy-200";
777
+ hover: "white-700";
778
778
  };
779
779
  danger: {
780
780
  _: "red-0";
@@ -829,14 +829,14 @@ export declare const adminTheme: Record<"breakpoints", {
829
829
  readonly "blue-400": "#3388FF";
830
830
  readonly "blue-500": "#1557FF";
831
831
  readonly "blue-800": "#1D2340";
832
- readonly "navy-100": "#F3F3F5";
833
- readonly "navy-300": "#C3C5CB";
834
- readonly "navy-400": "#9FA2AC";
835
- readonly "navy-500": "#707382";
832
+ readonly "navy-100": string;
833
+ readonly "navy-300": string;
834
+ readonly "navy-400": string;
835
+ readonly "navy-500": string;
836
836
  readonly "navy-800": "#10162F";
837
- readonly "navy-200": "#DBDCE0";
838
- readonly "navy-600": "#585C6D";
839
- readonly "navy-700": "#34394C";
837
+ readonly "navy-200": string;
838
+ readonly "navy-600": string;
839
+ readonly "navy-700": string;
840
840
  readonly "navy-900": "#0A0D1C";
841
841
  readonly "green-100": "#EAFDC6";
842
842
  readonly "green-0": "#F5FFE3";
package/dist/themes/core.d.ts CHANGED
@@ -101,14 +101,14 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
101
101
  readonly "blue-400": "#3388FF";
102
102
  readonly "blue-500": "#1557FF";
103
103
  readonly "blue-800": "#1D2340";
104
- readonly "navy-100": "#F3F3F5";
105
- readonly "navy-300": "#C3C5CB";
106
- readonly "navy-400": "#9FA2AC";
107
- readonly "navy-500": "#707382";
104
+ readonly "navy-100": string;
105
+ readonly "navy-300": string;
106
+ readonly "navy-400": string;
107
+ readonly "navy-500": string;
108
108
  readonly "navy-800": "#10162F";
109
- readonly "navy-200": "#DBDCE0";
110
- readonly "navy-600": "#585C6D";
111
- readonly "navy-700": "#34394C";
109
+ readonly "navy-200": string;
110
+ readonly "navy-600": string;
111
+ readonly "navy-700": string;
112
112
  readonly "navy-900": "#0A0D1C";
113
113
  readonly "green-100": "#EAFDC6";
114
114
  readonly "green-0": "#F5FFE3";
@@ -186,7 +186,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
186
186
  text: {
187
187
  _: "white";
188
188
  accent: "beige";
189
- disabled: "navy-200";
189
+ disabled: "white-500";
190
190
  secondary: "white-600";
191
191
  };
192
192
  feedback: {
@@ -199,9 +199,9 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
199
199
  contrast: "black";
200
200
  current: "navy-800";
201
201
  primary: "navy-900";
202
- selected: "navy-700";
203
- disabled: "navy-500";
204
- hover: "navy-600";
202
+ selected: "white-100";
203
+ disabled: "white-200";
204
+ hover: "white-200";
205
205
  };
206
206
  shadow: {
207
207
  opaque: "shadow-black-heavy";
@@ -214,7 +214,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
214
214
  };
215
215
  secondary: {
216
216
  _: "white";
217
- hover: "navy-200";
217
+ hover: "white-700";
218
218
  };
219
219
  danger: {
220
220
  _: "red-0";
@@ -254,14 +254,14 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
254
254
  readonly "blue-400": "#3388FF";
255
255
  readonly "blue-500": "#1557FF";
256
256
  readonly "blue-800": "#1D2340";
257
- readonly "navy-100": "#F3F3F5";
258
- readonly "navy-300": "#C3C5CB";
259
- readonly "navy-400": "#9FA2AC";
260
- readonly "navy-500": "#707382";
257
+ readonly "navy-100": string;
258
+ readonly "navy-300": string;
259
+ readonly "navy-400": string;
260
+ readonly "navy-500": string;
261
261
  readonly "navy-800": "#10162F";
262
- readonly "navy-200": "#DBDCE0";
263
- readonly "navy-600": "#585C6D";
264
- readonly "navy-700": "#34394C";
262
+ readonly "navy-200": string;
263
+ readonly "navy-600": string;
264
+ readonly "navy-700": string;
265
265
  readonly "navy-900": "#0A0D1C";
266
266
  readonly "green-100": "#EAFDC6";
267
267
  readonly "green-0": "#F5FFE3";
@@ -341,7 +341,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
341
341
  text: {
342
342
  _: "white";
343
343
  accent: "beige";
344
- disabled: "navy-200";
344
+ disabled: "white-500";
345
345
  secondary: "white-600";
346
346
  };
347
347
  feedback: {
@@ -354,9 +354,9 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
354
354
  contrast: "black";
355
355
  current: "navy-800";
356
356
  primary: "navy-900";
357
- selected: "navy-700";
358
- disabled: "navy-500";
359
- hover: "navy-600";
357
+ selected: "white-100";
358
+ disabled: "white-200";
359
+ hover: "white-200";
360
360
  };
361
361
  shadow: {
362
362
  opaque: "shadow-black-heavy";
@@ -369,7 +369,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
369
369
  };
370
370
  secondary: {
371
371
  _: "white";
372
- hover: "navy-200";
372
+ hover: "white-700";
373
373
  };
374
374
  danger: {
375
375
  _: "red-0";
@@ -412,14 +412,14 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
412
412
  readonly "blue-400": "#3388FF";
413
413
  readonly "blue-500": "#1557FF";
414
414
  readonly "blue-800": "#1D2340";
415
- readonly "navy-100": "#F3F3F5";
416
- readonly "navy-300": "#C3C5CB";
417
- readonly "navy-400": "#9FA2AC";
418
- readonly "navy-500": "#707382";
415
+ readonly "navy-100": string;
416
+ readonly "navy-300": string;
417
+ readonly "navy-400": string;
418
+ readonly "navy-500": string;
419
419
  readonly "navy-800": "#10162F";
420
- readonly "navy-200": "#DBDCE0";
421
- readonly "navy-600": "#585C6D";
422
- readonly "navy-700": "#34394C";
420
+ readonly "navy-200": string;
421
+ readonly "navy-600": string;
422
+ readonly "navy-700": string;
423
423
  readonly "navy-900": "#0A0D1C";
424
424
  readonly "green-100": "#EAFDC6";
425
425
  readonly "green-0": "#F5FFE3";
package/dist/themes/core.js CHANGED
@@ -63,7 +63,7 @@ export var coreTheme = createTheme({
63
63
  text: {
64
64
  _: 'white',
65
65
  accent: 'beige',
66
- disabled: 'navy-200',
66
+ disabled: 'white-500',
67
67
  secondary: 'white-600'
68
68
  },
69
69
  feedback: {
@@ -76,9 +76,9 @@ export var coreTheme = createTheme({
76
76
  contrast: 'black',
77
77
  current: 'navy-800',
78
78
  primary: 'navy-900',
79
- selected: 'navy-700',
80
- disabled: 'navy-500',
81
- hover: 'navy-600'
79
+ selected: 'white-100',
80
+ disabled: 'white-200',
81
+ hover: 'white-200'
82
82
  },
83
83
  shadow: {
84
84
  opaque: 'shadow-black-heavy',
@@ -91,7 +91,7 @@ export var coreTheme = createTheme({
91
91
  },
92
92
  secondary: {
93
93
  _: 'white',
94
- hover: 'navy-200'
94
+ hover: 'white-700'
95
95
  },
96
96
  danger: {
97
97
  _: 'red-0',
package/dist/themes/platform.d.ts CHANGED
@@ -112,14 +112,14 @@ export declare const platformTheme: Record<"breakpoints", {
112
112
  readonly "blue-400": "#3388FF";
113
113
  readonly "blue-500": "#1557FF";
114
114
  readonly "blue-800": "#1D2340";
115
- readonly "navy-100": "#F3F3F5";
116
- readonly "navy-300": "#C3C5CB";
117
- readonly "navy-400": "#9FA2AC";
118
- readonly "navy-500": "#707382";
115
+ readonly "navy-100": string;
116
+ readonly "navy-300": string;
117
+ readonly "navy-400": string;
118
+ readonly "navy-500": string;
119
119
  readonly "navy-800": "#10162F";
120
- readonly "navy-200": "#DBDCE0";
121
- readonly "navy-600": "#585C6D";
122
- readonly "navy-700": "#34394C";
120
+ readonly "navy-200": string;
121
+ readonly "navy-600": string;
122
+ readonly "navy-700": string;
123
123
  readonly "navy-900": "#0A0D1C";
124
124
  readonly "green-100": "#EAFDC6";
125
125
  readonly "green-0": "#F5FFE3";
@@ -197,7 +197,7 @@ export declare const platformTheme: Record<"breakpoints", {
197
197
  text: {
198
198
  _: "white";
199
199
  accent: "beige";
200
- disabled: "navy-200";
200
+ disabled: "white-500";
201
201
  secondary: "white-600";
202
202
  };
203
203
  feedback: {
@@ -210,9 +210,9 @@ export declare const platformTheme: Record<"breakpoints", {
210
210
  contrast: "black";
211
211
  current: "navy-800";
212
212
  primary: "navy-900";
213
- selected: "navy-700";
214
- disabled: "navy-500";
215
- hover: "navy-600";
213
+ selected: "white-100";
214
+ disabled: "white-200";
215
+ hover: "white-200";
216
216
  };
217
217
  shadow: {
218
218
  opaque: "shadow-black-heavy";
@@ -225,7 +225,7 @@ export declare const platformTheme: Record<"breakpoints", {
225
225
  };
226
226
  secondary: {
227
227
  _: "white";
228
- hover: "navy-200";
228
+ hover: "white-700";
229
229
  };
230
230
  danger: {
231
231
  _: "red-0";
@@ -265,14 +265,14 @@ export declare const platformTheme: Record<"breakpoints", {
265
265
  readonly "blue-400": "#3388FF";
266
266
  readonly "blue-500": "#1557FF";
267
267
  readonly "blue-800": "#1D2340";
268
- readonly "navy-100": "#F3F3F5";
269
- readonly "navy-300": "#C3C5CB";
270
- readonly "navy-400": "#9FA2AC";
271
- readonly "navy-500": "#707382";
268
+ readonly "navy-100": string;
269
+ readonly "navy-300": string;
270
+ readonly "navy-400": string;
271
+ readonly "navy-500": string;
272
272
  readonly "navy-800": "#10162F";
273
- readonly "navy-200": "#DBDCE0";
274
- readonly "navy-600": "#585C6D";
275
- readonly "navy-700": "#34394C";
273
+ readonly "navy-200": string;
274
+ readonly "navy-600": string;
275
+ readonly "navy-700": string;
276
276
  readonly "navy-900": "#0A0D1C";
277
277
  readonly "green-100": "#EAFDC6";
278
278
  readonly "green-0": "#F5FFE3";
@@ -352,7 +352,7 @@ export declare const platformTheme: Record<"breakpoints", {
352
352
  text: {
353
353
  _: "white";
354
354
  accent: "beige";
355
- disabled: "navy-200";
355
+ disabled: "white-500";
356
356
  secondary: "white-600";
357
357
  };
358
358
  feedback: {
@@ -365,9 +365,9 @@ export declare const platformTheme: Record<"breakpoints", {
365
365
  contrast: "black";
366
366
  current: "navy-800";
367
367
  primary: "navy-900";
368
- selected: "navy-700";
369
- disabled: "navy-500";
370
- hover: "navy-600";
368
+ selected: "white-100";
369
+ disabled: "white-200";
370
+ hover: "white-200";
371
371
  };
372
372
  shadow: {
373
373
  opaque: "shadow-black-heavy";
@@ -380,7 +380,7 @@ export declare const platformTheme: Record<"breakpoints", {
380
380
  };
381
381
  secondary: {
382
382
  _: "white";
383
- hover: "navy-200";
383
+ hover: "white-700";
384
384
  };
385
385
  danger: {
386
386
  _: "red-0";
@@ -423,14 +423,14 @@ export declare const platformTheme: Record<"breakpoints", {
423
423
  readonly "blue-400": "#3388FF";
424
424
  readonly "blue-500": "#1557FF";
425
425
  readonly "blue-800": "#1D2340";
426
- readonly "navy-100": "#F3F3F5";
427
- readonly "navy-300": "#C3C5CB";
428
- readonly "navy-400": "#9FA2AC";
429
- readonly "navy-500": "#707382";
426
+ readonly "navy-100": string;
427
+ readonly "navy-300": string;
428
+ readonly "navy-400": string;
429
+ readonly "navy-500": string;
430
430
  readonly "navy-800": "#10162F";
431
- readonly "navy-200": "#DBDCE0";
432
- readonly "navy-600": "#585C6D";
433
- readonly "navy-700": "#34394C";
431
+ readonly "navy-200": string;
432
+ readonly "navy-600": string;
433
+ readonly "navy-700": string;
434
434
  readonly "navy-900": "#0A0D1C";
435
435
  readonly "green-100": "#EAFDC6";
436
436
  readonly "green-0": "#F5FFE3";
@@ -579,14 +579,14 @@ export declare const platformTheme: Record<"breakpoints", {
579
579
  readonly "blue-400": "#3388FF";
580
580
  readonly "blue-500": "#1557FF";
581
581
  readonly "blue-800": "#1D2340";
582
- readonly "navy-100": "#F3F3F5";
583
- readonly "navy-300": "#C3C5CB";
584
- readonly "navy-400": "#9FA2AC";
585
- readonly "navy-500": "#707382";
582
+ readonly "navy-100": string;
583
+ readonly "navy-300": string;
584
+ readonly "navy-400": string;
585
+ readonly "navy-500": string;
586
586
  readonly "navy-800": "#10162F";
587
- readonly "navy-200": "#DBDCE0";
588
- readonly "navy-600": "#585C6D";
589
- readonly "navy-700": "#34394C";
587
+ readonly "navy-200": string;
588
+ readonly "navy-600": string;
589
+ readonly "navy-700": string;
590
590
  readonly "navy-900": "#0A0D1C";
591
591
  readonly "green-100": "#EAFDC6";
592
592
  readonly "green-0": "#F5FFE3";
@@ -663,7 +663,7 @@ export declare const platformTheme: Record<"breakpoints", {
663
663
  text: {
664
664
  _: "white";
665
665
  accent: "beige";
666
- disabled: "navy-200";
666
+ disabled: "white-500";
667
667
  secondary: "white-600";
668
668
  };
669
669
  feedback: {
@@ -676,9 +676,9 @@ export declare const platformTheme: Record<"breakpoints", {
676
676
  contrast: "black";
677
677
  current: "navy-800";
678
678
  primary: "navy-900";
679
- selected: "navy-700";
680
- disabled: "navy-500";
681
- hover: "navy-600";
679
+ selected: "white-100";
680
+ disabled: "white-200";
681
+ hover: "white-200";
682
682
  };
683
683
  shadow: {
684
684
  opaque: "shadow-black-heavy";
@@ -691,7 +691,7 @@ export declare const platformTheme: Record<"breakpoints", {
691
691
  };
692
692
  secondary: {
693
693
  _: "white";
694
- hover: "navy-200";
694
+ hover: "white-700";
695
695
  };
696
696
  danger: {
697
697
  _: "red-0";
@@ -731,14 +731,14 @@ export declare const platformTheme: Record<"breakpoints", {
731
731
  readonly "blue-400": "#3388FF";
732
732
  readonly "blue-500": "#1557FF";
733
733
  readonly "blue-800": "#1D2340";
734
- readonly "navy-100": "#F3F3F5";
735
- readonly "navy-300": "#C3C5CB";
736
- readonly "navy-400": "#9FA2AC";
737
- readonly "navy-500": "#707382";
734
+ readonly "navy-100": string;
735
+ readonly "navy-300": string;
736
+ readonly "navy-400": string;
737
+ readonly "navy-500": string;
738
738
  readonly "navy-800": "#10162F";
739
- readonly "navy-200": "#DBDCE0";
740
- readonly "navy-600": "#585C6D";
741
- readonly "navy-700": "#34394C";
739
+ readonly "navy-200": string;
740
+ readonly "navy-600": string;
741
+ readonly "navy-700": string;
742
742
  readonly "navy-900": "#0A0D1C";
743
743
  readonly "green-100": "#EAFDC6";
744
744
  readonly "green-0": "#F5FFE3";
@@ -829,7 +829,7 @@ export declare const platformTheme: Record<"breakpoints", {
829
829
  text: {
830
830
  _: "white";
831
831
  accent: "beige";
832
- disabled: "navy-200";
832
+ disabled: "white-500";
833
833
  secondary: "white-600";
834
834
  };
835
835
  feedback: {
@@ -842,9 +842,9 @@ export declare const platformTheme: Record<"breakpoints", {
842
842
  contrast: "black";
843
843
  current: "navy-800";
844
844
  primary: "navy-900";
845
- selected: "navy-700";
846
- disabled: "navy-500";
847
- hover: "navy-600";
845
+ selected: "white-100";
846
+ disabled: "white-200";
847
+ hover: "white-200";
848
848
  };
849
849
  shadow: {
850
850
  opaque: "shadow-black-heavy";
@@ -857,7 +857,7 @@ export declare const platformTheme: Record<"breakpoints", {
857
857
  };
858
858
  secondary: {
859
859
  _: "white";
860
- hover: "navy-200";
860
+ hover: "white-700";
861
861
  };
862
862
  danger: {
863
863
  _: "red-0";
@@ -963,14 +963,14 @@ export declare const platformTheme: Record<"breakpoints", {
963
963
  readonly "blue-400": "#3388FF";
964
964
  readonly "blue-500": "#1557FF";
965
965
  readonly "blue-800": "#1D2340";
966
- readonly "navy-100": "#F3F3F5";
967
- readonly "navy-300": "#C3C5CB";
968
- readonly "navy-400": "#9FA2AC";
969
- readonly "navy-500": "#707382";
966
+ readonly "navy-100": string;
967
+ readonly "navy-300": string;
968
+ readonly "navy-400": string;
969
+ readonly "navy-500": string;
970
970
  readonly "navy-800": "#10162F";
971
- readonly "navy-200": "#DBDCE0";
972
- readonly "navy-600": "#585C6D";
973
- readonly "navy-700": "#34394C";
971
+ readonly "navy-200": string;
972
+ readonly "navy-600": string;
973
+ readonly "navy-700": string;
974
974
  readonly "navy-900": "#0A0D1C";
975
975
  readonly "green-100": "#EAFDC6";
976
976
  readonly "green-0": "#F5FFE3";
package/dist/variables/colors.d.ts CHANGED
@@ -11,13 +11,13 @@ export declare const coreSwatches: {
11
11
  readonly '800': "#1D2340";
12
12
  };
13
13
  readonly navy: {
14
- readonly '100': "#F3F3F5";
15
- readonly '200': "#DBDCE0";
16
- readonly '300': "#C3C5CB";
17
- readonly '400': "#9FA2AC";
18
- readonly '500': "#707382";
19
- readonly '600': "#585C6D";
20
- readonly '700': "#34394C";
14
+ readonly '100': string;
15
+ readonly '200': string;
16
+ readonly '300': string;
17
+ readonly '400': string;
18
+ readonly '500': string;
19
+ readonly '600': string;
20
+ readonly '700': string;
21
21
  readonly '800': "#10162F";
22
22
  readonly '900': "#0A0D1C";
23
23
  };
@@ -117,14 +117,14 @@ export declare const corePalette: {
117
117
  readonly "blue-400": "#3388FF";
118
118
  readonly "blue-500": "#1557FF";
119
119
  readonly "blue-800": "#1D2340";
120
- readonly "navy-100": "#F3F3F5";
121
- readonly "navy-300": "#C3C5CB";
122
- readonly "navy-400": "#9FA2AC";
123
- readonly "navy-500": "#707382";
120
+ readonly "navy-100": string;
121
+ readonly "navy-300": string;
122
+ readonly "navy-400": string;
123
+ readonly "navy-500": string;
124
124
  readonly "navy-800": "#10162F";
125
- readonly "navy-200": "#DBDCE0";
126
- readonly "navy-600": "#585C6D";
127
- readonly "navy-700": "#34394C";
125
+ readonly "navy-200": string;
126
+ readonly "navy-600": string;
127
+ readonly "navy-700": string;
128
128
  readonly "navy-900": "#0A0D1C";
129
129
  readonly "green-100": "#EAFDC6";
130
130
  readonly "green-0": "#F5FFE3";
package/dist/variables/colors.js CHANGED
@@ -12,6 +12,7 @@ import { rgba } from 'polished';
12
12
 
13
13
  var black = '#000000';
14
14
  var white = '#ffffff';
15
+ var navy = '#10162F';
15
16
  var effects = {
16
17
  shadow: {
17
18
  black: {
@@ -37,14 +38,14 @@ export var coreSwatches = {
37
38
  '800': '#1D2340'
38
39
  },
39
40
  navy: {
40
- '100': '#F3F3F5',
41
- '200': '#DBDCE0',
42
- '300': '#C3C5CB',
43
- '400': '#9FA2AC',
44
- '500': '#707382',
45
- '600': '#585C6D',
46
- '700': '#34394C',
47
- '800': '#10162F',
41
+ '100': rgba(navy, 0.04),
42
+ '200': rgba(navy, 0.12),
43
+ '300': rgba(navy, 0.28),
44
+ '400': rgba(navy, 0.45),
45
+ '500': rgba(navy, 0.63),
46
+ '600': rgba(navy, 0.75),
47
+ '700': rgba(navy, 0.86),
48
+ '800': navy,
48
49
  '900': '#0A0D1C'
49
50
  },
50
51
  green: {
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": "15.1.0",
4
+ "version": "16.0.0-alpha.2c40eb.0",
5
5
  "author": "Jake Hiller <jake@codecademy.com>",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -41,5 +41,5 @@
41
41
  "publishConfig": {
42
42
  "access": "public"
43
43
  },
44
- "gitHead": "096bef70df3663eecfc2527991680b9b7f24ae3e"
44
+ "gitHead": "511889a0ea31f4e8c1847c66934719eab6754b9d"
45
45
  }