@codecademy/gamut-styles 17.2.1-alpha.8dba5c.0 → 17.3.0-alpha.9d95eb.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 (10) hide show
  1. package/dist/AssetProvider.js +10 -7
  2. package/dist/remoteAssets/fonts.js +9 -6
  3. package/dist/themes/index.d.ts +0 -1
  4. package/dist/themes/index.js +1 -2
  5. package/dist/variables/colors.d.ts +0 -100
  6. package/dist/variables/colors.js +0 -74
  7. package/dist/variables/deprecated-colors.d.ts +1 -1
  8. package/package.json +2 -2
  9. package/dist/themes/enterprise.d.ts +0 -1002
  10. package/dist/themes/enterprise.js +0 -68
package/dist/AssetProvider.js CHANGED
@@ -1,17 +1,20 @@
1
1
  import { webFonts } from './remoteAssets/fonts';
2
+
3
+ /*
4
+ * Only preload woff2 fonts, since woff1 are only included as fallbacks.
5
+ */
2
6
  import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
3
- export const createFontLinks = () => webFonts.flatMap(_ref => {
7
+ export const createFontLinks = () => webFonts.filter(f => f.extensions.includes('woff2')).map(_ref => {
4
8
  let {
5
- filePath,
6
- extensions
9
+ filePath
7
10
  } = _ref;
8
- return extensions.map(ext => /*#__PURE__*/_jsx("link", {
11
+ return /*#__PURE__*/_jsx("link", {
9
12
  rel: "preload",
10
- href: `${filePath}.${ext}`,
13
+ href: `${filePath}.woff2`,
11
14
  crossOrigin: "anonymous",
12
15
  as: "font",
13
- type: `font/${ext}`
14
- }, `${filePath}-${ext}`));
16
+ type: "font/woff2"
17
+ }, filePath);
15
18
  });
16
19
  export const AssetProvider = () => {
17
20
  return /*#__PURE__*/_jsx(_Fragment, {
package/dist/remoteAssets/fonts.js CHANGED
@@ -1,31 +1,34 @@
1
1
  export const FONT_ASSET_PATH = `https://www.codecademy.com/gamut`;
2
+
3
+ // woff2 should precede woff so that browsers try woff2 first.
4
+
2
5
  export const webFonts = [{
3
6
  filePath: `${FONT_ASSET_PATH}/apercu-regular-pro`,
4
- extensions: ['woff', 'woff2'],
7
+ extensions: ['woff2', 'woff'],
5
8
  name: 'Apercu'
6
9
  }, {
7
10
  filePath: `${FONT_ASSET_PATH}/apercu-italic-pro`,
8
- extensions: ['woff', 'woff2'],
11
+ extensions: ['woff2', 'woff'],
9
12
  name: 'Apercu',
10
13
  style: 'italic'
11
14
  }, {
12
15
  filePath: `${FONT_ASSET_PATH}/apercu-bold-pro`,
13
- extensions: ['woff', 'woff2'],
16
+ extensions: ['woff2', 'woff'],
14
17
  name: 'Apercu',
15
18
  weight: 'bold'
16
19
  }, {
17
20
  filePath: `${FONT_ASSET_PATH}/apercu-bold-italic-pro`,
18
- extensions: ['woff', 'woff2'],
21
+ extensions: ['woff2', 'woff'],
19
22
  name: 'Apercu',
20
23
  weight: 'bold',
21
24
  style: 'italic'
22
25
  }, {
23
26
  filePath: `${FONT_ASSET_PATH}/SuisseIntlMono-Bold-WebS`,
24
- extensions: ['woff', 'woff2'],
27
+ extensions: ['woff2', 'woff'],
25
28
  name: 'Suisse',
26
29
  weight: 'bold'
27
30
  }, {
28
31
  filePath: `${FONT_ASSET_PATH}/SuisseIntlMono-Regular-WebS`,
29
- extensions: ['woff', 'woff2'],
32
+ extensions: ['woff2', 'woff'],
30
33
  name: 'Suisse'
31
34
  }];
package/dist/themes/index.d.ts CHANGED
@@ -1,4 +1,3 @@
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,4 +1,3 @@
1
1
  export * from './core';
2
2
  export * from './platform';
3
- export * from './admin';
4
- export * from './enterprise';
3
+ export * from './admin';
package/dist/variables/colors.d.ts CHANGED
@@ -191,103 +191,3 @@ 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,78 +147,4 @@ 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
224
150
  };
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";
152
153
  readonly "gray-400": "#a2a2a6";
153
154
  readonly "gray-500": "#828285";
154
155
  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.2.1-alpha.8dba5c.0",
4
+ "version": "17.3.0-alpha.9d95eb.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": "c94df1957b126742bea6459f7684e73893dff1d6"
37
+ "gitHead": "5c7acf3b31b38ec3f93db6a78c10ecad6909781c"
38
38
  }
package/dist/themes/enterprise.d.ts DELETED
@@ -1,1002 +0,0 @@
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 mulberryPink: "#CD397E";
474
- readonly blue: "#3498DF";
475
- readonly green: "#42811A";
476
- readonly skyBlue: "#21B9E8";
477
- readonly yellow: "#E8C427";
478
- readonly red: "#BE3636";
479
- readonly gray: "#6B7B85";
480
- readonly black: "#000C14";
481
- readonly "blue-100": "#E0F2FE";
482
- readonly "blue-300": "#78BAE9";
483
- readonly "blue-400": "#3498DF";
484
- readonly "blue-500": "#0073C4";
485
- readonly "blue-800": "#002640";
486
- readonly "green-0": "#EBF6E4";
487
- readonly "green-400": "#6EAB49";
488
- readonly "green-700": "#1D4C12";
489
- readonly "yellow-0": "#FEFAE8";
490
- readonly "yellow-500": "#E8C427";
491
- readonly "pink-400": "#DF659E";
492
- readonly "red-0": "#FBE8E8";
493
- readonly "red-100": "#F4C7C7";
494
- readonly "red-500": "#BE3636";
495
- readonly "red-600": "#932729";
496
- readonly "orange-500": "#F2A036";
497
- readonly "gray-100": "#E1E6EA";
498
- readonly "gray-300": "#AAB8C1";
499
- readonly "gray-800": "#2B3841";
500
- readonly "gray-200": "#CAD4DC";
501
- readonly "gray-600": "#56646E";
502
- readonly "gray-900": "#15222B";
503
- readonly "blue-200": "#B7DDF8";
504
- readonly "blue-600": "#005998";
505
- readonly "blue-700": "#00406C";
506
- readonly "blue-900": "#001626";
507
- readonly "blue-50": "#F0F8FE";
508
- readonly "green-500": "#42811A";
509
- readonly "pink-100": "#FEE7F2";
510
- readonly "pink-500": "#CD397E";
511
- readonly "gray-400": "#80919C";
512
- readonly "gray-500": "#6B7B85";
513
- readonly "gray-700": "#404E58";
514
- readonly "gray-50": "#F3F5F7";
515
- readonly "skyBlue-100": "#E6FAFF";
516
- readonly "skyBlue-500": "#21B9E8";
517
- }, "-">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
518
- colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
519
- text: {
520
- _: "gray-900";
521
- accent: "blue";
522
- disabled: "gray-500";
523
- secondary: "gray-500";
524
- };
525
- background: {
526
- _: "white";
527
- contrast: "white";
528
- current: "white";
529
- primary: "beige";
530
- selected: "blue-50";
531
- disabled: "gray-100";
532
- hover: "gray-200";
533
- };
534
- primary: {
535
- _: "blue";
536
- hover: "blue-400";
537
- inverse: "white";
538
- };
539
- secondary: {
540
- _: "gray-900";
541
- hover: "gray-800";
542
- };
543
- interface: {
544
- _: "blue";
545
- hover: "blue-400";
546
- };
547
- danger: {
548
- _: "red";
549
- hover: "red-600";
550
- };
551
- } | {
552
- text: {
553
- _: "white";
554
- accent: "blue";
555
- disabled: "gray-100";
556
- secondary: "gray-200";
557
- };
558
- background: {
559
- _: "gray-900";
560
- current: "gray-800";
561
- primary: "gray-900";
562
- selected: "gray-700";
563
- disabled: "gray-500";
564
- hover: "gray-600";
565
- };
566
- primary: {
567
- _: "skyBlue";
568
- hover: "skyBlue-100";
569
- inverse: "blue";
570
- };
571
- secondary: {
572
- _: "white";
573
- hover: "blue-50";
574
- };
575
- interface: {
576
- _: "white";
577
- hover: "blue-50";
578
- };
579
- }, "-", "_">, "colors"> & import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance/dist/createTheme/types").Assign<import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
580
- readonly beige: "#FFF0E5";
581
- readonly blue: "#1557FF";
582
- readonly green: "#008A27";
583
- readonly hyper: "#3A10E5";
584
- readonly lightBlue: "#66C4FF";
585
- readonly lightGreen: "#AEE938";
586
- readonly navy: "#10162F";
587
- readonly orange: "#FF8C00";
588
- readonly paleBlue: "#F5FCFF";
589
- readonly paleGreen: "#F5FFE3";
590
- readonly palePink: "#FFF5FF";
591
- readonly paleYellow: "#FFFAE5";
592
- readonly pink: "#F966FF";
593
- readonly paleRed: "#DC5879";
594
- readonly red: "#E91C11";
595
- readonly yellow: "#FFD300";
596
- readonly black: "#000000";
597
- readonly white: "#ffffff";
598
- readonly "shadow-white-slight": string;
599
- readonly "shadow-white-heavy": string;
600
- readonly "shadow-black-slight": string;
601
- readonly "shadow-black-heavy": string;
602
- readonly "beige-100": "#FFF0E5";
603
- readonly "blue-0": "#F5FCFF";
604
- readonly "blue-100": "#D3F2FF";
605
- readonly "blue-300": "#66C4FF";
606
- readonly "blue-400": "#3388FF";
607
- readonly "blue-500": "#1557FF";
608
- readonly "blue-800": "#1D2340";
609
- readonly "navy-100": string;
610
- readonly "navy-300": string;
611
- readonly "navy-400": string;
612
- readonly "navy-500": string;
613
- readonly "navy-800": "#10162F";
614
- readonly "navy-200": string;
615
- readonly "navy-600": string;
616
- readonly "navy-700": string;
617
- readonly "navy-900": "#0A0D1C";
618
- readonly "green-0": "#F5FFE3";
619
- readonly "green-100": "#EAFDC6";
620
- readonly "green-400": "#AEE938";
621
- readonly "green-700": "#008A27";
622
- readonly "yellow-0": "#FFFAE5";
623
- readonly "yellow-400": "#CCA900";
624
- readonly "yellow-500": "#FFD300";
625
- readonly "pink-0": "#FFF5FF";
626
- readonly "pink-400": "#F966FF";
627
- readonly "red-0": "#E85D7F";
628
- readonly "red-100": "#DC5879";
629
- readonly "red-500": "#E91C11";
630
- readonly "red-600": "#BE1809";
631
- readonly "orange-500": "#FF8C00";
632
- readonly "hyper-400": "#5533FF";
633
- readonly "hyper-500": "#3A10E5";
634
- readonly "gray-100": "#F5F5F5";
635
- readonly "gray-300": "#E0E0E0";
636
- readonly "gray-800": "#616161";
637
- readonly "gray-200": "#EEEEEE";
638
- readonly "gray-600": "#9E9E9E";
639
- readonly "gray-900": "#424242";
640
- readonly "white-100": string;
641
- readonly "white-300": string;
642
- readonly "white-400": string;
643
- readonly "white-500": string;
644
- readonly "white-200": string;
645
- readonly "white-600": string;
646
- readonly "white-700": string;
647
- }, "-">, "color">, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
648
- text: {
649
- _: "navy-800";
650
- accent: "navy-900";
651
- disabled: "navy-500";
652
- secondary: "navy-600";
653
- };
654
- feedback: {
655
- error: "red-600";
656
- success: "green-700";
657
- warning: "yellow";
658
- };
659
- background: {
660
- _: "white";
661
- contrast: "white";
662
- current: "white";
663
- primary: "beige";
664
- selected: "navy-100";
665
- disabled: "navy-200";
666
- hover: "navy-200";
667
- };
668
- shadow: {
669
- opaque: "shadow-white-heavy";
670
- solid: "gray-200";
671
- };
672
- primary: {
673
- _: "hyper-500";
674
- hover: "hyper-400";
675
- inverse: "yellow-500";
676
- };
677
- secondary: {
678
- _: "navy-800";
679
- hover: "navy-700";
680
- };
681
- danger: {
682
- _: "red-500";
683
- hover: "red-600";
684
- };
685
- interface: {
686
- _: "hyper-500";
687
- hover: "hyper-400";
688
- };
689
- } | {
690
- text: {
691
- _: "white";
692
- accent: "beige";
693
- disabled: "white-500";
694
- secondary: "white-600";
695
- };
696
- feedback: {
697
- error: "red-0";
698
- success: "green-400";
699
- warning: "yellow-0";
700
- };
701
- background: {
702
- _: "navy-800";
703
- contrast: "black";
704
- current: "navy-800";
705
- primary: "navy-900";
706
- selected: "white-100";
707
- disabled: "white-200";
708
- hover: "white-200";
709
- };
710
- shadow: {
711
- opaque: "shadow-black-heavy";
712
- solid: "black";
713
- };
714
- primary: {
715
- _: "yellow-500";
716
- hover: "yellow-400";
717
- inverse: "hyper-500";
718
- };
719
- secondary: {
720
- _: "white";
721
- hover: "white-700";
722
- };
723
- danger: {
724
- _: "red-0";
725
- hover: "red-100";
726
- };
727
- interface: {
728
- _: "yellow-500";
729
- hover: "yellow-400";
730
- };
731
- }, "-", "_">, "colors"> & import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
732
- readonly beige: "#FFF0E5";
733
- readonly blue: "#1557FF";
734
- readonly green: "#008A27";
735
- readonly hyper: "#3A10E5";
736
- readonly lightBlue: "#66C4FF";
737
- readonly lightGreen: "#AEE938";
738
- readonly navy: "#10162F";
739
- readonly orange: "#FF8C00";
740
- readonly paleBlue: "#F5FCFF";
741
- readonly paleGreen: "#F5FFE3";
742
- readonly palePink: "#FFF5FF";
743
- readonly paleYellow: "#FFFAE5";
744
- readonly pink: "#F966FF";
745
- readonly paleRed: "#DC5879";
746
- readonly red: "#E91C11";
747
- readonly yellow: "#FFD300";
748
- readonly black: "#000000";
749
- readonly white: "#ffffff";
750
- readonly "shadow-white-slight": string;
751
- readonly "shadow-white-heavy": string;
752
- readonly "shadow-black-slight": string;
753
- readonly "shadow-black-heavy": string;
754
- readonly "beige-100": "#FFF0E5";
755
- readonly "blue-0": "#F5FCFF";
756
- readonly "blue-100": "#D3F2FF";
757
- readonly "blue-300": "#66C4FF";
758
- readonly "blue-400": "#3388FF";
759
- readonly "blue-500": "#1557FF";
760
- readonly "blue-800": "#1D2340";
761
- readonly "navy-100": string;
762
- readonly "navy-300": string;
763
- readonly "navy-400": string;
764
- readonly "navy-500": string;
765
- readonly "navy-800": "#10162F";
766
- readonly "navy-200": string;
767
- readonly "navy-600": string;
768
- readonly "navy-700": string;
769
- readonly "navy-900": "#0A0D1C";
770
- readonly "green-0": "#F5FFE3";
771
- readonly "green-100": "#EAFDC6";
772
- readonly "green-400": "#AEE938";
773
- readonly "green-700": "#008A27";
774
- readonly "yellow-0": "#FFFAE5";
775
- readonly "yellow-400": "#CCA900";
776
- readonly "yellow-500": "#FFD300";
777
- readonly "pink-0": "#FFF5FF";
778
- readonly "pink-400": "#F966FF";
779
- readonly "red-0": "#E85D7F";
780
- readonly "red-100": "#DC5879";
781
- readonly "red-500": "#E91C11";
782
- readonly "red-600": "#BE1809";
783
- readonly "orange-500": "#FF8C00";
784
- readonly "hyper-400": "#5533FF";
785
- readonly "hyper-500": "#3A10E5";
786
- readonly "gray-100": "#F5F5F5";
787
- readonly "gray-300": "#E0E0E0";
788
- readonly "gray-800": "#616161";
789
- readonly "gray-200": "#EEEEEE";
790
- readonly "gray-600": "#9E9E9E";
791
- readonly "gray-900": "#424242";
792
- readonly "white-100": string;
793
- readonly "white-300": string;
794
- readonly "white-400": string;
795
- readonly "white-500": string;
796
- readonly "white-200": string;
797
- readonly "white-600": string;
798
- readonly "white-700": string;
799
- }, "-">, "color">>, import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
800
- readonly mulberryPink: "#CD397E";
801
- readonly blue: "#3498DF";
802
- readonly green: "#42811A";
803
- readonly skyBlue: "#21B9E8";
804
- readonly yellow: "#E8C427";
805
- readonly red: "#BE3636";
806
- readonly gray: "#6B7B85";
807
- readonly black: "#000C14";
808
- readonly "blue-100": "#E0F2FE";
809
- readonly "blue-300": "#78BAE9";
810
- readonly "blue-400": "#3498DF";
811
- readonly "blue-500": "#0073C4";
812
- readonly "blue-800": "#002640";
813
- readonly "green-0": "#EBF6E4";
814
- readonly "green-400": "#6EAB49";
815
- readonly "green-700": "#1D4C12";
816
- readonly "yellow-0": "#FEFAE8";
817
- readonly "yellow-500": "#E8C427";
818
- readonly "pink-400": "#DF659E";
819
- readonly "red-0": "#FBE8E8";
820
- readonly "red-100": "#F4C7C7";
821
- readonly "red-500": "#BE3636";
822
- readonly "red-600": "#932729";
823
- readonly "orange-500": "#F2A036";
824
- readonly "gray-100": "#E1E6EA";
825
- readonly "gray-300": "#AAB8C1";
826
- readonly "gray-800": "#2B3841";
827
- readonly "gray-200": "#CAD4DC";
828
- readonly "gray-600": "#56646E";
829
- readonly "gray-900": "#15222B";
830
- readonly "blue-200": "#B7DDF8";
831
- readonly "blue-600": "#005998";
832
- readonly "blue-700": "#00406C";
833
- readonly "blue-900": "#001626";
834
- readonly "blue-50": "#F0F8FE";
835
- readonly "green-500": "#42811A";
836
- readonly "pink-100": "#FEE7F2";
837
- readonly "pink-500": "#CD397E";
838
- readonly "gray-400": "#80919C";
839
- readonly "gray-500": "#6B7B85";
840
- readonly "gray-700": "#404E58";
841
- readonly "gray-50": "#F3F5F7";
842
- readonly "skyBlue-100": "#E6FAFF";
843
- readonly "skyBlue-500": "#21B9E8";
844
- }, "-">, "color">>;
845
- modes: import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
846
- light: import("@codecademy/variance").LiteralPaths<{
847
- text: {
848
- _: "navy-800";
849
- accent: "navy-900";
850
- disabled: "navy-500";
851
- secondary: "navy-600";
852
- };
853
- feedback: {
854
- error: "red-600";
855
- success: "green-700";
856
- warning: "yellow";
857
- };
858
- background: {
859
- _: "white";
860
- contrast: "white";
861
- current: "white";
862
- primary: "beige";
863
- selected: "navy-100";
864
- disabled: "navy-200";
865
- hover: "navy-200";
866
- };
867
- shadow: {
868
- opaque: "shadow-white-heavy";
869
- solid: "gray-200";
870
- };
871
- primary: {
872
- _: "hyper-500";
873
- hover: "hyper-400";
874
- inverse: "yellow-500";
875
- };
876
- secondary: {
877
- _: "navy-800";
878
- hover: "navy-700";
879
- };
880
- danger: {
881
- _: "red-500";
882
- hover: "red-600";
883
- };
884
- interface: {
885
- _: "hyper-500";
886
- hover: "hyper-400";
887
- };
888
- }, "-", "_">;
889
- dark: import("@codecademy/variance").LiteralPaths<{
890
- text: {
891
- _: "white";
892
- accent: "beige";
893
- disabled: "white-500";
894
- secondary: "white-600";
895
- };
896
- feedback: {
897
- error: "red-0";
898
- success: "green-400";
899
- warning: "yellow-0";
900
- };
901
- background: {
902
- _: "navy-800";
903
- contrast: "black";
904
- current: "navy-800";
905
- primary: "navy-900";
906
- selected: "white-100";
907
- disabled: "white-200";
908
- hover: "white-200";
909
- };
910
- shadow: {
911
- opaque: "shadow-black-heavy";
912
- solid: "black";
913
- };
914
- primary: {
915
- _: "yellow-500";
916
- hover: "yellow-400";
917
- inverse: "hyper-500";
918
- };
919
- secondary: {
920
- _: "white";
921
- hover: "white-700";
922
- };
923
- danger: {
924
- _: "red-0";
925
- hover: "red-100";
926
- };
927
- interface: {
928
- _: "yellow-500";
929
- hover: "yellow-400";
930
- };
931
- }, "-", "_">;
932
- }>, {
933
- light: import("@codecademy/variance").LiteralPaths<{
934
- text: {
935
- _: "gray-900";
936
- accent: "blue";
937
- disabled: "gray-500";
938
- secondary: "gray-500";
939
- };
940
- background: {
941
- _: "white";
942
- contrast: "white";
943
- current: "white";
944
- primary: "beige";
945
- selected: "blue-50";
946
- disabled: "gray-100";
947
- hover: "gray-200";
948
- };
949
- primary: {
950
- _: "blue";
951
- hover: "blue-400";
952
- inverse: "white";
953
- };
954
- secondary: {
955
- _: "gray-900";
956
- hover: "gray-800";
957
- };
958
- interface: {
959
- _: "blue";
960
- hover: "blue-400";
961
- };
962
- danger: {
963
- _: "red";
964
- hover: "red-600";
965
- };
966
- }, "-", "_">;
967
- dark: import("@codecademy/variance").LiteralPaths<{
968
- text: {
969
- _: "white";
970
- accent: "blue";
971
- disabled: "gray-100";
972
- secondary: "gray-200";
973
- };
974
- background: {
975
- _: "gray-900";
976
- current: "gray-800";
977
- primary: "gray-900";
978
- selected: "gray-700";
979
- disabled: "gray-500";
980
- hover: "gray-600";
981
- };
982
- primary: {
983
- _: "skyBlue";
984
- hover: "skyBlue-100";
985
- inverse: "blue";
986
- };
987
- secondary: {
988
- _: "white";
989
- hover: "blue-50";
990
- };
991
- interface: {
992
- _: "white";
993
- hover: "blue-50";
994
- };
995
- }, "-", "_">;
996
- }>;
997
- mode: "light" | "dark";
998
- _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" | "mulberryPink") => string;
999
- }> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
1000
- export type EnterpriseThemeShape = typeof enterpriseTheme;
1001
- export interface EnterpriseTheme extends EnterpriseThemeShape {
1002
- }
package/dist/themes/enterprise.js DELETED
@@ -1,68 +0,0 @@
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();