/* tokens.css — цветовете и типографията на VJA, на едно място. * * ЗАЩО ЕДИН ФАЙЛ, А НЕ ПО ЕКРАНИ * * В М3 фактурата ще ползва същата печатна машина като офертата. Облик, описан * тук, се наследява без втора работа; облик, разпръснат по екрани, се преписва — * и преписът се разминава. Същата причина, поради която разборът на връзката * живее на едно място, а не във всеки скрипт. * * Затова и `index.html`, и `print.html` четат ТОЗИ файл, а после своя. * * ЦВЕТОВЕТЕ НЕ СА ИЗБРАНИ, А ИЗВАДЕНИ ОТ ЛОГОТО и измерени от файла. Стойностите * не се сменят „на око": всяка има съотношение на контраста до себе си и то е * причината да е където е. * * ТРИ ПРАВИЛА, КОИТО НЕ СА ВКУС * * 1. ЖЪЛТОТО НЕ Е ПРЕДУПРЕДИТЕЛЕН ЦВЯТ — то е марката. Предупреждението е * червено или е с думи. Иначе „внимание" и „VJA" стават един и същи знак. * Оттам и липсата на кехлибарено състояние по-долу: то беше в стария набор * и е махнато нарочно. * 2. ГЛАВНОТО ДЕЙСТВИЕ Е ЖЪЛТО И Е ЕДНО НА ЕКРАН. Станат ли две, и двете * спират да значат нещо. * 3. ВСЯКА РАЗЛИКА СЕ НОСИ ОТ ПОНЕ ДВЕ НЕЩА — цвят плюс форма, тегло или * подредба. Заради черно-белия принтер и заради хора, които не различават * цветове. * * И двете изисквания, които не са естетически: * - всяко съчетание текст/фон е поне 4.5:1; * - печатният изглед остава четим на черно-бял принтер, значи синьото е в * шапката и в линиите, а разликите в документа не се носят само от цвят. */ :root { /* --- Марката, извадена от логото ------------------------------------- */ --navy: #0E3A57; /* 11,8:1 на бяло — става за текст */ --brand: #3AA6D2; /* 2,8:1 на бяло — НЕ става за текст */ --brand-light: #44BDE9; /* само върху тъмно */ --spark: #FCC619; /* главното действие, с тъмносин текст (7,5:1) */ --action: #16709B; /* бутони, връзки, активен раздел (5,5:1) */ --tint: #DCEDF7; /* фон на карти */ --wash: #F2F8FC; /* фон на страницата — това маха „само бяло" */ --hairline: #CFDDE8; --ink: #16212B; --ink-soft: #55636E; --ok-ink: #1E7A4B; --bad-ink: #B3261E; /* --- Какво значат по предназначение ----------------------------------- */ /* ГРАНИЦАТА МЕЖДУ ДВАТА БЛОКА НЕ Е ПОДРЕДБА, А ПРАВИЛО. Горе са стойностите на МАРКАТА — те не се менят от нищо, нито от тъмна тема, нито от печат. Долу е РАЗЧИТАНЕТО им за екрана на приложението: кое е повърхност, кое е текст. Само долният блок има тъмен вариант. Затова печатният изглед може да си направи СВОЕ разчитане от същите стойности, без да дублира нито един цвят и без да зависи от машината на четящия. Виж print.css. */ --bg: var(--wash); --surface: #FFFFFF; --surface-alt: var(--tint); --fg: var(--ink); --muted: var(--ink-soft); --line: var(--hairline); --accent: var(--action); --error: var(--bad-ink); --ok: var(--ok-ink); --bar-bg: var(--navy); --bar-fg: #FFFFFF; --bar-fg-soft: #BBD6E6; /* Повърхността на изскачащ лист. На светло това е просто --surface: бялото се отделя от затъмнената страница с 8,9:1 и нищо повече не трябва. На тъмно се налага СВОЯ стойност, и причината е физика, не вкус — виж блока за тъмната тема по-долу. */ --sheet: var(--surface); /* РЪБЪТ ОТГОРЕ НА ЛИСТА Е ВТОРИЯТ НОСИТЕЛ, а не украса — затова има свой цвят, а не ползва --line. На светло листът се справя сам (8,6:1 срещу най-светлото зад него), значи ръбът е обикновена черта. На тъмно НЕ се справя: над жълтото действие, затъмнено, тонът дава 1,09:1. Виж блока за тъмната тема. */ --sheet-edge: var(--line); /* --- Типография ------------------------------------------------------- */ /* Системен набор, без външен файл: кирилицата излиза безупречно, страницата не чака мрежата и няма нов зависим доставчик. Йерархията идва от размер и тегло, не от втори шрифт. */ --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; --font-num: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", monospace; --text-xs: .8125rem; --text-sm: .875rem; --text: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --weight-normal: 400; --weight-medium: 600; --weight-bold: 700; --radius: 10px; --radius-sm: 6px; } /* Тъмната тема НЕ е част от марката — тя е удобство за човек, чиято машина е тъмна. Затова тук няма нови цветове: същите знаци, положени върху тъмна основа. `--brand-light` най-после е на мястото си (той е „само върху тъмно"), а `--spark` не мърда: марката е една и на двете основи. */ @media (prefers-color-scheme: dark) { :root { --bg: #0B1620; --surface: #132433; --surface-alt: #16303F; --fg: #E8EEF3; --muted: #9FB3C2; --line: #27404F; --accent: var(--brand-light); --error: #F2B8B5; --ok: #6FD3A0; --bar-bg: #09202F; --bar-fg: #FFFFFF; --bar-fg-soft: #9FB3C2; /* ЛИСТЪТ Е ПО-СВЕТЪЛ ОТ ПОВЪРХНОСТТА, И ТОВА НЕ Е УКРАСА. На тъмна тема затъмняването не отделя нищо: страницата е почти черна и не може да стане по-черна. Измерено: страница + затъмнение дава #050a0e, а --surface (#132433) стои на 1,26:1 от него — тоест същият цвят. Отделянето идва от това листът да е ПО-СВЕТЪЛ. Стойността е избрана от измерен компромис, не на око: по-светла отделя по-добре, но яде контраста на второстепенния текст ВЪРХУ нея. #1D3A4C дава 1,70:1 срещу затъмненото и 5,51:1 за второстепенния текст; следващата стъпка нагоре (#234559) вдига първото до 2,00 и сваля второто до 4,69 — по-крехко и от двете страни. Числата са в tests/frontend/contrast.mjs. */ --sheet: #1D3A4C; /* И ТУК РЪБЪТ ВЪРШИ РАБОТА, ЗАЩОТО ТОНЪТ НЕ МОЖЕ. Най-светлото, което остава зад листа, не е карта, а жълтото действие; затъмнено, то е #4B3B07. Срещу него листът дава 1,09:1, а старият ръб (--line, #27404F) — 1,00:1, тоест СЪЩАТА светлота. Носителят, който записът обявяваше за втори, не носеше нищо; проверката го показа още при първото пускане. #7FA8C0 дава 4,29:1 срещу затъмненото жълто и 4,69:1 срещу самия лист — тоест чете се и като светъл ръб на вдигната повърхност. */ --sheet-edge: #7FA8C0; } }