/* ============================================================================ mp-fulfillment · tokens.css Единственный источник значений для всего интерфейса. Ред. 1, 16.08.2026. Числа контраста в комментариях ниже подставлены из вывода `python tools/check_design_system.py .` (ред. 17.08.2026), а не набраны по памяти. Меняете значение — прогоняете скрипт и переписываете число. ПРАВИЛА, КОТОРЫЕ НЕЛЬЗЯ НАРУШАТЬ: 1. В шаблонах и компонентах не встречается ни одного литерального цвета, размера шрифта, отступа, радиуса или тени — только var(--mp-*). Ширины и высоты раскладки (width, max-width, top/left, flex-basis) — исключение: это одноразовые ограничения макета, не шкала. 2. n-400 (#9aa2ac) — декоративные разделители и заливки без смысла. Не текст и не рамка интерактивного элемента (2.58:1 на белом). 3. Вторичный текст: на белом --mp-text-muted, на тонированных подложках (n-50, n-100) --mp-text-secondary. На тёмных поверхностях шкала инвертируется: --mp-text-inverse / --mp-text-inverse-muted. 4. Цвет никогда не единственный носитель смысла: любое кодирование дублируется иконкой, буквой, подписью или формой. 5. Тёмная тема добавляется переопределением этих переменных в [data-theme="dark"], без правки компонентов. ========================================================================= */ :root { /* --- нейтральная шкала, 9 ступеней ------------------------------------ */ --mp-n-0: #ffffff; --mp-n-50: #f7f8f9; --mp-n-100: #eef0f2; --mp-n-200: #e2e5e9; --mp-n-300: #cbd0d6; --mp-n-400: #9aa2ac; --mp-n-500: #6b7480; --mp-n-600: #5a626c; --mp-n-700: #4c545e; --mp-n-900: #1c2126; /* --- текст ------------------------------------------------------------- */ --mp-text: var(--mp-n-900); /* основной, 16.22:1 на белом */ --mp-text-secondary: var(--mp-n-700); /* n-50 7.22:1, n-100 6.72:1 */ --mp-text-muted: var(--mp-n-500); /* только на чистом белом, 4.74:1 */ --mp-text-inverse: var(--mp-n-100); --mp-text-inverse-muted: var(--mp-n-400); --mp-text-link: #1e4fa3; --mp-text-link-hover: #16386f; /* --- поверхности ------------------------------------------------------- */ --mp-surface: var(--mp-n-0); --mp-surface-sunken: var(--mp-n-50); --mp-surface-app: var(--mp-n-100); --mp-surface-dark: var(--mp-n-900); --mp-surface-dark-raised: #333a42; --mp-surface-dark-danger: #3d1f1d; /* опасное действие на тёмной поверхности: рамка 3.35:1 к --mp-surface-dark, текст 8.70:1 к своей заливке. Без этих двух токенов тёмная шапка и панель массовых действий держали литералы. */ --mp-dark-danger-border: #b85248; --mp-dark-danger-text: #ffb3ab; --mp-surface-system-row: #fbfcfc; /* строка журнала от системы */ --mp-overlay: rgba(28, 33, 38, .45); /* подложка просмотрщика фотографий: фотография с площадки приходит на любом фоне, и при .45 белый товар на белом фоне сливается с экраном. */ --mp-overlay-strong: rgba(28, 33, 38, .92); --mp-surface-impersonate: #4a2d78; /* админ в контексте продавца */ /* --- границы ----------------------------------------------------------- */ --mp-border-width: 1px; --mp-border: var(--mp-n-200); /* разделители */ --mp-border-strong: var(--mp-n-300); /* рамка неинтерактивной рамки */ --mp-border-control: var(--mp-n-500); /* чекбоксы, радио, поля, кнопки */ --mp-border-dark: #4c545e; /* --- семантические роли: фон / текст / граница ------------------------- */ --mp-success-bg: #e8f5ec; --mp-success-text: #1c6b3a; --mp-success-border: #b7dfc4; --mp-success-solid: #1c6b3a; --mp-success-surface: #f6fbf8; /* едва тонированная, текст 6.25:1 */ --mp-warning-bg: #fdf3e0; --mp-warning-text: #7a4d06; --mp-warning-border: #f0d79a; --mp-warning-surface: #fffdf7; --mp-danger-bg: #fdeceb; --mp-danger-text: #a3251c; --mp-danger-border: #f3bfba; --mp-danger-solid: #a3251c; --mp-danger-surface: #fef7f6; --mp-info-bg: #e9f0fd; --mp-info-text: #1e4fa3; --mp-info-border: #bcd0f5; --mp-info-solid: #1e4fa3; --mp-muted-bg: var(--mp-n-100); --mp-muted-text: var(--mp-n-600); --mp-muted-border: #d8dce1; /* void — отменено, аннулировано */ --mp-void-bg: var(--mp-n-50); --mp-void-text: var(--mp-n-600); --mp-void-border: var(--mp-n-200); /* overdue — просроченный срок отгрузки. НЕ переиспользовать danger: danger = сломано и само не починится, overdue = рабочая срочность. */ --mp-overdue-bg: #fdeaf1; --mp-overdue-text: #9d1050; --mp-overdue-border: #f3bcd0; --mp-overdue-stripe: #d4145a; /* --- срочность (второе цветовое измерение) ----------------------------- */ /* тёмный янтарь: 4.51:1 на белом, 4.25:1 на n-50 — проходит и десктопную норму 3:1 для смысловых элементов, и мобильную 4.5:1 (§5.4). Светлее брать нельзя: прежний #e0a915 давал 2.13:1, полосу «скоро» на солнце было не видно вообще. */ --mp-urgency-soon: #9a6f08; --mp-urgency-soon-text: var(--mp-warning-text); --mp-urgency-overdue: var(--mp-overdue-stripe); --mp-urgency-stripe-width: 3px; --mp-urgency-soon-hours: 4; /* настройка продавца, см. §3.3 */ /* --- оборачиваемость (третье измерение) -------------------------------- */ --mp-turnover-green: #1c6b3a; --mp-turnover-grey: var(--mp-n-500); --mp-turnover-red: #a3251c; --mp-turnover-dot: 18px; /* буква внутри — не меньше 11px */ /* --- маркировка «Честный знак» ----------------------------------------- */ --mp-marking-bg: #f4ecfb; --mp-marking-text: #5b2a8f; --mp-marking-border: #ddc7f0; /* --- марки площадок: только значок размером с иконку ------------------- */ --mp-ozon: #005bff; --mp-ozon-ink: var(--mp-n-0); /* 5.33:1 */ --mp-wb: #cb11ab; --mp-wb-ink: var(--mp-n-0); /* 4.99:1 */ --mp-ym: #fc3f1d; --mp-ym-ink: var(--mp-n-900); /* 4.53:1; белая дала бы 3.58:1 */ --mp-mark-size: 20px; --mp-mark-size-lg: 28px; /* --- типографика ------------------------------------------------------- */ --mp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Arial, sans-serif; --mp-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* десктоп, плотный набор */ --mp-fs-1: 11px; --mp-lh-1: 14px; /* шапка таблицы, микроподписи */ --mp-fs-2: 12px; --mp-lh-2: 16px; /* вторичный текст, подписи полей */ --mp-fs-3: 13px; --mp-lh-3: 18px; /* основной текст, строки таблиц */ --mp-fs-4: 15px; --mp-lh-4: 20px; /* заголовок блока */ --mp-fs-5: 20px; --mp-lh-5: 24px; /* заголовок раздела */ --mp-fs-6: 26px; --mp-lh-6: 30px; /* заголовок страницы, число скоринга */ /* мобильный набор (склад). Поля ввода — не меньше 16px, иначе iOS зумит */ --mp-m-fs-1: 14px; --mp-m-lh-1: 20px; --mp-m-fs-2: 16px; --mp-m-lh-2: 22px; --mp-m-fs-3: 18px; --mp-m-lh-3: 24px; --mp-m-fs-4: 22px; --mp-m-lh-4: 28px; --mp-m-fs-5: 32px; --mp-m-lh-5: 36px; /* счётчик сессии */ --mp-m-fs-6: 44px; --mp-m-lh-6: 48px; /* код ячейки — крупнейший элемент */ /* Мобильные экраны: контраст ужесточён (§5.4 — солнце из ворот, тень между стеллажами). Основной текст ≥ 7:1, статусные элементы ≥ 4.5:1. Поэтому вторичный текст на складе — n-700 (7.67:1 на белом, 7.22:1 на n-50) и только на этих двух поверхностях; n-500 (4.74:1) в мобильном интерфейсе не применяется вообще. */ --mp-m-text: var(--mp-n-900); --mp-m-text-secondary: var(--mp-n-700); --mp-m-surface: var(--mp-n-0); --mp-m-surface-sunken: var(--mp-n-50); /* --- обратная связь сканера (§5.2): звук и вибрация -------------------- Значения читает клиентский слой (data-атрибуты партиалов), поэтому они живут здесь, а не в JS: одно место правки для всей обратной связи. */ --mp-buzz-ok: 30ms; /* успешный скан */ --mp-buzz-hold: 30ms 60ms 30ms; /* единица отложена, двойная */ --mp-buzz-position: 60ms; /* позиция завершена */ --mp-buzz-session: 40ms 60ms 40ms 60ms 90ms; /* сессия завершена, тройная */ --mp-buzz-offline: 400ms; /* потеря связи */ --mp-recognize-hint: 220ms; /* порог показа «распознаю» */ --mp-weight-normal: 400; --mp-weight-medium: 600; --mp-weight-bold: 700; /* --- пространство, кратно 4 ------------------------------------------- */ /* три подступени ниже 4px существуют потому, что бейджу, чипу и клавише 4px по вертикали много: строка таблицы 32px их не вмещает. Больше подступеней не добавлять — остальное округляется до кратного 4. */ --mp-sp-hair: 1px; --mp-sp-quarter: 2px; --mp-sp-1: 4px; --mp-sp-1h: 6px; --mp-sp-2: 8px; --mp-sp-3: 12px; --mp-sp-4: 16px; --mp-sp-5: 24px; --mp-sp-6: 32px; --mp-sp-7: 48px; /* --- размеры ----------------------------------------------------------- */ --mp-row-h: 32px; /* плотность по умолчанию */ /* ВТОРАЯ ПЛОТНОСТЬ. Область применения закрыта списком, за его пределами класс .mp-table--dense не ставится: — список заказов (все роли); — список остатков и товаров. То есть экраны, где смысл работы в объёме выборки: сравнить, отфильтровать, выбрать пачку и выполнить массовое действие. Везде, где по строке работают поштучно (карточка заказа, коды маркировки, склейка, приёмка, инвентаризация, матрица прав) — 32px, потому что там цена промаха выше цены прокрутки. 24px, а не 22: при 22px зона попадания чекбокса выходила 32×22, короткая сторона меньше 24px (WCAG 2.2 «Target Size (Minimum)»). Ячейка выбора кликабельна целиком — .mp-cell-check. */ --mp-row-h-dense: 24px; --mp-control-h: 32px; --mp-header-h: 48px; --mp-nav-w: 200px; --mp-nav-w-collapsed: 52px; --mp-touch: 48px; /* мобильный тач-таргет */ --mp-touch-gap: var(--mp-sp-2); --mp-touch-gap-destructive: var(--mp-sp-4); /* --- радиусы, тени, границы -------------------------------------------- */ --mp-radius-xs: 2px; /* чекбокс, клавиша, подсветка */ --mp-radius-sm: 3px; /* контролы, бейджи */ --mp-radius-pill: 999px; /* счётчик в фильтре */ --mp-radius-phone: 28px; /* рамка телефона в превью */ --mp-border-width-focus: 2px; --mp-border-width-mark: 1.5px; /* обводка значка-ошибки на марке */ --mp-radius-md: 6px; /* карточки, всплывающие слои */ --mp-shadow-card: 0 1px 2px rgba(28, 33, 38, .08); --mp-shadow-overlay: 0 8px 24px rgba(28, 33, 38, .16); --mp-focus-ring: 0 0 0 3px rgba(30, 79, 163, .25); /* --- анимация: только смена состояния ---------------------------------- */ --mp-motion: 150ms; --mp-easing: ease-out; } /* Мобильный интерфейс склада: анимации отключены полностью — экономят кадры на слабых устройствах и не задерживают следующий скан. */ @media (max-width: 700px) { :root { --mp-motion: 0ms; } } @media (prefers-reduced-motion: reduce) { :root { --mp-motion: 0ms; } }