@codecademy/gamut-styles 12.1.2-alpha.a809e8.0 → 12.1.2-alpha.da878e.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/CHANGELOG.md +1 -1
- package/dist/AssetProvider.d.ts +3 -0
- package/dist/AssetProvider.js +22 -0
- package/dist/AssetProvider.js.map +1 -0
- package/dist/Background.d.ts +6 -0
- package/dist/Background.js +104 -0
- package/dist/Background.js.map +1 -0
- package/dist/ColorMode.d.ts +1277 -0
- package/dist/ColorMode.js +107 -0
- package/dist/ColorMode.js.map +1 -0
- package/dist/GamutProvider.d.ts +15 -0
- package/dist/GamutProvider.js +56 -0
- package/dist/GamutProvider.js.map +1 -0
- package/dist/__tests__/Background-test.d.ts +1 -0
- package/dist/__tests__/GamutProvider-test.d.ts +1 -0
- package/dist/cache/__tests__/createEmotionCache-test.d.ts +1 -0
- package/dist/cache/createEmotionCache.d.ts +4 -0
- package/dist/cache/createEmotionCache.js +49 -0
- package/dist/cache/createEmotionCache.js.map +1 -0
- package/dist/cache/index.d.ts +1 -0
- package/dist/cache/index.js +1 -0
- package/dist/cache/index.js.map +1 -0
- package/dist/cache/stylisPlugins/focusVisible.d.ts +2 -0
- package/dist/cache/stylisPlugins/focusVisible.js +10 -0
- package/dist/cache/stylisPlugins/focusVisible.js.map +1 -0
- package/dist/cache/stylisPlugins/index.d.ts +1 -0
- package/dist/cache/stylisPlugins/index.js +1 -0
- package/dist/cache/stylisPlugins/index.js.map +1 -0
- package/dist/globals/Reboot.d.ts +2 -0
- package/dist/globals/Reboot.js +9 -0
- package/dist/globals/Reboot.js.map +1 -0
- package/dist/globals/Typography.d.ts +2 -0
- package/dist/globals/Typography.js +25 -0
- package/dist/globals/Typography.js.map +1 -0
- package/dist/globals/Variables.d.ts +5 -0
- package/dist/globals/Variables.js +35 -0
- package/dist/globals/Variables.js.map +1 -0
- package/dist/globals/index.d.ts +2 -0
- package/dist/globals/index.js +2 -0
- package/dist/globals/index.js.map +1 -0
- package/dist/index.d.ts +12 -0
- package/dist/index.js +12 -0
- package/dist/index.js.map +1 -0
- package/dist/remoteAssets/fonts.d.ts +26 -0
- package/dist/remoteAssets/fonts.js +31 -0
- package/dist/remoteAssets/fonts.js.map +1 -0
- package/dist/styles/boxShadow.d.ts +26 -0
- package/dist/styles/boxShadow.js +52 -0
- package/dist/styles/boxShadow.js.map +1 -0
- package/dist/styles/fontSmoothing.d.ts +29 -0
- package/dist/styles/fontSmoothing.js +29 -0
- package/dist/styles/fontSmoothing.js.map +1 -0
- package/dist/styles/index.d.ts +7 -0
- package/dist/styles/index.js +7 -0
- package/dist/styles/index.js.map +1 -0
- package/dist/styles/noSelect.d.ts +1 -0
- package/dist/styles/noSelect.js +12 -0
- package/dist/styles/noSelect.js.map +1 -0
- package/dist/styles/pxRem.d.ts +1 -0
- package/dist/styles/pxRem.js +4 -0
- package/dist/styles/pxRem.js.map +1 -0
- package/dist/styles/responsive.d.ts +6 -0
- package/dist/styles/responsive.js +14 -0
- package/dist/styles/responsive.js.map +1 -0
- package/dist/styles/screenReaderOnly.d.ts +2 -0
- package/dist/styles/screenReaderOnly.js +21 -0
- package/dist/styles/screenReaderOnly.js.map +1 -0
- package/dist/styles/transitionConcat.d.ts +3 -0
- package/dist/styles/transitionConcat.js +7 -0
- package/dist/styles/transitionConcat.js.map +1 -0
- package/dist/themes/__tests__/theme-test.d.ts +1 -0
- package/dist/themes/admin.d.ts +787 -0
- package/dist/themes/admin.js +11 -0
- package/dist/themes/admin.js.map +1 -0
- package/dist/themes/core.d.ts +432 -0
- package/dist/themes/core.js +104 -0
- package/dist/themes/core.js.map +1 -0
- package/dist/themes/index.d.ts +3 -0
- package/dist/themes/index.js +3 -0
- package/dist/themes/index.js.map +1 -0
- package/dist/themes/platform.d.ts +940 -0
- package/dist/themes/platform.js +72 -0
- package/dist/themes/platform.js.map +1 -0
- package/dist/typings/theme.d.ts +6 -0
- package/dist/utilities/__tests__/themed-test.d.ts +1 -0
- package/dist/utilities/index.d.ts +1 -0
- package/dist/utilities/index.js +1 -0
- package/dist/utilities/index.js.map +1 -0
- package/dist/utilities/themed.d.ts +14 -0
- package/dist/utilities/themed.js +16 -0
- package/dist/utilities/themed.js.map +1 -0
- package/dist/variables/colors.d.ts +173 -0
- package/dist/variables/colors.js +136 -0
- package/dist/variables/colors.js.map +1 -0
- package/dist/variables/deprecated-colors.d.ts +156 -0
- package/dist/variables/deprecated-colors.js +151 -0
- package/dist/variables/deprecated-colors.js.map +1 -0
- package/dist/variables/elements.d.ts +11 -0
- package/dist/variables/elements.js +12 -0
- package/dist/variables/elements.js.map +1 -0
- package/dist/variables/index.d.ts +7 -0
- package/dist/variables/index.js +8 -0
- package/dist/variables/index.js.map +1 -0
- package/dist/variables/responsive.d.ts +19 -0
- package/dist/variables/responsive.js +23 -0
- package/dist/variables/responsive.js.map +1 -0
- package/dist/variables/spacing.d.ts +13 -0
- package/dist/variables/spacing.js +14 -0
- package/dist/variables/spacing.js.map +1 -0
- package/dist/variables/timing.d.ts +10 -0
- package/dist/variables/timing.js +10 -0
- package/dist/variables/timing.js.map +1 -0
- package/dist/variables/typography.d.ts +31 -0
- package/dist/variables/typography.js +32 -0
- package/dist/variables/typography.js.map +1 -0
- package/dist/variance/config.d.ts +1002 -0
- package/dist/variance/config.js +473 -0
- package/dist/variance/config.js.map +1 -0
- package/dist/variance/index.d.ts +3 -0
- package/dist/variance/index.js +4 -0
- package/dist/variance/index.js.map +1 -0
- package/dist/variance/props.d.ts +1865 -0
- package/dist/variance/props.js +23 -0
- package/dist/variance/props.js.map +1 -0
- package/dist/variance/utils.d.ts +29 -0
- package/dist/variance/utils.js +49 -0
- package/dist/variance/utils.js.map +1 -0
- package/package.json +3 -3
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { createTheme } from '@codecademy/variance';
|
|
2
|
+
import { coreTheme } from './core';
|
|
3
|
+
export var adminTheme = createTheme(coreTheme).addColorModes('light', {
|
|
4
|
+
light: {
|
|
5
|
+
primary: {
|
|
6
|
+
_: 'blue-500',
|
|
7
|
+
hover: 'blue-400'
|
|
8
|
+
}
|
|
9
|
+
},
|
|
10
|
+
dark: {}
|
|
11
|
+
}).build();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"admin.js","sourceRoot":"","sources":["../../src/themes/admin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,MAAM,CAAC,MAAM,UAAU,GAAG,WAAW,CAAC,SAAS,CAAC;KAC7C,aAAa,CAAC,OAAO,EAAE;IACtB,KAAK,EAAE;QACL,OAAO,EAAE;YACP,CAAC,EAAE,UAAU;YACb,KAAK,EAAE,UAAU;SAClB;KACF;IACD,IAAI,EAAE,EAAE;CACT,CAAC;KACD,KAAK,EAAE,CAAC"}
|
|
@@ -0,0 +1,432 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @description This is the core theme that all other Codecademy themes are extended from
|
|
3
|
+
* and is the only theme that gamut components are typed to. This ensures that gamut components
|
|
4
|
+
* are guaranteed to be interoperable between all contexts, but with differing behaviors.
|
|
5
|
+
*/
|
|
6
|
+
export declare const coreTheme: Record<"elements", Record<"elements", import("@codecademy/variance").KeyAsVariable<{
|
|
7
|
+
readonly headerHeight: {
|
|
8
|
+
readonly base: "4rem";
|
|
9
|
+
readonly md: "5rem";
|
|
10
|
+
};
|
|
11
|
+
readonly headerZ: 15;
|
|
12
|
+
}, "elements">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
|
|
13
|
+
xs: string;
|
|
14
|
+
sm: string;
|
|
15
|
+
md: string;
|
|
16
|
+
lg: string;
|
|
17
|
+
xl: string;
|
|
18
|
+
}> & import("@codecademy/variance/dist/createTheme/types").Merge<{
|
|
19
|
+
breakpoints: {
|
|
20
|
+
xs: string;
|
|
21
|
+
sm: string;
|
|
22
|
+
md: string;
|
|
23
|
+
lg: string;
|
|
24
|
+
xl: string;
|
|
25
|
+
};
|
|
26
|
+
fontSize: {
|
|
27
|
+
readonly 64: string;
|
|
28
|
+
readonly 44: string;
|
|
29
|
+
readonly 34: string;
|
|
30
|
+
readonly 26: string;
|
|
31
|
+
readonly 22: string;
|
|
32
|
+
readonly 20: string;
|
|
33
|
+
readonly 18: string;
|
|
34
|
+
readonly 16: string;
|
|
35
|
+
readonly 14: string;
|
|
36
|
+
};
|
|
37
|
+
fontFamily: {
|
|
38
|
+
readonly accent: "\"Suisse\", \"Apercu\", -apple-system, BlinkMacSystemFont,\n\"Segoe UI\", \"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\",\n\"Helvetica Neue\", sans-serif";
|
|
39
|
+
readonly base: "\"Apercu\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
|
|
40
|
+
readonly monospace: "Monaco, Menlo, \"Ubuntu Mono\", \"Droid Sans Mono\", Consolas,\nmonospace";
|
|
41
|
+
readonly system: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\",\n\"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif";
|
|
42
|
+
};
|
|
43
|
+
lineHeight: {
|
|
44
|
+
readonly base: 1.5;
|
|
45
|
+
readonly title: 1.1;
|
|
46
|
+
};
|
|
47
|
+
fontWeight: {
|
|
48
|
+
readonly base: 400;
|
|
49
|
+
readonly title: 700;
|
|
50
|
+
readonly 700: 700;
|
|
51
|
+
readonly 400: 400;
|
|
52
|
+
};
|
|
53
|
+
spacing: {
|
|
54
|
+
readonly 0: 0;
|
|
55
|
+
readonly 4: string;
|
|
56
|
+
readonly 8: string;
|
|
57
|
+
readonly 12: string;
|
|
58
|
+
readonly 16: string;
|
|
59
|
+
readonly 24: string;
|
|
60
|
+
readonly 32: string;
|
|
61
|
+
readonly 40: string;
|
|
62
|
+
readonly 48: string;
|
|
63
|
+
readonly 64: string;
|
|
64
|
+
readonly 96: string;
|
|
65
|
+
};
|
|
66
|
+
elements: {
|
|
67
|
+
readonly headerHeight: {
|
|
68
|
+
readonly base: "4rem";
|
|
69
|
+
readonly md: "5rem";
|
|
70
|
+
};
|
|
71
|
+
readonly headerZ: 15;
|
|
72
|
+
};
|
|
73
|
+
} & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
|
|
74
|
+
readonly beige: "#FFF0E5";
|
|
75
|
+
readonly blue: "#1557FF";
|
|
76
|
+
readonly green: "#008A27";
|
|
77
|
+
readonly hyper: "#3A10E5";
|
|
78
|
+
readonly lightBlue: "#66C4FF";
|
|
79
|
+
readonly lightGreen: "#AEE938";
|
|
80
|
+
readonly navy: "#10162F";
|
|
81
|
+
readonly orange: "#FF8C00";
|
|
82
|
+
readonly paleBlue: "#F5FCFF";
|
|
83
|
+
readonly paleGreen: "#F5FFE3";
|
|
84
|
+
readonly palePink: "#FFF5FF";
|
|
85
|
+
readonly paleYellow: "#FFFAE5";
|
|
86
|
+
readonly pink: "#F966FF";
|
|
87
|
+
readonly paleRed: "#DC5879";
|
|
88
|
+
readonly red: "#E91C11";
|
|
89
|
+
readonly yellow: "#FFD300";
|
|
90
|
+
readonly black: "#000000";
|
|
91
|
+
readonly white: "#ffffff";
|
|
92
|
+
readonly "shadow-black-slight": string;
|
|
93
|
+
readonly "shadow-black-heavy": string;
|
|
94
|
+
readonly "shadow-white-slight": string;
|
|
95
|
+
readonly "shadow-white-heavy": string;
|
|
96
|
+
readonly "beige-100": "#FFF0E5";
|
|
97
|
+
readonly "blue-0": "#F5FCFF";
|
|
98
|
+
readonly "blue-300": "#66C4FF";
|
|
99
|
+
readonly "blue-400": "#3388FF";
|
|
100
|
+
readonly "blue-500": "#1557FF";
|
|
101
|
+
readonly "blue-800": "#1D2340";
|
|
102
|
+
readonly "navy-100": "#F3F3F5";
|
|
103
|
+
readonly "navy-300": "#C3C5CB";
|
|
104
|
+
readonly "navy-400": "#9FA2AC";
|
|
105
|
+
readonly "navy-500": "#707382";
|
|
106
|
+
readonly "navy-800": "#10162F";
|
|
107
|
+
readonly "navy-200": "#DBDCE0";
|
|
108
|
+
readonly "navy-600": "#585C6D";
|
|
109
|
+
readonly "navy-700": "#34394C";
|
|
110
|
+
readonly "navy-900": "#0A0D1C";
|
|
111
|
+
readonly "green-0": "#F5FFE3";
|
|
112
|
+
readonly "green-400": "#AEE938";
|
|
113
|
+
readonly "green-700": "#008A27";
|
|
114
|
+
readonly "yellow-0": "#FFFAE5";
|
|
115
|
+
readonly "yellow-400": "#CCA900";
|
|
116
|
+
readonly "yellow-500": "#FFD300";
|
|
117
|
+
readonly "pink-0": "#FFF5FF";
|
|
118
|
+
readonly "pink-400": "#F966FF";
|
|
119
|
+
readonly "red-100": "#DC5879";
|
|
120
|
+
readonly "red-0": "#E85D7F";
|
|
121
|
+
readonly "red-500": "#E91C11";
|
|
122
|
+
readonly "red-600": "#BE1809";
|
|
123
|
+
readonly "orange-500": "#FF8C00";
|
|
124
|
+
readonly "hyper-400": "#5533FF";
|
|
125
|
+
readonly "hyper-500": "#3A10E5";
|
|
126
|
+
readonly "gray-100": "#F5F5F5";
|
|
127
|
+
readonly "gray-300": "#E0E0E0";
|
|
128
|
+
readonly "gray-800": "#616161";
|
|
129
|
+
readonly "gray-200": "#EEEEEE";
|
|
130
|
+
readonly "gray-600": "#9E9E9E";
|
|
131
|
+
readonly "gray-900": "#424242";
|
|
132
|
+
}, "-", "">, "color">>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
|
|
133
|
+
colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
|
|
134
|
+
text: {
|
|
135
|
+
_: "navy-800";
|
|
136
|
+
accent: "navy-900";
|
|
137
|
+
disabled: "navy-500";
|
|
138
|
+
};
|
|
139
|
+
feedback: {
|
|
140
|
+
error: "red-600";
|
|
141
|
+
success: "green-700";
|
|
142
|
+
warning: "yellow";
|
|
143
|
+
};
|
|
144
|
+
background: {
|
|
145
|
+
_: "white";
|
|
146
|
+
current: "white";
|
|
147
|
+
primary: "beige";
|
|
148
|
+
selected: "navy-100";
|
|
149
|
+
disabled: "navy-200";
|
|
150
|
+
hover: "navy-200";
|
|
151
|
+
};
|
|
152
|
+
shadow: {
|
|
153
|
+
opaque: "shadow-white-heavy";
|
|
154
|
+
solid: "gray-200";
|
|
155
|
+
};
|
|
156
|
+
primary: {
|
|
157
|
+
_: "hyper-500";
|
|
158
|
+
hover: "hyper-400";
|
|
159
|
+
};
|
|
160
|
+
secondary: {
|
|
161
|
+
_: "navy-800";
|
|
162
|
+
hover: "navy-700";
|
|
163
|
+
};
|
|
164
|
+
danger: {
|
|
165
|
+
_: "red-500";
|
|
166
|
+
hover: "red-600";
|
|
167
|
+
};
|
|
168
|
+
interface: {
|
|
169
|
+
_: "hyper-500";
|
|
170
|
+
hover: "hyper-400";
|
|
171
|
+
};
|
|
172
|
+
} | {
|
|
173
|
+
text: {
|
|
174
|
+
_: "white";
|
|
175
|
+
accent: "beige";
|
|
176
|
+
disabled: "navy-200";
|
|
177
|
+
};
|
|
178
|
+
feedback: {
|
|
179
|
+
error: "red-0";
|
|
180
|
+
success: "green-0";
|
|
181
|
+
warning: "yellow";
|
|
182
|
+
};
|
|
183
|
+
background: {
|
|
184
|
+
_: "navy-800";
|
|
185
|
+
current: "navy-800";
|
|
186
|
+
primary: "navy-900";
|
|
187
|
+
selected: "navy-700";
|
|
188
|
+
disabled: "navy-500";
|
|
189
|
+
hover: "navy-900";
|
|
190
|
+
};
|
|
191
|
+
shadow: {
|
|
192
|
+
opaque: "shadow-black-heavy";
|
|
193
|
+
solid: "black";
|
|
194
|
+
};
|
|
195
|
+
primary: {
|
|
196
|
+
_: "yellow-500";
|
|
197
|
+
hover: "yellow-400";
|
|
198
|
+
};
|
|
199
|
+
secondary: {
|
|
200
|
+
_: "white";
|
|
201
|
+
hover: "navy-200";
|
|
202
|
+
};
|
|
203
|
+
danger: {
|
|
204
|
+
_: "red-0";
|
|
205
|
+
hover: "red-100";
|
|
206
|
+
};
|
|
207
|
+
interface: {
|
|
208
|
+
_: "yellow-500";
|
|
209
|
+
hover: "yellow-400";
|
|
210
|
+
};
|
|
211
|
+
}, "-", "_">, "colors"> & import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
|
|
212
|
+
readonly beige: "#FFF0E5";
|
|
213
|
+
readonly blue: "#1557FF";
|
|
214
|
+
readonly green: "#008A27";
|
|
215
|
+
readonly hyper: "#3A10E5";
|
|
216
|
+
readonly lightBlue: "#66C4FF";
|
|
217
|
+
readonly lightGreen: "#AEE938";
|
|
218
|
+
readonly navy: "#10162F";
|
|
219
|
+
readonly orange: "#FF8C00";
|
|
220
|
+
readonly paleBlue: "#F5FCFF";
|
|
221
|
+
readonly paleGreen: "#F5FFE3";
|
|
222
|
+
readonly palePink: "#FFF5FF";
|
|
223
|
+
readonly paleYellow: "#FFFAE5";
|
|
224
|
+
readonly pink: "#F966FF";
|
|
225
|
+
readonly paleRed: "#DC5879";
|
|
226
|
+
readonly red: "#E91C11";
|
|
227
|
+
readonly yellow: "#FFD300";
|
|
228
|
+
readonly black: "#000000";
|
|
229
|
+
readonly white: "#ffffff";
|
|
230
|
+
readonly "shadow-black-slight": string;
|
|
231
|
+
readonly "shadow-black-heavy": string;
|
|
232
|
+
readonly "shadow-white-slight": string;
|
|
233
|
+
readonly "shadow-white-heavy": string;
|
|
234
|
+
readonly "beige-100": "#FFF0E5";
|
|
235
|
+
readonly "blue-0": "#F5FCFF";
|
|
236
|
+
readonly "blue-300": "#66C4FF";
|
|
237
|
+
readonly "blue-400": "#3388FF";
|
|
238
|
+
readonly "blue-500": "#1557FF";
|
|
239
|
+
readonly "blue-800": "#1D2340";
|
|
240
|
+
readonly "navy-100": "#F3F3F5";
|
|
241
|
+
readonly "navy-300": "#C3C5CB";
|
|
242
|
+
readonly "navy-400": "#9FA2AC";
|
|
243
|
+
readonly "navy-500": "#707382";
|
|
244
|
+
readonly "navy-800": "#10162F";
|
|
245
|
+
readonly "navy-200": "#DBDCE0";
|
|
246
|
+
readonly "navy-600": "#585C6D";
|
|
247
|
+
readonly "navy-700": "#34394C";
|
|
248
|
+
readonly "navy-900": "#0A0D1C";
|
|
249
|
+
readonly "green-0": "#F5FFE3";
|
|
250
|
+
readonly "green-400": "#AEE938";
|
|
251
|
+
readonly "green-700": "#008A27";
|
|
252
|
+
readonly "yellow-0": "#FFFAE5";
|
|
253
|
+
readonly "yellow-400": "#CCA900";
|
|
254
|
+
readonly "yellow-500": "#FFD300";
|
|
255
|
+
readonly "pink-0": "#FFF5FF";
|
|
256
|
+
readonly "pink-400": "#F966FF";
|
|
257
|
+
readonly "red-100": "#DC5879";
|
|
258
|
+
readonly "red-0": "#E85D7F";
|
|
259
|
+
readonly "red-500": "#E91C11";
|
|
260
|
+
readonly "red-600": "#BE1809";
|
|
261
|
+
readonly "orange-500": "#FF8C00";
|
|
262
|
+
readonly "hyper-400": "#5533FF";
|
|
263
|
+
readonly "hyper-500": "#3A10E5";
|
|
264
|
+
readonly "gray-100": "#F5F5F5";
|
|
265
|
+
readonly "gray-300": "#E0E0E0";
|
|
266
|
+
readonly "gray-800": "#616161";
|
|
267
|
+
readonly "gray-200": "#EEEEEE";
|
|
268
|
+
readonly "gray-600": "#9E9E9E";
|
|
269
|
+
readonly "gray-900": "#424242";
|
|
270
|
+
}, "-", "">, "color">;
|
|
271
|
+
modes: import("@codecademy/variance/dist/createTheme/types").Merge<unknown, {
|
|
272
|
+
light: import("@codecademy/variance").LiteralPaths<{
|
|
273
|
+
text: {
|
|
274
|
+
_: "navy-800";
|
|
275
|
+
accent: "navy-900";
|
|
276
|
+
disabled: "navy-500";
|
|
277
|
+
};
|
|
278
|
+
feedback: {
|
|
279
|
+
error: "red-600";
|
|
280
|
+
success: "green-700";
|
|
281
|
+
warning: "yellow";
|
|
282
|
+
};
|
|
283
|
+
background: {
|
|
284
|
+
_: "white";
|
|
285
|
+
current: "white";
|
|
286
|
+
primary: "beige";
|
|
287
|
+
selected: "navy-100";
|
|
288
|
+
disabled: "navy-200";
|
|
289
|
+
hover: "navy-200";
|
|
290
|
+
};
|
|
291
|
+
shadow: {
|
|
292
|
+
opaque: "shadow-white-heavy";
|
|
293
|
+
solid: "gray-200";
|
|
294
|
+
};
|
|
295
|
+
primary: {
|
|
296
|
+
_: "hyper-500";
|
|
297
|
+
hover: "hyper-400";
|
|
298
|
+
};
|
|
299
|
+
secondary: {
|
|
300
|
+
_: "navy-800";
|
|
301
|
+
hover: "navy-700";
|
|
302
|
+
};
|
|
303
|
+
danger: {
|
|
304
|
+
_: "red-500";
|
|
305
|
+
hover: "red-600";
|
|
306
|
+
};
|
|
307
|
+
interface: {
|
|
308
|
+
_: "hyper-500";
|
|
309
|
+
hover: "hyper-400";
|
|
310
|
+
};
|
|
311
|
+
}, "-", "_">;
|
|
312
|
+
dark: import("@codecademy/variance").LiteralPaths<{
|
|
313
|
+
text: {
|
|
314
|
+
_: "white";
|
|
315
|
+
accent: "beige";
|
|
316
|
+
disabled: "navy-200";
|
|
317
|
+
};
|
|
318
|
+
feedback: {
|
|
319
|
+
error: "red-0";
|
|
320
|
+
success: "green-0";
|
|
321
|
+
warning: "yellow";
|
|
322
|
+
};
|
|
323
|
+
background: {
|
|
324
|
+
_: "navy-800";
|
|
325
|
+
current: "navy-800";
|
|
326
|
+
primary: "navy-900";
|
|
327
|
+
selected: "navy-700";
|
|
328
|
+
disabled: "navy-500";
|
|
329
|
+
hover: "navy-900";
|
|
330
|
+
};
|
|
331
|
+
shadow: {
|
|
332
|
+
opaque: "shadow-black-heavy";
|
|
333
|
+
solid: "black";
|
|
334
|
+
};
|
|
335
|
+
primary: {
|
|
336
|
+
_: "yellow-500";
|
|
337
|
+
hover: "yellow-400";
|
|
338
|
+
};
|
|
339
|
+
secondary: {
|
|
340
|
+
_: "white";
|
|
341
|
+
hover: "navy-200";
|
|
342
|
+
};
|
|
343
|
+
danger: {
|
|
344
|
+
_: "red-0";
|
|
345
|
+
hover: "red-100";
|
|
346
|
+
};
|
|
347
|
+
interface: {
|
|
348
|
+
_: "yellow-500";
|
|
349
|
+
hover: "yellow-400";
|
|
350
|
+
};
|
|
351
|
+
}, "-", "_">;
|
|
352
|
+
}>;
|
|
353
|
+
mode: "light" | "dark";
|
|
354
|
+
_getColorValue: (color: import("@codecademy/variance").Path<{
|
|
355
|
+
readonly beige: "#FFF0E5";
|
|
356
|
+
readonly blue: "#1557FF";
|
|
357
|
+
readonly green: "#008A27";
|
|
358
|
+
readonly hyper: "#3A10E5";
|
|
359
|
+
readonly lightBlue: "#66C4FF";
|
|
360
|
+
readonly lightGreen: "#AEE938";
|
|
361
|
+
readonly navy: "#10162F";
|
|
362
|
+
readonly orange: "#FF8C00";
|
|
363
|
+
readonly paleBlue: "#F5FCFF";
|
|
364
|
+
readonly paleGreen: "#F5FFE3";
|
|
365
|
+
readonly palePink: "#FFF5FF";
|
|
366
|
+
readonly paleYellow: "#FFFAE5";
|
|
367
|
+
readonly pink: "#F966FF";
|
|
368
|
+
readonly paleRed: "#DC5879";
|
|
369
|
+
readonly red: "#E91C11";
|
|
370
|
+
readonly yellow: "#FFD300";
|
|
371
|
+
readonly black: "#000000";
|
|
372
|
+
readonly white: "#ffffff";
|
|
373
|
+
readonly "shadow-black-slight": string;
|
|
374
|
+
readonly "shadow-black-heavy": string;
|
|
375
|
+
readonly "shadow-white-slight": string;
|
|
376
|
+
readonly "shadow-white-heavy": string;
|
|
377
|
+
readonly "beige-100": "#FFF0E5";
|
|
378
|
+
readonly "blue-0": "#F5FCFF";
|
|
379
|
+
readonly "blue-300": "#66C4FF";
|
|
380
|
+
readonly "blue-400": "#3388FF";
|
|
381
|
+
readonly "blue-500": "#1557FF";
|
|
382
|
+
readonly "blue-800": "#1D2340";
|
|
383
|
+
readonly "navy-100": "#F3F3F5";
|
|
384
|
+
readonly "navy-300": "#C3C5CB";
|
|
385
|
+
readonly "navy-400": "#9FA2AC";
|
|
386
|
+
readonly "navy-500": "#707382";
|
|
387
|
+
readonly "navy-800": "#10162F";
|
|
388
|
+
readonly "navy-200": "#DBDCE0";
|
|
389
|
+
readonly "navy-600": "#585C6D";
|
|
390
|
+
readonly "navy-700": "#34394C";
|
|
391
|
+
readonly "navy-900": "#0A0D1C";
|
|
392
|
+
readonly "green-0": "#F5FFE3";
|
|
393
|
+
readonly "green-400": "#AEE938";
|
|
394
|
+
readonly "green-700": "#008A27";
|
|
395
|
+
readonly "yellow-0": "#FFFAE5";
|
|
396
|
+
readonly "yellow-400": "#CCA900";
|
|
397
|
+
readonly "yellow-500": "#FFD300";
|
|
398
|
+
readonly "pink-0": "#FFF5FF";
|
|
399
|
+
readonly "pink-400": "#F966FF";
|
|
400
|
+
readonly "red-100": "#DC5879";
|
|
401
|
+
readonly "red-0": "#E85D7F";
|
|
402
|
+
readonly "red-500": "#E91C11";
|
|
403
|
+
readonly "red-600": "#BE1809";
|
|
404
|
+
readonly "orange-500": "#FF8C00";
|
|
405
|
+
readonly "hyper-400": "#5533FF";
|
|
406
|
+
readonly "hyper-500": "#3A10E5";
|
|
407
|
+
readonly "gray-100": "#F5F5F5";
|
|
408
|
+
readonly "gray-300": "#E0E0E0";
|
|
409
|
+
readonly "gray-800": "#616161";
|
|
410
|
+
readonly "gray-200": "#EEEEEE";
|
|
411
|
+
readonly "gray-600": "#9E9E9E";
|
|
412
|
+
readonly "gray-900": "#424242";
|
|
413
|
+
}, "-">) => string;
|
|
414
|
+
}, Record<"breakpoints", {
|
|
415
|
+
xs: string;
|
|
416
|
+
sm: string;
|
|
417
|
+
md: string;
|
|
418
|
+
lg: string;
|
|
419
|
+
xl: string;
|
|
420
|
+
}>>, Record<"borders", import("@codecademy/variance").LiteralPaths<{
|
|
421
|
+
1: string;
|
|
422
|
+
2: string;
|
|
423
|
+
}, "-", "">>, Record<"breakpoints", {
|
|
424
|
+
xs: string;
|
|
425
|
+
sm: string;
|
|
426
|
+
md: string;
|
|
427
|
+
lg: string;
|
|
428
|
+
xl: string;
|
|
429
|
+
}>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
|
|
430
|
+
export declare type CoreThemeShape = typeof coreTheme;
|
|
431
|
+
export interface CoreTheme extends CoreThemeShape {
|
|
432
|
+
}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { createTheme } from '@codecademy/variance';
|
|
2
|
+
import { corePalette, elements, fontFamily, fontSize, fontWeight, lineHeight, mediaQueries, spacing } from '../variables';
|
|
3
|
+
/**
|
|
4
|
+
* @description This is the core theme that all other Codecademy themes are extended from
|
|
5
|
+
* and is the only theme that gamut components are typed to. This ensures that gamut components
|
|
6
|
+
* are guaranteed to be interoperable between all contexts, but with differing behaviors.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
export var coreTheme = createTheme({
|
|
10
|
+
breakpoints: mediaQueries,
|
|
11
|
+
fontSize: fontSize,
|
|
12
|
+
fontFamily: fontFamily,
|
|
13
|
+
lineHeight: lineHeight,
|
|
14
|
+
fontWeight: fontWeight,
|
|
15
|
+
spacing: spacing,
|
|
16
|
+
elements: elements
|
|
17
|
+
}).addColors(corePalette).addColorModes('light', {
|
|
18
|
+
light: {
|
|
19
|
+
text: {
|
|
20
|
+
_: 'navy-800',
|
|
21
|
+
accent: 'navy-900',
|
|
22
|
+
disabled: 'navy-500'
|
|
23
|
+
},
|
|
24
|
+
feedback: {
|
|
25
|
+
error: 'red-600',
|
|
26
|
+
success: 'green-700',
|
|
27
|
+
warning: 'yellow'
|
|
28
|
+
},
|
|
29
|
+
background: {
|
|
30
|
+
_: 'white',
|
|
31
|
+
current: 'white',
|
|
32
|
+
primary: 'beige',
|
|
33
|
+
selected: 'navy-100',
|
|
34
|
+
disabled: 'navy-200',
|
|
35
|
+
hover: 'navy-200'
|
|
36
|
+
},
|
|
37
|
+
shadow: {
|
|
38
|
+
opaque: 'shadow-white-heavy',
|
|
39
|
+
solid: 'gray-200'
|
|
40
|
+
},
|
|
41
|
+
primary: {
|
|
42
|
+
_: 'hyper-500',
|
|
43
|
+
hover: 'hyper-400'
|
|
44
|
+
},
|
|
45
|
+
secondary: {
|
|
46
|
+
_: 'navy-800',
|
|
47
|
+
hover: 'navy-700'
|
|
48
|
+
},
|
|
49
|
+
danger: {
|
|
50
|
+
_: 'red-500',
|
|
51
|
+
hover: 'red-600'
|
|
52
|
+
},
|
|
53
|
+
"interface": {
|
|
54
|
+
_: 'hyper-500',
|
|
55
|
+
hover: 'hyper-400'
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
dark: {
|
|
59
|
+
text: {
|
|
60
|
+
_: 'white',
|
|
61
|
+
accent: 'beige',
|
|
62
|
+
disabled: 'navy-200'
|
|
63
|
+
},
|
|
64
|
+
feedback: {
|
|
65
|
+
error: 'red-0',
|
|
66
|
+
success: 'green-0',
|
|
67
|
+
warning: 'yellow'
|
|
68
|
+
},
|
|
69
|
+
background: {
|
|
70
|
+
_: 'navy-800',
|
|
71
|
+
current: 'navy-800',
|
|
72
|
+
primary: 'navy-900',
|
|
73
|
+
selected: 'navy-700',
|
|
74
|
+
disabled: 'navy-500',
|
|
75
|
+
hover: 'navy-900'
|
|
76
|
+
},
|
|
77
|
+
shadow: {
|
|
78
|
+
opaque: 'shadow-black-heavy',
|
|
79
|
+
solid: 'black'
|
|
80
|
+
},
|
|
81
|
+
primary: {
|
|
82
|
+
_: 'yellow-500',
|
|
83
|
+
hover: 'yellow-400'
|
|
84
|
+
},
|
|
85
|
+
secondary: {
|
|
86
|
+
_: 'white',
|
|
87
|
+
hover: 'navy-200'
|
|
88
|
+
},
|
|
89
|
+
danger: {
|
|
90
|
+
_: 'red-0',
|
|
91
|
+
hover: 'red-100'
|
|
92
|
+
},
|
|
93
|
+
"interface": {
|
|
94
|
+
_: 'yellow-500',
|
|
95
|
+
hover: 'yellow-400'
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}).addScale('borders', function (_ref) {
|
|
99
|
+
var colors = _ref.colors;
|
|
100
|
+
return {
|
|
101
|
+
1: "1px solid ".concat(colors.secondary),
|
|
102
|
+
2: "2px solid ".concat(colors.secondary)
|
|
103
|
+
};
|
|
104
|
+
}).createScaleVariables('elements').build();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"core.js","sourceRoot":"","sources":["../../src/themes/core.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,EACL,WAAW,EACX,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,UAAU,EACV,UAAU,EACV,YAAY,EACZ,OAAO,GACR,MAAM,cAAc,CAAC;AAEtB;;;;GAIG;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,WAAW,CAAC;IACnC,WAAW,EAAE,YAAY;IACzB,QAAQ;IACR,UAAU;IACV,UAAU;IACV,UAAU;IACV,OAAO;IACP,QAAQ;CACT,CAAC;KACC,SAAS,CAAC,WAAW,CAAC;KACtB,aAAa,CAAC,OAAO,EAAE;IACtB,KAAK,EAAE;QACL,IAAI,EAAE,EAAE,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE;QACjE,QAAQ,EAAE;YACR,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,WAAW;YACpB,OAAO,EAAE,QAAQ;SAClB;QACD,UAAU,EAAE;YACV,CAAC,EAAE,OAAO;YACV,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,OAAO;YAChB,QAAQ,EAAE,UAAU;YACpB,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,UAAU;SAClB;QACD,MAAM,EAAE;YACN,MAAM,EAAE,oBAAoB;YAC5B,KAAK,EAAE,UAAU;SAClB;QACD,OAAO,EAAE;YACP,CAAC,EAAE,WAAW;YACd,KAAK,EAAE,WAAW;SACnB;QACD,SAAS,EAAE;YACT,CAAC,EAAE,UAAU;YACb,KAAK,EAAE,UAAU;SAClB;QACD,MAAM,EAAE;YACN,CAAC,EAAE,SAAS;YACZ,KAAK,EAAE,SAAS;SACjB;QACD,SAAS,EAAE;YACT,CAAC,EAAE,WAAW;YACd,KAAK,EAAE,WAAW;SACnB;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE;QAC3D,QAAQ,EAAE;YACR,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,QAAQ;SAClB;QACD,UAAU,EAAE;YACV,CAAC,EAAE,UAAU;YACb,OAAO,EAAE,UAAU;YACnB,OAAO,EAAE,UAAU;YACnB,QAAQ,EAAE,UAAU;YACpB,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,UAAU;SAClB;QACD,MAAM,EAAE;YACN,MAAM,EAAE,oBAAoB;YAC5B,KAAK,EAAE,OAAO;SACf;QACD,OAAO,EAAE;YACP,CAAC,EAAE,YAAY;YACf,KAAK,EAAE,YAAY;SACpB;QACD,SAAS,EAAE;YACT,CAAC,EAAE,OAAO;YACV,KAAK,EAAE,UAAU;SAClB;QACD,MAAM,EAAE;YACN,CAAC,EAAE,OAAO;YACV,KAAK,EAAE,SAAS;SACjB;QACD,SAAS,EAAE;YACT,CAAC,EAAE,YAAY;YACf,KAAK,EAAE,YAAY;SACpB;KACF;CACF,CAAC;KACD,QAAQ,CAAC,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACpC,CAAC,EAAE,aAAa,MAAM,CAAC,SAAS,EAAE;IAClC,CAAC,EAAE,aAAa,MAAM,CAAC,SAAS,EAAE;CACnC,CAAC,CAAC;KACF,oBAAoB,CAAC,UAAU,CAAC;KAChC,KAAK,EAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}
|