feat: multiple transitions

packages/ui/src/components/card.css

@@ -4,7 +4,9 @@
   flex-direction: column;
   background-color: var(--surface-inset-base);
   border: 1px solid var(--border-weaker-base);
-  transition: background-color 0.15s ease;
+  transition-property: background-color, border-color;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
   border-radius: var(--radius-md);
   padding: 6px 12px;
   overflow: clip;

packages/ui/src/components/checkbox.css

@@ -4,6 +4,18 @@
   gap: 12px;
   cursor: default;
 
+  [data-slot="checkbox-checkbox-control"] {
+    transition-property: border-color, background-color, box-shadow;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
+  }
+
+  [data-slot="checkbox-checkbox-indicator"] {
+    transition-property: opacity;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
+  }
+
   [data-slot="checkbox-checkbox-input"] {
     position: absolute;
     width: 1px;

packages/ui/src/components/dialog.css

@@ -6,11 +6,15 @@
   z-index: 50;
   background-color: hsl(from var(--background-base) h s l / 0.2);
 
-  /* animation: overlayHide 250ms ease 100ms forwards; */
+  animation: overlayHide var(--transition-duration) var(--transition-easing) forwards;
-  /**/
+
-  /* &[data-expanded] { */
+  &[data-expanded] {
-  /*   animation: overlayShow 250ms ease; */
+    animation: overlayShow var(--transition-duration) var(--transition-easing) forwards;
-  /* } */
+  }
+
+  @starting-style {
+    animation: none;
+  }
 }
 
 [data-component="dialog"] {
@@ -31,7 +35,6 @@
     flex-direction: column;
     align-items: center;
     justify-items: start;
-    overflow: visible;
 
     [data-slot="dialog-content"] {
       display: flex;
@@ -41,16 +44,8 @@
       width: 100%;
       max-height: 100%;
       min-height: 280px;
-      overflow: auto;
       pointer-events: auto;
 
-      /* Hide scrollbar */
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
       /* padding: 8px; */
       /* padding: 8px 8px 0 8px; */
       border-radius: var(--radius-xl);
@@ -58,11 +53,15 @@
       background-clip: padding-box;
       box-shadow: var(--shadow-lg-border-base);
 
-      /* animation: contentHide 300ms ease-in forwards; */
+      animation: contentHide var(--transition-duration) var(--transition-easing) forwards;
-      /**/
+
-      /* &[data-expanded] { */
+      &[data-expanded] {
-      /*   animation: contentShow 300ms ease-out; */
+        animation: contentShow var(--transition-duration) var(--transition-easing) forwards;
-      /* } */
+      }
+
+      @starting-style {
+        animation: none;
+      }
 
       [data-slot="dialog-header"] {
         display: flex;
@@ -166,7 +165,7 @@
 @keyframes contentShow {
   from {
     opacity: 0;
-    transform: scale(0.96);
+    transform: translateY(2.5%) scale(0.975);
   }
   to {
     opacity: 1;
@@ -180,6 +179,6 @@
   }
   to {
     opacity: 0;
-    transform: scale(0.96);
+    transform: translateY(-2.5%) scale(0.975);
   }
 }

packages/ui/src/components/switch.css

@@ -26,9 +26,9 @@
     border-radius: 3px;
     border: 1px solid var(--border-weak-base);
     background: var(--surface-base);
-    transition:
+    transition-property: background-color, border-color, box-shadow;
-      background-color 150ms,
+    transition-duration: var(--transition-duration);
-      border-color 150ms;
+    transition-timing-function: var(--transition-easing);
   }
 
   [data-slot="switch-thumb"] {
@@ -47,9 +47,9 @@
       0 1px 3px 0 rgba(19, 16, 16, 0.08);
 
     transform: translateX(-1px);
-    transition:
+    transition-property: transform, background-color, border-color;
-      transform 150ms,
+    transition-duration: var(--transition-duration);
-      background-color 150ms;
+    transition-timing-function: var(--transition-easing);
   }
 
   [data-slot="switch-label"] {

packages/ui/src/components/tabs.css

@@ -57,6 +57,9 @@
     border-bottom: 1px solid var(--border-weak-base);
     border-right: 1px solid var(--border-weak-base);
     background-color: var(--background-base);
+    transition-property: background-color, border-color, color;
+    transition-duration: var(--transition-duration);
+    transition-timing-function: var(--transition-easing);
 
     [data-slot="tabs-trigger"] {
       display: flex;

packages/ui/src/components/tag.css

@@ -8,6 +8,9 @@
   border: 0.5px solid var(--border-weak-base);
   background: var(--surface-raised-base);
   color: var(--text-base);
+  transition-property: background-color, border-color, color;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
 
   &[data-size="normal"] {
     height: 18px;

packages/ui/src/styles/utilities.css

@@ -1,6 +1,17 @@
 :root {
   interpolate-size: allow-keywords;
 
+  /* Transition tokens */
+  --transition-duration: 200ms;
+  --transition-easing: cubic-bezier(0.25, 0, 0.5, 1);
+  --transition-fast: 150ms;
+  --transition-slow: 300ms;
+
+  /* Allow height transitions from 0 to auto */
+  @supports (interpolate-size: allow-keywords) {
+    interpolate-size: allow-keywords;
+  }
+
   [data-popper-positioner] {
     pointer-events: none;
   }
@@ -129,3 +140,34 @@
   line-height: var(--line-height-x-large); /* 120% */
   letter-spacing: var(--letter-spacing-tightest);
 }
+
+/* Transition utility classes */
+.transition-colors {
+  transition-property: background-color, border-color, color, fill, stroke;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
+}
+
+.transition-opacity {
+  transition-property: opacity;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
+}
+
+.transition-transform {
+  transition-property: transform;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
+}
+
+.transition-shadow {
+  transition-property: box-shadow;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
+}
+
+.transition-interactive {
+  transition-property: background-color, border-color, color, box-shadow, opacity;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: var(--transition-easing);
+}