From 920f7ff4011d59a6ce33aef87c66557a191d9daf Mon Sep 17 00:00:00 2001 From: Simon Farshid Date: Wed, 3 Jul 2024 23:18:36 -0700 Subject: [PATCH] fix: animations (#388) --- packages/react-ui/src/markdown-styles.css | 42 +++++++-------- packages/react-ui/src/styles.css | 64 +++++++++++++++++++++-- packages/react-ui/tailwind.config.ts | 10 ++-- 3 files changed, 82 insertions(+), 34 deletions(-) diff --git a/packages/react-ui/src/markdown-styles.css b/packages/react-ui/src/markdown-styles.css index 51917837f..4bee0777a 100644 --- 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 index e3ea53c98..0b5b7e978 100644 --- 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,7 +227,11 @@ .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 { @@ -235,4 +239,54 @@ 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 index 29ca56630..2d178926c 100644 --- 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")],