chore!(website): migrate tailwind to v4, daisyui to v5 and flowbite-react to v0.12, change how custom colors are defined (#6510)

Breaking: custom color themes now need to be defined in
`src/styles/custom-colors.css` as CSS variables:

```css
/* src/styles/custom-colors.css
 * Custom colors now defined in this file */
:root,
:host {
 --color-primary-400: #52b4de;
 --color-primary-600: #1c7dad;
 /* etc */
}
```

Resolves #4020, resolves #3714, resolves #5117

Unblocks #6513

Commit messages have more detail about reasoning behind the changes.
I've tried to keep changes minimal but a bunch of things were
unavoidable. Overview of main changes:

- Tailwind renames a lot of classes, this causes the majority of the
churn. Much of the renames were done by tailwind's upgrade cli but it
missed some files and some class patterns so Codex/Claude reviewed
migration guide as well to find anything remaining.
- DaisyUI v5 hides modals with `.modal-box` class unless they are inside
`.modal`, we had a bunch of modals that weren't following this pattern
- We now need to pin vite to v6, the same used by our current version of
astro, as otherwise our 2-stage build with `npm ci --omit=dev` gets
mismatch issues
- Fix some console errors related to react ref forwarding and SSR
hydration
- Flowbite v0.10 used to set a bunch of global styles that are no longer
set in v0.12. To keep styling consistent I add relevant global styles as
a CSS file. We use those styles for example in radio buttons, checkboxes
- Color theme is now defined as css instead of `colors.json`
(`website/colors.json`) as we can no longer import a json file in CSS
(it could be imported into tailwind config, but that's no longer
possible in tailwind v4). This would be breaking for people who override
colors (heads up to Genspectrum @chaoran-chen @fengelniederhammer if you
do).

Feel free to ask if you have questions about some of the changes.

Author: corneliusroemer

.github/dependabot.yml

@@ -18,8 +18,6 @@ updates:
       versions: [ ">=5.0.0" ]
     - dependency-name: "@mui/material"
     - dependency-name: "change-case"
-    # see https://github.com/loculus-project/loculus/issues/4020
-    - dependency-name: "flowbite-react"
     - dependency-name: "@types/node"
       versions: [">=23"] # Increase when we update node version in .nvmrc
     groups:

integration-tests/tests/fixtures/console-warnings.fixture.ts

@@ -11,6 +11,7 @@ export const test = base.extend({
                     'Form submission canceled because the form is not connected',
                     'ERR_INCOMPLETE_CHUNKED_ENCODING',
                     "Response to preflight request doesn't pass access control check", // LAPIS sometimes hangs up preflight requests for unknown reasons
+                    'has been externalized for browser compatibility.',
                 ];
 
                 const isHarmless = harmlessMessages.some((harmless) =>

website/.gitignore

@@ -18,6 +18,9 @@ pnpm-debug.log*
 
 log/
 
+# flowbite-react auto-generated files (regenerated by `flowbite-react dev/build`)
+.flowbite-react/
+
 justfile
 /tests/config/backend_config.json
 /tests/config/website_config.json

website/.prettierignore

@@ -1,3 +1,4 @@
 /dist
 /playwright-report
 .claude/
+.flowbite-react/

website/astro.config.mjs

@@ -1,14 +1,15 @@
 import { defineConfig } from 'astro/config';
 import node from '@astrojs/node';
-import tailwind from '@astrojs/tailwind';
+import tailwindcss from '@tailwindcss/vite';
 import Icons from 'unplugin-icons/vite';
 import react from '@astrojs/react';
 import mdx from '@astrojs/mdx';
+import flowbiteReact from 'flowbite-react/plugin/astro';
 
 // https://astro.build/config
 export default defineConfig({
     output: 'server',
-    integrations: [tailwind(), react(), mdx()],
+    integrations: [react(), mdx(), flowbiteReact()],
     adapter: node({
         mode: 'standalone',
     }),
@@ -20,6 +21,6 @@ export default defineConfig({
         optimizeDeps: {
             exclude: ['fsevents', 'msw/node', 'msw', 'chromium-bidi'],
         },
-        plugins: [Icons({ compiler: 'jsx', jsx: 'react' })],
+        plugins: [tailwindcss(), Icons({ compiler: 'jsx', jsx: 'react' })],
     },
 });

website/colors.json

@@ -154,7 +154,7 @@ const disableFromReact = {
 
 export default defineConfig(
     {
-        ignores: ['**/.astro/content.d.ts'],
+        ignores: ['**/.astro/content.d.ts', '.flowbite-react/**'],
         files: ['**/*.ts', '**/*.tsx'],
         extends: [
             eslint.configs.recommended,