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