A site megtanul témát váltani, és leszokik az ikonokról

Nyolc akcentszín volt, oldalanként másik hero-gradienssel, tizenegy blur-blobbal és 146 ikonhasználattal — ettől nézett ki réginek. Most egy vizuális nyelv van: semleges zinc-skála, egyetlen akcens (a saját foszforzöldünk), 1px keretek árnyék helyett, és ikon csak ott, ahol nincs mellette szöveg. A választható világos/sötét téma miatt minden szín tokenen keresztül megy. A szerepeket a tokens.css írja le mindkét témára, a Tailwind szemantikus színei (bg-surface, text-fg-muted, border-line, bg-accent) ezekre mutatnak, és a <html data-theme> választ. A sütit az index.html inline scriptje olvassa ki a bundle előtt, különben minden sötét témás betöltés villanna egy világosat. A világos téma zöldje green-700: a green-600 fehéren csak 3,3:1, linkszínnek kevés. A retro mód ebből lett a legtöbbet nyerő: mostantól ő is csak a tokeneket írja felül, és azt szabályozza külön, ami formában más — betűtípus, kettős keret, tui-sáv. 1153 sor és 535 !important helyett 300 sor. Menet közben kiderült, hogy a fejléc- és menüstílusai régóta nem is fogtak: a @apply óta nincsenek a DOM-ban azok a Tailwind-osztályok, amikre épültek. A FontAwesome kikerült (258 KB webfont ~50 glifért), helyette Lucide, meg tíz saját inline márkajel. A csapatképek WebP-ben: 1,6 MB helyett 30 KB darabja. A TuiCSS és a retro.css már csak akkor töltődik be, ha valaki bekapcsolja. A dist 8,2 MB-ról 784 KB-ra, a fő CSS 237 KB-ról 41 KB-ra. Nem a faceliftből: a sanitize.test.ts jsdom alatt fut, és a jsdom függőségfája ESM-only lett — Node 20-on a fájl el sem indult, a tesztjei csendben kimaradtak, az npm run test meg hibakóddal lépett ki. jsdom 26 az utolsó, ami ezen a Node-on megy; a négy teszt így újra fut. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-20 12:24:42 +02:00
parent e040763454
commit e431e2b85b
47 changed files with 2157 additions and 3322 deletions
@@ -1,10 +1,33 @@
+// A szemantikus színek a src/styles/tokens.css változóira mutatnak, hogy a
+// témaváltás (világos / sötét) egyetlen attribútumon múljon, és az
+// alfa-variánsok (bg-accent/15) is működjenek.
+const token = (name) => `rgb(var(${name}) / <alpha-value>)`
+
 module.exports = {
  content: [
    "./src/**/*.{astro,html,js,ts,jsx,tsx,vue,svelte}"
  ],
+  // A témát a <html data-theme="dark"> választja, nem a prefers-color-scheme.
+  darkMode: ['selector', '[data-theme="dark"]'],
  theme: {
    extend: {
      colors: {
+        // Szerepek — ezeket használja a markup.
+        page: token('--c-page'),
+        surface: token('--c-surface'),
+        raised: token('--c-raised'),
+        line: token('--c-line'),
+        'line-strong': token('--c-line-strong'),
+        fg: token('--c-fg'),
+        'fg-muted': token('--c-fg-muted'),
+        'fg-subtle': token('--c-fg-subtle'),
+        accent: token('--c-accent'),
+        'accent-hover': token('--c-accent-hover'),
+        'accent-fg': token('--c-accent-fg'),
+        'accent-quiet': token('--c-accent-quiet'),
+        warn: token('--c-warn'),
+        danger: token('--c-danger'),
+
        primary: {
          50: '#f0fdf4',
          100: '#dcfce7',
@@ -23,6 +46,16 @@ module.exports = {
          amber: '#ffb000',
        },
      },
+      // Egy sugárskála: kártya, vezérlő. A kör (rounded-full) marad a Tailwindé.
+      borderRadius: {
+        card: '8px',
+        control: '6px',
+      },
+      // Árnyék csak lebegő elemre; a kártyát keret határolja, nem árnyék.
+      boxShadow: {
+        pop: '0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.04)',
+        float: '0 8px 24px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.08)',
+      },
    },
  },
  plugins: [],