bianic-ui 2.0.0 → 2.1.0-beta.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.
@@ -1,543 +1,543 @@
1
- /** @type {import('tailwindcss').Config} */
2
- const colors = require('tailwindcss/colors')
3
-
4
- module.exports = {
5
- content: ['./src/**/*.{js,ts,jsx,tsx}', './dist/**/*.{js,ts,jsx,tsx}'],
6
- safelist: [
7
- { pattern: /^bg-/ }, // Memastikan semua class background tetap ada
8
- { pattern: /^text-/ }, // Memastikan semua class text tetap ada
9
- { pattern: /^border-/ }, // Memastikan semua border tetap ada
10
- ],
11
- theme: {
12
- colors: {
13
- transparent: 'transparent',
14
- current: 'currentColor',
15
- black: colors.black,
16
- white: colors.white,
17
- slate: colors.slate,
18
- gray: colors.gray,
19
- zinc: colors.zinc,
20
- emerald: colors.emerald,
21
- indigo: colors.indigo,
22
- yellow: colors.yellow,
23
- red: colors.red,
24
- 'bia-white': {
25
- DEFAULT: '#ffffff',
26
- transparent: {
27
- 10: 'var(--white-transparent-10)',
28
- 20: 'var(--white-transparent-20)',
29
- 30: 'var(--white-transparent-30)',
30
- 40: 'var(--white-transparent-40)',
31
- 50: 'var(--white-transparent-50)',
32
- 60: 'var(--white-transparent-60)',
33
- 70: 'var(--white-transparent-70)',
34
- 75: 'var(--white-transparent-75)',
35
- 80: 'var(--white-transparent-80)',
36
- 90: 'var(--white-transparent-90)',
37
- },
38
- },
39
- 'bia-black': {
40
- DEFAULT: '#2f2f2f',
41
- transparent: {
42
- 10: 'var(--black-transparent-10)',
43
- 20: 'var(--black-transparent-20)',
44
- 30: 'var(--black-transparent-30)',
45
- 40: 'var(--black-transparent-40)',
46
- 50: 'var(--black-transparent-50)',
47
- 60: 'var(--black-transparent-60)',
48
- 70: 'var(--black-transparent-70)',
49
- 75: 'var(--black-transparent-75)',
50
- 80: 'var(--black-transparent-80)',
51
- 90: 'var(--black-transparent-90)',
52
- },
53
- },
54
- 'bia-red': {
55
- DEFAULT: 'var(--red)',
56
- hover: 'var(--red-light-10)',
57
- active: 'var(--red-dark-10)',
58
- disabled: 'var(--red-light-50)',
59
- pastel: 'var(--red-light-90)',
60
- light: {
61
- 10: 'var(--red-light-10)',
62
- 20: 'var(--red-light-20)',
63
- 30: 'var(--red-light-30)',
64
- 40: 'var(--red-light-40)',
65
- 50: 'var(--red-light-50)',
66
- 60: 'var(--red-light-60)',
67
- 70: 'var(--red-light-70)',
68
- 80: 'var(--red-light-80)',
69
- 90: 'var(--red-light-90)',
70
- },
71
- dark: {
72
- 10: 'var(--red-dark-10)',
73
- 20: 'var(--red-dark-20)',
74
- 30: 'var(--red-dark-30)',
75
- 40: 'var(--red-dark-40)',
76
- 50: 'var(--red-dark-50)',
77
- 60: 'var(--red-dark-60)',
78
- 70: 'var(--red-dark-70)',
79
- 80: 'var(--red-dark-80)',
80
- 90: 'var(--red-dark-90)',
81
- },
82
- },
83
- 'bia-yellow': {
84
- DEFAULT: 'var(--yellow)',
85
- hover: 'var(--yellow-light-10)',
86
- active: 'var(--yellow-dark-10)',
87
- disabled: 'var(--yellow-light-50)',
88
- pastel: 'var(--yellow-light-90)',
89
- light: {
90
- 10: 'var(--yellow-light-10)',
91
- 20: 'var(--yellow-light-20)',
92
- 30: 'var(--yellow-light-30)',
93
- 40: 'var(--yellow-light-40)',
94
- 50: 'var(--yellow-light-50)',
95
- 60: 'var(--yellow-light-60)',
96
- 70: 'var(--yellow-light-70)',
97
- 80: 'var(--yellow-light-80)',
98
- 90: 'var(--yellow-light-90)',
99
- },
100
- dark: {
101
- 10: 'var(--yellow-dark-10)',
102
- 20: 'var(--yellow-dark-20)',
103
- 30: 'var(--yellow-dark-30)',
104
- 40: 'var(--yellow-dark-40)',
105
- 50: 'var(--yellow-dark-50)',
106
- 60: 'var(--yellow-dark-60)',
107
- 70: 'var(--yellow-dark-70)',
108
- 80: 'var(--yellow-dark-80)',
109
- 90: 'var(--yellow-dark-90)',
110
- },
111
- },
112
- 'bia-green': {
113
- DEFAULT: 'var(--green)',
114
- hover: 'var(--green-light-10)',
115
- active: 'var(--green-dark-10)',
116
- disabled: 'var(--green-light-50)',
117
- pastel: 'var(--green-light-90)',
118
- light: {
119
- 10: 'var(--green-light-10)',
120
- 20: 'var(--green-light-20)',
121
- 30: 'var(--green-light-30)',
122
- 40: 'var(--green-light-40)',
123
- 50: 'var(--green-light-50)',
124
- 60: 'var(--green-light-60)',
125
- 70: 'var(--green-light-70)',
126
- 80: 'var(--green-light-80)',
127
- 90: 'var(--green-light-90)',
128
- },
129
- dark: {
130
- 10: 'var(--green-dark-10)',
131
- 20: 'var(--green-dark-20)',
132
- 30: 'var(--green-dark-30)',
133
- 40: 'var(--green-dark-40)',
134
- 50: 'var(--green-dark-50)',
135
- 60: 'var(--green-dark-60)',
136
- 70: 'var(--green-dark-70)',
137
- 80: 'var(--green-dark-80)',
138
- 90: 'var(--green-dark-90)',
139
- },
140
- },
141
- 'bia-teal': {
142
- DEFAULT: 'var(--teal)',
143
- hover: 'var(--teal-light-10)',
144
- active: 'var(--teal-dark-10)',
145
- disabled: 'var(--teal-light-50)',
146
- pastel: 'var(--teal-light-90)',
147
- light: {
148
- 10: 'var(--teal-light-10)',
149
- 20: 'var(--teal-light-20)',
150
- 30: 'var(--teal-light-30)',
151
- 40: 'var(--teal-light-40)',
152
- 50: 'var(--teal-light-50)',
153
- 60: 'var(--teal-light-60)',
154
- 70: 'var(--teal-light-70)',
155
- 80: 'var(--teal-light-80)',
156
- 90: 'var(--teal-light-90)',
157
- },
158
- dark: {
159
- 10: 'var(--teal-dark-10)',
160
- 20: 'var(--teal-dark-20)',
161
- 30: 'var(--teal-dark-30)',
162
- 40: 'var(--teal-dark-40)',
163
- 50: 'var(--teal-dark-50)',
164
- 60: 'var(--teal-dark-60)',
165
- 70: 'var(--teal-dark-70)',
166
- 80: 'var(--teal-dark-80)',
167
- 90: 'var(--teal-dark-90)',
168
- },
169
- },
170
- 'bia-blue': {
171
- DEFAULT: 'var(--blue)',
172
- hover: 'var(--blue-light-10)',
173
- active: 'var(--blue-dark-10)',
174
- disabled: 'var(--blue-light-50)',
175
- pastel: 'var(--blue-light-90)',
176
- light: {
177
- 10: 'var(--blue-light-10)',
178
- 20: 'var(--blue-light-20)',
179
- 30: 'var(--blue-light-30)',
180
- 40: 'var(--blue-light-40)',
181
- 50: 'var(--blue-light-50)',
182
- 60: 'var(--blue-light-60)',
183
- 70: 'var(--blue-light-70)',
184
- 80: 'var(--blue-light-80)',
185
- 90: 'var(--blue-light-90)',
186
- },
187
- dark: {
188
- 10: 'var(--blue-dark-10)',
189
- 20: 'var(--blue-dark-20)',
190
- 30: 'var(--blue-dark-30)',
191
- 40: 'var(--blue-dark-40)',
192
- 50: 'var(--blue-dark-50)',
193
- 60: 'var(--blue-dark-60)',
194
- 70: 'var(--blue-dark-70)',
195
- 80: 'var(--blue-dark-80)',
196
- 90: 'var(--blue-dark-90)',
197
- },
198
- },
199
- 'bia-purple': {
200
- DEFAULT: '#a84fe8',
201
- hover: '#b161ea',
202
- active: '#9747d1',
203
- disabled: '#d3a7f4',
204
- pastel: '#f6edfd',
205
- },
206
- 'bia-grey': {
207
- DEFAULT: 'var(--grey)',
208
- hover: 'var(--grey-light-20)',
209
- active: 'var(--grey-dark-10)',
210
- disabled: 'var(--grey-light-50)',
211
- pastel: 'var(--grey-light-90)',
212
- light: {
213
- 10: 'var(--grey-light-10)',
214
- 20: 'var(--grey-light-20)',
215
- 30: 'var(--grey-light-30)',
216
- 40: 'var(--grey-light-40)',
217
- 50: 'var(--grey-light-50)',
218
- 60: 'var(--grey-light-60)',
219
- 70: 'var(--grey-light-70)',
220
- 80: 'var(--grey-light-80)',
221
- 90: 'var(--grey-light-90)',
222
- },
223
- dark: {
224
- 10: 'var(--grey-dark-10)',
225
- 20: 'var(--grey-dark-20)',
226
- 30: 'var(--grey-dark-30)',
227
- 40: 'var(--grey-dark-40)',
228
- 50: 'var(--grey-dark-50)',
229
- 60: 'var(--grey-dark-60)',
230
- 70: 'var(--grey-dark-70)',
231
- 80: 'var(--grey-dark-80)',
232
- 90: 'var(--grey-dark-90)',
233
- },
234
- },
235
- 'bia-coolgrey': {
236
- DEFAULT: 'var(--coolgrey)',
237
- hover: 'var(--coolgrey-light-10)',
238
- active: 'var(--coolgrey-dark-10)',
239
- disabled: 'var(--coolgrey-light-50)',
240
- pastel: 'var(--coolgrey-light-90)',
241
- light: {
242
- 10: 'var(--coolgrey-light-10)',
243
- 20: 'var(--coolgrey-light-20)',
244
- 30: 'var(--coolgrey-light-30)',
245
- 40: 'var(--coolgrey-light-40)',
246
- 50: 'var(--coolgrey-light-50)',
247
- 60: 'var(--coolgrey-light-60)',
248
- 70: 'var(--coolgrey-light-70)',
249
- 80: 'var(--coolgrey-light-80)',
250
- 90: 'var(--coolgrey-light-90)',
251
- },
252
- dark: {
253
- 10: 'var(--coolgrey-dark-10)',
254
- 20: 'var(--coolgrey-dark-20)',
255
- 30: 'var(--coolgrey-dark-30)',
256
- 40: 'var(--coolgrey-dark-40)',
257
- 50: 'var(--coolgrey-dark-50)',
258
- 60: 'var(--coolgrey-dark-60)',
259
- 70: 'var(--coolgrey-dark-70)',
260
- 80: 'var(--coolgrey-dark-80)',
261
- 90: 'var(--coolgrey-dark-90)',
262
- },
263
- },
264
- 'bia-pink': {
265
- DEFAULT: 'var(--pink)',
266
- hover: 'var(--pink-light-10)',
267
- active: 'var(--pink-dark-10)',
268
- disabled: 'var(--pink-light-50)',
269
- pastel: 'var(--pink-light-90)',
270
- light: {
271
- 10: 'var(--pink-light-10)',
272
- 20: 'var(--pink-light-20)',
273
- 30: 'var(--pink-light-30)',
274
- 40: 'var(--pink-light-40)',
275
- 50: 'var(--pink-light-50)',
276
- 60: 'var(--pink-light-60)',
277
- 70: 'var(--pink-light-70)',
278
- 80: 'var(--pink-light-80)',
279
- 90: 'var(--pink-light-90)',
280
- },
281
- dark: {
282
- 10: 'var(--pink-dark-10)',
283
- 20: 'var(--pink-dark-20)',
284
- 30: 'var(--pink-dark-30)',
285
- 40: 'var(--pink-dark-40)',
286
- 50: 'var(--pink-dark-50)',
287
- 60: 'var(--pink-dark-60)',
288
- 70: 'var(--pink-dark-70)',
289
- 80: 'var(--pink-dark-80)',
290
- 90: 'var(--pink-dark-90)',
291
- },
292
- },
293
- 'bia-sky': {
294
- DEFAULT: 'var(--sky)',
295
- hover: 'var(--sky-light-10)',
296
- active: 'var(--sky-dark-10)',
297
- disabled: 'var(--sky-light-50)',
298
- pastel: 'var(--sky-light-90)',
299
- light: {
300
- 10: 'var(--sky-light-10)',
301
- 20: 'var(--sky-light-20)',
302
- 30: 'var(--sky-light-30)',
303
- 40: 'var(--sky-light-40)',
304
- 50: 'var(--sky-light-50)',
305
- 60: 'var(--sky-light-60)',
306
- 70: 'var(--sky-light-70)',
307
- 80: 'var(--sky-light-80)',
308
- 90: 'var(--sky-light-90)',
309
- },
310
- dark: {
311
- 10: 'var(--sky-dark-10)',
312
- 20: 'var(--sky-dark-20)',
313
- 30: 'var(--sky-dark-30)',
314
- 40: 'var(--sky-dark-40)',
315
- 50: 'var(--sky-dark-50)',
316
- 60: 'var(--sky-dark-60)',
317
- 70: 'var(--sky-dark-70)',
318
- 80: 'var(--sky-dark-80)',
319
- 90: 'var(--sky-dark-90)',
320
- },
321
- },
322
- 'bia-orange': {
323
- DEFAULT: 'var(--orange)',
324
- hover: 'var(--orange-light-10)',
325
- active: 'var(--orange-dark-10)',
326
- disabled: 'var(--orange-light-50)',
327
- pastel: 'var(--orange-light-90)',
328
- light: {
329
- 10: 'var(--orange-light-10)',
330
- 20: 'var(--orange-light-20)',
331
- 30: 'var(--orange-light-30)',
332
- 40: 'var(--orange-light-40)',
333
- 50: 'var(--orange-light-50)',
334
- 60: 'var(--orange-light-60)',
335
- 70: 'var(--orange-light-70)',
336
- 80: 'var(--orange-light-80)',
337
- 90: 'var(--orange-light-90)',
338
- },
339
- dark: {
340
- 10: 'var(--orange-dark-10)',
341
- 20: 'var(--orange-dark-20)',
342
- 30: 'var(--orange-dark-30)',
343
- 40: 'var(--orange-dark-40)',
344
- 50: 'var(--orange-dark-50)',
345
- 60: 'var(--orange-dark-60)',
346
- 70: 'var(--orange-dark-70)',
347
- 80: 'var(--orange-dark-80)',
348
- 90: 'var(--orange-dark-90)',
349
- },
350
- },
351
- 'bia-crayola': {
352
- DEFAULT: 'var(--crayola)',
353
- hover: 'var(--crayola-light-10)',
354
- active: 'var(--crayola-dark-10)',
355
- disabled: 'var(--crayola-light-50)',
356
- pastel: 'var(--crayola-light-90)',
357
- light: {
358
- 10: 'var(--crayola-light-10)',
359
- 20: 'var(--crayola-light-20)',
360
- 30: 'var(--crayola-light-30)',
361
- 40: 'var(--crayola-light-40)',
362
- 50: 'var(--crayola-light-50)',
363
- 60: 'var(--crayola-light-60)',
364
- 70: 'var(--crayola-light-70)',
365
- 80: 'var(--crayola-light-80)',
366
- 90: 'var(--crayola-light-90)',
367
- },
368
- dark: {
369
- 10: 'var(--crayola-dark-10)',
370
- 20: 'var(--crayola-dark-20)',
371
- 30: 'var(--crayola-dark-30)',
372
- 40: 'var(--crayola-dark-40)',
373
- 50: 'var(--crayola-dark-50)',
374
- 60: 'var(--crayola-dark-60)',
375
- 70: 'var(--crayola-dark-70)',
376
- 80: 'var(--crayola-dark-80)',
377
- 90: 'var(--crayola-dark-90)',
378
- },
379
- },
380
- 'bia-verdantgreen': {
381
- DEFAULT: 'var(--verdant)',
382
- hover: 'var(--verdant-light-10)',
383
- active: 'var(--verdant-dark-10)',
384
- disabled: 'var(--verdant-light-50)',
385
- pastel: 'var(--verdant-light-90)',
386
- light: {
387
- 10: 'var(--verdant-light-10)',
388
- 20: 'var(--verdant-light-20)',
389
- 30: 'var(--verdant-light-30)',
390
- 40: 'var(--verdant-light-40)',
391
- 50: 'var(--verdant-light-50)',
392
- 60: 'var(--verdant-light-60)',
393
- 70: 'var(--verdant-light-70)',
394
- 80: 'var(--verdant-light-80)',
395
- 90: 'var(--verdant-light-90)',
396
- },
397
- dark: {
398
- 10: 'var(--verdant-dark-10)',
399
- 20: 'var(--verdant-dark-20)',
400
- 30: 'var(--verdant-dark-30)',
401
- 40: 'var(--verdant-dark-40)',
402
- 50: 'var(--verdant-dark-50)',
403
- 60: 'var(--verdant-dark-60)',
404
- 70: 'var(--verdant-dark-70)',
405
- 80: 'var(--verdant-dark-80)',
406
- 90: 'var(--verdant-dark-90)',
407
- },
408
- },
409
- 'bia-margueriteblue': {
410
- DEFAULT: 'var(--marguerite)',
411
- hover: 'var(--marguerite-light-10)',
412
- active: 'var(--marguerite-dark-10)',
413
- disabled: 'var(--marguerite-light-50)',
414
- pastel: 'var(--marguerite-light-90)',
415
- light: {
416
- 10: 'var(--marguerite-light-10)',
417
- 20: 'var(--marguerite-light-20)',
418
- 30: 'var(--marguerite-light-30)',
419
- 40: 'var(--marguerite-light-40)',
420
- 50: 'var(--marguerite-light-50)',
421
- 60: 'var(--marguerite-light-60)',
422
- 70: 'var(--marguerite-light-70)',
423
- 80: 'var(--marguerite-light-80)',
424
- 90: 'var(--marguerite-light-90)',
425
- },
426
- dark: {
427
- 10: 'var(--marguerite-dark-10)',
428
- 20: 'var(--marguerite-dark-20)',
429
- 30: 'var(--marguerite-dark-30)',
430
- 40: 'var(--marguerite-dark-40)',
431
- 50: 'var(--marguerite-dark-50)',
432
- 60: 'var(--marguerite-dark-60)',
433
- 70: 'var(--marguerite-dark-70)',
434
- 80: 'var(--marguerite-dark-80)',
435
- 90: 'var(--marguerite-dark-90)',
436
- },
437
- },
438
- primary: {
439
- black: '#2f2f2f',
440
- cool: '#8b8ba6',
441
- warm: '#dadeeb',
442
- white: '#ffffff',
443
- },
444
- },
445
- extend: {
446
- borderRadius: {
447
- 'radius-lg': '5px',
448
- 'radius-md': '4px',
449
- 'radius-sm': '3px',
450
- 'radius-tn': '2.5px',
451
- 'radius-full': '1000px',
452
- },
453
-
454
- fontFamily: {
455
- humnst777: ['humnst777', 'sans-serif'],
456
- segoe: ['SegoeUI', 'sans-serif'],
457
- arial: ['Arial', 'sans-serif'],
458
- },
459
- fontSize: {
460
- 'heading-1': [
461
- '48px',
462
- {
463
- lineHeight: '120%',
464
- },
465
- ],
466
- 'heading-2': [
467
- '36px',
468
- {
469
- lineHeight: '120%',
470
- },
471
- ],
472
- 'heading-3': [
473
- '28px',
474
- {
475
- lineHeight: '120%',
476
- },
477
- ],
478
- 'heading-4': [
479
- '24px',
480
- {
481
- lineHeight: '120%',
482
- },
483
- ],
484
- 'heading-5': [
485
- '18px',
486
- {
487
- lineHeight: '120%',
488
- },
489
- ],
490
- 'heading-6': [
491
- '16px',
492
- {
493
- lineHeight: '120%',
494
- },
495
- ],
496
- 'heading-1': [
497
- '48px',
498
- {
499
- lineHeight: '120%',
500
- },
501
- ],
502
- 'size-lg': [
503
- '22px',
504
- {
505
- lineHeight: '120%',
506
- },
507
- ],
508
- 'size-md': [
509
- '18px',
510
- ,
511
- {
512
- lineHeight: '120%',
513
- },
514
- ],
515
- 'size-caption': [
516
- '16px',
517
- {
518
- lineHeight: '120%',
519
- },
520
- ],
521
- 'size-base': [
522
- '14px',
523
- {
524
- lineHeight: '120%',
525
- },
526
- ],
527
- 'size-sm': [
528
- '12px',
529
- {
530
- lineHeight: '120%',
531
- },
532
- ],
533
- 'size-tiny': [
534
- '11px',
535
- {
536
- lineHeight: '120%',
537
- },
538
- ],
539
- },
540
- },
541
- },
542
- plugins: [],
543
- }
1
+ /** @type {import('tailwindcss').Config} */
2
+ const colors = require('tailwindcss/colors')
3
+
4
+ module.exports = {
5
+ content: ['./src/**/*.{js,ts,jsx,tsx}', './dist/**/*.{js,ts,jsx,tsx}'],
6
+ safelist: [
7
+ { pattern: /^bg-/ }, // Memastikan semua class background tetap ada
8
+ { pattern: /^text-/ }, // Memastikan semua class text tetap ada
9
+ { pattern: /^border-/ }, // Memastikan semua border tetap ada
10
+ ],
11
+ theme: {
12
+ colors: {
13
+ transparent: 'transparent',
14
+ current: 'currentColor',
15
+ black: colors.black,
16
+ white: colors.white,
17
+ slate: colors.slate,
18
+ gray: colors.gray,
19
+ zinc: colors.zinc,
20
+ emerald: colors.emerald,
21
+ indigo: colors.indigo,
22
+ yellow: colors.yellow,
23
+ red: colors.red,
24
+ 'bia-white': {
25
+ DEFAULT: '#ffffff',
26
+ transparent: {
27
+ 10: 'var(--white-transparent-10)',
28
+ 20: 'var(--white-transparent-20)',
29
+ 30: 'var(--white-transparent-30)',
30
+ 40: 'var(--white-transparent-40)',
31
+ 50: 'var(--white-transparent-50)',
32
+ 60: 'var(--white-transparent-60)',
33
+ 70: 'var(--white-transparent-70)',
34
+ 75: 'var(--white-transparent-75)',
35
+ 80: 'var(--white-transparent-80)',
36
+ 90: 'var(--white-transparent-90)',
37
+ },
38
+ },
39
+ 'bia-black': {
40
+ DEFAULT: '#2f2f2f',
41
+ transparent: {
42
+ 10: 'var(--black-transparent-10)',
43
+ 20: 'var(--black-transparent-20)',
44
+ 30: 'var(--black-transparent-30)',
45
+ 40: 'var(--black-transparent-40)',
46
+ 50: 'var(--black-transparent-50)',
47
+ 60: 'var(--black-transparent-60)',
48
+ 70: 'var(--black-transparent-70)',
49
+ 75: 'var(--black-transparent-75)',
50
+ 80: 'var(--black-transparent-80)',
51
+ 90: 'var(--black-transparent-90)',
52
+ },
53
+ },
54
+ 'bia-red': {
55
+ DEFAULT: 'var(--red)',
56
+ hover: 'var(--red-light-10)',
57
+ active: 'var(--red-dark-10)',
58
+ disabled: 'var(--red-light-50)',
59
+ pastel: 'var(--red-light-90)',
60
+ light: {
61
+ 10: 'var(--red-light-10)',
62
+ 20: 'var(--red-light-20)',
63
+ 30: 'var(--red-light-30)',
64
+ 40: 'var(--red-light-40)',
65
+ 50: 'var(--red-light-50)',
66
+ 60: 'var(--red-light-60)',
67
+ 70: 'var(--red-light-70)',
68
+ 80: 'var(--red-light-80)',
69
+ 90: 'var(--red-light-90)',
70
+ },
71
+ dark: {
72
+ 10: 'var(--red-dark-10)',
73
+ 20: 'var(--red-dark-20)',
74
+ 30: 'var(--red-dark-30)',
75
+ 40: 'var(--red-dark-40)',
76
+ 50: 'var(--red-dark-50)',
77
+ 60: 'var(--red-dark-60)',
78
+ 70: 'var(--red-dark-70)',
79
+ 80: 'var(--red-dark-80)',
80
+ 90: 'var(--red-dark-90)',
81
+ },
82
+ },
83
+ 'bia-yellow': {
84
+ DEFAULT: 'var(--yellow)',
85
+ hover: 'var(--yellow-light-10)',
86
+ active: 'var(--yellow-dark-10)',
87
+ disabled: 'var(--yellow-light-50)',
88
+ pastel: 'var(--yellow-light-90)',
89
+ light: {
90
+ 10: 'var(--yellow-light-10)',
91
+ 20: 'var(--yellow-light-20)',
92
+ 30: 'var(--yellow-light-30)',
93
+ 40: 'var(--yellow-light-40)',
94
+ 50: 'var(--yellow-light-50)',
95
+ 60: 'var(--yellow-light-60)',
96
+ 70: 'var(--yellow-light-70)',
97
+ 80: 'var(--yellow-light-80)',
98
+ 90: 'var(--yellow-light-90)',
99
+ },
100
+ dark: {
101
+ 10: 'var(--yellow-dark-10)',
102
+ 20: 'var(--yellow-dark-20)',
103
+ 30: 'var(--yellow-dark-30)',
104
+ 40: 'var(--yellow-dark-40)',
105
+ 50: 'var(--yellow-dark-50)',
106
+ 60: 'var(--yellow-dark-60)',
107
+ 70: 'var(--yellow-dark-70)',
108
+ 80: 'var(--yellow-dark-80)',
109
+ 90: 'var(--yellow-dark-90)',
110
+ },
111
+ },
112
+ 'bia-green': {
113
+ DEFAULT: 'var(--green)',
114
+ hover: 'var(--green-light-10)',
115
+ active: 'var(--green-dark-10)',
116
+ disabled: 'var(--green-light-50)',
117
+ pastel: 'var(--green-light-90)',
118
+ light: {
119
+ 10: 'var(--green-light-10)',
120
+ 20: 'var(--green-light-20)',
121
+ 30: 'var(--green-light-30)',
122
+ 40: 'var(--green-light-40)',
123
+ 50: 'var(--green-light-50)',
124
+ 60: 'var(--green-light-60)',
125
+ 70: 'var(--green-light-70)',
126
+ 80: 'var(--green-light-80)',
127
+ 90: 'var(--green-light-90)',
128
+ },
129
+ dark: {
130
+ 10: 'var(--green-dark-10)',
131
+ 20: 'var(--green-dark-20)',
132
+ 30: 'var(--green-dark-30)',
133
+ 40: 'var(--green-dark-40)',
134
+ 50: 'var(--green-dark-50)',
135
+ 60: 'var(--green-dark-60)',
136
+ 70: 'var(--green-dark-70)',
137
+ 80: 'var(--green-dark-80)',
138
+ 90: 'var(--green-dark-90)',
139
+ },
140
+ },
141
+ 'bia-teal': {
142
+ DEFAULT: 'var(--teal)',
143
+ hover: 'var(--teal-light-10)',
144
+ active: 'var(--teal-dark-10)',
145
+ disabled: 'var(--teal-light-50)',
146
+ pastel: 'var(--teal-light-90)',
147
+ light: {
148
+ 10: 'var(--teal-light-10)',
149
+ 20: 'var(--teal-light-20)',
150
+ 30: 'var(--teal-light-30)',
151
+ 40: 'var(--teal-light-40)',
152
+ 50: 'var(--teal-light-50)',
153
+ 60: 'var(--teal-light-60)',
154
+ 70: 'var(--teal-light-70)',
155
+ 80: 'var(--teal-light-80)',
156
+ 90: 'var(--teal-light-90)',
157
+ },
158
+ dark: {
159
+ 10: 'var(--teal-dark-10)',
160
+ 20: 'var(--teal-dark-20)',
161
+ 30: 'var(--teal-dark-30)',
162
+ 40: 'var(--teal-dark-40)',
163
+ 50: 'var(--teal-dark-50)',
164
+ 60: 'var(--teal-dark-60)',
165
+ 70: 'var(--teal-dark-70)',
166
+ 80: 'var(--teal-dark-80)',
167
+ 90: 'var(--teal-dark-90)',
168
+ },
169
+ },
170
+ 'bia-blue': {
171
+ DEFAULT: 'var(--blue)',
172
+ hover: 'var(--blue-light-10)',
173
+ active: 'var(--blue-dark-10)',
174
+ disabled: 'var(--blue-light-50)',
175
+ pastel: 'var(--blue-light-90)',
176
+ light: {
177
+ 10: 'var(--blue-light-10)',
178
+ 20: 'var(--blue-light-20)',
179
+ 30: 'var(--blue-light-30)',
180
+ 40: 'var(--blue-light-40)',
181
+ 50: 'var(--blue-light-50)',
182
+ 60: 'var(--blue-light-60)',
183
+ 70: 'var(--blue-light-70)',
184
+ 80: 'var(--blue-light-80)',
185
+ 90: 'var(--blue-light-90)',
186
+ },
187
+ dark: {
188
+ 10: 'var(--blue-dark-10)',
189
+ 20: 'var(--blue-dark-20)',
190
+ 30: 'var(--blue-dark-30)',
191
+ 40: 'var(--blue-dark-40)',
192
+ 50: 'var(--blue-dark-50)',
193
+ 60: 'var(--blue-dark-60)',
194
+ 70: 'var(--blue-dark-70)',
195
+ 80: 'var(--blue-dark-80)',
196
+ 90: 'var(--blue-dark-90)',
197
+ },
198
+ },
199
+ 'bia-purple': {
200
+ DEFAULT: '#a84fe8',
201
+ hover: '#b161ea',
202
+ active: '#9747d1',
203
+ disabled: '#d3a7f4',
204
+ pastel: '#f6edfd',
205
+ },
206
+ 'bia-grey': {
207
+ DEFAULT: 'var(--grey)',
208
+ hover: 'var(--grey-light-20)',
209
+ active: 'var(--grey-dark-10)',
210
+ disabled: 'var(--grey-light-50)',
211
+ pastel: 'var(--grey-light-90)',
212
+ light: {
213
+ 10: 'var(--grey-light-10)',
214
+ 20: 'var(--grey-light-20)',
215
+ 30: 'var(--grey-light-30)',
216
+ 40: 'var(--grey-light-40)',
217
+ 50: 'var(--grey-light-50)',
218
+ 60: 'var(--grey-light-60)',
219
+ 70: 'var(--grey-light-70)',
220
+ 80: 'var(--grey-light-80)',
221
+ 90: 'var(--grey-light-90)',
222
+ },
223
+ dark: {
224
+ 10: 'var(--grey-dark-10)',
225
+ 20: 'var(--grey-dark-20)',
226
+ 30: 'var(--grey-dark-30)',
227
+ 40: 'var(--grey-dark-40)',
228
+ 50: 'var(--grey-dark-50)',
229
+ 60: 'var(--grey-dark-60)',
230
+ 70: 'var(--grey-dark-70)',
231
+ 80: 'var(--grey-dark-80)',
232
+ 90: 'var(--grey-dark-90)',
233
+ },
234
+ },
235
+ 'bia-coolgrey': {
236
+ DEFAULT: 'var(--coolgrey)',
237
+ hover: 'var(--coolgrey-light-10)',
238
+ active: 'var(--coolgrey-dark-10)',
239
+ disabled: 'var(--coolgrey-light-50)',
240
+ pastel: 'var(--coolgrey-light-90)',
241
+ light: {
242
+ 10: 'var(--coolgrey-light-10)',
243
+ 20: 'var(--coolgrey-light-20)',
244
+ 30: 'var(--coolgrey-light-30)',
245
+ 40: 'var(--coolgrey-light-40)',
246
+ 50: 'var(--coolgrey-light-50)',
247
+ 60: 'var(--coolgrey-light-60)',
248
+ 70: 'var(--coolgrey-light-70)',
249
+ 80: 'var(--coolgrey-light-80)',
250
+ 90: 'var(--coolgrey-light-90)',
251
+ },
252
+ dark: {
253
+ 10: 'var(--coolgrey-dark-10)',
254
+ 20: 'var(--coolgrey-dark-20)',
255
+ 30: 'var(--coolgrey-dark-30)',
256
+ 40: 'var(--coolgrey-dark-40)',
257
+ 50: 'var(--coolgrey-dark-50)',
258
+ 60: 'var(--coolgrey-dark-60)',
259
+ 70: 'var(--coolgrey-dark-70)',
260
+ 80: 'var(--coolgrey-dark-80)',
261
+ 90: 'var(--coolgrey-dark-90)',
262
+ },
263
+ },
264
+ 'bia-pink': {
265
+ DEFAULT: 'var(--pink)',
266
+ hover: 'var(--pink-light-10)',
267
+ active: 'var(--pink-dark-10)',
268
+ disabled: 'var(--pink-light-50)',
269
+ pastel: 'var(--pink-light-90)',
270
+ light: {
271
+ 10: 'var(--pink-light-10)',
272
+ 20: 'var(--pink-light-20)',
273
+ 30: 'var(--pink-light-30)',
274
+ 40: 'var(--pink-light-40)',
275
+ 50: 'var(--pink-light-50)',
276
+ 60: 'var(--pink-light-60)',
277
+ 70: 'var(--pink-light-70)',
278
+ 80: 'var(--pink-light-80)',
279
+ 90: 'var(--pink-light-90)',
280
+ },
281
+ dark: {
282
+ 10: 'var(--pink-dark-10)',
283
+ 20: 'var(--pink-dark-20)',
284
+ 30: 'var(--pink-dark-30)',
285
+ 40: 'var(--pink-dark-40)',
286
+ 50: 'var(--pink-dark-50)',
287
+ 60: 'var(--pink-dark-60)',
288
+ 70: 'var(--pink-dark-70)',
289
+ 80: 'var(--pink-dark-80)',
290
+ 90: 'var(--pink-dark-90)',
291
+ },
292
+ },
293
+ 'bia-sky': {
294
+ DEFAULT: 'var(--sky)',
295
+ hover: 'var(--sky-light-10)',
296
+ active: 'var(--sky-dark-10)',
297
+ disabled: 'var(--sky-light-50)',
298
+ pastel: 'var(--sky-light-90)',
299
+ light: {
300
+ 10: 'var(--sky-light-10)',
301
+ 20: 'var(--sky-light-20)',
302
+ 30: 'var(--sky-light-30)',
303
+ 40: 'var(--sky-light-40)',
304
+ 50: 'var(--sky-light-50)',
305
+ 60: 'var(--sky-light-60)',
306
+ 70: 'var(--sky-light-70)',
307
+ 80: 'var(--sky-light-80)',
308
+ 90: 'var(--sky-light-90)',
309
+ },
310
+ dark: {
311
+ 10: 'var(--sky-dark-10)',
312
+ 20: 'var(--sky-dark-20)',
313
+ 30: 'var(--sky-dark-30)',
314
+ 40: 'var(--sky-dark-40)',
315
+ 50: 'var(--sky-dark-50)',
316
+ 60: 'var(--sky-dark-60)',
317
+ 70: 'var(--sky-dark-70)',
318
+ 80: 'var(--sky-dark-80)',
319
+ 90: 'var(--sky-dark-90)',
320
+ },
321
+ },
322
+ 'bia-orange': {
323
+ DEFAULT: 'var(--orange)',
324
+ hover: 'var(--orange-light-10)',
325
+ active: 'var(--orange-dark-10)',
326
+ disabled: 'var(--orange-light-50)',
327
+ pastel: 'var(--orange-light-90)',
328
+ light: {
329
+ 10: 'var(--orange-light-10)',
330
+ 20: 'var(--orange-light-20)',
331
+ 30: 'var(--orange-light-30)',
332
+ 40: 'var(--orange-light-40)',
333
+ 50: 'var(--orange-light-50)',
334
+ 60: 'var(--orange-light-60)',
335
+ 70: 'var(--orange-light-70)',
336
+ 80: 'var(--orange-light-80)',
337
+ 90: 'var(--orange-light-90)',
338
+ },
339
+ dark: {
340
+ 10: 'var(--orange-dark-10)',
341
+ 20: 'var(--orange-dark-20)',
342
+ 30: 'var(--orange-dark-30)',
343
+ 40: 'var(--orange-dark-40)',
344
+ 50: 'var(--orange-dark-50)',
345
+ 60: 'var(--orange-dark-60)',
346
+ 70: 'var(--orange-dark-70)',
347
+ 80: 'var(--orange-dark-80)',
348
+ 90: 'var(--orange-dark-90)',
349
+ },
350
+ },
351
+ 'bia-crayola': {
352
+ DEFAULT: 'var(--crayola)',
353
+ hover: 'var(--crayola-light-10)',
354
+ active: 'var(--crayola-dark-10)',
355
+ disabled: 'var(--crayola-light-50)',
356
+ pastel: 'var(--crayola-light-90)',
357
+ light: {
358
+ 10: 'var(--crayola-light-10)',
359
+ 20: 'var(--crayola-light-20)',
360
+ 30: 'var(--crayola-light-30)',
361
+ 40: 'var(--crayola-light-40)',
362
+ 50: 'var(--crayola-light-50)',
363
+ 60: 'var(--crayola-light-60)',
364
+ 70: 'var(--crayola-light-70)',
365
+ 80: 'var(--crayola-light-80)',
366
+ 90: 'var(--crayola-light-90)',
367
+ },
368
+ dark: {
369
+ 10: 'var(--crayola-dark-10)',
370
+ 20: 'var(--crayola-dark-20)',
371
+ 30: 'var(--crayola-dark-30)',
372
+ 40: 'var(--crayola-dark-40)',
373
+ 50: 'var(--crayola-dark-50)',
374
+ 60: 'var(--crayola-dark-60)',
375
+ 70: 'var(--crayola-dark-70)',
376
+ 80: 'var(--crayola-dark-80)',
377
+ 90: 'var(--crayola-dark-90)',
378
+ },
379
+ },
380
+ 'bia-verdantgreen': {
381
+ DEFAULT: 'var(--verdant)',
382
+ hover: 'var(--verdant-light-10)',
383
+ active: 'var(--verdant-dark-10)',
384
+ disabled: 'var(--verdant-light-50)',
385
+ pastel: 'var(--verdant-light-90)',
386
+ light: {
387
+ 10: 'var(--verdant-light-10)',
388
+ 20: 'var(--verdant-light-20)',
389
+ 30: 'var(--verdant-light-30)',
390
+ 40: 'var(--verdant-light-40)',
391
+ 50: 'var(--verdant-light-50)',
392
+ 60: 'var(--verdant-light-60)',
393
+ 70: 'var(--verdant-light-70)',
394
+ 80: 'var(--verdant-light-80)',
395
+ 90: 'var(--verdant-light-90)',
396
+ },
397
+ dark: {
398
+ 10: 'var(--verdant-dark-10)',
399
+ 20: 'var(--verdant-dark-20)',
400
+ 30: 'var(--verdant-dark-30)',
401
+ 40: 'var(--verdant-dark-40)',
402
+ 50: 'var(--verdant-dark-50)',
403
+ 60: 'var(--verdant-dark-60)',
404
+ 70: 'var(--verdant-dark-70)',
405
+ 80: 'var(--verdant-dark-80)',
406
+ 90: 'var(--verdant-dark-90)',
407
+ },
408
+ },
409
+ 'bia-margueriteblue': {
410
+ DEFAULT: 'var(--marguerite)',
411
+ hover: 'var(--marguerite-light-10)',
412
+ active: 'var(--marguerite-dark-10)',
413
+ disabled: 'var(--marguerite-light-50)',
414
+ pastel: 'var(--marguerite-light-90)',
415
+ light: {
416
+ 10: 'var(--marguerite-light-10)',
417
+ 20: 'var(--marguerite-light-20)',
418
+ 30: 'var(--marguerite-light-30)',
419
+ 40: 'var(--marguerite-light-40)',
420
+ 50: 'var(--marguerite-light-50)',
421
+ 60: 'var(--marguerite-light-60)',
422
+ 70: 'var(--marguerite-light-70)',
423
+ 80: 'var(--marguerite-light-80)',
424
+ 90: 'var(--marguerite-light-90)',
425
+ },
426
+ dark: {
427
+ 10: 'var(--marguerite-dark-10)',
428
+ 20: 'var(--marguerite-dark-20)',
429
+ 30: 'var(--marguerite-dark-30)',
430
+ 40: 'var(--marguerite-dark-40)',
431
+ 50: 'var(--marguerite-dark-50)',
432
+ 60: 'var(--marguerite-dark-60)',
433
+ 70: 'var(--marguerite-dark-70)',
434
+ 80: 'var(--marguerite-dark-80)',
435
+ 90: 'var(--marguerite-dark-90)',
436
+ },
437
+ },
438
+ primary: {
439
+ black: '#2f2f2f',
440
+ cool: '#8b8ba6',
441
+ warm: '#dadeeb',
442
+ white: '#ffffff',
443
+ },
444
+ },
445
+ extend: {
446
+ borderRadius: {
447
+ 'radius-lg': '5px',
448
+ 'radius-md': '4px',
449
+ 'radius-sm': '3px',
450
+ 'radius-tn': '2.5px',
451
+ 'radius-full': '1000px',
452
+ },
453
+
454
+ fontFamily: {
455
+ humnst777: ['humnst777', 'sans-serif'],
456
+ segoe: ['SegoeUI', 'sans-serif'],
457
+ arial: ['Arial', 'sans-serif'],
458
+ },
459
+ fontSize: {
460
+ 'heading-1': [
461
+ '48px',
462
+ {
463
+ lineHeight: '120%',
464
+ },
465
+ ],
466
+ 'heading-2': [
467
+ '36px',
468
+ {
469
+ lineHeight: '120%',
470
+ },
471
+ ],
472
+ 'heading-3': [
473
+ '28px',
474
+ {
475
+ lineHeight: '120%',
476
+ },
477
+ ],
478
+ 'heading-4': [
479
+ '24px',
480
+ {
481
+ lineHeight: '120%',
482
+ },
483
+ ],
484
+ 'heading-5': [
485
+ '18px',
486
+ {
487
+ lineHeight: '120%',
488
+ },
489
+ ],
490
+ 'heading-6': [
491
+ '16px',
492
+ {
493
+ lineHeight: '120%',
494
+ },
495
+ ],
496
+ 'heading-1': [
497
+ '48px',
498
+ {
499
+ lineHeight: '120%',
500
+ },
501
+ ],
502
+ 'size-lg': [
503
+ '22px',
504
+ {
505
+ lineHeight: '120%',
506
+ },
507
+ ],
508
+ 'size-md': [
509
+ '18px',
510
+ ,
511
+ {
512
+ lineHeight: '120%',
513
+ },
514
+ ],
515
+ 'size-caption': [
516
+ '16px',
517
+ {
518
+ lineHeight: '120%',
519
+ },
520
+ ],
521
+ 'size-base': [
522
+ '14px',
523
+ {
524
+ lineHeight: '120%',
525
+ },
526
+ ],
527
+ 'size-sm': [
528
+ '12px',
529
+ {
530
+ lineHeight: '120%',
531
+ },
532
+ ],
533
+ 'size-tiny': [
534
+ '11px',
535
+ {
536
+ lineHeight: '120%',
537
+ },
538
+ ],
539
+ },
540
+ },
541
+ },
542
+ plugins: [],
543
+ }