twntyx-css 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twntyx-css",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "exports": {
     "./llm": "./llm/index.json",
     "./llm/components/*": "./llm/components/*.json",

package/styles/ai.css

@@ -4,11 +4,7 @@
 
 @utility ai-perl {
   --ai-perl-size: 140px;
-  @apply relative flex items-center justify-center select-none gap-0.5 leading-none;
-  @apply text-text-default/25;
-  @apply font-semibold tracking-wide;
-  width: var(--ai-perl-size);
-  height: var(--ai-perl-size);
+  @apply size-(--ai-perl-size) relative flex items-center justify-center select-none;
 }
 
 @utility ai-perl-ring {
@@ -17,9 +13,9 @@
   --ai-perl-c3: var(--color-brand-moderate);
   --ai-perl-c1-mid: var(--color-brand-soft);
   --ai-perl-c2-mid: var(--color-brand-light);
-  --ai-perl-c3-mid: var(--color-brand-default);
+  --ai-perl-c3-mid: var(--color-brand-soft);
   --ai-perl-glow-1: color-mix(in srgb, var(--color-brand-moderate) 35%, transparent);
-  --ai-perl-glow-2: color-mix(in srgb, var(--color-brand-default) 25%, transparent);
+  --ai-perl-glow-2: color-mix(in srgb, var(--color-brand-light) 25%, transparent);
 
   @apply absolute inset-0 rounded-full animate-ai-perl-circle pointer-events-none;
 }

package/styles/animation.css

@@ -9,7 +9,6 @@
   inherits: false;
 }
 
-
 @property --ai-orb-angle {
   syntax: '<angle>';
   inherits: false;
@@ -141,8 +140,8 @@
     )
     both;
   --animate-jump-top: bounceJumpTop 6s infinite both;
-  --animate-state-explosion: stateExplosion 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)
-    forwards;
+  --animate-state-explosion: stateExplosion 0.6s
+    cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
   --animate-state-fire-in: stateFireIn 1s cubic-bezier(0.77, 0, 0.175, 1) both;
   --animate-state-in-top: stateInTop 1s cubic-bezier(0.77, 0, 0.175, 1) both;
   --animate-emote-animated: emoteAnimated 1.4s linear both infinite;
@@ -428,17 +427,20 @@
   --animate-flip-in: flipIn 1s cubic-bezier(0.77, 0, 0.175, 1) both;
   --animate-ripple-out: rippleOut 1s cubic-bezier(0, 0, 0.2, 1) forwards;
   --animate-success-in-top: successInTop 1s cubic-bezier(0.77, 0, 0.175, 1) both;
-  --animate-scale-out-big: scaleOutBig 0.5s cubic-bezier(0, 0.4, 0.8, 1.01) forwards;
+  --animate-scale-out-big: scaleOutBig 0.5s cubic-bezier(0, 0.4, 0.8, 1.01)
+    forwards;
   --animate-tooltip-in-top: tooltip-in-top 0.2s ease-out;
   --animate-tooltip-in-bottom: tooltip-in-bottom 0.2s ease-out;
   --animate-tooltip-in-left: tooltip-in-left 0.2s ease-out;
   --animate-tooltip-in-right: tooltip-in-right 0.2s ease-out;
   --animate-shine: shine 10s cubic-bezier(0.7, 0, 0.3, 1) infinite;
-  --animate-stroke-animate: stroke-animate 1s cubic-bezier(0.075, 0.82, 0.165, 1) both;
-  --animate-chat-bubble-in: chat-bubble-in 0.2s cubic-bezier(0.77, 0, 0.175, 1) both;
+  --animate-stroke-animate: stroke-animate 1s
+    cubic-bezier(0.075, 0.82, 0.165, 1) both;
+  --animate-chat-bubble-in: chat-bubble-in 0.2s cubic-bezier(0.77, 0, 0.175, 1)
+    both;
   --animate-aurora: aurora 60s linear infinite;
 
