/* * Дизайн-токены SQLAD.KZ. * * Тёмные поверхности — глубокий сине-серый, действие — синий, жёлтый * остался знаком: логотип и кружки с инициалами. Так задан макет * Заказчика, и так же устроены системы, рядом с которыми эту будут * держать открытой весь день. * * Три роли разведены нарочно, и путать их не нужно: * --brand тёмные поверхности: боковое меню, ведущая карточка, * выбранная сторона переключателя; * --accent действие: главная кнопка, выбранный пункт меню, ссылки; * --mark знак: плитка логотипа и кружки с инициалами. Он жёлтый, * и текст на нём только тёмный — белый по жёлтому 1.6:1. * * Все пары «текст на фоне» проверены по WCAG, значения в комментариях. * Проверка закреплена тестом public/ui/tokens.test.js: поменяете цвет * и уроните контраст — тест упадёт. * * Переименование против прототипа: статусный --green стал --ok. */ :root { /* ── Тёмные поверхности ────────────────────────────────── */ /* Шкала от почти чёрного вверх: меню, приподнятое на меню, наведение, разделитель. Ступени различимы на глаз — иначе тёмная карточка сливается с меню, а разделителя на ней не видно вовсе. */ --brand: #0F172A; /* боковое меню, ведущая карточка; белый 17.9:1 AAA */ --brand-2: #1B2537; /* приподнятая поверхность на тёмном; белый 15.1:1 */ --brand-3: #27344B; /* наведение на тёмном; белый 11.8:1 */ --brand-line: #334155; /* разделители на тёмном */ --on-brand: #FFFFFF; --on-brand-muted: #94A3B8; /* подписи на тёмном; 6.96:1 AA */ /* ── Действие ──────────────────────────────────────────── */ --accent: #2563EB; /* главная кнопка, выбранный пункт меню; белый 5.17:1 AA */ --accent-soft: #DBEAFE; /* светлая подложка под значок раздела */ --on-accent: #FFFFFF; /* Синий как текст — отдельным токеном от синего как заливки. На светлом это один цвет, на тёмном они расходятся: заливке нужен тёмный синий, чтобы по нему читался белый, а тексту — светлый, чтобы читаться самому. Одним токеном обе роли на тёмной теме одновременно не закрыть. */ --accent-text: #2563EB; /* 5.17:1 на белом */ /* ── Знак ──────────────────────────────────────────────── */ /* Жёлтый логотипа. Отдельным токеном, а не «акцентом»: действие теперь синее, а знак остался жёлтым, и одно имя на два смысла через полгода превратится в жёлтую кнопку «Сохранить». */ --mark: #FEC40A; --on-mark: #1B1E24; /* 12.4:1. Белым по жёлтому — 1.6:1, нечитаемо */ /* ── Светлые поверхности ───────────────────────────────── */ --paper: #F1F5F9; /* фон рабочей области */ --surface: #FFFFFF; /* карточки, панели, таблицы */ --surface-sunken: #F8FAFC; /* подсветка строки при наведении */ --text: #0F172A; /* 17.9:1 на белом */ --muted: #64748B; /* 4.76:1 на белом — подписи и вторичное */ --line: #E2E8F0; --line-strong: #CBD5E1; /* ── Статусы ───────────────────────────────────────────── */ --ok: #16A34A; --danger: #DC2626; --info: #2563EB; --violet: #7358B8; --orange: #EA7317; --warn-text: #8B6810; /* тёмно-жёлтый: сам жёлтый как текст нечитаем */ /* ── Статусы боксов на карте-плане ─────────────────────── */ /* Заливка и рамка парами: на карте до 6 500 плиток, различать надо боковым зрением, поэтому цвет дублируется рамкой. */ --box-free-bg: #E9F5EE; --box-free-line: #A9D6BD; --box-occupied-bg: #FDF0CD; --box-occupied-line: #E8C765; --box-debt-bg: #F8E0DC; --box-debt-line: #E0A094; --box-reserved-bg: #E6E0F4; --box-reserved-line: #B7A7DE; --box-service-bg: #EFEEE9; --box-service-line: #CFCDC7; /* ── Плашки ────────────────────────────────────────────── */ /* Текст плашки — 7.6px, для такого размера нужно не меньше 4.5:1. Статусные цвета выше на этих фонах давали 2.8–4.4:1, поэтому у текста плашек свои, затемнённые значения при том же тоне. Исходные --ok, --danger и прочие остаются для крупных чисел, полос и иконок, где контраста хватает. */ --tag-ok-bg: #DCF0E6; --tag-ok-text: #237852; /* 4.55:1 */ --tag-danger-bg: #F8E0DC; --tag-danger-text: #BB3726; /* 4.53:1 */ --tag-warn-bg: #FDF0CD; --tag-warn-text: #8B6810; /* 4.53:1 */ --tag-info-bg: #DCE9F6; --tag-info-text: #296AA9; /* 4.57:1 */ --tag-violet-bg: #E6E0F4; --tag-violet-text: #6E53B6; /* 4.57:1 */ --tag-orange-bg: #FFE6D5; --tag-orange-text: #B14B18; /* 4.51:1 */ --tag-neutral-bg: #E8EDF3; --tag-neutral-text: #5A6474; /* 5.02:1 */ /* Плотный зелёный значок — заливкой, а не подложкой плашки: пара «заливка + текст на ней», как у --accent и --mark. Раньше здесь стоял --tag-ok-text, то есть цвет текста в роли фона; на светлой теме это совпадало, на тёмной дало белое по светло-зелёному. */ --solid-ok: #237852; --on-solid-ok: #FFFFFF; /* 4.55:1 */ /* Доля цвета стадии в её подписи. Цвета стадий заводят в админке под светлый экран, и на тёмном они уходят в грязь: 3:1 при мелком тексте. Подмешивание к цвету текста тянет их туда, где они читаются, — вверх на тёмной теме и никуда на светлой, где 100% значит «как есть». */ --stage-ink: 100%; /* ── Типографика ───────────────────────────────────────── */ /* Inter лежит у нас, а не грузится с CDN Google: сторонний шрифт — это ещё одно обращение к чужой сети перед первой отрисовкой, а мы только что убирали лишние обращения. Три подмножества (кириллица, латиница и расширенная латиница) — 152 КБ на все начертания: шрифт переменный, и 400, 500, 600, 700, 800 берутся из одного файла. Расширенная латиница нужна не «на всякий случай»: знак тенге ₸ живёт именно там, а он в этом интерфейсе на каждом экране. Лицензия SIL OFL 1.1 лежит рядом с файлами. ПРЕЖНИЙ ШРИФТ — возврат в одну строку, если Inter не подойдёт: --font-sans: Manrope, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; Оговорка: Manrope тоже никогда не загружался, и на деле почти все видели системный шрифт, а не его. */ --font-sans: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ── Веса ──────────────────────────────────────────────── */ /* Шкала задана Заказчиком. Именем, а не числом по месту: «заголовок панели весом 600» и «кнопка весом 600» — это одно решение в двух местах, и менять его надо один раз. */ --weight-normal: 400; /* обычный текст и пояснения */ --weight-label: 500; /* подписи колонок и полей */ --weight-strong: 600; /* заголовки панелей, кнопки */ --weight-title: 700; /* заголовок экрана */ --weight-number: 800; /* крупные числа на карточках */ /* Шкала поднята против прототипа примерно на пятую часть. Прототип рисовался под демонстрацию «много данных на одном экране», а работают с системой весь день: 12 px основного текста и 7.6 px в плашках читаются с усилием, и к вечеру это усилие складывается. Плотность от этого почти не страдает — таблицы сети по-прежнему помещаются в ширину, а строки стали различимы боковым зрением. */ --text-xs: 11px; --text-sm: 12.5px; --text-base: 14px; --text-md: 16px; --text-lg: 20px; --text-xl: 28px; /* ── Геометрия ─────────────────────────────────────────── */ --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; /* Шкала отступов. Номер — это множитель: `--space-6` всегда 6 × 4 = 24 px, и по имени видно значение, не заглядывая сюда. Раньше шкала обрывалась на шестёрке и там же ломала правило: `--space-5` означал 24 px, а `--space-6` — 32. Из-за этого крупные расстояния на лендинге набирались руками — `calc(var(--space-6) * 2)` вместо одного имени, — и «единая система» держалась на памяти того, кто её писал. Шаг 4 px: всё, что между, — это или ошибка, или осознанное исключение, и второе лучше называть отдельно (см. `--mini-*` у миниатюр). */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Поле от края окна до содержимого на публичных страницах — лендинге и витрине. Только на них: рабочему интерфейсу портала широкое поле не нужно, он берёт 24 px прямо из шкалы. Раньше этот токен стоял и там, и после перехода на плавающее значение таблицы CRM потеряли бы по 72 px ширины ни за что. Значение плавающее, и это главное в нём. Фиксированные 24 px держались за телефон, где больше не влезает, — и на ноутбуке 1440 содержимое стояло в двух сантиметрах от края экрана. Теперь поле растёт вместе с окном: 24 px на телефоне, около 46 на 1440, ровно 60 на 1920 и дальше не растёт — больше шестидесяти это уже не поле, а вторая колонка пустоты. */ --gutter: clamp(24px, 3.2vw, 60px); /* Рабочая ширина публичных страниц: докуда растёт содержимое, прежде чем начать копить пустоту по краям. 1800 — решение Заказчика о том, как должен выглядеть лендинг на мониторе: на 1920 содержимое занимает ровно 1800 и оставляет по 60 px с каждой стороны. Ниже 1800 потолок не работает, и ширину задаёт поле от края. Полосы разделов при этом остаются во всю ширину окна: ограничена колонка содержимого, а не фон под ней. Иначе цветные полосы «Почему» и «Готовы начать?» повисли бы прямоугольниками посреди страницы. */ --page: 1800px; --shadow-soft: 0 3px 14px rgba(15, 17, 22, .07); --shadow-lift: 0 18px 48px rgba(15, 17, 22, .16); --backdrop: rgba(15, 17, 22, .45); /* затемнение под модальным окном */ } /* * ── Тёмная тема ─────────────────────────────────────────────────────── * * Второй набор значений тех же токенов. Компоненты не знают о теме вовсе: * во всём портале ровно один цвет записан мимо токена, и тот здесь ниже * переведён. Поэтому тема — это переопределение переменных, а не второй * набор правил, который пришлось бы держать в согласии с первым. * * Применяется по атрибуту, а не по `prefers-color-scheme` напрямую: выбор * человека должен побеждать системный, а системный — работать, пока выбора * нет. Разрешает это оболочка (public/portal/theme.js): она читает * сохранённый выбор, при «как в системе» смотрит на медиазапрос и ставит * `data-theme`. Так правило в CSS одно, а не два почти одинаковых. * * `color-scheme` здесь не украшение: он переключает то, что рисует сам * браузер и до чего стили не достают, — полосы прокрутки, выпадающие * списки, календарь в `input[type=date]`, автозаполнение. Без него на * тёмной странице остаются белые прямоугольники. * * Тёмная шкала --brand не меняется: она и была тёмной. Меню на тёмной * теме остаётся чуть светлее полотна — иначе оно сливается с ним и сеть * разделов теряет границу. * * Контраст закреплён тем же тестом, что и светлая тема: public/ui/tokens.test.js * проверяет обе, и требования к ним одинаковые. */ :root[data-theme='dark'] { color-scheme: dark; /* ── Полотно и поверхности ─────────────────────────────── */ /* Снизу вверх: полотно, меню, карточка, наведение. Карточка светлее меню — на светлой теме она белее фона, и порядок сохраняется. */ --paper: #0A101C; /* фон рабочей области */ --surface: #151E31; /* карточки, панели, таблицы */ --surface-sunken: #1E2941; /* подсветка строки при наведении */ --text: #E8EEF8; /* 14.6:1 на карточке */ --muted: #9FB0C6; /* 6.8:1 на карточке — подписи и вторичное */ --line: #27324A; --line-strong: #3A4763; /* ── Действие ──────────────────────────────────────────── */ /* Заливка кнопки не меняется: по ней читается тот же белый. Меняется только текстовая роль — тёмно-синяя ссылка на тёмном не читается. */ --accent-text: #7FB2FF; /* 7.1:1 на карточке */ --accent-soft: #17294A; /* подложка под значок раздела */ /* ── Статусы ───────────────────────────────────────────── */ /* Светлее светлой темы: те же цвета на тёмном фоне уходят в грязь. Это крупные числа, полосы и значки — читаются на карточке. */ --ok: #34D399; --danger: #F98080; --info: #60A5FA; --violet: #A78BFA; --orange: #FB923C; --warn-text: #FBBF24; /* ── Статусы боксов на карте-плане ─────────────────────── */ /* Заливка тёмная, рамка светлее её — на светлой теме наоборот, и это не описка: видимой рамку делает разница с заливкой, а не темнота. */ --box-free-bg: #102A1E; --box-free-line: #2F6E4E; --box-occupied-bg: #332810; --box-occupied-line: #7D6422; --box-debt-bg: #3A1A16; --box-debt-line: #8C4137; --box-reserved-bg: #241D3E; --box-reserved-line: #57468B; --box-service-bg: #212530; --box-service-line: #4B5263; /* ── Плашки ────────────────────────────────────────────── */ /* Текст плашки — мелкий, спрос те же 4.5:1. На тёмной теме пара переворачивается: подложка тёмная, буквы светлые. */ --tag-ok-bg: #0F3021; --tag-ok-text: #5FE0A0; /* 8.0:1 */ --tag-danger-bg: #3A1614; --tag-danger-text: #FF9E92; /* 7.4:1 */ --tag-warn-bg: #33280A; --tag-warn-text: #F5C542; /* 8.5:1 */ --tag-info-bg: #13263F; --tag-info-text: #8AC0FF; /* 7.6:1 */ --tag-violet-bg: #241C3D; --tag-violet-text: #BCA6F5; /* 7.1:1 */ --tag-orange-bg: #3A2210; --tag-orange-text: #FCA65C; /* 7.3:1 */ --tag-neutral-bg: #1F2839; --tag-neutral-text: #A6B4C8; /* 7.2:1 */ --solid-ok: #1C5F42; --on-solid-ok: #D8F7E7; /* 8.2:1 */ --stage-ink: 55%; /* ── Тени и затемнение ─────────────────────────────────── */ /* Полупрозрачный серый по тёмному не виден вовсе: на тёмной теме тень — это не «серее фона», а чернее его. */ --shadow-soft: 0 3px 14px rgba(0, 0, 0, .45); --shadow-lift: 0 18px 48px rgba(0, 0, 0, .6); --backdrop: rgba(0, 0, 0, .6); }