switch to tailwind v4

Signed-off-by: Peter Siegmund <developer@mars3142.org>

.gitignore

@@ -29,3 +29,4 @@ firmware/**/node_modules
 hardware/pcbway_production/
 hardware/*.zip
 *.log
+*.local.json

firmware/website/.claude/settings.local.json

@@ -1,11 +0,0 @@
-{
-  "enableAllProjectMcpServers": true,
-  "enabledMcpjsonServers": [
-    "svelte"
-  ],
-  "permissions": {
-    "allow": [
-      "mcp__svelte__svelte-autofixer"
-    ]
-  }
-}

firmware/website/package.json

@@ -9,19 +9,15 @@
 	},
 	"devDependencies": {
 		"@sveltejs/vite-plugin-svelte": "^6.1.1",
-		"@tailwindcss/typography": "^0.5.19",
-		"autoprefixer": "^10.4.16",
-		"postcss": "^8.4.31",
+		"@tailwindcss/vite": "^4.1.18",
 		"svelte": "^5.53.5",
-		"tailwindcss": "^3.3.5",
+		"tailwindcss": "^4.1.18",
 		"vite": "^7.1.2",
 		"vite-plugin-compression": "^0.5.1",
 		"vitest": "^3.2.4"
 	},
 	"dependencies": {
 		"@fontsource/atkinson-hyperlegible": "^5.2.6",
-		"@picocss/pico": "^2.1.1",
-		"@tailwindcss/vite": "^4.1.18",
 		"gsap": "^3.13.0",
 		"svelte-french-toast": "^2.0.0-alpha.0",
 		"svelte-spa-router": "^4.0.2"

firmware/website/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

firmware/website/src/app.css

@@ -1,6 +1,18 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@theme {
+    --color-bg: var(--bg-color);
+    --color-card: var(--card-bg);
+    --color-accent: var(--accent);
+    --color-text: var(--text);
+    --color-text-muted: var(--text-muted);
+    --color-success: var(--success);
+    --color-error: var(--error);
+    --color-border: var(--border);
+    --color-input: var(--input-bg);
+    --color-primary: var(--primary);
+    --shadow-custom: var(--shadow);
+}
 
 :root {
     /* Default to Light Theme */
@@ -34,12 +46,6 @@
     }
 }
 
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     background: var(--bg-color);

firmware/website/src/components/common/dropDown.svelte

@@ -34,8 +34,8 @@
 	<button
 		type="button"
 		{id}
-		class="w-full flex items-center justify-between p-4 rounded-md border bg-background text-foreground transition-all {isDropdownOpen
-			? 'bg-primary/10 border-primary ring-destructive/20'
+		class="w-full flex items-center justify-between p-4 rounded-md border bg-card text-text transition-all {isDropdownOpen
+			? 'bg-primary/10 border-primary'
 			: 'border-border hover:bg-accent'}"
 		onclick={toggleDropdown}
 		aria-haspopup="listbox"
@@ -62,16 +62,16 @@
 	{#if isDropdownOpen}
 		<ul
 			transition:slide={{ duration: 150 }}
-			class="absolute z-20 w-full mt-2 bg-popover text-popover-foreground bg-card border border-border rounded-md shadow-md overflow-hidden"
+			class="absolute z-20 w-full mt-2 bg-card border border-border rounded-md shadow-md overflow-hidden"
 			role="listbox"
 		>
 			{#each options as option}
 				<li>
 					<button
 						type="button"
-						class="w-full text-left px-4 py-3 text-sm transition-colors hover:bg-accent hover:text-accent-foreground {option.value ===
+						class="w-full text-left px-4 py-3 text-sm transition-colors hover:bg-accent hover:text-text {option.value ===
 						value
-							? 'bg-primary text-primary-foreground font-medium'
+							? 'bg-primary text-white font-medium'
 							: ''}"
 						role="option"
 						aria-selected={option.value === value}

firmware/website/src/components/common/tabButton.svelte

@@ -11,7 +11,7 @@
 <button
 	class="px-6 py-2 rounded-md text-sm font-medium transition-colors {active
 		? 'bg-primary text-white shadow-sm'
-		: 'text-muted-foreground hover:text-foreground'}"
+		: 'text-text-muted hover:text-text'}"
 	onclick={onClick}
 >
 	{label}

firmware/website/src/components/configTab/schemaRow.svelte

@@ -15,11 +15,11 @@
 </script>
 
 <tr class="group">
-	<td class="px-3 py-2 text-sm bg-bg-secondary group-hover:bg-accent border-y border-l border-border">{time}</td>
-	<td class="px-2 py-2 text-sm bg-bg-secondary group-hover:bg-accent border-y border-border">
+	<td class="px-3 py-2 text-sm bg-card group-hover:bg-accent border-y border-l border-border">{time}</td>
+	<td class="px-2 py-2 text-sm bg-card group-hover:bg-accent border-y border-border">
 		<div class="h-6 rounded" style="background: rgb({r},{g},{b});"></div>
 	</td>
