/* Farangur — paleta a rozmerové tokeny, NÁVRH v2 („pastelové plochy, syté atramenty"). Náhrada za public/assets/theme.css. Rovnaké mená tokenov, rovnaké tri režimy, rovnaký mechanizmus (data-theme, data-sun, zdvojený atribút kvôli špecificite). JEDINÉ miesto, kde je farba napísaná ako hex. ČO SA ZMENILO A PREČO Sťažnosť znela „tmavé, nech je to veselšie". Merania hovoria, kde tá tmavosť naozaj je — a kde nie je: 1. Plochy nemali farbu. Stará --bg mala v OKLCh sýtosť 0.010, --surface2 0.018. To je šedá s náznakom. Nové majú 0.013 a 0.020 pri väčšej teplote a hlavne podfarbenia --*-soft skočili z ~0.015 na 0.044-0.062, čo je 3-4x. Tam sa pastel dá bývať, lebo podfarbenie nemusí nič nosiť ako text. 2. Atramenty sa zosvetliť NEDAJÚ. Kto chce 4.5:1 na kréme, má strop jasu Y <= 0.143; pri tom jase je stará --amber #8a5300 presne na hrane sRGB gamutu pre svoj odtieň — sýtejšia hnedooranžová pri tomto jase neexistuje. Zisk sa teda dal vziať len POSUNOM ODTIEŇA do miest, kde je gamut širší: --green 154° -> 146° sýtosť 0.101 -> 0.131 (les -> tráva) --red 30° -> 18° sýtosť 0.169 -> 0.186 (tehla -> karmín) --amber 67° -> 52° sýtosť 0.109 -> 0.116 (oliva -> pálená sinter) --accent 213° -> 202° sýtosť 0.083 -> 0.074 (petrolej -> lagúna) Tyrkys je pri tomto jase gamutovo najchudobnejší odtieň z celej štvorice. Sýtejší tmavý tyrkys v sRGB nie je. Viac v brand/deck (slide „Čo nevyšlo"). 3. V tme je to naopak. Tam atrament LEŽÍ na svetlej strane, takže pastel patrí doňho: mentol, marhuľa, ruža, obloha pri sýtosti 0.095. Plochy zostávajú tmavé a teplé. Pravidlo znie: vo svetle nesú pastel PLOCHY, v tme ATRAMENTY. Kontrasty sú POČÍTANÉ, nie odhadnuté — 135 dvojíc, všetky prechádzajú (4.5:1 text, 3:1 UI prvky), v slnečnom režime navyše AAA (7:1 text, 4.5:1 UI). Namerané hodnoty sú pri každom tokene. Keď zmeníš hex, PREPOČÍTAJ: python3 brand/deck/contrast.py brand/next/theme-next.css Nestačí, že to „vyzerá dobre". */ :root { color-scheme: light; /* --- plochy ------------------------------------------------------------- */ /* Teplý marhuľový papier, nie béžová. Biela karta na ňom drží vrstvenie. */ --bg: #fff5ef; /* stránka */ --surface: #ffffff; /* karta, riadok, sheet */ --surface2: #f5e7dd; /* stlačený stav, vnorená plocha */ /* --- text --------------------------------------------------------------- */ --text: #2d231e; /* 15.32:1 surface · 14.27:1 bg · 12.66:1 surface2 */ --muted: #6e5e56; /* 6.18:1 surface · 5.76:1 bg · 5.11:1 surface2 */ /* --- čiary -------------------------------------------------------------- */ /* --line je OBRYS OVLÁDACIEHO PRVKU (input, chip, tlačidlo) a drží 3:1 proti všetkým trom plochám. Na dekoratívnu vlasovú čiaru medzi riadkami použi --line-soft: riadok je identifikovateľný svojím obsahom, takže tam 3:1 povinné nie je. */ --line: #8e7c73; /* 3.98:1 surface · 3.70:1 bg · 3.29:1 surface2 */ --line-soft: #ebd6c8; /* dekoratívna, bez kontrastnej povinnosti */ /* --- štyri sémantické farby, ŠTYRI, nie päť ------------------------------ */ /* Kontrast je symetrický, takže tá istá hodnota slúži aj ako text na ploche, aj ako výplň pod --on-accent. Overené v oboch smeroch. */ --accent: #1a6a70; /* potvrdené / „beriem" 6.29:1 surface · 5.86:1 bg · 5.20:1 surface2 */ --amber: #954d17; /* nachystané 6.27:1 surface · 5.84:1 bg · 5.18:1 surface2 */ --green: #1a6f2a; /* zbalené 6.27:1 surface · 5.84:1 bg · 5.18:1 surface2 */ --red: #ba213d; /* chýba 6.23:1 surface · 5.80:1 bg · 5.15:1 surface2 */ /* popredie na AKEJKOĽVEK sémantickej výplni (accent/amber/green/red) */ --on-accent: #ffffff; /* najhoršia zo štyroch: 6.23:1 (red) */ /* Pastelové podfarbenie riadku/odznaku/karty. Toto je nosič veselosti — tu je farba, nie v atramente. Sýtosť 0.044-0.062 OKLCh, jas Y ~0.755. Zapísané ako hex zámerne, nie color-mix(): inak by hodnoty počítal prehliadač a moje merania by boli len model toho, čo naozaj vykreslí. */ --accent-soft: #afecf1; /* accent naň 4.82:1 · text 11.74:1 · muted 4.73:1 */ --amber-soft: #ffdac5; /* amber naň 4.80:1 · text 11.74:1 · muted 4.73:1 */ --green-soft: #c6ebc7; /* green naň 4.81:1 · text 11.75:1 · muted 4.74:1 */ --red-soft: #ffd8d8; /* red naň 4.76:1 · text 11.72:1 · muted 4.73:1 */ /* --- focus -------------------------------------------------------------- */ /* Dvojfarebný prstenec. Jednofarebný na farebnom tlačidle ZANIKNE — accent prstenec okolo accent výplne má kontrast 1:1. Vnútorný --focus-halo oddelí vonkajší prstenec od výplne, takže každá noha rieši len to, čoho sa dotýka: halo vs výplň >= 6.23:1 (najhoršia: red) focus vs plocha >= 12.66:1 (najhoršia: surface2) ux-spec.md §10 žiada 3:1 proti OBOM susedným farbám — toto to spĺňa. Používaj ako `box-shadow: var(--focus-ring)`, nie vlastný outline. */ --focus: #2d231e; --focus-halo: #ffffff; --focus-ring: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus); /* --- rozmery ------------------------------------------------------------ */ /* Polomery o 2 px väčšie než v1. Väčší polomer pri rovnakej výške riadku je jediná zmena tvaru, ktorá sa v tejto vetve robí — mäkšie a súčasnejšie, a nič neposúva ani neorezáva. */ --radius: 20px; --radius-sm: 14px; --tap: 44px; /* absolútne minimum dotykového cieľa (WCAG 2.5.8) */ --row-min: 60px; /* riadok balenia — MIN-height, nikdy fixná výška: pri 200 % zväčšení textu musí riadok rásť, nie orezať */ /* --- písmo -------------------------------------------------------------- */ /* Systémový stack zostáva. Webfont by znamenal buď CDN (zakázané), alebo ~40 kB navyše v shelli PWA, ktorý sa načítava aj na zlom signáli. Veselosť nesie farba a polomer, nie písmo. */ --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; /* --- pohyb -------------------------------------------------------------- */ /* Jedno miesto pre celú appku. prefers-reduced-motion to nastaví na 0s nižšie, takže nikto iný to nemusí riešiť vo svojom súbore. */ --dur: 160ms; --ease: cubic-bezier(.2, 0, 0, 1); /* --- tieň --------------------------------------------------------------- */ /* Teplejší a redší než v1: na marhuľovom papieri je šedý tieň špinavý. */ --shadow: 0 1px 2px rgba(45, 35, 30, .06), 0 10px 28px rgba(45, 35, 30, .09); /* --- bezpečná zóna ------------------------------------------------------ */ /* V nainštalovanej PWA na iPhone (viewport-fit=cover) ide obsah POD notch aj pod domovský indikátor. Bez týchto insetov sa hlavička lepí na hodiny a spodné akcie na indikátor — overené na ozora (report z iPhonu 14). */ --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); } /* ===== TMAVÝ REŽIM ======================================================== Dva bloky zámerne: jeden pre systémovú voľbu, druhý pre ručnú. `:not([data-theme=light])` je to, čo dáva RUČNEJ voľbe prednosť v OBOCH smeroch — kto má systém v tme a vyberie si „svetlý", dostane svetlý; kto má systém vo svetle a vyberie „tmavý", dostane tmavý. Hex hodnoty sú napísané RAZ, ako --dk-* tokeny, a oba bloky ich len mapujú. Duplikovať dvadsať hexov na dve miesta je tichá chyba čakajúca na to, kým niekto zmení jeden blok a druhý nie — a prejaví sa len ľuďom, čo majú systém v tme a NEvybrali si tému ručne. Tu je pastel v ATRAMENTE: mentol, marhuľa, ruža, obloha pri sýtosti 0.095 OKLCh a jase Y ~0.47. Plochy zostávajú teplá čerň. */ :root { --dk-bg: #231c19; /* teplá čerň, nie modrošedá */ --dk-surface: #2d2522; --dk-surface2: #3b312d; --dk-text: #eee6e0; /* 12.17:1 surface · 13.61:1 bg · 10.24:1 surface2 */ --dk-muted: #b4a59c; /* 6.29:1 surface · 7.03:1 bg · 5.29:1 surface2 */ --dk-line: #8b7c74; /* 3.74:1 surface · 4.18:1 bg · 3.15:1 surface2 */ --dk-line-soft: #4e403c; --dk-accent: #60c5cd; /* 7.41:1 surface · 8.28:1 bg · 6.23:1 surface2 */ --dk-amber: #eaa880; /* 7.44:1 surface · 8.32:1 bg · 6.26:1 surface2 */ --dk-green: #8cc48f; /* 7.44:1 surface · 8.32:1 bg · 6.26:1 surface2 */ --dk-red: #f1a1a3; /* 7.41:1 surface · 8.28:1 bg · 6.23:1 surface2 */ --dk-on-accent: #231c19; /* najhoršia zo štyroch výplní: 8.28:1 (accent) */ /* Podfarbenia sú v tme tmavšie než v1 (Y 0.042 proti 0.032), lebo --dk-muted je zámerne svetlejší — to je jediné, čo im dovolí mať sýtosť 0.050 a stále uniesť druhotný text. Namerané, nie odhadnuté. */ --dk-accent-soft: #114044; /* accent naň 5.63:1 · text 9.25:1 · muted 4.78:1 */ --dk-amber-soft: #503322; /* amber naň 5.67:1 · text 9.27:1 · muted 4.79:1 */ --dk-green-soft: #274029; /* green naň 5.62:1 · text 9.20:1 · muted 4.75:1 */ --dk-red-soft: #533031; /* red naň 5.65:1 · text 9.28:1 · muted 4.80:1 */ --dk-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px rgba(0, 0, 0, .55); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: var(--dk-bg); --surface: var(--dk-surface); --surface2: var(--dk-surface2); --text: var(--dk-text); --muted: var(--dk-muted); --line: var(--dk-line); --line-soft: var(--dk-line-soft); --accent: var(--dk-accent); --amber: var(--dk-amber); --green: var(--dk-green); --red: var(--dk-red); --on-accent: var(--dk-on-accent); --accent-soft: var(--dk-accent-soft); --amber-soft: var(--dk-amber-soft); --green-soft: var(--dk-green-soft); --red-soft: var(--dk-red-soft); --focus: var(--dk-text); --focus-halo: var(--dk-bg); --shadow: var(--dk-shadow); } } :root[data-theme="dark"] { color-scheme: dark; --bg: var(--dk-bg); --surface: var(--dk-surface); --surface2: var(--dk-surface2); --text: var(--dk-text); --muted: var(--dk-muted); --line: var(--dk-line); --line-soft: var(--dk-line-soft); --accent: var(--dk-accent); --amber: var(--dk-amber); --green: var(--dk-green); --red: var(--dk-red); --on-accent: var(--dk-on-accent); --accent-soft: var(--dk-accent-soft); --amber-soft: var(--dk-amber-soft); --green-soft: var(--dk-green-soft); --red-soft: var(--dk-red-soft); --focus: var(--dk-text); --focus-halo: var(--dk-bg); --shadow: var(--dk-shadow); } /* ===== „NA SLNKU" ========================================================= Nie štvrtá poloha prepínača — samostatný režim, ktorý prebije svetlý aj tmavý. Je to na čítanie zoznamu na priamom slnku pri aute, kde je tmavá téma nečitateľná bez ohľadu na to, čo si človek inak vybral. Preto tlačí kontrast až na AAA: telo 21:1, najslabšia sémantická farba 9.24:1 (green) pri požiadavke 7:1. Aj sem sa dal dostať pastel — do PODFARBENÍ. Staré mali sýtosť ~0.011, čiže šedú; nové 0.034-0.050 pri jase Y 0.80, čo AAA neohrozuje (najhoršie 7.47:1). Slnečný režim tak už nie je čiernobiely, len prísny. Zdvojený atribút je ZÁMER, nie preklep: `:root[data-sun][data-sun]` má špecificitu (0,3,0) proti (0,2,0) u `:root[data-theme=dark]`. Bez neho by o víťazovi rozhodovalo poradie v súbore a stačilo by bloky preusporiadať, aby sa slnečný režim potichu prestal uplatňovať ľuďom s tmavou témou. */ :root[data-sun][data-sun] { color-scheme: light; --bg: #ffffff; --surface: #ffffff; --surface2: #ece4de; --text: #000000; /* 21.00:1 — AAA */ --muted: #4f443d; /* 9.43:1 surface · 7.51:1 surface2 — AAA */ --line: #70625a; /* 5.86:1 surface · 4.67:1 surface2 */ --line-soft: #bcafa5; --accent: #0e4f53; /* 9.28:1 surface · 7.39:1 surface2 — AAA */ --amber: #71370c; /* 9.32:1 surface · 7.42:1 surface2 — AAA */ --green: #0e531c; /* 9.24:1 surface · 7.36:1 surface2 — AAA */ --red: #8d132b; /* 9.29:1 surface · 7.40:1 surface2 — AAA */ --on-accent: #ffffff; /* najhoršia výplň: 9.24:1 (green) */ --accent-soft: #bff0f4; /* accent naň 7.51:1 · text 16.99:1 · muted 7.63:1 */ --amber-soft: #ffe2d1; /* amber naň 7.57:1 · text 17.05:1 · muted 7.66:1 */ --green-soft: #d1efd2; /* green naň 7.47:1 · text 16.99:1 · muted 7.63:1 */ --red-soft: #ffe0e0; /* red naň 7.52:1 · text 16.99:1 · muted 7.63:1 */ --focus: #000000; --focus-halo: #ffffff; /* Na slnku je tieň neviditeľný a len rozmazáva hranu — plochy oddeľuje čiara. */ --shadow: 0 0 0 1px #70625a; } /* Vypnúť pohyb na jednom mieste za celú appku (ux-spec.md §10): nič sa neskrýva ani neodkrýva animáciou, takže nulová dĺžka nemá čo pokaziť. Riadky proste zmiznú. */ @media (prefers-reduced-motion: reduce) { :root { --dur: 0s; } }