feat: Sample transitions pr (#4477)

* Updating theming to include transitions
Co-authored-by: Alex Ball <alexball@UNISWAP-MAC-038.local>

src/theme/index.tsx

@@ -36,6 +36,19 @@ const BREAKPOINTS = {
   xxxl: 1920,
 }
 
+const transitions = {
+  duration: {
+    slow: 500,
+    medium: 250,
+    fast: 125,
+  },
+  timing: {
+    in: 'ease-in',
+    out: 'ease-out',
+    inOut: 'ease-in-out',
+  },
+}
+
 // Migrating to a standard z-index system https://getbootstrap.com/docs/5.0/layout/z-index/
 // Please avoid using deprecated numbers
 export enum Z_INDEX {
@@ -270,6 +283,8 @@ function getTheme(darkMode: boolean, isNewColorsEnabled: boolean): DefaultTheme
     //breakpoints
     breakpoint: BREAKPOINTS,
 
+    transition: transitions,
+
     // css snippets
     flexColumnNoWrap: css`
       display: flex;

src/theme/styled.d.ts

@@ -142,7 +142,18 @@ declare module 'styled-components/macro' {
       xxl: number
       xxxl: number
     }
-
+    transition: {
+      duration: {
+        slow: number
+        medium: number
+        fast: number
+      }
+      timing: {
+        in: string
+        out: string
+        inOut: string
+      }
+    }
     // css snippets
     flexColumnNoWrap: FlattenSimpleInterpolation
     flexRowNoWrap: FlattenSimpleInterpolation