/* * Токены дизайн-системы EGO — палитра «Электро-спектр» (Р-107). * * Файл — отражение документов, а не самостоятельный источник: значения * перенесены один в один из docs/design-colors.md (цвет) и docs/design.md * (типографика, сетка, формы, motion). Новое значение сначала появляется в * документе, потом здесь (правило CLAUDE.md №11). Живой образец системы — * docs/design-preview.html. * * ФАЙЛ ОДИН НА ЧЕТЫРЕ МОДУЛЯ. Копии в egoweb, egoadminpanel, egocaptcha и * (в фазе 5) egopartner обязаны совпадать побайтно: у каждого модуля свой * контейнер, и Dockerfile копирует только его каталог — общей папки быть не * может. Правка вносится во все копии в одной сессии, расхождение заводится * долгом (CLAUDE.md №1a). * * Устройство тем (docs/design-themes.md §3): * :root — светлая, работает и без data-theme * :root[data-theme="dark"], .theme-dark — тёмная и «тёмный остров» * :root[data-theme="auto"] + @media — решение отдано системе * .theme-light — светлый остров внутри тёмной темы * Значения продублированы намеренно: CSS не умеет наследовать блок объявлений. */ /* Шрифт вендорится (CLAUDE.md №18): один вариативный файл на подмножество вместо пяти начертаний. Comfortaa выведена вместе со старым лок-апом — слово «EGO» набирается Manrope 800 с трекингом (docs/design.md §2) */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../vendor/fonts/manrope-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../vendor/fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ═══ СВЕТЛАЯ ТЕМА — основная (design-colors.md §4) ═══════════════════════ */ :root { color-scheme: light; /* ─── Нейтраль ───────────────────────────────────────────────────────── */ /* Фон чистый белый: подкрашенный съедает яркость акцентов, ради которых палитра и заводилась. Поверхность совпадает с фоном намеренно — карточку держит граница, а не разница светлоты (она здесь 1.07–1.12 : 1) */ --bg: #FFFFFF; --bg-subtle: #F7F7FB; --surface: #FFFFFF; --surface-raised: #FFFFFF; --fill: #F1F1F8; --fill-strong: #E7E7F0; --text: #0B0B14; --text-secondary: #55556B; --text-muted: #6E6E88; --border: #E7E7F0; --border-strong: #D2D2E2; --overlay: rgba(11, 16, 32, 0.45); /* ─── Спектр: шесть цветов, от темы не зависят (design-colors.md §2) ─── */ --violet: #6E56F8; --fuchsia: #E45BF0; --cyan: #22D3EE; --lime: #C6F84E; --coral: #FF6B57; --amber: #FFB020; /* Семантика. `warning` и `info` совпадают с цветами спектра намеренно: второй жёлтый рядом с янтарём гарантированно перепутают */ --success: #12B981; --danger: #E11D48; --warning: var(--amber); --info: var(--cyan); /* ─── Текст на заливке (design-colors.md §3.1) ────────────────────────── */ /* Правило одной фразой: на цветах спектра текст чернильный, на violet и danger — белый. `--ink` от темы не зависит: это не «цвет текста светлой темы», а чёрный, который кладут на яркое */ --ink: #0B0B14; --on-bright: var(--ink); --on-violet: #FFFFFF; --on-danger: #FFFFFF; /* ─── Текст цветом на фоне (design-colors.md §3.2) ────────────────────── */ /* Заливкой красить текст нельзя: лайм на белом — 1.24 : 1 */ --violet-text: #6E56F8; --fuchsia-text: #C026D3; --cyan-text: #0E7490; --lime-text: #4D7C0F; --coral-text: #D6402A; --amber-text: #B45309; --success-text: #0B7E57; --danger-text: #C2103B; --warning-text: var(--amber-text); --info-text: var(--cyan-text); /* ─── Наведение (design-colors.md §3.3) ──────────────────────────────── */ --violet-hover: #5B41F0; --danger-hover: #C2103B; --fill-hover: var(--fill-strong); /* ─── Подложки ───────────────────────────────────────────────────────── */ /* Считаются, а не заводятся HEX-ом: тогда подложка не может разойтись с цветом, от которого произошла, и сама меняется вместе с темой */ --soft: 12%; --violet-soft: color-mix(in srgb, var(--violet) var(--soft), transparent); --fuchsia-soft: color-mix(in srgb, var(--fuchsia) var(--soft), transparent); --cyan-soft: color-mix(in srgb, var(--cyan) var(--soft), transparent); --lime-soft: color-mix(in srgb, var(--lime) var(--soft), transparent); --coral-soft: color-mix(in srgb, var(--coral) var(--soft), transparent); --amber-soft: color-mix(in srgb, var(--amber) var(--soft), transparent); --success-soft: color-mix(in srgb, var(--success) var(--soft), transparent); --danger-soft: color-mix(in srgb, var(--danger) var(--soft), transparent); --warning-soft: var(--amber-soft); --info-soft: var(--cyan-soft); /* ─── Тени и свечение (design-colors.md §4) ──────────────────────────── */ /* Тень — только у поднятого над страницей: модалка, шторка, липкая шапка. Карточка в потоке тени не имеет, её держит граница */ --shadow-1: 0 1px 2px rgba(11, 11, 20, .06), 0 8px 24px -12px rgba(11, 11, 20, .12); --shadow-2: 0 24px 64px -20px rgba(11, 11, 20, .22); --glow-primary: 0 10px 30px -12px rgba(110, 86, 248, .55); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--violet) 45%, transparent); /* ─── Градиенты: пять, шестого не бывает (design-colors.md §6) ───────── */ --gradient-brand: linear-gradient(135deg, #6E56F8, #E45BF0); --gradient-cool: linear-gradient(135deg, #22D3EE, #6E56F8); --gradient-warm: linear-gradient(135deg, #FF6B57, #FFB020); --gradient-spark: linear-gradient(135deg, #C6F84E, #22D3EE); --gradient-spectrum: linear-gradient(100deg, #6E56F8, #E45BF0 45%, #FF6B57); /* Фоновая подсветка: три пятна, все вынесены за край холста — текст обязан лежать на чистом фоне (design-colors.md §6) */ --ambient: radial-gradient(60% 45% at 88% -8%, color-mix(in srgb, var(--violet) 16%, transparent), transparent 70%), radial-gradient(50% 40% at -8% 12%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 70%), radial-gradient(70% 50% at 50% 108%, color-mix(in srgb, var(--fuchsia) 10%, transparent), transparent 70%); /* ─── Акценты разделов (design-colors.md §7) ─────────────────────────── */ /* Раздел красит навигацию, заголовок и плашку — и ничего больше. Смысл во всех разделах одинаков и берётся из семантики */ --accent: var(--violet); --accent-text: var(--violet-text); --accent-soft: var(--violet-soft); --accent-gradient: var(--gradient-brand); /* ─── Производные: приоритеты, статусы, состояния модулей ────────────── */ /* Ссылками, а не копиями кодов: иначе перестанут меняться вместе с темой */ --priority-urgent: var(--danger); --priority-high: var(--warning); --priority-medium: var(--violet); --priority-low: var(--text-muted); --status-todo: var(--text-secondary); --status-in-progress: var(--violet); --status-done: var(--success); --status-cancelled: var(--text-muted); --module-online: var(--success); --module-degraded: var(--warning); --module-down: var(--danger); --module-paused: var(--text-muted); --module-review: var(--cyan); /* ─── Типографика (design.md §2) ─────────────────────────────────────── */ --font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace; /* clamp вместо трёх медиазапросов: текст растёт плавно, а не ступенями */ --text-display: clamp(40px, 1.6rem + 4.2vw, 72px); --text-h1: clamp(32px, 1.5rem + 2.2vw, 48px); --text-h2: clamp(24px, 1.25rem + 1.2vw, 34px); --text-h3: clamp(20px, 1.15rem + 0.5vw, 24px); --text-body-lg: 18px; --text-body: 16px; --text-small: 14px; --text-micro: 12px; --text-button: 15px; --text-metric: clamp(28px, 1.4rem + 2vw, 44px); --lh-display: 1.05; --lh-h1: 1.1; --lh-h2: 1.2; --lh-h3: 1.3; --lh-body: 1.55; --lh-small: 1.5; --tracking-display: -0.03em; --tracking-heading: -0.02em; --tracking-label: 0.12em; --tracking-word: 0.08em; /* слово «EGO» набором, а не лок-апом */ --measure: 68ch; /* ─── Отступы: шаг 4 (design.md §3.3) ────────────────────────────────── */ --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; --space-24: 96px; /* Поля страницы: телефон 16 → планшет 24 → ПК 32 (переопределяются ниже) */ --page-padding: 16px; /* ─── Радиусы (design.md §5.1) ───────────────────────────────────────── */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px; --radius-pill: 999px; /* ─── Размеры (design.md §9) ─────────────────────────────────────────── */ --h-button-lg: 52px; --h-button: 44px; --h-button-sm: 36px; --h-input: 52px; --h-topbar: 64px; --h-topbar-mobile: 56px; --h-tabbar: 64px; --h-row: 44px; --size-checkbox: 22px; --avatar-profile: 96px; --avatar-chat: 28px; /* ─── Ширины (design.md §3.2) ────────────────────────────────────────── */ --container: 1200px; --container-wide: 1360px; --reading: 820px; --form: 460px; --auth-card: 420px; --side-width: 260px; --rail-width: 76px; /* ─── Motion (design.md §8) ──────────────────────────────────────────── */ --motion-fast: 120ms; --motion: 220ms; --motion-screen: 240ms; --motion-layer: 280ms; --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1); /* ─── Bootstrap 5.3.3 (design.md §11) ────────────────────────────────── */ /* Его компоненты — модалка, шторка, выпадающее меню — обязаны брать нашу палитру, а не свою. Подменяем переменные, а не пересобираем библиотеку */ --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-emphasis-color: var(--text); --bs-secondary-color: var(--text-secondary); --bs-tertiary-color: var(--text-muted); --bs-tertiary-bg: var(--fill); --bs-secondary-bg: var(--bg-subtle); --bs-border-color: var(--border); --bs-border-radius: var(--radius-md); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); --bs-border-radius-xl: var(--radius-xl); --bs-primary: var(--violet); --bs-primary-rgb: 110, 86, 248; --bs-link-color: var(--violet-text); --bs-link-hover-color: var(--violet-hover); --bs-success: var(--success); --bs-danger: var(--danger); --bs-warning: var(--warning); --bs-info: var(--info); --bs-font-sans-serif: var(--font-family); --bs-font-monospace: var(--font-mono); --bs-body-font-size: var(--text-body); --bs-body-font-weight: 400; --bs-body-line-height: var(--lh-body); --bs-focus-ring-color: color-mix(in srgb, var(--violet) 45%, transparent); } /* Поля страницы по зонам (design.md §3.3). Держатся здесь, а не в модуле: от них зависит каждый экран, и расхождение видно сразу */ @media (min-width: 768px) { :root { --page-padding: 24px; } } @media (min-width: 1200px) { :root { --page-padding: 32px; } } /* ═══ ТЁМНАЯ ТЕМА (design-colors.md §5) ═══════════════════════════════════ Меняются только цвета, тени и доля подложек. Раскладка, отступы, радиусы и типографика от темы не зависят — компонент, свёрстанный по токенам, живёт в обеих без единой правки (design-themes.md §2). Второй селектор — «тёмный остров»: блок тёмной палитры внутри светлой страницы. Отдельным набором цветов его делать нельзя, разойдётся с темой при первой же правке (design-themes.md §6). */ :root[data-theme="dark"], .theme-dark { color-scheme: dark; /* Фон чистый чёрный: на OLED он не светится вовсе, и спектр на нём максимально яркий. Поверхности при этом не чёрные — карточка на #000 неотличима от пустоты, а бордер в одиночку крупный блок не держит */ --bg: #000000; --bg-subtle: #08080C; --surface: #0E0E16; --surface-raised: #171720; --fill: #14141C; --fill-strong: #1E1E29; --text: #F7F7FC; --text-secondary: #A7A7C0; --text-muted: #8686A0; --border: #22222E; --border-strong: #33334A; --overlay: rgba(0, 0, 0, 0.65); /* Спектр не меняется — это точки опоры тем. Меняются производные роли */ --violet-text: #9A8CFF; --fuchsia-text: #E45BF0; --cyan-text: #22D3EE; --lime-text: #C6F84E; --coral-text: #FF8A7A; --amber-text: #FFB020; --success-text: #2EE6A0; --danger-text: #FF5C7A; /* Заливка главной кнопки на наведении НЕ светлеет: любой светлее #6E56F8 фиолет роняет белый текст ниже 4.5 : 1 (design-colors.md §9). В тёмной теме наведение выражается свечением */ --violet-hover: #6E56F8; --danger-hover: #FF5C7A; --soft: 18%; --shadow-1: none; --shadow-2: 0 24px 64px -20px rgba(0, 0, 0, .8); --glow-primary: 0 0 0 1px color-mix(in srgb, var(--violet) 35%, transparent), 0 12px 40px -16px rgba(110, 86, 248, .65); } /* Авто: решение отдано системе и срабатывает, только когда выбора не сделано */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; --bg: #000000; --bg-subtle: #08080C; --surface: #0E0E16; --surface-raised: #171720; --fill: #14141C; --fill-strong: #1E1E29; --text: #F7F7FC; --text-secondary: #A7A7C0; --text-muted: #8686A0; --border: #22222E; --border-strong: #33334A; --overlay: rgba(0, 0, 0, 0.65); --violet-text: #9A8CFF; --fuchsia-text: #E45BF0; --cyan-text: #22D3EE; --lime-text: #C6F84E; --coral-text: #FF8A7A; --amber-text: #FFB020; --success-text: #2EE6A0; --danger-text: #FF5C7A; --violet-hover: #6E56F8; --danger-hover: #FF5C7A; --soft: 18%; --shadow-1: none; --shadow-2: 0 24px 64px -20px rgba(0, 0, 0, .8); --glow-primary: 0 0 0 1px color-mix(in srgb, var(--violet) 35%, transparent), 0 12px 40px -16px rgba(110, 86, 248, .65); } } /* Светлый остров внутри тёмной страницы. Нужен там, где содержимое светлое по природе и перекрасить его нельзя: картинка капчи рисуется сервером на светлом фоне (design-themes.md §5.5) */ .theme-light { color-scheme: light; --bg: #FFFFFF; --bg-subtle: #F7F7FB; --surface: #FFFFFF; --surface-raised: #FFFFFF; --fill: #F1F1F8; --fill-strong: #E7E7F0; --text: #0B0B14; --text-secondary: #55556B; --text-muted: #6E6E88; --border: #E7E7F0; --border-strong: #D2D2E2; --violet-text: #6E56F8; --fuchsia-text: #C026D3; --cyan-text: #0E7490; --lime-text: #4D7C0F; --coral-text: #D6402A; --amber-text: #B45309; --success-text: #0B7E57; --danger-text: #C2103B; --violet-hover: #5B41F0; --soft: 12%; } /* Акценты разделов. Класс ставится на или на оболочку экрана: раздел узнаётся по цвету раньше, чем прочитан заголовок (design-colors.md §7) */ .accent-violet { --accent: var(--violet); --accent-text: var(--violet-text); --accent-soft: var(--violet-soft); --accent-gradient: var(--gradient-brand); } .accent-coral { --accent: var(--coral); --accent-text: var(--coral-text); --accent-soft: var(--coral-soft); --accent-gradient: var(--gradient-warm); } .accent-cyan { --accent: var(--cyan); --accent-text: var(--cyan-text); --accent-soft: var(--cyan-soft); --accent-gradient: var(--gradient-cool); } .accent-amber { --accent: var(--amber); --accent-text: var(--amber-text); --accent-soft: var(--amber-soft); --accent-gradient: var(--gradient-warm); } .accent-lime { --accent: var(--lime); --accent-text: var(--lime-text); --accent-soft: var(--lime-soft); --accent-gradient: var(--gradient-spark); } .accent-spectrum { --accent: var(--violet); --accent-text: var(--violet-text); --accent-soft: var(--violet-soft); --accent-gradient: var(--gradient-spectrum); }