/* ══════════════════════════════════════════════════════════════ TOKENS — единый источник истины для CSS-переменных ────────────────────────────────────────────────────────────── Этот файл — фундамент дизайн-системы. Подключается ПЕРВЫМ, до тем (default.css / verhoff.css) и до admin.css / employee.css. Содержит: • Палитру (legacy + базовые значения) • Типографические токены (по назначению, не по гарнитуре) • Радиусы, тени, отступы — статика, общая для всех тем • Safe area для iOS PWA • Документацию по семантическому слою (значения — в темах) Что НЕ содержит: • Значения семантических токенов (--bg, --ink, --accent ...) — они задаются в themes/.css. См. секцию SEMANTIC. • Значения --brand-header-* и --brand-accent — инжектятся inline в на основе brand.theme_color. • Динамические per-component токены (--banner-border-color, --pri-color, --emp-pri-color, --pri-bar-color) — ставятся inline из JS, fallback в var(--*, default). Порядок подключения в HTML: 1. tokens.css (этот файл) 2. base.css (Шаг 2 — компоненты на семантике) 3. themes/.css (значения семантических токенов) 4. admin.css / employee.css Ссылки: • REDESIGN_PLAN_v5.md — план миграции • COMPONENT_REDESIGN_PLAN.md — план Фазы 2 • preview-v2.html — визуальный референс v2 (закрытые шаги B.1-B.9, B.4.*, B.5.*, B.8) • preview-v3.html — расширение v2 (warm-палитра, supervisor-grad, --r-2xl, --shadow-warm). Используется для будущих шагов (B.10+) и точечных миграций (welcome-hero на главной — кандидат на переезд через флаг FEATURES.warmHero). ══════════════════════════════════════════════════════════════ */ :root { /* ════════════════════════════════════════════════════════════ TYPOGRAPHY ──────────────────────────────────────────────────────────── Три токена по НАЗНАЧЕНИЮ текста, не по гарнитуре. Темы резолвят их в конкретные шрифты: • default — DM Sans для всего (ui/display/logo) • verhoff — Inter для ui, GillSans для display/logo В компонентах admin/employee/base используются ТОЛЬКО эти токены. Никаких хардкодов конкретных гарнитур. Дефолтные значения здесь — системные шрифты как fallback, если по какой-то причине тема не подключена. На проде они всегда переопределены темой. ════════════════════════════════════════════════════════════ */ --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-logo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* ════════════════════════════════════════════════════════════ RADIUS ──────────────────────────────────────────────────────────── Шкала радиусов. Статика — одинаковая во всех темах. ════════════════════════════════════════════════════════════ */ --r-xs: 8px; /* чекбоксы, мелкие элементы */ --r-sm: 12px; /* inputs внутри карточек, мелкие плашки */ --r-md: 16px; /* карточки чек-листов, question-card */ --r-lg: 20px; /* карточки-герои, средние карточки */ --r-xl: 24px; /* большие карточки, bottom-sheets */ --r-2xl: 28px; /* тёплые hero-карточки, e-card (preview-v3) */ --r-pill: 999px; /* кнопки, chip'ы, фильтр-пилюли */ /* ════════════════════════════════════════════════════════════ SHADOWS ──────────────────────────────────────────────────────────── Шкала теней. Статика — одинаковая во всех темах. На тёмных поверхностях используется --shadow-dark. ════════════════════════════════════════════════════════════ */ --shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04); /* карточки в покое */ --shadow-2: 0 2px 4px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); /* hover, поднятые карточки */ --shadow-3: 0 8px 32px rgba(0,0,0,.10); /* toast, модалки */ --shadow-dark: 0 8px 24px rgba(0,0,0,.20); /* тёмные элементы */ --shadow-warm: 0 12px 28px rgba(232,131,93,.25); /* тёплые hero/ecard (preview-v3) */ /* ════════════════════════════════════════════════════════════ SPACING ──────────────────────────────────────────────────────────── Шкала отступов. Статика — одинаковая во всех темах. ════════════════════════════════════════════════════════════ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; /* ════════════════════════════════════════════════════════════ SAFE AREA (iOS PWA) ──────────────────────────────────────────────────────────── env() значения для notch/home-indicator. Дублируются в темах ради совместимости со старым кодом login.html, который читает эти токены напрямую. В admin.css/employee.css сейчас используется env(...) напрямую — в Шагах 5-6 можно подсократить переходом на эти токены. ════════════════════════════════════════════════════════════ */ --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom); /* ════════════════════════════════════════════════════════════ SEMANTIC LAYER — документация ──────────────────────────────────────────────────────────── Семантические токены — главный контракт между компонентами (admin/employee/base) и темами (default/verhoff). Компоненты ССЫЛАЮТСЯ на эти токены, темы ЗАДАЮТ их значения. Значения определяются в themes/.css. Здесь токены НЕ объявлены умышленно — иначе tokens.css стал бы «ещё одной темой» и ломал бы границу «токены ≠ темы». Полный список — для справки и для реализации тем на Шаге 3: ── Поверхности ───────────────────────────────────────────── --bg Фон страницы --bg-alt Светлее фона, для зон --surface Основные карточки --surface-2 Поля ввода, второстепенные плашки --surface-elevated Модалка, dropdown — отделяется тенью --surface-dark Антрацит — hero, primary CTA --surface-dark-2 Чуть светлее тёмной ── Текст ─────────────────────────────────────────────────── --ink Основной текст --ink-2 Вторичный текст --ink-3 Третичный текст, placeholder --ink-on-dark Текст на тёмной поверхности --ink-on-dark-2 Вторичный на тёмной --ink-on-dark-3 Третичный на тёмной ── Линии ─────────────────────────────────────────────────── --line Тонкие разделители --line-strong Усиленные разделители --line-on-dark Линии на тёмной поверхности ── Оверлеи и эффекты ─────────────────────────────────────── --scrim Полупрозрачный фон под модалками (sheet-backdrop) Default: rgba(0,0,0,.4) VERHOFF: rgba(0,0,0,.7) --hero-glow Декоративное свечение в углу .hero Default: rgba(147,197,253,.12) — голубой акцент VERHOFF: rgba(255,255,255,.06) — белое свечение ── Login PIN-точки ───────────────────────────────────────── --pin-dot-bg Заливка пустой точки Default: rgba(0,0,0,.1) VERHOFF: transparent --pin-dot-border Обводка пустой точки Default: transparent VERHOFF: #555 --pin-dot-bg-filled Заливка заполненной точки Default: var(--surface-dark) VERHOFF: #fff --pin-dot-border-filled Обводка заполненной (обычно = bg-filled) Default: var(--surface-dark) VERHOFF: #fff ── Каркас admin/employee ─────────────────────────────────── --page-top-bg Фон страницы под шапкой (для body-фона) Default: var(--bg) VERHOFF: #000 --screen-bg Фон экранов (.screen — dashboard, reports...) Default: var(--bg) VERHOFF: #fff --nav-bg Фон нижнего навбара (.bottom-nav) Default: var(--surface) VERHOFF: #fff --nav-border Верхняя обводка навбара Default: var(--line) VERHOFF: #e5e5e5 --nav-fg-active Цвет активной иконки в навбаре (контраст с --nav-bg) Default: var(--ink) VERHOFF: #000 --nav-fg-inactive Цвет неактивной иконки в навбаре (бледный) Default: var(--ink-3) VERHOFF: #bbb ── Org-banner (grace/suspended плашки) ───────────────────── --banner-bg Фон плашки (всегда светлый — для контраста) Default: var(--surface) VERHOFF: #fff --banner-fg Текст плашки (тёмный) Default: var(--ink) VERHOFF: #111 --banner-fg-soft Вторичный текст / close-кнопка Default: var(--ink-3) VERHOFF: #888 ── Карточки и строки контента ────────────────────────────── На VERHOFF экраны (.screen) белые, карточки на них тоже белые (сплошные, не полупрозрачные). На default экраны на тёплом сером, карточки белые и контрастируют с фоном. --card-bg Фон карточки/строки Default: var(--surface) VERHOFF: #fff --card-bg-hover Hover/active состояние Default: var(--bg-alt) VERHOFF: #fafafa --card-fg Основной текст карточки Default: var(--ink) VERHOFF: #000 --card-fg-2 Вторичный текст Default: var(--ink-2) VERHOFF: #888 --card-fg-3 Третичный (placeholder, бледный) Default: var(--ink-3) VERHOFF: #bbb --card-line Разделители строк (мягкие) Default: var(--line) VERHOFF: #f5f5f5 --card-line-strong Сильные разделители Default: var(--line-strong) VERHOFF: #e5e5e5 --card-fg-inverse-bg Фон инверсного блока (статус «Сдан») Default: var(--surface-dark) VERHOFF: #000 --card-fg-inverse-fg Текст на инверсном блоке (белый в обеих) Default: var(--ink-on-dark) VERHOFF: #fff ── Прогресс-бары ─────────────────────────────────────────── --progress-track Фон трека Default: var(--surface-2) VERHOFF: #e5e5e5 --progress-fill Заливка Default: var(--accent-strong) VERHOFF: #000 На default progress-fill — голубой акцент (новый дизайн). На VERHOFF — чёрный (как было). ── Поля ввода (form-input, form-select, dropdown cd-*) ───── Прямоугольный rect-стиль для admin-модалок (отдельно от pill-стиля .input из base.css — это другой компонент). --field-bg Фон поля Default: var(--surface) VERHOFF: #fff --field-fg Цвет текста Default: var(--ink) VERHOFF: #000 --field-border Рамка Default: var(--line-strong) VERHOFF: #e5e5e5 --field-border-focus Рамка при фокусе Default: var(--accent-strong) VERHOFF: #e5e5e5 На VERHOFF фокус не меняет рамку — повторяем существующее поведение admin.css. --field-placeholder Цвет placeholder Default: var(--ink-3) VERHOFF: #bbb --field-label-fg Цвет form-label (uppercase, 10px) Default: var(--ink-2) VERHOFF: #555 --field-sublabel-fg Цвет form-sublabel Default: var(--ink-3) VERHOFF: #888 ── Кнопки rect (admin-модалки: btn-primary / btn-secondary) ── Не путать с pill-кнопками .btn--* из base.css. Эти rect-кнопки живут внутри admin-модалок и имеют border-radius: 4px. На VERHOFF btn-primary ЧЁРНАЯ (это отличается от pill-CTA --primary, который на VERHOFF белый). Разные компоненты. --btn-primary-bg Фон btn-primary Default: var(--primary) VERHOFF: #000 --btn-primary-fg Текст btn-primary Default: var(--primary-fg) VERHOFF: #fff --btn-secondary-bg Фон btn-secondary Default: var(--surface) VERHOFF: #fff --btn-secondary-bg-hover Hover/active btn-secondary Default: var(--bg-alt) VERHOFF: #fafafa --btn-secondary-fg Текст btn-secondary Default: var(--ink) VERHOFF: #000 --btn-secondary-border Рамка btn-secondary Default: var(--line-strong) VERHOFF: #e5e5e5 ── Role-toggle (переключатель в invite-code модалке) ─────── --toggle-btn-bg Фон неактивной (прозрачный) --toggle-btn-fg Текст неактивной Default: var(--ink) VERHOFF: #000 --toggle-btn-border Рамка неактивной Default: var(--line-strong) VERHOFF: #bbb --toggle-btn-active-bg Фон активной Default: var(--surface-dark) VERHOFF: #000 --toggle-btn-active-fg Текст активной Default: var(--ink-on-dark) VERHOFF: #fff ── Custom dropdown (cd-*) — рамка выпадающего списка ────── --cd-list-border Рамка cd-list (заметнее чем card-line-strong) Default: var(--line-strong) VERHOFF: #555 На VERHOFF тёмная рамка #555, как было. ── Bottom-sheet (modal-sheet, task-sheet) ───────────────── --sheet-bg Фон листа модалки Default: var(--surface) VERHOFF: #fff --sheet-handle Полоска-handle сверху листа Default: var(--card-line-strong) VERHOFF: #e5e5e5 Затемнение фона за модалкой использует --scrim (введён в Шаге 2). На default --scrim = rgba(0,0,0,.4), на VERHOFF — rgba(0,0,0,.7). ── Day-cell (плашка дня на белом фоне) ──────────────────── --day-cell-bg Фон неактивных плашек в week-strip / календарях. Заметнее чем --card-bg-hover, чтобы выделяться на белом screen-bg (особенно на VERHOFF). Default: var(--bg-alt) VERHOFF: #f5f5f5 ── Icon-button / Skeleton / Toast (специфичные элементы) ── --icon-btn-bg Фон круглой icon-btn (header back и т.п.) Default: var(--card-line) VERHOFF: #f5f5f5 --skeleton-bg Сплошной серый фон skeleton-плейсхолдеров. НЕ используем --surface-2 — на VERHOFF он полупрозрачный (Урок 3), не работает на белом. Default: var(--surface-2) VERHOFF: #f5f5f5 --toast-bg Фон toast-уведомления (тёмный В ОБЕИХ темах). НЕ используем --surface-dark — на VERHOFF он белый (Урок 1), toast стал бы невидимым. Default: var(--surface-dark) VERHOFF: #000 --toast-fg Текст toast (белый в обеих) Default: var(--ink-on-dark) VERHOFF: #fff ── Hero-зоны (always-dark в обеих темах) ────────────────── Введены в Шаге 7. Применяются для зон, которые ВСЕГДА должны быть тёмной поверхностью с белым текстом — независимо от темы. Использование: #splash, .profile-header (employee Settings), .notif-panel-header, .success-overlay. НЕ используем --toast-bg/-fg: тост = временное уведомление, hero = постоянная зона. Семантически разное. --hero-bg Фон hero-зоны Default: var(--surface-dark) VERHOFF: #000 --hero-fg Основной текст hero (всегда белый) Default: var(--ink-on-dark) VERHOFF: #fff --hero-fg-2 Вторичный/блёклый текст hero Default: var(--ink-on-dark-3) VERHOFF: #888 (средний серый) --hero-line Декоративная линия/точки на hero (#splash splash-line, s-dot) Тёмно-серый (видим на чёрном, не сливается с белым текстом) Default: ~#5a5a5a VERHOFF: ~#555 --hero-avatar-bg Фон контейнера-аватара на hero (.profile-av fallback) Чуть светлее --hero-bg для отделения круга от фона Default: ~#3a3a3a VERHOFF: ~#222 ── History/Archive текст (приглушённый «прошедший» контент) ─ Введён в Шаге 7. Для текста в архивных/исторических элементах, которые должны быть заметно блёклее основного --card-fg-2. 5 точек: .emp-task-hist, .task-history-item, .task-assignee-chip, 2× .task-poll-voter (admin + employee). --card-fg-history Цвет приглушённого «архивного» текста Default: тёмно-серый (~#3a3a3a) VERHOFF: ещё темнее (~#222) — на белом фоне VERHOFF ── Swipe-action подпись (текст «УДАЛИТЬ»/«РЕДАКТИРОВАТЬ») ── Введён в Шаге 7. Для текста в swipe-action кнопках, которые отображаются под карточкой при свайпе (.cl-action-*, .q-card-delete-btn). Тот же оттенок что --card-fg-history, но семантически другое — это служебный текст на пассивной подложке, НЕ архив. --swipe-action-fg Цвет swipe-action подписи Default: ~#3a3a3a VERHOFF: ~#222 ── Toggle-кнопки активный border (усиленный) ────────────── Введён в Шаге 7. Для активного состояния toggle-кнопок, где обычного --line-strong / --card-line-strong недостаточно для индикации. 3 точки: .task-grouping-btn.active, .emp-task-grouping-btn.active, .report-filter-btn.active. --toggle-btn-active-border Цвет border-color для .active toggle Default: ~#b5b5b5 (gray-5-equivalent) VERHOFF: ~#bbbbbb (был --gray-5) ── Table-cell приглушённый фон (trio-иерархия) ──────────── Введён в Шаге 7. Для slot-cell в inspection-таблице, где нужен ОЧЕНЬ светлый фон, заметно отличный от обычного card/surface. 2 точки: reports.js, revisions_employee.js. --table-cell-bg-subtle Очень светлый фон ячейки (не путать с --bg-alt) Default: ~#fafbfc VERHOFF: ~#fafafa (был --gray-8) ── Header action-кнопки (back-btn, save в screen-builder) ─ Введены в Шаге 7. Для иконок-кнопок в шапках детальных экранов, которые наследуют контраст с --brand-header-bg. На default и VERHOFF одинаково — резолвятся через --brand-header-fg. --header-action-btn-fg Цвет иконки в header-action-btn Default: var(--brand-header-fg) VERHOFF: var(--brand-header-fg) --header-action-btn-bg Фон header-action-btn (обычно прозрачный) Default: transparent VERHOFF: transparent ── CTA-spinner (always-white-on-coloured) ───────────────── Введён в Шаге 7. Для спиннеров на цветных CTA-кнопках, где активная дуга и track всегда белые независимо от темы. Используется в .btn-loading::after, .media-upload-spinner. --cta-spinner-track Track спиннера (полупрозрачный белый) Default: rgba(255,255,255,.3) VERHOFF: rgba(255,255,255,.3) --cta-spinner-fg Активная дуга спиннера (всегда белая) Default: #ffffff VERHOFF: #ffffff ── PWA body-фон (employee, always-dark/always-white) ────── Введён в Шаге 7. PWA-критичный паттерн — НЕ семантика темы. Верх body чёрный (под шапку/splash/PTR — предотвращает белую "вспышку" при reload и pull-to-refresh), низ белый (под навбар, закрывает чёрный зазор в standalone PWA на iPhone с home indicator). В обеих темах одинаково — это поведение PWA-shell. --pwa-bg-top Верх body-фона (always-dark) Default: #000000 VERHOFF: #000000 --pwa-bg-bottom Низ body-фона (always-white) Default: #ffffff VERHOFF: #ffffff ── Body text default (мост из --black) ──────────────────── Введён в Шаге 7. Для body { color } и q-checkbox-text. На обеих темах ТЁМНЫЙ — нельзя использовать --ink, потому что на VERHOFF --ink инвертируется в белый, а текст в карточках должен оставаться чёрным (карточки на VERHOFF тоже белые). --text-default Цвет текста по умолчанию (всегда тёмный) Default: ~#1A1A1A VERHOFF: ~#1A1A1A ── Акцент (голубой — рабочие/чек-лист экраны) ────────────── --accent Светло-голубой — chip'ы на тёмной hero, иконки --accent-strong Насыщенный — focus-ring, прогресс-бары --accent-deep Тёмный — для текста на светлых acc-фонах --accent-soft-bg Soft-фон acc-плашек --accent-soft-fg Текст на soft-фоне ── Тёплый акцент (preview-v3) — welcome/personal/heroes ──── Введён в v3-референсе. Используется для эмоциональных зон: splash, welcome, employee main hero, e-card (карточка-«пропуск»), профиль, личные приветствия. Голубой acc остаётся для рабочих/чек-лист экранов — они не warm, они «системные». На VERHOFF этих токенов НЕТ (Принцип 1). Применять только под FEATURES.warmHero / FEATURES.warmWelcome флагами, которые на VERHOFF выключены — иначе var() резолвится в initial и цвет поедет. --warm Базовый — иконки на тёмной hero, .icon-btn--warm Default: #F4A484 (персиково-оранжевый) --warm-strong Насыщенный — кнопки CTA, прогресс-филл Default: #E8835D --warm-deep Тёмный — для текста на светлых warm-фонах Default: #7A2E10 --warm-soft-bg Soft-фон warm-плашек (chip--warm, avatar--warm) Default: #FCE7DA --warm-soft-fg Текст на soft-warm-фоне Default: #7A2E10 --warm-grad Полный градиент для warm-hero, .ecard, splash Default: linear-gradient(135deg, #FF8A5B 0%, #F4A484 45%, #FFE0CC 100%) --warm-grad-soft Светлый градиент для пассивных warm-зон Default: linear-gradient(135deg, #FFE0CC 0%, #FCE7DA 100%) ── Primary (для CTA) ─────────────────────────────────────── --primary Главное действие — антрацитово-чёрный --primary-fg Текст на primary ── Семантика статусов ────────────────────────────────────── --success-bg / --success-fg / --success-strong / --success-line --warning-bg / --warning-fg / --warning-strong / --warning-line --danger-bg / --danger-fg / --danger-strong / --danger-line --info-bg / --info-fg / --info-strong / --info-line (синий — для revised/accepted и нейтральной информации) ── Менеджер смены (МС) — фиолет ──────────────────────────── --supervisor-bg Soft-фон supervisor-плашек (chip, avatar) Default: #F3E5F5 --supervisor-fg Текст на soft-supervisor-фоне Default: #7B1FA2 --supervisor-line Усиленная обводка (для аватара, чипа) Default: #CE93D8 --supervisor-strong Насыщенный — кнопки CTA в МС-режиме, прогресс-филл Default: #9C27B0 (preview-v3) --supervisor-grad Полный градиент для МС-hero (supervisor screen) Default: linear-gradient(135deg, #6A1B9A 0%, #9C27B0 50%, #CE93D8 100%) (preview-v3) На VERHOFF supervisor-strong/-grad НЕ ОБЪЯВЛЕНЫ (Принцип 1) — если случайно применятся, var() резолвится в initial. Это намеренная защита от молчаливого переноса warm/violet-hero на VERHOFF: пусть лучше будет видимый дизайн-баг чем подмена темы. -*-line — это цвет тонкой обводки соответствующей плашки. Используется когда плашка и фон карточки оба светлые и обводка нужна для разделения. ── BRAND TOKENS — динамические, инжектятся inline ────────── Не задавать в этом файле и не задавать в темах. Ставятся inline-скриптом в на основе brand.theme_color (бэк отдаёт через /api/v1/public/branding): --brand-header-bg фон шапки --brand-header-fg основной текст шапки --brand-header-fg-soft вторичный текст шапки --brand-header-fg-faint блёклый текст шапки --brand-header-avatar-bg фон аватара в шапке --brand-accent (Шаг 9, опционально) акцент арендатора, fallback на --accent --brand-accent-fg (Шаг 9, опционально) текст на бренд-акценте ── PER-COMPONENT TOKENS — динамические, инжектятся inline из JS ── Не задавать нигде — ставятся через style="--xxx: ..." на DOM-узле. CSS-объявления используют var(--xxx, fallback): --banner-border-color рамка/иконка org-banner (grace/suspended) JS: _renderBanner() --pri-color цвет приоритета задачи (admin) JS: builder/task-list --emp-pri-color цвет приоритета задачи (employee) JS: employee task-list --pri-bar-color цвет полоски приоритета (admin task-list) JS: admin task-list ════════════════════════════════════════════════════════════ */ }