Upgrade dependencies to latest stable versions, migrate Tailwind CSS v3 to v4

Bumped React, Supabase JS, and type packages to latest patch/minor releases.
Migrated the Tailwind pipeline from the v3 JS-config format to v4's CSS-first
@theme setup (@tailwindcss/postcss, @import "tailwindcss" in globals.css),
removing tailwind.config.ts and autoprefixer since v4 handles both natively.
All existing color/radius/font tokens were ported 1:1 so no component classes
needed to change. TypeScript and ESLint were bumped and tested against their
true latest majors (7.x and 10.x) but both broke the build/lint pipeline, so
they're pinned to the latest working minor instead (TypeScript 5.9.3, ESLint
9.39.5).
This commit is contained in:
2026-07-14 16:00:29 +02:00
parent f7e5cd6e6e
commit 4299277af0
5 changed files with 936 additions and 836 deletions

View File

@@ -1,8 +1,45 @@
@tailwind base; @import "tailwindcss";
@tailwind components;
@tailwind utilities; /* Design tokens from spec §7 (ported from tailwind.config.ts for Tailwind v4) */
@theme {
--color-brand-50: #fdf3f8;
--color-brand-100: #fdeaf3;
--color-brand-200: #f6cfe2;
--color-brand-500: #d6046e;
--color-brand-600: #b0035a;
--color-brand-700: #a30354;
--color-surface: #f9f1f5;
--color-border: #eedde6;
--color-border-subtle: #f7e8ef;
--color-ink: #2d1c26;
--color-ink-body: #503b47;
--color-ink-muted: #7a636f;
--color-success-bg: #dff6dd;
--color-success-text: #0e700e;
--color-danger-bg: #fde7e9;
--color-danger-text: #b10e1c;
--color-danger-solid: #c50f1f;
--color-warning-bg: #fff4ce;
--color-warning-text: #835b00;
--color-info-bg: #d7f0f0;
--color-info-text: #00666d;
--color-purple-bg: #f0ecf7;
--color-purple-text: #5c2e91;
--radius: 8px;
--font-sans: var(--font-nunito), system-ui, sans-serif;
}
body { body {
background-color: theme("colors.surface"); background-color: var(--color-surface);
color: theme("colors.ink.DEFAULT"); color: var(--color-ink);
} }

1656
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -10,21 +10,21 @@
}, },
"dependencies": { "dependencies": {
"@supabase/ssr": "^0.12.1", "@supabase/ssr": "^0.12.1",
"@supabase/supabase-js": "^2.110.3", "@supabase/supabase-js": "^2.110.5",
"lucide-react": "^1.24.0", "lucide-react": "^1.24.0",
"next": "16.2.10", "next": "16.2.10",
"react": "19.2.4", "react": "19.2.7",
"react-dom": "19.2.4" "react-dom": "19.2.7"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^20", "@tailwindcss/postcss": "^4.3.2",
"@types/react": "^19", "@types/node": "^24.13.3",
"@types/react-dom": "^19", "@types/react": "^19.2.17",
"autoprefixer": "^10.5.2", "@types/react-dom": "^19.2.3",
"eslint": "^9", "eslint": "^9.39.5",
"eslint-config-next": "16.2.10", "eslint-config-next": "16.2.10",
"postcss": "^8.5.19", "postcss": "^8.5.19",
"tailwindcss": "^3.4.19", "tailwindcss": "^4.3.2",
"typescript": "^5" "typescript": "^5.9.3"
} }
} }

View File

@@ -1,6 +1,5 @@
module.exports = { module.exports = {
plugins: { plugins: {
tailwindcss: {}, "@tailwindcss/postcss": {},
autoprefixer: {},
}, },
}; };

View File

@@ -1,44 +0,0 @@
import type { Config } from "tailwindcss";
// Design tokens from spec §7
const config: Config = {
content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
theme: {
extend: {
colors: {
brand: {
50: "#fdf3f8",
100: "#fdeaf3",
200: "#f6cfe2",
500: "#d6046e",
600: "#b0035a",
700: "#a30354",
},
surface: "#f9f1f5",
border: {
DEFAULT: "#eedde6",
subtle: "#f7e8ef",
},
ink: {
DEFAULT: "#2d1c26",
body: "#503b47",
muted: "#7a636f",
},
success: { bg: "#dff6dd", text: "#0e700e" },
danger: { bg: "#fde7e9", text: "#b10e1c", solid: "#c50f1f" },
warning: { bg: "#fff4ce", text: "#835b00" },
info: { bg: "#d7f0f0", text: "#00666d" },
purple: { bg: "#f0ecf7", text: "#5c2e91" },
},
borderRadius: {
DEFAULT: "8px",
},
fontFamily: {
sans: ["var(--font-nunito)", "system-ui", "sans-serif"],
},
},
},
plugins: [],
};
export default config;