@clasing/ui 0.1.25 → 0.1.34

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 (6) hide show
  1. package/dist/index.d.ts +76 -24
  2. package/dist/index.es.js +4498 -1566
  3. package/dist/index.umd.js +10 -10
  4. package/dist/style.css +1 -1
  5. package/package.json +5 -3
  6. package/tailwind.config.js +108 -196
package/tailwind.config.js CHANGED
@@ -88,8 +88,8 @@ module.exports = {
88
88
  disabled: 'transparent',
89
89
  },
90
90
  background: {
91
- enabled: 'hsl(var(--color-blue-500) / <alpha-value>)',
92
- hover: 'hsl(var(--color-blue-700) / <alpha-value>)',
91
+ enabled: 'hsl(var(--color-blue-700) / <alpha-value>)',
92
+ hover: 'hsl(var(--color-blue-800) / <alpha-value>)',
93
93
  pressed: 'hsl(var(--color-blue-900) / <alpha-value>)',
94
94
  disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
95
95
  },
@@ -202,7 +202,7 @@ module.exports = {
202
202
  pressed: 'transparent',
203
203
  disabled: 'transparent',
204
204
  },
205
- bg: {
205
+ background: {
206
206
  enabled: 'hsl(var(--color-brand-500) / <alpha-value>)',
207
207
  hover: 'hsl(var(--color-brand-700) / <alpha-value>)',
208
208
  pressed: 'hsl(var(--color-brand-900) / <alpha-value>)',
@@ -222,7 +222,7 @@ module.exports = {
222
222
  pressed: 'transparent',
223
223
  disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
224
224
  },
225
- bg: {
225
+ background: {
226
226
  enabled: 'transparent',
227
227
  hover: 'hsl(var(--color-neutral-300) / <alpha-value>)',
228
228
  pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
@@ -242,7 +242,7 @@ module.exports = {
242
242
  pressed: 'transparent',
243
243
  disabled: 'transparent',
244
244
  },
245
- bg: {
245
+ background: {
246
246
  enabled: 'transparent',
247
247
  hover: 'hsl(var(--color-neutral-300) / <alpha-value>)',
248
248
  pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
@@ -255,6 +255,26 @@ module.exports = {
255
255
  disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
256
256
  },
257
257
  },
258
+ destructive: {
259
+ border: {
260
+ enabled: 'transparent',
261
+ hover: 'transparent',
262
+ pressed: 'transparent',
263
+ disabled: 'transparent',
264
+ },
265
+ background: {
266
+ enabled: 'hsl(var(--color-brand-200) / <alpha-value>)',
267
+ hover: 'hsl(var(--color-brand-300) / <alpha-value>)',
268
+ pressed: 'hsl(var(--color-brand-400) / <alpha-value>)',
269
+ disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
270
+ },
271
+ content: {
272
+ enabled: 'hsl(var(--color-neutral-900) / <alpha-value>)',
273
+ hover: 'hsl(var(--color-neutral-900) / <alpha-value>)',
274
+ pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
275
+ disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
276
+ },
277
+ },
258
278
  },
259
279
  },
260
280
  content: {
@@ -263,216 +283,84 @@ module.exports = {
263
283
  subtle: 'hsl(var(--color-neutral-700) / <alpha-value>)',
264
284
  subtlest: 'hsl(var(--color-neutral-500) / <alpha-value>)',
265
285
  inverse: 'hsl(var(--color-neutral-000) / <alpha-value>)',
266
- 'subtle-inverse': 'hsl(var(--color-neutral-300) / <alpha-value>)',
267
- 'subtlest-inverse': 'hsl(var(--color-neutral-500) / <alpha-value>)',
268
- disabled: 'hsl(var(--color-neutral-200) / <alpha-value>)',
286
+ 'inverse-subtle': 'hsl(var(--color-neutral-300) / <alpha-value>)',
287
+ 'inverse-subtlest': 'hsl(var(--color-neutral-400) / <alpha-value>)',
288
+ disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
269
289
  'disabled-bolder': 'hsl(var(--color-neutral-400) / <alpha-value>)',
270
290
  },
271
291
  utility: {
272
- warning: 'hsl(var(--color-mustard-500) / <alpha-value>)',
273
- 'warning-bolder': 'hsl(var(--color-mustard-900) / <alpha-value>)',
274
- danger: 'hsl(var(--color-fuchsia-500) / <alpha-value>)',
275
- 'danger-bolder': 'hsl(var(--color-fuchsia-900) / <alpha-value>)',
276
- success: 'hsl(var(--color-lime-500) / <alpha-value>)',
277
- 'success-bolder': 'hsl(var(--color-lime-900) / <alpha-value>)',
278
- discovery: 'hsl(var(--color-violet-500) / <alpha-value>)',
279
- informative: 'hsl(var(--color-marine-500) / <alpha-value>)',
292
+ warning: 'hsl(var(--color-warning-main) / <alpha-value>)',
293
+ error: 'hsl(var(--color-error-main) / <alpha-value>)',
294
+ success: 'hsl(var(--color-success-main) / <alpha-value>)',
295
+ info: 'hsl(var(--color-info-main) / <alpha-value>)',
280
296
  },
281
297
  accent: {
282
- 'brand-subtle': 'hsl(var(--color-brand-200) / <alpha-value>)',
298
+ 'brand-subtle': 'hsl(var(--color-brand-300) / <alpha-value>)',
283
299
  brand: 'hsl(var(--color-brand-500) / <alpha-value>)',
284
300
  'brand-bolder': 'hsl(var(--color-brand-800) / <alpha-value>)',
301
+ 'blue-subtle': 'hsl(var(--color-blue-300) / <alpha-value>)',
285
302
  blue: 'hsl(var(--color-blue-500) / <alpha-value>)',
286
303
  'blue-bolder': 'hsl(var(--color-blue-800) / <alpha-value>)',
287
- mustard: 'hsl(var(--color-mustard-500) / <alpha-value>)',
288
- 'mustard-bolder': 'hsl(var(--color-mustard-800) / <alpha-value>)',
289
- green: 'hsl(var(--color-green-500) / <alpha-value>)',
290
- 'green-bolder': 'hsl(var(--color-green-800) / <alpha-value>)',
291
- lime: 'hsl(var(--color-lime-500) / <alpha-value>)',
292
- 'lime-bolder': 'hsl(var(--color-lime-800) / <alpha-value>)',
293
- fuchsia: 'hsl(var(--color-fuchsia-500) / <alpha-value>)',
294
- 'fuchsia-bolder': 'hsl(var(--color-fuchsia-800) / <alpha-value>)',
295
- marine: 'hsl(var(--color-marine-500) / <alpha-value>)',
296
- 'marine-bolder': 'hsl(var(--color-marine-800) / <alpha-value>)',
297
- violet: 'hsl(var(--color-violet-500) / <alpha-value>)',
298
- 'violet-bolder': 'hsl(var(--color-violet-800) / <alpha-value>)',
299
- gray: 'hsl(var(--color-gray-500) / <alpha-value>)',
300
- 'gray-bolder': 'hsl(var(--color-gray-800) / <alpha-value>)',
301
- 'ice-subtlest': 'hsl(var(--color-ice-100) / <alpha-value>)',
302
- 'ice-subtle': 'hsl(var(--color-ice-300) / <alpha-value>)',
303
- ice: 'hsl(var(--color-ice-500) / <alpha-value>)',
304
- 'ice-bolder': 'hsl(var(--color-ice-800) / <alpha-value>)',
304
+ 'yellow-subtle': 'hsl(var(--color-yellow-200) / <alpha-value>)',
305
+ yellow: 'hsl(var(--color-yellow-500) / <alpha-value>)',
306
+ 'yellow-bolder': 'hsl(var(--color-yellow-800) / <alpha-value>)',
305
307
  },
306
308
  link: {
307
- enabled: 'hsl(var(--color-blue-500) / <alpha-value>)',
309
+ default: 'hsl(var(--color-blue-500) / <alpha-value>)',
308
310
  hover: 'hsl(var(--color-blue-700) / <alpha-value>)',
309
311
  pressed: 'hsl(var(--color-blue-900) / <alpha-value>)',
310
312
  },
311
313
  },
312
314
  surface: {
313
- neutral: {
314
- primary: 'hsl(var(--color-neutral-000) / <alpha-value>)',
315
- secondary: 'hsl(var(--color-neutral-100) / <alpha-value>)',
316
- tertiary: 'hsl(var(--color-neutral-200) / <alpha-value>)',
317
- 'primary-inverse': 'hsl(var(--color-neutral-900) / <alpha-value>)',
318
- 'secondary-inverse': 'hsl(var(--color-neutral-800) / <alpha-value>)',
319
- 'tertiary-inverse': 'hsl(var(--color-neutral-700) / <alpha-value>)',
320
- },
321
- accent: {
322
- 'brand-subtlest': 'hsl(var(--color-brand-000) / <alpha-value>)',
323
- 'brand-subtle': 'hsl(var(--color-brand-100) / <alpha-value>)',
324
- },
315
+ primary: 'hsl(var(--color-white) / <alpha-value>)',
316
+ secondary: 'hsl(var(--color-neutral-100) / <alpha-value>)',
317
+ overlay: 'hsl(var(--color-black) / 50%)',
325
318
  },
326
- bg: {
327
- white: 'hsl(var(--color-neutral-000) / <alpha-value>)',
328
- disabled: 'hsl(var(--color-neutral-400) / <alpha-value>)',
329
- default: 'hsl(var(--color-neutral-200) / <alpha-value>)',
330
- 'default-hover': 'hsl(var(--color-neutral-400) / <alpha-value>)',
331
- 'default-pressed': 'hsl(var(--color-neutral-600) / <alpha-value>)',
332
- subtle: 'hsl(var(--color-neutral-100) / <alpha-value>)',
333
- 'subtle-hover': 'hsl(var(--color-neutral-200) / <alpha-value>)',
334
- 'subtle-pressed': 'hsl(var(--color-neutral-400) / <alpha-value>)',
335
- bolder: 'hsl(var(--color-neutral-800) / <alpha-value>)',
336
- 'bolder-hover': 'hsl(var(--color-neutral-900) / <alpha-value>)',
337
- 'bolder-pressed': 'hsl(var(--color-neutral-900) / <alpha-value>)',
319
+ background: {
320
+ transparent: 'transparent',
321
+ white: 'hsl(var(--color-white) / <alpha-value>)',
322
+ black: 'hsl(var(--color-black) / <alpha-value>)',
323
+ neutral: 'hsl(var(--color-neutral-050) / <alpha-value>)',
324
+ disabled: 'hsl(var(--color-neutral-100) / <alpha-value>)',
338
325
  'brand-subtle': 'hsl(var(--color-brand-000) / <alpha-value>)',
339
- 'brand-subtle-hover': 'hsl(var(--color-brand-200) / <alpha-value>)',
340
- 'brand-subtle-pressed': 'hsl(var(--color-brand-400) / <alpha-value>)',
341
326
  brand: 'hsl(var(--color-brand-500) / <alpha-value>)',
342
- 'brand-hover': 'hsl(var(--color-brand-700) / <alpha-value>)',
343
- 'brand-pressed': 'hsl(var(--color-brand-900) / <alpha-value>)',
344
- accent: {
345
- 'blue-subtle': 'hsl(var(--color-blue-000) / <alpha-value>)',
346
- 'blue-subtle-hover': 'hsl(var(--color-blue-200) / <alpha-value>)',
347
- 'blue-subtle-pressed': 'hsl(var(--color-blue-400) / <alpha-value>)',
348
- blue: 'hsl(var(--color-blue-500) / <alpha-value>)',
349
- 'blue-hover': 'hsl(var(--color-blue-700) / <alpha-value>)',
350
- 'blue-pressed': 'hsl(var(--color-blue-900) / <alpha-value>)',
351
- 'mustard-subtle': 'hsl(var(--color-mustard-000) / <alpha-value>)',
352
- 'mustard-subtle-hover':
353
- 'hsl(var(--color-mustard-200) / <alpha-value>)',
354
- 'mustard-subtle-pressed':
355
- 'hsl(var(--color-mustard-500) / <alpha-value>)',
356
- mustard: 'hsl(var(--color-mustard-500) / <alpha-value>)',
357
- 'mustard-hover': 'hsl(var(--color-mustard-700) / <alpha-value>)',
358
- 'mustard-pressed': 'hsl(var(--color-mustard-900) / <alpha-value>)',
359
- 'green-subtle': 'hsl(var(--color-green-000) / <alpha-value>)',
360
- 'green-subtle-hover': 'hsl(var(--color-green-200) / <alpha-value>)',
361
- 'green-subtle-pressed': 'hsl(var(--color-green-500) / <alpha-value>)',
362
- green: 'hsl(var(--color-green-500) / <alpha-value>)',
363
- 'green-hover': 'hsl(var(--color-green-700) / <alpha-value>)',
364
- 'green-pressed': 'hsl(var(--color-green-900) / <alpha-value>)',
365
- 'lime-subtle': 'hsl(var(--color-lime-000) / <alpha-value>)',
366
- 'lime-subtle-hover': 'hsl(var(--color-lime-200) / <alpha-value>)',
367
- 'lime-subtle-pressed': 'hsl(var(--color-lime-500) / <alpha-value>)',
368
- lime: 'hsl(var(--color-lime-500) / <alpha-value>)',
369
- 'lime-hover': 'hsl(var(--color-lime-700) / <alpha-value>)',
370
- 'lime-pressed': 'hsl(var(--color-lime-900) / <alpha-value>)',
371
- 'fuchsia-subtle': 'hsl(var(--color-fuchsia-000) / <alpha-value>)',
372
- 'fuchsia-subtle-hover':
373
- 'hsl(var(--color-fuchsia-200) / <alpha-value>)',
374
- 'fuchsia-subtle-pressed':
375
- 'hsl(var(--color-fuchsia-500) / <alpha-value>)',
376
- fuchsia: 'hsl(var(--color-fuchsia-500) / <alpha-value>)',
377
- 'fuchsia-hover': 'hsl(var(--color-fuchsia-700) / <alpha-value>)',
378
- 'fuchsia-pressed': 'hsl(var(--color-fuchsia-900) / <alpha-value>)',
379
- 'marine-subtle': 'hsl(var(--color-marine-000) / <alpha-value>)',
380
- 'marine-subtle-hover': 'hsl(var(--color-marine-200) / <alpha-value>)',
381
- 'marine-subtle-pressed':
382
- 'hsl(var(--color-marine-500) / <alpha-value>)',
383
- marine: 'hsl(var(--color-marine-500) / <alpha-value>)',
384
- 'marine-hover': 'hsl(var(--color-marine-700) / <alpha-value>)',
385
- 'marine-pressed': 'hsl(var(--color-marine-500) / <alpha-value>)',
386
- 'violet-subtle': 'hsl(var(--color-violet-000) / <alpha-value>)',
387
- 'violet-subtle-hover': 'hsl(var(--color-violet-200) / <alpha-value>)',
388
- 'violet-subtle-pressed':
389
- 'hsl(var(--color-violet-500) / <alpha-value>)',
390
- violet: 'hsl(var(--color-violet-500) / <alpha-value>)',
391
- 'violet-hover': 'hsl(var(--color-violet-700) / <alpha-value>)',
392
- 'violet-pressed': 'hsl(var(--color-violet-900) / <alpha-value>)',
393
- 'gray-subtle': 'hsl(var(--color-gray-000) / <alpha-value>)',
394
- 'gray-subtle-hover': 'hsl(var(--color-gray-200) / <alpha-value>)',
395
- 'gray-subtle-pressed': 'hsl(var(--color-gray-500) / <alpha-value>)',
396
- gray: 'hsl(var(--color-gray-500) / <alpha-value>)',
397
- 'gray-hover': 'hsl(var(--color-gray-700) / <alpha-value>)',
398
- 'gray-pressed': 'hsl(var(--color-gray-900) / <alpha-value>)',
399
- 'ice-subtle': 'hsl(var(--color-ice-000) / <alpha-value>)',
400
- 'ice-subtle-hover': 'hsl(var(--color-ice-200) / <alpha-value>)',
401
- 'ice-subtle-pressed': 'hsl(var(--color-ice-500) / <alpha-value>)',
402
- ice: 'hsl(var(--color-ice-500) / <alpha-value>)',
403
- 'ice-hover': 'hsl(var(--color-ice-700) / <alpha-value>)',
404
- 'ice-pressed': 'hsl(var(--color-ice-900) / <alpha-value>)',
405
- },
327
+ 'brand-bolder': 'hsl(var(--color-brand-900) / <alpha-value>)',
328
+ 'blue-subtle': 'hsl(var(--color-blue-000) / <alpha-value>)',
329
+ blue: 'hsl(var(--color-blue-500) / <alpha-value>)',
330
+ 'blue-bolder': 'hsl(var(--color-blue-900) / <alpha-value>)',
331
+ 'yellow-subtle': 'hsl(var(--color-yellow-000) / <alpha-value>)',
332
+ yellow: 'hsl(var(--color-yellow-500) / <alpha-value>)',
333
+ 'yellow-bolder': 'hsl(var(--color-yellow-900) / <alpha-value>)',
406
334
  utility: {
407
- danger: 'hsl(var(--color-fuchsia-000) / <alpha-value>)',
408
- 'danger-hover': 'hsl(var(--color-fuchsia-300) / <alpha-value>)',
409
- 'danger-pressed': 'hsl(var(--color-fuchsia-500) / <alpha-value>)',
410
- 'danger-bolder': 'hsl(var(--color-fuchsia-500) / <alpha-value>)',
411
- 'danger-bolder-hover':
412
- 'hsl(var(--color-fuchsia-700) / <alpha-value>)',
413
- 'danger-bolder-pressed':
414
- 'hsl(var(--color-fuchsia-900) / <alpha-value>)',
415
- warning: 'hsl(var(--color-mustard-000) / <alpha-value>)',
416
- 'warning-hover': 'hsl(var(--color-mustard-300) / <alpha-value>)',
417
- 'warning-pressed': 'hsl(var(--color-mustard-500) / <alpha-value>)',
418
- 'warning-bolder': 'hsl(var(--color-mustard-500) / <alpha-value>)',
419
- 'warning-bolder-hover':
420
- 'hsl(var(--color-mustard-700) / <alpha-value>)',
421
- 'warning-bolder-pressed':
422
- 'hsl(var(--color-mustard-900) / <alpha-value>)',
423
- success: 'hsl(var(--color-lime-000) / <alpha-value>)',
424
- 'success-hover': 'hsl(var(--color-lime-200) / <alpha-value>)',
425
- 'success-pressed': 'hsl(var(--color-lime-500) / <alpha-value>)',
426
- 'success-bolder': 'hsl(var(--color-lime-500) / <alpha-value>)',
427
- 'success-bolder-hover': 'hsl(var(--color-lime-700) / <alpha-value>)',
428
- 'success-bolder-pressed':
429
- 'hsl(var(--color-lime-900) / <alpha-value>)',
430
- discovery: 'hsl(var(--color-violet-000) / <alpha-value>)',
431
- 'discovery-hover': 'hsl(var(--color-violet-300) / <alpha-value>)',
432
- 'discovery-pressed': 'hsl(var(--color-violet-500) / <alpha-value>)',
433
- 'discovery-bolder': 'hsl(var(--color-violet-500) / <alpha-value>)',
434
- 'discovery-bolder-hover':
435
- 'hsl(var(--color-violet-700) / <alpha-value>)',
436
- 'discovery-bolder-pressed':
437
- 'hsl(var(--color-violet-900) / <alpha-value>)',
438
- informative: 'hsl(var(--color-marine-000) / <alpha-value>)',
439
- 'informative-hover': 'hsl(var(--color-marine-300) / <alpha-value>)',
440
- 'informative-pressed': 'hsl(var(--color-marine-500) / <alpha-value>)',
441
- 'informative-bolder': 'hsl(var(--color-marine-500) / <alpha-value>)',
442
- 'informative-bolder-hover':
443
- 'hsl(var(--color-marine-700) / <alpha-value>)',
444
- 'informative-bolder-pressed':
445
- 'hsl(var(--color-marine-900) / <alpha-value>)',
335
+ 'error-light': 'hsl(var(--color-error-light) / <alpha-value>)',
336
+ error: 'hsl(var(--color-error-main) / <alpha-value>)',
337
+ 'warning-light': 'hsl(var(--color-warning-light) / <alpha-value>)',
338
+ warning: 'hsl(var(--color-warning-main) / <alpha-value>)',
339
+ 'info-light': 'hsl(var(--color-info-light) / <alpha-value>)',
340
+ info: 'hsl(var(--color-info-main) / <alpha-value>)',
341
+ 'success-light': 'hsl(var(--color-success-light) / <alpha-value>)',
342
+ success: 'hsl(var(--color-success-main) / <alpha-value>)',
446
343
  },
447
344
  },
448
345
  border: {
449
- subtlest: 'hsl(var(--color-neutral-500) / <alpha-value>)',
450
- subtle: 'hsl(var(--color-neutral-700) / <alpha-value>)',
451
- bolder: 'hsl(var(--color-neutral-900) / <alpha-value>)',
452
- brand: 'hsl(var(--color-brand-500) / <alpha-value>)',
453
- disabled: 'hsl(var(--color-neutral-400) / <alpha-value>)',
454
- focused: 'hsl(var(--color-blue-900) / <alpha-value>)',
455
- 'inversed-subtlest': 'hsl(var(--color-neutral-400) / <alpha-value>)',
456
- 'inversed-subtle': 'hsl(var(--color-neutral-200) / <alpha-value>)',
457
- 'inversed-bolder': 'hsl(var(--color-neutral-000) / <alpha-value>)',
458
346
  transparent: 'transparent',
459
- accent: {
460
- blue: 'hsl(var(--color-blue-500) / <alpha-value>)',
461
- mustard: 'hsl(var(--color-mustard-500) / <alpha-value>)',
462
- green: 'hsl(var(--color-green-500) / <alpha-value>)',
463
- lime: 'hsl(var(--color-lime-500) / <alpha-value>)',
464
- fuchsia: 'hsl(var(--color-fuchsia-500) / <alpha-value>)',
465
- marine: 'hsl(var(--color-marine-500) / <alpha-value>)',
466
- violet: 'hsl(var(--color-violet-500) / <alpha-value>)',
467
- gray: 'hsl(var(--color-gray-500) / <alpha-value>)',
468
- ice: 'hsl(var(--color-ice-500) / <alpha-value>)',
469
- },
347
+ subtle: 'hsl(var(--color-neutral-100) / <alpha-value>)',
348
+ default: 'hsl(var(--color-neutral-300) / <alpha-value>)',
349
+ bolder: 'hsl(var(--color-neutral-500) / <alpha-value>)',
350
+ 'brand-subtle': 'hsl(var(--color-brand-100) / <alpha-value>)',
351
+ brand: 'hsl(var(--color-brand-300) / <alpha-value>)',
352
+ 'brand-bolder': 'hsl(var(--color-brand-500) / <alpha-value>)',
353
+ 'blue-subtle': 'hsl(var(--color-blue-100) / <alpha-value>)',
354
+ blue: 'hsl(var(--color-blue-300) / <alpha-value>)',
355
+ 'blue-bolder': 'hsl(var(--color-blue-500) / <alpha-value>)',
356
+ 'yellow-subtle': 'hsl(var(--color-yellow-100) / <alpha-value>)',
357
+ yellow: 'hsl(var(--color-yellow-300) / <alpha-value>)',
358
+ 'yellow-bolder': 'hsl(var(--color-yellow-500) / <alpha-value>)',
470
359
  utility: {
471
- danger: 'hsl(var(--color-fuchsia-900) / <alpha-value>)',
472
- success: 'hsl(var(--color-lime-500) / <alpha-value>)',
473
- discovery: 'hsl(var(--color-violet-500) / <alpha-value>)',
474
- informative: 'hsl(var(--color-marine-500) / <alpha-value>)',
475
- warning: 'hsl(var(--color-mustard-500) / <alpha-value>)',
360
+ warning: 'hsl(var(--color-warning-main) / <alpha-value>)',
361
+ error: 'hsl(var(--color-error-main) / <alpha-value>)',
362
+ success: 'hsl(var(--color-success-main) / <alpha-value>)',
363
+ info: 'hsl(var(--color-info-main) / <alpha-value>)',
476
364
  },
477
365
  },
478
366
  },
@@ -496,13 +384,13 @@ module.exports = {
496
384
  lg: '4px',
497
385
  },
498
386
  boxShadow: {
499
- xs: '0px 1px 2px 0px rgba(16, 24, 40, 0.04), 0px 1px 2px 0px rgba(16, 24, 40, 0.04)',
500
- sm: '0px 2px 6px 0px rgba(16, 24, 40, 0.06)',
501
- md: '0px 6px 15px -2px rgba(16, 24, 40, 0.08), 0px 6px 15px -2px rgba(16, 24, 40, 0.08)',
502
- lg: '0px 8px 24px -3px rgba(16, 24, 40, 0.05), 0px 8px 24px -3px rgba(16, 24, 40, 0.10)',
503
- xl: '0px 20px 40px -8px rgba(16, 24, 40, 0.05), 0px 20px 40px -8px rgba(16, 24, 40, 0.10)',
387
+ xs: '0px 2px 4px 0px rgba(25, 25, 25, 0.08), 0px 0px 2px 0px rgba(25, 25, 25, 0.08)',
388
+ sm: '0px 4px 8px 0px rgba(25, 25, 25, 0.10), 0px 0px 4px 0px rgba(0, 0, 0, 0.08)',
389
+ md: '0px 8px 16px 0px rgba(25, 25, 25, 0.10), 0px 0px 6px 0px rgba(25, 25, 25, 0.08)',
390
+ lg: '0px 10px 20px 0px rgba(0, 0, 0, 0.19), 0px 0px 8px 0px rgba(25, 25, 25, 0.08)',
391
+ xl: '0px 12px 24px 0px rgba(25, 25, 25, 0.10), 0px 0px 10px 0px rgba(25, 25, 25, 0.08)',
504
392
  '2xl':
505
- '0px 25px 60px -15px rgba(16, 24, 40, 0.12), 0px 25px 60px -15px rgba(16, 24, 40, 0.20)',
393
+ '0px 16px 32px 0px rgba(25, 25, 25, 0.10), 0px 0px 12px 0px rgba(25, 25, 25, 0.08)',
506
394
  },
507
395
  extend: {
508
396
  padding: {
@@ -510,6 +398,30 @@ module.exports = {
510
398
  'button-md': '12px 24px',
511
399
  'button-lg': '12px 24px',
512
400
  },
401
+ animation: {
402
+ 'fade-in-top-to-bottom': 'fadeInTopToBottom 0.25s ease-out',
403
+ 'fade-out-bottom-to-top': 'fadeOutBottomToTop 0.25s ease-out',
404
+ 'fade-in-bottom-to-top': 'fadeInBottomToTop 0.25s ease-out',
405
+ 'fade-out-top-to-bottom': 'fadeOutTopToBottom 0.25s ease-out',
406
+ },
407
+ keyframes: {
408
+ fadeInTopToBottom: {
409
+ '0%': { transform: 'translateY(-100%)', opacity: 0 },
410
+ '100%': { transform: 'translateY(0)', opacity: 1 },
411
+ },
412
+ fadeOutBottomToTop: {
413
+ '0%': { transform: 'translateY(0)', opacity: 1 },
414
+ '100%': { transform: 'translateY(-100%)', opacity: 0 },
415
+ },
416
+ fadeInBottomToTop: {
417
+ '0%': { transform: 'translateY(100%)', opacity: 0 },
418
+ '100%': { transform: 'translateY(0)', opacity: 1 },
419
+ },
420
+ fadeOutTopToBottom: {
421
+ '0%': { transform: 'translateY(0)', opacity: 1 },
422
+ '100%': { transform: 'translateY(100%)', opacity: 0 },
423
+ },
424
+ },
513
425
  },
514
426
  },
515
427
  plugins: [require('@tailwindcss/forms')],