c80a645abf
New client/ directory, standalone from the backend: Vite 8 + React 19.2 + TypeScript 6. Tailwind v4 via @tailwindcss/vite plugin (no postcss config needed). shadcn/ui compatibility wired via components.json + lib/utils.ts. @tanstack/react-query + react-router-dom installed for server state + routing. Vite config essentials: base: '/app/' — Express mounts SPA at /app/*, vanilla JS stays at / outDir: '../public/app/' — build lands next to existing static assets @/* → ./src/* (client-local imports) @shared/* → ../shared/* (typed wire protocol shared with backend) server.proxy '/api' → localhost:3000 for `npm run dev` tsconfig.app.json — added baseUrl + paths + include ../shared so the shared/types.ts + schemas.ts are typechecked on the client side too. src/index.css — Tailwind v4 @import, shadcn HSL design tokens (light + dark schemes). Replaces the vite starter template's decorative styles. No backend touched. Express route serving /app/* lands in Day 7.
55 lines
1.6 KiB
CSS
55 lines
1.6 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* shadcn/ui design tokens. Can be tuned later to match the existing
|
|
vanilla app's palette (--blue / --g100 etc. from public/css/styles.css). */
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 222.2 47.4% 11.2%;
|
|
--muted: 210 40% 96.1%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222.2 47.4% 11.2%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222.2 47.4% 11.2%;
|
|
--border: 214.3 31.8% 91.4%;
|
|
--input: 214.3 31.8% 91.4%;
|
|
--primary: 222.2 47.4% 11.2%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 210 40% 96.1%;
|
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
--accent: 210 40% 96.1%;
|
|
--accent-foreground: 222.2 47.4% 11.2%;
|
|
--destructive: 0 100% 50%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--ring: 215 20.2% 65.1%;
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: 224 71% 4%;
|
|
--foreground: 213 31% 91%;
|
|
--muted: 223 47% 11%;
|
|
--muted-foreground: 215.4 16.3% 56.9%;
|
|
--popover: 224 71% 4%;
|
|
--popover-foreground: 215 20.2% 65.1%;
|
|
--card: 224 71% 4%;
|
|
--card-foreground: 213 31% 91%;
|
|
--border: 216 34% 17%;
|
|
--input: 216 34% 17%;
|
|
--primary: 210 40% 98%;
|
|
--primary-foreground: 222.2 47.4% 1.2%;
|
|
--secondary: 222.2 47.4% 11.2%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--accent: 216 34% 17%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--destructive: 0 63% 31%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--ring: 216 34% 17%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* { @apply border-border; }
|
|
body { @apply bg-background text-foreground; }
|
|
}
|