/* Pharma Upsell MVP — Design tokens (ADR-030) * * Version: 2.3 * Единый источник правды для визуального слоя Explorer (цвет, типографика, * spacing, motion). Подключается в до explorer.css; все значения — * через var(--token), без hard-coded. * * Policy: Explorer — desktop-only, min-width 1280px (design-system.md §6.4). * Детальная документация и обоснования решений — docs/design-system.md. */ /* ── Шрифты: IBM Plex (Google Fonts) ───────────────────────── * Phase 1 — CDN. Phase 2 — self-hosted .woff2 в static/design/fonts/ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Serif:wght@400;500;600&display=swap'); :root { /* ═════════════════════════════════════════════════════════ * 1. Typography — families * ═════════════════════════════════════════════════════════ */ --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif; --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace; /* ═════════════════════════════════════════════════════════ * 2. Type scale — role-based * Семь реальных размеров: 11 / 12 / 13 / 14 / 20 / 28 / 44. * Основной вес 500, не 600/700. Контраст через размер и цвет. * ═════════════════════════════════════════════════════════ */ /* KPI-герой — большая цифра в карточке ключевого показателя */ --fs-kpi-hero: 44px; --fw-kpi-hero: 500; --ls-kpi-hero: -0.02em; --lh-kpi-hero: 1.15; /* H1 — заголовок страницы («Explorer · Вся сеть») */ --fs-h1: 28px; --fw-h1: 500; --ls-h1: -0.01em; --lh-h1: 1.25; /* H2 — секции («Все территории», «Промо-продукты») */ --fs-h2: 20px; --fw-h2: 500; --lh-h2: 1.35; /* H3 — подсекции */ --fs-h3: 14px; --fw-h3: 600; --lh-h3: 1.4; /* Body / ячейка таблицы */ --fs-body: 14px; --fw-body: 400; --lh-body: 1.55; /* Table numerics — проценты, суммы, дельты */ --fs-table-num: 14px; --fw-table-num: 500; /* Severity deviation text — на ступень крупнее table-num для BI-scan. * 8-й размер (вне шкалы §5.3 «7 размеров») — exception с документированным * scope: применяется ТОЛЬКО на .ds-rate-* (severity-text в editorial-таблицах). * Обоснование — design-system.md §5.3. * Прецедент exception-паттерна — --fw-severity-arrow в §2b. */ --fs-severity: 15px; /* Column headers (TH) — без uppercase, muted */ --fs-th: 12px; --fw-th: 500; /* Metric label — «план: 5.4 млн ₽», «из 50» */ --fs-label: 13px; --fw-label: 400; /* Microcopy — tooltips, footnotes, badges */ --fs-microcopy: 11px; --fw-microcopy: 500; /* Mono — id, timestamp, activity_id */ --fs-mono: 12px; --fw-mono: 400; /* ═════════════════════════════════════════════════════════ * 2b. Severity density exceptions * Severity-индикаторы (.ds-rate-*, severity-стрелки) требуют усиленной * визуальной плотности — исключения из общих правил weight / stroke-width * (design-system.md §4.3 / §9). НЕ применять к основному тексту и иконкам. * Severity-стрелка — Unicode-глиф (⬇︎, не SVG): эквивалент * stroke-width = font-weight: --fw-severity-arrow (700) на всю величину * .ds-rate-* (число + стрелка) — Unicode ↓↑ оптически узкая форма, нужен вес. * ═════════════════════════════════════════════════════════ */ --fw-severity-arrow: 700; /* вес Unicode-глифов severity-стрелок ↓ ↑ ± */ --stroke-base: 1.25; /* global stroke-width для SVG-иконок */ --stroke-severity: 2; /* stroke-width для SVG-severity (если появится SVG-путь) */ /* ═════════════════════════════════════════════════════════ * 3. Colors — Neutrals (warm paper) * База editorial: тёплая бумажная, graphite-текст (не pure black). * ═════════════════════════════════════════════════════════ */ --bg: #faf9f6; --surface: #ffffff; --surface-2: #f5f4f0; --border: #e8e5dd; --border-muted: #f0ede5; --border-strong: #d6d2c8; /* §6.1 — контур заметности (.ds-role-chip--signal); между --border и --graphite-300 */ --text: #1c1917; --text-muted: #78716c; --text-subtle: #a8a29e; /* ═════════════════════════════════════════════════════════ * 4. Colors — Brand (burgundy / maroon) * Используется СКУПО: активный таб, primary CTA, active-row * highlight, ссылки. Не цвет данных. * ═════════════════════════════════════════════════════════ */ --brand-50: #fdf2f2; --brand-100: #fbe9e8; --brand-200: #f4c7c5; --brand-300: #e49693; --brand-400: #cc6662; --brand-500: #a83b38; --brand-600: #8b2520; --brand-700: #7f1d1d; /* ← primary */ --brand-800: #5f1111; --brand-900: #3f0a0a; --primary: var(--brand-700); --primary-hover: var(--brand-800); --primary-soft: var(--brand-50); --primary-muted: var(--brand-100); /* ═════════════════════════════════════════════════════════ * 5. Colors — Semantic (землистые) * Terracotta вместо saturated red, sage вместо saturated green. * Применяется как tint (подтверждает смысл), а не как label. * ═════════════════════════════════════════════════════════ */ /* Negative — ниже плана, отрицательная дельта * deep-red для читаемости управленцем при беглом скане (design-system.md §4.3) */ --neg-50: #fdf4f0; --neg-500: #b8604c; /* заливка площади ниже цели — только в исключениях design-system.md §4.5; текст — --neg-700 */ --neg-700: #b42318; /* ← text для «−11.3%», стрелка ↓ */ --neg-900: #5c1b14; /* Positive — выше плана, положительная дельта * forest green для читаемости управленцем при беглом скане */ --pos-100: #e6eedc; --pos-500: #6e9670; /* заливка площади выше цели, тише терракоты — только в исключениях design-system.md §4.5; текст — --pos-700 */ --pos-700: #2f6f3a; /* ← text для «+5.2%», стрелка ↑ */ --pos-900: #243514; /* Warning — промежуточное, attention */ --warn-50: #fbf6ea; --warn-200: #efe3c3; /* обводка подсветки совпадения поиска «Паспортов» */ --warn-500: #9a6d28; --warn-700: #6b4a15; /* ═════════════════════════════════════════════════════════ * 6. Colors — Graphite (neutral fills, rhythm) * Для прогресс-баров, sparklines, monochrome-виз. * ═════════════════════════════════════════════════════════ */ --graphite-300: #a8a29e; --graphite-500: #57534e; --graphite-700: #292524; /* ═════════════════════════════════════════════════════════ * 6b. Colors — Category palette (fill/text split) * Единая палитра 6 категорий: fill (все заливки) + text * (только цвет текста метки category-label §11.10). * Multi-color data-viz — единственное исключение из * editorial-монохрома. См. design-system.md §11.5. * ───────────────────────────────────────────────────────── * FILL --cat-* (бары §11.5, точки scatter §11.41, полоска * category-label §11.10, swatch легенды): * ═════════════════════════════════════════════════════════ */ --cat-leader: #3f8f55; /* Лидеры */ --cat-prospect: #4577a0; /* Перспективные */ --cat-norm: #6b6560; /* Норма */ --cat-develop: #9a6d28; /* Развитие */ --cat-focus: #b42318; /* Фокусировка */ --cat-insuf: #c4bdb4; /* Мало данных */ /* TEXT --cat-*-tx (только цвет текста метки §11.10; * тёмная палитра для контраста на --bg #faf9f6; * develop/insuf — text темнее fill): */ --cat-leader-tx: #2f6f3a; /* Лидеры */ --cat-prospect-tx: #3d5a6b; /* Перспективные */ --cat-norm-tx: #57534e; /* Норма */ --cat-develop-tx: #7d5820; /* Развитие (темнее fill) */ --cat-focus-tx: #b42318; /* Фокусировка (= fill) */ --cat-insuf-tx: #78716c; /* Мало данных (= --text-muted; темнее fill) */ /* ═════════════════════════════════════════════════════════ * 7. Interactive states * ═════════════════════════════════════════════════════════ */ --hover-row: var(--surface-2); --active-row: var(--brand-50); --active-row-edge: var(--primary); --focus-ring-color: rgba(127, 29, 29, 0.14); --focus-ring: 0 0 0 3px var(--focus-ring-color); --focus-ring-graphite: 0 0 0 3px rgba(120, 113, 108, 0.14); --focus-border: var(--primary); --selected-bg: var(--brand-100); --selected-border: var(--primary); --disabled-text: var(--text-subtle); --disabled-bg: var(--surface-2); /* ═════════════════════════════════════════════════════════ * 8. Elevation — shadows (только два уровня) * Карточки shadow не имеют. Только overlays. * ═════════════════════════════════════════════════════════ */ --shadow-edge: 0 1px 0 var(--border); --shadow-overlay: 0 8px 24px rgba(28, 25, 23, 0.08), 0 2px 6px rgba(28, 25, 23, 0.04); /* ═════════════════════════════════════════════════════════ * 9. Radius * ═════════════════════════════════════════════════════════ */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-pill: 999px; /* ═════════════════════════════════════════════════════════ * 10. Layout — container * ═════════════════════════════════════════════════════════ */ --content-max-width: 1680px; --content-padding-x: 24px; --fab-size: 44px; /* кнопка «Сообщить» и нижний отступ колонки, §11.79-A */ --fab-bottom: var(--space-6); /* ═════════════════════════════════════════════════════════ * 11. Spacing scale — 4-baseline * Любой spacing в CSS — ТОЛЬКО из этой шкалы. * ═════════════════════════════════════════════════════════ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ═════════════════════════════════════════════════════════ * 12. Vertical rhythm — named gap roles * Используй роль, а не число: если margin-bottom по смыслу * «разделение секций» — бери --gap-page-sections. * ═════════════════════════════════════════════════════════ */ --gap-page-sections: var(--space-12); /* 48px */ --gap-section-header: var(--space-6); /* 24px */ --gap-section-items: var(--space-4); /* 16px */ --gap-card-header: var(--space-5); /* 20px */ --gap-metric-stack: var(--space-1); /* 4px */ --gap-inline: var(--space-2); /* 8px */ /* ═════════════════════════════════════════════════════════ * 13. Table density — compact (default for data tables) * ═════════════════════════════════════════════════════════ */ --table-row-height: 42px; --table-cell-padding-y: 8px; --table-cell-padding-x: 16px; --table-gutter: 24px; --table-header-height: 36px; --table-header-padding-y: 6px; --spark-column-inset: var(--space-2); /* 8px — столбец рядов §11.74: отступ правого края ряда от правого края строк обзора */ /* ═════════════════════════════════════════════════════════ * 13b. Z-index scale (layers) * Слои от базового контента до overlay'ев. В CSS использовать * только через var(--z-*), никаких magic numbers (z-index: 9999). * Если появляется layer, которого нет в шкале — эскалация CTO, * не произвольное число. См. design-system.md §8.3. * ═════════════════════════════════════════════════════════ */ --z-base: 1; --z-float: 50; --z-dropdown: 100; --z-sticky: 200; --z-tooltip: 300; --z-overlay: 400; --z-modal: 500; /* ═════════════════════════════════════════════════════════ * 14. Motion * Editorial-motion: короткие, предсказуемые, скупые. * Две кривых: standard и out. Pulse / bounce / elastic — нет. * ═════════════════════════════════════════════════════════ */ --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; --dur-overlay: 220ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ═══════════════════════════════════════════════════════════ * Accessibility — prefers-reduced-motion * Для пользователей с вестибулярными расстройствами, мигренями, * accessibility-требованиями: все transitions и animations * падают до почти-нуля. * ═══════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }