/* * Дизайн-токени. Джерело істини — палітра `app_mock/index.html` (рядки 9-370, * теми black-glossy/light-glossy) + `SUB_L4_PAGE_ARCHITECTURE.md` §7. * НЕ правити макет — лише переносити значення сюди. * * F6 (каркас) свідомо реалізує 2 теми (dark за замовчуванням, light), а не * повний набір 6 тем з SUB_S7_FRONTEND.md §1.4 (black-matte/light-matte/ * dark-flat/light-flat) — це задача S7-02/S7-08. Структура токенів навмисно * сумісна: наступний прохід лише додає нові блоки `:root[data-theme="..."]` * нижче, нічого тут не ламаючи. */ :root { /* -- база (dark, за замовчуванням — black-glossy з макета) -- */ --page: #000000; --glass: rgba(255, 255, 255, .055); --edge: rgba(255, 255, 255, .12); --edge-hi: rgba(255, 255, 255, .22); --hairline: rgba(255, 255, 255, .08); --tile: rgba(255, 255, 255, .05); --tile-edge: rgba(255, 255, 255, .07); --sunken: rgba(0, 0, 0, .30); --chip-bg: rgba(255, 255, 255, .06); --chip-on-bg: rgba(255, 255, 255, .92); --chip-on-fg: #000000; --nav-bg: rgba(255, 255, 255, .07); --blur: 28px; --sat: 190%; --gloss: 1; --shadow: 0 12px 30px rgba(0, 0, 0, .45); --nav-shadow: 0 14px 34px rgba(0, 0, 0, .6); /* -- текст (значення APP_PARITY, вже підняті) -- */ --ink: #ffffff; --muted: rgba(235, 240, 255, .68); /* FIX-13a (В1, truth_notes/REVIEW_Q5_ACCEPTANCE_20260920.md): було .46 — * 4.14-4.25:1 на `lb__hint`/`tp__counter-l`/`act__count-l`/ * `notif__state-body`/`keys-wizard__external-notice` (9.5-13.5px), і * 3.89:1 на `tp__risk-badge--na` (найгірший вкладений фон — картка * `.glass` -> рядок `.tile` -> сам бейдж `--tile-edge`, порахований * скриптом compositing rgba, той самий метод, що й q5-сценарій: * getComputedStyle + alpha-компоситинг, не наївне порівняння двох * `color`). .60 дає 5.5:1+ на тому самому найгіршому фоні (WCAG AA * 4.5:1 для дрібного тексту з запасом). */ --faint: rgba(235, 240, 255, .60); /* -- акценти -- */ /* FIX-13a (Б3): було #0A84FF — білий текст на цьому фоні (кнопки * «Почати безкоштовно»/«Далі»/«Перевірити»/«Зберегти набір»/«Копіювати», * `login-fab`) давав 3.65:1, нижче AA 4.5:1 для звичайного тексту. * #0A6BD6 -> 5.14:1 (пораховано WCAG-скриптом, contrast.mjs у * скретчпаді: sRGB-лінеаризація + (L1+.05)/(L2+.05)); як бордер/outline * (не текст) на темному тлі — 3.38-4.09:1 (>= 3:1, поріг для не-тексту); * на світлому тлі як текст — 4.54-5.03:1. * ОДНАК той самий темний відтінок як КОЛІР ТЕКСТУ на темному тлі * (`a{color}` у base.css, `.wal__state-link`, `.section-feed__reason-- * new` та інші дрібні лінки/бейджі) дає лише 3.27-4.09:1 — темніший * синій, вигідний для білого тексту НА собі, програє як текст поверх * майже чорного тла (менша яскравість = менший контраст із чорним). * Ці дві ролі математично несумісні в одному значенні (потрібен * lum <= .183 для фону з білим текстом, і lum >= .25 для тексту на * найтемнішому вживаному тлі — інтервали не перетинаються), тому окремий * `--accent-fg` нижче — той самий синій, що й ФОН кнопки, використовує * лише darker-варіант для фону; текстові/лінкові місця (не фон) * перемкнено на `--accent-fg` (docstring нижче за темами). */ --accent: #0A6BD6; --accent-hi: #3fa0ff; /* Текстова/лінкова роль accent-кольору (не фон кнопки): dark-тема лишає * ОРИГІНАЛЬНИЙ світліший відтінок (#0A84FF), що й до Б3 давав 4.60-5.76:1 * як текст на темному тлі (page/glass/бейдж-тінт rgba(10,132,255,.14)); * light-тема бере ТОЙ САМИЙ темний відтінок, що й --accent (#0A6BD6, * 4.54-5.03:1 як текст на світлому тлі — темний колір потрібен саме там, * дзеркально до dark-теми). */ --accent-fg: #0A84FF; --green: #30D158; --red: #FF453A; --amber: #FFD60A; /* -- радіуси -- */ --r-lg: 26px; --r-md: 18px; --r-sm: 13px; /* -- безпечна зона (веб-фолбек; tg.js перезаписує з Telegram themeParams/insets) -- */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* -- шрифт: лише системні гарнітури, без CDN (PLAN_SOCIAL_V1 A4/A8) -- */ --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; } /* -- light (light-glossy з макета) -- */ :root[data-theme="light"] { --page: #eef1f7; --ink: #0d1220; /* FIX-13a (В1): світлу тему харнес не міряє (тема лишається dark у * e2e), але той самий compositing-скрипт на тих самих класах дає той * самий провал — темний текст на світлих вкладених фонах (page/tile/ * sunken+tile-edge) при старих .62/.42 давав 4.51-4.75:1 і 2.55-2.67:1 * відповідно; .68/.66 дають 5.0:1+ і 4.5:1+ на найгіршому змодельованому * фоні, зберігаючи --muted помітнішим за --faint. */ --muted: rgba(18, 24, 40, .68); --faint: rgba(18, 24, 40, .66); --glass: rgba(255, 255, 255, .55); --edge: rgba(15, 23, 42, .10); --edge-hi: rgba(255, 255, 255, .95); --hairline: rgba(15, 23, 42, .09); --tile: rgba(255, 255, 255, .62); --tile-edge: rgba(15, 23, 42, .07); --sunken: rgba(15, 23, 42, .05); --chip-bg: rgba(255, 255, 255, .62); --chip-on-bg: #101728; --chip-on-fg: #ffffff; --nav-bg: rgba(255, 255, 255, .68); --shadow: 0 12px 30px rgba(15, 23, 42, .12); --nav-shadow: 0 14px 34px rgba(15, 23, 42, .16); /* FIX-13a (Б3) — текстова роль accent на світлому тлі: темний відтінок * (той самий, що --accent) дає 4.54-5.03:1; світліший dark-темний * `--accent-fg` з :root тут провалився б (2.4-3.6:1 — недостатньо * темний для тексту на світлому тлі). */ --accent-fg: #0A6BD6; } /* system-темна за замовчуванням — light лише коли ОС просить світлу і користувач нічого не обирав вручну (theme.js вирішує, який атрибут виставити; цей блок — фолбек до першого виконання JS). */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --page: #eef1f7; --ink: #0d1220; /* FIX-13a (В1) — той самий підйом альфи, що й :root[data-theme="light"] вище. */ --muted: rgba(18, 24, 40, .68); --faint: rgba(18, 24, 40, .66); --glass: rgba(255, 255, 255, .55); --edge: rgba(15, 23, 42, .10); --edge-hi: rgba(255, 255, 255, .95); --hairline: rgba(15, 23, 42, .09); --tile: rgba(255, 255, 255, .62); --tile-edge: rgba(15, 23, 42, .07); --sunken: rgba(15, 23, 42, .05); --chip-bg: rgba(255, 255, 255, .62); --chip-on-bg: #101728; --chip-on-fg: #ffffff; --nav-bg: rgba(255, 255, 255, .68); --accent-fg: #0A6BD6; } }