bianic-ui 0.5.6 → 0.5.7

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