@codecademy/gamut-styles 17.0.1-alpha.adb00a.0 → 17.0.1-alpha.e3934a.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/enterprise.d.ts +970 -0
  2. package/dist/themes/enterprise.js +39 -0
  3. package/dist/themes/index.d.ts +1 -0
  4. package/dist/themes/index.js +2 -1
  5. package/dist/variables/colors.d.ts +43 -0
  6. package/dist/variables/colors.js +38 -1
  7. package/dist/variables/timing.d.ts +0 -2
  8. package/dist/variables/timing.js +0 -2
  9. package/package.json +2 -2
package/dist/themes/enterprise.d.ts ADDED
@@ -0,0 +1,970 @@
1
+ export declare const enterpriseTheme: Record<"breakpoints", {
2
+ xs: string;
3
+ sm: string;
4
+ md: string;
5
+ lg: string;
6
+ xl: string;
7
+ }> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"breakpoints", {
8
+ xs: string;
9
+ sm: string;
10
+ md: string;
11
+ lg: string;
12
+ xl: string;
13
+ }> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"elements", Record<"elements", import("@codecademy/variance").KeyAsVariable<{
14
+ readonly headerHeight: {
15
+ readonly base: "4rem";
16
+ readonly md: "5rem";
17
+ };
18
+ readonly headerZ: 15;
19
+ }, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
20
+ xs: string;
21
+ sm: string;
22
+ md: string;
23
+ lg: string;
24
+ xl: string;
25
+ }> & import("@codecademy/variance/dist/createTheme/types").Merge<{
26
+ breakpoints: {
27
+ xs: string;
28
+ sm: string;
29
+ md: string;
30
+ lg: string;
31
+ xl: string;
32
+ };
33
+ borderRadii: {
34
+ none: string;
35
+ sm: string;
36
+ md: string;
37
+ lg: string;
38
+ xl: string;
39
+ full: string;
40
+ };
41
+ fontSize: {
42
+ readonly 64: string;
43
+ readonly 44: string;
44
+ readonly 34: string;
45
+ readonly 26: string;
46
+ readonly 22: string;
47
+ readonly 20: string;
48
+ readonly 18: string;
49
+ readonly 16: string;
50
+ readonly 14: string;
51
+ };
52
+ fontFamily: {
53
+ readonly accent: "\"Suisse\", \"Apercu\", -apple-system, BlinkMacSystemFont,\n\"Segoe UI\", \"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\",\n\"Helvetica Neue\", sans-serif";
54
+ readonly base: "\"Apercu\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
55
+ readonly monospace: "Monaco, Menlo, \"Ubuntu Mono\", \"Droid Sans Mono\", Consolas,\nmonospace";
56
+ readonly system: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\",\n\"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif";
57
+ };
58
+ lineHeight: {
59
+ readonly base: 1.5;
60
+ readonly spacedTitle: 1.3;
61
+ readonly title: 1.2;
62
+ };
63
+ fontWeight: {
64
+ readonly base: 400;
65
+ readonly title: 700;
66
+ readonly 700: 700;
67
+ readonly 400: 400;
68
+ };
69
+ spacing: {
70
+ readonly 0: 0;
71
+ readonly 4: string;
72
+ readonly 8: string;
73
+ readonly 12: string;
74
+ readonly 16: string;
75
+ readonly 24: string;
76
+ readonly 32: string;
77
+ readonly 40: string;
78
+ readonly 48: string;
79
+ readonly 64: string;
80
+ readonly 96: string;
81
+ };
82
+ elements: {
83
+ readonly headerHeight: {
84
+ readonly base: "4rem";
85
+ readonly md: "5rem";
86
+ };
87
+ readonly headerZ: 15;
88
+ };
89
+ } & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
90
+ readonly beige: "#FFF0E5";
91
+ readonly blue: "#1557FF";
92
+ readonly green: "#008A27";
93
+ readonly hyper: "#3A10E5";
94
+ readonly lightBlue: "#66C4FF";
95
+ readonly lightGreen: "#AEE938";
96
+ readonly navy: "#10162F";
97
+ readonly orange: "#FF8C00";
98
+ readonly paleBlue: "#F5FCFF";
99
+ readonly paleGreen: "#F5FFE3";
100
+ readonly palePink: "#FFF5FF";
101
+ readonly paleYellow: "#FFFAE5";
102
+ readonly pink: "#F966FF";
103
+ readonly paleRed: "#DC5879";
104
+ readonly red: "#E91C11";
105
+ readonly yellow: "#FFD300";
106
+ readonly black: "#000000";
107
+ readonly white: "#ffffff";
108
+ readonly "shadow-white-slight": string;
109
+ readonly "shadow-white-heavy": string;
110
+ readonly "shadow-black-slight": string;
111
+ readonly "shadow-black-heavy": string;
112
+ readonly "beige-100": "#FFF0E5";
113
+ readonly "blue-0": "#F5FCFF";
114
+ readonly "blue-100": "#D3F2FF";
115
+ readonly "blue-300": "#66C4FF";
116
+ readonly "blue-400": "#3388FF";
117
+ readonly "blue-500": "#1557FF";
118
+ readonly "blue-800": "#1D2340";
119
+ readonly "navy-100": string;
120
+ readonly "navy-300": string;
121
+ readonly "navy-400": string;
122
+ readonly "navy-500": string;
123
+ readonly "navy-800": "#10162F";
124
+ readonly "navy-200": string;
125
+ readonly "navy-600": string;
126
+ readonly "navy-700": string;
127
+ readonly "navy-900": "#0A0D1C";
128
+ readonly "green-0": "#F5FFE3";
129
+ readonly "green-100": "#EAFDC6";
130
+ readonly "green-400": "#AEE938";
131
+ readonly "green-700": "#008A27";
132
+ readonly "yellow-0": "#FFFAE5";
133
+ readonly "yellow-400": "#CCA900";
134
+ readonly "yellow-500": "#FFD300";
135
+ readonly "pink-0": "#FFF5FF";
136
+ readonly "pink-400": "#F966FF";
137
+ readonly "red-0": "#E85D7F";
138
+ readonly "red-100": "#DC5879";
139
+ readonly "red-500": "#E91C11";
140
+ readonly "red-600": "#BE1809";
141
+ readonly "orange-500": "#FF8C00";
142
+ readonly "hyper-400": "#5533FF";
143
+ readonly "hyper-500": "#3A10E5";
144
+ readonly "gray-100": "#F5F5F5";
145
+ readonly "gray-300": "#E0E0E0";
146
+ readonly "gray-800": "#616161";
147
+ readonly "gray-200": "#EEEEEE";
148
+ readonly "gray-600": "#9E9E9E";
149
+ readonly "gray-900": "#424242";
150
+ readonly "white-100": string;
151
+ readonly "white-300": string;
152
+ readonly "white-400": string;
153
+ readonly "white-500": string;
154
+ readonly "white-200": string;
155
+ readonly "white-600": string;
156
+ readonly "white-700": string;
157
+ }, "-">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
158
+ colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
159
+ text: {
160
+ _: "navy-800";
161
+ accent: "navy-900";
162
+ disabled: "navy-500";
163
+ secondary: "navy-600";
164
+ };
165
+ feedback: {
166
+ error: "red-600";
167
+ success: "green-700";
168
+ warning: "yellow";
169
+ };
170
+ background: {
171
+ _: "white";
172
+ contrast: "white";
173
+ current: "white";
174
+ primary: "beige";
175
+ selected: "navy-100";
176
+ disabled: "navy-200";
177
+ hover: "navy-200";
178
+ };
179
+ shadow: {
180
+ opaque: "shadow-white-heavy";
181
+ solid: "gray-200";
182
+ };
183
+ primary: {
184
+ _: "hyper-500";
185
+ hover: "hyper-400";
186
+ inverse: "yellow-500";
187
+ };
188
+ secondary: {
189
+ _: "navy-800";
190
+ hover: "navy-700";
191
+ };
192
+ danger: {
193
+ _: "red-500";
194
+ hover: "red-600";
195
+ };
196
+ interface: {
197
+ _: "hyper-500";
198
+ hover: "hyper-400";
199
+ };
200
+ } | {
201
+ text: {
202
+ _: "white";
203
+ accent: "beige";
204
+ disabled: "white-500";
205
+ secondary: "white-600";
206
+ };
207
+ feedback: {
208
+ error: "red-0";
209
+ success: "green-400";
210
+ warning: "yellow-0";
211
+ };
212
+ background: {
213
+ _: "navy-800";
214
+ contrast: "black";
215
+ current: "navy-800";
216
+ primary: "navy-900";
217
+ selected: "white-100";
218
+ disabled: "white-200";
219
+ hover: "white-200";
220
+ };
221
+ shadow: {
222
+ opaque: "shadow-black-heavy";
223
+ solid: "black";
224
+ };
225
+ primary: {
226
+ _: "yellow-500";
227
+ hover: "yellow-400";
228
+ inverse: "hyper-500";
229
+ };
230
+ secondary: {
231
+ _: "white";
232
+ hover: "white-700";
233
+ };
234
+ danger: {
235
+ _: "red-0";
236
+ hover: "red-100";
237
+ };
238
+ interface: {
239
+ _: "yellow-500";
240
+ hover: "yellow-400";
241
+ };
242
+ }, "-", "_">, "colors"> & import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
243
+ readonly beige: "#FFF0E5";
244
+ readonly blue: "#1557FF";
245
+ readonly green: "#008A27";
246
+ readonly hyper: "#3A10E5";
247
+ readonly lightBlue: "#66C4FF";
248
+ readonly lightGreen: "#AEE938";
249
+ readonly navy: "#10162F";
250
+ readonly orange: "#FF8C00";
251
+ readonly paleBlue: "#F5FCFF";
252
+ readonly paleGreen: "#F5FFE3";
253
+ readonly palePink: "#FFF5FF";
254
+ readonly paleYellow: "#FFFAE5";
255
+ readonly pink: "#F966FF";
256
+ readonly paleRed: "#DC5879";
257
+ readonly red: "#E91C11";
258
+ readonly yellow: "#FFD300";
259
+ readonly black: "#000000";
260
+ readonly white: "#ffffff";
261
+ readonly "shadow-white-slight": string;
262
+ readonly "shadow-white-heavy": string;
263
+ readonly "shadow-black-slight": string;
264
+ readonly "shadow-black-heavy": string;
265
+ readonly "beige-100": "#FFF0E5";
266
+ readonly "blue-0": "#F5FCFF";
267
+ readonly "blue-100": "#D3F2FF";
268
+ readonly "blue-300": "#66C4FF";
269
+ readonly "blue-400": "#3388FF";
270
+ readonly "blue-500": "#1557FF";
271
+ readonly "blue-800": "#1D2340";
272
+ readonly "navy-100": string;
273
+ readonly "navy-300": string;
274
+ readonly "navy-400": string;
275
+ readonly "navy-500": string;
276
+ readonly "navy-800": "#10162F";
277
+ readonly "navy-200": string;
278
+ readonly "navy-600": string;
279
+ readonly "navy-700": string;
280
+ readonly "navy-900": "#0A0D1C";
281
+ readonly "green-0": "#F5FFE3";
282
+ readonly "green-100": "#EAFDC6";
283
+ readonly "green-400": "#AEE938";
284
+ readonly "green-700": "#008A27";
285
+ readonly "yellow-0": "#FFFAE5";
286
+ readonly "yellow-400": "#CCA900";
287
+ readonly "yellow-500": "#FFD300";
288
+ readonly "pink-0": "#FFF5FF";
289
+ readonly "pink-400": "#F966FF";
290
+ readonly "red-0": "#E85D7F";
291
+ readonly "red-100": "#DC5879";
292
+ readonly "red-500": "#E91C11";
293
+ readonly "red-600": "#BE1809";
294
+ readonly "orange-500": "#FF8C00";
295
+ readonly "hyper-400": "#5533FF";
296
+ readonly "hyper-500": "#3A10E5";
297
+ readonly "gray-100": "#F5F5F5";
298
+ readonly "gray-300": "#E0E0E0";
299
+ readonly "gray-800": "#616161";
300
+ readonly "gray-200": "#EEEEEE";
301
+ readonly "gray-600": "#9E9E9E";
302
+ readonly "gray-900": "#424242";
303
+ readonly "white-100": string;
304
+ readonly "white-300": string;
305
+ readonly "white-400": string;
306
+ readonly "white-500": string;
307
+ readonly "white-200": string;
308
+ readonly "white-600": string;
309
+ readonly "white-700": string;
310
+ }, "-">, "color">;
311
+ modes: import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
312
+ light: import("@codecademy/variance").LiteralPaths<{
313
+ text: {
314
+ _: "navy-800";
315
+ accent: "navy-900";
316
+ disabled: "navy-500";
317
+ secondary: "navy-600";
318
+ };
319
+ feedback: {
320
+ error: "red-600";
321
+ success: "green-700";
322
+ warning: "yellow";
323
+ };
324
+ background: {
325
+ _: "white";
326
+ contrast: "white";
327
+ current: "white";
328
+ primary: "beige";
329
+ selected: "navy-100";
330
+ disabled: "navy-200";
331
+ hover: "navy-200";
332
+ };
333
+ shadow: {
334
+ opaque: "shadow-white-heavy";
335
+ solid: "gray-200";
336
+ };
337
+ primary: {
338
+ _: "hyper-500";
339
+ hover: "hyper-400";
340
+ inverse: "yellow-500";
341
+ };
342
+ secondary: {
343
+ _: "navy-800";
344
+ hover: "navy-700";
345
+ };
346
+ danger: {
347
+ _: "red-500";
348
+ hover: "red-600";
349
+ };
350
+ interface: {
351
+ _: "hyper-500";
352
+ hover: "hyper-400";
353
+ };
354
+ }, "-", "_">;
355
+ dark: import("@codecademy/variance").LiteralPaths<{
356
+ text: {
357
+ _: "white";
358
+ accent: "beige";
359
+ disabled: "white-500";
360
+ secondary: "white-600";
361
+ };
362
+ feedback: {
363
+ error: "red-0";
364
+ success: "green-400";
365
+ warning: "yellow-0";
366
+ };
367
+ background: {
368
+ _: "navy-800";
369
+ contrast: "black";
370
+ current: "navy-800";
371
+ primary: "navy-900";
372
+ selected: "white-100";
373
+ disabled: "white-200";
374
+ hover: "white-200";
375
+ };
376
+ shadow: {
377
+ opaque: "shadow-black-heavy";
378
+ solid: "black";
379
+ };
380
+ primary: {
381
+ _: "yellow-500";
382
+ hover: "yellow-400";
383
+ inverse: "hyper-500";
384
+ };
385
+ secondary: {
386
+ _: "white";
387
+ hover: "white-700";
388
+ };
389
+ danger: {
390
+ _: "red-0";
391
+ hover: "red-100";
392
+ };
393
+ interface: {
394
+ _: "yellow-500";
395
+ hover: "yellow-400";
396
+ };
397
+ }, "-", "_">;
398
+ }>;
399
+ mode: "light" | "dark";
400
+ _getColorValue: (color: import("@codecademy/variance").Path<{
401
+ readonly beige: "#FFF0E5";
402
+ readonly blue: "#1557FF";
403
+ readonly green: "#008A27";
404
+ readonly hyper: "#3A10E5";
405
+ readonly lightBlue: "#66C4FF";
406
+ readonly lightGreen: "#AEE938";
407
+ readonly navy: "#10162F";
408
+ readonly orange: "#FF8C00";
409
+ readonly paleBlue: "#F5FCFF";
410
+ readonly paleGreen: "#F5FFE3";
411
+ readonly palePink: "#FFF5FF";
412
+ readonly paleYellow: "#FFFAE5";
413
+ readonly pink: "#F966FF";
414
+ readonly paleRed: "#DC5879";
415
+ readonly red: "#E91C11";
416
+ readonly yellow: "#FFD300";
417
+ readonly black: "#000000";
418
+ readonly white: "#ffffff";
419
+ readonly "shadow-white-slight": string;
420
+ readonly "shadow-white-heavy": string;
421
+ readonly "shadow-black-slight": string;
422
+ readonly "shadow-black-heavy": string;
423
+ readonly "beige-100": "#FFF0E5";
424
+ readonly "blue-0": "#F5FCFF";
425
+ readonly "blue-100": "#D3F2FF";
426
+ readonly "blue-300": "#66C4FF";
427
+ readonly "blue-400": "#3388FF";
428
+ readonly "blue-500": "#1557FF";
429
+ readonly "blue-800": "#1D2340";
430
+ readonly "navy-100": string;
431
+ readonly "navy-300": string;
432
+ readonly "navy-400": string;
433
+ readonly "navy-500": string;
434
+ readonly "navy-800": "#10162F";
435
+ readonly "navy-200": string;
436
+ readonly "navy-600": string;
437
+ readonly "navy-700": string;
438
+ readonly "navy-900": "#0A0D1C";
439
+ readonly "green-0": "#F5FFE3";
440
+ readonly "green-100": "#EAFDC6";
441
+ readonly "green-400": "#AEE938";
442
+ readonly "green-700": "#008A27";
443
+ readonly "yellow-0": "#FFFAE5";
444
+ readonly "yellow-400": "#CCA900";
445
+ readonly "yellow-500": "#FFD300";
446
+ readonly "pink-0": "#FFF5FF";
447
+ readonly "pink-400": "#F966FF";
448
+ readonly "red-0": "#E85D7F";
449
+ readonly "red-100": "#DC5879";
450
+ readonly "red-500": "#E91C11";
451
+ readonly "red-600": "#BE1809";
452
+ readonly "orange-500": "#FF8C00";
453
+ readonly "hyper-400": "#5533FF";
454
+ readonly "hyper-500": "#3A10E5";
455
+ readonly "gray-100": "#F5F5F5";
456
+ readonly "gray-300": "#E0E0E0";
457
+ readonly "gray-800": "#616161";
458
+ readonly "gray-200": "#EEEEEE";
459
+ readonly "gray-600": "#9E9E9E";
460
+ readonly "gray-900": "#424242";
461
+ readonly "white-100": string;
462
+ readonly "white-300": string;
463
+ readonly "white-400": string;
464
+ readonly "white-500": string;
465
+ readonly "white-200": string;
466
+ readonly "white-600": string;
467
+ readonly "white-700": string;
468
+ }, "-">) => string;
469
+ }>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
470
+ 1: string;
471
+ 2: string;
472
+ }, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
473
+ readonly hotPink: "#e83e8c";
474
+ readonly enterpriseNavy: "#141c36";
475
+ readonly enterpriseBeige: "#ebe9df";
476
+ readonly enterpriseGreen: "#48ac2c";
477
+ readonly enterpriseYellow: "#ffc107";
478
+ readonly enterpriseRed: "#dc3545";
479
+ readonly "hotPink-100": "#e83e8c";
480
+ readonly "hotPink-400": "#c22c5a";
481
+ readonly "enterpriseNavy-100": "#212d56";
482
+ readonly "enterpriseNavy-400": "#141c36";
483
+ readonly "enterpriseBeige-100": "#F7F6F2";
484
+ readonly "enterpriseBeige-400": "#ebe9df";
485
+ readonly "enterpriseGreen-0": "#48ac2c";
486
+ readonly "enterpriseYellow-0": "#ffc107";
487
+ readonly "enterpriseRed-0": "#dc3545";
488
+ }, "-">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
489
+ colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
490
+ text: "enterpriseNavy-400";
491
+ primary: {
492
+ _: "hotPink-100";
493
+ hover: "hotPink-400";
494
+ };
495
+ secondary: {
496
+ _: "enterpriseNavy-400";
497
+ hover: "enterpriseNavy-100";
498
+ };
499
+ interface: {
500
+ _: "hotPink-100";
501
+ hover: "hotPink-400";
502
+ };
503
+ feedback: {
504
+ error: "enterpriseRed-0";
505
+ success: "enterpriseGreen-0";
506
+ warning: "enterpriseYellow-0";
507
+ };
508
+ } | {
509
+ background: {
510
+ _: "enterpriseNavy-400";
511
+ current: "navy-800";
512
+ primary: "navy-900";
513
+ selected: "navy-700";
514
+ disabled: "navy-500";
515
+ hover: "navy-600";
516
+ };
517
+ interface: {
518
+ _: "hotPink-100";
519
+ hover: "hotPink-400";
520
+ };
521
+ }, "-", "_">, "colors"> & import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
522
+ readonly beige: "#FFF0E5";
523
+ readonly blue: "#1557FF";
524
+ readonly green: "#008A27";
525
+ readonly hyper: "#3A10E5";
526
+ readonly lightBlue: "#66C4FF";
527
+ readonly lightGreen: "#AEE938";
528
+ readonly navy: "#10162F";
529
+ readonly orange: "#FF8C00";
530
+ readonly paleBlue: "#F5FCFF";
531
+ readonly paleGreen: "#F5FFE3";
532
+ readonly palePink: "#FFF5FF";
533
+ readonly paleYellow: "#FFFAE5";
534
+ readonly pink: "#F966FF";
535
+ readonly paleRed: "#DC5879";
536
+ readonly red: "#E91C11";
537
+ readonly yellow: "#FFD300";
538
+ readonly black: "#000000";
539
+ readonly white: "#ffffff";
540
+ readonly "shadow-white-slight": string;
541
+ readonly "shadow-white-heavy": string;
542
+ readonly "shadow-black-slight": string;
543
+ readonly "shadow-black-heavy": string;
544
+ readonly "beige-100": "#FFF0E5";
545
+ readonly "blue-0": "#F5FCFF";
546
+ readonly "blue-100": "#D3F2FF";
547
+ readonly "blue-300": "#66C4FF";
548
+ readonly "blue-400": "#3388FF";
549
+ readonly "blue-500": "#1557FF";
550
+ readonly "blue-800": "#1D2340";
551
+ readonly "navy-100": string;
552
+ readonly "navy-300": string;
553
+ readonly "navy-400": string;
554
+ readonly "navy-500": string;
555
+ readonly "navy-800": "#10162F";
556
+ readonly "navy-200": string;
557
+ readonly "navy-600": string;
558
+ readonly "navy-700": string;
559
+ readonly "navy-900": "#0A0D1C";
560
+ readonly "green-0": "#F5FFE3";
561
+ readonly "green-100": "#EAFDC6";
562
+ readonly "green-400": "#AEE938";
563
+ readonly "green-700": "#008A27";
564
+ readonly "yellow-0": "#FFFAE5";
565
+ readonly "yellow-400": "#CCA900";
566
+ readonly "yellow-500": "#FFD300";
567
+ readonly "pink-0": "#FFF5FF";
568
+ readonly "pink-400": "#F966FF";
569
+ readonly "red-0": "#E85D7F";
570
+ readonly "red-100": "#DC5879";
571
+ readonly "red-500": "#E91C11";
572
+ readonly "red-600": "#BE1809";
573
+ readonly "orange-500": "#FF8C00";
574
+ readonly "hyper-400": "#5533FF";
575
+ readonly "hyper-500": "#3A10E5";
576
+ readonly "gray-100": "#F5F5F5";
577
+ readonly "gray-300": "#E0E0E0";
578
+ readonly "gray-800": "#616161";
579
+ readonly "gray-200": "#EEEEEE";
580
+ readonly "gray-600": "#9E9E9E";
581
+ readonly "gray-900": "#424242";
582
+ readonly "white-100": string;
583
+ readonly "white-300": string;
584
+ readonly "white-400": string;
585
+ readonly "white-500": string;
586
+ readonly "white-200": string;
587
+ readonly "white-600": string;
588
+ readonly "white-700": string;
589
+ }, "-">, "color">, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
590
+ text: {
591
+ _: "navy-800";
592
+ accent: "navy-900";
593
+ disabled: "navy-500";
594
+ secondary: "navy-600";
595
+ };
596
+ feedback: {
597
+ error: "red-600";
598
+ success: "green-700";
599
+ warning: "yellow";
600
+ };
601
+ background: {
602
+ _: "white";
603
+ contrast: "white";
604
+ current: "white";
605
+ primary: "beige";
606
+ selected: "navy-100";
607
+ disabled: "navy-200";
608
+ hover: "navy-200";
609
+ };
610
+ shadow: {
611
+ opaque: "shadow-white-heavy";
612
+ solid: "gray-200";
613
+ };
614
+ primary: {
615
+ _: "hyper-500";
616
+ hover: "hyper-400";
617
+ inverse: "yellow-500";
618
+ };
619
+ secondary: {
620
+ _: "navy-800";
621
+ hover: "navy-700";
622
+ };
623
+ danger: {
624
+ _: "red-500";
625
+ hover: "red-600";
626
+ };
627
+ interface: {
628
+ _: "hyper-500";
629
+ hover: "hyper-400";
630
+ };
631
+ } | {
632
+ text: {
633
+ _: "white";
634
+ accent: "beige";
635
+ disabled: "white-500";
636
+ secondary: "white-600";
637
+ };
638
+ feedback: {
639
+ error: "red-0";
640
+ success: "green-400";
641
+ warning: "yellow-0";
642
+ };
643
+ background: {
644
+ _: "navy-800";
645
+ contrast: "black";
646
+ current: "navy-800";
647
+ primary: "navy-900";
648
+ selected: "white-100";
649
+ disabled: "white-200";
650
+ hover: "white-200";
651
+ };
652
+ shadow: {
653
+ opaque: "shadow-black-heavy";
654
+ solid: "black";
655
+ };
656
+ primary: {
657
+ _: "yellow-500";
658
+ hover: "yellow-400";
659
+ inverse: "hyper-500";
660
+ };
661
+ secondary: {
662
+ _: "white";
663
+ hover: "white-700";
664
+ };
665
+ danger: {
666
+ _: "red-0";
667
+ hover: "red-100";
668
+ };
669
+ interface: {
670
+ _: "yellow-500";
671
+ hover: "yellow-400";
672
+ };
673
+ }, "-", "_">, "colors"> & import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
674
+ readonly beige: "#FFF0E5";
675
+ readonly blue: "#1557FF";
676
+ readonly green: "#008A27";
677
+ readonly hyper: "#3A10E5";
678
+ readonly lightBlue: "#66C4FF";
679
+ readonly lightGreen: "#AEE938";
680
+ readonly navy: "#10162F";
681
+ readonly orange: "#FF8C00";
682
+ readonly paleBlue: "#F5FCFF";
683
+ readonly paleGreen: "#F5FFE3";
684
+ readonly palePink: "#FFF5FF";
685
+ readonly paleYellow: "#FFFAE5";
686
+ readonly pink: "#F966FF";
687
+ readonly paleRed: "#DC5879";
688
+ readonly red: "#E91C11";
689
+ readonly yellow: "#FFD300";
690
+ readonly black: "#000000";
691
+ readonly white: "#ffffff";
692
+ readonly "shadow-white-slight": string;
693
+ readonly "shadow-white-heavy": string;
694
+ readonly "shadow-black-slight": string;
695
+ readonly "shadow-black-heavy": string;
696
+ readonly "beige-100": "#FFF0E5";
697
+ readonly "blue-0": "#F5FCFF";
698
+ readonly "blue-100": "#D3F2FF";
699
+ readonly "blue-300": "#66C4FF";
700
+ readonly "blue-400": "#3388FF";
701
+ readonly "blue-500": "#1557FF";
702
+ readonly "blue-800": "#1D2340";
703
+ readonly "navy-100": string;
704
+ readonly "navy-300": string;
705
+ readonly "navy-400": string;
706
+ readonly "navy-500": string;
707
+ readonly "navy-800": "#10162F";
708
+ readonly "navy-200": string;
709
+ readonly "navy-600": string;
710
+ readonly "navy-700": string;
711
+ readonly "navy-900": "#0A0D1C";
712
+ readonly "green-0": "#F5FFE3";
713
+ readonly "green-100": "#EAFDC6";
714
+ readonly "green-400": "#AEE938";
715
+ readonly "green-700": "#008A27";
716
+ readonly "yellow-0": "#FFFAE5";
717
+ readonly "yellow-400": "#CCA900";
718
+ readonly "yellow-500": "#FFD300";
719
+ readonly "pink-0": "#FFF5FF";
720
+ readonly "pink-400": "#F966FF";
721
+ readonly "red-0": "#E85D7F";
722
+ readonly "red-100": "#DC5879";
723
+ readonly "red-500": "#E91C11";
724
+ readonly "red-600": "#BE1809";
725
+ readonly "orange-500": "#FF8C00";
726
+ readonly "hyper-400": "#5533FF";
727
+ readonly "hyper-500": "#3A10E5";
728
+ readonly "gray-100": "#F5F5F5";
729
+ readonly "gray-300": "#E0E0E0";
730
+ readonly "gray-800": "#616161";
731
+ readonly "gray-200": "#EEEEEE";
732
+ readonly "gray-600": "#9E9E9E";
733
+ readonly "gray-900": "#424242";
734
+ readonly "white-100": string;
735
+ readonly "white-300": string;
736
+ readonly "white-400": string;
737
+ readonly "white-500": string;
738
+ readonly "white-200": string;
739
+ readonly "white-600": string;
740
+ readonly "white-700": string;
741
+ }, "-">, "color">>, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
742
+ readonly hotPink: "#e83e8c";
743
+ readonly enterpriseNavy: "#141c36";
744
+ readonly enterpriseBeige: "#ebe9df";
745
+ readonly enterpriseGreen: "#48ac2c";
746
+ readonly enterpriseYellow: "#ffc107";
747
+ readonly enterpriseRed: "#dc3545";
748
+ readonly "hotPink-100": "#e83e8c";
749
+ readonly "hotPink-400": "#c22c5a";
750
+ readonly "enterpriseNavy-100": "#212d56";
751
+ readonly "enterpriseNavy-400": "#141c36";
752
+ readonly "enterpriseBeige-100": "#F7F6F2";
753
+ readonly "enterpriseBeige-400": "#ebe9df";
754
+ readonly "enterpriseGreen-0": "#48ac2c";
755
+ readonly "enterpriseYellow-0": "#ffc107";
756
+ readonly "enterpriseRed-0": "#dc3545";
757
+ }, "-">, "color">>;
758
+ modes: import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
759
+ light: import("@codecademy/variance").LiteralPaths<{
760
+ text: {
761
+ _: "navy-800";
762
+ accent: "navy-900";
763
+ disabled: "navy-500";
764
+ secondary: "navy-600";
765
+ };
766
+ feedback: {
767
+ error: "red-600";
768
+ success: "green-700";
769
+ warning: "yellow";
770
+ };
771
+ background: {
772
+ _: "white";
773
+ contrast: "white";
774
+ current: "white";
775
+ primary: "beige";
776
+ selected: "navy-100";
777
+ disabled: "navy-200";
778
+ hover: "navy-200";
779
+ };
780
+ shadow: {
781
+ opaque: "shadow-white-heavy";
782
+ solid: "gray-200";
783
+ };
784
+ primary: {
785
+ _: "hyper-500";
786
+ hover: "hyper-400";
787
+ inverse: "yellow-500";
788
+ };
789
+ secondary: {
790
+ _: "navy-800";
791
+ hover: "navy-700";
792
+ };
793
+ danger: {
794
+ _: "red-500";
795
+ hover: "red-600";
796
+ };
797
+ interface: {
798
+ _: "hyper-500";
799
+ hover: "hyper-400";
800
+ };
801
+ }, "-", "_">;
802
+ dark: import("@codecademy/variance").LiteralPaths<{
803
+ text: {
804
+ _: "white";
805
+ accent: "beige";
806
+ disabled: "white-500";
807
+ secondary: "white-600";
808
+ };
809
+ feedback: {
810
+ error: "red-0";
811
+ success: "green-400";
812
+ warning: "yellow-0";
813
+ };
814
+ background: {
815
+ _: "navy-800";
816
+ contrast: "black";
817
+ current: "navy-800";
818
+ primary: "navy-900";
819
+ selected: "white-100";
820
+ disabled: "white-200";
821
+ hover: "white-200";
822
+ };
823
+ shadow: {
824
+ opaque: "shadow-black-heavy";
825
+ solid: "black";
826
+ };
827
+ primary: {
828
+ _: "yellow-500";
829
+ hover: "yellow-400";
830
+ inverse: "hyper-500";
831
+ };
832
+ secondary: {
833
+ _: "white";
834
+ hover: "white-700";
835
+ };
836
+ danger: {
837
+ _: "red-0";
838
+ hover: "red-100";
839
+ };
840
+ interface: {
841
+ _: "yellow-500";
842
+ hover: "yellow-400";
843
+ };
844
+ }, "-", "_">;
845
+ }>, {
846
+ light: import("@codecademy/variance").LiteralPaths<{
847
+ text: "enterpriseNavy-400";
848
+ primary: {
849
+ _: "hotPink-100";
850
+ hover: "hotPink-400";
851
+ };
852
+ secondary: {
853
+ _: "enterpriseNavy-400";
854
+ hover: "enterpriseNavy-100";
855
+ };
856
+ interface: {
857
+ _: "hotPink-100";
858
+ hover: "hotPink-400";
859
+ };
860
+ feedback: {
861
+ error: "enterpriseRed-0";
862
+ success: "enterpriseGreen-0";
863
+ warning: "enterpriseYellow-0";
864
+ };
865
+ }, "-", "_">;
866
+ dark: import("@codecademy/variance").LiteralPaths<{
867
+ background: {
868
+ _: "enterpriseNavy-400";
869
+ current: "navy-800";
870
+ primary: "navy-900";
871
+ selected: "navy-700";
872
+ disabled: "navy-500";
873
+ hover: "navy-600";
874
+ };
875
+ interface: {
876
+ _: "hotPink-100";
877
+ hover: "hotPink-400";
878
+ };
879
+ }, "-", "_">;
880
+ }>;
881
+ mode: "light" | "dark";
882
+ _getColorValue: (color: "text" | import("@codecademy/variance").Path<{
883
+ readonly beige: "#FFF0E5";
884
+ readonly blue: "#1557FF";
885
+ readonly green: "#008A27";
886
+ readonly hyper: "#3A10E5";
887
+ readonly lightBlue: "#66C4FF";
888
+ readonly lightGreen: "#AEE938";
889
+ readonly navy: "#10162F";
890
+ readonly orange: "#FF8C00";
891
+ readonly paleBlue: "#F5FCFF";
892
+ readonly paleGreen: "#F5FFE3";
893
+ readonly palePink: "#FFF5FF";
894
+ readonly paleYellow: "#FFFAE5";
895
+ readonly pink: "#F966FF";
896
+ readonly paleRed: "#DC5879";
897
+ readonly red: "#E91C11";
898
+ readonly yellow: "#FFD300";
899
+ readonly black: "#000000";
900
+ readonly white: "#ffffff";
901
+ readonly "shadow-white-slight": string;
902
+ readonly "shadow-white-heavy": string;
903
+ readonly "shadow-black-slight": string;
904
+ readonly "shadow-black-heavy": string;
905
+ readonly "beige-100": "#FFF0E5";
906
+ readonly "blue-0": "#F5FCFF";
907
+ readonly "blue-100": "#D3F2FF";
908
+ readonly "blue-300": "#66C4FF";
909
+ readonly "blue-400": "#3388FF";
910
+ readonly "blue-500": "#1557FF";
911
+ readonly "blue-800": "#1D2340";
912
+ readonly "navy-100": string;
913
+ readonly "navy-300": string;
914
+ readonly "navy-400": string;
915
+ readonly "navy-500": string;
916
+ readonly "navy-800": "#10162F";
917
+ readonly "navy-200": string;
918
+ readonly "navy-600": string;
919
+ readonly "navy-700": string;
920
+ readonly "navy-900": "#0A0D1C";
921
+ readonly "green-0": "#F5FFE3";
922
+ readonly "green-100": "#EAFDC6";
923
+ readonly "green-400": "#AEE938";
924
+ readonly "green-700": "#008A27";
925
+ readonly "yellow-0": "#FFFAE5";
926
+ readonly "yellow-400": "#CCA900";
927
+ readonly "yellow-500": "#FFD300";
928
+ readonly "pink-0": "#FFF5FF";
929
+ readonly "pink-400": "#F966FF";
930
+ readonly "red-0": "#E85D7F";
931
+ readonly "red-100": "#DC5879";
932
+ readonly "red-500": "#E91C11";
933
+ readonly "red-600": "#BE1809";
934
+ readonly "orange-500": "#FF8C00";
935
+ readonly "hyper-400": "#5533FF";
936
+ readonly "hyper-500": "#3A10E5";
937
+ readonly "gray-100": "#F5F5F5";
938
+ readonly "gray-300": "#E0E0E0";
939
+ readonly "gray-800": "#616161";
940
+ readonly "gray-200": "#EEEEEE";
941
+ readonly "gray-600": "#9E9E9E";
942
+ readonly "gray-900": "#424242";
943
+ readonly "white-100": string;
944
+ readonly "white-300": string;
945
+ readonly "white-400": string;
946
+ readonly "white-500": string;
947
+ readonly "white-200": string;
948
+ readonly "white-600": string;
949
+ readonly "white-700": string;
950
+ }, "-"> | "secondary" | "background" | "primary" | "danger" | "interface" | "text-disabled" | "text-accent" | "text-secondary" | "shadow-opaque" | "shadow-solid" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "danger-hover" | "interface-hover" | import("@codecademy/variance").Path<{
951
+ readonly hotPink: "#e83e8c";
952
+ readonly enterpriseNavy: "#141c36";
953
+ readonly enterpriseBeige: "#ebe9df";
954
+ readonly enterpriseGreen: "#48ac2c";
955
+ readonly enterpriseYellow: "#ffc107";
956
+ readonly enterpriseRed: "#dc3545";
957
+ readonly "hotPink-100": "#e83e8c";
958
+ readonly "hotPink-400": "#c22c5a";
959
+ readonly "enterpriseNavy-100": "#212d56";
960
+ readonly "enterpriseNavy-400": "#141c36";
961
+ readonly "enterpriseBeige-100": "#F7F6F2";
962
+ readonly "enterpriseBeige-400": "#ebe9df";
963
+ readonly "enterpriseGreen-0": "#48ac2c";
964
+ readonly "enterpriseYellow-0": "#ffc107";
965
+ readonly "enterpriseRed-0": "#dc3545";
966
+ }, "-">) => string;
967
+ }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
968
+ export type EnterpriseThemeShape = typeof enterpriseTheme;
969
+ export interface EnterpriseTheme extends EnterpriseThemeShape {
970
+ }
package/dist/themes/enterprise.js ADDED
@@ -0,0 +1,39 @@
1
+ import { createTheme } from '@codecademy/variance';
2
+ import { enterprisePalette } from '../variables';
3
+ import { coreTheme } from './core';
4
+ export var enterpriseTheme = createTheme(coreTheme).addColors(enterprisePalette).addColorModes('light', {
5
+ light: {
6
+ text: 'enterpriseNavy-400',
7
+ primary: {
8
+ _: 'hotPink-100',
9
+ hover: 'hotPink-400'
10
+ },
11
+ secondary: {
12
+ _: 'enterpriseNavy-400',
13
+ hover: 'enterpriseNavy-100'
14
+ },
15
+ interface: {
16
+ _: 'hotPink-100',
17
+ hover: 'hotPink-400'
18
+ },
19
+ feedback: {
20
+ error: 'enterpriseRed-0',
21
+ success: 'enterpriseGreen-0',
22
+ warning: 'enterpriseYellow-0'
23
+ }
24
+ },
25
+ dark: {
26
+ background: {
27
+ _: 'enterpriseNavy-400',
28
+ current: 'navy-800',
29
+ primary: 'navy-900',
30
+ selected: 'navy-700',
31
+ disabled: 'navy-500',
32
+ hover: 'navy-600'
33
+ },
34
+ interface: {
35
+ _: 'hotPink-100',
36
+ hover: 'hotPink-400'
37
+ }
38
+ }
39
+ }).build();
package/dist/themes/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export * from './core';
2
2
  export * from './platform';
