feat: small transitions, spacing, polishing

packages/ui/src/components/button.css

@@ -9,6 +9,7 @@
   user-select: none;
   cursor: default;
   outline: none;
+  padding: 4px 8px;
   white-space: nowrap;
   transition-property: background-color, border-color, color, box-shadow;
   transition-duration: 200ms;
@@ -105,19 +106,15 @@
   }
 
   &[data-size="small"] {
-    height: 22px;
-    padding: 0 8px;
+    padding: 2px 10px;
     &[data-icon] {
       padding: 0 12px 0 4px;
     }
-
-    font-size: var(--font-size-small);
-    line-height: var(--line-height-large);
     gap: 4px;
 
     /* text-12-medium */
     font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
+    font-size: var(--font-size-base);
     font-style: normal;
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large); /* 166.667% */
@@ -166,3 +163,39 @@
     outline: none;
   }
 }
+
+[data-slot="cycle-text"] {
+  display: inline-flex;
+  perspective: 400px;
+  overflow: hidden;
+
+  [data-slot="char"] {
+    display: inline-block;
+    transform-style: preserve-3d;
+    transform-origin: 50% 100%;
+    transform: rotateX(0deg);
+    opacity: 1;
+    transition:
+      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+      opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    transition-delay: calc(var(--i, 0) * 40ms);
+
+    /* Entry animation using @starting-style */
+    @starting-style {
+      transform: rotateX(90deg);
+      opacity: 0;
+    }
+  }
+
+  /* Exit animation when animating */
+  &[data-animating="true"] [data-slot="char"] {
+    transform: rotateX(-90deg);
+    opacity: 0;
+  }
+
+  /* Preserve spaces */
+  [data-slot="space"] {
+    display: inline-block;
+    width: 0.25em;
+  }
+}