fix: animations (#388)

Yonom · Jul 4, 2024 · 920f7ff · 920f7ff
1 parent 8ec6bcb
commit 920f7ff
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 34 deletions.
diff --git a/packages/react-ui/src/markdown-styles.css b/packages/react-ui/src/markdown-styles.css
@@ -24,83 +24,77 @@
     @apply animate-[aui-pulse_2s_cubic-bezier(0.4,0,0.6,1)_infinite];
   }
 
-  @keyframes aui-pulse {
-    50% {
-      opacity: 0.5;
-    }
-  }
-
   /* typography */
 
-  h1 {
+  .aui-md-root h1 {
     @apply mb-8 scroll-m-20 text-4xl font-extrabold tracking-tight last:mb-0;
   }
 
-  h2 {
+  .aui-md-root h2 {
     @apply mb-4 mt-8 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0;
   }
 
-  h3 {
+  .aui-md-root h3 {
     @apply mb-4 mt-6 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0;
   }
 
-  h4 {
+  .aui-md-root h4 {
     @apply mb-4 mt-6 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0;
   }
 
-  h5 {
+  .aui-md-root h5 {
     @apply my-4 text-lg font-semibold first:mt-0 last:mb-0;
   }
 
-  h6 {
+  .aui-md-root h6 {
     @apply my-4 font-semibold first:mt-0 last:mb-0;
   }
 
-  p {
+  .aui-md-root p {
     @apply mb-5 mt-5 leading-7 first:mt-0 last:mb-0;
   }
 
-  a {
+  .aui-md-root a {
     @apply text-primary font-medium underline underline-offset-4;
   }
 
-  blockquote {
+  .aui-md-root blockquote {
     @apply border-l-2 pl-6 italic;
   }
 
-  ul {
+  .aui-md-root ul {
     @apply my-5 ml-6 list-disc [&>li]:mt-2;
   }
 
-  ol {
+  .aui-md-root ol {
     @apply my-5 ml-6 list-decimal [&>li]:mt-2;
   }
 
-  hr {
+  .aui-md-root hr {
     @apply my-5 border-b;
   }
 
-  table {
+  .aui-md-root table {
     @apply my-5 w-full border-separate border-spacing-0 overflow-y-auto;
   }
 
-  th {
+  .aui-md-root th {
     @apply bg-muted px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right;
   }
 
-  td {
+  .aui-md-root td {
     @apply border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right;
   }
 
-  tr {
+  .aui-md-root tr {
     @apply m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg;
   }
 
-  sup {
+  .aui-md-root sup {
     @apply [&>a]:text-xs [&>a]:no-underline;
   }
 
-  code {
+  .aui-md-root code {
     @apply overflow-x-auto rounded-b-lg bg-black p-4 text-white;
   }
 }
diff --git a/packages/react-ui/src/styles.css b/packages/react-ui/src/styles.css
@@ -1,8 +1,8 @@
 .aui-root {
   @tailwind base;
-  @tailwind components;
-  @tailwind utilities;
 }
+@tailwind components;
+
 /* shadcn-ui/button */
 
 @layer components {
@@ -52,7 +52,7 @@
   /* shadcn-ui/tooltip */
 
   .aui-tooltip-content {
-    @apply fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 animate-in bg-primary text-primary-foreground data-[state=closed]:animate-out z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs;
+    @apply fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 animate-aui-in bg-primary text-primary-foreground data-[state=closed]:animate-aui-out z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs;
   }
 
   /* assistant-modal */
@@ -61,7 +61,7 @@
     @apply bg-popover text-popover-foreground z-50 h-[500px] w-[400px] overflow-clip rounded-xl border p-0 shadow-md outline-none;
     @apply [&>.aui-thread-root]:bg-inherit;
 
-    @apply data-[state=closed]:animate-out data-[state=open]:animate-in;
+    @apply data-[state=closed]:animate-aui-out data-[state=open]:animate-aui-in;
     @apply data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0;
     @apply data-[state=closed]:zoom-out data-[state=open]:zoom-in;
     @apply data-[state=open]:slide-in-from-bottom-1/2 data-[state=open]:slide-in-from-right-1/2 data-[state=closed]:slide-out-to-bottom-1/2 data-[state=closed]:slide-out-to-right-1/2;
@@ -227,12 +227,66 @@
 
   .aui-content-part-in-progress {
     @apply bg-foreground inline-block size-3 rounded-full;
-    @apply animate-[aui-pulse_2s_cubic-bezier(0.4,0,0.6,1)_infinite];
+    @apply animate-aui-pulse;
+  }
+
+  .animate-aui-pulse {
+    animation: aui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
 
   @keyframes aui-pulse {
     50% {
       opacity: 0.5;
     }
   }
+  .animate-aui-in {
+    animation-name: aui-enter;
+    animation-duration: 150ms;
+    --tw-enter-opacity: initial;
+    --tw-enter-scale: initial;
+    --tw-enter-rotate: initial;
+    --tw-enter-translate-x: initial;
+    --tw-enter-translate-y: initial;
+  }
+  .animate-aui-out {
+    animation-name: aui-exit;
+    animation-duration: 150ms;
+    --tw-exit-opacity: initial;
+    --tw-exit-scale: initial;
+    --tw-exit-rotate: initial;
+    --tw-exit-translate-x: initial;
+    --tw-exit-translate-y: initial;
+  }
+  @keyframes aui-enter {
+    from {
+      opacity: var(--tw-enter-opacity, 1);
+      transform: translate3d(
+          var(--tw-enter-translate-x, 0),
+          var(--tw-enter-translate-y, 0),
+          0
+        )
+        scale3d(
+          var(--tw-enter-scale, 1),
+          var(--tw-enter-scale, 1),
+          var(--tw-enter-scale, 1)
+        )
+        rotate(var(--tw-enter-rotate, 0));
+    }
+  }
+  @keyframes aui-exit {
+    to {
+      opacity: var(--tw-exit-opacity, 1);
+      transform: translate3d(
+          var(--tw-exit-translate-x, 0),
+          var(--tw-exit-translate-y, 0),
+          0
+        )
+        scale3d(
+          var(--tw-exit-scale, 1),
+          var(--tw-exit-scale, 1),
+          var(--tw-exit-scale, 1)
+        )
+        rotate(var(--tw-exit-rotate, 0));
+    }
+  }
 }
diff --git a/packages/react-ui/tailwind.config.ts b/packages/react-ui/tailwind.config.ts
@@ -49,11 +49,11 @@ const config = {
         //     foreground: "hsl(var(--aui-card-foreground))",
         //   },
       },
-      // borderRadius: {
-      //   lg: "var(--aui-radius)",
-      //   md: "calc(var(--aui-radius) - 2px)",
-      //   sm: "calc(var(--aui-radius) - 4px)",
-      // },
+      borderRadius: {
+        lg: "var(--aui-radius)",
+        md: "calc(var(--aui-radius) - 2px)",
+        sm: "calc(var(--aui-radius) - 4px)",
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],