tailwind 4 upgrade + update js deps

beszel/site/src/components/charts/area-chart.tsx

@@ -70,7 +70,7 @@ export default function AreaChartDefault({
 							}
 						/>
 						{dataPoints?.map((dataPoint, i) => {
-							const color = `hsl(var(--chart-${dataPoint.color}))`
+							const color = `var(--chart-${dataPoint.color})`
 							return (
 								<Area
 									key={i}

beszel/site/src/components/charts/disk-chart.tsx

@@ -69,9 +69,9 @@ export default memo(function DiskChart({
 						dataKey={dataKey}
 						name={t`Disk Usage`}
 						type="monotoneX"
-						fill="hsl(var(--chart-4))"
+						fill="var(--chart-4)"
 						fillOpacity={0.4}
-						stroke="hsl(var(--chart-4))"
+						stroke="var(--chart-4)"
 						// animationDuration={1200}
 						isAnimationActive={false}
 					/>

beszel/site/src/components/charts/mem-chart.tsx

@@ -68,9 +68,9 @@ export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
 						order={3}
 						dataKey="stats.mu"
 						type="monotoneX"
-						fill="hsl(var(--chart-2))"
+						fill="var(--chart-2)"
 						fillOpacity={0.4}
-						stroke="hsl(var(--chart-2))"
+						stroke="var(--chart-2)"
 						stackId="1"
 						isAnimationActive={false}
 					/>

beszel/site/src/components/charts/swap-chart.tsx

@@ -58,9 +58,9 @@ export default memo(function SwapChart({ chartData }: { chartData: ChartData })
 						dataKey="stats.su"
 						name={t`Used`}
 						type="monotoneX"
-						fill="hsl(var(--chart-2))"
+						fill="var(--chart-2)"
 						fillOpacity={0.4}
-						stroke="hsl(var(--chart-2))"
+						stroke="var(--chart-2)"
 						isAnimationActive={false}
 					/>
 				</AreaChart>