/* * TrenFlow — токены дизайн-системы (см. specs/design-system.md). * * Единственный источник цвета, шкалы и отступов для frontend и backend. * Компоненты обращаются ТОЛЬКО к переменным — тогда тёмная тема и брендирование * школы (роадмап §6) сводятся к переопределению нескольких значений. * * Тема: по умолчанию системная (prefers-color-scheme), а явный выбор * пользователя ставится атрибутом data-theme на и должен побеждать * медиавыражение в обе стороны — поэтому ниже три набора: :root, * @media(dark) и [data-theme]. */ :root { /* ——— Бренд ——— */ --tf-track: #B5462C; /* тартан дорожки: акцент, один на экран */ --tf-track-deep: #8F3520; /* ховер/нажатие акцента */ --tf-track-soft: #F6E9E4; /* подложка акцента (мягкий фон) */ --tf-pine: #1F5B4E; /* парк: выполнено, прогресс */ --tf-pine-soft: #DCE8E4; /* ——— Нейтральные: с синим уклоном, не чистый серый ——— */ --tf-ground: #E9ECEF; /* фон страницы */ --tf-surface: #F6F7F9; /* карточки, панели */ --tf-surface-2: #FDFDFE; /* поля ввода, поднятые блоки */ --tf-ink: #14181D; /* основной текст */ --tf-ink-2: #3F4750; /* второстепенный текст */ --tf-fog: #626B75; /* подписи и второстепенные границы */ /* * Нейтральный столбик знака и графика нагрузки. Раньше это был тот же * `--tf-fog`, и подпись пришлось бы затемнять до читаемых 4.5 вместе со * знаком — а столбик не текст, ему хватает 3:1 для несущей смысл графики * (WCAG 1.4.11). Разные требования — разные токены, иначе правка читаемости * перекрашивает логотип. */ --tf-bar-light: #7D8792; --tf-hair: #D2D7DD; /* границы, разделители */ /* * Текст на поверхности, залитой акцентом или статусом (кнопка, бейдж, * выделение). Своя переменная, а не «белый»: в тёмной теме акцент светлеет, * чтобы читаться текстом на тёмном фоне, и белая надпись на нём даёт 3.7 при * норме 4.5 — то есть кнопка становится нечитаемой ровно там, где до этого * была нормальной. Здесь почти белый, в тёмной теме — почти чёрный. */ --tf-on-accent: #FDFDFE; /* * Затемнение поверх фотографии и текст на нём. Единственные токены без пары * в тёмной теме, и это осознанно: фотография темы не знает — снимок с * бегунами одинаково тёмный в обеих, и «тёмный текст в тёмной теме» означал * бы чёрное по чёрному. Значение одно на обе темы, поэтому объявлено только * здесь, в базовом :root. */ --tf-scrim: rgba(15, 18, 22, .74); --tf-scrim-soft: rgba(15, 18, 22, .3); --tf-on-photo: #FDFDFE; /* ——— Семантика статусов: отдельно от акцента ——— */ --tf-ok: #1F5B4E; --tf-ok-soft: #DCE8E4; --tf-warn: #906016; --tf-warn-soft: #F7EAD2; --tf-danger: #93202B; /* кармин, отличимый от --tf-track */ --tf-danger-soft: #F4DADD; --tf-info: #3C5170; --tf-info-soft: #DEE4EC; /* ——— Слоты напоминаний (specs/notifications.md) ——— */ --tf-slot-eve: #56659E; --tf-slot-morn: #C98A24; --tf-slot-day: #2E7361; /* ——— Гарнитуры ——— */ --tf-font-display: 'Fira Sans Condensed', 'Arial Narrow', 'Segoe UI', system-ui, sans-serif; --tf-font-body: 'PT Serif', Georgia, 'Times New Roman', serif; --tf-font-mono: 'JetBrains Mono', Consolas, 'Courier New', ui-monospace, monospace; /* ——— Шкала кегля ——— */ --tf-size-h1: clamp(34px, 5vw, 60px); --tf-size-h2: clamp(25px, 3vw, 34px); --tf-size-h3: 20px; --tf-size-h4: 17px; --tf-size-lede: clamp(18px, 2vw, 21px); --tf-size-body: 16px; --tf-size-small: 14px; --tf-size-eyebrow: 12px; --tf-line-tight: 1.08; --tf-line-body: 1.6; /* ——— Отступы (шаг 4px) ——— */ --tf-sp-1: 4px; --tf-sp-2: 8px; --tf-sp-3: 12px; --tf-sp-4: 16px; --tf-sp-5: 24px; --tf-sp-6: 32px; --tf-sp-7: 48px; --tf-sp-8: 72px; /* ——— Форма: техничная, почти без скруглений ——— */ --tf-radius: 2px; --tf-radius-lg: 4px; --tf-radius-pill: 999px; --tf-border: 1px solid var(--tf-hair); --tf-shadow: 0 1px 2px rgba(20, 24, 29, .06), 0 8px 24px -14px rgba(20, 24, 29, .18); --tf-focus: 0 0 0 3px rgba(181, 70, 44, .35); --tf-nav-height: 56px; --tf-container: 1180px; color-scheme: light; } /* ——— Тёмная тема по системной настройке ——— */ @media (prefers-color-scheme: dark) { :root { --tf-track: #DB694A; --tf-track-deep: #DF785C; --tf-track-soft: #2F1D18; --tf-pine: #4E9B85; --tf-pine-soft: #172824; --tf-ground: #0F1216; --tf-surface: #171B21; --tf-surface-2: #1E242B; --tf-ink: #E7EAED; --tf-ink-2: #AEB7C0; --tf-fog: #838C96; --tf-bar-light: #77818C; --tf-hair: #2B323A; --tf-on-accent: #0F1216; --tf-ok: #4E9B85; --tf-ok-soft: #172824; --tf-warn: #D9A33F; --tf-warn-soft: #2B2317; --tf-danger: #E2707A; --tf-danger-soft: #31191D; --tf-info: #90A7C6; --tf-info-soft: #1A222C; --tf-slot-eve: #8593C9; --tf-slot-morn: #E0A93F; --tf-slot-day: #4E9B85; --tf-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -16px rgba(0, 0, 0, .7); --tf-focus: 0 0 0 3px rgba(219, 105, 74, .4); color-scheme: dark; } } /* ——— Явный выбор пользователя: побеждает медиавыражение ——— */ :root[data-theme="dark"] { --tf-track: #DB694A; --tf-track-deep: #DF785C; --tf-track-soft: #2F1D18; --tf-pine: #4E9B85; --tf-pine-soft: #172824; --tf-ground: #0F1216; --tf-surface: #171B21; --tf-surface-2: #1E242B; --tf-ink: #E7EAED; --tf-ink-2: #AEB7C0; --tf-fog: #838C96; --tf-bar-light: #77818C; --tf-hair: #2B323A; --tf-on-accent: #0F1216; --tf-ok: #4E9B85; --tf-ok-soft: #172824; --tf-warn: #D9A33F; --tf-warn-soft: #2B2317; --tf-danger: #E2707A; --tf-danger-soft: #31191D; --tf-info: #90A7C6; --tf-info-soft: #1A222C; --tf-slot-eve: #8593C9; --tf-slot-morn: #E0A93F; --tf-slot-day: #4E9B85; --tf-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -16px rgba(0, 0, 0, .7); --tf-focus: 0 0 0 3px rgba(219, 105, 74, .4); color-scheme: dark; } :root[data-theme="light"] { --tf-track: #B5462C; --tf-track-deep: #8F3520; --tf-track-soft: #F6E9E4; --tf-pine: #1F5B4E; --tf-pine-soft: #DCE8E4; --tf-ground: #E9ECEF; --tf-surface: #F6F7F9; --tf-surface-2: #FDFDFE; --tf-ink: #14181D; --tf-ink-2: #3F4750; --tf-fog: #626B75; --tf-bar-light: #7D8792; --tf-hair: #D2D7DD; --tf-on-accent: #FDFDFE; --tf-ok: #1F5B4E; --tf-ok-soft: #DCE8E4; --tf-warn: #906016; --tf-warn-soft: #F7EAD2; --tf-danger: #93202B; --tf-danger-soft: #F4DADD; --tf-info: #3C5170; --tf-info-soft: #DEE4EC; --tf-slot-eve: #56659E; --tf-slot-morn: #C98A24; --tf-slot-day: #2E7361; --tf-shadow: 0 1px 2px rgba(20, 24, 29, .06), 0 8px 24px -14px rgba(20, 24, 29, .18); --tf-focus: 0 0 0 3px rgba(181, 70, 44, .35); color-scheme: light; } /* * Мост к бутстрапу. Bootstrap 5.2 не умеет data-bs-theme, но часть его * компонентов читает --bs-* переменные — подменяем их нашими, чтобы стандартные * виджеты Yii (GridView, ActiveForm, Breadcrumbs) сразу были в палитре. То, что * в 5.2 захардкожено, доопределяется в components.css. */ :root { --bs-body-bg: var(--tf-ground); --bs-body-color: var(--tf-ink); --bs-body-font-family: var(--tf-font-body); --bs-body-font-size: var(--tf-size-body); --bs-body-line-height: var(--tf-line-body); --bs-border-color: var(--tf-hair); --bs-border-radius: var(--tf-radius); --bs-link-color: var(--tf-track); --bs-link-hover-color: var(--tf-track-deep); --bs-primary: var(--tf-track); --bs-secondary-color: var(--tf-ink-2); --bs-emphasis-color: var(--tf-ink); --bs-heading-color: var(--tf-ink); --bs-font-monospace: var(--tf-font-mono); }