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