@codecademy/gamut-styles 17.4.0 → 17.4.1-alpha.5c010c.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 (8) hide show
  1. package/dist/themes/enterprise.d.ts +1050 -0
  2. package/dist/themes/enterprise.js +68 -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 +100 -0
  6. package/dist/variables/colors.js +74 -0
  7. package/dist/variables/deprecated-colors.d.ts +1 -1
  8. package/package.json +2 -2
package/dist/themes/enterprise.d.ts ADDED
@@ -0,0 +1,1050 @@
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
+ border: {
201
+ primary: "navy-800";
202
+ secondary: "navy-600";
203
+ tertiary: "navy-300";
204
+ disabled: "navy-500";
205
+ };
206
+ } | {
207
+ text: {
208
+ _: "white";
209
+ accent: "beige";
210
+ disabled: "white-500";
211
+ secondary: "white-600";
212
+ };
213
+ feedback: {
214
+ error: "red-0";
215
+ success: "green-400";
216
+ warning: "yellow-0";
217
+ };
218
+ background: {
219
+ _: "navy-800";
220
+ contrast: "black";
221
+ current: "navy-800";
222
+ primary: "navy-900";
223
+ selected: "white-100";
224
+ disabled: "white-200";
225
+ hover: "white-200";
226
+ };
227
+ shadow: {
228
+ opaque: "shadow-black-heavy";
229
+ solid: "black";
230
+ };
231
+ primary: {
232
+ _: "yellow-500";
233
+ hover: "yellow-400";
234
+ inverse: "hyper-500";
235
+ };
236
+ secondary: {
237
+ _: "white";
238
+ hover: "white-700";
239
+ };
240
+ danger: {
241
+ _: "red-0";
242
+ hover: "red-100";
243
+ };
244
+ interface: {
245
+ _: "yellow-500";
246
+ hover: "yellow-400";
247
+ };
248
+ border: {
249
+ primary: "white";
250
+ secondary: "white-600";
251
+ tertiary: "white-300";
252
+ disabled: "white-500";
253
+ };
254
+ }, "-", "_">, "colors"> & import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
255
+ readonly beige: "#FFF0E5";
256
+ readonly blue: "#1557FF";
257
+ readonly green: "#008A27";
258
+ readonly hyper: "#3A10E5";
259
+ readonly lightBlue: "#66C4FF";
260
+ readonly lightGreen: "#AEE938";
261
+ readonly navy: "#10162F";
262
+ readonly orange: "#FF8C00";
263
+ readonly paleBlue: "#F5FCFF";
264
+ readonly paleGreen: "#F5FFE3";
265
+ readonly palePink: "#FFF5FF";
266
+ readonly paleYellow: "#FFFAE5";
267
+ readonly pink: "#F966FF";
268
+ readonly paleRed: "#DC5879";
269
+ readonly red: "#E91C11";
270
+ readonly yellow: "#FFD300";
271
+ readonly black: "#000000";
272
+ readonly white: "#ffffff";
273
+ readonly "shadow-white-slight": string;
274
+ readonly "shadow-white-heavy": string;
275
+ readonly "shadow-black-slight": string;
276
+ readonly "shadow-black-heavy": string;
277
+ readonly "beige-100": "#FFF0E5";
278
+ readonly "blue-0": "#F5FCFF";
279
+ readonly "blue-100": "#D3F2FF";
280
+ readonly "blue-300": "#66C4FF";
281
+ readonly "blue-400": "#3388FF";
282
+ readonly "blue-500": "#1557FF";
283
+ readonly "blue-800": "#1D2340";
284
+ readonly "navy-100": string;
285
+ readonly "navy-300": string;
286
+ readonly "navy-400": string;
287
+ readonly "navy-500": string;
288
+ readonly "navy-800": "#10162F";
289
+ readonly "navy-200": string;
290
+ readonly "navy-600": string;
291
+ readonly "navy-700": string;
292
+ readonly "navy-900": "#0A0D1C";
293
+ readonly "green-0": "#F5FFE3";
294
+ readonly "green-100": "#EAFDC6";
295
+ readonly "green-400": "#AEE938";
296
+ readonly "green-700": "#008A27";
297
+ readonly "yellow-0": "#FFFAE5";
298
+ readonly "yellow-400": "#CCA900";
299
+ readonly "yellow-500": "#FFD300";
300
+ readonly "pink-0": "#FFF5FF";
301
+ readonly "pink-400": "#F966FF";
302
+ readonly "red-0": "#E85D7F";
303
+ readonly "red-100": "#DC5879";
304
+ readonly "red-500": "#E91C11";
305
+ readonly "red-600": "#BE1809";
306
+ readonly "orange-500": "#FF8C00";
307
+ readonly "hyper-400": "#5533FF";
308
+ readonly "hyper-500": "#3A10E5";
309
+ readonly "gray-100": "#F5F5F5";
310
+ readonly "gray-300": "#E0E0E0";
311
+ readonly "gray-800": "#616161";
312
+ readonly "gray-200": "#EEEEEE";
313
+ readonly "gray-600": "#9E9E9E";
314
+ readonly "gray-900": "#424242";
315
+ readonly "white-100": string;
316
+ readonly "white-300": string;
317
+ readonly "white-400": string;
318
+ readonly "white-500": string;
319
+ readonly "white-200": string;
320
+ readonly "white-600": string;
321
+ readonly "white-700": string;
322
+ }, "-">, "color">;
323
+ modes: import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
324
+ light: import("@codecademy/variance").LiteralPaths<{
325
+ text: {
326
+ _: "navy-800";
327
+ accent: "navy-900";
328
+ disabled: "navy-500";
329
+ secondary: "navy-600";
330
+ };
331
+ feedback: {
332
+ error: "red-600";
333
+ success: "green-700";
334
+ warning: "yellow";
335
+ };
336
+ background: {
337
+ _: "white";
338
+ contrast: "white";
339
+ current: "white";
340
+ primary: "beige";
341
+ selected: "navy-100";
342
+ disabled: "navy-200";
343
+ hover: "navy-200";
344
+ };
345
+ shadow: {
346
+ opaque: "shadow-white-heavy";
347
+ solid: "gray-200";
348
+ };
349
+ primary: {
350
+ _: "hyper-500";
351
+ hover: "hyper-400";
352
+ inverse: "yellow-500";
353
+ };
354
+ secondary: {
355
+ _: "navy-800";
356
+ hover: "navy-700";
357
+ };
358
+ danger: {
359
+ _: "red-500";
360
+ hover: "red-600";
361
+ };
362
+ interface: {
363
+ _: "hyper-500";
364
+ hover: "hyper-400";
365
+ };
366
+ border: {
367
+ primary: "navy-800";
368
+ secondary: "navy-600";
369
+ tertiary: "navy-300";
370
+ disabled: "navy-500";
371
+ };
372
+ }, "-", "_">;
373
+ dark: import("@codecademy/variance").LiteralPaths<{
374
+ text: {
375
+ _: "white";
376
+ accent: "beige";
377
+ disabled: "white-500";
378
+ secondary: "white-600";
379
+ };
380
+ feedback: {
381
+ error: "red-0";
382
+ success: "green-400";
383
+ warning: "yellow-0";
384
+ };
385
+ background: {
386
+ _: "navy-800";
387
+ contrast: "black";
388
+ current: "navy-800";
389
+ primary: "navy-900";
390
+ selected: "white-100";
391
+ disabled: "white-200";
392
+ hover: "white-200";
393
+ };
394
+ shadow: {
395
+ opaque: "shadow-black-heavy";
396
+ solid: "black";
397
+ };
398
+ primary: {
399
+ _: "yellow-500";
400
+ hover: "yellow-400";
401
+ inverse: "hyper-500";
402
+ };
403
+ secondary: {
404
+ _: "white";
405
+ hover: "white-700";
406
+ };
407
+ danger: {
408
+ _: "red-0";
409
+ hover: "red-100";
410
+ };
411
+ interface: {
412
+ _: "yellow-500";
413
+ hover: "yellow-400";
414
+ };
415
+ border: {
416
+ primary: "white";
417
+ secondary: "white-600";
418
+ tertiary: "white-300";
419
+ disabled: "white-500";
420
+ };
421
+ }, "-", "_">;
422
+ }>;
423
+ mode: "light" | "dark";
424
+ _getColorValue: (color: import("@codecademy/variance").Path<{
425
+ readonly beige: "#FFF0E5";
426
+ readonly blue: "#1557FF";
427
+ readonly green: "#008A27";
428
+ readonly hyper: "#3A10E5";
429
+ readonly lightBlue: "#66C4FF";
430
+ readonly lightGreen: "#AEE938";
431
+ readonly navy: "#10162F";
432
+ readonly orange: "#FF8C00";
433
+ readonly paleBlue: "#F5FCFF";
434
+ readonly paleGreen: "#F5FFE3";
435
+ readonly palePink: "#FFF5FF";
436
+ readonly paleYellow: "#FFFAE5";
437
+ readonly pink: "#F966FF";
438
+ readonly paleRed: "#DC5879";
439
+ readonly red: "#E91C11";
440
+ readonly yellow: "#FFD300";
441
+ readonly black: "#000000";
442
+ readonly white: "#ffffff";
443
+ readonly "shadow-white-slight": string;
444
+ readonly "shadow-white-heavy": string;
445
+ readonly "shadow-black-slight": string;
446
+ readonly "shadow-black-heavy": string;
447
+ readonly "beige-100": "#FFF0E5";
448
+ readonly "blue-0": "#F5FCFF";
449
+ readonly "blue-100": "#D3F2FF";
450
+ readonly "blue-300": "#66C4FF";
451
+ readonly "blue-400": "#3388FF";
452
+ readonly "blue-500": "#1557FF";
453
+ readonly "blue-800": "#1D2340";
454
+ readonly "navy-100": string;
455
+ readonly "navy-300": string;
456
+ readonly "navy-400": string;
457
+ readonly "navy-500": string;
458
+ readonly "navy-800": "#10162F";
459
+ readonly "navy-200": string;
460
+ readonly "navy-600": string;
461
+ readonly "navy-700": string;
462
+ readonly "navy-900": "#0A0D1C";
463
+ readonly "green-0": "#F5FFE3";
464
+ readonly "green-100": "#EAFDC6";
465
+ readonly "green-400": "#AEE938";
466
+ readonly "green-700": "#008A27";
467
+ readonly "yellow-0": "#FFFAE5";
468
+ readonly "yellow-400": "#CCA900";
469
+ readonly "yellow-500": "#FFD300";
470
+ readonly "pink-0": "#FFF5FF";
471
+ readonly "pink-400": "#F966FF";
472
+ readonly "red-0": "#E85D7F";
473
+ readonly "red-100": "#DC5879";
474
+ readonly "red-500": "#E91C11";
475
+ readonly "red-600": "#BE1809";
476
+ readonly "orange-500": "#FF8C00";
477
+ readonly "hyper-400": "#5533FF";
478
+ readonly "hyper-500": "#3A10E5";
479
+ readonly "gray-100": "#F5F5F5";
480
+ readonly "gray-300": "#E0E0E0";
481
+ readonly "gray-800": "#616161";
482
+ readonly "gray-200": "#EEEEEE";
483
+ readonly "gray-600": "#9E9E9E";
484
+ readonly "gray-900": "#424242";
485
+ readonly "white-100": string;
486
+ readonly "white-300": string;
487
+ readonly "white-400": string;
488
+ readonly "white-500": string;
489
+ readonly "white-200": string;
490
+ readonly "white-600": string;
491
+ readonly "white-700": string;
492
+ }, "-">) => string;
493
+ }>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
494
+ 1: string;
495
+ 2: string;
496
+ }, "-">>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
497
+ readonly mulberryPink: "#CD397E";
498
+ readonly blue: "#3498DF";
499
+ readonly green: "#42811A";
500
+ readonly skyBlue: "#21B9E8";
501
+ readonly yellow: "#E8C427";
502
+ readonly red: "#BE3636";
503
+ readonly gray: "#6B7B85";
504
+ readonly black: "#000C14";
505
+ readonly "blue-100": "#E0F2FE";
506
+ readonly "blue-300": "#78BAE9";
507
+ readonly "blue-400": "#3498DF";
508
+ readonly "blue-500": "#0073C4";
509
+ readonly "blue-800": "#002640";
510
+ readonly "green-0": "#EBF6E4";
511
+ readonly "green-400": "#6EAB49";
512
+ readonly "green-700": "#1D4C12";
513
+ readonly "yellow-0": "#FEFAE8";
514
+ readonly "yellow-500": "#E8C427";
515
+ readonly "pink-400": "#DF659E";
516
+ readonly "red-0": "#FBE8E8";
517
+ readonly "red-100": "#F4C7C7";
518
+ readonly "red-500": "#BE3636";
519
+ readonly "red-600": "#932729";
520
+ readonly "orange-500": "#F2A036";
521
+ readonly "gray-100": "#E1E6EA";
522
+ readonly "gray-300": "#AAB8C1";
523
+ readonly "gray-800": "#2B3841";
524
+ readonly "gray-200": "#CAD4DC";
525
+ readonly "gray-600": "#56646E";
526
+ readonly "gray-900": "#15222B";
527
+ readonly "blue-200": "#B7DDF8";
528
+ readonly "blue-600": "#005998";
529
+ readonly "blue-700": "#00406C";
530
+ readonly "blue-900": "#001626";
531
+ readonly "blue-50": "#F0F8FE";
532
+ readonly "green-500": "#42811A";
533
+ readonly "pink-100": "#FEE7F2";
534
+ readonly "pink-500": "#CD397E";
535
+ readonly "gray-400": "#80919C";
536
+ readonly "gray-500": "#6B7B85";
537
+ readonly "gray-700": "#404E58";
538
+ readonly "gray-50": "#F3F5F7";
539
+ readonly "skyBlue-100": "#E6FAFF";
540
+ readonly "skyBlue-500": "#21B9E8";
541
+ }, "-">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
542
+ colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
543
+ text: {
544
+ _: "gray-900";
545
+ accent: "blue";
546
+ disabled: "gray-500";
547
+ secondary: "gray-500";
548
+ };
549
+ background: {
550
+ _: "white";
551
+ contrast: "white";
552
+ current: "white";
553
+ primary: "beige";
554
+ selected: "blue-50";
555
+ disabled: "gray-100";
556
+ hover: "gray-200";
557
+ };
558
+ primary: {
559
+ _: "blue";
560
+ hover: "blue-400";
561
+ inverse: "white";
562
+ };
563
+ secondary: {
564
+ _: "gray-900";
565
+ hover: "gray-800";
566
+ };
567
+ interface: {
568
+ _: "blue";
569
+ hover: "blue-400";
570
+ };
571
+ danger: {
572
+ _: "red";
573
+ hover: "red-600";
574
+ };
575
+ } | {
576
+ text: {
577
+ _: "white";
578
+ accent: "blue";
579
+ disabled: "gray-100";
580
+ secondary: "gray-200";
581
+ };
582
+ background: {
583
+ _: "gray-900";
584
+ current: "gray-800";
585
+ primary: "gray-900";
586
+ selected: "gray-700";
587
+ disabled: "gray-500";
588
+ hover: "gray-600";
589
+ };
590
+ primary: {
591
+ _: "skyBlue";
592
+ hover: "skyBlue-100";
593
+ inverse: "blue";
594
+ };
595
+ secondary: {
596
+ _: "white";
597
+ hover: "blue-50";
598
+ };
599
+ interface: {
600
+ _: "white";
601
+ hover: "blue-50";
602
+ };
603
+ }, "-", "_">, "colors"> & import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
604
+ readonly beige: "#FFF0E5";
605
+ readonly blue: "#1557FF";
606
+ readonly green: "#008A27";
607
+ readonly hyper: "#3A10E5";
608
+ readonly lightBlue: "#66C4FF";
609
+ readonly lightGreen: "#AEE938";
610
+ readonly navy: "#10162F";
611
+ readonly orange: "#FF8C00";
612
+ readonly paleBlue: "#F5FCFF";
613
+ readonly paleGreen: "#F5FFE3";
614
+ readonly palePink: "#FFF5FF";
615
+ readonly paleYellow: "#FFFAE5";
616
+ readonly pink: "#F966FF";
617
+ readonly paleRed: "#DC5879";
618
+ readonly red: "#E91C11";
619
+ readonly yellow: "#FFD300";
620
+ readonly black: "#000000";
621
+ readonly white: "#ffffff";
622
+ readonly "shadow-white-slight": string;
623
+ readonly "shadow-white-heavy": string;
624
+ readonly "shadow-black-slight": string;
625
+ readonly "shadow-black-heavy": string;
626
+ readonly "beige-100": "#FFF0E5";
627
+ readonly "blue-0": "#F5FCFF";
628
+ readonly "blue-100": "#D3F2FF";
629
+ readonly "blue-300": "#66C4FF";
630
+ readonly "blue-400": "#3388FF";
631
+ readonly "blue-500": "#1557FF";
632
+ readonly "blue-800": "#1D2340";
633
+ readonly "navy-100": string;
634
+ readonly "navy-300": string;
635
+ readonly "navy-400": string;
636
+ readonly "navy-500": string;
637
+ readonly "navy-800": "#10162F";
638
+ readonly "navy-200": string;
639
+ readonly "navy-600": string;
640
+ readonly "navy-700": string;
641
+ readonly "navy-900": "#0A0D1C";
642
+ readonly "green-0": "#F5FFE3";
643
+ readonly "green-100": "#EAFDC6";
644
+ readonly "green-400": "#AEE938";
645
+ readonly "green-700": "#008A27";
646
+ readonly "yellow-0": "#FFFAE5";
647
+ readonly "yellow-400": "#CCA900";
648
+ readonly "yellow-500": "#FFD300";
649
+ readonly "pink-0": "#FFF5FF";
650
+ readonly "pink-400": "#F966FF";
651
+ readonly "red-0": "#E85D7F";
652
+ readonly "red-100": "#DC5879";
653
+ readonly "red-500": "#E91C11";
654
+ readonly "red-600": "#BE1809";
655
+ readonly "orange-500": "#FF8C00";
656
+ readonly "hyper-400": "#5533FF";
657
+ readonly "hyper-500": "#3A10E5";
658
+ readonly "gray-100": "#F5F5F5";
659
+ readonly "gray-300": "#E0E0E0";
660
+ readonly "gray-800": "#616161";
661
+ readonly "gray-200": "#EEEEEE";
662
+ readonly "gray-600": "#9E9E9E";
663
+ readonly "gray-900": "#424242";
664
+ readonly "white-100": string;
665
+ readonly "white-300": string;
666
+ readonly "white-400": string;
667
+ readonly "white-500": string;
668
+ readonly "white-200": string;
669
+ readonly "white-600": string;
670
+ readonly "white-700": string;
671
+ }, "-">, "color">, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
672
+ text: {
673
+ _: "navy-800";
674
+ accent: "navy-900";
675
+ disabled: "navy-500";
676
+ secondary: "navy-600";
677
+ };
678
+ feedback: {
679
+ error: "red-600";
680
+ success: "green-700";
681
+ warning: "yellow";
682
+ };
683
+ background: {
684
+ _: "white";
685
+ contrast: "white";
686
+ current: "white";
687
+ primary: "beige";
688
+ selected: "navy-100";
689
+ disabled: "navy-200";
690
+ hover: "navy-200";
691
+ };
692
+ shadow: {
693
+ opaque: "shadow-white-heavy";
694
+ solid: "gray-200";
695
+ };
696
+ primary: {
697
+ _: "hyper-500";
698
+ hover: "hyper-400";
699
+ inverse: "yellow-500";
700
+ };
701
+ secondary: {
702
+ _: "navy-800";
703
+ hover: "navy-700";
704
+ };
705
+ danger: {
706
+ _: "red-500";
707
+ hover: "red-600";
708
+ };
709
+ interface: {
710
+ _: "hyper-500";
711
+ hover: "hyper-400";
712
+ };
713
+ border: {
714
+ primary: "navy-800";
715
+ secondary: "navy-600";
716
+ tertiary: "navy-300";
717
+ disabled: "navy-500";
718
+ };
719
+ } | {
720
+ text: {
721
+ _: "white";
722
+ accent: "beige";
723
+ disabled: "white-500";
724
+ secondary: "white-600";
725
+ };
726
+ feedback: {
727
+ error: "red-0";
728
+ success: "green-400";
729
+ warning: "yellow-0";
730
+ };
731
+ background: {
732
+ _: "navy-800";
733
+ contrast: "black";
734
+ current: "navy-800";
735
+ primary: "navy-900";
736
+ selected: "white-100";
737
+ disabled: "white-200";
738
+ hover: "white-200";
739
+ };
740
+ shadow: {
741
+ opaque: "shadow-black-heavy";
742
+ solid: "black";
743
+ };
744
+ primary: {
745
+ _: "yellow-500";
746
+ hover: "yellow-400";
747
+ inverse: "hyper-500";
748
+ };
749
+ secondary: {
750
+ _: "white";
751
+ hover: "white-700";
752
+ };
753
+ danger: {
754
+ _: "red-0";
755
+ hover: "red-100";
756
+ };
757
+ interface: {
758
+ _: "yellow-500";
759
+ hover: "yellow-400";
760
+ };
761
+ border: {
762
+ primary: "white";
763
+ secondary: "white-600";
764
+ tertiary: "white-300";
765
+ disabled: "white-500";
766
+ };
767
+ }, "-", "_">, "colors"> & import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
768
+ readonly beige: "#FFF0E5";
769
+ readonly blue: "#1557FF";
770
+ readonly green: "#008A27";
771
+ readonly hyper: "#3A10E5";
772
+ readonly lightBlue: "#66C4FF";
773
+ readonly lightGreen: "#AEE938";
774
+ readonly navy: "#10162F";
775
+ readonly orange: "#FF8C00";
776
+ readonly paleBlue: "#F5FCFF";
777
+ readonly paleGreen: "#F5FFE3";
778
+ readonly palePink: "#FFF5FF";
779
+ readonly paleYellow: "#FFFAE5";
780
+ readonly pink: "#F966FF";
781
+ readonly paleRed: "#DC5879";
782
+ readonly red: "#E91C11";
783
+ readonly yellow: "#FFD300";
784
+ readonly black: "#000000";
785
+ readonly white: "#ffffff";
786
+ readonly "shadow-white-slight": string;
787
+ readonly "shadow-white-heavy": string;
788
+ readonly "shadow-black-slight": string;
789
+ readonly "shadow-black-heavy": string;
790
+ readonly "beige-100": "#FFF0E5";
791
+ readonly "blue-0": "#F5FCFF";
792
+ readonly "blue-100": "#D3F2FF";
793
+ readonly "blue-300": "#66C4FF";
794
+ readonly "blue-400": "#3388FF";
795
+ readonly "blue-500": "#1557FF";
796
+ readonly "blue-800": "#1D2340";
797
+ readonly "navy-100": string;
798
+ readonly "navy-300": string;
799
+ readonly "navy-400": string;
800
+ readonly "navy-500": string;
801
+ readonly "navy-800": "#10162F";
802
+ readonly "navy-200": string;
803
+ readonly "navy-600": string;
804
+ readonly "navy-700": string;
805
+ readonly "navy-900": "#0A0D1C";
806
+ readonly "green-0": "#F5FFE3";
807
+ readonly "green-100": "#EAFDC6";
808
+ readonly "green-400": "#AEE938";
809
+ readonly "green-700": "#008A27";
810
+ readonly "yellow-0": "#FFFAE5";
811
+ readonly "yellow-400": "#CCA900";
812
+ readonly "yellow-500": "#FFD300";
813
+ readonly "pink-0": "#FFF5FF";
814
+ readonly "pink-400": "#F966FF";
815
+ readonly "red-0": "#E85D7F";
816
+ readonly "red-100": "#DC5879";
817
+ readonly "red-500": "#E91C11";
818
+ readonly "red-600": "#BE1809";
819
+ readonly "orange-500": "#FF8C00";
820
+ readonly "hyper-400": "#5533FF";
821
+ readonly "hyper-500": "#3A10E5";
822
+ readonly "gray-100": "#F5F5F5";
823
+ readonly "gray-300": "#E0E0E0";
824
+ readonly "gray-800": "#616161";
825
+ readonly "gray-200": "#EEEEEE";
826
+ readonly "gray-600": "#9E9E9E";
827
+ readonly "gray-900": "#424242";
828
+ readonly "white-100": string;
829
+ readonly "white-300": string;
830
+ readonly "white-400": string;
831
+ readonly "white-500": string;
832
+ readonly "white-200": string;
833
+ readonly "white-600": string;
834
+ readonly "white-700": string;
835
+ }, "-">, "color">>, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
836
+ readonly mulberryPink: "#CD397E";
837
+ readonly blue: "#3498DF";
838
+ readonly green: "#42811A";
839
+ readonly skyBlue: "#21B9E8";
840
+ readonly yellow: "#E8C427";
841
+ readonly red: "#BE3636";
842
+ readonly gray: "#6B7B85";
843
+ readonly black: "#000C14";
844
+ readonly "blue-100": "#E0F2FE";
845
+ readonly "blue-300": "#78BAE9";
846
+ readonly "blue-400": "#3498DF";
847
+ readonly "blue-500": "#0073C4";
848
+ readonly "blue-800": "#002640";
849
+ readonly "green-0": "#EBF6E4";
850
+ readonly "green-400": "#6EAB49";
851
+ readonly "green-700": "#1D4C12";
852
+ readonly "yellow-0": "#FEFAE8";
853
+ readonly "yellow-500": "#E8C427";
854
+ readonly "pink-400": "#DF659E";
855
+ readonly "red-0": "#FBE8E8";
856
+ readonly "red-100": "#F4C7C7";
857
+ readonly "red-500": "#BE3636";
858
+ readonly "red-600": "#932729";
859
+ readonly "orange-500": "#F2A036";
860
+ readonly "gray-100": "#E1E6EA";
861
+ readonly "gray-300": "#AAB8C1";
862
+ readonly "gray-800": "#2B3841";
863
+ readonly "gray-200": "#CAD4DC";
864
+ readonly "gray-600": "#56646E";
865
+ readonly "gray-900": "#15222B";
866
+ readonly "blue-200": "#B7DDF8";
867
+ readonly "blue-600": "#005998";
868
+ readonly "blue-700": "#00406C";
869
+ readonly "blue-900": "#001626";
870
+ readonly "blue-50": "#F0F8FE";
871
+ readonly "green-500": "#42811A";
872
+ readonly "pink-100": "#FEE7F2";
873
+ readonly "pink-500": "#CD397E";
874
+ readonly "gray-400": "#80919C";
875
+ readonly "gray-500": "#6B7B85";
876
+ readonly "gray-700": "#404E58";
877
+ readonly "gray-50": "#F3F5F7";
878
+ readonly "skyBlue-100": "#E6FAFF";
879
+ readonly "skyBlue-500": "#21B9E8";
880
+ }, "-">, "color">>;
881
+ modes: import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
882
+ light: import("@codecademy/variance").LiteralPaths<{
883
+ text: {
884
+ _: "navy-800";
885
+ accent: "navy-900";
886
+ disabled: "navy-500";
887
+ secondary: "navy-600";
888
+ };
889
+ feedback: {
890
+ error: "red-600";
891
+ success: "green-700";
892
+ warning: "yellow";
893
+ };
894
+ background: {
895
+ _: "white";
896
+ contrast: "white";
897
+ current: "white";
898
+ primary: "beige";
899
+ selected: "navy-100";
900
+ disabled: "navy-200";
901
+ hover: "navy-200";
902
+ };
903
+ shadow: {
904
+ opaque: "shadow-white-heavy";
905
+ solid: "gray-200";
906
+ };
907
+ primary: {
908
+ _: "hyper-500";
909
+ hover: "hyper-400";
910
+ inverse: "yellow-500";
911
+ };
912
+ secondary: {
913
+ _: "navy-800";
914
+ hover: "navy-700";
915
+ };
916
+ danger: {
917
+ _: "red-500";
918
+ hover: "red-600";
919
+ };
920
+ interface: {
921
+ _: "hyper-500";
922
+ hover: "hyper-400";
923
+ };
924
+ border: {
925
+ primary: "navy-800";
926
+ secondary: "navy-600";
927
+ tertiary: "navy-300";
928
+ disabled: "navy-500";
929
+ };
930
+ }, "-", "_">;
931
+ dark: import("@codecademy/variance").LiteralPaths<{
932
+ text: {
933
+ _: "white";
934
+ accent: "beige";
935
+ disabled: "white-500";
936
+ secondary: "white-600";
937
+ };
938
+ feedback: {
939
+ error: "red-0";
940
+ success: "green-400";
941
+ warning: "yellow-0";
942
+ };
943
+ background: {
944
+ _: "navy-800";
945
+ contrast: "black";
946
+ current: "navy-800";
947
+ primary: "navy-900";
948
+ selected: "white-100";
949
+ disabled: "white-200";
950
+ hover: "white-200";
951
+ };
952
+ shadow: {
953
+ opaque: "shadow-black-heavy";
954
+ solid: "black";
955
+ };
956
+ primary: {
957
+ _: "yellow-500";
958
+ hover: "yellow-400";
959
+ inverse: "hyper-500";
960
+ };
961
+ secondary: {
962
+ _: "white";
963
+ hover: "white-700";
964
+ };
965
+ danger: {
966
+ _: "red-0";
967
+ hover: "red-100";
968
+ };
969
+ interface: {
970
+ _: "yellow-500";
971
+ hover: "yellow-400";
972
+ };
973
+ border: {
974
+ primary: "white";
975
+ secondary: "white-600";
976
+ tertiary: "white-300";
977
+ disabled: "white-500";
978
+ };
979
+ }, "-", "_">;
980
+ }>, {
981
+ light: import("@codecademy/variance").LiteralPaths<{
982
+ text: {
983
+ _: "gray-900";
984
+ accent: "blue";
985
+ disabled: "gray-500";
986
+ secondary: "gray-500";
987
+ };
988
+ background: {
989
+ _: "white";
990
+ contrast: "white";
991
+ current: "white";
992
+ primary: "beige";
993
+ selected: "blue-50";
994
+ disabled: "gray-100";
995
+ hover: "gray-200";
996
+ };
997
+ primary: {
998
+ _: "blue";
999
+ hover: "blue-400";
1000
+ inverse: "white";
1001
+ };
1002
+ secondary: {
1003
+ _: "gray-900";
1004
+ hover: "gray-800";
1005
+ };
1006
+ interface: {
1007
+ _: "blue";
1008
+ hover: "blue-400";
1009
+ };
1010
+ danger: {
1011
+ _: "red";
1012
+ hover: "red-600";
1013
+ };
1014
+ }, "-", "_">;
1015
+ dark: import("@codecademy/variance").LiteralPaths<{
1016
+ text: {
1017
+ _: "white";
1018
+ accent: "blue";
1019
+ disabled: "gray-100";
1020
+ secondary: "gray-200";
1021
+ };
1022
+ background: {
1023
+ _: "gray-900";
1024
+ current: "gray-800";
1025
+ primary: "gray-900";
1026
+ selected: "gray-700";
1027
+ disabled: "gray-500";
1028
+ hover: "gray-600";
1029
+ };
1030
+ primary: {
1031
+ _: "skyBlue";
1032
+ hover: "skyBlue-100";
1033
+ inverse: "blue";
1034
+ };
1035
+ secondary: {
1036
+ _: "white";
1037
+ hover: "blue-50";
1038
+ };
1039
+ interface: {
1040
+ _: "white";
1041
+ hover: "blue-50";
1042
+ };
1043
+ }, "-", "_">;
1044
+ }>;
1045
+ mode: "light" | "dark";
1046
+ _getColorValue: (color: "beige" | "blue" | "navy" | "green" | "yellow" | "pink" | "red" | "orange" | "hyper" | "gray" | "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-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" | "shadow-white-slight" | "shadow-white-heavy" | "shadow-black-slight" | "shadow-black-heavy" | "skyBlue" | "blue-200" | "blue-600" | "blue-700" | "blue-900" | "blue-50" | "green-500" | "pink-100" | "pink-500" | "gray-400" | "gray-500" | "gray-700" | "gray-50" | "skyBlue-100" | "skyBlue-500" | "lightBlue" | "lightGreen" | "paleBlue" | "paleGreen" | "palePink" | "paleYellow" | "paleRed" | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "shadow-opaque" | "shadow-solid" | "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" | "danger-hover" | "interface-hover" | "border-disabled" | "border-secondary" | "border-primary" | "border-tertiary" | "mulberryPink") => string;
1047
+ }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
1048
+ export type EnterpriseThemeShape = typeof enterpriseTheme;
1049
+ export interface EnterpriseTheme extends EnterpriseThemeShape {
1050
+ }
package/dist/themes/enterprise.js ADDED
@@ -0,0 +1,68 @@
1
+ import { createTheme } from '@codecademy/variance';
2
+ import { enterprisePalette } from '../variables';
3
+ import { coreTheme } from './core';
4
+ export const enterpriseTheme = createTheme(coreTheme).addColors(enterprisePalette).addColorModes('light', {
5
+ light: {
6
+ text: {
7
+ _: 'gray-900',
8
+ accent: 'blue',
9
+ disabled: 'gray-500',
10
+ secondary: 'gray-500'
11
+ },
12
+ background: {
13
+ _: 'white',
14
+ contrast: 'white',
15
+ current: 'white',
16
+ primary: 'beige',
17
+ selected: 'blue-50',
18
+ disabled: 'gray-100',
19
+ hover: 'gray-200'
20
+ },
21
+ primary: {
22
+ _: 'blue',
23
+ hover: 'blue-400',
24
+ inverse: 'white'
25
+ },
26
+ secondary: {
27
+ _: 'gray-900',
28
+ hover: 'gray-800'
29
+ },
30
+ interface: {
31
+ _: 'blue',
32
+ hover: 'blue-400'
33
+ },
34
+ danger: {
35
+ _: 'red',
36
+ hover: 'red-600'
37
+ }
38
+ },
39
+ dark: {
40
+ text: {
41
+ _: 'white',
42
+ accent: 'blue',
43
+ disabled: 'gray-100',
44
+ secondary: 'gray-200'
45
+ },
46
+ background: {
47
+ _: 'gray-900',
48
+ current: 'gray-800',
49
+ primary: 'gray-900',
50
+ selected: 'gray-700',
51
+ disabled: 'gray-500',
52
+ hover: 'gray-600'
53
+ },
54
+ primary: {
55
+ _: 'skyBlue',
56
+ hover: 'skyBlue-100',
57
+ inverse: 'blue'
58
+ },
59
+ secondary: {
60
+ _: 'white',
61
+ hover: 'blue-50'
62
+ },
63
+ interface: {
64
+ _: 'white',
65
+ hover: 'blue-50'
66
+ }
67
+ }
68
+ }).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,103 @@ export declare const platformPalette: {
191
191
  readonly "teal-500": "#027E97";
192
192
  readonly "purple-300": "#B3CCFF";
193
193
  };