3
3
  export * from './admin';
4
+ export * from './enterprise';
package/dist/themes/index.js CHANGED
@@ -1,3 +1,4 @@
1
1
  export * from './core';
2
2
  export * from './platform';
3
- export * from './admin';
3
+ export * from './admin';
4
+ export * from './enterprise';
package/dist/variables/colors.d.ts CHANGED
@@ -191,3 +191,46 @@ export declare const platformPalette: {
191
191
  readonly "teal-500": "#027E97";
192
192
  readonly "purple-300": "#B3CCFF";
193
193
  };
194
+ /**
195
+ * Enterprise Colors
196
+ */
197
+ export declare const enterpriseSwatches: {
198
+ readonly hotPink: {
199
+ readonly '100': "#e83e8c";
200
+ readonly '400': "#c22c5a";
201
+ };
202
+ readonly enterpriseNavy: {
203
+ readonly '100': "#212d56";
204
+ readonly '400': "#141c36";
205
+ };
206
+ readonly enterpriseBeige: {
207
+ readonly '100': "#F7F6F2";
208
+ readonly '400': "#ebe9df";
209
+ };
210
+ readonly enterpriseGreen: {
211
+ readonly '0': "#48ac2c";
212
+ };
213
+ readonly enterpriseYellow: {
214
+ readonly '0': "#ffc107";
215
+ };
216
+ readonly enterpriseRed: {
217
+ readonly '0': "#dc3545";
218
+ };
219
+ };
220
+ export declare const enterprisePalette: {
221
+ readonly hotPink: "#e83e8c";
222
+ readonly enterpriseNavy: "#141c36";
223
+ readonly enterpriseBeige: "#ebe9df";
224
+ readonly enterpriseGreen: "#48ac2c";
225
+ readonly enterpriseYellow: "#ffc107";
226
+ readonly enterpriseRed: "#dc3545";
227
+ readonly "hotPink-100": "#e83e8c";
228
+ readonly "hotPink-400": "#c22c5a";
229
+ readonly "enterpriseNavy-100": "#212d56";
230
+ readonly "enterpriseNavy-400": "#141c36";
231
+ readonly "enterpriseBeige-100": "#F7F6F2";
232
+ readonly "enterpriseBeige-400": "#ebe9df";
233
+ readonly "enterpriseGreen-0": "#48ac2c";
234
+ readonly "enterpriseYellow-0": "#ffc107";
235
+ readonly "enterpriseRed-0": "#dc3545";
236
+ };
package/dist/variables/colors.js CHANGED
@@ -146,4 +146,41 @@ var truePlatformColors = {
146
146
  teal: platformSwatches.teal[500],
147
147
  purple: platformSwatches.purple[300]
148
148
  };
149
- export var platformPalette = _objectSpread(_objectSpread({}, flattenScale(platformSwatches)), truePlatformColors);
149
+ export var platformPalette = _objectSpread(_objectSpread({}, flattenScale(platformSwatches)), truePlatformColors);
150
+
151
+ /**
152
+ * Enterprise Colors
153
+ */
154
+
155
+ export var enterpriseSwatches = {
156
+ hotPink: {
157
+ '100': '#e83e8c',
158
+ '400': '#c22c5a'
159
+ },
160
+ enterpriseNavy: {
161
+ '100': '#212d56',
162
+ '400': '#141c36'
163
+ },
164
+ enterpriseBeige: {
165
+ '100': '#F7F6F2',
166
+ '400': '#ebe9df'
167
+ },
168
+ enterpriseGreen: {
169
+ '0': '#48ac2c'
170
+ },
171
+ enterpriseYellow: {
172
+ '0': '#ffc107'
173
+ },
174
+ enterpriseRed: {
175
+ '0': '#dc3545'
176
+ }
177
+ };
178
+ var trueEnterpriseColors = {
179
+ hotPink: enterpriseSwatches.hotPink[100],
180
+ enterpriseNavy: enterpriseSwatches.enterpriseNavy[400],
181
+ enterpriseBeige: enterpriseSwatches.enterpriseBeige[400],
182
+ enterpriseGreen: enterpriseSwatches.enterpriseGreen[0],
183
+ enterpriseYellow: enterpriseSwatches.enterpriseYellow[0],
184
+ enterpriseRed: enterpriseSwatches.enterpriseRed[0]
185
+ };
186
+ export var enterprisePalette = _objectSpread(_objectSpread({}, flattenScale(enterpriseSwatches)), trueEnterpriseColors);
package/dist/variables/timing.d.ts CHANGED
@@ -1,12 +1,10 @@
1
1
  export declare const timingValues: {
2
2
  fast: number;
3
3
  medium: number;
4
- base: number;
5
4
  slow: number;
6
5
  };