-	<td class="px-3 py-2 text-sm text-center bg-bg-secondary group-hover:bg-accent border-y border-border">
+	<td class="px-3 py-2 text-sm text-center bg-card group-hover:bg-accent border-y border-border">
 		<input
 			type="number" min="0" max="255"
 			bind:value={r}
@@ -27,7 +27,7 @@
 			class="w-14 px-1 py-0.5 text-sm text-center rounded border border-border bg-input focus:outline-none focus:border-primary no-spinner"
 		/>
 	</td>
-	<td class="px-3 py-2 text-sm text-center bg-bg-secondary group-hover:bg-accent border-y border-border">
+	<td class="px-3 py-2 text-sm text-center bg-card group-hover:bg-accent border-y border-border">
 		<input
 			type="number" min="0" max="255"
 			bind:value={g}
@@ -35,7 +35,7 @@
 			class="w-14 px-1 py-0.5 text-sm text-center rounded border border-border bg-input focus:outline-none focus:border-primary no-spinner"
 		/>
 	</td>
-	<td class="px-3 py-2 text-sm text-center bg-bg-secondary group-hover:bg-accent border-y border-border">
+	<td class="px-3 py-2 text-sm text-center bg-card group-hover:bg-accent border-y border-border">
 		<input
 			type="number" min="0" max="255"
 			bind:value={b}
@@ -43,7 +43,7 @@
 			class="w-14 px-1 py-0.5 text-sm text-center rounded border border-border bg-input focus:outline-none focus:border-primary no-spinner"
 		/>
 	</td>
-	<td class="px-3 py-2 text-sm text-center bg-bg-secondary group-hover:bg-accent border-y border-r border-border">
+	<td class="px-3 py-2 text-sm text-center bg-card group-hover:bg-accent border-y border-r border-border">
 		<input
 			type="number" min="0" max="255"
 			bind:value={brightness}

firmware/website/src/components/configTab/segmentRow.svelte

@@ -10,14 +10,14 @@
 </script>
 
 <tr class="group">
-	<td class="px-3 py-2 text-sm bg-bg-secondary group-hover:bg-accent border-y border-l border-border">
+	<td class="px-3 py-2 text-sm bg-card group-hover:bg-accent border-y border-l border-border">
 		<input
 			type="text"
 			bind:value={name}
 			class="w-full px-1 py-0.5 text-sm rounded border border-border bg-input focus:outline-none focus:border-primary"
 		/>
 	</td>
-	<td class="px-3 py-2 text-sm text-center bg-bg-secondary group-hover:bg-accent border-y border-border">
+	<td class="px-3 py-2 text-sm text-center bg-card group-hover:bg-accent border-y border-border">
 		<input
 			type="number"
 			min="0"
@@ -25,7 +25,7 @@
 			class="w-16 px-1 py-0.5 text-sm text-right rounded border border-border bg-input focus:outline-none focus:border-primary no-spinner"
 		/>
 	</td>
-	<td class="px-3 py-2 text-sm text-center bg-bg-secondary group-hover:bg-accent border-y border-border">
+	<td class="px-3 py-2 text-sm text-center bg-card group-hover:bg-accent border-y border-border">
 		<input
 			type="number"
 			min="1"
@@ -33,7 +33,7 @@
 			class="w-16 px-1 py-0.5 text-sm text-right rounded border border-border bg-input focus:outline-none focus:border-primary no-spinner"
 		/>
 	</td>
-	<td class="px-1 py-2 text-sm text-center bg-bg-secondary group-hover:bg-accent border-y border-r border-border">
+	<td class="px-1 py-2 text-sm text-center bg-card group-hover:bg-accent border-y border-r border-border">
 		<button
 			onclick={onDelete}
 			aria-label="delete"

firmware/website/src/components/controlTab/modeButton.svelte

@@ -9,8 +9,8 @@
 
 <button
 	class="flex-1 flex flex-col items-center justify-center p-4 rounded-md border transition-all {active
-		? 'bg-primary text-primary-foreground border-primary shadow-md'
-		: 'bg-background text-foreground border-border hover:bg-accent hover:text-accent-foreground'}"
+		? 'bg-primary text-white border-primary shadow-md'
+		: 'bg-card text-text border-border hover:bg-accent hover:text-text'}"
 	onclick={onClick}
 >
 	<span class="text-2xl mb-1">{icon}</span>

firmware/website/src/components/controlTab/modeControl.svelte

