/* ============================================================================ ВСЕ ТАЛАНТЫ × ШКОЛА АНИМАЦИИ — DESIGN TOKENS · ПАТЧ (дополнение) ---------------------------------------------------------------------------- Назначение: АДДИТИВНОЕ дополнение к 00-architecture/design-tokens.css. Подключать ПОСЛЕ design-tokens.css: ПРАВИЛА ПАТЧА (не нарушать): - Только НОВЫЕ токены и НОВЫЕ правила. Ничего не переименовываем. - Существующие имена классов и ключ темы прод НЕ трогаем: ключ темы = nw_theme (localStorage) сайдбар = .sidebar (position:fixed) + .main (margin-left) описание = .vd-text студия-карт = .vd-studio-card зарплата = .vd-salary Прод верстался по визуальным макетам, app.css — отдельный эталон-стенд; расхождение имён ожидаемо и здесь НЕ исправляется. - Значения, уже живущие в design-tokens.css (полный набор теней + вся тёмная тема), НЕ переобъявляются, чтобы не плодить второй источник правды. Они приведены ниже в reference-комментариях (§5, §4) — для переноса в свод. - Новые «живые» токены/правила: §1 спейсинг, §2 z-index, §3 радиусы/типо, §6 focus-visible, §7 reduced-motion, §8 статус-точки, §9 брейкпоинты, §10 danger (error-стейт форм). §11 — справочные метрики для свода. ========================================================================== */ :root { /* === §1. СПЕЙСИНГ-ШКАЛА (4-based) ===================================== */ /* Единая шкала отступов. Заменяет «на глаз». Существующие --gutter (32) и */ /* --section-gap (96) — это псевдонимы шагов шкалы (см. ниже). */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; /* == --gutter (gap карточек) */ --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 96px; /* == --section-gap (вертикальный ритм секций) */ /* Карта реальных отступов прод-макетов → ближайший шаг (для рефакторинга): */ /* топбар padding 26px 40px → space-6/7 + space-8 */ /* фильтры padding 22px 40px → space-6 + space-8 */ /* грид padding 24px 40px 56px → space-6 + space-8 + (space-9+space-2) */ /* лейблы секций margin 36–44px 0 16–18px → space-8 + space-4 */ /* === §2. Z-INDEX-ЛЕСТНИЦА ============================================= */ /* Решает баг «оверлей модалки vs сайдбар». Все слои — только через токены. */ --z-sidebar: 100; /* .sidebar (fixed) */ --z-topbar: 200; /* sticky-топбар */ --z-dropdown: 1000; /* .sel-поповеры, меню роли */ --z-overlay: 9000; /* затемняющий scrim под модалкой/шитом/drawer */ --z-modal: 9999; /* .overlay .modal (совпадает с текущим прод z-index) */ --z-toast: 10000; /* тосты — поверх всего */ /* === §3. РАДИУСЫ (новые) + ТИПО (новый шаг) =========================== */ --radius-lg: 28px; /* модалка (был зашит 28px) → токенизирован */ --radius-avatar: 14px; /* .ava-sq (был зашит 14px) → токенизирован */ --fs-h4: 18px; /* .vd-text h4 / .vd-body h4 (был зашит 18px) */ /* === §10. DANGER / ERROR (новый — нужен для error-стейта форм) ======== */ /* В системе не было «опасного»/ошибочного цвета. Чистый красный вне сине- */ /* фиолетовой палитры, проходит AA с белым текстом (~4.7:1). */ --danger: #e5484d; /* текст ошибки, border невалидного инпута */ --danger-soft: #fdecec; /* фон зоны ошибки / toast-error */ --danger-contrast: #ffffff; /* === §8. СТАТУС-ТОЧКИ (токенизация зашитых hex фильтров) ============== */ /* В app.css точки фильтров зашиты: .d.g #34d17e / .d.y #f5c542 / .d.b */ /* #9aa0a8 — мимо токенов. Вводим отдельные «dot»-токены. Это НЕ дубль */ /* --ok/--warn: семантические --ok #1f9d57 / --warn #e0a400 — для */ /* читаемого текста и крупных индикаторов; «dot»-версии ярче, т.к. */ /* применяются к точкам 8–9px, где более тёмный цвет «глохнет». */ --ok-dot: #34d17e; /* «свежее / открыто» (зелёная точка) */ --warn-dot: #f5c542; /* «постарше» (жёлтая точка) */ --idle-dot: #9aa0a8; /* «нет данных / закрыто» (серая точка) */ /* === §9. БРЕЙКПОИНТЫ (как значения — для JS matchMedia) =============== */ /* CSS-переменные нельзя использовать внутри @media, поэтому это: */ /* (а) единый ИСТОЧНИК значений для JS (matchMedia(`(max-width:1180px)`)); */ /* (б) канон чисел для @media в коде (шаблон — в §11). */ /* Текущие прод/макет-файлы расходятся (880 / 900 / 1100 / 1180) — свести. */ --bp-lg: 1180px; /* 3→2 колонки в гридах */ --bp-md: 1024px; /* боковые колонки деталей → в один столбец */ --bp-sm: 768px; /* сайдбар → off-canvas drawer; 2→1 колонка */ --bp-xs: 480px; /* модалка → bottom-sheet; компактные паддинги */ } /* ============================================================================ §6. FOCUS-VISIBLE — применяемое правило (доступность) ---------------------------------------------------------------------------- Токен --accent-ring уже существовал, но нигде не применялся. Здесь — универсальное правило клавиатурного фокуса. :where() даёт нулевую специфичность → не конфликтует со стилями компонентов прод, только добавляет видимый контур. outline (а не box-shadow) выбран как основной, т.к. не затирает существующие box-shadow кнопок (--shadow-accent). ========================================================================== */ :where(a, button, input, textarea, select, [tabindex], .btn, .chip, .sel, .fav, .nav-item, .role, .modal-close, .icon-btn, .gcard, .theme-toggle):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: inherit; } /* Альтернатива для pill-элементов (мягкое кольцо вместо контура) — если для конкретного компонента outline визуально режет скругление, применить точечно: .btn:focus-visible, .chip:focus-visible, .sel:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-ring); } Для текстовых полей (см. §11) кольцо — основной фокус-стиль. */ /* ============================================================================ §7. PREFERS-REDUCED-MOTION — гард ---------------------------------------------------------------------------- Глобально гасим длительности + точечно снимаем hover-подъёмы карточек/кнопок и анимацию входа модалки (modalIn). Точечные правила с !important, т.к. цель — намеренно перебить hover-трансформы прод. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* hover-подъёмы (translateY) — известные макро-селекторы */ .vcard:hover, .pcard:hover, .scard:hover, .gcard:hover, .btn:hover, .btn-accent:hover, .btn-dark:hover { transform: none !important; } /* вход модалки */ .overlay.open .modal { animation: none !important; } } /* ============================================================================ §8b. СТАТУС-ТОЧКИ — токенизация без визуального изменения ---------------------------------------------------------------------------- Привязывает зашитые точки фильтров к новым токенам. Значения совпадают с текущими → на проде ничего не «прыгает», но цвет теперь идёт через var(). Загружается после app.css, специфичность та же — корректно перекрывает hex. ========================================================================== */ .chip .d.g { background: var(--ok-dot); } .chip .d.y { background: var(--warn-dot); } .chip .d.b { background: var(--idle-dot); } /* ============================================================================ ТЁМНАЯ ТЕМА — дарк-варианты ТОЛЬКО для НОВЫХ токенов патча. (Структурные токены §1–§3, §9 в тёмной теме не меняются.) Базовая тёмная тема (bg/surface/accent/тени и пр.) — уже в design-tokens.css; её значения для свода см. §4 ниже. ========================================================================== */ [data-theme="dark"] { --danger: #ff6166; --danger-soft: #2e1416; --ok-dot: #3ee08a; --warn-dot: #ffd152; --idle-dot: #7e828b; } /* ============================================================================ §5. (REFERENCE — НЕ объявляется здесь) ПОЛНЫЙ НАБОР ТЕНЕЙ — для свода ---------------------------------------------------------------------------- Значения уже живут в design-tokens.css. Привожу для переноса в свод. Светлая (:root): --shadow-sm: 0 1px 2px rgba(22,23,27,.04), 0 2px 8px rgba(22,23,27,.04); --shadow-md: 0 4px 24px rgba(22,23,27,.07); --shadow-lg: 0 16px 48px rgba(22,23,27,.10); --shadow-accent: 0 10px 30px rgba(91,60,240,.28); Тёмная ([data-theme="dark"]): --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 24px rgba(0,0,0,.5); --shadow-lg: 0 16px 48px rgba(0,0,0,.6); --shadow-accent: 0 10px 30px rgba(124,92,255,.35); Применение: sm — search/мелкие плашки; md — карточки (дефолт); lg — hover карточек + модалка; accent — только акцентные pill-кнопки. ============================================================================ */ /* ============================================================================ §4. (REFERENCE — НЕ объявляется здесь) ТЁМНАЯ ТЕМА ЯВНЫМИ ЗНАЧЕНИЯМИ ---------------------------------------------------------------------------- Всё это УЖЕ есть в design-tokens.css [data-theme="dark"]. Для свода — не «механизм сохранён», а конкретные значения: Поверхности: --bg:#0e0e12 · --bg-alt:#15151b · --surface:#17171d · --surface-2:#1f1f27 --border:#2a2a33 · --border-strong:#3a3a45 Текст: --text:#f4f3ee · --text-muted:#a7a9b2 · --text-faint:#6e7079 · --on-dark:#f4f3ee Кнопка (инвертируется): --btn-fg:#16171b · --btn-bg:#f4f3ee · --btn-bg-hover:#ffffff Акцент (осветлён под тёмный фон): --accent:#7c5cff · --accent-hover:#8f72ff · --accent-contrast:#ffffff --accent-soft:#211a3d · --accent-soft-2:#1a1530 · --accent-ring:rgba(124,92,255,.40) --accent-2:#5b8cff --gradient-brand:linear-gradient(135deg,#5b8cff 0%,#7c5cff 55%,#9a5cff 100%) Избранное: --accent-star:#ffc04d Тени: см. §5 (тёмный блок). Новое из патча (тёмные варианты — объявлены выше): --danger:#ff6166 · --danger-soft:#2e1416 --ok-dot:#3ee08a · --warn-dot:#ffd152 · --idle-dot:#7e828b ============================================================================ */ /* ============================================================================ §11. КАНОН АДАПТИВА + МЕТРИКИ ФОРМ — справочно для свода ---------------------------------------------------------------------------- Конкретные значения, которые ты вносишь в свод. Здесь намеренно НЕ «живой» код компонентов (чтобы не пересекаться с прод-вёрсткой), а спецификация. ─── @MEDIA ШАБЛОН (единые брейкпоинты, §9) ─────────────────────────────── @media (max-width:1180px){ … } // grid 3→2 @media (max-width:1024px){ … } // боковые колонки деталей → 1 столбец @media (max-width: 768px){ … } // sidebar → drawer; grid 2→1 @media (max-width: 480px){ … } // modal → bottom-sheet; компакт-паддинги ─── МОБИЛЬНЫЙ САЙДБАР (off-canvas drawer) ──────────────────────────────── Триггер сворачивания: ≤ 768px (--bp-sm) Ширина drawer: 288px (фикс; на узких — min(288px, 86vw)) Скрыт: transform: translateX(-100%) Открыт: transform: translateX(0) Переход: transform .28s var(--ease) z-index drawer: var(--z-modal) (9999) z-index scrim: var(--z-overlay) (9000) Scrim: color-mix(in srgb,var(--text) 42%,transparent) + blur(6px) Кнопка-бургер: 44×44px (touch), в топбаре слева; line-SVG, stroke:currentColor Прод-замечание: текущий app.css на ≤900px прячет .nav-grp/.side-foot (display:none) — навигация пропадает. В drawer они ОБЯЗАНЫ остаться видимыми (скроллятся внутри drawer). ─── МОДАЛКА → BOTTOM-SHEET ─────────────────────────────────────────────── Триггер: ≤ 480px (--bp-xs) Якорь: низ экрана (align-items:end) Ширина: 100% Высота: max-height: 92vh (контент — overflow:auto) Радиус: var(--radius-lg) var(--radius-lg) 0 0 (только верх) Drag-handle: 36×4px, radius 100px, var(--border-strong), по центру сверху Анимация входа: translateY(100%) → 0, .28s var(--ease) Низ (safe-area): padding-bottom: max(20px, env(safe-area-inset-bottom)) Десктоп (>480px): прежнее поведение (по центру, max-width:880px, radius-lg) ─── МЕТРИКИ ФОРМ / ИНПУТОВ (из логики макетов: .search/.btn/.chip ≈ 40–44px) ─ Высота контрола: 44px (touch-таргет) / 40px компакт input/select padding: 12px 16px textarea padding: 14px 16px; min-height: 120px; line-height: var(--lh-body) Радиус: var(--radius-md) (16px) Бордер: 1px solid var(--border) Фон: var(--surface) Текст / размер: var(--text) / var(--fs-body) (17px); placeholder var(--text-faint) Hover: border-color: var(--border-strong) Focus: border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); outline:none Disabled: opacity:.5; cursor:not-allowed; background:var(--surface-2) Invalid (error): border-color: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb,var(--danger) 24%,transparent) Label: 13px / 600 / var(--text); margin-bottom: 8px Hint: 13px / var(--text-muted); margin-top: 6px Error-текст: 13px / var(--danger); margin-top: 6px Checkbox: 20×20px; border:1.5px solid var(--border-strong); radius:6px checked → background:var(--accent); глиф «✓» белый Radio: 20×20px; radius:100px; checked → точка var(--accent) внутри Select (нативный): как input + правый chevron-глиф var(--text-faint); appearance:none Все интерактивные поля наследуют §6 focus-visible (кольцо --accent-ring). ============================================================================ */ /* ============================================================================ §12. TABS — канонический таб-компонент (переиспользуемый, не только /stats) ---------------------------------------------------------------------------- Первое применение: STATS-DESIGN-01, переключатель «Сейчас/Отчёты» на /stats. ========================================================================== */ .tabs{display:inline-flex;background:var(--surface-2);padding:4px;border-radius:var(--radius-button);border:1px solid var(--border);gap:2px;} .tab{padding:10px 24px;border-radius:var(--radius-button);font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--text-muted);border:none;background:none;transition:all var(--dur) var(--ease);cursor:pointer;} .tab:hover{color:var(--text);} .tab.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);font-weight:700;} .tab:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring);} @media(max-width:768px){ .tabs{display:flex;width:100%;} .tab{flex:1;text-align:center;} }