refactor: use shadcn standard css variables

CLAUDE.md

@@ -61,7 +61,7 @@ make local-db
 # Terminal 2: API server (port 3000)
 pnpm run dev --filter api
 
-# Terminal 3: Web app (port 4000)
+# Terminal 3: Web app (port 5173)
 pnpm run dev --filter web
 
 # Terminal 4 (optional): Database UI (port 4983)

Makefile

@@ -4,7 +4,7 @@ local-db:
 
 # Serve production web app
 serve:
-	pnpm run --filter web wrangler:dev --port 4000
+	pnpm run --filter web wrangler:dev
 
 # Build production web app
 build:

apps/marketing/src/styles/global.css

@@ -1,56 +1,16 @@
-@import "tailwindcss";
 @import "@bahar/design-system/globals.css";
 @plugin "@tailwindcss/typography";
 
-@theme {
-  /* Colors - reference imported CSS variables */
-  --color-background: var(--color-background);
-  --color-foreground: var(--color-foreground);
-  --color-card: var(--color-card);
-  --color-card-foreground: var(--color-card-foreground);
-  --color-popover: var(--color-popover);
-  --color-popover-foreground: var(--color-popover-foreground);
-  --color-primary: var(--color-primary);
-  --color-primary-foreground: var(--color-primary-foreground);
-  --color-secondary: var(--color-secondary);
-  --color-secondary-foreground: var(--color-secondary-foreground);
-  --color-muted: var(--color-muted);
-  --color-muted-foreground: var(--color-muted-foreground);
-  --color-accent: var(--color-accent);
-  --color-accent-foreground: var(--color-accent-foreground);
-  --color-destructive: var(--color-destructive);
-  --color-destructive-foreground: var(--color-destructive-foreground);
-  --color-success: var(--color-success);
-  --color-success-foreground: var(--color-success-foreground);
-  --color-border: var(--color-border);
-  --color-input: var(--color-input);
-  --color-ring: var(--color-ring);
-
-  --radius-sm: 0.5rem;
-  --radius-md: 0.625rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-
-  --font-sans:
-    "Inter", "Noto Naskh Arabic", ui-sans-serif, system-ui, sans-serif;
-}
-
-/* RTL support */
-[dir="rtl"] {
-  --font-sans:
-    "Noto Naskh Arabic", "Inter", ui-sans-serif, system-ui, sans-serif;
-}
-
 /* Base styles */
 html {
   scroll-behavior: smooth;
   overflow-x: hidden;
 }
 
 body {
-  font-family: var(--font-sans);
-  background-color: var(--color-background);
-  color: var(--color-foreground);
+  font-family: var(--font-primary);
+  background-color: var(--background);
+  color: var(--foreground);
   overflow-x: hidden;
 }
 
