@codecademy/gamut-styles 17.4.2-alpha.1ba2de.0 → 17.5.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.
- package/dist/themes/admin.d.ts +6 -0
- package/dist/themes/core.d.ts +3 -0
- package/dist/themes/index.d.ts +0 -1
- package/dist/themes/index.js +1 -2
- package/dist/themes/platform.d.ts +6 -0
- package/dist/variables/colors.d.ts +2 -100
- package/dist/variables/colors.js +1 -74
- package/dist/variables/deprecated-colors.d.ts +1 -1
- package/package.json +2 -2
- package/dist/themes/enterprise.d.ts +0 -1050
- package/dist/themes/enterprise.js +0 -68
package/dist/themes/admin.d.ts
CHANGED
|
@@ -132,6 +132,7 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
132
132
|
readonly "red-100": "#DC5879";
|
|
133
133
|
readonly "red-500": "#E91C11";
|
|
134
134
|
readonly "red-600": "#BE1809";
|
|
135
|
+
readonly "orange-100": "#FFE8CC";
|
|
135
136
|
readonly "orange-500": "#FF8C00";
|
|
136
137
|
readonly "hyper-400": "#5533FF";
|
|
137
138
|
readonly "hyper-500": "#3A10E5";
|
|
@@ -297,6 +298,7 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
297
298
|
readonly "red-100": "#DC5879";
|
|
298
299
|
readonly "red-500": "#E91C11";
|
|
299
300
|
readonly "red-600": "#BE1809";
|
|
301
|
+
readonly "orange-100": "#FFE8CC";
|
|
300
302
|
readonly "orange-500": "#FF8C00";
|
|
301
303
|
readonly "hyper-400": "#5533FF";
|
|
302
304
|
readonly "hyper-500": "#3A10E5";
|
|
@@ -467,6 +469,7 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
467
469
|
readonly "red-100": "#DC5879";
|
|
468
470
|
readonly "red-500": "#E91C11";
|
|
469
471
|
readonly "red-600": "#BE1809";
|
|
472
|
+
readonly "orange-100": "#FFE8CC";
|
|
470
473
|
readonly "orange-500": "#FF8C00";
|
|
471
474
|
readonly "hyper-400": "#5533FF";
|
|
472
475
|
readonly "hyper-500": "#3A10E5";
|
|
@@ -549,6 +552,7 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
549
552
|
readonly "red-100": "#DC5879";
|
|
550
553
|
readonly "red-500": "#E91C11";
|
|
551
554
|
readonly "red-600": "#BE1809";
|
|
555
|
+
readonly "orange-100": "#FFE8CC";
|
|
552
556
|
readonly "orange-500": "#FF8C00";
|
|
553
557
|
readonly "hyper-400": "#5533FF";
|
|
554
558
|
readonly "hyper-500": "#3A10E5";
|
|
@@ -713,6 +717,7 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
713
717
|
readonly "red-100": "#DC5879";
|
|
714
718
|
readonly "red-500": "#E91C11";
|
|
715
719
|
readonly "red-600": "#BE1809";
|
|
720
|
+
readonly "orange-100": "#FFE8CC";
|
|
716
721
|
readonly "orange-500": "#FF8C00";
|
|
717
722
|
readonly "hyper-400": "#5533FF";
|
|
718
723
|
readonly "hyper-500": "#3A10E5";
|
|
@@ -895,6 +900,7 @@ export declare const adminTheme: Record<"breakpoints", {
|
|
|
895
900
|
readonly "red-100": "#DC5879";
|
|
896
901
|
readonly "red-500": "#E91C11";
|
|
897
902
|
readonly "red-600": "#BE1809";
|
|
903
|
+
readonly "orange-100": "#FFE8CC";
|
|
898
904
|
readonly "orange-500": "#FF8C00";
|
|
899
905
|
readonly "hyper-400": "#5533FF";
|
|
900
906
|
readonly "hyper-500": "#3A10E5";
|
package/dist/themes/core.d.ts
CHANGED
|
@@ -131,6 +131,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
|
|
|
131
131
|
readonly "red-100": "#DC5879";
|
|
132
132
|
readonly "red-500": "#E91C11";
|
|
133
133
|
readonly "red-600": "#BE1809";
|
|
134
|
+
readonly "orange-100": "#FFE8CC";
|
|
134
135
|
readonly "orange-500": "#FF8C00";
|
|
135
136
|
readonly "hyper-400": "#5533FF";
|
|
136
137
|
readonly "hyper-500": "#3A10E5";
|
|
@@ -296,6 +297,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
|
|
|
296
297
|
readonly "red-100": "#DC5879";
|
|
297
298
|
readonly "red-500": "#E91C11";
|
|
298
299
|
readonly "red-600": "#BE1809";
|
|
300
|
+
readonly "orange-100": "#FFE8CC";
|
|
299
301
|
readonly "orange-500": "#FF8C00";
|
|
300
302
|
readonly "hyper-400": "#5533FF";
|
|
301
303
|
readonly "hyper-500": "#3A10E5";
|
|
@@ -466,6 +468,7 @@ export declare const coreTheme: Record<"elements", Record<"elements", import("@c
|
|
|
466
468
|
readonly "red-100": "#DC5879";
|
|
467
469
|
readonly "red-500": "#E91C11";
|
|
468
470
|
readonly "red-600": "#BE1809";
|
|
471
|
+
readonly "orange-100": "#FFE8CC";
|
|
469
472
|
readonly "orange-500": "#FF8C00";
|
|
470
473
|
readonly "hyper-400": "#5533FF";
|
|
471
474
|
readonly "hyper-500": "#3A10E5";
|
package/dist/themes/index.d.ts
CHANGED
package/dist/themes/index.js
CHANGED
|
@@ -142,6 +142,7 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
142
142
|
readonly "red-100": "#DC5879";
|
|
143
143
|
readonly "red-500": "#E91C11";
|
|
144
144
|
readonly "red-600": "#BE1809";
|
|
145
|
+
readonly "orange-100": "#FFE8CC";
|
|
145
146
|
readonly "orange-500": "#FF8C00";
|
|
146
147
|
readonly "hyper-400": "#5533FF";
|
|
147
148
|
readonly "hyper-500": "#3A10E5";
|
|
@@ -307,6 +308,7 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
307
308
|
readonly "red-100": "#DC5879";
|
|
308
309
|
readonly "red-500": "#E91C11";
|
|
309
310
|
readonly "red-600": "#BE1809";
|
|
311
|
+
readonly "orange-100": "#FFE8CC";
|
|
310
312
|
readonly "orange-500": "#FF8C00";
|
|
311
313
|
readonly "hyper-400": "#5533FF";
|
|
312
314
|
readonly "hyper-500": "#3A10E5";
|
|
@@ -477,6 +479,7 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
477
479
|
readonly "red-100": "#DC5879";
|
|
478
480
|
readonly "red-500": "#E91C11";
|
|
479
481
|
readonly "red-600": "#BE1809";
|
|
482
|
+
readonly "orange-100": "#FFE8CC";
|
|
480
483
|
readonly "orange-500": "#FF8C00";
|
|
481
484
|
readonly "hyper-400": "#5533FF";
|
|
482
485
|
readonly "hyper-500": "#3A10E5";
|
|
@@ -621,6 +624,7 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
621
624
|
readonly "red-100": "#DC5879";
|
|
622
625
|
readonly "red-500": "#E91C11";
|
|
623
626
|
readonly "red-600": "#BE1809";
|
|
627
|
+
readonly "orange-100": "#FFE8CC";
|
|
624
628
|
readonly "orange-500": "#FF8C00";
|
|
625
629
|
readonly "hyper-400": "#5533FF";
|
|
626
630
|
readonly "hyper-500": "#3A10E5";
|
|
@@ -785,6 +789,7 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
785
789
|
readonly "red-100": "#DC5879";
|
|
786
790
|
readonly "red-500": "#E91C11";
|
|
787
791
|
readonly "red-600": "#BE1809";
|
|
792
|
+
readonly "orange-100": "#FFE8CC";
|
|
788
793
|
readonly "orange-500": "#FF8C00";
|
|
789
794
|
readonly "hyper-400": "#5533FF";
|
|
790
795
|
readonly "hyper-500": "#3A10E5";
|
|
@@ -1029,6 +1034,7 @@ export declare const platformTheme: Record<"breakpoints", {
|
|
|
1029
1034
|
readonly "red-100": "#DC5879";
|
|
1030
1035
|
readonly "red-500": "#E91C11";
|
|
1031
1036
|
readonly "red-600": "#BE1809";
|
|
1037
|
+
readonly "orange-100": "#FFE8CC";
|
|
1032
1038
|
readonly "orange-500": "#FF8C00";
|
|
1033
1039
|
readonly "hyper-400": "#5533FF";
|
|
1034
1040
|
readonly "hyper-500": "#3A10E5";
|
|
@@ -43,6 +43,7 @@ export declare const coreSwatches: {
|
|
|
43
43
|
readonly '600': "#BE1809";
|
|
44
44
|
};
|
|
45
45
|
readonly orange: {
|
|
46
|
+
readonly '100': "#FFE8CC";
|
|
46
47
|
readonly '500': "#FF8C00";
|
|
47
48
|
};
|
|
48
49
|
readonly hyper: {
|
|
@@ -139,6 +140,7 @@ export declare const corePalette: {
|
|
|
139
140
|
readonly "red-100": "#DC5879";
|
|
140
141
|
readonly "red-500": "#E91C11";
|
|
141
142
|
readonly "red-600": "#BE1809";
|
|
143
|
+
readonly "orange-100": "#FFE8CC";
|
|
142
144
|
readonly "orange-500": "#FF8C00";
|
|
143
145
|
readonly "hyper-400": "#5533FF";
|
|
144
146
|
readonly "hyper-500": "#3A10E5";
|
|
@@ -191,103 +193,3 @@ export declare const platformPalette: {
|
|
|
191
193
|
readonly "teal-500": "#027E97";
|
|
192
194
|
readonly "purple-300": "#B3CCFF";
|
|
193
195
|
};
|
|
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
|
@@ -64,6 +64,7 @@ export const coreSwatches = {
|
|
|
64
64
|
'600': '#BE1809'
|
|
65
65
|
},
|
|
66
66
|
orange: {
|
|
67
|
+
'100': '#FFE8CC',
|
|
67
68
|
'500': '#FF8C00'
|
|
68
69
|
},
|
|
69
70
|
hyper: {
|
|
@@ -147,78 +148,4 @@ const truePlatformColors = {
|
|
|
147
148
|
export const platformPalette = {
|
|
148
149
|
...flattenScale(platformSwatches),
|
|
149
150
|
...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
151
|
};
|
|
@@ -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.
|
|
4
|
+
"version": "17.5.0",
|
|
5
5
|
"author": "Jake Hiller <jake@codecademy.com>",
|
|
6
6
|
"dependencies": {
|
|
7
7
|
"@codecademy/variance": "0.22.1",
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"scripts": {
|
|
35
35
|
"build": "nx build @codecademy/gamut-styles"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "eba8e451ae75809648265f4d1edc55314a1557b0"
|
|
38
38
|
}
|