/* ============================================================================ «Мотор-Плейс» CRM/DMS — ТОКЕНЫ ВИЗУАЛЬНОГО ЯЗЫКА. Источник: «Гайдлайн дизайна внутренней системы», версия 0.1 от 09.10.2026 (docs/guideline.pdf) + ТЗ docs/тз-дизайн-обращения.md, п. 3.6, 4.1–4.3. ЭТОТ ФАЙЛ — ЕДИНСТВЕННОЕ МЕСТО СО ЗНАЧЕНИЯМИ. Ни одно правило в theme.css и ни один экран не знает ни одного цвета в лицо — только имя токена. Гайдлайн помечен черновиком 0.1, и восемь вопросов в нём открыты (раздел 12): цвета `#B1212E` и `#CC0000` ещё не сверены с брендбуком, цвет QRX «уточняется». Значит замена цвета — это правка одной строки здесь, а не обход пятидесяти экранов. Ради этого файл и отделён от theme.css. У каждого значения ниже есть адрес в гайдлайне. Где его нет — стоит пометка «ВЫВЕДЕНО» и сказано, из чего выведено; такие места перечислены в отчёте как вопросы заказчику. Объявления идут на `:root, body` ОДНОВРЕМЕННО — не для красоты. Базовая тема (base-theme.css) объявляет свои токены на `body` тоже, а `var()` считается на том элементе, где объявлен: токен, заданный только на `:root`, проигрывает собственному объявлению `body` и молча перестаёт действовать. ============================================================================ */ :root, body { /* ── НЕЙТРАЛЬНЫЕ · гайдлайн стр. 4 ────────────────────────────────────── Имена — как в гайдлайне, чтобы разговор с автором шёл на одних словах. */ --mp-white: #FFFFFF; --mp-gray-25: #F7F7F8; --mp-gray-75: #EDEDEF; --mp-gray-200: #E1E1E3; --mp-gray-300: #D9D9DC; --mp-gray-400: #B3B3B6; /* из макетов гайдлайна: неактивное, подсказка в поле */ --mp-gray-500: #6B6B6B; --mp-gray-600: #505050; --mp-ink: #1F2021; --mp-graphite-900: #161718; --mp-app-bg: #F4F4F5; /* Тёмные поверхности гайдлайна (стр. 4, «ТЁМНАЯ ПОВЕРХНОСТЬ»): боковое меню и активный пункт в нём. Они же — основание тёмной темы (ТЗ, п. 4.3). */ --mp-graphite-800: #222326; --mp-graphite-700: #2C2D30; /* ── БРЕНДЫ · гайдлайн стр. 4 ──────────────────────────────────────────── */ --mp-hnd-red: #B1212E; /* акцент интерфейса */ --mp-hnd-red-tint: #FBF1F2; /* выделенная строка таблицы */ --mp-honda-red: #CC0000; /* ТОЛЬКО метка Honda, не акцент интерфейса */ --mp-qrx: #161718; /* в гайдлайне «уточняется» — пока графит */ /* АКЦЕНТ — ЭТО ОСНОВНАЯ КНОПКА И АКТИВНЫЙ ПУНКТ МЕНЮ, А НЕ ОШИБКА. Гайдлайн говорит это прямым запретом (стр. 4), и запрет не декоративный: красный у ошибки и красный у кнопки «Создать» на одном экране означают, что ни тот, ни другой уже ничего не значат. Поэтому ошибка и просрочка берут --mp-st-e-*, и ни одно правило в theme.css не красит беду акцентом. */ --mp-accent: var(--mp-hnd-red); --mp-accent-hover: #8F1A25; /* ВЫВЕДЕНО: акцент, затемнённый на один шаг */ --mp-on-accent: var(--mp-white); /* белое на акценте — 6,72:1, стр. 12 */ --mp-accent-tint: var(--mp-hnd-red-tint); /* ── ПЯТЬ СТАТУСОВ · гайдлайн стр. 9 ──────────────────────────────────── Значения сняты из самого PDF и сверены с контрастами, которые гайдлайн называет на стр. 9 и 12, — цифра к цифре. Это не «похожий оттенок»: .st-n Черновик #505050 на #EDEDEF = 6,90 : 1 (стр. 12) .st-i На согласовании #1F5FBF на #E8F0FC = 5,31 : 1 (стр. 9) .st-w В пути #8A5300 на #FDF1DC = 5,66 : 1 (стр. 9, 12) .st-o Получен #1E7B45 на #E3F4EA = 4,63 : 1 (стр. 9, 12) .st-e Отклонён #B3261E на #FBE9E7 = 5,58 : 1 (стр. 9, 12) Пять видов — на все разделы; названия в разделе свои, цвет один и тот же. Статус всегда с текстом: цвет только усиливает смысл. */ --mp-st-n-ink: #505050; --mp-st-n-bg: #EDEDEF; /* нейтральный: черновик, скрыто */ --mp-st-i-ink: #1F5FBF; --mp-st-i-bg: #E8F0FC; /* в работе: отправлено, передано */ --mp-st-w-ink: #8A5300; --mp-st-w-bg: #FDF1DC; /* внимание: ожидает, доработка */ --mp-st-o-ink: #1E7B45; --mp-st-o-bg: #E3F4EA; /* готово: завершено, одобрено */ --mp-st-e-ink: #B3261E; --mp-st-e-bg: #FBE9E7; /* ошибка: отказ, просрочка */ /* ── ТЕКСТ И ЛИНИИ — имена по роли, значения из нейтральных выше ───────── Перекрасить систему = поменять нейтральные, а не искать, где написано «#6B6B6B». */ --mp-text: var(--mp-ink); /* основной текст, 16,32:1 на белом */ --mp-text-soft: var(--mp-gray-600); /* второй по важности */ --mp-text-mute: var(--mp-gray-500); /* вспомогательный, 5,33:1 на белом */ --mp-text-faint: var(--mp-gray-400); /* неактивное и «не указано» */ --mp-line: var(--mp-gray-200); --mp-line-soft: var(--mp-gray-75); --mp-line-strong: var(--mp-gray-300); --mp-surface: var(--mp-white); --mp-surface-2: var(--mp-gray-25); --mp-surface-3: var(--mp-gray-75); --mp-bg: var(--mp-app-bg); /* Тёмная поверхность бокового меню — она тёмная и в светлой теме тоже (гайдлайн стр. 3 и 4): меню остаётся графитовым, светлеет только страница. */ --mp-rail: var(--mp-graphite-800); --mp-rail-active: var(--mp-graphite-700); --mp-rail-ink: var(--mp-gray-25); --mp-rail-mute: var(--mp-gray-400); /* ── ТИПОГРАФИКА · гайдлайн стр. 5 ─────────────────────────────────────── */ --mp-font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --mp-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace; /* Шкала. Шесть размеров на всю систему; на одной карточке — не больше трёх (гайдлайн стр. 5). Пары «размер + начертание» держатся вместе: 26-й заголовок с весом 500 — уже не заголовок гайдлайна. */ --mp-size-page: 26px; --mp-weight-page: 800; /* заголовок страницы, ВЕРХНИЙ РЕГИСТР */ --mp-size-card: 16px; --mp-weight-card: 800; /* заголовок карточки */ --mp-size-body: 14px; --mp-weight-body: 500; /* основной текст */ --mp-size-caption: 12px; --mp-weight-caption: 500; /* подпись */ --mp-size-col: 11.5px; --mp-weight-col: 800; /* заголовок колонки, ВЕРХНИЙ РЕГИСТР */ --mp-size-kpi: 34px; --mp-weight-kpi: 800; /* значение показателя */ /* Межстрочное гайдлайн не задаёт — ВЫВЕДЕНО: 1,35 для текста (плотно, но строка 14px не слипается) и 1,15 для крупного. Вопрос заказчику. */ --mp-leading: 1.35; --mp-leading-tight: 1.15; /* ── СЕТКА И ОТСТУПЫ · гайдлайн стр. 6. Одинаковы в обеих плотностях (ТЗ, п. 3.6): плотность меняет ВЫСОТУ контролов, а не воздух страницы. ── */ --mp-canvas: 1440px; /* эталон 1440 × 900 */ --mp-sidebar: 248px; --mp-sidebar-icons: 48px; /* свёрнутое меню, планшет 1024–1280 (стр. 12) */ --mp-panel: 340px; /* правая панель */ --mp-pad-top: 24px; --mp-pad-side: 28px; --mp-gap-block: 18px; --mp-gap-card: 16px; --mp-radius: 12px; /* радиус карточки */ --mp-radius-sm: 8px; /* ВЫВЕДЕНО: контрол внутри карточки, вопрос */ --mp-radius-pill: 999px; /* ВЫВЕДЕНО: чип и бейдж в макетах гайдлайна — капсулой */ /* ── ПЛОТНОСТЬ · ТЗ п. 3.6, режим «КОМПАКТНО» — по умолчанию на десктопе ── Оператор колл-центра держит на экране 25–30 строк; 48-я строка гайдлайна даёт 14–16 — ровно то, на что жалуются в действующей системе (ТЗ, п. 2). Это одно из пяти отступлений от гайдлайна (ТЗ, п. 4.2) и ждёт подтверждения заказчика — поэтому числа гайдлайна никуда не делись, они в режиме «обычно» ниже, и вернуть их = переключить атрибут, а не править экраны. */ --mp-row: 36px; --mp-row-head: 36px; --mp-control: 32px; /* поле ввода */ --mp-btn: 32px; --mp-tabs: 40px; /* полоса вкладок вместо верхней панели 64px */ /* Не зависят от плотности: гайдлайн, стр. 6. */ --mp-btn-lg: 48px; /* «Оформить заказ» — одна на экран */ --mp-row-catalog: 56px; /* строка каталога запчастей */ --mp-ta-select-w: 34px; /* ячейка флажка выбора: от неё отсчитан закреплённый номер */ --mp-chip: 32px; /* ── ТЕНИ ──────────────────────────────────────────────────────────────── ВЫВЕДЕНО: гайдлайн теней не называет ни разу — его карточки отделены линией, а не тенью. Поэтому тень здесь только у того, что ЛЕЖИТ ПОВЕРХ страницы (выпадающее, окно, тост): без неё не видно, что оно оторвано. Карточки остаются плоскими. */ --mp-shadow-pop: 0 10px 28px rgba(22, 23, 24, .16), 0 0 0 1px rgba(22, 23, 24, .06); --mp-shadow-top: 0 1px 2px rgba(22, 23, 24, .06); } /* ============================================================================ ПЛОТНОСТЬ «ОБЫЧНО» — числа гайдлайна как есть (стр. 6). Включается атрибутом `data-mp-density="comfortable"` на (или ) — чтобы переключатель в меню профиля (ТЗ, п. 3.5) просто менял атрибут и ничего больше. Атрибут на выбран сознательно: он стоит до загрузки стилей, и страница не успевает мигнуть чужой плотностью. ============================================================================ */ [data-mp-density='comfortable'], [data-mp-density='comfortable'] body { --mp-row: 48px; --mp-row-head: 40px; --mp-control: 40px; --mp-btn: 40px; --mp-tabs: 44px; } /* Явно выбранная компактность — на случай, когда она выбрана человеком на планшете, где по умолчанию стоит «обычно». */ [data-mp-density='compact'], [data-mp-density='compact'] body { --mp-row: 36px; --mp-row-head: 36px; --mp-control: 32px; --mp-btn: 32px; --mp-tabs: 40px; } /* Планшет и телефон — «обычно», пока человек не выбрал иное (ТЗ, п. 3.6 и 5.9): на планшете интерактивный элемент не ниже 40px (гайдлайн, стр. 12), а 32-я кнопка под палец не попадает. `:not([data-mp-density])` — чтобы выбор человека не отменялся поворотом планшета. Точка перехода 1280px взята из адаптивности гайдлайна (стр. 12: планшет 1024–1280); сам гайдлайн признаёт, что breakpoints не заданы (раздел 12). */ @media (max-width: 1280px) { :root:not([data-mp-density]), :root:not([data-mp-density]) body { --mp-row: 48px; --mp-row-head: 40px; --mp-control: 40px; --mp-btn: 40px; --mp-tabs: 44px; } } /* ============================================================================ ТЁМНАЯ ТЕМА — ТЗ, п. 4.3. В гайдлайне её НЕТ. Поэтому она не придумана с нуля, а собрана на тех значениях, которые в гайдлайне есть: тёмные поверхности #161718 / #222326 / #2C2D30 (стр. 4) становятся фоном, поверхностью и приподнятой поверхностью, а текст и линии берут нейтральные из той же палитры снизу вверх. Новых цветов введено ровно столько, сколько нельзя вывести: подложки статусов (светлая розовая на графите не читается) — они замешаны из цвета статуса и поверхности, то есть тоже не новые значения, а смеси. Переключатель — `.dark` на (так его ставит Filament). Объявление продублировано на `body`: см. причину в шапке файла. ============================================================================ */ .dark, .dark body, body.dark { --mp-bg: var(--mp-graphite-900); --mp-surface: var(--mp-graphite-800); --mp-surface-2: var(--mp-graphite-700); --mp-surface-3: #35363A; /* ВЫВЕДЕНО: следующий шаг той же лестницы */ --mp-text: var(--mp-gray-25); --mp-text-soft: var(--mp-gray-300); --mp-text-mute: var(--mp-gray-400); --mp-text-faint: var(--mp-gray-500); --mp-line: #35363A; /* ВЫВЕДЕНО: тот же шаг лестницы, что surface-3 */ --mp-line-soft: var(--mp-graphite-700); --mp-line-strong: #43444A; /* ВЫВЕДЕНО */ /* Меню в тёмной теме на один шаг ТЕМНЕЕ страницы, а не светлее: иначе оно перестаёт быть «рамой» и начинает читаться как ещё одна карточка. */ --mp-rail: var(--mp-graphite-900); --mp-rail-active: var(--mp-graphite-700); --mp-rail-ink: var(--mp-gray-25); --mp-rail-mute: var(--mp-gray-400); /* Акцент НЕ светлеет: белое на #B1212E даёт 6,72:1 и на графите тоже. Светлее сделать — значит сменить фирменный цвет, а он не наш. */ --mp-accent-hover: #C8303E; /* ВЫВЕДЕНО: на тёмном наведение светлеет */ --mp-accent-tint: color-mix(in srgb, var(--mp-accent) 22%, var(--mp-surface)); /* Статусы: цвет остаётся узнаваемым, светлеет ровно настолько, чтобы читаться на графите; подложка — тот же цвет, растворённый в поверхности. */ --mp-st-n-ink: var(--mp-gray-300); --mp-st-n-bg: var(--mp-surface-2); --mp-st-i-ink: color-mix(in srgb, #1F5FBF 42%, var(--mp-gray-25)); --mp-st-i-bg: color-mix(in srgb, #1F5FBF 24%, var(--mp-surface)); --mp-st-w-ink: color-mix(in srgb, #8A5300 34%, var(--mp-gray-25)); --mp-st-w-bg: color-mix(in srgb, #8A5300 26%, var(--mp-surface)); --mp-st-o-ink: color-mix(in srgb, #1E7B45 40%, var(--mp-gray-25)); --mp-st-o-bg: color-mix(in srgb, #1E7B45 24%, var(--mp-surface)); --mp-st-e-ink: color-mix(in srgb, #B3261E 40%, var(--mp-gray-25)); --mp-st-e-bg: color-mix(in srgb, #B3261E 26%, var(--mp-surface)); --mp-shadow-pop: 0 10px 28px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .07); --mp-shadow-top: 0 1px 2px rgba(0, 0, 0, .4); }