twntyx-css 1.0.3 → 1.0.5

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 (61) hide show
  1. package/llm/components/ai-perl.json +5 -12
  2. package/llm/components/all-components.json +13 -5
  3. package/llm/components/{banner-marketplace.json → banner-funding.json} +8 -8
  4. package/llm/components/breadcrumb.json +0 -1
  5. package/llm/components/button-container.json +1 -0
  6. package/llm/components/chat-ai.json +100 -6
  7. package/llm/components/chat-footer.json +24 -3
  8. package/llm/components/checkmark.json +0 -1
  9. package/llm/components/command-palette.json +0 -1
  10. package/llm/components/countdown.json +1 -1
  11. package/llm/components/divider.json +1 -1
  12. package/llm/components/kbd.json +1 -1
  13. package/llm/components/key-value.json +2 -10
  14. package/llm/components/loader-symbol.json +0 -4
  15. package/llm/components/loader-text.json +2 -20
  16. package/llm/components/progress-bullet.json +0 -1
  17. package/llm/components/state.json +2 -1
  18. package/llm/components/stepper.json +1 -1
  19. package/llm/components/steps.json +6 -95
  20. package/llm/components/surface.json +2 -0
  21. package/llm/components/tabs.json +1 -0
  22. package/llm/components/{empty-state.json → template-navbar.json} +26 -27
  23. package/llm/components/text-input.json +8 -169
  24. package/llm/components/toast.json +0 -2
  25. package/llm/components/tooltip.json +1 -1
  26. package/llm/examples/ai-perl.html +1 -1
  27. package/llm/examples/banner-funding.html +1 -0
  28. package/llm/examples/chat-ai.html +1 -1
  29. package/llm/examples/chat-footer.html +1 -1
  30. package/llm/examples/key-value.html +1 -1
  31. package/llm/examples/loader-text.html +1 -1
  32. package/llm/examples/steps.html +1 -1
  33. package/llm/examples/template-navbar.html +1 -0
  34. package/llm/index.json +24 -62
  35. package/llm/patterns.json +2 -2
  36. package/llm/tokens.json +30 -30
  37. package/package.json +1 -1
  38. package/styles/animation.css +69 -47
  39. package/styles/colors.css +306 -90
  40. package/styles/datepicker.css +8 -15
  41. package/styles/divider.css +1 -1
  42. package/styles/form.css +6 -8
  43. package/styles/globals.css +62 -64
  44. package/styles/key-value.css +4 -3
  45. package/styles/loader.css +0 -6
  46. package/styles/logotype.css +6 -6
  47. package/styles/scrollbar.css +2 -2
  48. package/styles/shared.css +17 -17
  49. package/styles/state.css +109 -97
  50. package/styles/steps.css +2 -2
  51. package/styles/surface.css +74 -90
  52. package/styles/table.css +3 -3
  53. package/styles/toast.css +3 -5
  54. package/llm/components/input-group.json +0 -94
  55. package/llm/components/navbar.json +0 -158
  56. package/llm/examples/banner-marketplace.html +0 -1
  57. package/llm/examples/empty-state.html +0 -1
  58. package/llm/examples/input-group.html +0 -1
  59. package/llm/examples/navbar.html +0 -1
  60. package/styles/empty-state.css +0 -48
  61. package/styles/navbar.css +0 -48
package/styles/animation.css CHANGED
@@ -302,7 +302,6 @@
302
302
  1
303
303
  )
304
304
  both;
305
- --animate-loading-text-gradient: loadingTextGradient 1.5s ease infinite;
306
305
  --animate-shake-bottom: shake-bottom 0.6s
307
306
  cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
308
307
  --animate-claim-diamond-rotate: claimDiamondRotate 1s
@@ -439,6 +438,36 @@
439
438
  --animate-chat-bubble-in: chat-bubble-in 0.2s cubic-bezier(0.77, 0, 0.175, 1)
440
439
  both;
441
440
  --animate-aurora: aurora 60s linear infinite;
