Files
teletypegames/apps/frontend/tailwind.config.cjs
T
mr.zeroandClaude Opus 5 92b4ae22b7 Két tengelyen kap vissza életet a felület: piktogram és szín
A facelift után a site helyenként túl csendes lett. Élet kerül vissza, de
nem dekorációként: két szabály mentén, amiket egymástól függetlenül lehet
olvasni.

A piktogram identitást jelöl — miféle dolog ez. Minden motor és platform
saját glifát kap (TIC-80, Ebitengine, LÖVE, Godot, Bevy, Phaser, C64), és
ugyanazt a jelet viszi a katalógusban, a részletlapon és a build-mátrix
motor-oszlopában, egyetlen PlatformIcon komponensből. A Contact IRC- és
BBS-csatornája is jelet kapott, mert a másik három brandnek eddig is volt,
és a hiány látszott.

A szín állapotot jelöl — mi van vele. A négy státuszból három kap hangot:
a megjelent az akcens zöldet, a demó egy kéket (új --c-info token, 6,7:1
fehéren és 7,8:1 feketén), a fejlesztés alatti a borostyánt. Az archivált
marad semleges, mert az a "már nem történik vele semmi" állapot.

A navigáció, a gombok és a szekciócímek továbbra sem kapnak ikont: ott a
szöveg megmondja, mi az.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-20 16:02:47 +02:00

60 lines
1.5 KiB
JavaScript

const token = (name) => `rgb(var(${name}) / <alpha-value>)`
module.exports = {
content: [
"./src/**/*.{astro,html,js,ts,jsx,tsx,vue,svelte}"
],
darkMode: ['selector', '[data-theme="dark"]'],
theme: {
extend: {
colors: {
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'),
info: token('--c-info'),
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',
},
},
borderRadius: {
card: '8px',
control: '6px',
},
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: [],
}