/* ========================================================================== Pörgesd Fel — Social Media GPS · design tokenek Forrás: docs/specs/design-system.md („Primitívek — a token-fájl gerince”). Ez a fájl KIZÁRÓLAG tokeneket, a globális fókuszgyűrűt és három olyan segédosztályt tartalmaz, ami a kontraszt-szabályt kódban is kikényszeríti. Komponens-stílus ide nem kerül — az a komponens .razor.css-ébe való. ⚠️ A KONTRASZT-SZABÁLY — a projekt legkönnyebben elrontható szabálya ------------------------------------------------------------------ A `--color-primary` (#FF3EAA) fehéren 3.10:1, és rajta a fehér szöveg 3.22:1 — MINDKÉT irányban bukja a WCAG AA 4.5:1-et. Ezért: • #FF3EAA → KIZÁRÓLAG dekoratív kitöltés, ikon, haladás-sáv. Soha nem `color:`, és soha nem hordoz feliratot. • szöveg → --color-primary-text (#B01268) fehéren 6.65:1 • feliratot hordozó pink felület → --color-primary-strong (#C2186F) fehér szöveggel 5.75:1 Ugyanez él a kategória-színekre: a `-solid` soha nem szöveg, a felirat a `-text` tokenből jön. A `test/SocialMediaGps.Web.Tests/DesignTokenTests` mindkét szabályt méri: kiszámolja a kontrasztokat a token-értékekből, és átvizsgálja a projekt összes CSS-ét tiltott pink `color:` deklarációra. ========================================================================== */ :root { /* A sötét mód a V1-ben nincs támogatva. E nélkül a form-kontrollok és a görgetősáv a rendszer-témát követnék a fehér kártyákon. */ color-scheme: light; /* ── Alappaletta ─────────────────────────────────────────────────── */ --color-surface: #FFFFFF; --color-surface-muted: #F5F5F5; --color-text: #111111; --color-text-muted: #666666; /* fehéren 5.74 · muted-on 5.27 */ --color-border: #EAEAEA; /* DEKORATÍV elválasztó — fehéren 1.20 */ --color-border-input: #767676; /* interaktív kontroll határa — fehéren 4.54 */ /* ── Elsődleges szín — három token, három szerep ────────────────── Lásd a fájl fejlécében a szabályt. A hármas felbontás nem stílus- kérdés: a #FF3EAA egyedül nem tud sem szöveg, sem gombfelület lenni. */ --color-primary: #FF3EAA; /* dekoratív kitöltés / ikon / sáv */ --color-primary-strong: #C2186F; /* feliratot hordozó felület, fehér szöveggel */ --color-primary-text: #B01268; /* pink SZÖVEG — azonos a --cat-brand-text-tel */ --color-primary-subtle: #FFEBF5; /* halvány pink háttér (pill, chip, kártya) */ /* Pink szöveg SÖTÉT felületen (bal menü). A #B01268 a #000D20-on 2.90 — bukik; a #FF3EAA viszont 6.05. Ez az EGYETLEN hely, ahol a #FF3EAA feliratot hordozhat, és kizárólag a --color-sidebar hátteren. Fehéren ugyanez 3.10 — ott tilos. */ --color-primary-text-inverse: #FF3EAA; /* ── Állapotszínek ───────────────────────────────────────────────── */ --color-danger: #DC2626; /* kitöltés, fehér szöveggel 4.83 */ --color-danger-text: #B91C1C; /* hibaszöveg — fehéren 6.47 */ /* ── Sötét felület (bal menü) ────────────────────────────────────── ⚠️ A sidebar NEM neutrális fekete, hanem MÉLY NAVY. Nem stíluskérdés: a `docs/input/1 irányítópult/menü.png` háttere pipettázva rgb(0,13,32). A korábbi #111111 mérés nélkül került ide (a CLAUDE.md „fekete #111111" palettájából), és a szem a hideg navy helyén azonnal észreveszi a neutrális feketét. ⚠️ És nem a11y-kompromisszum, hanem JAVULÁS — minden érték nő: fehér szöveg 18.88 → 19.47 · #FF3EAA felirat 5.86 → 6.05 · #9A9A9A muted 6.71 → 6.92. A DesignTokenTests ezeket a tokenekből számolja újra, tehát a tábla nem tud elavulni. */ --color-sidebar: #000D20; --color-text-inverse: #FFFFFF; /* a sidebaron 19.47 */ --color-text-muted-inverse: #9A9A9A; /* a sidebaron 6.92 — a #666666 ott 3.39, BUKIK */ /* ── Kategória-színek — modulonként, három tokennel ─────────────── -solid : ikon, kitöltés, sáv — SOHA nem szöveg -subtle: kártya-, badge-, chip-háttér -text : szöveg a -subtle hátterén ÉS fehéren (≥ 4.5:1 mindkettőn) ⚠️ A -solid tokenekre ≥ 3:1 kell FEHÉREN (WCAG 1.4.11). A --color-surface-muted (#F5F5F5) hátteren a Márka pink (2.95) és a Figyelmeztetés sárga (2.92) BUKIK — ott a jelentést hordozó ikon is a -text tokent használja, a -solid kizárólag dekoratív. */ --cat-brand-solid: var(--color-primary); /* Márka — azonos az elsődlegessel */ --cat-brand-subtle: #FFEBF5; --cat-brand-text: #B01268; --cat-content-solid: #2563EB; /* Tartalom */ --cat-content-subtle: #E8F0FE; --cat-content-text: #1A4FBF; --cat-academy-solid: #7C3AED; /* Akadémia */ --cat-academy-subtle: #F1EAFE; --cat-academy-text: #5B21B6; --cat-community-solid: #EA580C; /* Közösség */ --cat-community-subtle: #FEEDE3; --cat-community-text: #9A3412; --cat-success-solid: #16A34A; /* Eredmény / siker */ --cat-success-subtle: #E7F6EC; --cat-success-text: #166534; --cat-warning-solid: #D97706; /* Figyelmeztetés */ --cat-warning-subtle: #FEF3E2; --cat-warning-text: #92400E; /* ── Tipográfia ────────────────────────────────────────────────── Inter, ÖNHOSZTOLVA — ez zárja le a CSP third-party listáját (font-src 'self'). A woff2 még nincs a repóban; addig a tartalék-lánc visz. @font-face akkor kerül ide, amikor a fájl megérkezik. A méretek rem-ben: px-szel a böngésző-szintű betűméret-beállítás hatástalan lenne (WCAG 1.4.4). Alap: 1rem = 16px. */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* `font:` shorthandként használható: `font: var(--text-h1);` */ --text-display: 700 2rem/2.5rem var(--font-sans); /* 32/40 */ --text-h1: 700 1.625rem/2.125rem var(--font-sans); /* 26/34 */ --text-h2: 600 1.25rem/1.75rem var(--font-sans); /* 20/28 */ --text-h3: 600 1rem/1.5rem var(--font-sans); /* 16/24 */ --text-body: 400 0.9375rem/1.5rem var(--font-sans); /* 15/24 */ --text-sm: 400 0.8125rem/1.25rem var(--font-sans); /* 13/20 */ --text-xs: 500 0.75rem/1rem var(--font-sans); /* 12/16 */ /* ── Térköz — 4 px-es alapegység ─────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Szemantikus térköz-aliasok — mobilon felülíródnak, hogy a komponensek ne ismételjék a töréspontot. */ --space-card: var(--space-5); /* kártyán belüli padding */ --space-grid-gap: var(--space-5); /* kártyák közti rés */ --space-section: var(--space-7); /* szekciók között */ /* ── Forma ───────────────────────────────────────────────────────── */ --radius-card: 16px; --radius-control: 10px; --radius-pill: 999px; /* ⚠️ A Card NEM kap overflow:hidden-t — a 2 px offsetes fókuszgyűrű levágódna. Ahol a levágás kell (thumbnail), a belső elem kapja. */ --shadow-card: 0 1px 2px rgb(17 17 17 / .04), 0 4px 12px rgb(17 17 17 / .06); --shadow-overlay: 0 8px 32px rgb(17 17 17 / .16); /* ── Rétegzés ────────────────────────────────────────────────────── */ --z-drawer: 100; --z-panel: 200; --z-dialog: 300; --z-toast: 400; /* MINDIG a dialógus fölött — különben a „Visszavonás” elérhetetlen */ --overlay-backdrop: rgb(17 17 17 / .48); /* ── Mozgás ──────────────────────────────────────────────────────── */ --duration-fast: 120ms; --duration-base: 200ms; --ease-out: cubic-bezier(.2, .8, .2, 1); /* ── Méretek ─────────────────────────────────────────────────────── */ --size-sidebar: 264px; --size-drawer: 288px; --size-panel: 480px; --size-content-max: 1200px; --size-touch-target: 44px; --size-icon-sm: 16px; --size-icon-md: 20px; --size-icon-lg: 24px; /* ── Fókuszgyűrű ───────────────────────────────────────────────── ⚠️ A rétegsorrend SZABÁLY, nem véletlen: a fehér réteg BELÜL (box-shadow, 0–2px), a sötét KÍVÜL (outline, 2–4px). A sidebaron (#000D20) a sötét réteg kontrasztja 1.03 — kizárólag a belső fehér réteg teszi láthatóvá. Megcserélve a bal menü ~20 linkjén eltűnik. ⚠️ A navy-váltás ezen NEM segít: 1.00 helyett 1.03 ugyanúgy láthatatlan, a szabály tehát változatlanul él. */ --focus-ring-inner: #FFFFFF; --focus-ring-outer: #111111; --focus-ring-width: 2px; --focus-ring-offset: 2px; /* ── Töréspontok ───────────────────────────────────────────────── Dokumentációs és JS-célra. A @media szabály custom property-t nem tud kiértékelni, ezért lentebb a literál értékek szerepelnek. */ --bp-sm: 480px; --bp-md: 768px; /* itt vált a bal menü drawerré */ --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1440px; /* itt vált a Tartalomnaptár 7 oszlopos rácsra (tulajdonosi döntés, 2026-09-26) */ } /* ── Mobil felülírások (< --bp-md) ───────────────────────────────────── */ @media (max-width: 767.98px) { :root { --text-display: 700 1.625rem/2.125rem var(--font-sans); /* 26/34 */ --text-h1: 700 1.375rem/1.875rem var(--font-sans); /* 22/30 */ --space-card: var(--space-4); } } /* ── Csökkentett mozgás ────────────────────────────────────────────── Kikapcsolt animációnál a GlobalBanner és a Toast UGRIK, nem úszik. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; } } /* ========================================================================== Globális alapréteg — csak az, ami komponensenként nem ismételhető ========================================================================== */ /* Kizárólag :focus-visible. :focus-szal minden egérkattintás után ott maradna a gyűrű, és ezt utólag minden komponensben javítani kellene. */ :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-outer); outline-offset: var(--focus-ring-offset); box-shadow: 0 0 0 calc(var(--focus-ring-width) * 2) var(--focus-ring-inner); } /* ========================================================================== A kontraszt-szabály segédosztályai Ez a három osztály a szabály kódba írt formája: aki pinket akar, ezek egyikét választja, és nem tud véletlenül #FF3EAA-t szövegre tenni. ========================================================================== */ /* Pink SZÖVEG fehér vagy halvány pink háttéren. */ .u-primary-text { color: var(--color-primary-text); } /* Pink SZÖVEG sötét (--color-sidebar) felületen — máshol nem használható. */ .u-primary-text-inverse { color: var(--color-primary-text-inverse); } /* Feliratot hordozó pink FELÜLET — a felirat mindig fehér. */ .u-on-primary { background-color: var(--color-primary-strong); color: var(--color-text-inverse); } /* Dekoratív pink kitöltés: sáv, ikon, pötty. Szándékosan NINCS `color` deklarációja — ezen a felületen felirat nem állhat. */ .u-primary-decor { background-color: var(--color-primary); } /* Képernyőolvasónak látható, szemnek nem — aria-live régiókhoz. */ .u-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }