mr.zeroandClaude Opus 5
e431e2b85b
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>
63 lines
2.0 KiB
JavaScript
63 lines
2.0 KiB
JavaScript
// 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',
|
|
200: '#bbf7d0',
|
|
300: '#86efac',
|
|
400: '#4ade80',
|
|
500: '#22c55e',
|
|
600: '#16a34a',
|
|
700: '#15803d',
|
|
800: '#166534',
|
|
900: '#14532d',
|
|
},
|
|
retro: {
|
|
green: '#33ff33',
|
|
dark: '#0a0a0a',
|
|
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: [],
|
|
}
|