@bobbykim/manguito-theme 0.8.0 → 0.10.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/theme/theme.js CHANGED
@@ -1,831 +1,832 @@
1
1
  class MCLTheme {
2
+ // bg color class
3
+ static bgColor = {
4
+ primary: 'bg-primary',
5
+ secondary: 'bg-secondary',
6
+ success: 'bg-success',
7
+ danger: 'bg-danger',
8
+ info: 'bg-info',
9
+ warning: 'bg-warning',
10
+ 'light-1': 'bg-light-1',
11
+ 'light-2': 'bg-light-2',
12
+ 'light-3': 'bg-light-3',
13
+ 'light-4': 'bg-light-4',
14
+ 'dark-1': 'bg-dark-1',
15
+ 'dark-2': 'bg-dark-2',
16
+ 'dark-3': 'bg-dark-3',
17
+ 'dark-4': 'bg-dark-4',
18
+ black: 'bg-black',
19
+ white: 'bg-white',
20
+ transparent: 'bg-transparent',
21
+ };
22
+ // hover: bg color class
23
+ static hoverBgColor = {
24
+ primary: 'hover:bg-primary',
25
+ secondary: 'hover:bg-secondary',
26
+ success: 'hover:bg-success',
27
+ danger: 'hover:bg-danger',
28
+ info: 'hover:bg-info',
29
+ warning: 'hover:bg-warning',
30
+ 'light-1': 'hover:bg-light-1',
31
+ 'light-2': 'hover:bg-light-2',
32
+ 'light-3': 'hover:bg-light-3',
33
+ 'light-4': 'hover:bg-light-4',
34
+ 'dark-1': 'hover:bg-dark-1',
35
+ 'dark-2': 'hover:bg-dark-2',
36
+ 'dark-3': 'hover:bg-dark-3',
37
+ 'dark-4': 'hover:bg-dark-4',
38
+ black: 'hover:bg-black',
39
+ white: 'hover:bg-white',
40
+ transparent: 'hover:bg-transparent',
41
+ };
42
+ // focus: bg color class
43
+ static focusBgColor = {
44
+ primary: 'focus:bg-primary',
45
+ secondary: 'focus:bg-secondary',
46
+ success: 'focus:bg-success',
47
+ danger: 'focus:bg-danger',
48
+ info: 'focus:bg-info',
49
+ warning: 'focus:bg-warning',
50
+ 'light-1': 'focus:bg-light-1',
51
+ 'light-2': 'focus:bg-light-2',
52
+ 'light-3': 'focus:bg-light-3',
53
+ 'light-4': 'focus:bg-light-4',
54
+ 'dark-1': 'focus:bg-dark-1',
55
+ 'dark-2': 'focus:bg-dark-2',
56
+ 'dark-3': 'focus:bg-dark-3',
57
+ 'dark-4': 'focus:bg-dark-4',
58
+ black: 'focus:bg-black',
59
+ white: 'focus:bg-white',
60
+ transparent: 'focus:bg-transparent',
61
+ };
62
+ // ::before bg color class
63
+ static beforeBgColor = {
64
+ primary: 'before:bg-primary',
65
+ secondary: 'before:bg-secondary',
66
+ success: 'before:bg-success',
67
+ danger: 'before:bg-danger',
68
+ info: 'before:bg-info',
69
+ warning: 'before:bg-warning',
70
+ 'light-1': 'before:bg-light-1',
71
+ 'light-2': 'before:bg-light-2',
72
+ 'light-3': 'before:bg-light-3',
73
+ 'light-4': 'before:bg-light-4',
74
+ 'dark-1': 'before:bg-dark-1',
75
+ 'dark-2': 'before:bg-dark-2',
76
+ 'dark-3': 'before:bg-dark-3',
77
+ 'dark-4': 'before:bg-dark-4',
78
+ black: 'before:bg-black',
79
+ white: 'before:bg-white',
80
+ transparent: 'before:bg-transparent',
81
+ };
82
+ // ::after bg color class
83
+ static afterBgColor = {
84
+ primary: 'after:bg-primary',
85
+ secondary: 'after:bg-secondary',
86
+ success: 'after:bg-success',
87
+ danger: 'after:bg-danger',
88
+ info: 'after:bg-info',
89
+ warning: 'after:bg-warning',
90
+ 'light-1': 'after:bg-light-1',
91
+ 'light-2': 'after:bg-light-2',
92
+ 'light-3': 'after:bg-light-3',
93
+ 'light-4': 'after:bg-light-4',
94
+ 'dark-1': 'after:bg-dark-1',
95
+ 'dark-2': 'after:bg-dark-2',
96
+ 'dark-3': 'after:bg-dark-3',
97
+ 'dark-4': 'after:bg-dark-4',
98
+ black: 'after:bg-black',
99
+ white: 'after:bg-white',
100
+ transparent: 'after:bg-transparent',
101
+ };
102
+ // active:bg color class
103
+ static bgActiveColor = {
104
+ primary: 'active:bg-primary',
105
+ secondary: 'active:bg-secondary',
106
+ success: 'active:bg-success',
107
+ danger: 'active:bg-danger',
108
+ info: 'active:bg-info',
109
+ warning: 'active:bg-warning',
110
+ 'light-1': 'active:bg-light-1',
111
+ 'light-2': 'active:bg-light-2',
112
+ 'light-3': 'active:bg-light-3',
113
+ 'light-4': 'active:bg-light-4',
114
+ 'dark-1': 'active:bg-dark-1',
115
+ 'dark-2': 'active:bg-dark-2',
116
+ 'dark-3': 'active:bg-dark-3',
117
+ 'dark-4': 'active:bg-dark-4',
118
+ black: 'active:bg-black',
119
+ white: 'active:bg-white',
120
+ transparent: 'active:bg-transparent',
121
+ };
122
+ // text color class
123
+ static textColor = {
124
+ primary: 'text-primary',
125
+ secondary: 'text-secondary',
126
+ success: 'text-success',
127
+ danger: 'text-danger',
128
+ info: 'text-info',
129
+ warning: 'text-warning',
130
+ 'light-1': 'text-light-1',
131
+ 'light-2': 'text-light-2',
132
+ 'light-3': 'text-light-3',
133
+ 'light-4': 'text-light-4',
134
+ 'dark-1': 'text-dark-1',
135
+ 'dark-2': 'text-dark-2',
136
+ 'dark-3': 'text-dark-3',
137
+ 'dark-4': 'text-dark-4',
138
+ black: 'text-black',
139
+ white: 'text-white',
140
+ transparent: 'text-transparent',
141
+ };
142
+ // hover text color class
143
+ static hoverTextColor = {
144
+ primary: 'hover:text-primary',
145
+ secondary: 'hover:text-secondary',
146
+ success: 'hover:text-success',
147
+ danger: 'hover:text-danger',
148
+ info: 'hover:text-info',
149
+ warning: 'hover:text-warning',
150
+ 'light-1': 'hover:text-light-1',
151
+ 'light-2': 'hover:text-light-2',
152
+ 'light-3': 'hover:text-light-3',
153
+ 'light-4': 'hover:text-light-4',
154
+ 'dark-1': 'hover:text-dark-1',
155
+ 'dark-2': 'hover:text-dark-2',
156
+ 'dark-3': 'hover:text-dark-3',
157
+ 'dark-4': 'hover:text-dark-4',
158
+ black: 'hover:text-black',
159
+ white: 'hover:text-white',
160
+ transparent: 'hover:text-transparent',
161
+ };
162
+ // disabled text color class
163
+ static disabledTextColor = {
164
+ primary: 'disabled:text-primary',
165
+ secondary: 'disabled:text-secondary',
166
+ success: 'disabled:text-success',
167
+ danger: 'disabled:text-danger',
168
+ info: 'disabled:text-info',
169
+ warning: 'disabled:text-warning',
170
+ 'light-1': 'disabled:text-light-1',
171
+ 'light-2': 'disabled:text-light-2',
172
+ 'light-3': 'disabled:text-light-3',
173
+ 'light-4': 'disabled:text-light-4',
174
+ 'dark-1': 'disabled:text-dark-1',
175
+ 'dark-2': 'disabled:text-dark-2',
176
+ 'dark-3': 'disabled:text-dark-3',
177
+ 'dark-4': 'disabled:text-dark-4',
178
+ black: 'disabled:text-black',
179
+ white: 'disabled:text-white',
180
+ transparent: 'disabled:text-transparent',
181
+ };
182
+ // SVG fill color class
183
+ static svgFillColor = {
184
+ primary: 'fill-primary',
185
+ secondary: 'fill-secondary',
186
+ success: 'fill-success',
187
+ danger: 'fill-danger',
188
+ info: 'fill-info',
189
+ warning: 'fill-warning',
190
+ 'light-1': 'fill-light-1',
191
+ 'light-2': 'fill-light-2',
192
+ 'light-3': 'fill-light-3',
193
+ 'light-4': 'fill-light-4',
194
+ 'dark-1': 'fill-dark-1',
195
+ 'dark-2': 'fill-dark-2',
196
+ 'dark-3': 'fill-dark-3',
197
+ 'dark-4': 'fill-dark-4',
198
+ black: 'fill-black',
199
+ white: 'fill-white',
200
+ transparent: 'fill-transparent',
201
+ };
202
+ // ring color class
203
+ static ringColor = {
204
+ primary: 'ring-primary',
205
+ secondary: 'ring-secondary',
206
+ success: 'ring-success',
207
+ danger: 'ring-danger',
208
+ info: 'ring-info',
209
+ warning: 'ring-warning',
210
+ 'light-1': 'ring-light-1',
211
+ 'light-2': 'ring-light-2',
212
+ 'light-3': 'ring-light-3',
213
+ 'light-4': 'ring-light-4',
214
+ 'dark-1': 'ring-dark-1',
215
+ 'dark-2': 'ring-dark-2',
216
+ 'dark-3': 'ring-dark-3',
217
+ 'dark-4': 'ring-dark-4',
218
+ black: 'ring-black',
219
+ white: 'ring-white',
220
+ transparent: 'ring-transparent',
221
+ };
222
+ // focus:ring color class
223
+ static ringFocusColor = {
224
+ primary: 'focus:ring-primary',
225
+ secondary: 'focus:ring-secondary',
226
+ success: 'focus:ring-success',
227
+ danger: 'focus:ring-danger',
228
+ info: 'focus:ring-info',
229
+ warning: 'focus:ring-warning',
230
+ 'light-1': 'focus:ring-light-1',
231
+ 'light-2': 'focus:ring-light-2',
232
+ 'light-3': 'focus:ring-light-3',
233
+ 'light-4': 'focus:ring-light-4',
234
+ 'dark-1': 'focus:ring-dark-1',
235
+ 'dark-2': 'focus:ring-dark-2',
236
+ 'dark-3': 'focus:ring-dark-3',
237
+ 'dark-4': 'focus:ring-dark-4',
238
+ black: 'focus:ring-black',
239
+ white: 'focus:ring-white',
240
+ transparent: 'focus:ring-transparent',
241
+ };
242
+ // active:ring color class
243
+ static ringActiveColor = {
244
+ primary: 'active:ring-primary',
245
+ secondary: 'active:ring-secondary',
246
+ success: 'active:ring-success',
247
+ danger: 'active:ring-danger',
248
+ info: 'active:ring-info',
249
+ warning: 'active:ring-warning',
250
+ 'light-1': 'active:ring-light-1',
251
+ 'light-2': 'active:ring-light-2',
252
+ 'light-3': 'active:ring-light-3',
253
+ 'light-4': 'active:ring-light-4',
254
+ 'dark-1': 'active:ring-dark-1',
255
+ 'dark-2': 'active:ring-dark-2',
256
+ 'dark-3': 'active:ring-dark-3',
257
+ 'dark-4': 'active:ring-dark-4',
258
+ black: 'active:ring-black',
259
+ white: 'active:ring-white',
260
+ transparent: 'active:ring-transparent',
261
+ };
262
+ // ring-offset color class
263
+ static ringOffsetColor = {
264
+ primary: 'ring-offset-primary',
265
+ secondary: 'ring-offset-secondary',
266
+ success: 'ring-offset-success',
267
+ danger: 'ring-offset-danger',
268
+ info: 'ring-offset-info',
269
+ warning: 'ring-offset-warning',
270
+ 'light-1': 'ring-offset-light-1',
271
+ 'light-2': 'ring-offset-light-2',
272
+ 'light-3': 'ring-offset-light-3',
273
+ 'light-4': 'ring-offset-light-4',
274
+ 'dark-1': 'ring-offset-dark-1',
275
+ 'dark-2': 'ring-offset-dark-2',
276
+ 'dark-3': 'ring-offset-dark-3',
277
+ 'dark-4': 'ring-offset-dark-4',
278
+ black: 'ring-offset-black',
279
+ white: 'ring-offset-white',
280
+ transparent: 'ring-offset-transparent',
281
+ };
282
+ static dummyColor = {
283
+ primary: 'ring-offset-primary',
284
+ secondary: 'ring-offset-secondary',
285
+ success: 'ring-offset-success',
286
+ danger: 'ring-offset-danger',
287
+ info: 'ring-offset-info',
288
+ warning: 'ring-offset-warning',
289
+ 'light-1': 'ring-offset-light-1',
290
+ 'light-2': 'ring-offset-light-2',
291
+ 'light-3': 'ring-offset-light-3',
292
+ 'light-4': 'ring-offset-light-4',
293
+ 'dark-1': 'ring-offset-dark-1',
294
+ 'dark-2': 'ring-offset-dark-2',
295
+ 'dark-3': 'ring-offset-dark-3',
296
+ 'dark-4': 'ring-offset-dark-4',
297
+ black: 'ring-offset-black',
298
+ white: 'ring-offset-white',
299
+ transparent: 'ring-offset-transparent',
300
+ };
301
+ // btn color class
302
+ static btnColor = {
303
+ primary: 'btn-primary',
304
+ secondary: 'btn-secondary',
305
+ success: 'btn-success',
306
+ danger: 'btn-danger',
307
+ info: 'btn-info',
308
+ warning: 'btn-warning',
309
+ 'light-1': 'btn-light-1',
310
+ 'light-2': 'btn-light-2',
311
+ 'light-3': 'btn-light-3',
312
+ 'light-4': 'btn-light-4',
313
+ 'dark-1': 'btn-dark-1',
314
+ 'dark-2': 'btn-dark-2',
315
+ 'dark-3': 'btn-dark-3',
316
+ 'dark-4': 'btn-dark-4',
317
+ black: 'btn-black',
318
+ white: 'btn-white',
319
+ transparent: 'btn-transparent',
320
+ };
321
+ // list color class
322
+ static listColor = {
323
+ primary: 'mcl-list-primary',
324
+ secondary: 'mcl-list-secondary',
325
+ success: 'mcl-list-success',
326
+ danger: 'mcl-list-danger',
327
+ info: 'mcl-list-info',
328
+ warning: 'mcl-list-warning',
329
+ 'light-1': 'mcl-list-light-1',
330
+ 'light-2': 'mcl-list-light-2',
331
+ 'light-3': 'mcl-list-light-3',
332
+ 'light-4': 'mcl-list-light-4',
333
+ 'dark-1': 'mcl-list-dark-1',
334
+ 'dark-2': 'mcl-list-dark-2',
335
+ 'dark-3': 'mcl-list-dark-3',
336
+ 'dark-4': 'mcl-list-dark-4',
337
+ black: 'mcl-list-black',
338
+ white: 'mcl-list-white',
339
+ transparent: 'mcl-list-transparent',
340
+ };
341
+ // h1 class
342
+ static heading1 = {
343
+ sm: 'h1-sm',
344
+ md: 'h1-md',
345
+ lg: 'h1-lg',
346
+ xl: 'h1-xl',
347
+ };
348
+ // h2 class
349
+ static heading2 = {
350
+ sm: 'h2-sm',
351
+ md: 'h2-md',
352
+ lg: 'h2-lg',
353
+ xl: 'h2-xl',
354
+ };
355
+ // h3 class
356
+ static heading3 = {
357
+ sm: 'h3-sm',
358
+ md: 'h3-md',
359
+ lg: 'h3-lg',
360
+ xl: 'h3-xl',
361
+ };
362
+ // h4 class
363
+ static heading4 = {
364
+ sm: 'h4-sm',
365
+ md: 'h4-md',
366
+ lg: 'h4-lg',
367
+ xl: 'h4-xl',
368
+ };
369
+ // body text class
370
+ static bodyText = {
371
+ xs: 'text-xs',
372
+ sm: 'text-sm',
373
+ md: 'text-md',
374
+ lg: 'text-lg',
375
+ xl: 'text-xl',
376
+ };
377
+ // font weight class
378
+ static fontweight = {
379
+ light: 'font-light',
380
+ normal: 'font-normal',
381
+ bold: 'font-bold',
382
+ };
383
+ // border color classes
384
+ static borderColor = {
385
+ primary: 'border-primary',
386
+ secondary: 'border-secondary',
387
+ success: 'border-success',
388
+ danger: 'border-danger',
389
+ info: 'border-info',
390
+ warning: 'border-warning',
391
+ 'light-1': 'border-light-1',
392
+ 'light-2': 'border-light-2',
393
+ 'light-3': 'border-light-3',
394
+ 'light-4': 'border-light-4',
395
+ 'dark-1': 'border-dark-1',
396
+ 'dark-2': 'border-dark-2',
397
+ 'dark-3': 'border-dark-3',
398
+ 'dark-4': 'border-dark-4',
399
+ black: 'border-black',
400
+ white: 'border-white',
401
+ transparent: 'border-transparent',
402
+ };
403
+ static borderXColor = {
404
+ primary: 'border-x-primary',
405
+ secondary: 'border-x-secondary',
406
+ success: 'border-x-success',
407
+ danger: 'border-x-danger',
408
+ info: 'border-x-info',
409
+ warning: 'border-x-warning',
410
+ 'light-1': 'border-x-light-1',
411
+ 'light-2': 'border-x-light-2',
412
+ 'light-3': 'border-x-light-3',
413
+ 'light-4': 'border-x-light-4',
414
+ 'dark-1': 'border-x-dark-1',
415
+ 'dark-2': 'border-x-dark-2',
416
+ 'dark-3': 'border-x-dark-3',
417
+ 'dark-4': 'border-x-dark-4',
418
+ black: 'border-x-black',
419
+ white: 'border-x-white',
420
+ transparent: 'border-x-transparent',
421
+ };
422
+ static borderYColor = {
423
+ primary: 'border-y-primary',
424
+ secondary: 'border-y-secondary',
425
+ success: 'border-y-success',
426
+ danger: 'border-y-danger',
427
+ info: 'border-y-info',
428
+ warning: 'border-y-warning',
429
+ 'light-1': 'border-y-light-1',
430
+ 'light-2': 'border-y-light-2',
431
+ 'light-3': 'border-y-light-3',
432
+ 'light-4': 'border-y-light-4',
433
+ 'dark-1': 'border-y-dark-1',
434
+ 'dark-2': 'border-y-dark-2',
435
+ 'dark-3': 'border-y-dark-3',
436
+ 'dark-4': 'border-y-dark-4',
437
+ black: 'border-y-black',
438
+ white: 'border-y-white',
439
+ transparent: 'border-y-transparent',
440
+ };
441
+ static borderTopColor = {
442
+ primary: 'border-t-primary',
443
+ secondary: 'border-t-secondary',
444
+ success: 'border-t-success',
445
+ danger: 'border-t-danger',
446
+ info: 'border-t-info',
447
+ warning: 'border-t-warning',
448
+ 'light-1': 'border-t-light-1',
449
+ 'light-2': 'border-t-light-2',
450
+ 'light-3': 'border-t-light-3',
451
+ 'light-4': 'border-t-light-4',
452
+ 'dark-1': 'border-t-dark-1',
453
+ 'dark-2': 'border-t-dark-2',
454
+ 'dark-3': 'border-t-dark-3',
455
+ 'dark-4': 'border-t-dark-4',
456
+ black: 'border-t-black',
457
+ white: 'border-t-white',
458
+ transparent: 'border-t-transparent',
459
+ };
460
+ static borderBottomColor = {
461
+ primary: 'border-b-primary',
462
+ secondary: 'border-b-secondary',
463
+ success: 'border-b-success',
464
+ danger: 'border-b-danger',
465
+ info: 'border-b-info',
466
+ warning: 'border-b-warning',
467
+ 'light-1': 'border-b-light-1',
468
+ 'light-2': 'border-b-light-2',
469
+ 'light-3': 'border-b-light-3',
470
+ 'light-4': 'border-b-light-4',
471
+ 'dark-1': 'border-b-dark-1',
472
+ 'dark-2': 'border-b-dark-2',
473
+ 'dark-3': 'border-b-dark-3',
474
+ 'dark-4': 'border-b-dark-4',
475
+ black: 'border-b-black',
476
+ white: 'border-b-white',
477
+ transparent: 'border-b-transparent',
478
+ };
479
+ static borderLeftColor = {
480
+ primary: 'border-l-primary',
481
+ secondary: 'border-l-secondary',
482
+ success: 'border-l-success',
483
+ danger: 'border-l-danger',
484
+ info: 'border-l-info',
485
+ warning: 'border-l-warning',
486
+ 'light-1': 'border-l-light-1',
487
+ 'light-2': 'border-l-light-2',
488
+ 'light-3': 'border-l-light-3',
489
+ 'light-4': 'border-l-light-4',
490
+ 'dark-1': 'border-l-dark-1',
491
+ 'dark-2': 'border-l-dark-2',
492
+ 'dark-3': 'border-l-dark-3',
493
+ 'dark-4': 'border-l-dark-4',
494
+ black: 'border-l-black',
495
+ white: 'border-l-white',
496
+ transparent: 'border-l-transparent',
497
+ };
498
+ static borderRightColor = {
499
+ primary: 'border-r-primary',
500
+ secondary: 'border-r-secondary',
501
+ success: 'border-r-success',
502
+ danger: 'border-r-danger',
503
+ info: 'border-r-info',
504
+ warning: 'border-r-warning',
505
+ 'light-1': 'border-r-light-1',
506
+ 'light-2': 'border-r-light-2',
507
+ 'light-3': 'border-r-light-3',
508
+ 'light-4': 'border-r-light-4',
509
+ 'dark-1': 'border-r-dark-1',
510
+ 'dark-2': 'border-r-dark-2',
511
+ 'dark-3': 'border-r-dark-3',
512
+ 'dark-4': 'border-r-dark-4',
513
+ black: 'border-r-black',
514
+ white: 'border-r-white',
515
+ transparent: 'border-r-transparent',
516
+ };
517
+ // Border width class
518
+ static borderWidth = {
519
+ 1: 'border-[1px]',
520
+ 2: 'border-[2px]',
521
+ 3: 'border-[3px]',
522
+ 4: 'border-[4px]',
523
+ 5: 'border-[5px]',
524
+ 6: 'border-[6px]',
525
+ 7: 'border-[7px]',
526
+ 8: 'border-[8px]',
527
+ 9: 'border-[9px]',
528
+ 10: 'border-[10px]',
529
+ 11: 'border-[11px]',
530
+ 12: 'border-[12px]',
531
+ };
532
+ static borderXWidth = {
533
+ 1: 'border-x-[1px]',
534
+ 2: 'border-x-[2px]',
535
+ 3: 'border-x-[3px]',
536
+ 4: 'border-x-[4px]',
537
+ 5: 'border-x-[5px]',
538
+ 6: 'border-x-[6px]',
539
+ 7: 'border-x-[7px]',
540
+ 8: 'border-x-[8px]',
541
+ 9: 'border-x-[9px]',
542
+ 10: 'border-x-[10px]',
543
+ 11: 'border-x-[11px]',
544
+ 12: 'border-x-[12px]',
545
+ };
546
+ static borderYWidth = {
547
+ 1: 'border-y-[1px]',
548
+ 2: 'border-y-[2px]',
549
+ 3: 'border-y-[3px]',
550
+ 4: 'border-y-[4px]',
551
+ 5: 'border-y-[5px]',
552
+ 6: 'border-y-[6px]',
553
+ 7: 'border-y-[7px]',
554
+ 8: 'border-y-[8px]',
555
+ 9: 'border-y-[9px]',
556
+ 10: 'border-y-[10px]',
557
+ 11: 'border-y-[11px]',
558
+ 12: 'border-y-[12px]',
559
+ };
560
+ static borderTopWidth = {
561
+ 1: 'border-t-[1px]',
562
+ 2: 'border-t-[2px]',
563
+ 3: 'border-t-[3px]',
564
+ 4: 'border-t-[4px]',
565
+ 5: 'border-t-[5px]',
566
+ 6: 'border-t-[6px]',
567
+ 7: 'border-t-[7px]',
568
+ 8: 'border-t-[8px]',
569
+ 9: 'border-t-[9px]',
570
+ 10: 'border-t-[10px]',
571
+ 11: 'border-t-[11px]',
572
+ 12: 'border-t-[12px]',
573
+ };
574
+ static borderBottomWidth = {
575
+ 1: 'border-b-[1px]',
576
+ 2: 'border-b-[2px]',
577
+ 3: 'border-b-[3px]',
578
+ 4: 'border-b-[4px]',
579
+ 5: 'border-b-[5px]',
580
+ 6: 'border-b-[6px]',
581
+ 7: 'border-b-[7px]',
582
+ 8: 'border-b-[8px]',
583
+ 9: 'border-b-[9px]',
584
+ 10: 'border-b-[10px]',
585
+ 11: 'border-b-[11px]',
586
+ 12: 'border-b-[12px]',
587
+ };
588
+ static borderLeftWidth = {
589
+ 1: 'border-l-[1px]',
590
+ 2: 'border-l-[2px]',
591
+ 3: 'border-l-[3px]',
592
+ 4: 'border-l-[4px]',
593
+ 5: 'border-l-[5px]',
594
+ 6: 'border-l-[6px]',
595
+ 7: 'border-l-[7px]',
596
+ 8: 'border-l-[8px]',
597
+ 9: 'border-l-[9px]',
598
+ 10: 'border-l-[10px]',
599
+ 11: 'border-l-[11px]',
600
+ 12: 'border-l-[12px]',
601
+ };
602
+ static borderRightWidth = {
603
+ 1: 'border-r-[1px]',
604
+ 2: 'border-r-[2px]',
605
+ 3: 'border-r-[3px]',
606
+ 4: 'border-r-[4px]',
607
+ 5: 'border-r-[5px]',
608
+ 6: 'border-r-[6px]',
609
+ 7: 'border-r-[7px]',
610
+ 8: 'border-r-[8px]',
611
+ 9: 'border-r-[9px]',
612
+ 10: 'border-r-[10px]',
613
+ 11: 'border-r-[11px]',
614
+ 12: 'border-r-[12px]',
615
+ };
616
+ // opacity
617
+ static backgroundOpacity = {
618
+ 10: 'bg-opacity-10',
619
+ 20: 'bg-opacity-20',
620
+ 30: 'bg-opacity-30',
621
+ 40: 'bg-opacity-40',
622
+ 50: 'bg-opacity-50',
623
+ 60: 'bg-opacity-60',
624
+ 70: 'bg-opacity-70',
625
+ 80: 'bg-opacity-80',
626
+ 90: 'bg-opacity-90',
627
+ 100: 'bg-opacity-100',
628
+ };
629
+ static opacity = {
630
+ 10: 'opacity-10',
631
+ 20: 'opacity-20',
632
+ 30: 'opacity-30',
633
+ 40: 'opacity-40',
634
+ 50: 'opacity-50',
635
+ 60: 'opacity-60',
636
+ 70: 'opacity-70',
637
+ 80: 'opacity-80',
638
+ 90: 'opacity-90',
639
+ 100: 'opacity-100',
640
+ };
641
+ // spacing: margin
642
+ static margin = {
643
+ '0': 'm-0',
644
+ '3xs': 'm-3xs',
645
+ '2xs': 'm-2xs',
646
+ xs: 'm-xs',
647
+ sm: 'm-sm',
648
+ md: 'm-md',
649
+ lg: 'm-lg',
650
+ xl: 'm-xl',
651
+ '2xl': 'm-2xl',
652
+ '3xl': 'm-3xl',
653
+ };
654
+ static marginX = {
655
+ '0': 'mx-0',
656
+ '3xs': 'mx-3xs',
657
+ '2xs': 'mx-2xs',
658
+ xs: 'mx-xs',
659
+ sm: 'mx-sm',
660
+ md: 'mx-md',
661
+ lg: 'mx-lg',
662
+ xl: 'mx-xl',
663
+ '2xl': 'mx-2xl',
664
+ '3xl': 'mx-3xl',
665
+ };
666
+ static marginY = {
667
+ '0': 'my-0',
668
+ '3xs': 'my-3xs',
669
+ '2xs': 'my-2xs',
670
+ xs: 'my-xs',
671
+ sm: 'my-sm',
672
+ md: 'my-md',
673
+ lg: 'my-lg',
674
+ xl: 'my-xl',
675
+ '2xl': 'my-2xl',
676
+ '3xl': 'my-3xl',
677
+ };
678
+ static marginTop = {
679
+ '0': 'mt-0',
680
+ '3xs': 'mt-3xs',
681
+ '2xs': 'mt-2xs',
682
+ xs: 'mt-xs',
683
+ sm: 'mt-sm',
684
+ md: 'mt-md',
685
+ lg: 'mt-lg',
686
+ xl: 'mt-xl',
687
+ '2xl': 'mt-2xl',
688
+ '3xl': 'mt-3xl',
689
+ };
690
+ static marginBottom = {
691
+ '0': 'mb-0',
692
+ '3xs': 'mb-3xs',
693
+ '2xs': 'mb-2xs',
694
+ xs: 'mb-xs',
695
+ sm: 'mb-sm',
696
+ md: 'mb-md',
697
+ lg: 'mb-lg',
698
+ xl: 'mb-xl',
699
+ '2xl': 'mb-2xl',
700
+ '3xl': 'mb-3xl',
701
+ };
702
+ static marginLeft = {
703
+ '0': 'ml-0',
704
+ '3xs': 'ml-3xs',
705
+ '2xs': 'ml-2xs',
706
+ xs: 'ml-xs',
707
+ sm: 'ml-sm',
708
+ md: 'ml-md',
709
+ lg: 'ml-lg',
710
+ xl: 'ml-xl',
711
+ '2xl': 'ml-2xl',
712
+ '3xl': 'ml-3xl',
713
+ };
714
+ static marginRight = {
715
+ '0': 'mr-0',
716
+ '3xs': 'mr-3xs',
717
+ '2xs': 'mr-2xs',
718
+ xs: 'mr-xs',
719
+ sm: 'mr-sm',
720
+ md: 'mr-md',
721
+ lg: 'mr-lg',
722
+ xl: 'mr-xl',
723
+ '2xl': 'mr-2xl',
724
+ '3xl': 'mr-3xl',
725
+ };
726
+ // spacing: padding
727
+ static padding = {
728
+ '0': 'p-0',
729
+ '3xs': 'p-3xs',
730
+ '2xs': 'p-2xs',
731
+ xs: 'p-xs',
732
+ sm: 'p-sm',
733
+ md: 'p-md',
734
+ lg: 'p-lg',
735
+ xl: 'p-xl',
736
+ '2xl': 'p-2xl',
737
+ '3xl': 'p-3xl',
738
+ };
739
+ static paddingX = {
740
+ '0': 'px-0',
741
+ '3xs': 'px-3xs',
742
+ '2xs': 'px-2xs',
743
+ xs: 'px-xs',
744
+ sm: 'px-sm',
745
+ md: 'px-md',
746
+ lg: 'px-lg',
747
+ xl: 'px-xl',
748
+ '2xl': 'px-2xl',
749
+ '3xl': 'px-3xl',
750
+ };
751
+ static paddingY = {
752
+ '0': 'py-0',
753
+ '3xs': 'py-3xs',
754
+ '2xs': 'py-2xs',
755
+ xs: 'py-xs',
756
+ sm: 'py-sm',
757
+ md: 'py-md',
758
+ lg: 'py-lg',
759
+ xl: 'py-xl',
760
+ '2xl': 'py-2xl',
761
+ '3xl': 'py-3xl',
762
+ };
763
+ static paddingTop = {
764
+ '0': 'pt-0',
765
+ '3xs': 'pt-3xs',
766
+ '2xs': 'pt-2xs',
767
+ xs: 'pt-xs',
768
+ sm: 'pt-sm',
769
+ md: 'pt-md',
770
+ lg: 'pt-lg',
771
+ xl: 'pt-xl',
772
+ '2xl': 'pt-2xl',
773
+ '3xl': 'pt-3xl',
774
+ };
775
+ static paddingBottom = {
776
+ '0': 'pb-0',
777
+ '3xs': 'pb-3xs',
778
+ '2xs': 'pb-2xs',
779
+ xs: 'pb-xs',
780
+ sm: 'pb-sm',
781
+ md: 'pb-md',
782
+ lg: 'pb-lg',
783
+ xl: 'pb-xl',
784
+ '2xl': 'pb-2xl',
785
+ '3xl': 'pb-3xl',
786
+ };
787
+ static paddingLeft = {
788
+ '0': 'pl-0',
789
+ '3xs': 'pl-3xs',
790
+ '2xs': 'pl-2xs',
791
+ xs: 'pl-xs',
792
+ sm: 'pl-sm',
793
+ md: 'pl-md',
794
+ lg: 'pl-lg',
795
+ xl: 'pl-xl',
796
+ '2xl': 'pl-2xl',
797
+ '3xl': 'pl-3xl',
798
+ };
799
+ static paddingRight = {
800
+ '0': 'pr-0',
801
+ '3xs': 'pr-3xs',
802
+ '2xs': 'pr-2xs',
803
+ xs: 'pr-xs',
804
+ sm: 'pr-sm',
805
+ md: 'pr-md',
806
+ lg: 'pr-lg',
807
+ xl: 'pr-xl',
808
+ '2xl': 'pr-2xl',
809
+ '3xl': 'pr-3xl',
810
+ };
811
+ // spacing gap class for flex/grid
812
+ static gap = {
813
+ '0': 'gap-0',
814
+ '3xs': 'gap-3xs',
815
+ '2xs': 'gap-2xs',
816
+ xs: 'gap-xs',
817
+ sm: 'gap-sm',
818
+ md: 'gap-md',
819
+ lg: 'gap-lg',
820
+ xl: 'gap-xl',
821
+ '2xl': 'gap-2xl',
822
+ '3xl': 'gap-3xl',
823
+ };
824
+ // text alignment
825
+ static textAlign = {
826
+ left: 'text-left',
827
+ center: 'text-center',
828
+ right: 'text-right',
829
+ };
2
830
  }
3
- // bg color class
4
- MCLTheme.bgColor = {
5
- primary: 'bg-primary',
6
- secondary: 'bg-secondary',
7
- success: 'bg-success',
8
- danger: 'bg-danger',
9
- info: 'bg-info',
10
- warning: 'bg-warning',
11
- 'light-1': 'bg-light-1',
12
- 'light-2': 'bg-light-2',
13
- 'light-3': 'bg-light-3',
14
- 'light-4': 'bg-light-4',
15
- 'dark-1': 'bg-dark-1',
16
- 'dark-2': 'bg-dark-2',
17
- 'dark-3': 'bg-dark-3',
18
- 'dark-4': 'bg-dark-4',
19
- black: 'bg-black',
20
- white: 'bg-white',
21
- transparent: 'bg-transparent',
22
- };
23
- // hover: bg color class
24
- MCLTheme.hoverBgColor = {
25
- primary: 'hover:bg-primary',
26
- secondary: 'hover:bg-secondary',
27
- success: 'hover:bg-success',
28
- danger: 'hover:bg-danger',
29
- info: 'hover:bg-info',
30
- warning: 'hover:bg-warning',
31
- 'light-1': 'hover:bg-light-1',
32
- 'light-2': 'hover:bg-light-2',
33
- 'light-3': 'hover:bg-light-3',
34
- 'light-4': 'hover:bg-light-4',
35
- 'dark-1': 'hover:bg-dark-1',
36
- 'dark-2': 'hover:bg-dark-2',
37
- 'dark-3': 'hover:bg-dark-3',
38
- 'dark-4': 'hover:bg-dark-4',
39
- black: 'hover:bg-black',
40
- white: 'hover:bg-white',
41
- transparent: 'hover:bg-transparent',
42
- };
43
- // focus: bg color class
44
- MCLTheme.focusBgColor = {
45
- primary: 'focus:bg-primary',
46
- secondary: 'focus:bg-secondary',
47
- success: 'focus:bg-success',
48
- danger: 'focus:bg-danger',
49
- info: 'focus:bg-info',
50
- warning: 'focus:bg-warning',
51
- 'light-1': 'focus:bg-light-1',
52
- 'light-2': 'focus:bg-light-2',
53
- 'light-3': 'focus:bg-light-3',
54
- 'light-4': 'focus:bg-light-4',
55
- 'dark-1': 'focus:bg-dark-1',
56
- 'dark-2': 'focus:bg-dark-2',
57
- 'dark-3': 'focus:bg-dark-3',
58
- 'dark-4': 'focus:bg-dark-4',
59
- black: 'focus:bg-black',
60
- white: 'focus:bg-white',
61
- transparent: 'focus:bg-transparent',
62
- };
63
- // ::before bg color class
64
- MCLTheme.beforeBgColor = {
65
- primary: 'before:bg-primary',
66
- secondary: 'before:bg-secondary',
67
- success: 'before:bg-success',
68
- danger: 'before:bg-danger',
69
- info: 'before:bg-info',
70
- warning: 'before:bg-warning',
71
- 'light-1': 'before:bg-light-1',
72
- 'light-2': 'before:bg-light-2',
73
- 'light-3': 'before:bg-light-3',
74
- 'light-4': 'before:bg-light-4',
75
- 'dark-1': 'before:bg-dark-1',
76
- 'dark-2': 'before:bg-dark-2',
77
- 'dark-3': 'before:bg-dark-3',
78
- 'dark-4': 'before:bg-dark-4',
79
- black: 'before:bg-black',
80
- white: 'before:bg-white',
81
- transparent: 'before:bg-transparent',
82
- };
83
- // ::after bg color class
84
- MCLTheme.afterBgColor = {
85
- primary: 'after:bg-primary',
86
- secondary: 'after:bg-secondary',
87
- success: 'after:bg-success',
88
- danger: 'after:bg-danger',
89
- info: 'after:bg-info',
90
- warning: 'after:bg-warning',
91
- 'light-1': 'after:bg-light-1',
92
- 'light-2': 'after:bg-light-2',
93
- 'light-3': 'after:bg-light-3',
94
- 'light-4': 'after:bg-light-4',
95
- 'dark-1': 'after:bg-dark-1',
96
- 'dark-2': 'after:bg-dark-2',
97
- 'dark-3': 'after:bg-dark-3',
98
- 'dark-4': 'after:bg-dark-4',
99
- black: 'after:bg-black',
100
- white: 'after:bg-white',
101
- transparent: 'after:bg-transparent',
102
- };
103
- // active:bg color class
104
- MCLTheme.bgActiveColor = {
105
- primary: 'active:bg-primary',
106
- secondary: 'active:bg-secondary',
107
- success: 'active:bg-success',
108
- danger: 'active:bg-danger',
109
- info: 'active:bg-info',
110
- warning: 'active:bg-warning',
111
- 'light-1': 'active:bg-light-1',
112
- 'light-2': 'active:bg-light-2',
113
- 'light-3': 'active:bg-light-3',
114
- 'light-4': 'active:bg-light-4',
115
- 'dark-1': 'active:bg-dark-1',
116
- 'dark-2': 'active:bg-dark-2',
117
- 'dark-3': 'active:bg-dark-3',
118
- 'dark-4': 'active:bg-dark-4',
119
- black: 'active:bg-black',
120
- white: 'active:bg-white',
121
- transparent: 'active:bg-transparent',
122
- };
123
- // text color class
124
- MCLTheme.textColor = {
125
- primary: 'text-primary',
126
- secondary: 'text-secondary',
127
- success: 'text-success',
128
- danger: 'text-danger',
129
- info: 'text-info',
130
- warning: 'text-warning',
131
- 'light-1': 'text-light-1',
132
- 'light-2': 'text-light-2',
133
- 'light-3': 'text-light-3',
134
- 'light-4': 'text-light-4',
135
- 'dark-1': 'text-dark-1',
136
- 'dark-2': 'text-dark-2',
137
- 'dark-3': 'text-dark-3',
138
- 'dark-4': 'text-dark-4',
139
- black: 'text-black',
140
- white: 'text-white',
141
- transparent: 'text-transparent',
142
- };
143
- // hover text color class
144
- MCLTheme.hoverTextColor = {
145
- primary: 'hover:text-primary',
146
- secondary: 'hover:text-secondary',
147
- success: 'hover:text-success',
148
- danger: 'hover:text-danger',
149
- info: 'hover:text-info',
150
- warning: 'hover:text-warning',
151
- 'light-1': 'hover:text-light-1',
152
- 'light-2': 'hover:text-light-2',
153
- 'light-3': 'hover:text-light-3',
154
- 'light-4': 'hover:text-light-4',
155
- 'dark-1': 'hover:text-dark-1',
156
- 'dark-2': 'hover:text-dark-2',
157
- 'dark-3': 'hover:text-dark-3',
158
- 'dark-4': 'hover:text-dark-4',
159
- black: 'hover:text-black',
160
- white: 'hover:text-white',
161
- transparent: 'hover:text-transparent',
162
- };
163
- // disabled text color class
164
- MCLTheme.disabledTextColor = {
165
- primary: 'disabled:text-primary',
166
- secondary: 'disabled:text-secondary',
167
- success: 'disabled:text-success',
168
- danger: 'disabled:text-danger',
169
- info: 'disabled:text-info',
170
- warning: 'disabled:text-warning',
171
- 'light-1': 'disabled:text-light-1',
172
- 'light-2': 'disabled:text-light-2',
173
- 'light-3': 'disabled:text-light-3',
174
- 'light-4': 'disabled:text-light-4',
175
- 'dark-1': 'disabled:text-dark-1',
176
- 'dark-2': 'disabled:text-dark-2',
177
- 'dark-3': 'disabled:text-dark-3',
178
- 'dark-4': 'disabled:text-dark-4',
179
- black: 'disabled:text-black',
180
- white: 'disabled:text-white',
181
- transparent: 'disabled:text-transparent',
182
- };
183
- // SVG fill color class
184
- MCLTheme.svgFillColor = {
185
- primary: 'fill-primary',
186
- secondary: 'fill-secondary',
187
- success: 'fill-success',
188
- danger: 'fill-danger',
189
- info: 'fill-info',
190
- warning: 'fill-warning',
191
- 'light-1': 'fill-light-1',
192
- 'light-2': 'fill-light-2',
193
- 'light-3': 'fill-light-3',
194
- 'light-4': 'fill-light-4',
195
- 'dark-1': 'fill-dark-1',
196
- 'dark-2': 'fill-dark-2',
197
- 'dark-3': 'fill-dark-3',
198
- 'dark-4': 'fill-dark-4',
199
- black: 'fill-black',
200
- white: 'fill-white',
201
- transparent: 'fill-transparent',
202
- };
203
- // ring color class
204
- MCLTheme.ringColor = {
205
- primary: 'ring-primary',
206
- secondary: 'ring-secondary',
207
- success: 'ring-success',
208
- danger: 'ring-danger',
209
- info: 'ring-info',
210
- warning: 'ring-warning',
211
- 'light-1': 'ring-light-1',
212
- 'light-2': 'ring-light-2',
213
- 'light-3': 'ring-light-3',
214
- 'light-4': 'ring-light-4',
215
- 'dark-1': 'ring-dark-1',
216
- 'dark-2': 'ring-dark-2',
217
- 'dark-3': 'ring-dark-3',
218
- 'dark-4': 'ring-dark-4',
219
- black: 'ring-black',
220
- white: 'ring-white',
221
- transparent: 'ring-transparent',
222
- };
223
- // focus:ring color class
224
- MCLTheme.ringFocusColor = {
225
- primary: 'focus:ring-primary',
226
- secondary: 'focus:ring-secondary',
227
- success: 'focus:ring-success',
228
- danger: 'focus:ring-danger',
229
- info: 'focus:ring-info',
230
- warning: 'focus:ring-warning',
231
- 'light-1': 'focus:ring-light-1',
232
- 'light-2': 'focus:ring-light-2',
233
- 'light-3': 'focus:ring-light-3',
234
- 'light-4': 'focus:ring-light-4',
235
- 'dark-1': 'focus:ring-dark-1',
236
- 'dark-2': 'focus:ring-dark-2',
237
- 'dark-3': 'focus:ring-dark-3',
238
- 'dark-4': 'focus:ring-dark-4',
239
- black: 'focus:ring-black',
240
- white: 'focus:ring-white',
241
- transparent: 'focus:ring-transparent',
242
- };
243
- // active:ring color class
244
- MCLTheme.ringActiveColor = {
245
- primary: 'active:ring-primary',
246
- secondary: 'active:ring-secondary',
247
- success: 'active:ring-success',
248
- danger: 'active:ring-danger',
249
- info: 'active:ring-info',
250
- warning: 'active:ring-warning',
251
- 'light-1': 'active:ring-light-1',
252
- 'light-2': 'active:ring-light-2',
253
- 'light-3': 'active:ring-light-3',
254
- 'light-4': 'active:ring-light-4',
255
- 'dark-1': 'active:ring-dark-1',
256
- 'dark-2': 'active:ring-dark-2',
257
- 'dark-3': 'active:ring-dark-3',
258
- 'dark-4': 'active:ring-dark-4',
259
- black: 'active:ring-black',
260
- white: 'active:ring-white',
261
- transparent: 'active:ring-transparent',
262
- };
263
- // ring-offset color class
264
- MCLTheme.ringOffsetColor = {
265
- primary: 'ring-offset-primary',
266
- secondary: 'ring-offset-secondary',
267
- success: 'ring-offset-success',
268
- danger: 'ring-offset-danger',
269
- info: 'ring-offset-info',
270
- warning: 'ring-offset-warning',
271
- 'light-1': 'ring-offset-light-1',
272
- 'light-2': 'ring-offset-light-2',
273
- 'light-3': 'ring-offset-light-3',
274
- 'light-4': 'ring-offset-light-4',
275
- 'dark-1': 'ring-offset-dark-1',
276
- 'dark-2': 'ring-offset-dark-2',
277
- 'dark-3': 'ring-offset-dark-3',
278
- 'dark-4': 'ring-offset-dark-4',
279
- black: 'ring-offset-black',
280
- white: 'ring-offset-white',
281
- transparent: 'ring-offset-transparent',
282
- };
283
- MCLTheme.dummyColor = {
284
- primary: 'ring-offset-primary',
285
- secondary: 'ring-offset-secondary',
286
- success: 'ring-offset-success',
287
- danger: 'ring-offset-danger',
288
- info: 'ring-offset-info',
289
- warning: 'ring-offset-warning',
290
- 'light-1': 'ring-offset-light-1',
291
- 'light-2': 'ring-offset-light-2',
292
- 'light-3': 'ring-offset-light-3',
293
- 'light-4': 'ring-offset-light-4',
294
- 'dark-1': 'ring-offset-dark-1',
295
- 'dark-2': 'ring-offset-dark-2',
296
- 'dark-3': 'ring-offset-dark-3',
297
- 'dark-4': 'ring-offset-dark-4',
298
- black: 'ring-offset-black',
299
- white: 'ring-offset-white',
300
- transparent: 'ring-offset-transparent',
301
- };
302
- // btn color class
303
- MCLTheme.btnColor = {
304
- primary: 'btn-primary',
305
- secondary: 'btn-secondary',
306
- success: 'btn-success',
307
- danger: 'btn-danger',
308
- info: 'btn-info',
309
- warning: 'btn-warning',
310
- 'light-1': 'btn-light-1',
311
- 'light-2': 'btn-light-2',
312
- 'light-3': 'btn-light-3',
313
- 'light-4': 'btn-light-4',
314
- 'dark-1': 'btn-dark-1',
315
- 'dark-2': 'btn-dark-2',
316
- 'dark-3': 'btn-dark-3',
317
- 'dark-4': 'btn-dark-4',
318
- black: 'btn-black',
319
- white: 'btn-white',
320
- transparent: 'btn-transparent',
321
- };
322
- // list color class
323
- MCLTheme.listColor = {
324
- primary: 'mcl-list-primary',
325
- secondary: 'mcl-list-secondary',
326
- success: 'mcl-list-success',
327
- danger: 'mcl-list-danger',
328
- info: 'mcl-list-info',
329
- warning: 'mcl-list-warning',
330
- 'light-1': 'mcl-list-light-1',
331
- 'light-2': 'mcl-list-light-2',
332
- 'light-3': 'mcl-list-light-3',
333
- 'light-4': 'mcl-list-light-4',
334
- 'dark-1': 'mcl-list-dark-1',
335
- 'dark-2': 'mcl-list-dark-2',
336
- 'dark-3': 'mcl-list-dark-3',
337
- 'dark-4': 'mcl-list-dark-4',
338
- black: 'mcl-list-black',
339
- white: 'mcl-list-white',
340
- transparent: 'mcl-list-transparent',
341
- };
342
- // h1 class
343
- MCLTheme.heading1 = {
344
- sm: 'h1-sm',
345
- md: 'h1-md',
346
- lg: 'h1-lg',
347
- xl: 'h1-xl',
348
- };
349
- // h2 class
350
- MCLTheme.heading2 = {
351
- sm: 'h2-sm',
352
- md: 'h2-md',
353
- lg: 'h2-lg',
354
- xl: 'h2-xl',
355
- };
356
- // h3 class
357
- MCLTheme.heading3 = {
358
- sm: 'h3-sm',
359
- md: 'h3-md',
360
- lg: 'h3-lg',
361
- xl: 'h3-xl',
362
- };
363
- // h4 class
364
- MCLTheme.heading4 = {
365
- sm: 'h4-sm',
366
- md: 'h4-md',
367
- lg: 'h4-lg',
368
- xl: 'h4-xl',
369
- };
370
- // body text class
371
- MCLTheme.bodyText = {
372
- xs: 'text-xs',
373
- sm: 'text-sm',
374
- md: 'text-md',
375
- lg: 'text-lg',
376
- xl: 'text-xl',
377
- };
378
- // font weight class
379
- MCLTheme.fontweight = {
380
- light: 'font-light',
381
- normal: 'font-normal',
382
- bold: 'font-bold',
383
- };
384
- // border color classes
385
- MCLTheme.borderColor = {
386
- primary: 'border-primary',
387
- secondary: 'border-secondary',
388
- success: 'border-success',
389
- danger: 'border-danger',
390
- info: 'border-info',
391
- warning: 'border-warning',
392
- 'light-1': 'border-light-1',
393
- 'light-2': 'border-light-2',
394
- 'light-3': 'border-light-3',
395
- 'light-4': 'border-light-4',
396
- 'dark-1': 'border-dark-1',
397
- 'dark-2': 'border-dark-2',
398
- 'dark-3': 'border-dark-3',
399
- 'dark-4': 'border-dark-4',
400
- black: 'border-black',
401
- white: 'border-white',
402
- transparent: 'border-transparent',
403
- };
404
- MCLTheme.borderXColor = {
405
- primary: 'border-x-primary',
406
- secondary: 'border-x-secondary',
407
- success: 'border-x-success',
408
- danger: 'border-x-danger',
409
- info: 'border-x-info',
410
- warning: 'border-x-warning',
411
- 'light-1': 'border-x-light-1',
412
- 'light-2': 'border-x-light-2',
413
- 'light-3': 'border-x-light-3',
414
- 'light-4': 'border-x-light-4',
415
- 'dark-1': 'border-x-dark-1',
416
- 'dark-2': 'border-x-dark-2',
417
- 'dark-3': 'border-x-dark-3',
418
- 'dark-4': 'border-x-dark-4',
419
- black: 'border-x-black',
420
- white: 'border-x-white',
421
- transparent: 'border-x-transparent',
422
- };
423
- MCLTheme.borderYColor = {
424
- primary: 'border-y-primary',
425
- secondary: 'border-y-secondary',
426
- success: 'border-y-success',
427
- danger: 'border-y-danger',
428
- info: 'border-y-info',
429
- warning: 'border-y-warning',
430
- 'light-1': 'border-y-light-1',
431
- 'light-2': 'border-y-light-2',
432
- 'light-3': 'border-y-light-3',
433
- 'light-4': 'border-y-light-4',
434
- 'dark-1': 'border-y-dark-1',
435
- 'dark-2': 'border-y-dark-2',
436
- 'dark-3': 'border-y-dark-3',
437
- 'dark-4': 'border-y-dark-4',
438
- black: 'border-y-black',
439
- white: 'border-y-white',
440
- transparent: 'border-y-transparent',
441
- };
442
- MCLTheme.borderTopColor = {
443
- primary: 'border-t-primary',
444
- secondary: 'border-t-secondary',
445
- success: 'border-t-success',
446
- danger: 'border-t-danger',
447
- info: 'border-t-info',
448
- warning: 'border-t-warning',
449
- 'light-1': 'border-t-light-1',
450
- 'light-2': 'border-t-light-2',
451
- 'light-3': 'border-t-light-3',
452
- 'light-4': 'border-t-light-4',
453
- 'dark-1': 'border-t-dark-1',
454
- 'dark-2': 'border-t-dark-2',
455
- 'dark-3': 'border-t-dark-3',
456
- 'dark-4': 'border-t-dark-4',
457
- black: 'border-t-black',
458
- white: 'border-t-white',
459
- transparent: 'border-t-transparent',
460
- };
461
- MCLTheme.borderBottomColor = {
462
- primary: 'border-b-primary',
463
- secondary: 'border-b-secondary',
464
- success: 'border-b-success',
465
- danger: 'border-b-danger',
466
- info: 'border-b-info',
467
- warning: 'border-b-warning',
468
- 'light-1': 'border-b-light-1',
469
- 'light-2': 'border-b-light-2',
470
- 'light-3': 'border-b-light-3',
471
- 'light-4': 'border-b-light-4',
472
- 'dark-1': 'border-b-dark-1',
473
- 'dark-2': 'border-b-dark-2',
474
- 'dark-3': 'border-b-dark-3',
475
- 'dark-4': 'border-b-dark-4',
476
- black: 'border-b-black',
477
- white: 'border-b-white',
478
- transparent: 'border-b-transparent',
479
- };
480
- MCLTheme.borderLeftColor = {
481
- primary: 'border-l-primary',
482
- secondary: 'border-l-secondary',
483
- success: 'border-l-success',
484
- danger: 'border-l-danger',
485
- info: 'border-l-info',
486
- warning: 'border-l-warning',
487
- 'light-1': 'border-l-light-1',
488
- 'light-2': 'border-l-light-2',
489
- 'light-3': 'border-l-light-3',
490
- 'light-4': 'border-l-light-4',
491
- 'dark-1': 'border-l-dark-1',
492
- 'dark-2': 'border-l-dark-2',
493
- 'dark-3': 'border-l-dark-3',
494
- 'dark-4': 'border-l-dark-4',
495
- black: 'border-l-black',
496
- white: 'border-l-white',
497
- transparent: 'border-l-transparent',
498
- };
499
- MCLTheme.borderRightColor = {
500
- primary: 'border-r-primary',
501
- secondary: 'border-r-secondary',
502
- success: 'border-r-success',
503
- danger: 'border-r-danger',
504
- info: 'border-r-info',
505
- warning: 'border-r-warning',
506
- 'light-1': 'border-r-light-1',
507
- 'light-2': 'border-r-light-2',
508
- 'light-3': 'border-r-light-3',
509
- 'light-4': 'border-r-light-4',
510
- 'dark-1': 'border-r-dark-1',
511
- 'dark-2': 'border-r-dark-2',
512
- 'dark-3': 'border-r-dark-3',
513
- 'dark-4': 'border-r-dark-4',
514
- black: 'border-r-black',
515
- white: 'border-r-white',
516
- transparent: 'border-r-transparent',
517
- };
518
- // Border width class
519
- MCLTheme.borderWidth = {
520
- 1: 'border-[1px]',
521
- 2: 'border-[2px]',
522
- 3: 'border-[3px]',
523
- 4: 'border-[4px]',
524
- 5: 'border-[5px]',
525
- 6: 'border-[6px]',
526
- 7: 'border-[7px]',
527
- 8: 'border-[8px]',
528
- 9: 'border-[9px]',
529
- 10: 'border-[10px]',
530
- 11: 'border-[11px]',
531
- 12: 'border-[12px]',
532
- };
533
- MCLTheme.borderXWidth = {
534
- 1: 'border-x-[1px]',
535
- 2: 'border-x-[2px]',
536
- 3: 'border-x-[3px]',
537
- 4: 'border-x-[4px]',
538
- 5: 'border-x-[5px]',
539
- 6: 'border-x-[6px]',
540
- 7: 'border-x-[7px]',
541
- 8: 'border-x-[8px]',
542
- 9: 'border-x-[9px]',
543
- 10: 'border-x-[10px]',
544
- 11: 'border-x-[11px]',
545
- 12: 'border-x-[12px]',
546
- };
547
- MCLTheme.borderYWidth = {
548
- 1: 'border-y-[1px]',
549
- 2: 'border-y-[2px]',
550
- 3: 'border-y-[3px]',
551
- 4: 'border-y-[4px]',
552
- 5: 'border-y-[5px]',
553
- 6: 'border-y-[6px]',
554
- 7: 'border-y-[7px]',
555
- 8: 'border-y-[8px]',
556
- 9: 'border-y-[9px]',
557
- 10: 'border-y-[10px]',
558
- 11: 'border-y-[11px]',
559
- 12: 'border-y-[12px]',
560
- };
561
- MCLTheme.borderTopWidth = {
562
- 1: 'border-t-[1px]',
563
- 2: 'border-t-[2px]',
564
- 3: 'border-t-[3px]',
565
- 4: 'border-t-[4px]',
566
- 5: 'border-t-[5px]',
567
- 6: 'border-t-[6px]',
568
- 7: 'border-t-[7px]',
569
- 8: 'border-t-[8px]',
570
- 9: 'border-t-[9px]',
571
- 10: 'border-t-[10px]',
572
- 11: 'border-t-[11px]',
573
- 12: 'border-t-[12px]',
574
- };
575
- MCLTheme.borderBottomWidth = {
576
- 1: 'border-b-[1px]',
577
- 2: 'border-b-[2px]',
578
- 3: 'border-b-[3px]',
579
- 4: 'border-b-[4px]',
580
- 5: 'border-b-[5px]',
581
- 6: 'border-b-[6px]',
582
- 7: 'border-b-[7px]',
583
- 8: 'border-b-[8px]',
584
- 9: 'border-b-[9px]',
585
- 10: 'border-b-[10px]',
586
- 11: 'border-b-[11px]',
587
- 12: 'border-b-[12px]',
588
- };
589
- MCLTheme.borderLeftWidth = {
590
- 1: 'border-l-[1px]',
591
- 2: 'border-l-[2px]',
592
- 3: 'border-l-[3px]',
593
- 4: 'border-l-[4px]',
594
- 5: 'border-l-[5px]',
595
- 6: 'border-l-[6px]',
596
- 7: 'border-l-[7px]',
597
- 8: 'border-l-[8px]',
598
- 9: 'border-l-[9px]',
599
- 10: 'border-l-[10px]',
600
- 11: 'border-l-[11px]',
601
- 12: 'border-l-[12px]',
602
- };
603
- MCLTheme.borderRightWidth = {
604
- 1: 'border-r-[1px]',
605
- 2: 'border-r-[2px]',
606
- 3: 'border-r-[3px]',
607
- 4: 'border-r-[4px]',
608
- 5: 'border-r-[5px]',
609
- 6: 'border-r-[6px]',
610
- 7: 'border-r-[7px]',
611
- 8: 'border-r-[8px]',
612
- 9: 'border-r-[9px]',
613
- 10: 'border-r-[10px]',
614
- 11: 'border-r-[11px]',
615
- 12: 'border-r-[12px]',
616
- };
617
- // opacity
618
- MCLTheme.backgroundOpacity = {
619
- 10: 'bg-opacity-10',
620
- 20: 'bg-opacity-20',
621
- 30: 'bg-opacity-30',
622
- 40: 'bg-opacity-40',
623
- 50: 'bg-opacity-50',
624
- 60: 'bg-opacity-60',
625
- 70: 'bg-opacity-70',
626
- 80: 'bg-opacity-80',
627
- 90: 'bg-opacity-90',
628
- 100: 'bg-opacity-100',
629
- };
630
- MCLTheme.opacity = {
631
- 10: 'opacity-10',
632
- 20: 'opacity-20',
633
- 30: 'opacity-30',
634
- 40: 'opacity-40',
635
- 50: 'opacity-50',
636
- 60: 'opacity-60',
637
- 70: 'opacity-70',
638
- 80: 'opacity-80',
639
- 90: 'opacity-90',
640
- 100: 'opacity-100',
641
- };
642
- // spacing: margin
643
- MCLTheme.margin = {
644
- '0': 'm-0',
645
- '3xs': 'm-3xs',
646
- '2xs': 'm-2xs',
647
- xs: 'm-xs',
648
- sm: 'm-sm',
649
- md: 'm-md',
650
- lg: 'm-lg',
651
- xl: 'm-xl',
652
- '2xl': 'm-2xl',
653
- '3xl': 'm-3xl',
654
- };
655
- MCLTheme.marginX = {
656
- '0': 'mx-0',
657
- '3xs': 'mx-3xs',
658
- '2xs': 'mx-2xs',
659
- xs: 'mx-xs',
660
- sm: 'mx-sm',
661
- md: 'mx-md',
662
- lg: 'mx-lg',
663
- xl: 'mx-xl',
664
- '2xl': 'mx-2xl',
665
- '3xl': 'mx-3xl',
666
- };
667
- MCLTheme.marginY = {
668
- '0': 'my-0',
669
- '3xs': 'my-3xs',
670
- '2xs': 'my-2xs',
671
- xs: 'my-xs',
672
- sm: 'my-sm',
673
- md: 'my-md',
674
- lg: 'my-lg',
675
- xl: 'my-xl',
676
- '2xl': 'my-2xl',
677
- '3xl': 'my-3xl',
678
- };
679
- MCLTheme.marginTop = {
680
- '0': 'mt-0',
681
- '3xs': 'mt-3xs',
682
- '2xs': 'mt-2xs',
683
- xs: 'mt-xs',
684
- sm: 'mt-sm',
685
- md: 'mt-md',
686
- lg: 'mt-lg',
687
- xl: 'mt-xl',
688
- '2xl': 'mt-2xl',
689
- '3xl': 'mt-3xl',
690
- };
691
- MCLTheme.marginBottom = {
692
- '0': 'mb-0',
693
- '3xs': 'mb-3xs',
694
- '2xs': 'mb-2xs',
695
- xs: 'mb-xs',
696
- sm: 'mb-sm',
697
- md: 'mb-md',
698
- lg: 'mb-lg',
699
- xl: 'mb-xl',
700
- '2xl': 'mb-2xl',
701
- '3xl': 'mb-3xl',
702
- };
703
- MCLTheme.marginLeft = {
704
- '0': 'ml-0',
705
- '3xs': 'ml-3xs',
706
- '2xs': 'ml-2xs',
707
- xs: 'ml-xs',
708
- sm: 'ml-sm',
709
- md: 'ml-md',
710
- lg: 'ml-lg',
711
- xl: 'ml-xl',
712
- '2xl': 'ml-2xl',
713
- '3xl': 'ml-3xl',
714
- };
715
- MCLTheme.marginRight = {
716
- '0': 'mr-0',
717
- '3xs': 'mr-3xs',
718
- '2xs': 'mr-2xs',
719
- xs: 'mr-xs',
720
- sm: 'mr-sm',
721
- md: 'mr-md',
722
- lg: 'mr-lg',
723
- xl: 'mr-xl',
724
- '2xl': 'mr-2xl',
725
- '3xl': 'mr-3xl',
726
- };
727
- // spacing: padding
728
- MCLTheme.padding = {
729
- '0': 'p-0',
730
- '3xs': 'p-3xs',
731
- '2xs': 'p-2xs',
732
- xs: 'p-xs',
733
- sm: 'p-sm',
734
- md: 'p-md',
735
- lg: 'p-lg',
736
- xl: 'p-xl',
737
- '2xl': 'p-2xl',
738
- '3xl': 'p-3xl',
739
- };
740
- MCLTheme.paddingX = {
741
- '0': 'px-0',
742
- '3xs': 'px-3xs',
743
- '2xs': 'px-2xs',
744
- xs: 'px-xs',
745
- sm: 'px-sm',
746
- md: 'px-md',
747
- lg: 'px-lg',
748
- xl: 'px-xl',
749
- '2xl': 'px-2xl',
750
- '3xl': 'px-3xl',
751
- };
752
- MCLTheme.paddingY = {
753
- '0': 'py-0',
754
- '3xs': 'py-3xs',
755
- '2xs': 'py-2xs',
756
- xs: 'py-xs',
757
- sm: 'py-sm',
758
- md: 'py-md',
759
- lg: 'py-lg',
760
- xl: 'py-xl',
761
- '2xl': 'py-2xl',
762
- '3xl': 'py-3xl',
763
- };
764
- MCLTheme.paddingTop = {
765
- '0': 'pt-0',
766
- '3xs': 'pt-3xs',
767
- '2xs': 'pt-2xs',
768
- xs: 'pt-xs',
769
- sm: 'pt-sm',
770
- md: 'pt-md',
771
- lg: 'pt-lg',
772
- xl: 'pt-xl',
773
- '2xl': 'pt-2xl',
774
- '3xl': 'pt-3xl',
775
- };
776
- MCLTheme.paddingBottom = {
777
- '0': 'pb-0',
778
- '3xs': 'pb-3xs',
779
- '2xs': 'pb-2xs',
780
- xs: 'pb-xs',
781
- sm: 'pb-sm',
782
- md: 'pb-md',
783
- lg: 'pb-lg',
784
- xl: 'pb-xl',
785
- '2xl': 'pb-2xl',
786
- '3xl': 'pb-3xl',
787
- };
788
- MCLTheme.paddingLeft = {
789
- '0': 'pl-0',
790
- '3xs': 'pl-3xs',
791
- '2xs': 'pl-2xs',
792
- xs: 'pl-xs',
793
- sm: 'pl-sm',
794
- md: 'pl-md',
795
- lg: 'pl-lg',
796
- xl: 'pl-xl',
797
- '2xl': 'pl-2xl',
798
- '3xl': 'pl-3xl',
799
- };
800
- MCLTheme.paddingRight = {
801
- '0': 'pr-0',
802
- '3xs': 'pr-3xs',
803
- '2xs': 'pr-2xs',
804
- xs: 'pr-xs',
805
- sm: 'pr-sm',
806
- md: 'pr-md',
807
- lg: 'pr-lg',
808
- xl: 'pr-xl',
809
- '2xl': 'pr-2xl',
810
- '3xl': 'pr-3xl',
811
- };
812
- // spacing gap class for flex/grid
813
- MCLTheme.gap = {
814
- '0': 'gap-0',
815
- '3xs': 'gap-3xs',
816
- '2xs': 'gap-2xs',
817
- xs: 'gap-xs',
818
- sm: 'gap-sm',
819
- md: 'gap-md',
820
- lg: 'gap-lg',
821
- xl: 'gap-xl',
822
- '2xl': 'gap-2xl',
823
- '3xl': 'gap-3xl',
824
- };
825
- // text alignment
826
- MCLTheme.textAlign = {
827
- left: 'text-left',
828
- center: 'text-center',
829
- right: 'text-right',
830
- };
831
831
  export default MCLTheme;
832
+ //# sourceMappingURL=theme.js.map