@@ -38,7 +38,7 @@
 	</div>
 
 	{#if mode === 'simulation'}
-		<div class="p-4 bg-background rounded-md border border-border">
+		<div class="p-4 bg-card rounded-md border border-border">
 			<label for="active-schema" class="block text-sm font-medium mb-2">{$t("control.schema.active")}</label>
 
 			<DropDown

firmware/website/src/components/controlTab/statusDisplay.svelte

@@ -21,8 +21,8 @@
 
 <Card title="control.status.title">
 	<div class="flex flex-col sm:flex-row gap-4">
-		<div class="flex-1 p-3 bg-background rounded-md border border-border">
-			<div class="text-xs text-muted-foreground mb-1">
+		<div class="flex-1 p-3 bg-card rounded-md border border-border">
+			<div class="text-xs text-text-muted mb-1">
 				{$t("control.status.mode")}
 			</div>
 			<div class="font-medium flex items-center gap-2">
@@ -32,8 +32,8 @@
 			</div>
 		</div>
 
-		<div class="flex-1 p-3 bg-background rounded-md border border-border">
-			<div class="text-xs text-muted-foreground mb-1">
+		<div class="flex-1 p-3 bg-card rounded-md border border-border">
+			<div class="text-xs text-text-muted mb-1">
 				{$t("control.status.color")}
 			</div>
 			<div class="h-6 w-full rounded" style="background: {color};"></div>
@@ -41,9 +41,9 @@
 
 		{#if mode === "simulation"}
 			<div
-				class="flex-1 p-3 bg-background rounded-md border border-border"
+				class="flex-1 p-3 bg-card rounded-md border border-border"
 			>
-				<div class="text-xs text-muted-foreground mb-1">
+				<div class="text-xs text-text-muted mb-1">
 					{$t("control.status.clock")}
 				</div>
 				<div class="font-medium">

firmware/website/src/components/systemTab/threadProvisioning.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { t } from '../../i18n/store';
+	import { threadStore } from '../../stores/threadStore';
+	import Card from '../common/card.svelte';
+	import Button from '../common/button.svelte';
+
+	function handlePermitJoin() {
+		threadStore.startPermitJoin(60); // 60 seconds
+	}
+</script>
+
+<Card title="thread.title">
+	<p class="text-sm text-text-muted mb-4">
+		{$t('thread.desc')}
+	</p>
+
+	<!-- Network Info Section -->
+	{#if $threadStore.networkInfo}
+		<div class="mb-4 p-4 bg-card rounded-lg border border-border flex flex-col gap-2">
+			<div class="flex justify-between items-center">
+				<span class="text-sm font-semibold">Status:</span>
+				<span class="text-sm text-success">
+					{$t(`thread.status.${$threadStore.networkInfo.status}`)}
+				</span>
+			</div>
+			<div class="flex justify-between items-center">
+				<span class="text-sm font-semibold">{$t('thread.network')}</span>
+				<span class="text-sm font-mono">{$threadStore.networkInfo.networkName}</span>
+			</div>
+			<div class="flex justify-between items-center">
+				<span class="text-sm font-semibold">{$t('thread.panId')}</span>
+				<span class="text-sm font-mono">{$threadStore.networkInfo.panId}</span>
+			</div>
+			<div class="flex justify-between items-center">
+				<span class="text-sm font-semibold">{$t('thread.channel')}</span>
+				<span class="text-sm font-mono">{$threadStore.networkInfo.channel}</span>
+			</div>
+		</div>
+
+		<!-- Commissioning Section -->
+		<div class="mt-6 flex flex-col gap-4">
+			<Button 
+				label={$threadStore.isPermitJoinActive 
+					? $t('thread.permitJoinActive').replace('{time}', $threadStore.permitJoinTimeLeft.toString())
+					: $t('thread.permitJoin')} 
+				ariaLabel="Start Pairing" 
+				onClick={handlePermitJoin}
+			/>
+
+			{#if $threadStore.isPermitJoinActive || $threadStore.joinedDevicesCount > 0}
+				<div class="p-3 bg-success/10 border border-success/30 rounded-lg flex items-center justify-center gap-2">
+					{#if $threadStore.isPermitJoinActive}
+						<span class="inline-block w-4 h-4 rounded-full border-2 border-success border-t-transparent animate-spin"></span>
+					{/if}
+					<span class="text-sm font-medium text-success">
+						{$t('thread.joinedCount').replace('{count}', $threadStore.joinedDevicesCount.toString())}
+					</span>
+				</div>
+			{/if}
+		</div>
+	{:else}
+		<div class="p-4 bg-card rounded-lg border border-border text-center text-sm text-text-muted italic">
+			{$t('thread.noNetwork')}
+		</div>
+	{/if}
+</Card>

firmware/website/tailwind.config.js

@@ -1,25 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./src/**/*.{html,js,svelte,ts}'],
-  darkMode: 'media',
-  theme: {
-    extend: {
-      colors: {
-        bg: 'var(--bg-color)',
-        card: 'var(--card-bg)',
-        accent: 'var(--accent)',
-        text: 'var(--text)',
-        'text-muted': 'var(--text-muted)',
-        success: 'var(--success)',
-        error: 'var(--error)',
-        border: 'var(--border)',
-        input: 'var(--input-bg)',
-        primary: 'var(--primary)',
-      },
-      boxShadow: {
-        custom: 'var(--shadow)',
-      }
-    },
-  },
-  plugins: [],
-}

firmware/website/vite.config.js

@@ -1,6 +1,7 @@
 /// <reference types="vitest/config" />
 import { defineConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
+import tailwindcss from '@tailwindcss/vite';
 import viteCompression from 'vite-plugin-compression';
 import { execSync } from 'child_process';
 import fs from 'fs';
@@ -20,6 +21,7 @@ export default defineConfig({
     }
   },
   plugins: [
+    tailwindcss(),
     svelte({
       configFile: 'svelte.config.js'
     }),