/* Основа экрана: палитра, шкала размеров, блочная сетка, карточки списка. Тема одна, а не две. Всё, что зависит от темы — рамка, «открыто»/«устарел», приглушённый текст, — выводится color-mix-ом из самих --tg-theme-* (из --text и --card), поэтому тёмная тема Telegram на светлой ОС и наоборот выглядят правильно. Своих цветов текста и фона нет. Тёмная — база ВЕЗДЕ, включая Telegram с любой темой клиента (слово заказчика 20.08: «всё равно тёмную»). Светлую включает только человек. Тему ОС не спрашиваем совсем: браузер не отличает «ОС просит светлую» от «предпочтений нет» — (prefers-color-scheme: light) матчится в обоих случаях, и светлая стала бы фактическим умолчанием. Решает атрибут data-theme на : до первой отрисовки его ставит inline-скрипт в безусловно, дальше им управляет theme.js. Ветки [data-theme] перекрывают сами токены, а не --fb-*, — поэтому --tg-theme-* в них не попадают и тема клиента фон и текст не красит. Из палитры клиента остаётся один акцент — заливка кнопки, см. --button-base ниже. --fb-* нужны единственному случаю, когда атрибута нет: выключенный js. Они тоже тёмные, так что база держится и там. */ :root { /* Две палитры целиком. Обе объявлены всегда: выбор темы не пересобирает значения, а переставляет ссылки на готовые наборы. */ --dark-bg: #141518; --dark-card: #212227; --dark-text: #f3f3f5; --dark-hint: #a2a2ab; /* 6,3:1 к карточке тёмной темы */ --dark-link: #7cb8f5; --dark-button: #3390ec; --dark-button-text: #ffffff; --dark-border: rgba(255, 255, 255, 0.12); --dark-ok: #56cf80; --dark-warn: #e8b44e; --dark-bad: #f0776a; --light-bg: #f2f3f5; --light-card: #ffffff; --light-text: #16171a; --light-hint: #6a6a70; /* 5,4:1 к белому — служебное остаётся читаемым */ --light-link: #1f6fb2; --light-button: #2481cc; --light-button-text: #ffffff; --light-border: rgba(0, 0, 0, 0.10); --light-ok: #1a7f45; --light-warn: #8a5d0b; --light-bad: #b3271a; /* Фолбэки для обычного браузера — тёмный набор, он же база */ --fb-bg: var(--dark-bg); --fb-card: var(--dark-card); --fb-text: var(--dark-text); --fb-hint: var(--dark-hint); --fb-link: var(--dark-link); --fb-button: var(--dark-button); --fb-button-text: var(--dark-button-text); --fb-border: var(--dark-border); /* --fb-ok/warn/bad нужны webview без color-mix: там смысловые цвета берутся отсюда, а не выводятся из --text */ --fb-ok: var(--dark-ok); --fb-warn: var(--dark-warn); --fb-bad: var(--dark-bad); --bg: var(--tg-theme-secondary-bg-color, var(--fb-bg)); --card: var(--tg-theme-bg-color, var(--fb-card)); --text: var(--tg-theme-text-color, var(--fb-text)); --hint: var(--tg-theme-hint-color, var(--fb-hint)); --link: var(--tg-theme-link-color, var(--fb-link)); --button-text: var(--tg-theme-button-text-color, var(--fb-button-text)); /* Заливка кнопки притемняется на 20 % от цвета клиента — по той же причине, по которой заведён --link-strong: чистый --tg-theme-button-color даёт белой подписи 3,3:1, а нажатый чип и кнопка «Повторить» — это текст. Оттенок клиента сохраняется, читаемость появляется: 4,9–6,0:1 во всех состояниях. Первая строка — фолбэк для webview без color-mix. */ --button-base: var(--tg-theme-button-color, var(--fb-button)); --button: var(--button-base); --button: color-mix(in srgb, var(--button-base) 80%, black); /* Рамка — доля основного текста, а не серый по медиазапросу: на светлой теме выходит тёмный волосок, на тёмной — светлый, в любой комбинации тем. */ --border: var(--fb-border); --border: color-mix(in srgb, var(--text) 13%, transparent); /* Служебный текст, который всё-таки надо прочесть: подтягиваем к основному, чтобы контраст держался и на светлом hint самого Telegram. Первая строка — фолбэк для webview без color-mix. */ --hint-strong: var(--hint); --hint-strong: color-mix(in srgb, var(--hint) 62%, var(--text)); /* То же для мелкого текста цветом ссылки: голубой Telegram даёт 3,3:1 к белому, а подпись 11–13 px обязана читаться. Крупное и нетекстовое (линия графика, метки карты, обводка фокуса) остаётся на чистом --link. */ --link-strong: var(--link); --link-strong: color-mix(in srgb, var(--link) 70%, var(--text)); /* Смысловые цвета: оттенок задаётся базой и от темы не зависит, светлота — доля основного текста. На светлой теме зелёный темнеет, на тёмной светлеет, и «открыто»/«курс устарел»/«закрыто» держат ≥4,5:1 во всех четырёх сочетаниях тем (Telegram светлая/тёмная × ОС светлая/тёмная). */ /* Линия блю на графике: свой цвет, не занятый смыслом. Зелёный уже значит «лучший и свежий», синий — навигацию, янтарный — «протухло». Блю берёт тёплый песочный: он различим и на светлой, и на тёмной теме, а вместе с пунктиром читается даже теми, кто не различает цвета. */ --rate-blue-base: #d9a441; --ok-base: #21b562; --warn-base: #d99414; --bad-base: #e2503f; --ok: var(--fb-ok); --warn: var(--fb-warn); --bad: var(--fb-bad); --ok: color-mix(in srgb, var(--ok-base) 68%, var(--text)); --rate-blue: var(--rate-blue-base); --rate-blue: color-mix(in srgb, var(--rate-blue-base) 72%, var(--text)); --warn: color-mix(in srgb, var(--warn-base) 68%, var(--text)); --bad: color-mix(in srgb, var(--bad-base) 68%, var(--text)); /* Одна типографская шкала на все четыре файла стилей */ --fs-xs: 11px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-money: 26px; /* Один ритм отступов */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; /* Одни скругления и тени у всех блоков. Тень намеренно одна на обе темы: она декоративная, а отделяет блок от фона рамка. Тень, привязанная к медиазапросу ОС, была вторым переключателем темы — его больше нет. */ --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-pill: 999px; --bw: 1px; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.07); --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.12), 0 12px 28px rgba(0, 0, 0, 0.10); --tap: 40px; /* минимальная высота пальцевой цели */ } /* Ветка темы — сильнее всего, включая тему клиента Telegram: здесь перекрываются сами токены, поэтому var(--tg-theme-*) в эту ветку не попадает (кроме одного акцента — --button-base). Атрибут стоит всегда, значит всегда работает и одна из этих двух веток. Производные (--border, --hint-strong, --link-strong, --ok/--warn/--bad) не дублируются: они объявлены выше через var(--text)/var(--hint)/var(--link) и пересчитываются от перекрытых значений сами. Из --fb-* переопределяются только смысловые и рамка — их первая строка-фолбэк для webview без color-mix. color-scheme отдаёт браузеру нативные списки