194
+ export declare const enterpriseSwatches: {
195
+ readonly blue: {
196
+ readonly '50': "#F0F8FE";
197
+ readonly '100': "#E0F2FE";
198
+ readonly '200': "#B7DDF8";
199
+ readonly '300': "#78BAE9";
200
+ readonly '400': "#3498DF";
201
+ readonly '500': "#0073C4";
202
+ readonly '600': "#005998";
203
+ readonly '700': "#00406C";
204
+ readonly '800': "#002640";
205
+ readonly '900': "#001626";
206
+ };
207
+ readonly gray: {
208
+ readonly '50': "#F3F5F7";
209
+ readonly '100': "#E1E6EA";
210
+ readonly '200': "#CAD4DC";
211
+ readonly '300': "#AAB8C1";
212
+ readonly '400': "#80919C";
213
+ readonly '500': "#6B7B85";
214
+ readonly '600': "#56646E";
215
+ readonly '700': "#404E58";
216
+ readonly '800': "#2B3841";
217
+ readonly '900': "#15222B";
218
+ };
219
+ readonly skyBlue: {
220
+ readonly '100': "#E6FAFF";
221
+ readonly '500': "#21B9E8";
222
+ };
223
+ readonly green: {
224
+ readonly '0': "#EBF6E4";
225
+ readonly '400': "#6EAB49";
226
+ readonly '500': "#42811A";
227
+ readonly '700': "#1D4C12";
228
+ };
229
+ readonly pink: {
230
+ readonly '100': "#FEE7F2";
231
+ readonly '400': "#DF659E";
232
+ readonly '500': "#CD397E";
233
+ };
234
+ readonly yellow: {
235
+ readonly '0': "#FEFAE8";
236
+ readonly '500': "#E8C427";
237
+ };
238
+ readonly orange: {
239
+ readonly '500': "#F2A036";
240
+ };
241
+ readonly red: {
242
+ readonly '0': "#FBE8E8";
243
+ readonly '100': "#F4C7C7";
244
+ readonly '500': "#BE3636";
245
+ readonly '600': "#932729";
246
+ };
247
+ };
248
+ export declare const enterprisePalette: {
249
+ readonly mulberryPink: "#CD397E";
250
+ readonly blue: "#3498DF";
251
+ readonly green: "#42811A";
252
+ readonly skyBlue: "#21B9E8";
253
+ readonly yellow: "#E8C427";
254
+ readonly red: "#BE3636";
255
+ readonly gray: "#6B7B85";
256
+ readonly black: "#000C14";
257
+ readonly "blue-100": "#E0F2FE";
258
+ readonly "blue-300": "#78BAE9";
259
+ readonly "blue-400": "#3498DF";
260
+ readonly "blue-500": "#0073C4";
261
+ readonly "blue-800": "#002640";
262
+ readonly "green-0": "#EBF6E4";
263
+ readonly "green-400": "#6EAB49";
264
+ readonly "green-700": "#1D4C12";
265
+ readonly "yellow-0": "#FEFAE8";
266
+ readonly "yellow-500": "#E8C427";
267
+ readonly "pink-400": "#DF659E";
268
+ readonly "red-0": "#FBE8E8";
269
+ readonly "red-100": "#F4C7C7";
270
+ readonly "red-500": "#BE3636";
271
+ readonly "red-600": "#932729";
272
+ readonly "orange-500": "#F2A036";
273
+ readonly "gray-100": "#E1E6EA";
274
+ readonly "gray-300": "#AAB8C1";
275
+ readonly "gray-800": "#2B3841";
276
+ readonly "gray-200": "#CAD4DC";
277
+ readonly "gray-600": "#56646E";
278
+ readonly "gray-900": "#15222B";
279
+ readonly "blue-200": "#B7DDF8";
280
+ readonly "blue-600": "#005998";
281
+ readonly "blue-700": "#00406C";
282
+ readonly "blue-900": "#001626";
283
+ readonly "blue-50": "#F0F8FE";
284
+ readonly "green-500": "#42811A";
285
+ readonly "pink-100": "#FEE7F2";
286
+ readonly "pink-500": "#CD397E";
287
+ readonly "gray-400": "#80919C";
288
+ readonly "gray-500": "#6B7B85";
289
+ readonly "gray-700": "#404E58";
290
+ readonly "gray-50": "#F3F5F7";
291
+ readonly "skyBlue-100": "#E6FAFF";
292
+ readonly "skyBlue-500": "#21B9E8";
293
+ };
package/dist/variables/colors.js CHANGED
@@ -147,4 +147,78 @@ const truePlatformColors = {
147
147
  export const platformPalette = {
148
148
  ...flattenScale(platformSwatches),
149
149
  ...truePlatformColors
150
+ };
151
+
152
+ /**
153
+ * Enterprise Colors
154
+ */
155
+
156
+ const enterpriseBlack = '#000C14';
157
+ export const enterpriseSwatches = {
158
+ blue: {
159
+ '50': '#F0F8FE',
160
+ '100': '#E0F2FE',
161
+ '200': '#B7DDF8',
162
+ '300': '#78BAE9',
163
+ '400': '#3498DF',
164
+ '500': '#0073C4',
165
+ '600': '#005998',
166
+ '700': '#00406C',
167
+ '800': '#002640',
168
+ '900': '#001626'
169
+ },
170
+ gray: {
171
+ '50': '#F3F5F7',
172
+ '100': '#E1E6EA',
173
+ '200': '#CAD4DC',
174
+ '300': '#AAB8C1',
175
+ '400': '#80919C',
176
+ '500': '#6B7B85',
177
+ '600': '#56646E',
178
+ '700': '#404E58',
179
+ '800': '#2B3841',
180
+ '900': '#15222B'
181
+ },
182
+ skyBlue: {
183
+ '100': '#E6FAFF',
184
+ '500': '#21B9E8'
185
+ },
186
+ green: {
187
+ '0': '#EBF6E4',
188
+ '400': '#6EAB49',
189
+ '500': '#42811A',
190
+ '700': '#1D4C12'
191
+ },
192
+ pink: {
193
+ '100': '#FEE7F2',
194
+ '400': '#DF659E',
195
+ '500': '#CD397E'
196
+ },
197
+ yellow: {
198
+ '0': '#FEFAE8',
199
+ '500': '#E8C427'
200
+ },
201
+ orange: {
202
+ '500': '#F2A036'
203
+ },
204
+ red: {
205
+ '0': '#FBE8E8',
206
+ '100': '#F4C7C7',
207
+ '500': '#BE3636',
208
+ '600': '#932729'
209
+ }
210
+ };
211
+ const trueEnterpriseColors = {
212
+ mulberryPink: enterpriseSwatches.pink[500],
213
+ blue: enterpriseSwatches.blue[400],
214
+ green: enterpriseSwatches.green[500],
215
+ skyBlue: enterpriseSwatches.skyBlue[500],
216
+ yellow: enterpriseSwatches.yellow[500],
217
+ red: enterpriseSwatches.red[500],
218
+ gray: enterpriseSwatches.gray[500],
219
+ black: enterpriseBlack
220
+ };
221
+ export const enterprisePalette = {
222
+ ...flattenScale(enterpriseSwatches),
223
+ ...trueEnterpriseColors
150
224
  };
package/dist/variables/deprecated-colors.d.ts CHANGED
@@ -149,8 +149,8 @@ export declare const colors: {
149
149
  readonly "gray-900": "#19191a";
150
150
  readonly "beige-0": "#FFF0E5";
151
151
  readonly "blue-900": "#10162f";
152
- readonly "gray-0": "#ffffff";
153
152
  readonly "gray-400": "#a2a2a6";
154
153
  readonly "gray-500": "#828285";
155
154
  readonly "gray-700": "#4b4b4d";
155
+ readonly "gray-0": "#ffffff";
156
156
  };
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.4.0",
4
+ "version": "17.4.1-alpha.5c010c.0",
5
5
  "author": "Jake Hiller <jake@codecademy.com>",
6
6
  "dependencies": {
7
7
  "@codecademy/variance": "0.22.0",
@@ -34,5 +34,5 @@
34
34
  "scripts": {
35
35
  "build": "nx build @codecademy/gamut-styles"
36
36
  },
37
- "gitHead": "c1a9e0091a1c7ac65505096fc8549a8a311f28cb"
37
+ "gitHead": "d450c3bb100a08ac5bcd10ce08da2bdf666382b4"
38
38
  }