twntyx-css 1.0.2 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twntyx-css",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "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;
@@ -303,7 +302,6 @@
       1
     )
     both;
-  --animate-loading-text-gradient: loadingTextGradient 1.5s ease infinite;
   --animate-shake-bottom: shake-bottom 0.6s
     cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
   --animate-claim-diamond-rotate: claimDiamondRotate 1s
@@ -428,17 +426,50 @@
   --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;
+  --animate-loading-text-gradient: loadingTextGradient 1.5s ease infinite;
 
-@keyframes uiInBottom {
+  @keyframes loadingTextGradient {
+    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 uiInBottom {
     0% {
       transform: translateY(100%);
       opacity: 0;
@@ -865,35 +896,6 @@
     }
   }
 
-  @keyframes loadingTextGradient {
-    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 xpEventInHeight {
     0% {
       height: 0;
@@ -1044,7 +1046,7 @@
   @keyframes stateExplosion {
     0% {
       transform: scale(0.8);
-      box-shadow: 
+      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);
@@ -1053,7 +1055,7 @@
     }
     50% {
       transform: scale(1.5);
-      box-shadow: 
+      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);
@@ -1062,7 +1064,7 @@
     }
     100% {
       transform: scale(2.5);
-      box-shadow: 
+      box-shadow:
         inset 0 0 0 0 transparent,
         0 0 0 0 transparent,
         0 0 0 0 transparent;
@@ -1526,7 +1528,6 @@
     }
   }
 
-
   @keyframes cashCenter {
     0% {
       position: absolute;
@@ -2075,117 +2076,250 @@
 
   /* 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 {

package/styles/button.css

@@ -107,7 +107,7 @@
       }
     }
     &.button-primary {
-     &,
+      &,
       &:hover,
       &:active {
         @apply bg-none text-shadow-none bg-core-ui-100 dark:bg-core-ui-800 text-text-secondary/75 border-line-default;
@@ -150,9 +150,7 @@
 
   /* VARIANTS */
   &.button-primary {
-    @apply
-    surface-interactive-brand
-    ;
+    @apply surface-interactive-brand;
 
     &.is-active {
       @apply text-text-default bg-background-brand-active;
@@ -160,7 +158,7 @@
   }
 
   /* Text feedback */
-  &[data-feedback]:not([data-feedback=""]):not([data-feedback-icon]) {
+  &[data-feedback]:not([data-feedback='']):not([data-feedback-icon]) {
     @apply overflow-hidden;
 
     &::before {
@@ -174,7 +172,7 @@
   }
 
   /* Icon feedback */
-  &[data-feedback][data-feedback-icon]:not([data-feedback=""]) {
+  &[data-feedback][data-feedback-icon]:not([data-feedback='']) {
     @apply relative;
 
     &::before {
@@ -191,11 +189,12 @@
     }
 
     > * {
-      animation: button-feedback-icon-label 4s cubic-bezier(1, 0, 0, 0.9) forwards;
+      animation: button-feedback-icon-label 4s cubic-bezier(1, 0, 0, 0.9)
+        forwards;
     }
 
     /* Success variant */
-    &[data-feedback-icon="success"] {
+    &[data-feedback-icon='success'] {
       &::after {
         @apply mask-check;
       }
@@ -209,7 +208,7 @@
     }
 
     /* Error variant */
-    &[data-feedback-icon="error"] {
+    &[data-feedback-icon='error'] {
       &::after {
         @apply mask-close;
       }
@@ -223,7 +222,7 @@
     }
 
     /* Attention variant */
-    &[data-feedback-icon="attention"] {
+    &[data-feedback-icon='attention'] {
       &::after {
         @apply mask-exclamation;
       }
@@ -238,7 +237,7 @@
   }
 
   /* Hide feedback when empty */
-  &[data-feedback=""] {
+  &[data-feedback=''] {
     &::before,
     &::after {
       @apply hidden;
@@ -246,7 +245,7 @@
   }
 
   /* Icon-only feedback */
-  &[data-feedback="."] {
+  &[data-feedback='.'] {
     &::before {
       @apply hidden;
     }
@@ -335,25 +334,39 @@
 /* Close */
 .button.button-close,
 .button-close {
-   --close-size: 2.75rem;
-  @apply size-(--close-size) min-w-(--close-size) min-h-(--close-size) p-0 text-transparent! rounded-full transition-transform duration-300 hover:rotate-90 ease-out-quint;
+  --close-size: 2.75rem;
+  @apply size-(--close-size) min-w-(--close-size) min-h-(--close-size) p-0 text-transparent! rounded-full;
 
   > span {
     @apply opacity-0 pointer-events-none;
   }
 
   &::before {
-    @apply size-[calc(var(--close-size)-4px)];
+    @apply content-['']
+    block
+    size-[calc(var(--close-size)-20%)]
+    absolute
+    rotate-0
+    mask-close
+    transition-transform
+    duration-300
+    ease-out-quint;
   }
-  
+
+  &:hover {
+    &::before {
+      @apply rotate-90;
+    }
+  }
+
   &.button-xs {
-    --close-size:1.25rem;
+    --close-size: 1.25rem;
   }
   &.button-sm {
-    --close-size:1.75rem;
+    --close-size: 1.75rem;
   }
   &.button-lg {
-    --close-size:3.5rem;
+    --close-size: 3.5rem;
   }
 
   &.button-primary {
@@ -380,15 +393,6 @@
     }
   }
 
-  &::before {
-    @apply content-['']
-    absolute
-    /* block
-    inset-0 */
-    transform-gpu
-    mask-close;
-  }
-
   &:not([disabled]),
   &:not(.is-disabled) {
     &:hover,
@@ -400,8 +404,7 @@
   }
 }
 
-
-  /* SIZES */
+/* SIZES */
 .button-xs {
   @apply text-xs
   min-w-5
@@ -465,21 +468,27 @@
   }
 }
 
-
 /* Button input */
 .button {
-  &:is(input[type="checkbox"]),
-  &:is(input[type="radio"]) {
+  &:is(input[type='checkbox']),
+  &:is(input[type='radio']) {
     @apply appearance-none;
+
     &::after {
       @apply content-[attr(aria-label)];
     }
 
+    &:checked {
+      @apply z-10;
+    }
+
     &.button-primary {
       &:checked {
         @apply bg-background-inverted border-background-inverted bg-none text-shadow-none shadow-none!;
-        
-        *, &::before, &::after {
+
+        *,
+        &::before,
+        &::after {
           @apply drop-shadow-none!;
         }
         &::after {
@@ -492,7 +501,9 @@
       &:checked {
         @apply surface-brand;
 
-        *, &::before, &::after {
+        *,
+        &::before,
+        &::after {
           @apply drop-shadow-none!;
         }
       }
@@ -501,11 +512,11 @@
 }
 
 .join > .button.button-plain,
-.button.button-plain:is(input[type="checkbox"]),
-.button.button-plain:is(input[type="radio"]) {
+.button.button-plain:is(input[type='checkbox']),
+.button.button-plain:is(input[type='radio']) {
   @apply no-underline include-border-secondary text-text-default;
   &:checked {
-     @apply bg-background-inverted border-background-inverted bg-none text-shadow-none;
+    @apply bg-background-inverted border-background-inverted bg-none text-shadow-none;
     &::after {
       @apply text-text-inverted;
     }