/* ═══════════════════════════════════════════════════════════════════ Палитра klnv.ru — один список цветов на весь проект. Здесь и только здесь лежат сами значения цветов. Админка, презентация клиента и план работ берут их отсюда: в своих файлах они объявляют привычные им имена и присваивают им токен из этого списка, а хекс-кодов у себя не держат. Так сделано потому, что раньше каждый интерфейс красился сам. Зелёный был трёх оттенков, серый — пяти, тёмная тема админки уходила в синий графит, а тёмная тема документа была нейтрально-чёрной, и переход из админки в презентацию читался как переход на чужой сайт. Значения не выдуманы: это палитра сайта из style.css (--bg-color-light, --bg-color-dark, --color-default, --color-border-light и текстовые), просто разложенная по ролям. ── Правило ──────────────────────────────────────────────────────── Новый цвет не заводят в файле интерфейса. Если нужного оттенка здесь нет — его добавляют сюда, с ролью в названии, и он сразу доступен всем. Хекс-код или rgba() вне этого файла допустимы только там, где цвет не красит интерфейс: маски, градиентные затухания, подложки под тень. ──────────────────────────────────────────────────────────────────── Тёмную тему включают на : класс .pr-dark (документы и весь сайт) или атрибут data-theme="dark" (админка). Разные имена остались от разных переключателей, значения у них общие. ═══════════════════════════════════════════════════════════════════ */ :root { /* ── Зелёный ──────────────────────────────────────────────────── Один на весь проект: #30926f. Дальше не оттенки «посветлее», а роли — заливка, текст, плашка под текстом. */ --k-accent: #30926f; /* заливка кнопки, линия, точка на шкале */ --k-accent-ink: #1F6B50; /* зелёный текст поверх бумаги */ --k-accent-hover:#1F6B50; /* заливка --k-accent под курсором */ --k-accent-2: #4A836F; /* второй зелёный: возврат, повтор, дубль */ --k-accent-soft: #E2ECE9; /* плашка под зелёным текстом */ --k-accent-pale: #F2FFF8; /* едва заметная зелёная подсветка строки */ --k-on-accent: #FFFFFF; /* текст поверх заливки --k-accent */ --k-accent-rgb: 48, 146, 111; --k-on-accent-rgb: 255, 255, 255; /* плашка поверх заливки: rgba(…, .16) */ /* ── Бумага ───────────────────────────────────────────────────── Ступени от дальней к ближней: бумага под всем, на ней лист или карточка, внутри — впадина (шапка таблицы, поле ввода, свёрнутый блок). Лист и карточка разведены намеренно. Лист — это документ целиком, и в тёмной теме он сливается с бумагой: у чертежа нет полей, он и есть вся страница. Карточка в админке, наоборот, обязана быть приподнята над бумагой в обеих темах — иначе список превращается в сплошное полотно. */ --k-paper: #F6F6F6; --k-sheet: #FFFFFF; --k-surface: #FFFFFF; --k-surface-2: #FBFBFB; --k-sunken: #F6F6F6; /* Карточка, лежащая поверх другой карточки: уведомление, поповер, всплывшая подсказка. В светлой теме она такая же белая, как всё остальное, — её отделяет тень. В тёмной тень не читается, и подняться над карточкой она может только цветом. */ --k-overlay: #FFFFFF; /* Лоток — впадина в самой бумаге, а не в карточке: серая плоскость, в которой лежат карточки (подборка «похожие статьи» в блоге), цитата посреди текста. Впадина карточки (--k-sunken) в светлой теме совпадает с бумагой, и на бумаге её не видно — лоток темнее. */ --k-tray: #E8E8E8; /* ── Текст ────────────────────────────────────────────────────── --k-muted читают глазами (подписи полей, служебные колонки), и он обязан держать контраст. --k-muted-soft читать не нужно: это единицы измерения, разделители, подписи под цифрами. */ --k-ink: #000000; --k-ink-2: #373737; --k-muted: #6E6E6E; --k-muted-soft: #8C9692; /* Разложения на составляющие — для полупрозрачных заливок: rgba() не умеет взять альфу от готового цвета. */ --k-ink-rgb: 0, 0, 0; --k-ink-2-rgb: 55, 55, 55; --k-line-rgb: 197, 197, 197; --k-on-dark-rgb: 252, 252, 252; /* ── Линии ────────────────────────────────────────────────────── Форму на klnv.ru держит бордер, а не тень, поэтому основная линия заметная. --k-line-soft — там, где линия только разделяет строки. */ --k-line: #C5C5C5; --k-line-soft: #E6E6E6; /* ── Тёмная плоскость ─────────────────────────────────────────── Штамп документа, шапка, футер — они тёмные в обеих темах. */ --k-dark: #1E1E1E; --k-dark-soft: #2B2B2B; --k-on-dark: #FCFCFC; --k-on-dark-2: #D5D5D5; /* второстепенный текст на тёмной плоскости */ /* Зелёный текст и метки на тёмной плоскости (герой лендинга, штамп): плоскость тёмная в обеих темах, поэтому и он один на обе. */ --k-accent-on-dark: #7FE3BD; --k-accent-on-dark-rgb: 127, 227, 189; /* Глубокая зелёная плоскость: половина квиза связки, нижний край зелёного героя лендинга. Тёмная в обеих темах. --k-deep-soft — её светлая ступень и заодно тёмный текст на белой кнопке поверх зелёного. */ --k-deep: #0E2E22; --k-deep-soft: #14422F; /* Сигнал «вы здесь»: текущий шаг квиза, кольцо фокуса в нём. Не красный и не зелёный — это не оценка, а указатель. */ --k-signal: #DC9A2E; --k-signal-rgb: 220, 154, 46; /* ── Знаковые ─────────────────────────────────────────────────── Красный — только «плохо»: убыток, ошибка, удаление. */ --k-bad: #B3452F; --k-bad-bg: #FBEEEB; /* ── Заметка ──────────────────────────────────────────────────── Бумажка, приклеенная поверх документа: напоминание, вопрос, «здесь доделать». Она нарочно не в общей гамме — заметка и не должна выглядеть частью схемы, иначе её прочтут как её элемент. */ --k-note: #FBEFC0; --k-note-ink: #4A4130; /* ── Фокус с клавиатуры ───────────────────────────────────────── Жёлтое кольцо: его видно и на зелёной заливке, и на бумаге обеих тем — зелёное кольцо на зелёной кнопке пропало бы. */ --k-focus: #FFDB4D; /* ── Чёрные иконки-картинки ───────────────────────────────────── Не цвет, а переключатель: png-иконки сайта нарисованы тёмным по прозрачному, и перекрасить их токеном нельзя. Пишут filter: invert(var(--k-mono-invert)) — на тёмной бумаге иконка выворачивается в светлую. */ --k-mono-invert: 0; } /* ── Тёмная тема ──────────────────────────────────────────────────── Не инверсия светлой: бумага здесь — #1e1e1e с главной, карточка на ней светлее бумаги, а впадина — темнее. Зелёный остаётся тем же #30926f в заливках; светлеет только зелёный текст, иначе он не читается. ─────────────────────────────────────────────────────────────────── */ :root.pr-dark, :root[data-theme="dark"] { --k-accent: #30926f; --k-accent-ink: #6EB39A; --k-accent-hover:#1F6B50; --k-accent-2: #6EB39A; --k-accent-soft: #23342E; --k-accent-pale: #1A231F; --k-on-accent: #FCFCFC; --k-on-accent-rgb: 252, 252, 252; --k-paper: #1E1E1E; --k-sheet: #1E1E1E; --k-surface: #252525; --k-surface-2: #252525; --k-sunken: #171717; --k-overlay: #303030; --k-tray: #171717; --k-ink: #FCFCFC; --k-ink-2: #D5D5D5; --k-muted: #A0A0A0; --k-muted-soft: #8C9692; --k-ink-rgb: 252, 252, 252; --k-ink-2-rgb: 213, 213, 213; --k-line-rgb: 58, 58, 58; --k-line: #3A3A3A; --k-line-soft: #2F2F2F; --k-dark: #0F0F0F; --k-dark-soft: #000000; --k-on-dark: #FCFCFC; /* Красный светлее светлого: #B3452F на #1e1e1e даёт 3:1 и на плашке читается ещё хуже — на тёмном красный обязан подняться. */ --k-bad: #D9705C; --k-bad-bg: #33211D; /* Заметка на тёмной бумаге остаётся жёлтой, но гасится: лист цвета #FBEFC0 посреди тёмного документа светит фонарём. */ --k-note: #3D3722; --k-note-ink: #E8DEBE; --k-mono-invert: 1; }