jeanGaston/lovelope
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: scaffold shadcn/ui on the existing Tailwind v3 setup

Browse Source 
Adds components.json, cn() util, Radix + cva/clsx/tailwind-merge/
lucide-react/sonner deps, and CSS-variable color tokens mapped onto
the brand's existing pink-500 primary (#ec4899) and neutral grays.

`shadcn init` defaulted to Tailwind v4-style output (oklch colors,
`@theme`-driven CSS, `tw-animate-css`) without updating
tailwind.config.ts, which would not have compiled against the
project's pinned Tailwind v3. Hand-wrote the classic v3 integration
instead (HSL vars + tailwind.config.ts color/radius mapping +
tailwindcss-animate) rather than pull in an unplanned Tailwind
major-version migration.

Also drops the sunset/neon/pastel raw color scales from
tailwind.config.ts: grep confirmed no class ever referenced them,
they were leftover from before lib/themes.ts.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Paul Goncalves Monnet
2026-07-29 19:34:48 +02:00
parent df4e254e9e
commit d01311569f
6 changed files with 1967 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/globals.css
+53 -1
View File
@@ -6,6 +6,50 @@
:root {
--font-inter: 'Inter', system-ui, sans-serif;
--font-poppins: 'Poppins', system-ui, sans-serif;
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
/* Brand pink (Tailwind pink-500) drives every primary action across the app */
--primary: 330 81% 60%;
--primary-foreground: 0 0% 100%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 330 81% 96%;
--accent-foreground: 330 81% 30%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 330 81% 60%;
--radius: 0.75rem;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 330 81% 60%;
--primary-foreground: 0 0% 100%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 330 40% 20%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 330 81% 60%;
}
html {
@@ -13,7 +57,11 @@
}
body {
@apply antialiased;
@apply antialiased bg-background text-foreground;
}
* {
@apply border-border;
}
@media (prefers-reduced-motion: reduce) {
@@ -34,4 +82,8 @@
.gradient-text {
@apply bg-clip-text text-transparent;
}
/* iOS/Android safe-area padding for the sticky mobile action bar */
.pb-safe {
padding-bottom: max(env(safe-area-inset-bottom), 0.75rem);
}
}