@@ -105,19 +65,19 @@ body {
 
 /* Prose styling for blog posts */
 .prose {
-  --tw-prose-body: var(--color-foreground);
-  --tw-prose-headings: var(--color-foreground);
-  --tw-prose-links: var(--color-primary);
-  --tw-prose-bold: var(--color-foreground);
-  --tw-prose-counters: var(--color-muted-foreground);
-  --tw-prose-bullets: var(--color-muted-foreground);
-  --tw-prose-hr: var(--color-border);
-  --tw-prose-quotes: var(--color-foreground);
-  --tw-prose-quote-borders: var(--color-border);
-  --tw-prose-captions: var(--color-muted-foreground);
-  --tw-prose-code: var(--color-foreground);
-  --tw-prose-pre-code: var(--color-foreground);
-  --tw-prose-pre-bg: var(--color-muted);
-  --tw-prose-th-borders: var(--color-border);
-  --tw-prose-td-borders: var(--color-border);
+  --tw-prose-body: var(--foreground);
+  --tw-prose-headings: var(--foreground);
+  --tw-prose-links: var(--primary);
+  --tw-prose-bold: var(--foreground);
+  --tw-prose-counters: var(--muted-foreground);
+  --tw-prose-bullets: var(--muted-foreground);
+  --tw-prose-hr: var(--border);
+  --tw-prose-quotes: var(--foreground);
+  --tw-prose-quote-borders: var(--border);
+  --tw-prose-captions: var(--muted-foreground);
+  --tw-prose-code: var(--foreground);
+  --tw-prose-pre-code: var(--foreground);
+  --tw-prose-pre-bg: var(--muted);
+  --tw-prose-th-borders: var(--border);
+  --tw-prose-td-borders: var(--border);
 }

apps/mobile/src/app/_layout.tsx

@@ -26,12 +26,16 @@ import { getLocales } from "expo-localization";
 import { Provider as JotaiProvider } from "jotai";
 import { Appearance, Text, useColorScheme, View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
-import { SafeAreaProvider } from "react-native-safe-area-context";
+import {
+  SafeAreaListener,
+  SafeAreaProvider,
+} from "react-native-safe-area-context";
 import { Toaster } from "sonner-native";
 import { store } from "@/lib/store";
 
 import "@/global.css";
 import { queryClient } from "@/utils/api";
+import { Uniwind } from "uniwind";
 
 const setRootViewBackgroundColor = () => {
   const colorScheme = Appearance.getColorScheme();
@@ -80,41 +84,49 @@ export default function RootLayout() {
       <QueryClientProvider client={queryClient}>
         <GestureHandlerRootView style={{ flex: 1 }}>
           <SafeAreaProvider>
-            <View className="flex-1 bg-background">
-              <ThemeProvider
-                value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
-              >
-                <I18nProvider defaultComponent={DefaultComponent} i18n={i18n}>
-                  <Stack>
-                    <Stack.Protected guard={!authData}>
-                      <Stack.Screen
-                        name="(auth)"
-                        options={{ headerShown: false, animation: "fade" }}
-                      />
-                    </Stack.Protected>
-
-                    <Stack.Protected guard={!!authData}>
-                      <Stack.Screen
-                        name="(search)"
-                        options={{ headerShown: false, animation: "fade" }}
-                      />
-                      <Stack.Screen
-                        name="review"
-                        options={{
-                          headerShown: false,
-                          animation: "slide_from_bottom",
-                          gestureEnabled: true,
-                          gestureDirection: "vertical",
-                        }}
-                      />
-                    </Stack.Protected>
-
-                    <Stack.Screen name="+not-found" />
-                  </Stack>
-                  <StatusBar style="auto" />
-                </I18nProvider>
-              </ThemeProvider>
-            </View>
+            <SafeAreaListener
+              // Enables using p-safe and m-safe class names
+              // with uniwind
+              onChange={({ insets }) => {
+                Uniwind.updateInsets(insets);
+              }}
+            >
+              <View className="flex-1 bg-background">
+                <ThemeProvider
+                  value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
+                >
+                  <I18nProvider defaultComponent={DefaultComponent} i18n={i18n}>
+                    <Stack>
+                      <Stack.Protected guard={!authData}>
+                        <Stack.Screen
+                          name="(auth)"
+                          options={{ headerShown: false, animation: "fade" }}
+                        />
+                      </Stack.Protected>
+
+                      <Stack.Protected guard={!!authData}>
+                        <Stack.Screen
+                          name="(search)"
+                          options={{ headerShown: false, animation: "fade" }}
+                        />
+                        <Stack.Screen
+                          name="review"
+                          options={{
+                            headerShown: false,
+                            animation: "slide_from_bottom",
+                            gestureEnabled: true,
+                            gestureDirection: "vertical",
+                          }}
+                        />
+                      </Stack.Protected>
+
+                      <Stack.Screen name="+not-found" />
+                    </Stack>
+                    <StatusBar style="auto" />
+                  </I18nProvider>
+                </ThemeProvider>
+              </View>
+            </SafeAreaListener>
 
             <Toaster />
           </SafeAreaProvider>

apps/web/README.md

@@ -22,7 +22,7 @@ Install packages with `pnpm install`.
 
 Start the dev server with `pnpm dev`.
 
-The web app runs on `http://localhost:4000`.
+The web app runs on `http://localhost:5173`.
 
 ## Building
 

apps/web/index.html

@@ -30,7 +30,6 @@
   <body>
     <div id="root"></div>
     <script>
-      "use strict";
       const theme = localStorage.getItem("theme");
       const isSystemDark = window.matchMedia(
         "(prefers-color-scheme: dark)"
@@ -40,10 +39,8 @@
 
       if (theme === "dark" || (theme === "system" && isSystemDark)) {
         document.documentElement.classList.add("dark");
-        document.body.style.backgroundColor = "hsl(222.2, 84%, 4.9%)";
       } else {
         document.documentElement.classList.remove("dark");
-        document.body.style.backgroundColor = "hsl(0, 0%, 100%)";
       }
     </script>
 

apps/web/package.json

@@ -7,7 +7,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "wrangler:dev": "wrangler pages dev"
+    "wrangler:dev": "wrangler pages dev --port 5173"
   },
   "dependencies": {
     "@bahar/db-operations": "workspace:*",

apps/web/src/globals.css

@@ -5,9 +5,12 @@
 
 @layer base {
   * {
-    @apply border-border;
+    @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply font-primary bg-background text-foreground;
+  }
+  html {
+    @apply font-primary;
   }
 }