-@keyframes uiInBottom {
+  @keyframes uiInBottom {
     0% {
       transform: translateY(100%);
       opacity: 0;
@@ -476,22 +478,19 @@
     0% {
       opacity: 1;
       transform: scale(1);
-      box-shadow:
-        inset 0 0 0 1rem var(--color-yellow-50),
+      box-shadow: inset 0 0 0 1rem var(--color-yellow-50),
         inset 0 0 0 4rem var(--color-yellow-20);
     }
     90% {
       opacity: 1;
       transform: scale(2);
-      box-shadow:
-        inset 0 0 0 0 var(--color-yellow-50),
+      box-shadow: inset 0 0 0 0 var(--color-yellow-50),
         inset 0 0 0 0 var(--color-yellow-20);
     }
     100% {
       opacity: 0;
       transform: scale(2);
-      box-shadow:
-        inset 0 0 0 0 var(--color-yellow-50),
+      box-shadow: inset 0 0 0 0 var(--color-yellow-50),
         inset 0 0 0 0 var(--color-yellow-20);
     }
   }
@@ -526,16 +525,13 @@
   @keyframes bgPattern {
     0% {
       --pattern-size: 120px;
-      background-position:
-        0 0,
-        0 calc(var(--pattern-size) / 2),
+      background-position: 0 0, 0 calc(var(--pattern-size) / 2),
         calc(var(--pattern-size) / 2) calc(var(--pattern-size) / -2),
         calc(var(--pattern-size) / -2) 0;
     }
     100% {
       --pattern-size: 120px;
-      background-position:
-        var(--pattern-size) calc(var(--pattern-size) * -1),
+      background-position: var(--pattern-size) calc(var(--pattern-size) * -1),
         var(--pattern-size) calc(var(--pattern-size) * -1),
         calc(var(--pattern-size) * 1.5) calc(var(--pattern-size) * -1),
         calc(var(--pattern-size) / 2) calc(var(--pattern-size) * -1);
@@ -1044,8 +1040,7 @@
   @keyframes stateExplosion {
     0% {
       transform: scale(0.8);
-      box-shadow: 
-        inset 0 0 0 2rem var(--color-brand-default),
+      box-shadow: inset 0 0 0 2rem var(--color-brand-default),
         0 0 0 0 var(--color-brand-default),
         0 0 20px 0 var(--color-brand-default);
       opacity: 1;
@@ -1053,8 +1048,7 @@
     }
     50% {
       transform: scale(1.5);
-      box-shadow: 
-        inset 0 0 0 0.5rem var(--color-brand-moderate),
+      box-shadow: inset 0 0 0 0.5rem var(--color-brand-moderate),
         0 0 15px 5px var(--color-brand-moderate),
         0 0 30px 10px var(--color-brand-default);
       opacity: 0.8;
@@ -1062,9 +1056,7 @@
     }
     100% {
       transform: scale(2.5);
-      box-shadow: 
-        inset 0 0 0 0 transparent,
-        0 0 0 0 transparent,
+      box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent,
         0 0 0 0 transparent;
       opacity: 0;
       filter: brightness(100%);
@@ -1526,7 +1518,6 @@
     }
   }
 
-
   @keyframes cashCenter {
     0% {
       position: absolute;
@@ -2037,30 +2028,24 @@
   @keyframes ai-perl-circle {
     0% {
       transform: rotate(90deg);
-      box-shadow:
-        0 6px 12px 0 var(--ai-perl-c1) inset,
+      box-shadow: 0 6px 12px 0 var(--ai-perl-c1) inset,
         0 12px 18px 0 var(--ai-perl-c2) inset,
         0 36px 36px 0 var(--ai-perl-c3) inset,
-        0 0 3px 1.2px var(--ai-perl-glow-1),
-        0 0 6px 1.8px var(--ai-perl-glow-2);
+        0 0 3px 1.2px var(--ai-perl-glow-1), 0 0 6px 1.8px var(--ai-perl-glow-2);
     }
     50% {
       transform: rotate(270deg);
-      box-shadow:
-        0 6px 12px 0 var(--ai-perl-c1-mid) inset,
+      box-shadow: 0 6px 12px 0 var(--ai-perl-c1-mid) inset,
         0 12px 18px 0 var(--ai-perl-c2-mid) inset,
         0 36px 36px 0 var(--ai-perl-c3-mid) inset,
-        0 0 3px 1.2px var(--ai-perl-glow-1),
-        0 0 6px 1.8px var(--ai-perl-glow-2);
+        0 0 3px 1.2px var(--ai-perl-glow-1), 0 0 6px 1.8px var(--ai-perl-glow-2);
     }
     100% {
       transform: rotate(450deg);
-      box-shadow:
-        0 6px 12px 0 var(--ai-perl-c1) inset,
+      box-shadow: 0 6px 12px 0 var(--ai-perl-c1) inset,
         0 12px 18px 0 var(--ai-perl-c2) inset,
         0 36px 36px 0 var(--ai-perl-c3) inset,
-        0 0 3px 1.2px var(--ai-perl-glow-1),
-        0 0 6px 1.8px var(--ai-perl-glow-2);
+        0 0 3px 1.2px var(--ai-perl-glow-1), 0 0 6px 1.8px var(--ai-perl-glow-2);
     }
   }
 
@@ -2075,117 +2060,244 @@
 
   /* Moved from theme.css */
   @keyframes moveDown {
-      0% { transform: translateY(0%); }
-      100% { transform: translateY(100%); }
+    0% {
+      transform: translateY(0%);
+    }
+    100% {
+      transform: translateY(100%);
     }
+  }
 
   @keyframes moveUp {
-      0% { transform: translateY(0%); }
-      100% { transform: translateY(-100%); }
+    0% {
+      transform: translateY(0%);
+    }
+    100% {
+      transform: translateY(-100%);
     }
+  }
 
   @keyframes moveRight {
-      0% { transform: translateX(0%); }
-      100% { transform: translateX(100%); }
+    0% {
+      transform: translateX(0%);
     }
+    100% {
+      transform: translateX(100%);
+    }
+  }
 
   @keyframes moveLeft {
-      0% { transform: translateX(0%); }
-      100% { transform: translateX(-100%); }
+    0% {
+      transform: translateX(0%);
+    }
+    100% {
+      transform: translateX(-100%);
     }
+  }
 
   @keyframes modalIn {
-      0% { transform: scale(0.975); opacity: 0; }
-      100% { transform: scale(1); opacity: 1; }
+    0% {
+      transform: scale(0.975);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
     }
+  }
 
   @keyframes popoverInTop {
-      0% { transform: translateY(-0.125rem) scale(1); opacity: 0; }
-      100% { transform: translateY(0) scale(1); opacity: 1; }
+    0% {
+      transform: translateY(-0.125rem) scale(1);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0) scale(1);
+      opacity: 1;
     }
+  }
 
   @keyframes popoverInBottom {
-      0% { transform: translateY(0.125rem) scale(1); opacity: 0; }
-      100% { transform: translateY(0) scale(1); opacity: 1; }
+    0% {
+      transform: translateY(0.125rem) scale(1);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0) scale(1);
+      opacity: 1;
     }
+  }
 
   @keyframes flipIn {
-      0% { opacity: 0; transform: translateZ(0) rotateY(-90deg) rotateX(0deg); }
-      100% { opacity: 1; transform: translateZ(0) rotateY(0deg) rotateX(0deg); }
+    0% {
+      opacity: 0;
+      transform: translateZ(0) rotateY(-90deg) rotateX(0deg);
     }
+    100% {
+      opacity: 1;
+      transform: translateZ(0) rotateY(0deg) rotateX(0deg);
+    }
+  }
 
   @keyframes successInTop {
-      0% { transform: scale(1.1) translateY(0); filter: blur(4px); opacity: 0; }
-      100% { transform: scale(1) translateY(0); filter: blur(0px); opacity: 1; }
+    0% {
+      transform: scale(1.1) translateY(0);
+      filter: blur(4px);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1) translateY(0);
+      filter: blur(0px);
+      opacity: 1;
     }
+  }
 
   @keyframes scaleOutBig {
-      0% { pointer-events: none; opacity: 1; transform: scale(1); }
-      100% { pointer-events: none; opacity: 0; transform: scale(2); }
+    0% {
+      pointer-events: none;
+      opacity: 1;
+      transform: scale(1);
+    }
+    100% {
+      pointer-events: none;
+      opacity: 0;
+      transform: scale(2);
     }
+  }
 
   @keyframes tooltip-in-top {
-      0% { opacity: 0; transform: translateY(4px); }
-      100% { opacity: 1; transform: translateY(0); }
+    0% {
+      opacity: 0;
+      transform: translateY(4px);
     }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 
   @keyframes tooltip-in-bottom {
-      0% { opacity: 0; transform: translateY(-4px); }
-      100% { opacity: 1; transform: translateY(0); }
+    0% {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
     }
+  }
 
   @keyframes tooltip-in-left {
-      0% { opacity: 0; transform: translateX(4px); }
-      100% { opacity: 1; transform: translateX(0); }
+    0% {
+      opacity: 0;
+      transform: translateX(4px);
     }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
 
   @keyframes tooltip-in-right {
-      0% { opacity: 0; transform: translateX(-4px); }
-      100% { opacity: 1; transform: translateX(0); }
+    0% {
+      opacity: 0;
+      transform: translateX(-4px);
     }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
 
   @keyframes fade-in {
-      0% { opacity: 0; }
-      100% { opacity: 1; }
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
     }
+  }
 
   @keyframes shine {
-      0% { background-size: 300% auto; background-position: 160%; }
-      75%, 100% { background-size: 300% auto; background-position: -30%; }
+    0% {
+      background-size: 300% auto;
+      background-position: 160%;
+    }
+    75%,
+    100% {
+      background-size: 300% auto;
+      background-position: -30%;
     }
+  }
 
   @keyframes stroke-animate {
-      0% { stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 1; }
-      100% { stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 39; opacity: 0.5; }
+    0% {
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-dasharray: 100;
+      stroke-dashoffset: 100;
+      opacity: 1;
     }
+    100% {
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-dasharray: 100;
+      stroke-dashoffset: 39;
+      opacity: 0.5;
+    }
+  }
 
   @keyframes loading-text-gradient {
-      0% {
-        background: linear-gradient(to right, var(--tw-gradient-from) 0%, var(--tw-gradient-to) 12%, var(--tw-gradient-from) 24%, var(--tw-gradient-from) 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-size: 300% auto;
-        background-position: -50%;
-      }
-      100% {
-        background: linear-gradient(to right, var(--tw-gradient-from) 0%, var(--tw-gradient-to) 12%, var(--tw-gradient-from) 24%, var(--tw-gradient-from) 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-size: 300% auto;
-        background-position: -200%;
-      }
+    0% {
+      background: linear-gradient(
+        to right,
+        var(--tw-gradient-from) 0%,
+        var(--tw-gradient-to) 12%,
+        var(--tw-gradient-from) 24%,
+        var(--tw-gradient-from) 100%
+      );
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-size: 300% auto;
+      background-position: -50%;
+    }
+    100% {
+      background: linear-gradient(
+        to right,
+        var(--tw-gradient-from) 0%,
+        var(--tw-gradient-to) 12%,
+        var(--tw-gradient-from) 24%,
+        var(--tw-gradient-from) 100%
+      );
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-size: 300% auto;
+      background-position: -200%;
     }
+  }
 
   @keyframes chat-bubble-in {
-      0% { transform: scale(0.8); opacity: 0; }
-      100% { transform: scale(1); opacity: 1; }
+    0% {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
     }
+  }
 
   @keyframes aurora {
-      0% { background-position: 0% 50%, 0% 50%; }
-      50% { background-position: 100% 50%, 100% 50%; }
-      100% { background-position: 0% 50%, 0% 50%; }
+    0% {
+      background-position: 0% 50%, 0% 50%;
     }
+    50% {
+      background-position: 100% 50%, 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%, 0% 50%;
+    }
+  }
 }
 
 .perspective {