7
6
  export declare const timing: {
8
7
  fast: string;
9
8
  medium: string;
10
- base: string;
11
9
  slow: string;
12
10
  };
package/dist/variables/timing.js CHANGED
@@ -1,12 +1,10 @@
1
1
  export var timingValues = {
2
2
  fast: 150,
3
3
  medium: 200,
4
- base: 300,
5
4
  slow: 350
6
5
  };
7
6
  export var timing = {
8
7
  fast: "".concat(timingValues.fast, "ms"),
9
8
  medium: "".concat(timingValues.medium, "ms"),
10
- base: "".concat(timingValues.base, "ms"),
11
9
  slow: "".concat(timingValues.slow, "ms")
12
10
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@codecademy/gamut-styles",
3
3
  "description": "Styleguide & Component library for codecademy.com",
4
- "version": "17.0.1-alpha.adb00a.0",
4
+ "version": "17.0.1-alpha.e3934a.0",
5
5
  "author": "Jake Hiller <jake@codecademy.com>",
6
6
  "dependencies": {
7
7
  "@codecademy/variance": "0.21.3",
@@ -34,5 +34,5 @@
34
34
  "scripts": {
35
35
  "build": "nx build @codecademy/gamut-styles"
36
36
  },
37
- "gitHead": "8057339bdb9bc9f1ab6ce9c745537eddd0b72bcc"
37
+ "gitHead": "0b8b53a13fe81ba8bd99f1d399ec6514b883f2ae"
38
38
  }