feat: setup inter font

Author: ivan-dalmet

app/providers.tsx

@@ -7,6 +7,7 @@ import { QueryClientProvider } from '@/lib/tanstack-query/provider';
 
 import { Sonner } from '@/components/ui/sonner';
 
+import { envClient } from '@/env/client';
 import {
   DemoModeDrawer,
   useIsDemoModeDrawerVisible,
@@ -23,7 +24,7 @@ export const Providers = (props: { children: ReactNode }) => {
       <QueryClientProvider>
         {props.children}
         {!isDemoModeDrawerVisible && <Sonner />}
-        <DemoModeDrawer />
+        {envClient.VITE_IS_DEMO && <DemoModeDrawer />}
       </QueryClientProvider>
     </ThemeProvider>
   );

app/styles/app.css

@@ -1,9 +1,14 @@
 @import 'tailwindcss' source('../');
 @import 'tw-animate-css';
 
+@import '@fontsource-variable/inter';
+
 @custom-variant dark (&:is(.dark *));
 
 @theme {
+  --font-sans:
+    'Inter Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --color-*: initial;
   --color-white: #fff;
   --color-black: #000;
@@ -190,7 +195,7 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply text-foreground bg-neutral-50 dark:bg-neutral-950;
+    @apply bg-neutral-50 text-foreground dark:bg-neutral-950;
 
     @media all and (display-mode: standalone) {
       height: 100lvh; /* Force full height on iOS standalone */

package.json

@@ -43,6 +43,7 @@
   "dependencies": {
     "@base-ui-components/react": "1.0.0-alpha.8",
     "@bearstudio/ui-state": "1.0.1",
+    "@fontsource-variable/inter": "5.2.6",
     "@headlessui/react": "2.2.2",
     "@hookform/resolvers": "5.0.1",
     "@orpc/client": "1.5.2",