441
+ --animate-loading-text-gradient: loadingTextGradient 1.5s ease infinite;
442
+
443
+ @keyframes loadingTextGradient {
444
+ 0% {
445
+ background: linear-gradient(
446
+ to right,
447
+ var(--tw-gradient-from) 0%,
448
+ var(--tw-gradient-to) 12%,
449
+ var(--tw-gradient-from) 24%,
450
+ var(--tw-gradient-from) 100%
451
+ );
452
+ -webkit-background-clip: text;
453
+ -webkit-text-fill-color: transparent;
454
+ background-size: 300% auto;
455
+ background-position: -50%;
456
+ }
457
+ 100% {
458
+ background: linear-gradient(
459
+ to right,
460
+ var(--tw-gradient-from) 0%,
461
+ var(--tw-gradient-to) 12%,
462
+ var(--tw-gradient-from) 24%,
463
+ var(--tw-gradient-from) 100%
464
+ );
465
+ -webkit-background-clip: text;
466
+ -webkit-text-fill-color: transparent;
467
+ background-size: 300% auto;
468
+ background-position: -200%;
469
+ }
470
+ }
442
471
 
443
472
  @keyframes uiInBottom {
444
473
  0% {
@@ -478,19 +507,22 @@
478
507
  0% {
479
508
  opacity: 1;
480
509
  transform: scale(1);
481
- box-shadow: inset 0 0 0 1rem var(--color-yellow-50),
510
+ box-shadow:
511
+ inset 0 0 0 1rem var(--color-yellow-50),
482
512
  inset 0 0 0 4rem var(--color-yellow-20);
483
513
  }
484
514
  90% {
485
515
  opacity: 1;
486
516
  transform: scale(2);
487
- box-shadow: inset 0 0 0 0 var(--color-yellow-50),
517
+ box-shadow:
518
+ inset 0 0 0 0 var(--color-yellow-50),
488
519
  inset 0 0 0 0 var(--color-yellow-20);
489
520
  }
490
521
  100% {
491
522
  opacity: 0;
492
523
  transform: scale(2);
493
- box-shadow: inset 0 0 0 0 var(--color-yellow-50),
524
+ box-shadow:
525
+ inset 0 0 0 0 var(--color-yellow-50),
494
526
  inset 0 0 0 0 var(--color-yellow-20);
495
527
  }
496
528
  }
@@ -525,13 +557,16 @@
525
557
  @keyframes bgPattern {
526
558
  0% {
527
559
  --pattern-size: 120px;
528
- background-position: 0 0, 0 calc(var(--pattern-size) / 2),
560
+ background-position:
561
+ 0 0,
562
+ 0 calc(var(--pattern-size) / 2),
529
563
  calc(var(--pattern-size) / 2) calc(var(--pattern-size) / -2),
530
564
  calc(var(--pattern-size) / -2) 0;
531
565
  }
532
566
  100% {
533
567
  --pattern-size: 120px;
534
- background-position: var(--pattern-size) calc(var(--pattern-size) * -1),
568
+ background-position:
569
+ var(--pattern-size) calc(var(--pattern-size) * -1),
535
570
  var(--pattern-size) calc(var(--pattern-size) * -1),
536
571
  calc(var(--pattern-size) * 1.5) calc(var(--pattern-size) * -1),
537
572
  calc(var(--pattern-size) / 2) calc(var(--pattern-size) * -1);
@@ -861,35 +896,6 @@
861
896
  }
862
897
  }
863
898
 
864
- @keyframes loadingTextGradient {
865
- 0% {
866
- background: linear-gradient(
867
- to right,
868
- var(--tw-gradient-from) 0%,
869
- var(--tw-gradient-to) 12%,
870
- var(--tw-gradient-from) 24%,
871
- var(--tw-gradient-from) 100%
872
- );
873
- -webkit-background-clip: text;
874
- -webkit-text-fill-color: transparent;
875
- background-size: 300% auto;
876
- background-position: -50%;
877
- }
878
- 100% {
879
- background: linear-gradient(
880
- to right,
881
- var(--tw-gradient-from) 0%,
882
- var(--tw-gradient-to) 12%,
883
- var(--tw-gradient-from) 24%,
884
- var(--tw-gradient-from) 100%
885
- );
886
- -webkit-background-clip: text;
887
- -webkit-text-fill-color: transparent;
888
- background-size: 300% auto;
889
- background-position: -200%;
890
- }
891
- }
892
-
893
899
  @keyframes xpEventInHeight {
894
900
  0% {
895
901
  height: 0;
@@ -1040,7 +1046,8 @@
1040
1046
  @keyframes stateExplosion {
1041
1047
  0% {
1042
1048
  transform: scale(0.8);
1043
- box-shadow: inset 0 0 0 2rem var(--color-brand-default),
1049
+ box-shadow:
1050
+ inset 0 0 0 2rem var(--color-brand-default),
1044
1051
  0 0 0 0 var(--color-brand-default),
1045
1052
  0 0 20px 0 var(--color-brand-default);
1046
1053
  opacity: 1;
@@ -1048,7 +1055,8 @@
1048
1055
  }
1049
1056
  50% {
1050
1057
  transform: scale(1.5);
1051
- box-shadow: inset 0 0 0 0.5rem var(--color-brand-moderate),
1058
+ box-shadow:
1059
+ inset 0 0 0 0.5rem var(--color-brand-moderate),
1052
1060
  0 0 15px 5px var(--color-brand-moderate),
1053
1061
  0 0 30px 10px var(--color-brand-default);
1054
1062
  opacity: 0.8;
@@ -1056,7 +1064,9 @@
1056
1064
  }
1057
1065
  100% {
1058
1066
  transform: scale(2.5);
1059
- box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent,
1067
+ box-shadow:
1068
+ inset 0 0 0 0 transparent,
1069
+ 0 0 0 0 transparent,
1060
1070
  0 0 0 0 transparent;
1061
1071
  opacity: 0;
1062
1072
  filter: brightness(100%);
@@ -2028,24 +2038,30 @@
2028
2038
  @keyframes ai-perl-circle {
2029
2039
  0% {
2030
2040
  transform: rotate(90deg);
2031
- box-shadow: 0 6px 12px 0 var(--ai-perl-c1) inset,
2041
+ box-shadow:
2042
+ 0 6px 12px 0 var(--ai-perl-c1) inset,
2032
2043
  0 12px 18px 0 var(--ai-perl-c2) inset,
2033
2044
  0 36px 36px 0 var(--ai-perl-c3) inset,
2034
- 0 0 3px 1.2px var(--ai-perl-glow-1), 0 0 6px 1.8px var(--ai-perl-glow-2);
2045
+ 0 0 3px 1.2px var(--ai-perl-glow-1),
2046
+ 0 0 6px 1.8px var(--ai-perl-glow-2);
2035
2047
  }
2036
2048
  50% {
2037
2049
  transform: rotate(270deg);
2038
- box-shadow: 0 6px 12px 0 var(--ai-perl-c1-mid) inset,
2050
+ box-shadow:
2051
+ 0 6px 12px 0 var(--ai-perl-c1-mid) inset,
2039
2052
  0 12px 18px 0 var(--ai-perl-c2-mid) inset,
2040
2053
  0 36px 36px 0 var(--ai-perl-c3-mid) inset,
2041
- 0 0 3px 1.2px var(--ai-perl-glow-1), 0 0 6px 1.8px var(--ai-perl-glow-2);
2054
+ 0 0 3px 1.2px var(--ai-perl-glow-1),
2055
+ 0 0 6px 1.8px var(--ai-perl-glow-2);
2042
2056
  }
2043
2057
  100% {
2044
2058
  transform: rotate(450deg);
2045
- box-shadow: 0 6px 12px 0 var(--ai-perl-c1) inset,
2059
+ box-shadow:
2060
+ 0 6px 12px 0 var(--ai-perl-c1) inset,
2046
2061
  0 12px 18px 0 var(--ai-perl-c2) inset,
2047
2062
  0 36px 36px 0 var(--ai-perl-c3) inset,
2048
- 0 0 3px 1.2px var(--ai-perl-glow-1), 0 0 6px 1.8px var(--ai-perl-glow-2);
2063
+ 0 0 3px 1.2px var(--ai-perl-glow-1),
2064
+ 0 0 6px 1.8px var(--ai-perl-glow-2);
2049
2065
  }
2050
2066
  }
2051
2067
 
@@ -2289,13 +2305,19 @@
2289
2305
 
2290
2306
  @keyframes aurora {
2291
2307
  0% {
2292
- background-position: 0% 50%, 0% 50%;
2308
+ background-position:
2309
+ 0% 50%,
2310
+ 0% 50%;
2293
2311
  }
2294
2312
  50% {
2295
- background-position: 100% 50%, 100% 50%;
2313
+ background-position:
2314
+ 100% 50%,
2315
+ 100% 50%;
2296
2316
  }
2297
2317
  100% {
2298
- background-position: 0% 50%, 0% 50%;
2318
+ background-position:
2319
+ 0% 50%,
2320
+ 0% 50%;
2299
2321
  }
2300
2322
  }
2301
2323
  }