Dev deps upgrade

app/(cms)/cms.css

@@ -1,6 +1,24 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config "./../../tailwind.config.js";
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 form {
     margin-block-end: 0;

app/(cms)/cms/people/PeopleList.tsx

@@ -13,9 +13,9 @@ import { CardToolbar } from "#/components/cms/card/Card";
 import { debounce } from "lodash";
 import { LuSearch } from "react-icons/lu";
 import { MdOutlineDelete, MdOutlinePersonAdd } from "react-icons/md";
-import { Button, IconButton, LinearProgress } from "@mui/material";
+import { Button, IconButton } from "@mui/material";
 import { TextField } from "#/components/cms/input/TextField";
-import { deletePerson, readAllPeople } from "#/app/(cms)/cms/people/actions";
+import { deletePerson } from "#/app/(cms)/cms/people/actions";
 import { useRouter } from "next/navigation";
 import { useHotkeys } from "react-hotkeys-hook";
 
@@ -110,6 +110,7 @@ export default function PeopleList() {
     [filteredPeople],
   );
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const onChange = useCallback(
     debounce((value: string | null) => setSearchTerm(value?.trim().toLowerCase()), 500),
     [],

app/(web)/badminton/kinder/page.tsx

@@ -39,7 +39,7 @@ export default function Badminton() {
             jederzeit eingeladen zum Schnuppern vorbei zu kommen.
           </p>
         </div>
-        <div className="flex flex-col gap-2 flex-shrink-0">
+        <div className="flex flex-col gap-2 shrink-0">
           <h4>Trainingszeiten</h4>
           <h5>Kinder (6-14 Jahre)</h5>
           <p>Montag, 17:00 - 18:30 Uhr</p>

app/(web)/web.css

@@ -1,6 +1,24 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config "./../../tailwind.config.js";
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 form {
     margin-block-end: 0;

components/announcements/AnnouncementsBlock.tsx

@@ -17,7 +17,7 @@ export function AnnouncementsBlock() {
   }
 
   return (
-    <div className={`flex flex-col px-4 pt-4 bg-svw-blue-lighter bg-opacity-75`}>
+    <div className={`flex flex-col px-4 pt-4 bg-svw-blue-lighter/75`}>
       <BlockTitle title="Ankündigungen" />
       <Announcements announcements={announcements} />
     </div>

components/badge/NewBadge.tsx

@@ -1,5 +1,5 @@
 import React from "react";
 
 export function NewBadge() {
-  return <span className="text-xs font-medium bg-red-600 py-0.5 px-1.5 rounded">NEU</span>;
+  return <span className="text-xs font-medium bg-red-600 py-0.5 px-1.5 rounded-xs">NEU</span>;
 }

components/cms/navigation/Item.tsx

@@ -8,7 +8,7 @@ export function Item({ item, onClick }: { item: NavItem; onClick?: () => void })
   return (
     <Link
       className={`w-full h-10 rounded-r-3xl flex gap-3 pl-4 items-center text-gray-600 text-lg ${
-        active ? "text-white bg-gradient-to-r from-svw-blue-default/75 to-svw-blue-default" : "hover:bg-gray-200"
+        active ? "text-white bg-linear-to-r from-svw-blue-default/75 to-svw-blue-default" : "hover:bg-gray-200"
       }`}
       href={item.href}
       onClick={onClick}

components/cms/navigation/NavItem.tsx

@@ -14,7 +14,7 @@ export default function NavItem({ href, children, icon, active }: NavItemProps):
   return (
     <Link
       href={href}
-      className={`font-medium py-2 px-6 uppercase hover:bg-svw-blue-lighter hover:bg-opacity-25 bg-opacity-40 flex items-center ${
+      className={`font-medium py-2 px-6 uppercase hover:bg-svw-blue-lighter/25 flex items-center ${
         active ? "bg-svw-blue-lighter" : ""
       }`}
     >

components/hero/hero.tsx

@@ -7,8 +7,8 @@ import type { JSX } from "react";
 
 export function Hero(): JSX.Element {
   return (
-    <div className="md:pt-0 w-full bg-hero bg-cover bg-center">
-      <div className="w-full bg-white bg-opacity-80">
+    <div className="md:pt-0 w-full bg-[url('/media/hero/bg.jpg')] bg-cover bg-center">
+      <div className="w-full bg-white/75">
         <div className="transition-all container px-4 pb-4 flex flex-col md:flex-row justify-center items-center">
           <div className="transition-all w-full md:w-1/2 flex flex-col items-center">
             <div className="md:hidden pt-4 font-medium">Dein Verein für</div>

components/match/SoccerMatchPreview.tsx

@@ -30,7 +30,7 @@ export function SoccerMatchPreview({ match }: Props) {
 function Opponent({ team, align }: { team: Team; align: "left" | "right" }) {
   return (
     <div
-      className={`col-span-3 flex flex-col items-center gap-1 bg-neutral-100 bg-opacity-30 ${
+      className={`col-span-3 flex flex-col items-center gap-1 bg-neutral-100/30 ${
         align === "left" ? "md:flex-row-reverse" : "md:flex-row"
       }`}
     >

components/match/SoccerMatchReport.tsx

@@ -14,7 +14,7 @@ export function SoccerMatchReport({ match }: Props) {
     <div className="">
       <div className="overflow-hidden relative bg-neutral-200 min-w-[322px] bg-soccer-match-bg">
         <div className="relative flex flex-col items-center gap-1 p-1">
-          <div className="w-full flex justify-center text-sm font-medium bg-neutral-100 bg-opacity-30 p-1">
+          <div className="w-full flex justify-center text-sm font-medium bg-neutral-100/30 p-1">
             {match.competition?.name}
             <span className="px-1.5">⋅</span>
             {match.competition?.round}
@@ -35,7 +35,7 @@ export function Opponent({ team, align }: { team: Team; align: "left" | "right"
     <div
       className={`flex flex-col ${
         align === "left" ? "md:flex-row-reverse" : "md:flex-row"
-      } items-center gap-1 bg-neutral-100 bg-opacity-30 p-1`}
+      } items-center gap-1 bg-neutral-100/30 p-1`}
     >
       {team.logo && <Image src={team.logo} alt={team.name} width={LOGO_SIZE} height={LOGO_SIZE} />}
       <div className="flex font-medium text-center flex-wrap" lang="de">

components/navigation/SmallScreenNavigation.tsx

@@ -66,18 +66,14 @@ function ListItem({ item, onClick }: { item: MenuItem; onClick: () => void }) {
   return (
     <li>
       <div className="h-8 flex">
-        <Link
-          href={item.url}
-          onClick={onClick}
-          className="grow h-full flex items-center border-b border-white border-opacity-25"
-        >
+        <Link href={item.url} onClick={onClick} className="grow h-full flex items-center border-b border-white/25">
           <span className="grow pl-2">{item.name}</span>
           {item.new && <NewBadge />}
         </Link>
         {item.subMenu && (
           <button
             aria-label="Toggle Submenu"
-            className="h-full aspect-square flex justify-center items-center border-b border-white border-opacity-25"
+            className="h-full aspect-square flex justify-center items-center border-b border-white/25"
             onClick={toggleOpenClose}
           >
             <FaChevronDown className={`transition-all ${open ? "rotate-90" : ""}`} />

components/navigation/SubMenu.tsx

@@ -20,7 +20,7 @@ export function SubMenu({ item }: Props) {
             href={subPage.url}
             target={subPage.external || subPage.download ? "_blank" : "_self"}
             prefetch={subPage.download === undefined}
-            className="w-full flex gap-2 items-center text-lg px-2 font-bold border-b-2 border-opacity-25 border-white hover:border-opacity-50"
+            className="w-full flex gap-2 items-center text-lg px-2 font-bold border-b-2 border-white/25 hover:border-white/50"
           >
             <div>{subPage.name}</div>
             {subPage.new && <NewBadge />}

components/person/PersonCard.tsx

@@ -32,7 +32,7 @@ export function PersonCard({ person }: Props) {
         <div className="w-full p-4 flex flex-col justify-start">
           <div className="text-xl">{getPersonName(person)}</div>
           <div className="font-normal">{joinedTags}</div>
-          <div className="flex flex-col @md:grid @md:grid-cols-[auto_minmax(0,1fr)] @md:gap-x-4">
+          <div className="flex flex-col @md:grid @-md:grid-cols-[auto_minmax(0,1fr)] @md:gap-x-4">
             {person.email && (
               <ContactDetail label="E-Mail">
                 <Link href={`mailto:${person.email}`}>{person.email}</Link>

lib/action.ts

@@ -13,6 +13,7 @@ export function useDebouncedMutation<TVariables extends {}, TResult = unknown>(
     reject: (reason?: any) => void;
   } | null>(null);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const debouncedMutation = useCallback(
     debounce(async (variables: TVariables) => {
       try {

package.json

@@ -6,7 +6,7 @@
   "engines": {
     "node": "20.x"
   },
-  "packageManager": "[email protected].0",
+  "packageManager": "[email protected].1",
   "scripts": {
     "db:migrate": "drizzle-kit migrate",
     "dev": "next dev --turbopack",
@@ -51,18 +51,18 @@
     "ws": "^8.18.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/nextjs": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@tailwindcss/container-queries": "^0.1.1",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^16.1.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@chromatic-com/storybook": "^3.2.4",
+    "@storybook/addon-essentials": "^8.5.3",
+    "@storybook/addon-interactions": "^8.5.3",
+    "@storybook/addon-links": "^8.5.3",
+    "@storybook/blocks": "^8.5.3",
+    "@storybook/nextjs": "^8.5.3",
+    "@storybook/react": "^8.5.3",
+    "@storybook/test": "^8.5.3",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/lodash": "^4.17.14",
     "@types/mdx": "^2.0.10",
     "@types/node": "^20.9.1",
@@ -74,23 +74,22 @@
     "@types/ws": "^8.5.13",
     "@typescript-eslint/eslint-plugin": "^8.18.1",
     "@typescript-eslint/parser": "^8.18.1",
-    "@vitest/ui": "^2.1.8",
-    "autoprefixer": "^10.4.20",
-    "chromatic": "^11.20.2",
+    "@vitest/ui": "^3.0.5",
+    "chromatic": "^11.25.2",
     "drizzle-kit": "^0.30.1",
     "eslint": "^9.17.0",
     "eslint-config-next": "15.1.0",
-    "eslint-plugin-storybook": "^0.11.1",
+    "eslint-plugin-storybook": "^0.11.2",
     "jsdom": "^25.0.1",
     "postcss": "^8.4.31",
-    "prettier": "^3.1.0",
+    "prettier": "^3.4.2",
     "raw-loader": "^4.0.2",
-    "storybook": "^8.4.7",
-    "tailwindcss": "^3.3.5",
+    "storybook": "^8.5.3",
+    "tailwindcss": "^4.0.0",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.2.2",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^2.1.9"
+    "vitest": "^3.0.5"
   },
   "pnpm": {
     "overrides": {