/* ============================================================================ [DESIGN TOKENS] Единый слой семантических токенов дизайн-системы (DS9 W1). ---------------------------------------------------------------------------- Файл ПЕРЕЕХАЛ из style.css :root (DS9 волна 1) и подключается ПЕРВЫМ на ВСЕХ страницах (index.html, login.html, profile.html) — до style.css/themes.css. ПРИНЦИП: цветовые токены по умолчанию НАСЛЕДУЮТ палитру Telegram (--tg-theme-*), поэтому внутри Telegram WebApp вид остаётся «родным». В браузере/Android, где выставляется body[data-theme="light|dark|кастом"], --tg-theme-* переопределяются нашими значениями (см. палитры тем в ОТДЕЛЬНОМ файле themes.css) — токены подхватывают их. ПРАВИЛО: новый CSS НЕ хардкодит цвета/радиусы/шрифты/тени — только var(--*) отсюда. ПРИМЕЧАНИЕ (W1): login.html/profile.html пока СОХРАНЯЮТ свои малые inline-:root (страничные переопределения с иными dark-фолбэками) — они выигрывают каскад по порядку документа; сводятся к нулю в волнах 2/5 при унификации палитры. ============================================================================ */ :root { /* --- Цвета: наследуют TG-палитру, fallback для не-Telegram сред --- */ --c-bg: var(--tg-theme-bg-color, #ffffff); --c-surface: var(--tg-theme-secondary-bg-color, #efeff4); --c-text: var(--tg-theme-text-color, #000000); --c-hint: var(--tg-theme-hint-color, #8e8e93); --c-accent: var(--tg-theme-button-color, #3390ec); --c-on-accent: var(--tg-theme-button-text-color, #ffffff); --c-link: var(--tg-theme-link-color, #1a6ede); /* Фирменный цвет бренда (wordmark/логотип) — узнаваемость, НЕ заливка кнопок */ --c-brand: #75aaea; /* --- Семантические статусы (отсутствуют в TG-палитре) --- */ --c-success: #30d158; --c-success-soft:#4cd964; /* мягкий зелёный для галочек/бейджей */ --c-danger: #ff3b30; --c-warning: #ff9500; --c-frozen: #5ac8fa; /* «заморозка» записи */ --c-expired: #8e8e93; /* истёкшие слоты */ --c-chat-check-read: #9be8c8; /* [DS9 W5] спокойный мятный — ✓✓ «прочитано» в чате (на акцентном пузыре) */ --c-chat-status-waiting: #c87000; /* статус «ожидание» в чате — тёмный янтарь (читаем на светлом фоне) */ --c-chat-status-active: #18a05e; /* [DS9 W5] статус «активен» в чате = зелёный статуса partial */ /* Кнопка «Создать график» на главной (.home-cta-btn) — СВОЙ цвет, разнесён с общей заливкой primary-кнопок (--c-btn-bg/--th-btn-bg): это главная точка входа новичка, её выделяют независимо от остальных кнопок. Per-theme → --th-cta-create в themes.css. */ --c-cta-create: #2b7de9; /* [ЗАДАЧА 1] Кнопка «Быстрая запись» слева на синей полосе (база/Системная тема). Переопределяется per-theme через --th-booknear-* в themes.css. */ --c-booknear-bg: #0d47a1; /* тёмно-синяя заливка (темнее полосы — выделяется) */ --c-booknear-border: rgba(255,255,255,.25); /* тонкая светлая рамка — лёгкое выделение */ --c-booknear-icon: #ffffff; /* белая подпись + иконка на тёмно-синем */ /* --- [SLOT STRIP] Новый дизайн полосы слота (база / Системная тема, светлый вариант). Тинт всего слота наследует цвет состояния; кнопка действия — свой фон + контур; индикатор заполнения — тонкая полоса снизу. Per-theme → --th-slot-* в themes.css. --- */ /* [DS9 W2] Фоны слотов нейтрализованы (= surface-1): статус несёт полоска 3px + чип. */ --c-slot-free-bg: #ffffff; /* фон слота: есть места — нейтральный (surface-1) */ --c-slot-partial-bg: #ffffff; /* фон слота: наполняется — нейтральный (surface-1) */ --c-slot-full-bg: #ffffff; /* фон слота: мест нет — нейтральный (surface-1) */ --c-slot-busy-bg: #ffffff; /* фон слота: я записан — нейтральный (surface-1) */ --c-slot-btn-free-bg: transparent; /* [DS9 W2] кнопка «Записаться» — контурная (ghost) */ --c-slot-btn-free-border: rgba(16,24,40,.18); /* кнопка «Записаться» — контур border-strong */ --c-slot-btn-busy-bg: transparent; /* [DS9 W2] кнопка «Отменить» — контурная (ghost) */ --c-slot-btn-busy-border: #e5484d; /* кнопка «Отменить» — контур цветом статуса */ --c-slot-fill-track: rgba(0,0,0,.10); /* индикатор заполнения — дорожка (пустая часть) */ /* --- FOCUS GLOW (DS7) --- */ /* Свечение фокуса/ошибки — вместо color-mix: надёжнее для старых WebView */ --c-accent-glow: rgba(43,125,233,.18); /* светлый ореол акцента (фокус инпута) */ --c-danger-glow: rgba(255,59,48,.20); /* ореол ошибки (error-состояние инпута) */ /* --- [TOGGLE] Трек тумблера (.slider) в ВЫКЛ. состоянии. Per-theme → --th-slider. Включённый трек — --th-toggle-on/--c-accent (правило input:checked+.slider). Цвет приходит ЗНАЧЕНИЕМ токена, а не отдельным правилом на body[data-theme]: такое правило равно по специфичности input:checked+.slider и (themes.css грузится позже style.css) перебивало ВКЛ-состояние — тумблер оставался серым. --- */ --c-slider: #e5e5ea; /* --- [DS8] Бренд-константы провайдеров входа (НЕ зависят от темы — фирменные цвета) --- */ --c-brand-telegram: #229ED9; /* кнопка «Войти через Telegram» */ --c-brand-google-bg: #ffffff; /* кнопка «Войти через Google» — белая по гайдлайну Google */ --c-brand-google-text: #3c4043; /* текст кнопки Google */ /* --- [DS8] Мягкое предупреждение (заметка в auth-модалке и т.п.); per-theme → --th-warn-soft-* --- */ --c-warn-soft-bg: #fff3cd; --c-warn-soft-text: #856404; /* legacy-алиас (использовался в JS-генерируемом HTML) */ --success-color: var(--c-success-soft); /* --- Радиусы скругления (шкала из 4 ступеней + pill) --- */ /* xs — «угол лишь смягчён», для мелких плашек высотой ~20-25px, где даже sm читается как таблетка (чип-счётчик слота .slot-count). Ступень была обещана комментарием, но не объявлена. ⚠ Величина подобрана ПРОПОРЦИЕЙ, а не на глаз: на чипе высотой 23px скругление перестаёт читаться как форма примерно с 10% высоты (~2px), а 8px (35%) и 5px (22%) читаются ещё как «таблетка». 4px — компромисс: угол смягчён, но формой не выглядит. */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; /* --- Спейсинг (8-кратная шкала) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; /* --- Типографика (микро + 6 основных ступеней) --- */ --fs-3xs: 10px; /* [BOOKING NOW] микро-подпись статуса поверх карточки (чип «Идёт сейчас») */ --fs-2xs: 11px; /* бейджи, таймстампы, счётчики */ --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 24px; --fs-display: 28px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* [DS9 W5] Старая шкала теней (--shadow-sm/md/lg/xl) УДАЛЕНА — все потребители переведены на 3 ступени DS9: --shadow-1/2/3 (объявлены ниже в блоке [DS9 TOKENS]). */ /* --- Контролы: единые высоты тач-целей (WCAG 2.5.5) --- */ --control-h: 44px; --control-h-compact: 36px; /* Фактическая высота нижнего таб-бара (вместе с safe-area). Дефолт-фолбэк = плоское значение БЕЗ calc/env: используется внутри других calc() (высота/отступы нижних блоков), а вложенный calc-внутри-calc через var некоторые WebView/Telegram не парсят — тогда свойство сбрасывается и strip уезжает под таб-бар. Реальную высоту (с safe-area и переносом подписи на 2-ю строку) публикует JS как plain px — _publishTabBarHeight() в app_navigation.js через ResizeObserver. */ --tab-bar-h: var(--control-h); } /* [SYSTEM LIGHT CORE] Режим «Системная» при светлой ОС (data-theme НЕ установлен): дефолты для браузерного просмотра ([LIGHT THEME SWAP] DS7: страница белая, объекты #f2f3f5). [DS9 W5] ПЕРЕЕХАЛО из style.css [LIGHT THEME CONTRAST] — единое место для всех 3 страниц. Внутри Telegram WebApp значения Telegram сильнее (инлайн на :root). */ @media (prefers-color-scheme: light) { :root { --tg-theme-bg-color: #ffffff; --tg-theme-secondary-bg-color: #f2f3f5; --tg-theme-text-color: #1a1d21; --tg-theme-hint-color: #5e6470; --tg-theme-button-color: #2b7de9; --tg-theme-button-text-color: #ffffff; --tg-theme-link-color: #1a6ede; } } /* [SYSTEM DARK CORE] Режим «Системная» при тёмной ОС (data-theme НЕ установлен): переопределяем БАЗУ --tg-theme-* на :root — её подхватывают токены --c-* и все компонентные правила. [DS9 W5] ПЕРЕЕХАЛО из style.css [SYSTEM DARK] и inline-:root login/profile — единственное место системной тёмной палитры для всех 3 страниц. Внутри Telegram WebApp значения Telegram сильнее (инлайн на :root). */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --tg-theme-bg-color: #17191c; --tg-theme-secondary-bg-color: #23262b; --tg-theme-text-color: #f1f2f4; --tg-theme-hint-color: #a0a4ad; --tg-theme-button-color: #4d9fff; --tg-theme-button-text-color: #ffffff; --tg-theme-link-color: #4d9fff; } } /* [SLOT STRIP] Тёмный вариант базовых токенов слота для Системной темы (prefers dark). */ @media (prefers-color-scheme: dark) { :root { /* [DS9 W2] Фоны слотов нейтрализованы (= surface-1 тёмной): статус несёт полоска 3px + чип. */ --c-slot-free-bg: #1f2226; /* есть места — нейтральный (surface-1) */ --c-slot-partial-bg: #1f2226; /* наполняется — нейтральный (surface-1) */ --c-slot-full-bg: #1f2226; /* мест нет — нейтральный (surface-1) */ --c-slot-busy-bg: #1f2226; /* я записан — нейтральный (surface-1) */ --c-slot-btn-free-bg: transparent; /* [DS9 W2] «Записаться» — контурная (ghost) */ --c-slot-btn-busy-bg: transparent; /* [DS9 W2] «Отменить» — контурная (ghost) */ --c-slot-btn-free-border: rgba(255,255,255,.15); --c-slot-btn-busy-border: #ff7a6e; /* контур цветом статуса «я записан» */ --c-slot-fill-track: rgba(255,255,255,.15); /* --- FOCUS GLOW (DS7) тёмный вариант --- */ --c-accent-glow: rgba(77,159,255,.28); /* ореол акцента — усиленный для тёмных фонов */ --c-danger-glow: rgba(255,69,58,.28); /* ореол ошибки — усиленный для тёмных фонов */ /* [TOGGLE] Трек выкл. тумблера в Системной тёмной = поверхность-2 (переехало из style.css [SYSTEM DARK PALETTE]) */ --c-slider: var(--c-surface-2); --c-chat-status-waiting: #ffb357; /* статус «ожидание» в чате — светлый янтарь (читаем на тёмном фоне) */ --c-chat-status-active: #3ecf8e; /* [DS9 W5] статус «активен» в чате = зелёный статуса partial (тёмный) */ } } /* ============================================================================ [DS9 TOKENS] Новые токены редизайна DS9 (волна 1). Пока НЕ используются компонентами — включаются волнами 2-5 (слоты → модалки → главная/поиск → inbox/чат). Значения = утверждённые кандидаты прототипа. Per-theme значения — --th-* в КАЖДОЙ палитре themes.css (правило 4 CLAUDE.md). ============================================================================ */ :root { /* --- Elevation: нейтральная шкала поверхностей (светлый вариант / Системная) --- */ --c-surface-1: #ffffff; /* карточки, слоты, строки списков */ --c-surface-2: #f0f2f6; /* панель действий, чипы, вложенные блоки */ --c-surface-3: #ffffff; /* модалки, дропдауны (в светлой — с тенью-3) */ --c-border-subtle: rgba(16,24,40,.09); /* рамки карточек */ --c-border-strong: rgba(16,24,40,.18); /* рамки инпутов, контурных кнопок */ --c-overlay: rgba(16,20,28,.50); /* подложка модалок */ --c-divider: #e3e5e9; /* [DS9 W5] разделители (hr/separator) — синхронно с --th-divider светлой */ --c-card-del: #dcdfe4; /* крестик «×» удаления карточки уведомления — почти сливается с surface-1 */ /* --- Статусы слота: полоска 3px + чип/прогресс (НЕ заливка карточки) --- */ --c-slot-acc-free: #2b7de9; /* есть места */ --c-slot-acc-partial: #18a05e; /* наполняется · «идёт сейчас» */ --c-slot-acc-busy: #e5484d; /* я записан / отмена */ --c-slot-acc-full: #a5adba; /* мест нет (нейтральный); истёкшие — он же + приглушение */ /* --- Тени: 3 ступени DS9 (заменяют literal box-shadow волнами) --- */ --shadow-1: 0 1px 2px rgba(16,24,40,.06); /* карточки */ --shadow-2: 0 6px 20px rgba(16,24,40,.14); /* дропдауны */ --shadow-3: 0 16px 48px rgba(16,24,40,.22); /* модалки */ /* --- Line-height: шкала межстрочных (раньше литералы) --- */ --lh-tight: 1.25; /* заголовки */ --lh-normal: 1.5; /* основной текст */ } @media (prefers-color-scheme: dark) { :root { --c-surface-1: #1f2226; --c-surface-2: #262a2f; --c-surface-3: #2d3238; --c-border-subtle: rgba(255,255,255,.07); --c-border-strong: rgba(255,255,255,.15); --c-overlay: rgba(0,0,0,.65); --c-divider: #2b2f35; /* [DS9 W5] разделители — синхронно с --th-divider тёмной */ --c-card-del: #343941; /* крестик «×» удаления карточки — почти сливается с тёмным surface-1 */ --c-slot-acc-free: #4da3ff; --c-slot-acc-partial: #3ecf8e; --c-slot-acc-busy: #ff7a6e; --c-slot-acc-full: #5a616b; /* В тёмной теме глубина — границами/поверхностями; тени почти не видны */ --shadow-1: none; --shadow-2: 0 6px 20px rgba(0,0,0,.45); --shadow-3: 0 16px 48px rgba(0,0,0,.50); } }