💄(animations) add animations to smooth out general feeling

the app is your friend now, it's all smooth

src/frontend/panda.config.ts

@@ -58,6 +58,19 @@ const config: Config = {
       xl: '80em', // 1280px
       '2xl': '96em', // 1536px
     },
+    keyframes: {
+      popoverSlide: {
+        from: {
+          transform: 'var(--origin)',
+          opacity: 0,
+        },
+        to: {
+          transform: 'translateY(0)',
+          opacity: 1,
+        },
+      },
+      modalFade: { from: { opacity: 0 }, to: { opacity: 1 } },
+    },
     tokens: defineTokens({
       /* we take a few things from the panda preset but for now we clear out some stuff.
        * This way we'll only add the things we need step by step and prevent using lots of differents things.

src/frontend/src/primitives/Button.tsx

@@ -9,7 +9,7 @@ import { cva, type RecipeVariantProps } from '@/styled-system/css'
 const button = cva({
   base: {
     display: 'inline-block',
-    transition: 'background 200ms',
+    transition: 'background 200ms, outline 200ms',
     cursor: 'pointer',
     border: '1px solid transparent',
     color: 'colorPalette.text',

src/frontend/src/primitives/Checkbox.tsx

@@ -96,6 +96,10 @@ export type CheckboxProps = StyledVariantProps<typeof StyledCheckbox> &
  * the error message with the `validate` prop like other fields.
  *
  * Used internally by checkbox fields and checkbox group fields.
+ *
+ * note: this could be split in two components, one to render dumb, styled checkboxes,
+ * like Input or Radio, and another to behave as an actual "CheckboxField", that
+ * handles the error and description messages. No need for now though!
  */
 export const Checkbox = ({
   isInvalid,

src/frontend/src/primitives/Dialog.tsx

@@ -29,6 +29,8 @@ const StyledModalOverlay = styled(ModalOverlay, {
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 1000,
+    '&[data-entering]': { animation: 'modalFade 200ms' },
+    '&[data-exiting]': { animation: 'modalFade 150ms reverse ease-in' },
   },
 })
 
@@ -38,6 +40,8 @@ const StyledModal = styled(Modal, {
     width: 'full',
     height: 'full',
     pointerEvents: 'none',
+    '--origin': 'translateY(32px)',
+    '&[data-entering]': { animation: 'popoverSlide 300ms' },
   },
 })
 

src/frontend/src/primitives/Input.tsx

@@ -15,5 +15,6 @@ export const Input = styled(RACInput, {
     borderColor: 'control.border',
     color: 'control.text',
     borderRadius: 4,
+    transition: 'all 200ms',
   },
 })

src/frontend/src/primitives/Popover.tsx

@@ -11,9 +11,28 @@ import { Box } from './Box'
 
 export const StyledPopover = styled(RACPopover, {
   base: {
+    minWidth: 'var(--trigger-width)',
+    '&[data-entering]': {
+      animation: 'popoverSlide 200ms',
+    },
+    '&[data-exiting]': {
+      animation: 'popoverSlide 200ms reverse ease-in',
+    },
     '&[data-placement="bottom"]': {
       marginTop: 0.25,
     },
+    '&[data-placement=top]': {
+      '--origin': 'translateY(8px)',
+    },
+    '&[data-placement=bottom]': {
+      '--origin': 'translateY(-8px)',
+    },
+    '&[data-placement=right]': {
+      '--origin': 'translateX(-8px)',
+    },
+    '&[data-placement=left]': {
+      '--origin': 'translateX(8px)',
+    },
   },
 })
 
@@ -48,11 +67,11 @@ export const Popover = ({
     <DialogTrigger>
       {trigger}
       <StyledPopover>
-        <StyledOverlayArrow>
-          <svg width={12} height={12} viewBox="0 0 12 12">
-            <path d="M0 0 L6 6 L12 0" />
-          </svg>
-        </StyledOverlayArrow>
+          <StyledOverlayArrow>
+            <svg width={12} height={12} viewBox="0 0 12 12">
+              <path d="M0 0 L6 6 L12 0" />
+            </svg>
+          </StyledOverlayArrow>
         <Dialog {...dialogProps}>
           {({ close }) => (
             <Box size="sm" type="popover">

src/frontend/src/styles/index.css

@@ -18,4 +18,10 @@ body,
   outline: 2px solid black;
   outline-offset: 1px;
   outline-color: var(--colors-focus-ring);
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transition: none !important;
+  }
 }