/* Токены оформления из UI-kit заказчика (Figma, файл 9QtAkcpyZhHxZQ3b1OyvVR). Снято 3 сентября 2026 через коннектор Figma, страница «🎨 Colors». Правило: цвет в шаблоне берётся отсюда переменной и никогда не пишется литералом. Иначе перекрасить арендатора под его бренд можно будет только правкой разметки — а это и есть то, что white-label обязан исключить. Имена сохранены как в ките (`green_1`, `red_bg`, `mint_stroke`), чтобы дизайнер и разработчик называли один цвет одинаково. Семантический слой ниже отображает их на роли интерфейса. */ :root { /* ── 01 Base ─────────────────────────────────────────────── */ --dark: #424249; --dark-hover: #1E1E1E; --white: #FFFFFF; --stroke: #E3E8E4; --gray-1: #737E72; --gray-2: #898989; --gray-3: #BDBDBD; --gray-4: #E0E0E0; --gray-5: #F2F2F2; --gray-bg-1: #F9F9FB; --gray-bg-2: #EFF0F4; --gray-bg-3: #DADCE3; --gray-bg-4: #E4E6ED; /* ── 02 Primary ──────────────────────────────────────────── */ --green-1: #00B22D; --green-2: #00D035; --green-3: #4CAF50; --green-hover: #009526; --green-bg: #EEF6E8; --green-stroke: #E9F8DE; --blue-1: #3699FF; --blue-2: #007EFF; --blue-3: #76B9FE; --blue-bg: #F1F7FD; --blue-stroke: #E0EDFB; --blue-gray: #72787E; /* ── 03 System ───────────────────────────────────────────── */ /* Ошибка и плохая оценка */ --critical-1: #FF5050; --critical-2: #C91414; /* Успех и хорошая оценка */ --positive-1: #7DD27C; --positive-2: #00A72B; /* Проблема и средняя оценка */ --orange-1: #FFAA00; --orange-2: #ED9631; --orange-bg: #FAF2E0; --orange-stroke: #FDEAC5; --orange-gray: #7E7872; /* ── 04 Additional ───────────────────────────────────────── */ --mint-1: #19B28D; --mint-2: #13DCAC; --mint-bg: #E8F7F4; --mint-stroke: #BFE9DF; --mint-gray: #727E79; --tiffany-1: #4BCBD3; --tiffany-2: #53DFE8; --tiffany-bg: #E4F7F8; --tiffany-stroke: #D7FCFF; --tiffany-gray: #727C7E; --purple-1: #9C87D9; --purple-2: #8952FF; --purple-bg: #F5F3FF; --purple-stroke: #E7E0FB; --purple-gray: #77727E; --red-1: #EE505A; --red-2: #ED313E; --red-3: #FF6B6B; --red-bg: #FDEEEE; --red-stroke: #FACED1; --red-gray: #7E7272; --yellow-1: #FED500; --yellow-2: #FEE600; --yellow-bg: #F9FAE0; --yellow-stroke: #FFF7B1; --yellow-gray: #7E7B72; --pink-1: #DE89CF; --pink-2: #FD7CE5; --pink-bg: #FFF3F9; --pink-stroke: #F6CEFA; --pink-gray: #7E727B; --bonus-1: #EE505A; --bonus-2: #FF592A; --bonus-bg: #FDF3EE; --bonus-stroke: #FACED1; --bonus-gray: #7E7572; --brown-1: #98654F; --brown-2: #AA7762; --plum: #58244B; --lavender-1: #5D5FEF; --lavender-2: #A5A6F6; /* ── Типографика ─────────────────────────────────────────── */ /* Одна гарнитура на всё — Exo 2, как в UI-kit заказчика (файл 3GVCb013ADpnQ2JCbJ7U7G, таблица «Typography tokens»): все текстовые стили кита набраны ею, от бейджа 10/12 до Body M 14/20. Manrope, стоявший здесь до 6 сентября, был подобран по скриншотам портала, а не по киту, и рядом с макетами кита читался как чужой продукт. Табличные цифры включены на уровне body — для денежных колонок это обязательно. */ --font-display: "Exo 2", system-ui, -apple-system, sans-serif; --font-text: "Exo 2", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --radius: 10px; --radius-sm: 8px; /* ── Текстовые оттенки семейств ────────────────────────────────────── В палитре кита нет ни одного синего, зелёного или оранжевого, который давал бы 4,5:1 на светлых подложках (blue_1 на белом — 2,9:1, green_1 — 2,8:1, orange_2 — 2,3:1; посчитано, а не прикинуто). Кит красит ими заливки, обводки и иконки, и там это законно. Но текст тем же цветом — активный пункт меню, ссылка, цифра в бейдже — часть людей не прочтёт. Ниже — те же тона, затемнённые ровно до 4,6:1 на самой тёмной светлой подложке кита (gray_bg_2); на белом они дают 5,3:1. Имена — по семейству кита с суффиксом `_text`, по образцу `blue_gray`. Использовать ТОЛЬКО для текста и заливки под белый текст; заливки, обводки и точки берут основные краски семейства. */ --blue-text: #0069D4; --green-text: #007C1F; --orange-text: #9D5B0E; --red-text: var(--critical-2); } /* ── Слой 2. Семантика ───────────────────────────────────────── Компоненты (`ui.css`) и разметка ссылаются ТОЛЬКО на переменные этого слоя. Палитра выше — краски, здесь — роли. Разделение нужно ровно за тем, чтобы перекрасить арендатора можно было одним значением `--brand`, а не поиском по экранам. Литерал цвета в шаблоне ломает white-label молча: он не выдаёт себя ни ошибкой, ни падением теста — просто у второго клиента часть интерфейса остаётся в цветах первого. Визуальный язык — UI-kit заказчика (Figma 3GVCb013ADpnQ2JCbJ7U7G, доска «Компоненты · Sidebar» и таблица «Color tokens»): холст `gray_bg_1`, белые карточки с обводкой `stroke` и радиусом 10, светлый двухуровневый сайдбар, синий акцент навигации (`blue_1` — активный пункт, счётчики, ссылки, фокус), тёмная стандартная кнопка (`dark` → `dark_hover`), зелёная — только для главного действия панели инструментов, красные бейджи «требует внимания». Роли ниже названы по ролям кита. */ :root { /* Акцент арендатора. Умолчание — мятный из кита. Перекрывается атрибутом `data-accent` на (набор ниже) и, с наивысшим приоритетом, цветом из `tenant_branding.primary_color`, который base.html подставляет инлайновым `style` — это единственное место во всём интерфейсе, где цвет приходит из данных. */ --brand: var(--mint-1); --brand-2: var(--mint-2); --brand-bg: var(--mint-bg); --brand-stroke: var(--mint-stroke); /* Текст — три ступени кита: Text/Primary `dark`, Text/Secondary `gray_2`, Text/Tertiary `gray_3`. Вторая ступень (#898989 на белом ≈ 3.5:1) в ките подписывает и placeholder, и подписи; третья — только приглушённый текст 12px и крупнее, который дублирует то, что и так есть в строке. */ --ink: var(--dark); /* Вторичный текст. В ките это gray_2 (#898989), но на белом он даёт 3,5:1, на голубой подложке — 3,2:1, и подписи под настройками читались плохо (замечание Данила 7 сентября). Здесь — затемнённый нейтральный серый того же тона: 5,3:1 на белом, 4,9:1 на blue_bg. gray_2 остаётся для плейсхолдеров и отключённого через --ink-3/--gray-2 напрямую. */ --ink-2: #66666C; /* Третья ступень — тоже текст, и правило то же: 4,5:1 везде, где он стоит. gray_3 кита (#BDBDBD) на белом даёт 1,9:1 — это цвет для плейсхолдера и выключенного, а не для подписи под суммой. Ступень отличается от второй на тон: иерархию несут кегль и вес, не серость. */ --ink-3: #6B6B71; /* Плейсхолдер и выключенное — единственный текст, которому кит и WCAG разрешают серое: gray_2 в поле ввода, gray_3 у выключенной кнопки. */ --placeholder: var(--gray-2); --disabled-ink: var(--gray-3); /* Приглушённая иконка: не текст, 3:1 достаточно. */ --icon-mute: var(--gray-3); /* Акцент интерфейса — синий кита, независимо от бренда арендатора: Accent/Primary красит активные вкладки и пункты меню, счётчики, ссылки, индикаторы и фокус; Accent/Bg-Soft — фон активного пункта; Bg-Hover — его hover. Бренд арендатора (`--brand`) остаётся у логотипа и подложек аватаров: если красить им и навигацию, у компании с красным брендом каждый активный пункт меню читался бы как ошибка. */ --accent: var(--blue-1); --accent-hover: var(--blue-2); --accent-bg: var(--blue-bg); --accent-bg-hover: var(--blue-stroke); /* Акцент как ТЕКСТ: подпись активного пункта, ссылка, цифра счётчика на синем. Иконка и точка рядом остаются `blue_1` — так пункт читается и как кит, и как текст. */ --accent-ink: var(--blue-text); --link: var(--blue-text); /* Поверхности. Холст — `gray-bg-1` кита: на нём белые карточки читаются карточками, а не сливаются со страницей, как на чисто белом. */ --ground: var(--gray-bg-1); --card: var(--white); /* Border/Default кита — `stroke`; мягкие разделители и hover-фон — `gray_5`. */ --line: var(--stroke); --line-soft: var(--gray-5); --hover: var(--gray-5); --well: var(--gray-5); /* Сайдбар — светлый, в два столбца, как в портале заказчика. Первый столбец — разделы с иконками, второй — дерево подразделов текущего раздела. Тёмная планка прежней версии спорила с портальными экранами заказчика: у него ни одной тёмной поверхности, кроме кнопки. */ --rail: var(--card); --rail-2: var(--gray-bg-1); --rail-ink: var(--ink); --rail-ink-2: var(--ink-2); /* NavItem кита: hover — `gray_5`, active — `blue_bg` с синим текстом. */ --rail-hover: var(--gray-5); --rail-active: var(--accent-bg); --rail-active-ink: var(--accent-ink); --rail-line: var(--line); --on-brand: var(--white); /* Основная кнопка — чёрная, как «+ Добавить операцию» у заказчика. Акцент остаётся указателем «где я» и «что выбрано», кнопка — «что сделать»: когда обе роли красились одним цветом, глаз не различал их. */ --primary: var(--dark); --primary-hover: var(--dark-hover); --on-primary: var(--white); /* Зелёная кнопка кита — исключение для главного действия панели инструментов («Добавить лид»); всё остальное — стандартная тёмная. */ --cta: var(--green-1); --cta-hover: var(--green-hover); /* Деньги — своя роль. Не «жёлтый», а «сумма»: правило из презентации заказчика, где янтарным красится только денежное. Как только янтарный достаётся чему-то ещё, он перестаёт работать указателем на деньги. */ --money: var(--orange-2); --money-bg: var(--orange-bg); /* Сама сумма набирается тёмным: orange_2 на белом — 2,3:1, и это при кегле 40 не дотягивает даже до 3:1 для крупного текста. В карточке финансов кита баланс тоже тёмный; янтарным остаётся иконка рядом. */ --money-ink: var(--ink); /* Четыре семейства состояний кита: success, problem, error, info. У каждого три роли, как у чипа кита: `-bg` — заливка, основной цвет — обводка, точка и иконка, `-ink` — текст того же тона, дотянутый до 4,5:1. Словарь состояний начисления (ui.css) отображается на эти четыре, а не заводит свои цвета. */ --ok: var(--green-1); --ok-bg: var(--green-bg); --ok-ink: var(--green-text); --wait: var(--orange-1); --wait-bg: var(--orange-bg); --wait-ink: var(--orange-text); --bad: var(--red-1); --bad-bg: var(--red-bg); --bad-ink: var(--red-text); --info: var(--blue-1); --info-bg: var(--blue-bg); --info-ink: var(--blue-text); --mute: var(--gray-5); --mute-line: var(--gray-4); --mute-ink: var(--ink-2); /* Бейджи кита: 16px высоты, радиус 8, SemiBold 10 белым. Заливка — из текстовых оттенков семейств: белые цифры на blue_1 дают 2,9:1, на red_1 — 3,5:1, и счётчик «9» становился пятном. critical_2 — родной цвет кита. */ --hot: var(--critical-2); --badge: var(--blue-text); /* ── Шкала отступов ──────────────────────────────────────── Шаг 4px. Плотность (`data-density`) двигает только --pad-* — расстояния ВНУТРИ карточек и строк таблицы. Шкала --s-* остаётся неподвижной: если сжимать и её, разъезжается сетка, а не только воздух. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; /* Отступ карточки разложен на оси: итоговая строка списка «выезжает» под края карточки отрицательным полем, и оно обязано совпадать с этим значением. Одно число в двух местах разъезжается при смене плотности — разложение убирает саму возможность. */ --pad-card-y: 16px; --pad-card-x: 16px; --pad-card: var(--pad-card-y) var(--pad-card-x); --pad-head: 12px 16px; /* Ячейка таблицы кита: строка 40, чип состояния S внутри неё — 28. Отступ 6 сверху и снизу даёт ровно 40 и для текста в одну строку (высота ячейки держится `--row-h`), и для чипа. */ --pad-cell: 6px 14px; --row-h: 40px; --pad-row: 10px 0; --gap-grid: 12px; /* ── Размеры шрифта ──────────────────────────────────────── Шкала кита («Typography tokens»): Badge 10/12, Caption 11/14, Meta 12/16, Body S 13/20, Body M 14/20 — в rem, чтобы системное увеличение шрифта работало. Основание шкалы задано в `ui.css` на `html` и равно 17px: подписи кита в 13–14 пунктов на настольном экране читались мелко. Пропорции кита при этом не тронуты — двигается только основание. */ --fs-0: 0.714rem; /* 10 — счётчики бейджей */ --fs-1: 0.857rem; /* 12 — meta: подписи, даты */ --fs-2: 0.929rem; /* 13 — Body S: строки таблиц, подпункты, вкладки */ --fs-3: 1rem; /* 14 — Body M: пункты меню, заголовки блоков */ --fs-4: 1.143rem; /* 16 — заголовок экрана */ --fs-5: 1.571rem; /* 22 — главная цифра плитки */ --fs-6: clamp(1.9rem, 4vw, 2.5rem); --lh-tight: 1.15; --lh-body: 1.45; /* ── Радиусы и тени ──────────────────────────────────────── Кит: плашки и карточки — радиус 10, кнопки и пункты меню — 8, поповер — 14. Карточка держится обводкой `stroke`, а не тенью: тень остаётся поповерам и выдвижным панелям. */ --r-1: 8px; --r-2: 10px; --r-3: 10px; --r-4: 10px; --r-btn: 6px; --r-pop: 14px; --r-pill: 999px; /* TabChip кита: и дорожка, и пилюля — радиус 30 (узел 1117:1323). */ --r-chip: 30px; --sh-1: 0 1px 2px rgba(66, 66, 73, 0.04); --sh-2: 0 12px 30px -12px rgba(66, 66, 73, 0.32); /* Тень активной пилюли TabChip — как в ките, с зеленоватым подтоном. */ --sh-chip: 0 5px 5px rgba(73, 106, 72, 0.12); /* Затемнение под выдвижной панелью. 0.42 — не вкус: слабее пятидесяти процентов панель перестаёт читаться как отдельный слой, сильнее — полотно под ней перестаёт узнаваться, и человек теряет, куда вернётся. */ --scrim: rgba(24, 25, 32, 0.42); --rail-w: 232px; --sub-w: 232px; /* Header кита: 48px, белый, с нижней обводкой `stroke`. */ --top-h: 48px; --ease: cubic-bezier(0.22, 0.7, 0.3, 1); } /* ── Плотность ───────────────────────────────────────────────── Настройка арендатора, а не украшение. Финансист, разбирающий очередь начислений, хочет видеть на экране двадцать строк, а не двенадцать; партнёр с телефона — наоборот. Меняются только внутренние отступы. */ [data-density="compact"] { --pad-card-y: 12px; --pad-card-x: 14px; --pad-head: 10px 14px; --pad-cell: 4px 12px; --row-h: 36px; --pad-row: 7px 0; --gap-grid: 10px; } /* ── Семейства акцента ───────────────────────────────────────── Пять семейств кита. Каждое задаёт основной цвет, подложку и обводку вместе: брать акцент из одного семейства, а подложку из другого — верный способ получить бейдж, который не читается. */ [data-accent="mint"] { --brand: var(--mint-1); --brand-2: var(--mint-2); --brand-bg: var(--mint-bg); --brand-stroke: var(--mint-stroke); } [data-accent="green"] { --brand: var(--green-1); --brand-2: var(--green-2); --brand-bg: var(--green-bg); --brand-stroke: var(--green-stroke); } [data-accent="blue"] { --brand: var(--blue-2); --brand-2: var(--blue-1); --brand-bg: var(--blue-bg); --brand-stroke: var(--blue-stroke); } [data-accent="purple"] { --brand: var(--purple-2); --brand-2: var(--purple-1); --brand-bg: var(--purple-bg); --brand-stroke: var(--purple-stroke); } [data-accent="orange"] { --brand: var(--orange-2); --brand-2: var(--orange-1); --brand-bg: var(--orange-bg); --brand-stroke: var(--orange-stroke); }