/* === VARIABLES.CSS === */ /* demo/assets/css/variables.css */ /* НАЗНАЧЕНИЕ: дизайн-токены демо. Каркас и плотность взяты из рабочего кабинета Ozonteh (biomass), чтобы демо и боевой продукт читались одной системой. Светлая тема сделана ДЕФОЛТНОЙ: Дмитрию понравился светлый Strimix, а демо показывают с проектора, где темный фон теряет контраст. Палитра при этом своя - индиго вместо бирюзы Strimix, чтобы не выглядеть его копией. */ /* СВЯЗИ: main.css, components.css, theme-init.js. Никакой другой файл не объявляет :root */ /* РАЗМЕР: ~190 строк */ /* ============================================================ СВЕТЛАЯ ТЕМА - ДЕФОЛТ (:root) Темная живет ниже в html.dark-theme и переопределяет те же имена. ============================================================ */ :root { /* --- Поверхности (страница -> панель -> строка -> наведение) --- Фон страницы чуть холоднее белого, панель чистый белый: так карточка сама отделяется от фона и не нужны лишние рамки. Прием Strimix. */ --bg: oklch(0.975 0.004 265); --bg-0: oklch(1.00 0 0); --surface: oklch(1.00 0 0); --surface-2: oklch(0.982 0.003 265); --surface-hover: oklch(0.955 0.006 265); /* --- Линии. Мягкие: на светлом фоне жесткая рамка рвет композицию --- */ --border: oklch(0.915 0.005 265); --border-strong: oklch(0.845 0.010 265); /* --- Текст. Яркость подобрана по контрасту, а не на глаз. text 16.5, dim 7.8, muted 4.85 на белом - все выше нормы 4.5 --- */ --text: oklch(0.24 0.020 265); --dim: oklch(0.44 0.015 265); --muted: oklch(0.55 0.014 265); /* --- Акцент: спокойное индиго. Взят вместо бирюзы, чтобы демо не читалось как клон Strimix, но осталось в том же сдержанном регистре. Контраст акцента к белому 4.93 - можно писать им текст и класть белый текст на заливку. Светлее (0.62) дало бы только 3.68, не проходит. --- */ --accent: oklch(0.55 0.17 275); --accent-soft: oklch(0.55 0.17 275 / 0.10); --accent-line: oklch(0.55 0.17 275 / 0.28); /* --- Семантика. Узнаваемая: зеленый-желтый-красный. Оранжевый притушен до 0.55, иначе белый текст на нем дает 4.30. --- */ --ok: oklch(0.52 0.15 145); --warn: oklch(0.55 0.14 65); --err: oklch(0.55 0.20 25); --ok-soft: oklch(0.52 0.15 145 / 0.11); --warn-soft: oklch(0.55 0.14 65 / 0.11); --err-soft: oklch(0.55 0.20 25 / 0.11); --ok-line: oklch(0.52 0.15 145 / 0.30); --warn-line: oklch(0.55 0.14 65 / 0.32); --err-line: oklch(0.55 0.20 25 / 0.34); /* Текст ПОВЕРХ заливки цветом. Заливки в светлой теме темные, поэтому сверху белый: 5.01 / 4.86 / 5.21 / 4.93 - все проходят 4.5. */ --on-ok: oklch(0.99 0.005 145); --on-warn: oklch(0.99 0.005 65); --on-err: oklch(0.99 0.005 25); --on-accent: oklch(0.99 0.005 275); /* --- Палитра графиков. Первый цвет - акцент, дальше расходимся по кругу, чтобы соседние серии различались и в черно-белой распечатке. --- */ --c-1: oklch(0.55 0.17 275); --c-2: oklch(0.52 0.15 145); --c-3: oklch(0.55 0.14 65); --c-4: oklch(0.52 0.16 320); --c-5: oklch(0.55 0.13 215); --c-6: oklch(0.55 0.20 25); /* --- Шкала шрифта. Семь ступеней --- */ --fs-1: 10px; /* подписи под цифрой, легенды */ --fs-2: 11px; /* шапки таблиц, чипы, метки */ --fs-3: 12px; /* основной текст интерфейса */ --fs-4: 13px; /* акцентная строка, ячейка с числом */ --fs-5: 15px; /* заголовок панели */ --fs-6: 20px; /* заголовок страницы */ --fs-7: 30px; /* крупная цифра KPI */ /* --- Отступы. Подняты относительно кабинета: демо смотрят с проектора метров с трех, там плотность 10px читается как каша. Шкала осталась кратной четырем, чтобы верстка не поехала. --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --gap: var(--sp-3); /* --- Скругления. Подняты вслед за Strimix: мягкая карточка читается как продукт, острая - как таблица в админке. --- */ --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-pill: 999px; --radius: var(--r-2); /* --- Тени. На светлой теме тень заменяет часть рамок --- */ --shadow: 0 1px 2px oklch(0.30 0.03 265 / 0.06), 0 1px 1px oklch(0.30 0.03 265 / 0.04); --shadow-2: 0 8px 24px oklch(0.30 0.03 265 / 0.10), 0 2px 6px oklch(0.30 0.03 265 / 0.06); /* --- Шрифты и движение --- */ --font-mono: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ease-out: cubic-bezier(0.25, 1, 0.5, 1); --transition: 140ms var(--ease-out); } /* ============================================================ ТЕМНАЯ ТЕМА - альтернатива (html.dark-theme) Смысловые цвета светлеют: на темном фоне темная заливка не читается, поэтому текст поверх заливки становится темным, а не белым. ============================================================ */ html.dark-theme { --bg: oklch(0.18 0.012 265); --bg-0: oklch(0.15 0.012 265); --surface: oklch(0.205 0.012 265); --surface-2: oklch(0.235 0.014 265); --surface-hover: oklch(0.265 0.018 265); --border: oklch(0.32 0.012 265); --border-strong: oklch(0.42 0.016 265); --text: oklch(0.93 0.006 265); --dim: oklch(0.77 0.012 265); --muted: oklch(0.70 0.012 265); /* Акцент светлее и чуть менее насыщенный: чистое индиго на темном фоне вибрирует. Как текст на панели дает 6.98, как заливка под темный текст 7.07. */ --accent: oklch(0.72 0.15 278); --accent-soft: oklch(0.72 0.15 278 / 0.16); --accent-line: oklch(0.72 0.15 278 / 0.36); --ok: oklch(0.74 0.16 145); --warn: oklch(0.78 0.15 75); --err: oklch(0.68 0.20 25); --ok-soft: oklch(0.74 0.16 145 / 0.15); --warn-soft: oklch(0.78 0.15 75 / 0.15); --err-soft: oklch(0.68 0.20 25 / 0.15); --ok-line: oklch(0.74 0.16 145 / 0.36); --warn-line: oklch(0.78 0.15 75 / 0.38); --err-line: oklch(0.68 0.20 25 / 0.40); /* Заливки светлые - сверху темный текст: 8.44 / 9.05 / 5.88 / 7.07. */ --on-ok: oklch(0.19 0.03 145); --on-warn: oklch(0.19 0.03 75); --on-err: oklch(0.19 0.03 25); --on-accent: oklch(0.19 0.03 278); --c-1: oklch(0.72 0.15 278); --c-2: oklch(0.74 0.16 145); --c-3: oklch(0.78 0.15 75); --c-4: oklch(0.70 0.16 320); --c-5: oklch(0.72 0.13 215); --c-6: oklch(0.68 0.20 25); --shadow: 0 1px 2px oklch(0 0 0 / 0.28); --shadow-2: 0 8px 24px oklch(0 0 0 / 0.38), 0 2px 6px oklch(0 0 0 / 0.24); } /* Без этого при переключении темы мигает вся палитра */ html.no-transition, html.no-transition * { transition: none !important; }