@bobbykim/manguito-theme 0.1.4 → 0.2.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/README.md +45 -4
- package/index.ts +2 -2
- package/package.json +2 -2
- package/theme/index.ts +609 -0
- package/theme/theme.ts +338 -38
- package/theme/theme.types.ts +14 -6
- package/themeVariables.cjs +374 -181
- package/theme/generateClass.ts +0 -234
package/themeVariables.cjs
CHANGED
|
@@ -1,22 +1,338 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
1
|
+
const plugin = require('tailwindcss/plugin')
|
|
2
|
+
|
|
3
|
+
const mclTheme = plugin.withOptions(
|
|
4
|
+
() => {
|
|
5
|
+
return ({ addBase, theme, addComponents, addUtilities, e }) => {
|
|
6
|
+
const colors = theme('colors')
|
|
7
|
+
// console.log(colors)
|
|
8
|
+
const listColors = Object.keys(colors).reduce((accumulator, key) => {
|
|
9
|
+
if (typeof colors[key] === 'string') {
|
|
10
|
+
return {
|
|
11
|
+
...accumulator,
|
|
12
|
+
[`.mcl-list-${e(key)} li::before`]: {
|
|
13
|
+
color: colors[key],
|
|
14
|
+
},
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
const colorShades = Object.keys(colors[key])
|
|
18
|
+
|
|
19
|
+
return {
|
|
20
|
+
...accumulator,
|
|
21
|
+
...colorShades.reduce(
|
|
22
|
+
(acc, level) => ({
|
|
23
|
+
...acc,
|
|
24
|
+
[`.mcl-list-${e(key)}-${level} li::before`]: {
|
|
25
|
+
color: colors[key][level],
|
|
26
|
+
},
|
|
27
|
+
}),
|
|
28
|
+
{}
|
|
29
|
+
),
|
|
30
|
+
}
|
|
31
|
+
}, {})
|
|
32
|
+
const btnColors = Object.keys(colors).reduce((accumulator, key) => {
|
|
33
|
+
if (typeof colors[key] === 'string') {
|
|
34
|
+
return {
|
|
35
|
+
...accumulator,
|
|
36
|
+
[`.btn.btn-${e(key)}`]: {
|
|
37
|
+
[`@apply bg-${key}`]: {},
|
|
38
|
+
'&:hover': {
|
|
39
|
+
'@apply bg-opacity-70': {},
|
|
40
|
+
},
|
|
41
|
+
'&:focus': {
|
|
42
|
+
[`@apply ring-4 ring-${key}`]: {},
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
[`.btn.btn-invert.btn-${e(key)}`]: {
|
|
46
|
+
[`@apply border-2 bg-white border-${key} text-${key}`]: {},
|
|
47
|
+
'&:hover': {
|
|
48
|
+
[`@apply bg-${key} text-white bg-opacity-100`]: {},
|
|
49
|
+
},
|
|
50
|
+
'&:focus': {
|
|
51
|
+
[`@apply bg-${key} text-white`]: {},
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
[`.btn-group .btn.btn-${e(key)}`]: {
|
|
55
|
+
'&:focus': {
|
|
56
|
+
'@apply ring-0': {},
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
const colorShades = Object.keys(colors[key])
|
|
63
|
+
|
|
64
|
+
return {
|
|
65
|
+
...accumulator,
|
|
66
|
+
...colorShades.reduce(
|
|
67
|
+
(acc, level) => ({
|
|
68
|
+
...acc,
|
|
69
|
+
[`.btn.btn-${e(key)}-${level}`]: {
|
|
70
|
+
[`@apply bg-${key}-${level}`]: {},
|
|
71
|
+
'&:hover': {
|
|
72
|
+
'@apply bg-opacity-70': {},
|
|
73
|
+
},
|
|
74
|
+
'&:focus': {
|
|
75
|
+
[`@apply ring-4 ring-${key}-${level}`]: {},
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
[`.btn.btn-invert.btn-${e(key)}-${level}`]: {
|
|
79
|
+
[`@apply border-2 bg-white border-${key}-${level} text-${key}-${level}`]:
|
|
80
|
+
{},
|
|
81
|
+
'&:hover': {
|
|
82
|
+
[`@apply bg-${key}-${level} text-white bg-opacity-100`]: {},
|
|
83
|
+
},
|
|
84
|
+
'&:focus': {
|
|
85
|
+
[`@apply bg-${key}-${level} text-white`]: {},
|
|
86
|
+
},
|
|
87
|
+
},
|
|
88
|
+
[`.btn-group .btn.btn-${e(key)}-${level}`]: {
|
|
89
|
+
'&:focus': {
|
|
90
|
+
'@apply ring-0': {},
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
|
+
}),
|
|
94
|
+
{}
|
|
95
|
+
),
|
|
96
|
+
}
|
|
97
|
+
}, {})
|
|
98
|
+
|
|
99
|
+
addBase({
|
|
100
|
+
body: {
|
|
101
|
+
// default font size
|
|
102
|
+
fontSize: '1rem',
|
|
103
|
+
lineHeight: '1.5',
|
|
104
|
+
},
|
|
105
|
+
h1: {
|
|
106
|
+
// default medium size
|
|
107
|
+
fontSize: '30px',
|
|
108
|
+
fontWeight: 'bold',
|
|
109
|
+
lineHeight: '1.2',
|
|
110
|
+
'@screen md': { fontSize: '30px' },
|
|
111
|
+
'@screen lg': { fontSize: '48px' },
|
|
112
|
+
},
|
|
113
|
+
h2: {
|
|
114
|
+
// default medium size
|
|
115
|
+
fontSize: '24px',
|
|
116
|
+
fontWeight: 'bold',
|
|
117
|
+
lineHeight: '1.2',
|
|
118
|
+
'@screen md': { fontSize: '24px' },
|
|
119
|
+
'@screen lg': { fontSize: '36px' },
|
|
120
|
+
},
|
|
121
|
+
h3: {
|
|
122
|
+
// default medium size
|
|
123
|
+
fontSize: '18px',
|
|
124
|
+
fontWeight: 'bold',
|
|
125
|
+
lineHeight: '1.2',
|
|
126
|
+
'@screen md': { fontSize: '18px' },
|
|
127
|
+
'@screen lg': { fontSize: '20px' },
|
|
128
|
+
},
|
|
129
|
+
h4: {
|
|
130
|
+
// default medium size
|
|
131
|
+
fontSize: '16px',
|
|
132
|
+
fontWeight: 'bold',
|
|
133
|
+
lineHeight: '1.2',
|
|
134
|
+
'@screen md': { fontSize: '16px' },
|
|
135
|
+
'@screen lg': { fontSize: '18px' },
|
|
136
|
+
},
|
|
137
|
+
})
|
|
138
|
+
|
|
139
|
+
addComponents({
|
|
140
|
+
'.h1-sm': {
|
|
141
|
+
fontSize: '24px',
|
|
142
|
+
fontWeight: 'bold',
|
|
143
|
+
lineHeight: '1.2',
|
|
144
|
+
'@screen md': { fontSize: '24px' },
|
|
145
|
+
'@screen lg': { fontSize: '36px' },
|
|
146
|
+
},
|
|
147
|
+
'.h1-md': {
|
|
148
|
+
fontSize: '30px',
|
|
149
|
+
fontWeight: 'bold',
|
|
150
|
+
lineHeight: '1.2',
|
|
151
|
+
'@screen md': { fontSize: '30px' },
|
|
152
|
+
'@screen lg': { fontSize: '48px' },
|
|
153
|
+
},
|
|
154
|
+
'.h1-lg': {
|
|
155
|
+
fontSize: '36px',
|
|
156
|
+
fontWeight: 'bold',
|
|
157
|
+
lineHeight: '1.2',
|
|
158
|
+
'@screen md': { fontSize: '36px' },
|
|
159
|
+
'@screen lg': { fontSize: '56px' },
|
|
160
|
+
},
|
|
161
|
+
'.h1-xl': {
|
|
162
|
+
fontSize: '56px',
|
|
163
|
+
fontWeight: 'bold',
|
|
164
|
+
lineHeight: '1.2',
|
|
165
|
+
'@screen md': { fontSize: '56px' },
|
|
166
|
+
'@screen lg': { fontSize: '72px' },
|
|
167
|
+
},
|
|
168
|
+
'.h2-sm': {
|
|
169
|
+
fontSize: '18px',
|
|
170
|
+
fontWeight: 'bold',
|
|
171
|
+
lineHeight: '1.2',
|
|
172
|
+
'@screen md': { fontSize: '18px' },
|
|
173
|
+
'@screen lg': { fontSize: '24px' },
|
|
174
|
+
},
|
|
175
|
+
'.h2-md': {
|
|
176
|
+
fontSize: '24px',
|
|
177
|
+
fontWeight: 'bold',
|
|
178
|
+
lineHeight: '1.2',
|
|
179
|
+
'@screen md': { fontSize: '24px' },
|
|
180
|
+
'@screen lg': { fontSize: '36px' },
|
|
181
|
+
},
|
|
182
|
+
'.h2-lg': {
|
|
183
|
+
fontSize: '30px',
|
|
184
|
+
fontWeight: 'bold',
|
|
185
|
+
lineHeight: '1.2',
|
|
186
|
+
'@screen md': { fontSize: '30px' },
|
|
187
|
+
'@screen lg': { fontSize: '48px' },
|
|
188
|
+
},
|
|
189
|
+
'.h2-xl': {
|
|
190
|
+
fontSize: '48px',
|
|
191
|
+
fontWeight: 'bold',
|
|
192
|
+
lineHeight: '1.2',
|
|
193
|
+
'@screen md': { fontSize: '48px' },
|
|
194
|
+
'@screen lg': { fontSize: '60px' },
|
|
195
|
+
},
|
|
196
|
+
'.h3-sm': {
|
|
197
|
+
fontSize: '16px',
|
|
198
|
+
fontWeight: 'bold',
|
|
199
|
+
lineHeight: '1.2',
|
|
200
|
+
'@screen md': { fontSize: '16px' },
|
|
201
|
+
'@screen lg': { fontSize: '16px' },
|
|
202
|
+
},
|
|
203
|
+
'.h3-md': {
|
|
204
|
+
fontSize: '18px',
|
|
205
|
+
fontWeight: 'bold',
|
|
206
|
+
lineHeight: '1.2',
|
|
207
|
+
'@screen md': { fontSize: '18px' },
|
|
208
|
+
'@screen lg': { fontSize: '20px' },
|
|
209
|
+
},
|
|
210
|
+
'.h3-lg': {
|
|
211
|
+
fontSize: '18px',
|
|
212
|
+
fontWeight: 'bold',
|
|
213
|
+
lineHeight: '1.2',
|
|
214
|
+
'@screen md': { fontSize: '18px' },
|
|
215
|
+
'@screen lg': { fontSize: '24px' },
|
|
216
|
+
},
|
|
217
|
+
'.h3-xl': {
|
|
218
|
+
fontSize: '30px',
|
|
219
|
+
fontWeight: 'bold',
|
|
220
|
+
lineHeight: '1.2',
|
|
221
|
+
'@screen md': { fontSize: '30px' },
|
|
222
|
+
'@screen lg': { fontSize: '36px' },
|
|
223
|
+
},
|
|
224
|
+
'h4-sm': {
|
|
225
|
+
fontSize: '14px',
|
|
226
|
+
fontWeight: 'bold',
|
|
227
|
+
lineHeight: '1.2',
|
|
228
|
+
'@screen md': { fontSize: '14px' },
|
|
229
|
+
'@screen lg': { fontSize: '16px' },
|
|
230
|
+
},
|
|
231
|
+
'h4-md': {
|
|
232
|
+
fontSize: '16px',
|
|
233
|
+
fontWeight: 'bold',
|
|
234
|
+
lineHeight: '1.2',
|
|
235
|
+
'@screen md': { fontSize: '16px' },
|
|
236
|
+
'@screen lg': { fontSize: '18px' },
|
|
237
|
+
},
|
|
238
|
+
'h4-lg': {
|
|
239
|
+
fontSize: '16px',
|
|
240
|
+
fontWeight: 'bold',
|
|
241
|
+
lineHeight: '1.2',
|
|
242
|
+
'@screen md': { fontSize: '16px' },
|
|
243
|
+
'@screen lg': { fontSize: '20px' },
|
|
244
|
+
},
|
|
245
|
+
'h4-xl': {
|
|
246
|
+
fontSize: '24px',
|
|
247
|
+
fontWeight: 'bold',
|
|
248
|
+
lineHeight: '1.2',
|
|
249
|
+
'@screen md': { fontSize: '24px' },
|
|
250
|
+
'@screen lg': { fontSize: '30px' },
|
|
251
|
+
},
|
|
252
|
+
'.mcl-link': {
|
|
253
|
+
color: theme('colors.primary'),
|
|
254
|
+
textDecoration: 'underline',
|
|
255
|
+
},
|
|
256
|
+
'.mcl-list': {
|
|
257
|
+
'list-style-position': 'inside',
|
|
258
|
+
padding: 0,
|
|
259
|
+
'margin-left': '1rem',
|
|
260
|
+
},
|
|
261
|
+
'ul .mcl-list': {
|
|
262
|
+
'list-style': 'none',
|
|
263
|
+
},
|
|
264
|
+
'.mcl-list li': {
|
|
265
|
+
'margin-bottom': '0.5rem',
|
|
266
|
+
},
|
|
267
|
+
'.mcl-list li::before': {
|
|
268
|
+
content: '"•"',
|
|
269
|
+
'font-weight': '700',
|
|
270
|
+
display: 'inline-block',
|
|
271
|
+
width: '1rem',
|
|
272
|
+
'margin-left': '-1rem',
|
|
273
|
+
},
|
|
274
|
+
'.mcl-list.mcl-list-sm li::before': {
|
|
275
|
+
'font-weight': '500',
|
|
276
|
+
},
|
|
277
|
+
'.mcl-list.mcl-list-lg li::before': {
|
|
278
|
+
'font-weight': '900',
|
|
279
|
+
},
|
|
280
|
+
'.btn': {
|
|
281
|
+
padding: '0.5rem 1rem',
|
|
282
|
+
cursor: 'pointer',
|
|
283
|
+
'font-size': '1rem',
|
|
284
|
+
transition: 'all 300ms linear',
|
|
285
|
+
overflow: 'hidden',
|
|
286
|
+
display: 'inline-block',
|
|
287
|
+
'font-weight': 'bold',
|
|
288
|
+
'@apply outline-none ring-offset-white ring-offset-2 bg-primary text-center rounded':
|
|
289
|
+
{},
|
|
290
|
+
'&:hover': {
|
|
291
|
+
'@apply bg-opacity-70': {},
|
|
292
|
+
},
|
|
293
|
+
'&:focus': {
|
|
294
|
+
'@apply ring-4 ring-primary': {},
|
|
295
|
+
},
|
|
296
|
+
},
|
|
297
|
+
'.btn.btn-round': {
|
|
298
|
+
'@apply rounded-full': {},
|
|
299
|
+
},
|
|
300
|
+
'.btn.btn-full': {
|
|
301
|
+
display: 'block',
|
|
302
|
+
width: '100%',
|
|
303
|
+
},
|
|
304
|
+
'.btn.btn-sm': {
|
|
305
|
+
padding: '0.25rem 0.5rem',
|
|
306
|
+
'font-size': '0.875rem',
|
|
307
|
+
},
|
|
308
|
+
'.btn.btn-lg': {
|
|
309
|
+
padding: '0.625rem 1.25rem',
|
|
310
|
+
'font-size': '1.125rem',
|
|
311
|
+
},
|
|
312
|
+
'.btn-group': {
|
|
313
|
+
'@apply flex rounded overflow-hidden': {},
|
|
314
|
+
},
|
|
315
|
+
'.btn-group .btn': {
|
|
316
|
+
'@apply rounded-none ring-offset-0': {},
|
|
317
|
+
|
|
318
|
+
'&:focus': {
|
|
319
|
+
'@apply ring-0': {},
|
|
320
|
+
},
|
|
321
|
+
},
|
|
322
|
+
'.btn.btn-invert': {
|
|
323
|
+
'@apply border-2 border-primary text-primary bg-white': {},
|
|
324
|
+
'&:hover': {
|
|
325
|
+
'@apply bg-primary text-white bg-opacity-100': {},
|
|
326
|
+
},
|
|
327
|
+
},
|
|
328
|
+
})
|
|
329
|
+
|
|
330
|
+
addUtilities(listColors)
|
|
331
|
+
addUtilities(btnColors)
|
|
332
|
+
}
|
|
17
333
|
},
|
|
18
|
-
|
|
19
|
-
|
|
334
|
+
(options = {}) => {
|
|
335
|
+
const colorsList = {
|
|
20
336
|
primary: '#ec489a',
|
|
21
337
|
secondary: '#00feda',
|
|
22
338
|
success: '#78be20',
|
|
@@ -31,8 +347,9 @@ const mclTheme = {
|
|
|
31
347
|
'dark-2': '#484848',
|
|
32
348
|
'dark-3': '#1f2937',
|
|
33
349
|
'dark-4': '#191919',
|
|
34
|
-
}
|
|
35
|
-
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
const spacingList = {
|
|
36
353
|
'3xs': '4px',
|
|
37
354
|
'2xs': '8px',
|
|
38
355
|
xs: '16px',
|
|
@@ -42,169 +359,45 @@ const mclTheme = {
|
|
|
42
359
|
xl: '64px',
|
|
43
360
|
'2xl': '96px',
|
|
44
361
|
'3xl': '128px',
|
|
45
|
-
}
|
|
46
|
-
},
|
|
47
|
-
}
|
|
362
|
+
}
|
|
48
363
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
'.h1-xl': {
|
|
86
|
-
fontSize: '56px',
|
|
87
|
-
fontWeight: 'bold',
|
|
88
|
-
lineHeight: '1.2',
|
|
89
|
-
'@screen md': { fontSize: '56px' },
|
|
90
|
-
'@screen lg': { fontSize: '72px' },
|
|
91
|
-
},
|
|
92
|
-
h2: {
|
|
93
|
-
// default medium size
|
|
94
|
-
fontSize: '24px',
|
|
95
|
-
fontWeight: 'bold',
|
|
96
|
-
lineHeight: '1.2',
|
|
97
|
-
'@screen md': { fontSize: '24px' },
|
|
98
|
-
'@screen lg': { fontSize: '36px' },
|
|
99
|
-
},
|
|
100
|
-
'.h2-sm': {
|
|
101
|
-
fontSize: '18px',
|
|
102
|
-
fontWeight: 'bold',
|
|
103
|
-
lineHeight: '1.2',
|
|
104
|
-
'@screen md': { fontSize: '18px' },
|
|
105
|
-
'@screen lg': { fontSize: '24px' },
|
|
106
|
-
},
|
|
107
|
-
'.h2-md': {
|
|
108
|
-
fontSize: '24px',
|
|
109
|
-
fontWeight: 'bold',
|
|
110
|
-
lineHeight: '1.2',
|
|
111
|
-
'@screen md': { fontSize: '24px' },
|
|
112
|
-
'@screen lg': { fontSize: '36px' },
|
|
113
|
-
},
|
|
114
|
-
'.h2-lg': {
|
|
115
|
-
fontSize: '30px',
|
|
116
|
-
fontWeight: 'bold',
|
|
117
|
-
lineHeight: '1.2',
|
|
118
|
-
'@screen md': { fontSize: '30px' },
|
|
119
|
-
'@screen lg': { fontSize: '48px' },
|
|
120
|
-
},
|
|
121
|
-
'.h2-xl': {
|
|
122
|
-
fontSize: '48px',
|
|
123
|
-
fontWeight: 'bold',
|
|
124
|
-
lineHeight: '1.2',
|
|
125
|
-
'@screen md': { fontSize: '48px' },
|
|
126
|
-
'@screen lg': { fontSize: '60px' },
|
|
127
|
-
},
|
|
128
|
-
h3: {
|
|
129
|
-
// default medium size
|
|
130
|
-
fontSize: '18px',
|
|
131
|
-
fontWeight: 'bold',
|
|
132
|
-
lineHeight: '1.2',
|
|
133
|
-
'@screen md': { fontSize: '18px' },
|
|
134
|
-
'@screen lg': { fontSize: '20px' },
|
|
135
|
-
},
|
|
136
|
-
'.h3-sm': {
|
|
137
|
-
fontSize: '16px',
|
|
138
|
-
fontWeight: 'bold',
|
|
139
|
-
lineHeight: '1.2',
|
|
140
|
-
'@screen md': { fontSize: '16px' },
|
|
141
|
-
'@screen lg': { fontSize: '16px' },
|
|
142
|
-
},
|
|
143
|
-
'.h3-md': {
|
|
144
|
-
fontSize: '18px',
|
|
145
|
-
fontWeight: 'bold',
|
|
146
|
-
lineHeight: '1.2',
|
|
147
|
-
'@screen md': { fontSize: '18px' },
|
|
148
|
-
'@screen lg': { fontSize: '20px' },
|
|
149
|
-
},
|
|
150
|
-
'.h3-lg': {
|
|
151
|
-
fontSize: '18px',
|
|
152
|
-
fontWeight: 'bold',
|
|
153
|
-
lineHeight: '1.2',
|
|
154
|
-
'@screen md': { fontSize: '18px' },
|
|
155
|
-
'@screen lg': { fontSize: '24px' },
|
|
156
|
-
},
|
|
157
|
-
'.h3-xl': {
|
|
158
|
-
fontSize: '30px',
|
|
159
|
-
fontWeight: 'bold',
|
|
160
|
-
lineHeight: '1.2',
|
|
161
|
-
'@screen md': { fontSize: '30px' },
|
|
162
|
-
'@screen lg': { fontSize: '36px' },
|
|
163
|
-
},
|
|
164
|
-
h4: {
|
|
165
|
-
// default medium size
|
|
166
|
-
fontSize: '16px',
|
|
167
|
-
fontWeight: 'bold',
|
|
168
|
-
lineHeight: '1.2',
|
|
169
|
-
'@screen md': { fontSize: '16px' },
|
|
170
|
-
'@screen lg': { fontSize: '18px' },
|
|
171
|
-
},
|
|
172
|
-
'h4-sm': {
|
|
173
|
-
fontSize: '14px',
|
|
174
|
-
fontWeight: 'bold',
|
|
175
|
-
lineHeight: '1.2',
|
|
176
|
-
'@screen md': { fontSize: '14px' },
|
|
177
|
-
'@screen lg': { fontSize: '16px' },
|
|
178
|
-
},
|
|
179
|
-
'h4-md': {
|
|
180
|
-
fontSize: '16px',
|
|
181
|
-
fontWeight: 'bold',
|
|
182
|
-
lineHeight: '1.2',
|
|
183
|
-
'@screen md': { fontSize: '16px' },
|
|
184
|
-
'@screen lg': { fontSize: '18px' },
|
|
185
|
-
},
|
|
186
|
-
'h4-lg': {
|
|
187
|
-
fontSize: '16px',
|
|
188
|
-
fontWeight: 'bold',
|
|
189
|
-
lineHeight: '1.2',
|
|
190
|
-
'@screen md': { fontSize: '16px' },
|
|
191
|
-
'@screen lg': { fontSize: '20px' },
|
|
192
|
-
},
|
|
193
|
-
'h4-xl': {
|
|
194
|
-
fontSize: '24px',
|
|
195
|
-
fontWeight: 'bold',
|
|
196
|
-
lineHeight: '1.2',
|
|
197
|
-
'@screen md': { fontSize: '24px' },
|
|
198
|
-
'@screen lg': { fontSize: '30px' },
|
|
199
|
-
},
|
|
200
|
-
'.mcl-link': {
|
|
201
|
-
color: theme('colors.primary'),
|
|
202
|
-
textDecoration: 'underline',
|
|
203
|
-
},
|
|
204
|
-
})
|
|
205
|
-
}
|
|
364
|
+
Object.keys(colorsList).forEach((key) => {
|
|
365
|
+
if (options.colors !== undefined && options.colors[key] !== undefined) {
|
|
366
|
+
colorsList[key] = options.colors[key]
|
|
367
|
+
}
|
|
368
|
+
})
|
|
369
|
+
Object.keys(spacingList).forEach((key) => {
|
|
370
|
+
if (options.spacing !== undefined && options.spacing[key] !== undefined) {
|
|
371
|
+
spacingList[key] = options.spacing[key]
|
|
372
|
+
}
|
|
373
|
+
})
|
|
374
|
+
return {
|
|
375
|
+
theme: {
|
|
376
|
+
fontSize: {
|
|
377
|
+
xs: '12px',
|
|
378
|
+
sm: '14px',
|
|
379
|
+
md: '16px',
|
|
380
|
+
lg: '18px',
|
|
381
|
+
xl: '20px',
|
|
382
|
+
},
|
|
383
|
+
container: {
|
|
384
|
+
center: true,
|
|
385
|
+
screens: {
|
|
386
|
+
sm: '640px',
|
|
387
|
+
md: '768px',
|
|
388
|
+
lg: '1024px',
|
|
389
|
+
xl: '1280px',
|
|
390
|
+
},
|
|
391
|
+
},
|
|
392
|
+
extend: {
|
|
393
|
+
colors: colorsList,
|
|
394
|
+
spacing: spacingList,
|
|
395
|
+
},
|
|
396
|
+
},
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
)
|
|
206
400
|
|
|
207
401
|
module.exports = {
|
|
208
402
|
mclTheme: mclTheme,
|
|
209
|
-
mclHeading: mclHeading,
|
|
210
403
|
}
|