/* ========================================================= TEAM VOICE — ТОКЕНЫ ДИЗАЙНА Единственное место, где объявлены CSS-переменные и порядок слоёв. Значения перенесены из static/css/app.css без изменений. ========================================================= */ /* Порядок слоёв. Объявлен здесь, потому что этот файл подключается первым: порядок из @layer-инструкции фиксируется при первой встрече имени слоя. Остальные файлы только ДОБАВЛЯЮТ правила в слои. */ @layer tokens, base, layout, components, features, pages; /* ========================================================= СЛОЙ tokens — переменные ========================================================= */ @layer tokens { :root { /* ===================================================== ТЁМНАЯ НЕОНОВАЯ ТЕМА Значения — из согласованного дизайн-решения (гибрид Flat Neon + Glass Neon). Прежние значения оставлены в комментариях: это тёмно-серая тема «как в Discord». ===================================================== */ /* --- поверхности: глубокий тёмно-фиолетовый, а не серый --- */ --bg-app: #07060d; /* был #313338, затем #0b0a12 */ --bg-sidebar: #13111c; /* был #2b2d31 */ --bg-sidebar-dark: #0e0d14; /* был #1e1f22 */ --bg-panel: #1a1725; /* был #232428 */ --bg-input: #221e30; /* был #383a40 */ --bg-menu: #1a1725; /* был #111214 */ --bg-hover: #241f35; /* был #35373c */ --bg-active: #2d2645; /* был #404249 */ --bg-danger: #4a1d2e; /* был #da373c — теперь мягче, фоном */ /* Нейтральная кнопка: фон и ховер. Заведены при переводе литералов (было #4e5058 и #6d6f78 в .avatar-upload-btn, .voice-btn.neutral, .user-card-btn и других) — в палитре не было подходящего по смыслу. */ --bg-neutral: #241f35; --bg-neutral-hover: #2d2645; /* Ховер круглой кнопки голосовой панели (.vcb-btn): на ступень светлее --bg-neutral, отдельный оттенок, поэтому отдельный токен. */ --bg-neutral-hover-strong: #322b4d; /* --- акценты --- */ --accent: #a855f7; /* был #5865f2 — неоновый фиолетовый */ --accent-hover: #c084fc; /* был #4752c4 */ /* Текст и иконки на акцентном фоне. Внимание: это НЕ белый. На светлом фиолетовом #a855f7 белый текст даёт контраст 3.96:1 (норма WCAG AA для обычного текста — 4.5:1), а на ховере #c084fc всего 2.64:1 — кнопки стали бы трудночитаемыми. Тёмный текст даёт 4.98:1 и 7.45:1, поэтому он и выбран: светящаяся кнопка с тёмной надписью. */ --on-accent: #0b0a12; /* Второй акцент — циан. Редкий: отдельные бейджи, закреплённый участник. Для основных кнопок не использовать. */ --accent-2: #22d3ee; /* Третий акцент — маджента. Только внутри --gradient-accent. */ --accent-3: #ec4899; /* Полупрозрачные подложки под акцент. */ --accent-soft: rgba(168, 85, 247, 0.15); /* Зарево под панелями: крупное мягкое пятно акцента на фоне приложения. В референсах панели лежат на тёмном фоне с таким заревом, и оно видно сквозь стекло — это и даёт ощущение прозрачности, а не «плоской заливки». Прозрачность низкая: задача не «подсветить», а «сделать фон живым». */ --accent-bleed: rgba(168, 85, 247, 0.06); --accent-2-soft: rgba(34, 211, 238, 0.15); --accent-gradient: linear-gradient(135deg, #a855f7 0%, #ec4899 100%); --accent-gradient-hover: linear-gradient(135deg, #c084fc 0%, #f472b6 100%); /* Ссылки и акцент, отличный от --accent (было #00a8fc). */ --link: #22d3ee; /* --- текст --- */ /* --- каналы акцентных цветов --- Нужны, чтобы задавать полупрозрачность, не вписывая цвет числом: rgba(var(--accent-rgb), 0.15). Иначе при смене палитры такие места остаются от прежней темы — так уже было в 7 местах (упоминания в чате, цитаты ответов, подсветка сообщения) и в 3 местах пульсации «говорит». */ --accent-rgb: 168, 85, 247; --success-rgb: 34, 197, 94; --warning-rgb: 240, 178, 50; /* Тёмные подложки: затемняют содержимое под собой. Значение не из палитры (это не цвет темы, а степень затемнения), поэтому отдельные токены — чтобы не расползались по файлам числами. */ --overlay-modal: rgba(0, 0, 0, 0.7); /* затемнение под окнами */ --overlay-strong: rgba(0, 0, 0, 0.85); /* сцена демонстрации на весь экран */ --overlay-soft: rgba(0, 0, 0, 0.55); /* подписи поверх видео */ --bg-neutral-soft: rgba(78, 80, 88, 0.15); /* цитата ответа */ --text-primary: #f5f3ff; /* был #f2f3f5 — с фиолетовым отливом */ --text-normal: #d4d0e0; /* был #dbdee1 */ --text-muted: #a6a0b8; /* был #948fa8; на прежнем сером фоне хватало 6.33:1, но на новом почти чёрном текст выцвел. Здесь 7.82:1 — прежний тон вернулся. */ --text-dim: #a8a2ba; /* светлее: давало 5.02:1, стало 8.01:1. Предложенное #6b6680 давало 3.60:1 на --bg-app — ниже порога для обычного текста. Это значение даёт 4.55:1. */ --text-faint: #7a7490; /* был #4a4659: на тёмном фоне давал 2.17:1 — почти не читался. Сейчас 4.05:1 — служебные подписи читаются. */ --text-icon: #8b85a0; /* был #80848e */ /* Белый: текст и иконки на насыщенном тёмном фоне (опасные и успешные кнопки). На акценте используется --on-accent, см. выше. */ --white: #ffffff; /* --- статусы: не смешивать с неоном --- */ --success: #22c55e; /* был #23a55a */ --success-hover: #16a34a; --warning: #f0b232; /* без изменений */ --danger: #ef4444; /* был #ed4245 */ --danger-hover: #dc2626; --offline: #6b6680; /* был #80848e */ /* --- границы --- Сделаны ПОЛУПРОЗРАЧНЫМИ в предложенном решении, но здесь взяты непрозрачными: по DESIGN.md полупрозрачный слой поверх контента — отдельное решение, а границ в проекте 31 место, и на разных фонах rgba читался бы по-разному. Непрозрачный тон даёт тот же оттенок предсказуемо. Отдельный токен --border-glow — для акцентных границ. */ --border: #241f35; /* был #1e1f22 */ --border-soft: #1a1725; /* был #35363c */ --border-glow: rgba(168, 85, 247, 0.25); /* Синоним --border-glow: имя из дизайн-списка, значение то же, чтобы не заводить второй оттенок того же назначения. */ --border-strong: rgba(168, 85, 247, 0.25); /* Свечение: ТОЛЬКО на активных состояниях. Спокойный элемент не светится. Значения — размытые и приглушённые: плотное короткое свечение читалось как грубая обводка. Здесь большой радиус размытия при низкой прозрачности, поэтому элемент «подсвечен», а не «обведён». */ --glow-accent: 0 0 18px rgba(168, 85, 247, 0.32), 0 0 48px rgba(168, 85, 247, 0.16); --glow-accent-lg: 0 0 28px rgba(168, 85, 247, 0.36), 0 0 80px rgba(168, 85, 247, 0.18); --glow-success: 0 0 18px rgba(34, 197, 94, 0.30), 0 0 44px rgba(34, 197, 94, 0.15); --glow-danger: 0 0 18px rgba(239, 68, 68, 0.30), 0 0 44px rgba(239, 68, 68, 0.15); --glow-cyan: 0 0 18px rgba(34, 211, 238, 0.30), 0 0 44px rgba(34, 211, 238, 0.15); /* Неоновая кнопка: яркая чёткая грань плюс широкий мягкий ореол и внутреннее свечение. В референсе светящиеся панели устроены именно так: контур яркий и читаемый, а свечение вокруг большое и размытое. Тусклая грань при мягком ореоле даёт «размытое пятно», а не неон; яркая грань без ореола — просто обводку. Нужны оба. */ --neon-edge: rgba(168, 85, 247, 0.72); --neon-edge-hot: rgba(192, 132, 252, 0.95); /* Градиентная неоновая грань: циан слева, маджента справа, между ними фиолетовый — как у светящейся кнопки в референсе. У кольца аватара тот же переход, но по диагонали: круг читается лучше. */ /* Непрозрачное тело для элементов с градиентной гранью. Полупрозрачное тело здесь не работает: нижний слой фона — тот же градиент, и он просвечивает сквозь тело, заливая кнопку цветом целиком вместо полосы границы. Значение — это --glass-bg, положенный на фон приложения. */ --neon-body: #0a0813; --neon-grad: linear-gradient(100deg, var(--accent-2) 0%, var(--accent) 48%, var(--accent-3) 100%); --neon-ring: linear-gradient(150deg, var(--accent-2) 0%, var(--accent-3) 100%); /* Свечение кольца: два цвета, потому что и само кольцо двухцветное. */ --neon-ring-glow: 0 0 7px rgba(34, 211, 238, 0.45), 0 0 16px rgba(236, 72, 153, 0.35); --neon-glow: 0 0 4px rgba(168, 85, 247, 0.70), 0 0 16px rgba(168, 85, 247, 0.38), 0 0 44px rgba(168, 85, 247, 0.18); /* Кольцо фокуса — для доступности с клавиатуры. */ --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--accent); /* Стекло. Изначально решалось «только модалки и тултипы, не панели», но по референсам дизайнера стеклянными стали и панели каркаса (рейл серверов, каналы, участники, панель пользователя, шапка). Прозрачность ниже половины и размытие фона: сквозь панель должно быть ВИДНО свечение фона — иначе это не стекло, а цветная заливка. */ --glass-bg: rgba(10, 8, 16, 0.55); --glass-border: rgba(168, 85, 247, 0.35); /* Затемнение фона ПОД стеклом: фон остаётся виден, но приглушён, поэтому блок читается тёмным и при этом остаётся стеклом. Просто поднять непрозрачность — значит потерять стекло: при 0.72 фон через панель уже не читался и она выглядела чёрной заливкой. */ /* Светлое размытие: фон под стеклом не затемняется, а подсвечивается — блок выглядит засвеченным, как матовое стекло на свету. Раньше стояло затемнение (brightness 0.5); по замечанию дизайнера размытие должно быть светлым. */ --glass-blur: brightness(1.3) blur(7px); /* Верхний блик панели: свет падает сверху, верхняя часть стекла светлее. Без него панель выглядит плоской заливкой. */ --glass-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 200px); /* Кромка стекла: светлая тонкая линия по краю панели. На тёмных фонах проекта разницу видно только у непрозрачных панелей, поэтому значения подобраны плотнее, чем в референсах на светлом фоне. */ --rim: rgba(255, 255, 255, 0.12); --rim-strong: rgba(255, 255, 255, 0.20); /* Объёмная панель. Панели разведены зазором и получили собственный контур, поэтому читаются как отдельные стеклянные блоки, а не как одна плоская поверхность, разрезанная линиями. Тень даёт отрыв от фона (объём), внутренняя подсветка — блик на верхней грани (стекло). */ --panel-gap: 10px; --panel-shadow: 0 26px 60px rgba(0, 0, 0, 0.85); --panel-shadow-hover: 0 32px 72px rgba(0, 0, 0, 0.82); /* Фон медиа-области: сцена демонстрации экрана (было #000). Единственное место с чистым чёрным; в палитре не было подходящего — --bg-menu темнее меню и для сцены не подходит по смыслу. Судьба оттенка (оставить чёрным или приглушить) — решение дизайнера. */ --bg-media: #000000; --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border-soft); --shadow-modal: 0 16px 56px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--border); /* Подсветка верхнего края круглых кнопок голосовой панели: даёт «стеклянный» вид без backdrop-filter и без нагрузки на слабых ПК. */ --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.20); --inset-glow: inset 0 0 12px rgba(168, 85, 247, 0.25); /* Фон приложения: сетка сот со светящимися гранями. Файл прислан дизайнером (Frame 1.svg), взят как есть — векторный и самодостаточный, поэтому остаётся резким на любом мониторе и при высоком DPI. Растягивается через background-size: cover; повтор не нужен, полотно уже нарисовано на весь экран. Цвета в файле свои, из токенов не берутся: картинка-фон читать токены не умеет. */ --bg-pattern: url("../img/bg-honeycomb.e86b555e108f.webp"); /* Базовый цвет картинки фона (замерен по её краям). Поля вокруг картинки, когда она показана целиком, заливаются им — тогда границы не видно. */ --bg-pattern-base: #12091c; /* Свечение бегунка ползунка: плотнее общего --glow-accent, иначе круглый бегунок малого размера светится слишком рассеянно. */ --glow-thumb: 0 0 6px rgba(168, 85, 247, 0.5), 0 0 16px rgba(168, 85, 247, 0.25); /* Радиусы увеличены под более мягкую, «капсульную» форму. */ --radius-sm: 6px; /* был 4px */ --radius-md: 12px; /* был 6px */ --radius-lg: 16px; /* был 8px */ --radius-xl: 20px; /* был 12px */ --radius-pill: 999px; /* для кнопок-капсул */ --radius-round: 50%; --transition-fast: 0.1s; --transition-base: 0.15s; /* Брейкпоинты — согласованная шкала. CSS не умеет var() в условии @media, поэтому числа дублируются в запросах, а токены здесь — единственное место, где шкала объявлена и объяснена (DESIGN.md, раздел 5). Подход desktop-first: базовые правила описывают широкий экран, а media-запросы — уточнения для узкого; запрос пишется РЯДОМ с уточняемым правилом и в том же слое, что и оно. Где шкала применена (аудит P5, фундамент адаптива): --bp-sm (480px) — телефон: страница настроек, страница голосового канала и витрина больше не вылезают за экран; --bp-md (768px) — узкий планшет: пока только задел. Каркас приложения (три колонки) требует ≥ 594 px, его мобильная раскладка — отдельная задача, а не этот фундамент; --bp-lg / --bp-xl — не используются: широкий каркас тянется сам. */ /* Шрифт интерфейса. Раньше список был вписан прямо в body (app.css); токен заведён, чтобы компоненты ссылались на него, а не повторяли. */ --font-ui: system-ui, -apple-system, sans-serif; /* Моноширинный шрифт: код в сообщениях, шкала микрофона, настройки. */ --font-mono: Consolas, "Courier New", monospace; --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; } }