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