/* 🔴 ЭТО КОПИЯ. Правится НЕ здесь. Источник: Knowledge/anima/factory-os/design/tokens.css — дизайн-система «ОС фабрики Anima», принята владельцем 26.08.2026. Правка в этой копии разойдётся с источником молча: витрина системы и кабинет начнут показывать разные величины, и никто этого не заметит до следующего разбора. Меняешь величину — меняешь её в источнике и переносишь копию целиком. Отличие копии от источника ровно одно — эта шапка. Пути к шрифтам не менялись и не должны: `fonts/…` рядом с этим файлом, то есть /static/fonts/… — ровно там, где кабинет их и отдаёт. Скопировано: 01.09.2026, слой токенов. ========================================================================== */ /* ========================================================================== ОС фабрики Anima — дизайн-токены Внутреннее рабочее ПО швейно-печатной фабрики: 26 экранов, 5 ролей. -------------------------------------------------------------------------- Единственный источник истины по шрифтам, цвету, типографике, отступам, радиусам, рамкам, теням и движению. Компоненты (ui.css) сырых значений не содержат — только ссылки на переменные отсюда. Архитектура: primitive → semantic → component. primitive — сырой цвет и число, в разметке напрямую не используются; semantic — роль («фон страницы», «граница интерактивного»); component — размер контрола, высота строки, ширина колонки. Тема одна — светлая рабочая. Не тёмная, и это решение владельца от 26.08.2026: менеджер сидит в таблицах себестоимости весь день, начальник производства смотрит с планшета в цеху при дневном свете, расчёты печатают на обычном ч/б принтере. Фирменный стиль Anima (тёмная тема, маджента, неоновый градиент) в ПО НЕ применяется: это инструмент, а не витрина бренда. Единственный мостик к бренду — бордовое лого в шапке кабинета. Плотность: рабочая по умолчанию. Экран цеха включается атрибутом data-scene="floor" на любом контейнере: контролы вырастают под палец, набор — под взгляд с вытянутой руки. ========================================================================== */ /* ========================================================================== 0. ШРИФТЫ — файлами, рядом с кабинетом Кабинет живёт за VPN-замком: ни CDN, ни Google Fonts по сети не доступны. Оба семейства лежат в fonts/ и подключаются относительным путём. Golos Text (Paratype, SIL OFL) — интерфейсный гротеск, нарисованный от кириллицы, а не приделанный к ней. Взят вместо системного стека по двум причинам: системный на Маке, планшете и офисном Windows — три разные гарнитуры с разной шириной знака, и таблица себестоимости переносится по-разному на каждой машине; плюс Inter/Roboto/Arial и Space Grotesk у нас в чёрном списке как метка машинной вёрстки. JetBrains Mono (SIL OFL) — только цифры: колонки денег, расхода, плотности. Моноширинность здесь не костюм «под технику», а требование: в столбце цен разряды обязаны стоять друг под другом. Оба файла — переменные (одна кривая на все насыщенности), подмножества latin + latin-ext + cyrillic. Знак рубля ₽ (U+20BD) живёт в latin-ext, № (U+2116) — в cyrillic; проверено рендером, оба на месте. ========================================================================== */ /* --- Golos Text: переменная 400–900 ---------------------------------------- */ @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: block; src: url("fonts/golos-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: block; src: url("fonts/golos-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: block; src: url("fonts/golos-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: block; src: url("fonts/golos-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --- JetBrains Mono: переменная, только под числа -------------------------- */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: block; src: url("fonts/jetbrains-mono-400-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: block; src: url("fonts/jetbrains-mono-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: block; src: url("fonts/jetbrains-mono-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --- Подогнанный системный запасной --------------------------------------- Пока грузится файл, строку рисует системный шрифт. Без подгонки таблица «прыгает» при подмене: у Roboto, Arial и Segoe UI разная ширина знака и разные вертикальные метрики. Числа — по средней ширине знака на русско-латинской выборке; они не подобраны на глаз. */ @font-face { /* Windows, рабочие места менеджеров */ font-family: "Golos Fallback Segoe"; src: local("Segoe UI"), local("SegoeUI"); size-adjust: 104.5%; ascent-override: 92.4%; descent-override: 22.6%; line-gap-override: 0%; } @font-face { /* Android-планшет цеха */ font-family: "Golos Fallback Roboto"; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 103.8%; ascent-override: 93.3%; descent-override: 23.2%; line-gap-override: 0%; } @font-face { /* macOS, iPad */ font-family: "Golos Fallback Helvetica"; src: local("Helvetica Neue"), local("Helvetica"), local("Arial"); size-adjust: 104.1%; ascent-override: 93.0%; descent-override: 23.1%; line-gap-override: 0%; } /* ========================================================================== 1. PRIMITIVE — сырые значения. В компонентах напрямую не используются. ========================================================================== */ :root { /* --- Сине-стальная лестница ------------------------------------------- Взята из кабинета как есть: #2D4A6B (шапка) и #4A7BA4 (кнопки, шапки таблиц) — решение владельца, не наш выбор. Достроены две ступени сверху и три снизу, чтобы у кнопки были наведение и нажатие, а у стадии заказа — лестница «чем дальше по пути, тем плотнее заливка». 🔴 Рабочий синий притемнён: #4A7BA4 → #43749B. Прежний давал с белым текстом ровно 4,51:1 при норме 4,50 — запас в одну сотую. Кнопку «Считать КП» жмут в цеху с планшета при бликах и под углом, и такой запас там не запас вовсе. Стало 4,99:1. Ступень наведения (#3D688C, 5,90:1) осталась на месте: между заливками 1,18:1 — наведение видно. 🔴 Синим ТЕКСТОМ этот цвет не бывает ни в каком виде: он живёт только заливкой под белым текстом. Всё, что синее и является текстом, берёт --steel-800. 🔴 В стадиях заказа от лестницы осталось ДВЕ ступени: бледная (--steel-100, «Расчёт») и глубокая (--steel-800, «В работе»). Четыре стальные ступени подряд не работали: соседние пары давали 1,42:1 и 2,02:1 при норме развода 3:1 — колонка стадий читалась одним синим пятном. Ступень #1E3348 удалена вместе с этой лестницей: ступень без роли системе не нужна. */ --steel-800: #2D4A6B; /* шапка кабинета, синий текст, стадия «В работе» 9,12:1 с белым */ --steel-700: #34597A; /* нажатие основной кнопки, кромка под шапкой таблицы 7,35:1 */ --steel-600: #3D688C; /* шапка таблицы данных, наведение кнопки 5,90:1 с белым */ --steel-500: #43749B; /* заливка основной кнопки 4,99:1 с белым */ --steel-400: #6689AC; /* рамка стального чипа 3,66:1 к белому листу */ --steel-200: #CBDCEA; /* заливка ТЕКУЩЕГО этапа образца — 6,50:1 с --steel-800. Ступень стояла без роли, а система своё же правило велит соблюдать: без роли — удалять. Роль нашлась, когда у текущего этапа сняли рамку в два пикселя: на steel-100 он терялся рядом с зелёными пройденными, а именно он и есть ответ на вопрос «где мы сейчас». */ --steel-100: #E3EEF8; /* выбранная строка, стадия «Расчёт» */ --steel-050: #EDF4FC; /* изменённая строка */ /* --- Нейтральная холодная шкала --------------------------------------- Холодная, а не тёплая: рядом со сталью тёплый серый желтит. Каждая ступень занята ровно одной ролью, лишних нет. */ --ink-950: #1A1A1A; /* основной текст 17,40:1 к белому */ --ink-700: #3D4753; /* текст на плашке, вторая ступень 9,44:1 к белому */ --ink-600: #586471; /* приглушённый текст 6,04:1 бел · 5,48:1 фон · 5,39:1 зебра */ --ink-500: #5F6E7C; /* выключенный контрол — см. пояснение ниже */ --ink-400: #7B8894; /* граница ИНТЕРАКТИВНОГО 3,63:1 бел · 3,29:1 фон */ --ink-300: #C4CCD4; /* кромка блока: карточка, таблица · заливка стадии «КП у клиента» */ --ink-200: #DFE3E8; /* разделитель внутри блока */ --ink-100: #E7EBF0; /* заливка выключенного, дорожка ползунка, строка под курсором, заливка стадии «КП готово» */ --ink-080: #EDF1F6; /* шапка «ключ-значение», утопленная область */ --ink-050: #F2F4F7; /* фон страницы */ --ink-030: #F0F2F5; /* зебра — только в СПРАВОЧНОЙ таблице без состояний строки. Было #F7F9FB — 1,06:1 к белому, на грани восприятия. */ --white: #FFFFFF; /* --- Функциональные. Только в статусах, полосах и метках. -------------- Все четыре взяты из кабинета и не тронуты: они уже согласованы с цветами, которыми kp_calc красит выгрузки в Excel, а расчёт печатают и сверяют с экраном. */ --red-700: #B8290E; /* ошибка, отказ, дыра цены 6,25:1 к белому */ --red-600: #96210C; /* наведение опасной кнопки */ --red-400: #C4614C; /* рамка красного чипа 4,07:1 к белому */ --red-100: #FDEEEA; /* подложка ошибки */ --red-050: #FFF4F1; /* строка-дыра в таблице */ --green-700: #1D6F42; /* успех, «выполнено», «подтверждено» 6,17:1 к белому */ --green-400: #489770; /* рамка зелёного чипа 3,54:1 к белому */ --green-100: #E8F5EC; /* подложка успеха */ --amber-800: #8A5D10; /* предупреждение, догадка движка 5,75:1 к белому */ --amber-400: #A07E2A; /* рамка янтарного чипа 3,81:1 к белому */ --amber-100: #FDF1DC; /* подложка предупреждения */ --amber-050: #FDF6E7; /* полоса режима исключительной правки */ --link-700: #0563C1; /* ссылка 5,90:1 к белому */ /* --- Мостик к бренду --------------------------------------------------- Бордовый Anima. Живёт ровно в одном месте — знак в шапке кабинета. Ни кнопкой, ни статусом, ни подсветкой не бывает: рядом с красным «ошибка» второй красный смысла не несёт, а путает. */ --anima-crimson: #9C1833; } /* ========================================================================== 2. SEMANTIC — этим слоем пользуются компоненты. ========================================================================== */ :root { /* --- Поверхности --- */ --bg-page: var(--ink-050); /* фон страницы */ --bg-surface: var(--white); /* карточка, панель, поле ввода */ --bg-subtle: var(--ink-030); /* зебра справочной таблицы (.tbl--zebra) */ --bg-inset: var(--ink-080); /* шапка «ключ-значение», утопленное */ --bg-muted: var(--ink-100); /* выключенный контрол, дорожка */ --bg-header: var(--steel-800); /* шапка кабинета */ --bg-thead: var(--steel-600); /* шапка таблицы данных — 5,90:1 с белым. Было --steel-500 (4,51:1, нулевой запас), а шапку разглядывают под углом чаще всего. Заливка КНОПКИ при этом осталась #4A7BA4. */ /* Строка под курсором. Серая, а не голубая: голубые оттенки в таблице заняты состояниями («изменена» --steel-050, «выбрана» --steel-100), и подсветка ими сообщала бы состояние, которого нет. */ --row-hover: var(--ink-100); /* 1,20:1 к белому листу */ /* --- Текст --- Четыре ступени. Три первые держат норму 4,5:1 на всех трёх светлых подложках. Четвёртая — выключенное состояние: 4,38:1 на своей серой заливке, чуть ниже нормы, и это осознанно. Норма контраста к выключенным контролам не применяется, но человек обязан прочитать, чего от него хотят: провалить надпись до нечитаемой — не «честно показать недоступность», а спрятать смысл. */ --fg-primary: var(--ink-950); --fg-secondary: var(--ink-700); --fg-muted: var(--ink-600); --fg-disabled: var(--ink-500); --fg-on-accent: var(--white); --fg-on-header: #DCE6F2; /* пункт меню в шапке 7,23:1 */ --fg-on-header-quiet: #B8C9DD; /* имя пользователя в шапке 5,40:1 */ --fg-link: var(--link-700); /* --- Границы --- Разведены по роли, а не по вкусу. Путать их — главная причина, по которой плотная панель выглядит «нарисованной наспех». hair — волосяная линия между строками ВНУТРИ блока; default — кромка самого блока: карточки, таблицы, полосы вкладок; strong — граница ИНТЕРАКТИВНОГО: поле, обычная кнопка, чип, ячейка правки. По ней человек понимает, что на это можно нажать, поэтому она обязана давать не меньше 3:1 к подложке (3,63:1 на белом, 3,29:1 на фоне страницы). Прежняя #c4ccd4 давала 1,62:1 — рамка поля была видна только потому, что рядом стоял белый прямоугольник. */ --border-hair: var(--ink-200); --border-default: var(--ink-300); --border-strong: var(--ink-400); --border-strong-hover: var(--ink-600); /* --- Акцент --- */ --accent: var(--steel-500); --accent-hover: var(--steel-600); --accent-pressed: var(--steel-700); --accent-text: var(--steel-800); /* синий ТЕКСТОМ — только эта ступень */ --accent-tint: var(--steel-100); --accent-tint-soft: var(--steel-050); --accent-border: var(--steel-400); /* --- Статусы --- */ --danger-fg: var(--red-700); --danger-bg: var(--red-100); --danger-border: var(--red-400); --danger-row: var(--red-050); --danger-hover: var(--red-600); --success-fg: var(--green-700); --success-bg: var(--green-100); --success-border: var(--green-400); --warning-fg: var(--amber-800); --warning-bg: var(--amber-100); --warning-border: var(--amber-400); --warning-soft: var(--amber-050); --info-fg: var(--steel-800); --info-bg: var(--steel-100); --info-border: var(--steel-400); /* --- Тихие заливки стадий ---------------------------------------------- 🔴 Метка состояния держится на заливке, знаке и слове — рамки у неё нет: сплошная рамка в системе означает «нажимается». До этого «КП готово» и «КП у клиента» были белыми и различались только рамкой, причём вторая была толще и темнее рамки настоящей кнопки: в одной строке списка неподвижная метка выглядела крепче кнопки рядом. Раз рамки нет, двум тихим стадиям нужна собственная заливка. Красок в них не добавляли — взяты две ступени нейтрального серого: stage-quiet #E7EBF0 «КП готово» — документ лежит у нас stage-waiting #C4CCD4 «КП у клиента» — ушёл, ждём ответа Между собой 1,36:1 (было 1,00:1 — обе белые). Числом больше не вытянуть: WCAG меряет только яркость, а все бледные заливки набора сидят в полосе 1,0–1,6 к листу — бледная зелень против бледного красного даёт 1,01:1 и при этом путать их никому не приходит в голову. Поэтому тихую пару разводят знак (■ против ↗), слово и насыщенность набора, а тон — четвёртым слоем. «КП у клиента» получила ступень плотнее не по прихоти: это стадия, которую менеджер каждое утро ищет глазами, и рядом с ней стои́т янтарная тревога «14 дн. без движения». */ --stage-quiet: var(--ink-100); --stage-waiting: var(--ink-300); /* --- Бумага ------------------------------------------------------------ Отдельный набор, а не цвета экрана. Причина простая: в Chrome «Фоновая графика» по умолчанию ВЫКЛЮЧЕНА, и любая заливка на печать не идёт. Значит на бумаге всё держится на чёрном по белому, на рамке и на знаке; экранные оттенки сюда переносить нельзя. Единственная заливка, которую печать всё же просят напечатать, — шапка таблицы: без неё непонятно, где кончаются названия колонок. */ --print-fg: #000; /* текст на бумаге */ --print-bg: #fff; /* лист */ --print-muted: #333; /* служебная пометка — не бледнее нормы */ --print-rule: #999; /* кромка карточки, линейка колонтитула */ --print-border: #444; /* рамка чипа: стадия, метка, этап */ --print-thead: #E7EBF0; /* заливка шапки таблицы */ } /* ========================================================================== 3. ТИПОГРАФИКА Одно семейство на весь кабинет. Пары «заголовочный + текстовый» тут не нужно: рабочему инструменту нужна не выразительность, а одинаковость от экрана к экрану. Второе семейство — моноширинное — включается только на числах. Шкала фиксированная в rem, не текучая: кабинет смотрят на постоянном разрешении, а текучий заголовок в узкой колонке выглядит хуже, а не лучше. Шаг между ступенями ~1,15–1,2: элементов много, крупный шаг превратил бы страницу в лестницу. 🔴 Пол по кеглю. Основной текст не мельче 14px, служебное не мельче 12px, мельче 12px в системе не бывает ничего. Плотность берём сеткой и отступами, а не уменьшением набора: «перегруз и мелкий текст» — прямая причина возврата работы. ========================================================================== */ :root { --font-sans: "Golos Text", "Golos Fallback Segoe", "Golos Fallback Roboto", "Golos Fallback Helvetica", "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; /* размер / межстрочный / насыщенность / трекинг */ --t-h1-size: 1.375rem; /* 22 — заголовок страницы */ --t-h1-lh: 1.2; --t-h1-weight: 700; --t-h1-tracking: -0.02em; --t-h2-size: 1.125rem; /* 18 — заголовок карточки */ --t-h2-lh: 1.25; --t-h2-weight: 700; --t-h2-tracking: -0.015em; --t-h3-size: 0.9375rem; /* 15 — подзаголовок внутри карточки */ --t-h3-lh: 1.3; --t-h3-weight: 700; --t-h3-tracking: -0.005em; --t-body-size: 0.9375rem; /* 15 — основной текст и все поля ввода */ --t-body-lh: 1.5; --t-body-weight: 400; --t-dense-size: 0.875rem; /* 14 — таблицы, плотные списки, чипы */ --t-dense-lh: 1.4; --t-cap-size: 0.8125rem; /* 13 — подпись под полем, «на что влияет» */ --t-cap-lh: 1.4; --t-label-size: 0.75rem; /* 12 — рубрика группы полей, счётчик, дата этапа. Единственное, что мельче 13, и только прописными с разрядкой. Это НЕ надзаголовок ради красоты: рубрика обязана называть группу, иначе её нет. Рубрику читают один раз, взглядом сверху вниз, — а не весь день. */ --t-label-lh: 1.3; --t-label-weight: 700; --t-label-tracking: 0.06em; /* 🔴 Шапка таблицы вынесена из --t-label в свою ступень. Была 12 px прописными с разрядкой 0,06em — русская капитель в двенадцати пикселях самое трудное, что есть на экране: в кириллице у прописных нет ни выносных, ни разного роста, слово превращается в частокол одинаковых прямоугольников, и опознаётся оно по длине, а не по рисунку. Рубрику формы так набрать можно — её читают один раз. Шапку таблицы себестоимости менеджер держит перед глазами весь рабочий день. Снята капитель, а не поднят кегль до 13: капитель здесь стоила дороже кегля, а прописные в кириллице ещё и на четверть шире строчных — «ИСТОЧНИК ЦЕНЫ» отъедал ширину у самой колонки. Кегль всё же поднят до 13 заодно, разрядка убрана до волосяной. */ --t-thead-size: 0.8125rem; /* 13 — название колонки в шапке таблицы */ --t-thead-lh: 1.3; --t-thead-weight: 700; --t-thead-tracking: 0.01em; --t-btn-size: 0.9375rem; /* 15 */ --t-btn-lh: 1; --t-btn-weight: 600; --t-btn-tracking: 0; --t-num-size: 0.875rem; /* 14 — число в таблице */ --t-money-size: 1.25rem; /* 20 — итоговая сумма */ --t-money-weight: 700; --t-money-tracking: -0.02em; } /* --- Экран цеха ------------------------------------------------------------ Планшет на стеллаже, взгляд с вытянутой руки, руки заняты. Набор растёт, контролы становятся кнопками под палец. Токены те же, значения другие. */ [data-scene="floor"] { --t-body-size: 1.0625rem; /* 17 */ --t-dense-size: 1rem; /* 16 */ --t-cap-size: 0.875rem; /* 14 */ --t-h1-size: 1.625rem; /* 26 */ --t-h2-size: 1.25rem; /* 20 */ --t-btn-size: 1.0625rem; /* 17 */ --t-label-size: 0.875rem; /* 14 — 🔴 растёт вместе со всеми. Пропустив эту ступень, экран цеха получал даты этапов в 12 px: самый мелкий набор системы стоял на единственном экране, который смотрят с вытянутой руки. */ --t-thead-size: 0.9375rem; /* 15 — шапка таблицы, тоже с вытянутой руки */ --control-h: var(--control-h-floor); --control-h-sm: 48px; --row-h: 52px; --gap-stack: var(--space-4); } /* ========================================================================== 4. ОТСТУПЫ Шкала 4 / 8 / 12 / 16 / 24 / 32 / 48. Шаг 12 в раскладке разрешён и работает как основной: в плотном инструменте расстояние между 8 и 16 слишком большое, чтобы прыгать через него. Правило ритма одно: над заголовком воздуха больше, чем под ним. Иначе подпись липнет к чужому блоку и группировка читается неверно. ========================================================================== */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --gap-inline: var(--space-2); /* между соседними мелкими элементами */ --gap-stack: var(--space-3); /* между строками внутри блока */ --gap-block: var(--space-4); /* между карточками */ --gap-section: var(--space-8); /* между смысловыми разделами */ --pad-card: var(--space-4); /* внутреннее поле карточки: 16 сверху/снизу */ --pad-card-x: 18px; /* и 18 по бокам — как в кабинете сейчас */ --pad-page: 22px; /* боковое поле страницы, из кабинета */ --page-max: 1400px; /* потолок ширины, из кабинета */ } @media (max-width: 640px) { :root { --pad-page: var(--space-3); --pad-card-x: var(--space-3); } } /* ========================================================================== 5. РАДИУСЫ · РАМКИ · ТЕНИ · ФОКУС ========================================================================== */ :root { --radius-sm: 4px; /* чип-метка, мелкая плашка */ --radius-md: 6px; /* кнопка, поле, вкладка — как в кабинете сейчас */ --radius-lg: 8px; /* карточка */ --radius-full: 999px;/* фильтр-таблетка, счётчик */ /* Отдельная норма для витрин говорит 12–16 px на карточке. Здесь это не работает: в сетке из десятка панелей такой радиус съедает угол ячейки и делает рабочий экран игрушечным. Держим 8 на корпусе и 6 на контроле — ровно то, что уже стоит в кабинете. */ --border-w: 1px; --border-w-strong: 2px; --underline-w: 2px; /* подчёркивание активной вкладки */ /* Глубина объявляется ОДИН раз: либо рамкой, либо тенью. Карточка — всегда рамка. Тень — только у того, что физически лежит поверх страницы: выпадающий список, крупный просмотр фотографии, прилипшая панель действий. У каждой тени есть и смещение, и размытие: плоское цветное свечение тенью не считается. */ --elev-1: 0 1px 2px rgba(26, 26, 26, 0.06), 0 2px 6px rgba(26, 26, 26, 0.06); --elev-2: 0 2px 4px rgba(26, 26, 26, 0.06), 0 10px 24px rgba(26, 26, 26, 0.12); --elev-up: 0 -2px 4px rgba(26, 26, 26, 0.05), 0 -8px 20px rgba(26, 26, 26, 0.09); /* Кольцо фокуса. Менеджер ходит по форме табом — оно обязано быть видно на каждом интерактивном элементе. Прежнее в кабинете: outline 3px #8AB8DE. Это 2,10:1 к белому листу при пороге 3:1 — с клавиатуры было не понять, куда ты попал. Новое: 2px зазора цветом подложки, потом 2px тёмно-синего — 6,93:1. Зазор нужен, чтобы кольцо не слипалось с собственной рамкой поля. */ --focus-color: #1F5C96; --focus-ring: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--focus-color); --focus-ring-page: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--focus-color); --focus-ring-danger: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--danger-fg); --focus-ring-header: 0 0 0 2px var(--bg-header), 0 0 0 4px var(--white); --scrim: rgba(26, 26, 26, 0.78); /* затемнение под крупным просмотром фото */ --scrim-soft: rgba(26, 26, 26, 0.28); /* под окном происхождения значения: оно не отбирает работу, а показывает цитату — глушить экран незачем */ } /* ========================================================================== 6. КОМПОНЕНТНЫЕ ТОКЕНЫ ========================================================================== */ :root { --control-h: 34px; /* поле, обычная кнопка — рабочая плотность */ --control-h-sm: 28px; /* кнопка внутри строки таблицы */ --control-h-lg: 40px; /* главное действие экрана */ --control-h-floor: 56px; /* кнопка-этап в цеху: палец, планшет */ --control-px: var(--space-3); --control-px-lg: var(--space-6); --tap-min: 44px; /* нижняя граница нажимаемого на телефоне */ --row-h: 34px; /* строка плотной таблицы */ --row-py: var(--space-2); --row-px: 10px; --cell-num-w: 92px; /* поле правки числа прямо в строке */ --stage-col-w: 196px; /* колонка «Стадия» в списке заказов — фиксирована */ /* 🔴 Дно ширины липкой первой колонки. Без него на 834 (планшет в портрете, окно вполэкрана на ноутбуке) колонка «Изделия» схлопывалась примерно до 100 точек: название материала рассыпалось на пять-шесть строк, строка вырастала до 130, и последняя колонка уходила за кромку — то есть прокрутка вбок переставала показывать то, ради чего она есть. Ниже 768 дно снимается: там колонка отклеивается, а таблица либо раскладывается блоками (.tbl--stack), либо честно едет вбок. */ --col-first-min: 220px; --popover-w: 360px; /* окно происхождения значения: цитата + имя файла */ --header-h: 50px; /* шапка кабинета: 34 (пункт меню) + 8 + 8 */ --chip-h: 24px; /* неинтерактивная метка: стадия, происхождение */ --chip-action-h: 28px; /* нажимаемый фильтр-таблетка */ --count-h: 20px; /* счётчик-плашка на «Согласование» */ --step-dot: 26px; /* кружок шага мастера */ --tile: 136px; /* плитка фотографии задания */ --tile-sm: 104px; /* она же на телефоне */ --kv-label-w: 220px; /* колонка ключа в таблице «ключ-значение» */ --icon-sm: 14px; --icon-md: 16px; --icon-lg: 20px; --icon-stroke: 1.6; /* для 16 и 20 */ --icon-stroke-sm: 1.9; /* для 14 — тонкая линия в мелком размере пропадает */ --mark-h: 22px; /* высота знака Anima в шапке. Знак ВЕКТОРНЫЙ: растровое лого 1536 px шириной, ужатое сюда, теряет штрихи и слипается в мазок. Плашка добавляет по 3 сверху и снизу — знак укладывается в 34-пиксельную строку. */ /* Кромка у края горизонтальной прокрутки: «здесь есть продолжение». На телефоне она и шире, и плотнее — там обрезанную таблицу принять за всю проще всего: пальцем ведут по строке, а не по флагу колонок, и правого края экрана касаются реже, чем на мыши. */ --scroll-shadow-w: 22px; --scroll-shadow-a: 0.40; /* в самой тёмной точке 2,52:1 к листу */ } /* На телефоне и планшете рабочая плотность отступает: в 28-пиксельную кнопку палец не попадает. Правило общее, не только для цеха. 🔴 Два условия, а не одно. Порог по ширине пропускал iPad в портрете (834 px — мимо на 67 пикселей), и планшет получал мышиную вёрстку: пункт меню 31 px, фильтр 28, кнопка правки в строке 28. Про палец знает не ширина экрана, а указатель — (pointer: coarse). */ @media (max-width: 767px), (pointer: coarse) { :root { --control-h: var(--tap-min); /* 🔴 Оба поднимаются до порога, а не «почти до порога». Было 36 и 34 при собственной норме системы 44 — то есть система не проходила собственное правило, и это нашли трижды независимо: два слепых критика и верстальщик. Кнопка в строке таблицы встречается в кабинете девятнадцать раз, фильтр-таблетка стои́т над каждым списком. Строка на телефоне от этого выше — и пусть: непопадание пальцем дороже лишних восьми точек высоты. */ --control-h-sm: var(--tap-min); --control-h-lg: 48px; --row-h: var(--tap-min); --chip-action-h: var(--tap-min); --tile: var(--tile-sm); --scroll-shadow-w: 30px; --scroll-shadow-a: 0.50; /* 3,36:1 к листу — на телефоне кромка обязана читаться срезом, а не тенью */ } } /* ========================================================================== 7. ДВИЖЕНИЕ Кабинет открывают, чтобы сделать дело, а не смотреть на переходы. Движение здесь сообщает состояние — нажал, открылось, сохранилось — и ничего больше. Ни одной анимации при загрузке страницы. ease-in не используется нигде: он тормозит ровно там, куда смотрит глаз в момент нажатия. ========================================================================== */ :root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-press: 100ms; /* отклик на нажатие */ --dur-fast: 150ms; /* цвет, фон, граница */ --dur-base: 200ms; /* раскрытие блока, выпадающий список */ --press-shift: 1px; /* насколько кнопка «проваливается» при нажатии */ } @media (prefers-reduced-motion: reduce) { :root { --dur-press: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --press-shift: 0px; } } /* ========================================================================== 8. ЭМОДЗИ — правило системы -------------------------------------------------------------------------- 🔴 В кабинете эмодзи нет. Нигде: ни в меню, ни в кнопках, ни в стадиях, ни в заголовках. Все значки — рисованный SVG одной штриховой системы (сетка 16/20, штрих 1,6). Четыре причины, и все проверяемые: 1. Печать. Расчёт и задание цеху печатают. В шрифте документа цветных значков нет — вместо кружка стадии печатается пустой квадратик, и так в каждой строке. 2. Чужой шрифт. Эмодзи рисует система, а не мы: на планшете цеха, на Windows менеджера и на Маке владельца это три разных рисунка разного размера. Наш SVG везде один. 3. Цвет как единственный носитель смысла. Стадия, различимая только цветом кружка, не переживает ни ч/б печать, ни дальтоника. Поэтому каждая стадия и каждая метка держатся на ТРЁХ слоях: слово + форма знака + цвет. Убери цвет — читается по-прежнему. 4. Эмодзи вместо иконки — метка спешки, а не решение. Где эмодзи остаётся допустимым: только там, где рисовать нельзя — в кнопках и сообщениях Telegram-бота, куда картинку не вставить. Это за пределами кабинета и за пределами этой системы. ========================================================================== */