From 4e66fb549a56aa896c24b914de000d096e19cb91 Mon Sep 17 00:00:00 2001
From: zv <zv@zvcloud.net>
Date: Thu, 4 Jun 2026 20:22:42 +0200
Subject: [PATCH] style: finish frontend token cleanup

---
 app/globals.css                            |  4 ++++
 components/charts/day-forecast-charts.tsx  |  4 ++--
 components/forecast/day-forecast-modal.tsx |  2 +-
 components/weather/weather-hero.tsx        | 14 ++++++++++++--
 lib/weather-utils.ts                       | 11 -----------
 5 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 43b9d93..1351b7b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -88,6 +88,10 @@ select {
   .weather-scrollbar {
     scrollbar-gutter: stable;
   }
+
+  .modal-overlay {
+    background: hsl(var(--foreground) / 0.55);
+  }
 }
 
 @supports (-moz-appearance: none) {
diff --git a/components/charts/day-forecast-charts.tsx b/components/charts/day-forecast-charts.tsx
index 01e8a79..4630369 100644
--- a/components/charts/day-forecast-charts.tsx
+++ b/components/charts/day-forecast-charts.tsx
@@ -27,7 +27,7 @@ export function DayForecastCharts({ hours }: { hours: HourlyForecast[] }) {
     <div className="grid gap-3 lg:grid-cols-2">
       <Card className="p-4 sm:p-5">
         <h3 className="text-sm font-semibold">{t("forecast.temperatureChart")}</h3>
-        <p className="mt-1 text-xs leading-5 text-slate-600 dark:text-slate-300">{t("forecast.temperatureChartDescription")}</p>
+        <p className="mt-1 text-xs leading-5 text-muted">{t("forecast.temperatureChartDescription")}</p>
         <div className="mt-4 h-56 min-w-0">
           <ResponsiveContainer width="100%" height="100%" minWidth={0} minHeight={0} initialDimension={INITIAL_CHART_DIMENSION}>
             <ComposedChart data={rows} margin={{ left: -20, right: 8, top: 8 }}>
@@ -48,7 +48,7 @@ export function DayForecastCharts({ hours }: { hours: HourlyForecast[] }) {
 
       <Card className="p-4 sm:p-5">
         <h3 className="text-sm font-semibold">{t("forecast.rainfallChart")}</h3>
-        <p className="mt-1 text-xs leading-5 text-slate-600 dark:text-slate-300">{t("forecast.rainfallChartDescription")}</p>
+        <p className="mt-1 text-xs leading-5 text-muted">{t("forecast.rainfallChartDescription")}</p>
         <div className="mt-4 h-56 min-w-0">
           <ResponsiveContainer width="100%" height="100%" minWidth={0} minHeight={0} initialDimension={INITIAL_CHART_DIMENSION}>
             <ComposedChart data={rows} margin={{ left: -20, right: -10, top: 8 }}>
diff --git a/components/forecast/day-forecast-modal.tsx b/components/forecast/day-forecast-modal.tsx
index f21e738..604e085 100644
--- a/components/forecast/day-forecast-modal.tsx
+++ b/components/forecast/day-forecast-modal.tsx
@@ -84,7 +84,7 @@ export function DayForecastModal({
     <AnimatePresence>
       {day ? (
         <motion.div
-          className="fixed inset-0 z-[90] flex items-center justify-center bg-slate-950/55 p-0 sm:p-4 lg:p-8"
+          className="modal-overlay fixed inset-0 z-[90] flex items-center justify-center p-0 sm:p-4 lg:p-8"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
diff --git a/components/weather/weather-hero.tsx b/components/weather/weather-hero.tsx
index 017cce5..8b4ee38 100644
--- a/components/weather/weather-hero.tsx
+++ b/components/weather/weather-hero.tsx
@@ -12,14 +12,24 @@ import {
   formatWind,
   getWeatherDescription,
   getWeatherMoodFromData,
-  moodAccentClass,
 } from "@/lib/weather-utils";
-import type { SynopStation } from "@/types/imgw";
+import type { SynopStation, WeatherMood } from "@/types/imgw";
 import type { ImgwCurrentWeather } from "@/types/imgw-current";
 import { WeatherIcon } from "@/components/weather/weather-icon";
 import { WeatherEffects } from "@/components/weather/weather-effects";
 import { useI18n } from "@/lib/i18n";
 
+function moodAccentClass(mood: WeatherMood) {
+  return {
+    warm: "border-accent/25 bg-accent/10 text-accent",
+    cloudy: "border-border/70 bg-surface-muted text-muted",
+    wind: "border-border/70 bg-surface-muted text-muted",
+    cold: "border-border/70 bg-surface-muted text-muted",
+    night: "border-border/70 bg-surface-muted text-muted",
+    mild: "border-accent/25 bg-accent/10 text-accent",
+  }[mood];
+}
+
 export function WeatherHero({ station, currentWeather, currentWeatherLoading = false, locationName, distanceKm }: { station: SynopStation; currentWeather?: ImgwCurrentWeather | null; currentWeatherLoading?: boolean; locationName?: string; distanceKm?: number }) {
   const { language, t } = useI18n();
   const displayedLocationName = locationName ?? station.name;
diff --git a/lib/weather-utils.ts b/lib/weather-utils.ts
index 01bfaf0..6306105 100644
--- a/lib/weather-utils.ts
+++ b/lib/weather-utils.ts
@@ -183,14 +183,3 @@ export function getWeatherDescription(station: SynopStation, language: Language
   if ((station.humidity ?? 0) >= 90) return translate(language, "weather.humid");
   return translate(language, "weather.calm");
 }
-
-export function moodAccentClass(mood: WeatherMood) {
-  return {
-    warm: "border-accent/25 bg-accent/10 text-accent",
-    cloudy: "border-border/70 bg-surface-muted text-muted",
-    wind: "border-border/70 bg-surface-muted text-muted",
-    cold: "border-border/70 bg-surface-muted text-muted",
-    night: "border-border/70 bg-surface-muted text-muted",
-    mild: "border-accent/25 bg-accent/10 text-accent",
-  }[mood];
-}