refactor: replace hardcoded hex colors with theme tokens, move data/ to root

- Add --color-green-mid token (#4a7a55) to @theme for dimmer stat values - Replace all text-[#hex]/bg-[#hex] arbitrary values with named tokens: text-green, text-green-light, text-green-sec, text-green-muted, text-green-dark, text-green-mid, text-text, bg-card, bg-bg, border-border - Replace rgba(34,197,94,X) inline styles with bg-green/X opacity modifiers - Convert single-prop style={{ borderColor/background }} to className - Fix SVG stroke="#dff5e8" → stroke="currentColor" - Use CSS variables in globals.css base styles (background-color, color) - Move app/data/wikipedia/ → data/ (project root, not inside Next.js app dir) - Update Dockerfile, seed.ts, scrape-wikipedia.ts paths accordingly - Remove unused app/data/world_cup.csv Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-15 18:08:23 +02:00
parent 187ee2e312
commit b141356247
125 changed files with 279 additions and 322 deletions
@@ -1,8 +1,8 @@
 export function LiveBadge({ label = 'Live' }: { label?: string }) {
  return (
    <div className="flex items-center gap-2">
-      <span className="w-2 h-2 rounded-full bg-[#4ade80] flex-shrink-0 animate-live" />
-      <span className="text-[11px] font-bold text-[#4ade80] tracking-[0.14em] uppercase">{label}</span>
+      <span className="w-2 h-2 rounded-full bg-green-light flex-shrink-0 animate-live" />
+      <span className="text-[11px] font-bold text-green-light tracking-[0.14em] uppercase">{label}</span>
    </div>
  )
 }
@@ -32,19 +32,19 @@ export function MatchCard({ match, compact = false }: { match: Match; compact?:
  if (compact) {
    return (
      <Link href={`/tournaments/${match.year}#match-${match.id}`} className="block">
-        <div className="glass-card rounded-xl p-3.5 hover:border-[rgba(34,197,94,0.22)] transition-colors">
-          <div className="text-[9px] text-[#2a5c35] tracking-[0.1em] uppercase mb-2.5">
+        <div className="glass-card rounded-xl p-3.5 hover:border-green/[22%] transition-colors">
+          <div className="text-[9px] text-green-muted tracking-[0.1em] uppercase mb-2.5">
            {match.round}{match.group ? ` · ${match.group}` : ''} · {match.date ? formatDate(match.date) : ''}
          </div>
          <div className="flex items-center gap-2">
            <div className="flex-1 flex items-center gap-2 overflow-hidden">
              <TeamFlag name={match.team1.name} iso2={match.team1.iso2} size="sm" />
-              <span className={`text-sm font-medium truncate ${winner === 'home' ? 'text-[#dff5e8]' : 'text-[#4a7a55]'}`}>
+              <span className={`text-sm font-medium truncate ${winner === 'home' ? 'text-text' : 'text-green-mid'}`}>
                {match.team1.name}
              </span>
            </div>
            <div className="flex-shrink-0 min-w-[52px] text-center">
-              <div className="font-['Bebas_Neue'] text-xl text-[#22c55e]">
+              <div className="font-['Bebas_Neue'] text-xl text-green">
                {hasScore
                  ? match.scoreP
                    ? `${match.scoreP[0]} – ${match.scoreP[1]}`
@@ -54,23 +54,23 @@ export function MatchCard({ match, compact = false }: { match: Match; compact?:
                  : match.isLive ? <LiveBadge label="•" /> : '–'}
              </div>
              {match.scoreP && (
-                <div className="text-[8px] text-[#2a5c35] leading-none">
+                <div className="text-[8px] text-green-muted leading-none">
                  {ft![0]}–{ft![1]} a.e.t.
                </div>
              )}
              {match.scoreEt && !match.scoreP && (
-                <div className="text-[8px] text-[#2a5c35] leading-none">a.e.t.</div>
+                <div className="text-[8px] text-green-muted leading-none">a.e.t.</div>
              )}
            </div>
            <div className="flex-1 flex items-center justify-end gap-2 overflow-hidden">
-              <span className={`text-sm font-medium truncate ${winner === 'away' ? 'text-[#dff5e8]' : 'text-[#4a7a55]'}`}>
+              <span className={`text-sm font-medium truncate ${winner === 'away' ? 'text-text' : 'text-green-mid'}`}>
                {match.team2.name}
              </span>
              <TeamFlag name={match.team2.name} iso2={match.team2.iso2} size="sm" />
            </div>
          </div>
          {match.scoreEt && !match.scoreP && (
-            <div className="text-[9px] text-[#2a5c35] mt-1 text-center">a.e.t.</div>
+            <div className="text-[9px] text-green-muted mt-1 text-center">a.e.t.</div>
          )}
        </div>
      </Link>
@@ -80,18 +80,18 @@ export function MatchCard({ match, compact = false }: { match: Match; compact?:
  const matchHref = `/tournaments/${match.year}#match-${match.id}`

  return (
-    <div className="glass-card-hero rounded-2xl px-5 py-6 sm:px-9 sm:py-9 hover:border-[rgba(34,197,94,0.45)] transition-colors">
+    <div className="glass-card-hero rounded-2xl px-5 py-6 sm:px-9 sm:py-9 hover:border-green/45 transition-colors">
      {match.isLive && <div className="mb-4"><LiveBadge label="Live Now" /></div>}
      <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3 sm:gap-8">
        <Link href={match.team1.slug ? `/teams/${match.team1.slug}` : matchHref}
-          className={`text-center block transition-colors hover:text-[#22c55e] ${winner === 'home' ? 'text-[#dff5e8]' : 'text-[#6abf7a]'}`}>
+          className={`text-center block transition-colors hover:text-green ${winner === 'home' ? 'text-text' : 'text-green-sec'}`}>
          <TeamFlag name={match.team1.name} iso2={match.team1.iso2} size="xl" className="mb-2" />
          <div className="font-['Bebas_Neue'] text-base sm:text-xl tracking-[0.07em] truncate">
            {match.team1.name}
          </div>
        </Link>
        <Link href={matchHref} className="text-center flex-shrink-0 block">
-          <div className="font-['Bebas_Neue'] text-[48px] sm:text-[76px] text-[#22c55e] leading-none hover:opacity-80 transition-opacity">
+          <div className="font-['Bebas_Neue'] text-[48px] sm:text-[76px] text-green leading-none hover:opacity-80 transition-opacity">
            {hasScore
              ? match.scoreP
                ? `${match.scoreP[0]}–${match.scoreP[1]}`
@@ -101,16 +101,16 @@ export function MatchCard({ match, compact = false }: { match: Match; compact?:
              : '?–?'}
          </div>
          {match.scoreP && (
-            <div className="text-[10px] text-[#2a5c35] mt-0.5">{ft![0]}–{ft![1]} a.e.t.</div>
+            <div className="text-[10px] text-green-muted mt-0.5">{ft![0]}–{ft![1]} a.e.t.</div>
          )}
          {match.scoreEt && !match.scoreP && (
-            <div className="text-[10px] text-[#2a5c35] mt-0.5">{ft![0]}–{ft![1]} (a.e.t.)</div>
+            <div className="text-[10px] text-green-muted mt-0.5">{ft![0]}–{ft![1]} (a.e.t.)</div>
          )}
-          <div className="text-[9px] text-[#2a5c35] tracking-[0.12em] uppercase mt-1.5">{match.round}</div>
-          <div className="text-[10px] text-[#1a3a22] mt-0.5">{match.date ? formatDate(match.date) : ''}</div>
+          <div className="text-[9px] text-green-muted tracking-[0.12em] uppercase mt-1.5">{match.round}</div>
+          <div className="text-[10px] text-green-dark mt-0.5">{match.date ? formatDate(match.date) : ''}</div>
        </Link>
        <Link href={match.team2.slug ? `/teams/${match.team2.slug}` : matchHref}
-          className={`text-center block transition-colors hover:text-[#22c55e] ${winner === 'away' ? 'text-[#dff5e8]' : 'text-[#6abf7a]'}`}>
+          className={`text-center block transition-colors hover:text-green ${winner === 'away' ? 'text-text' : 'text-green-sec'}`}>
          <TeamFlag name={match.team2.name} iso2={match.team2.iso2} size="xl" className="mb-2" />
          <div className="font-['Bebas_Neue'] text-base sm:text-xl tracking-[0.07em] truncate">
            {match.team2.name}
@@ -40,15 +40,15 @@ export function Nav() {
  return (
    <>
      <nav
-        className="fixed top-0 left-0 right-0 z-50 h-[60px]"
-        style={{ background: 'rgba(4,13,8,0.97)', backdropFilter: 'blur(18px)', borderBottom: '1px solid rgba(34,197,94,0.18)' }}
+        className="fixed top-0 left-0 right-0 z-50 h-[60px] border-b border-green/[18%]"
+        style={{ background: 'rgba(4,13,8,0.97)', backdropFilter: 'blur(18px)' }}
      >
      <div className="max-w-[1200px] mx-auto px-7 h-full flex items-center">
        {/* Logo */}
        <Link href="/" className="flex items-center gap-2.5 flex-shrink-0 cursor-pointer select-none">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src="/favicon.svg" style={{ height: '36px', width: 'auto' }} alt="" />
-          <span className="font-['Bebas_Neue'] text-lg tracking-[3px] text-[#22c55e] whitespace-nowrap">WORLD CUP</span>
+          <span className="font-['Bebas_Neue'] text-lg tracking-[3px] text-green whitespace-nowrap">WORLD CUP</span>
        </Link>

        {/* Desktop links */}
@@ -56,7 +56,7 @@ export function Nav() {
          {NAV_LINKS.map(({ href, label }) => (
            <Link key={href} href={href}
              className={`px-3.5 py-1.5 rounded-lg text-[13px] font-medium whitespace-nowrap transition-colors
-                ${isActive(href) ? 'bg-[rgba(34,197,94,0.12)] text-[#22c55e]' : 'text-[#4a7a55] hover:text-[#6abf7a]'}`}>
+                ${isActive(href) ? 'bg-green/[12%] text-green' : 'text-green-mid hover:text-green-sec'}`}>
              {label}
            </Link>
          ))}
@@ -67,10 +67,9 @@ export function Nav() {
          <input
            type="text" value={q} onChange={e => setQ(e.target.value)}
            placeholder="Search…"
-            className="w-44 pl-8 pr-3.5 py-1.5 rounded-[20px] text-[13px] text-[#dff5e8] outline-none"
-            style={{ background: 'rgba(34,197,94,0.06)', border: '1px solid rgba(34,197,94,0.18)' }}
+            className="w-44 pl-8 pr-3.5 py-1.5 rounded-[20px] text-[13px] text-text outline-none bg-green/[6%] border border-green/[18%]"
          />
-          <svg className="absolute left-2.5 top-1/2 -translate-y-1/2 opacity-30 pointer-events-none" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#dff5e8" strokeWidth="2.5">
+          <svg className="absolute left-2.5 top-1/2 -translate-y-1/2 opacity-30 pointer-events-none" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
            <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
          </svg>
        </form>
@@ -78,13 +77,12 @@ export function Nav() {
        {/* Hamburger */}
        <button
          onClick={() => setOpen(o => !o)}
-          className="ml-auto md:hidden flex flex-col justify-center items-center w-9 h-9 gap-[5px] rounded-lg transition-colors"
-          style={{ background: open ? 'rgba(34,197,94,0.1)' : 'transparent' }}
+          className={`ml-auto md:hidden flex flex-col justify-center items-center w-9 h-9 gap-[5px] rounded-lg transition-colors ${open ? 'bg-green/10' : ''}`}
          aria-label="Menu"
        >
-          <span className={`block w-5 h-[2px] bg-[#22c55e] rounded-full transition-all origin-center ${open ? 'rotate-45 translate-y-[7px]' : ''}`} />
-          <span className={`block w-5 h-[2px] bg-[#22c55e] rounded-full transition-all ${open ? 'opacity-0' : ''}`} />
-          <span className={`block w-5 h-[2px] bg-[#22c55e] rounded-full transition-all origin-center ${open ? '-rotate-45 -translate-y-[7px]' : ''}`} />
+          <span className={`block w-5 h-[2px] bg-green rounded-full transition-all origin-center ${open ? 'rotate-45 translate-y-[7px]' : ''}`} />
+          <span className={`block w-5 h-[2px] bg-green rounded-full transition-all ${open ? 'opacity-0' : ''}`} />
+          <span className={`block w-5 h-[2px] bg-green rounded-full transition-all origin-center ${open ? '-rotate-45 -translate-y-[7px]' : ''}`} />
        </button>
      </div>
      </nav>
@@ -100,14 +98,14 @@ export function Nav() {

      {/* Mobile menu panel */}
      <div
-        className={`fixed left-0 right-0 z-40 md:hidden transition-all duration-200 ${open ? 'top-[60px] opacity-100' : 'top-[48px] opacity-0 pointer-events-none'}`}
-        style={{ background: 'rgba(4,13,8,0.98)', borderBottom: '1px solid rgba(34,197,94,0.18)' }}
+        className={`fixed left-0 right-0 z-40 md:hidden transition-all duration-200 border-b border-green/[18%] ${open ? 'top-[60px] opacity-100' : 'top-[48px] opacity-0 pointer-events-none'}`}
+        style={{ background: 'rgba(4,13,8,0.98)' }}
      >
        <div className="px-5 py-4 flex flex-col gap-1">
          {NAV_LINKS.map(({ href, label }) => (
            <Link key={href} href={href}
              className={`px-4 py-3 rounded-xl text-[15px] font-medium transition-colors
-                ${isActive(href) ? 'bg-[rgba(34,197,94,0.12)] text-[#22c55e]' : 'text-[#6abf7a] hover:bg-[rgba(34,197,94,0.06)]'}`}>
+                ${isActive(href) ? 'bg-green/[12%] text-green' : 'text-green-sec hover:bg-green/[6%]'}`}>
              {label}
            </Link>
          ))}
@@ -116,10 +114,9 @@ export function Nav() {
            <input
              type="text" value={q} onChange={e => setQ(e.target.value)}
              placeholder="Search players, teams, tournaments…"
-              className="w-full pl-9 pr-4 py-3 rounded-xl text-[14px] text-[#dff5e8] outline-none"
-              style={{ background: 'rgba(34,197,94,0.06)', border: '1px solid rgba(34,197,94,0.18)' }}
+              className="w-full pl-9 pr-4 py-3 rounded-xl text-[14px] text-text outline-none bg-green/[6%] border border-green/[18%]"
            />
-            <svg className="absolute left-3 top-1/2 -translate-y-1/2 opacity-30 pointer-events-none" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#dff5e8" strokeWidth="2.5">
+            <svg className="absolute left-3 top-1/2 -translate-y-1/2 opacity-30 pointer-events-none" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
              <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
            </svg>
          </form>
@@ -31,7 +31,7 @@ export function TeamFlag({ name, iso2, size = 'md', className = '' }: Props) {
      >
        <span style={{
          fontSize: '0.38em',
-          color: '#6abf7a',
+          color: 'var(--color-green-sec)',
          fontFamily: 'Space Grotesk, sans-serif',
          fontWeight: 700,
          letterSpacing: '0.04em',