/* --- ui/tokens.css: БЛОК 1 — токены ------------------------------------- Первый из пяти блоков слоя элементов (порядок задан дизайн-сессией и обязателен: токены → базовые элементы → составные → оболочка → раскладка разделов). Здесь только значения. Ни одного селектора, кроме :root. Значения перенесены из Employees/css/employees-light.css — он самый развитый файл проекта и уже утверждён визуально. Имена приведены к соглашению брифа: --ui-<группа>-<роль>. ПРАВИЛО: раздел не объявляет своих цветов, теней и радиусов. Нужного значения нет — оно добавляется сюда, а не рядом. ЕДИНСТВЕННОЕ ИСКЛЮЧЕНИЕ ИЗ «ТОЛЬКО ЗНАЧЕНИЯ» — сброс box-sizing ниже. Он стоит здесь, потому что должен применяться раньше всего остального: первый блок слоя грузится первым. ------------------------------------------------------------------------ */ /* ----- Сброс размерной модели --------------------------------------------- Умолчание браузера (content-box) кладёт отступы и рамку СВЕРХ заданной высоты и ширины. Оболочка построена на height:100% с отступами — на умолчании это давало документу лишние 116 px собственной прокрутки на каждом экране и каждом маршруте (находка дизайн-сессии Д2), и из этой же прокрутки выезжали подвал таблицы и кнопки окна. Точечная заплатка на .shell-desktop закрыла бы находку и оставила грабли: следующий раздел с отступами и height:100% наступит на то же место. До сегодняшнего дня border-box объявляли поштучно четыре файла — это как раз след от отсутствующего сброса. */ *, *::before, *::after { box-sizing: border-box; } :root { /* ----- Поверхности -------------------------------------------------- */ /* Фон рабочего стола: стеклянные плитки лежат на нём. */ --ui-color-canvas-a: #e8edfb; --ui-color-canvas-b: #dce3f6; --ui-color-canvas-fallback: #eef1f6; /* Панель раздела НЕПРОЗРАЧНАЯ — требование дизайн-сессии: панель это окно, а не стекло. Сквозь полупрозрачную читается текст под ней. Стекло остаётся только у стола и плиток. */ --ui-color-surface: #ffffff; --ui-color-surface-sunken: #f7f9fc; --ui-color-glass: rgba(255, 255, 255, .72); --ui-color-glass-strong: rgba(255, 255, 255, .86); --ui-color-scrim: rgba(0, 0, 0, .5); /* ----- Линии -------------------------------------------------------- */ --ui-color-line: rgba(96, 112, 148, .22); --ui-color-line-strong: rgba(96, 112, 148, .36); --ui-color-line-field: #ccd7e6; /* ----- Текст -------------------------------------------------------- */ --ui-color-ink: #1a2433; --ui-color-ink-soft: #55637c; --ui-color-ink-faint: #8894a8; --ui-color-ink-invert: #ffffff; /* ----- Действия ------------------------------------------------------ Серый — основной язык кнопок проекта. Синий на кнопках НЕ используется: он зарезервирован за интерактивом (фокус, наведение, активный пункт, выбранный день) и не может быть просто заливкой. */ --ui-color-graphite: #696969; --ui-color-graphite-deep: #555555; --ui-color-slate: #6c757d; --ui-color-slate-deep: #5a6268; --ui-color-danger: #e74c3c; --ui-color-danger-deep: #c0392b; /* Подсветка опасного действия без заливки: фон кнопки-иконки при наведении и нажатии. */ --ui-color-danger-wash: rgba(231, 76, 60, .12); /* ----- Интерактив ---------------------------------------------------- */ --ui-color-accent: #0000ff; --ui-color-accent-soft: #4a90d9; --ui-color-focus-ring: rgba(0, 0, 255, .2); /* Подсветки на основе синего: наведение, выбранное состояние и тонкая линия у элементов, отмеченных интерактивом (чип активного фильтра, пункт поповера под курсором, выбранный день). Добавлены по запросу исполнителя — до этого те же значения жили запасными в var(). Все три остаются интерактивом, а не заливкой «просто так». */ --ui-color-wash-hover: rgba(0, 0, 255, .04); --ui-color-wash-active: rgba(0, 0, 255, .07); --ui-color-accent-line: rgba(0, 0, 255, .22); /* ----- Статусы ------------------------------------------------------- Зелёный, жёлтый и красный означают ТОЛЬКО статус. Использовать их как декоративную заливку нельзя. */ --ui-color-ok-ink: #146c43; --ui-color-ok-bg: #dcf3e6; --ui-color-warn-ink: #7a4f00; --ui-color-warn-bg: #fdf0d5; --ui-color-off-ink: #9a2f27; --ui-color-off-bg: #f8e2e0; --ui-color-neutral-ink: #55637c; --ui-color-neutral-bg: rgba(96, 112, 148, .12); /* Полоски-акценты тостов. */ --ui-color-info-edge: #3b82f6; --ui-color-ok-edge: #22c55e; --ui-color-off-edge: #ef4444; /* Тёмная подложка тоста — единственное тёмное пятно в светлой теме. */ --ui-color-inkwell: #1e293b; --ui-color-inkwell-text: #f8fafc; /* ----- Радиусы ------------------------------------------------------- */ --ui-radius-sm: 8px; --ui-radius-md: 12px; --ui-radius-lg: 20px; --ui-radius-pill: 30px; /* ----- Тени ---------------------------------------------------------- */ --ui-shadow-card: 0 10px 34px rgba(23, 32, 55, .14); --ui-shadow-panel: 0 8px 32px rgba(0, 0, 0, .12); --ui-shadow-pop: 0 22px 60px rgba(15, 22, 40, .28); --ui-shadow-modal: 0 20px 60px rgba(0, 0, 0, .25); --ui-shadow-toast: 0 8px 24px rgba(0, 0, 0, .2); /* ----- Типографика --------------------------------------------------- */ --ui-font-ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; /* Идентификаторы и суммы — моноширинным с табличными цифрами: ИНН, БИК, расчётный счёт, номера в таблицах. Пришло из «Реквизитов» на этапе 2, но нужно всем разделам, где есть колонки цифр. */ --ui-font-mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace; --ui-text-xs: 12px; --ui-text-sm: 13px; --ui-text-md: 14px; --ui-text-lg: 15px; --ui-text-xl: 16px; --ui-text-title: 24px; --ui-weight-regular: 400; --ui-weight-medium: 500; --ui-weight-bold: 600; --ui-line-tight: 1.2; --ui-line-base: 1.45; /* ----- Отступы -------------------------------------------------------- */ --ui-space-1: 4px; --ui-space-2: 6px; --ui-space-3: 8px; --ui-space-4: 12px; --ui-space-5: 16px; --ui-space-6: 20px; --ui-space-7: 24px; --ui-space-8: 32px; /* ----- Размеры управляющих элементов ---------------------------------- Единая высота — причина, по которой кнопка-иконка не проваливается относительно текстовой: у иконки line-height равен размеру шрифта, у текста — normal, и при одинаковом padding они расходятся на 5 px. */ --ui-control-h: 40px; --ui-control-h-sm: 32px; /* ----- Иконки --------------------------------------------------------- Набор — Font Awesome, он уже подключён на всех страницах проекта. Второй набор не заводим: разнобой толщин — то, что дизайн-сессия просила не допустить. Единство обеспечивают три размера ниже и цвет от текста. */ /* Лесенка размеров значков. Пять ступеней, каждая привязана к роли: 2xs — метка на плитке стола («в новой вкладке»); xs — значок ВНУТРИ плотного текста: строка контакта, стрелка сортировки; sm — иконочная кнопка, значок в карточке; md — шапка панели, ghost-кнопка; lg — плитка стола, крестик окна. Добавлены по находкам Д11 и Р2 вместо россыпи 9.5/10/11/11.5/13/14/16/28 по разделам, слою и столу. */ --ui-icon-2xs: 10px; --ui-icon-xs: 12px; --ui-icon-sm: 15px; --ui-icon-md: 20px; --ui-icon-lg: 26px; /* ----- Скелет загрузки ------------------------------------------------ Т1а, значения дизайн-сессии. Элемент (ui/skeleton.css) написан на var() с такими же запасными значениями — подхватит сам. */ --ui-color-skeleton: rgba(96, 112, 148, .10); --ui-color-skeleton-hi: rgba(96, 112, 148, .18); /* ----- Время ----------------------------------------------------------- */ --ui-dur-fast: .2s; --ui-dur-base: .3s; /* Срок жизни тоста: 3–3,2 с по требованию дизайн-сессии. В старом коде было 4 с — расхождение сознательное, это правило подачи, а не текст. */ --ui-toast-life: 3200ms; /* ----- Слои ------------------------------------------------------------ Модалка панели ниже модалки экрана: необратимое действие должно накрывать всё, включая уже открытую обычную модалку. */ --ui-z-popover: 900; --ui-z-modal-panel: 1000; --ui-z-modal-screen: 1100; --ui-z-toast: 9999; }