/* * ========================================================================== * PORTAL TOKENS — единый слой дизайн-токенов портала * Расположение: /public/css/common/portal-tokens.css * Подключается ПЕРВЫМ в , до модульных стилей. * ========================================================================== * * Зачем префикс `--portal-` * ------------------------- * В портале уже жили 350 переменных, и такие имена, как `--accent`, * `--danger`, `--success`, `--radius-card`, в разных модулях означают разное: * `--accent` — это #0ea5e9 в ЭДС, #6366f1 в мониторинге и #ec4899 в * тестировании. Если бы этот файл объявил `--accent` глобально, он молча * переопределил бы значения на трёх страницах. * * Поэтому все токены здесь имеют собственное пространство имён. Добавление * файла не меняет ни одного пикселя: новые имена нигде ещё не используются. * Переход на них идёт покомпонентно, а исторические имена выводятся из * употребления постепенно. * * Значения не придуманы: каждое взято из фактически доминирующего в портале. * В скобках — сколько раз значение встречается в CSS на момент введения. */ :root { /* ==================== ТЕКСТ ==================== */ --portal-text-primary: #0f172a; /* основной текст (330) */ --portal-text-secondary: #64748b; /* вторичный текст (456) */ /* Приглушённый текст остаётся читаемым: у #94a3b8 контраст к белому 2.56, он не проходит порог для основного текста и живёт ниже как декор. */ --portal-text-muted: #64748b; --portal-text-on-accent: #ffffff; /* Только иконки, разделители и неинформационный декор. Текстом не красить. */ --portal-decor-muted: #94a3b8; /* ==================== ПОВЕРХНОСТИ И ГРАНИЦЫ ==================== */ --portal-surface-card: #ffffff; /* карточки, модалки (1935) */ --portal-surface-page: #f8fafc; /* фон страницы (322) */ --portal-surface-sunken: #f1f5f9; /* утопленные блоки (177) */ --portal-border-default: #e2e8f0; /* обычная граница (330) */ --portal-border-strong: #cbd5e1; /* акцентированная граница (150) */ /* ==================== АКЦЕНТ И СОСТОЯНИЯ ==================== */ --portal-accent: #2563eb; /* (603) */ --portal-accent-hover: #1d4ed8; /* (197) */ --portal-accent-surface: #eff6ff; /* (135) */ --portal-danger: #dc2626; /* (212) */ --portal-danger-surface: #fee2e2; /* (52) */ --portal-success: #10b981; /* (140) */ --portal-success-surface: #ecfdf5; /* (33) */ --portal-warning: #f59e0b; /* (157) */ --portal-warning-surface: #fef3c7; /* (48) */ /* ==================== ТИПОГРАФИКА ==================== */ --portal-font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Начертания ограничены тем, что реально загружено (Inter 300–800). Значения 850, 900, 950 и 1000 в старом CSS — legacy: файла с весом 900 портал не подключает, и браузер всё равно показывает 800. */ --portal-weight-regular: 400; --portal-weight-medium: 500; --portal-weight-semibold: 600; --portal-weight-bold: 700; --portal-weight-heavy: 800; --portal-text-caption: 11px; --portal-text-label: 12px; --portal-text-sm: 13px; --portal-text-body: 14px; --portal-text-lg: 16px; --portal-title-card: 18px; --portal-title-section: 20px; --portal-title-page: 24px; --portal-leading-tight: 1.2; /* заголовки */ --portal-leading-body: 1.45; /* интерфейсный текст */ --portal-leading-text: 1.6; /* длинные абзацы */ /* ==================== ГЕОМЕТРИЯ ==================== */ --portal-radius-control: 8px; /* кнопки, поля ввода (339) */ --portal-radius-card: 12px; /* карточки, списки (454) */ --portal-radius-modal: 16px; /* модальные окна (237) */ --portal-radius-panel: 20px; /* крупные панели (201) */ --portal-radius-pill: 999px; /* пилюли, чипы, аватары (252) */ /* Шкала двухпиксельная: так уже написано 92% отступов в портале. */ --portal-space-2xs: 4px; --portal-space-xs: 8px; --portal-space-sm: 12px; --portal-space-md: 16px; --portal-space-lg: 24px; --portal-space-xl: 32px; --portal-border-hairline: 1px; /* (1747) */ --portal-border-emphasis: 2px; /* (249) */ /* ==================== ПОВЕРХНОСТИ ПО ВЫСОТЕ ==================== */ --portal-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.12); --portal-shadow-subtle: 0 1px 3px rgba(15, 23, 42, 0.06); --portal-shadow-card: 0 4px 12px rgba(15, 23, 42, 0.06); --portal-shadow-raised: 0 8px 24px rgba(15, 23, 42, 0.10); --portal-shadow-overlay: 0 20px 48px rgba(15, 23, 42, 0.18); /* ==================== СЛОИ ==================== */ /* Контракт отношений (числа вторичны, важен порядок): base < sticky < header < workspace-overlay < mobile-nav < dropdown < tooltip < drawer < backdrop < modal < modal-popover < confirm < toast < critical Мигрируются КОРНИ реальных stacking context и точки их взаимодействия. Внутренние уровни изолированного компонента остаются локальными: поднимать их глобально не нужно и вредно. */ --portal-z-base: 0; --portal-z-sticky: 100; --portal-z-header: 200; /* Полноэкранные рабочие поверхности: чат, почта. Это не блокирующая модалка, а часть обычной навигации по порталу, поэтому нижняя мобильная панель остаётся над ними доступной. */ --portal-z-workspace-overlay: 300; --portal-z-mobile-nav: 400; --portal-z-dropdown: 500; --portal-z-tooltip: 550; --portal-z-drawer: 600; --portal-z-backdrop: 700; --portal-z-modal: 800; /* Всплывающее, открытое ИЗ модального окна: календарь, выпадающий список, подсказка. Обязано быть выше модалки и ниже подтверждения. */ --portal-z-modal-popover: 850; /* Блокирующее подтверждение: пока оно открыто, пользователь не должен дотянуться ни до нижней навигации, ни до модалки под ним. */ --portal-z-confirm: 880; --portal-z-toast: 40000; --portal-z-critical: 41000; }