/* ============================================================ ZamaCards — дизайн-токены Источник правды для всех цветов, размеров и отступов. Хардкод значений в компонентах запрещён — только var(--*). ДВЕ ОСИ. Тема собирается из режима и палитры — два атрибута на : РЕЖИМ (data-mode) — светло или темно. Грунты, текст, границы, тени, пелена под шитом и на замороженной карте. Светлоты одни на все палитры. ПАЛИТРА (data-theme) — какого тона. Действие, акцент, знак, камень карты и подкраска грунтов тем же тоном. telegram цвета клиента Telegram (режим берёт у него же) basalt «Полночь», бренд. Тёмный — ночь, светлый — сливки spruce Хвоя, зелёная quartz Кварц, розовая amethyst Аметист, фиолетовая amber Янтарь, тёплая turquoise Бирюза Каждая палитра работает в обоих режимах. До разделения половина тем жила только в своём: «Кварц» был светлым, «Хвоя» тёмной, и выбрать розовое в темноте было нельзя. Семантические имена токенов везде ОДИНАКОВЫЕ. Компонент никогда не знает, какие режим и палитра активны. Бренд — «Полночь»: тёмно-синий #0F2352 у плиты, пластика и аватарки, #1E4285 у знака и кнопки. Это палитра по умолчанию. Цветные палитры перекрашивают действие, акцент и знак, но ни один токен не меняет имени. Цветные палитры выведены в OKLCH скриптом scripts/palette.py, «Полночь» записана в нём как есть — и все пересчитываются одной командой: python scripts/palette.py check Плита. Каждый экран начинается с плиты --color-plate; на ней три грани --color-plate-facet-1/2. У цветных палитр плита — цвет действия с гранями того же тона (светлота +0.045 и −0.035), у «Полночи» — свой тон, темнее кнопки. Текст на плите — --color-text-on-plate. Пластик карты — тёмный камень --card-stone в тон палитры с гранями --card-stone-1/2, одинаковый в обоих режимах. Все контрасты в комментариях ПОСЧИТАНЫ (WCAG 2.1, sRGB), не оценены на глаз. Меняешь цвет — пересчитай. Обоснования: COLORS.md ============================================================ */ /* ============================================================ РЕЖИМ Всё, что зависит от светло/темно и не зависит от тона: схема для системных частей (скроллбары, поля ввода, автозаполнение), тени, затемнение под шитом, пелена на замороженной карте, фоновый подсвет. Палитры ниже перебивают эти значения только там, где им нужно своё. ============================================================ */ [data-mode="dark"] { color-scheme: dark; /* Ambient-градиента в темноте нет: на OLED выключенный пиксель не потребляет питание, и подсветка фона съела бы весь смысл. */ --gradient-ambient: none; --gradient-veil: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.94) 100%); --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.85); --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.9); /* Заморозка гасит карту холодной темнотой */ --card-frozen: rgb(6 9 15 / 0.55); } [data-mode="light"] { color-scheme: light; /* Очень слабый подсвет сверху в тон действия: лист не должен быть мёртво-белым. 8% — на пределе различимости, это фон, а не цвет. */ --gradient-ambient: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--color-primary) 8%, var(--color-bg)) 0%, var(--color-bg) 60%); /* Затемнение под шитом слабее, чем в темноте: на светлом листе плотная пелена читается агрессивно. */ --gradient-veil: linear-gradient(180deg, rgba(25,23,18,0) 0%, rgba(25,23,18,0.45) 100%); --shadow-sheet: 0 -8px 40px rgba(25, 23, 18, 0.16); --shadow-modal: 0 16px 48px rgba(25, 23, 18, 0.22); /* Заморозка гасит тёмную карту холодной дымкой */ --card-frozen: rgb(206 217 233 / 0.66); } /* ============================================================ ПАЛИТРА TELEGRAM (значение по умолчанию, цвета клиента) Грунты, текст и действие берутся из themeParams клиента: мини-апп должен выглядеть продолжением чата, а не отдельным окном поверх него. Пришёл пользователь с тёмным Telegram — тема тёмная, со светлым — светлая, и data-mode здесь ставится по клиенту, а не по выбору человека. Поэтому здесь нет посчитанных контрастов: цвета задаёт клиент. Вместо фиксированных значений всё выводится ОТ ФОНА И ТЕКСТА клиента через color-mix — подмешивание к тексту всегда уводит цвет ОТ фона, в тёмной теме вверх по светлоте, в светлой вниз. Одна формула на обе. Селектор :root:not([data-theme]) — это фолбэк до того, как скрипт проставил атрибуты, и страницы без выбора темы вообще. Как только на появилась палитра, блок молчит. Фолбэки повторяют прежнюю тёмную палитру «Обсидиан»: вне Telegram переменных нет, и приложение должно оставаться собранным. ============================================================ */ :root:not([data-theme]), [data-theme="telegram"] { /* Режим (светло/темно) сюда приходит атрибутом data-mode: store.js берёт его у клиента, а не у человека — цвета всё равно клиентские. */ /* ---------- ИСХОДНИКИ КЛИЕНТА ---------- */ --tg-bg: var(--tg-theme-bg-color, #0D0C0A); --tg-ink: var(--tg-theme-text-color, #F3F1EF); --tg-hint: var(--tg-theme-hint-color, #B1ADA8); --tg-link: var(--tg-theme-link-color, #81B4F6); --tg-btn: var(--tg-theme-button-color, #2F62AC); --tg-btn-ink: var(--tg-theme-button-text-color, #FFFFFF); /* ---------- ГРУНТЫ ---------- */ --color-bg: var(--tg-bg); --color-surface-1: color-mix(in srgb, var(--tg-ink) 5%, var(--tg-bg)); --color-surface-2: color-mix(in srgb, var(--tg-ink) 9%, var(--tg-bg)); --color-surface-3: color-mix(in srgb, var(--tg-ink) 14%, var(--tg-bg)); /* ---------- ДЕЙСТВИЕ ---------- */ --color-primary: var(--tg-btn); --color-primary-hover: color-mix(in srgb, var(--tg-btn) 88%, var(--tg-ink)); --color-primary-press: color-mix(in srgb, var(--tg-btn) 82%, var(--tg-bg)); --color-text-on-primary: var(--tg-btn-ink); /* Грани плиты: кнопочный цвет клиента, на десятую светлее и темнее */ --color-primary-facet-1: color-mix(in srgb, var(--tg-btn) 90%, #FFFFFF); --color-primary-facet-2: color-mix(in srgb, var(--tg-btn) 90%, #000000); /* ---------- АКЦЕНТ И ДЕНЬГИ ---------- */ --color-accent: var(--tg-link); --color-accent-glow: color-mix(in srgb, var(--tg-link) 70%, var(--tg-bg)); --color-balance: var(--tg-ink); /* ---------- ТЕКСТ ---------- */ --color-text: var(--tg-ink); --color-text-2: var(--tg-hint); --color-text-3: color-mix(in srgb, var(--tg-hint) 88%, var(--tg-bg)); --color-text-disabled: color-mix(in srgb, var(--tg-hint) 55%, var(--tg-bg)); /* ---------- ГРАНИЦЫ ---------- */ --color-border-subtle: color-mix(in srgb, var(--tg-ink) 8%, var(--tg-bg)); --color-border: color-mix(in srgb, var(--tg-ink) 15%, var(--tg-bg)); --color-border-strong: color-mix(in srgb, var(--tg-ink) 42%, var(--tg-bg)); /* ---------- СТАТУСЫ ---------- База — чистый тон, 32% текста клиента поверх: так тон остаётся собой, но всегда отходит от фона на читаемое расстояние в обеих схемах. */ --color-success: color-mix(in srgb, #2FA65A 68%, var(--tg-ink)); --color-warning: color-mix(in srgb, #D07A12 68%, var(--tg-ink)); --color-danger: color-mix(in srgb, var(--tg-theme-destructive-text-color, #D34A42) 72%, var(--tg-ink)); --color-info: color-mix(in srgb, #2A8FA8 68%, var(--tg-ink)); /* ---------- ПОДЛОЖКИ ЧИПОВ ---------- */ --color-success-bg: color-mix(in srgb, #2FA65A 16%, var(--tg-bg)); --color-warning-bg: color-mix(in srgb, #D07A12 16%, var(--tg-bg)); --color-danger-bg: color-mix(in srgb, #D34A42 16%, var(--tg-bg)); --color-info-bg: color-mix(in srgb, #2A8FA8 16%, var(--tg-bg)); --color-accent-bg: color-mix(in srgb, var(--tg-link) 16%, var(--tg-bg)); /* ---------- БРЕНД ---------- */ --color-logo: var(--tg-link); --color-logo-wordmark: var(--tg-ink); /* ---------- ПЛАСТИК КАРТЫ ---------- Карта — тёмный камень в тон кнопки клиента: тёмная в любой схеме, лист под ней светлый или тёмный. Грани — тот же тон с шагом светлоты. */ --card-stone: color-mix(in srgb, var(--tg-btn) 30%, #0B0E14); --card-stone-1: color-mix(in srgb, var(--tg-btn) 38%, #0B0E14); --card-stone-2: color-mix(in srgb, var(--tg-btn) 22%, #0B0E14); /* ---------- ФОН И ТЕНИ ---------- Здесь они свои: фон принадлежит клиенту, и пелена обязана уходить в его цвет, а не в общий чёрный режима. */ --gradient-ambient: none; --gradient-veil: linear-gradient(180deg, transparent 0%, var(--tg-bg) 100%); --shadow-sheet: 0 -8px 40px rgb(0 0 0 / 0.45); --shadow-modal: 0 16px 48px rgb(0 0 0 / 0.55); /* Заморозка гасит карту фоном клиента */ --card-frozen: color-mix(in srgb, var(--tg-bg) 62%, transparent); } /* ============================================================ ПАЛИТРА BASALT — «Полночь», бренд (с 27 сентября 2026) Один тёмно-синий тон на плиту, пластик, знак и кнопку. Плита и карта — «Полночь» #0F2352 с гранями #1E4285 и #081733, одинаковые в обоих режимах; кнопка — #1E4285, тот же тон, что у знака на свету. Меняется только лист: ночь (#090D18) или сливки (#F4EFE6). Печать на пластике и текст на плите — сливочные, а не белые. Значения нарисованы под бренд, а не выведены генератором: в scripts/palette.py палитра записана как есть и там же проверяется. Против макета поправлены три тона, пары не проходили норму: акцент в ночи (на своём чипе 4.29 при 4.5) и контур поля в обоих режимах (2.58 и 2.73 при 3.0). Сдвинута только светлота, тон и хрома те же. Кнопка к ночному фону — 2.01 при норме 3.0, и это сознательно: кнопку опознаёт белая подпись (9.66), а довести заливку до 3.0 можно только голубым, от которого владелец отказался. Исключение записано в palette.py, расчёт — COLORS.md, п. 3. ============================================================ */ [data-theme="basalt"][data-mode="dark"] { /* ---------- ГРУНТЫ: ночь ---------- */ --color-bg: #090D18; --color-surface-1: #111829; --color-surface-2: #182238; --color-surface-3: #202C47; /* ---------- ПЛИТА: «Полночь», как и шапка Telegram ---------- */ --color-plate: #0F2352; /* текст на ней 13.26 */ --color-plate-facet-1: #1E4285; /* текст на ней 8.44 */ --color-plate-facet-2: #081733; /* текст на ней 15.53 */ --color-text-on-plate: #F4EFE6; /* ---------- ДЕЙСТВИЕ: тот же тон, что у знака ---------- */ --color-primary: #1E4285; /* белый текст 9.66 · заливка к фону 2.01 — исключение, см. выше */ --color-primary-hover: #26499C; /* белый текст 8.35 */ --color-primary-press: #14305F; /* белый текст 12.98 */ --color-text-on-primary: #FFFFFF; /* Грани действия не рисуются нигде: плита — на --color-plate-facet-*. Оставлены, чтобы имена токенов были одни во всех палитрах. */ --color-primary-facet-1: #1E4285; --color-primary-facet-2: #081733; /* ---------- АКЦЕНТ И ДЕНЬГИ ---------- */ --color-accent: #718ABC; /* на фоне 5.60 · на своей подложке 4.51. В макете #6E86B8 — 4.29 */ --color-accent-glow: #5E76A6; /* кольцо фокуса, 4.27 к фону. НЕ для текста */ --color-balance: #F4EFE6; /* на surface-1 15.45 */ /* ---------- ТЕКСТ ---------- */ --color-text: #F4EFE6; /* на surface-1 15.45 */ --color-text-2: #A7AEC4; /* на surface-3 6.28 */ --color-text-3: #8C94AC; /* на surface-3 4.59 (худший случай) */ --color-text-disabled: #4A5268; /* выключено, норма не применяется */ /* ---------- ГРАНИЦЫ ---------- */ --color-border-subtle: #182036; /* декоративная линия, норма не применяется */ --color-border: #232E49; /* декоративная линия, норма не применяется */ --color-border-strong: #697593; /* контур поля, 3.45 к surface-2 · 3.02 к surface-3. В макете #5F6A88 — 2.58 */ /* ---------- СТАТУСЫ ---------- */ --color-success: #6FD494; /* на surface-1 9.71 · на своём чипе 8.75 */ --color-warning: #FF9F4A; /* на surface-1 8.69 · на своём чипе 7.88 */ --color-danger: #F07A70; /* на surface-1 6.51 · на своём чипе 6.16 */ --color-info: #7CC4E8; /* на surface-1 9.20 · на своём чипе 8.27 */ /* ---------- ПОДЛОЖКИ ЧИПОВ ---------- */ --color-success-bg: #10261C; --color-warning-bg: #2E1E0E; --color-danger-bg: #301618; --color-info-bg: #0F2433; --color-accent-bg: #1B2338; /* ---------- БРЕНД ---------- */ --color-logo: #F4EFE6; /* к фону 16.94 */ --color-logo-wordmark: #F4EFE6; /* ---------- ПЛАСТИК КАРТЫ: «Полночь», как плита ---------- Сливочные чернила на светлой грани 8.44, подписи на альфе 0.70 — 5.01. */ --card-stone: #0F2352; --card-stone-1: #1E4285; --card-stone-2: #081733; --card-ink: #F4EFE6; --card-edge: rgb(244 239 230 / 0.10); --card-frozen: rgb(9 13 24 / 0.6); /* ---------- ПЕЛЕНА И ТЕНИ: в цвет ночи, а не в чистый чёрный ---------- */ --gradient-veil: linear-gradient(180deg, rgb(9 13 24 / 0) 0%, rgb(9 13 24 / 0.92) 100%); --shadow-sheet: 0 -8px 40px rgb(0 0 0 / 0.6); --shadow-modal: 0 16px 48px rgb(0 0 0 / 0.7); } [data-theme="basalt"][data-mode="light"] { /* ---------- ГРУНТЫ: сливки ---------- */ --color-bg: #F4EFE6; --color-surface-1: #FFFFFF; --color-surface-2: #EDE6DA; --color-surface-3: #E3DBCC; /* ---------- ПЛИТА: та же «Полночь», что в ночи ---------- */ --color-plate: #0F2352; /* текст на ней 13.26 */ --color-plate-facet-1: #1E4285; /* текст на ней 8.44 */ --color-plate-facet-2: #081733; /* текст на ней 15.53 */ --color-text-on-plate: #F4EFE6; /* ---------- ДЕЙСТВИЕ ---------- */ --color-primary: #1E4285; /* белый текст 9.66 · заливка к фону 8.44 */ --color-primary-hover: #17346B; /* белый текст 12.07 */ --color-primary-press: #102552; /* белый текст 14.91 */ --color-text-on-primary: #FFFFFF; --color-primary-facet-1: #1E4285; /* не рисуется, см. ночь */ --color-primary-facet-2: #081733; /* ---------- АКЦЕНТ И ДЕНЬГИ ---------- */ --color-accent: #3E5488; /* на фоне 6.48 · на своей подложке 6.05 */ --color-accent-glow: #6E86B8; /* кольцо фокуса, 3.18 к фону. НЕ для текста */ --color-balance: #0F2352; /* на surface-1 15.19 */ /* ---------- ТЕКСТ ---------- */ --color-text: #171A2B; /* на surface-1 17.23 */ --color-text-2: #555B72; /* на surface-3 4.89 */ --color-text-3: #565C70; /* на surface-3 4.83 (худший случай) */ --color-text-disabled: #A9AEBE; /* выключено, норма не применяется */ /* ---------- ГРАНИЦЫ ---------- */ --color-border-subtle: #E8E1D4; /* декоративная линия, норма не применяется */ --color-border: #D9D0BF; /* декоративная линия, норма не применяется */ --color-border-strong: #777C91; /* контур поля, 3.34 к surface-2 · 3.01 к surface-3. В макете #7E8398 — 2.73 */ /* ---------- СТАТУСЫ ---------- */ --color-success: #1B6E42; /* на surface-1 6.26 · на своём чипе 5.19 */ --color-warning: #8A4B00; /* на surface-1 6.80 · на своём чипе 5.59 */ --color-danger: #A8241E; /* на surface-1 7.15 · на своём чипе 5.61 */ --color-info: #1A6383; /* на surface-1 6.65 · на своём чипе 5.46 */ /* ---------- ПОДЛОЖКИ ЧИПОВ ---------- */ --color-success-bg: #DDEEE3; --color-warning-bg: #F9E6CF; --color-danger-bg: #F8DEDB; --color-info-bg: #DCEBF3; --color-accent-bg: #E4E8F2; /* ---------- БРЕНД ---------- */ --color-logo: #1E4285; /* к фону 8.44 */ --color-logo-wordmark: #171A2B; /* ---------- ПЛАСТИК КАРТЫ: та же «Полночь» ---------- */ --card-stone: #0F2352; --card-stone-1: #1E4285; --card-stone-2: #081733; --card-ink: #F4EFE6; --card-edge: rgb(244 239 230 / 0.10); --card-frozen: rgb(244 239 230 / 0.62); /* ---------- ФОН, ПЕЛЕНА И ТЕНИ ---------- Сливки — плоская заливка: подсвет режима подмешал бы к ним синий и дал серую дымку. Тени и пелена — в тон текста, а не в тёплый чёрный. */ --gradient-ambient: none; --gradient-veil: linear-gradient(180deg, rgb(23 26 43 / 0) 0%, rgb(23 26 43 / 0.45) 100%); --shadow-sheet: 0 -8px 40px rgb(27 39 80 / 0.18); --shadow-modal: 0 16px 48px rgb(27 39 80 / 0.22); } /* ============================================================ ПАЛИТРА SPRUCE — «Хвоя», зелёная Тёмный режим — грунты с зелёным оттенком, действие глубокий зелёный. Светлый выведен той же схемой, что «Снег»: тон и светлота действия те же, грунты сжаты, акцент уходит вниз по светлоте — на белом листе светлый акцент не читается. ============================================================ */ [data-theme="spruce"][data-mode="dark"] { /* ---------- ГРУНТЫ ---------- */ --color-bg: #050B07; --color-surface-1: #0F1611; --color-surface-2: #181F1A; --color-surface-3: #212924; /* ---------- ДЕЙСТВИЕ ---------- */ --color-primary: #14764A; /* белый текст 5.65 · заливка к фону 3.52 */ --color-primary-hover: #227F52; /* белый текст 4.97 */ --color-primary-press: #03663E; /* белый текст 7.06 */ --color-text-on-primary: #FFFFFF; /* Грани плиты: тот же тон, светлота ±0.04. Текст на них 4.69 и 6.60 */ --color-primary-facet-1: #288357; --color-primary-facet-2: #026B41; /* ---------- АКЦЕНТ И ДЕНЬГИ ---------- */ --color-accent: #79DD9F; /* на фоне 11.97 · на своей подложке 8.83 */ --color-accent-glow: #288357; /* кольцо фокуса, 4.23 к фону. НЕ для текста */ --color-balance: #E9ECEA; /* на surface-1 15.44 */ /* ---------- ТЕКСТ ---------- */ --color-text: #F5F8F6; /* на surface-1 17.18 */ --color-text-2: #A5ADA8; /* на surface-3 6.50 */ --color-text-3: #8C948F; /* на surface-3 4.79 (худший случай) */ --color-text-disabled: #494F4B; /* выключено, норма не применяется */ /* ---------- ГРАНИЦЫ ---------- */ --color-border-subtle: #1C241F; /* декоративная линия, норма не применяется */ --color-border: #2B332E; /* декоративная линия, норма не применяется */ --color-border-strong: #6B746E; /* контур поля, 3.48 к surface-2 */ /* ---------- СТАТУСЫ (те же, что у Базальта) ---------- */ --color-success: #61CB7C; /* на surface-1 9.05 · на своём чипе 7.52 */ --color-warning: #FDA856; /* на surface-1 9.55 · на своём чипе 7.94 */ --color-danger: #EC7069; /* на surface-1 6.20 · на своём чипе 5.59 */ --color-info: #6DBFD3; /* на surface-1 8.79 · на своём чипе 7.34 */ /* ---------- ПОДЛОЖКИ ЧИПОВ ---------- */ --color-success-bg: #142A1A; --color-warning-bg: #2D2414; --color-danger-bg: #2A1B17; --color-info-bg: #162828; --color-accent-bg: #182D1F; /* ---------- БРЕНД ---------- */ --color-logo: #79DD9F; --color-logo-wordmark: #F5F8F6; /* ---------- ПЛАСТИК КАРТЫ: тёмный камень в тон темы ---------- */ --card-stone: #032F1B; /* белые чернила на грани 1: 12.33 */ --card-stone-1: #073D25; --card-stone-2: #022312; } [data-theme="spruce"][data-mode="light"] { /* ---------- ГРУНТЫ ---------- */ --color-bg: #EFFAF3; --color-surface-1: #FFFFFF; --color-surface-2: #E8F3EC; --color-surface-3: #E0EBE4; /* ---------- ДЕЙСТВИЕ ---------- */ --color-primary: #14764A; /* текст на ней 5.65 · заливка к фону 5.28 */ --color-primary-hover: #006D42; /* текст на ней 6.43 */ --color-primary-press: #005D37; /* текст на ней 8.01 */ --color-text-on-primary: #FFFFFF; --color-primary-facet-1: #288357; /* грань плиты, текст на ней 4.69 */ --color-primary-facet-2: #006B41; /* грань плиты, текст на ней 6.61 */ /* ---------- АКЦЕНТ И ДЕНЬГИ ---------- */ --color-accent: #00633B; /* на фоне 6.90 · на своей подложке 5.41 */ --color-accent-glow: #14764A; /* кольцо фокуса, 5.28 к фону. НЕ для текста */ --color-balance: #00633B; /* на surface-1 7.37 */ /* ---------- ТЕКСТ ---------- */ --color-text: #161C18; /* худший грунт 14.15 */ --color-text-2: #4F5852; /* худший грунт 6.03 */ --color-text-3: #5D6660; /* худший грунт 4.86 */ --color-text-disabled: #ABB4AE; /* выключено, норма не применяется */ /* ---------- ГРАНИЦЫ ---------- */ --color-border-subtle: #DDE8E1; /* декоративная линия, норма не применяется */ --color-border: #D0DAD4; /* декоративная линия, норма не применяется */ --color-border-strong: #747D77; /* контур поля, 3.74 к surface-2 */ /* ---------- СТАТУСЫ ---------- */ --color-success: #10693F; /* на surface-1 6.74 · на своём чипе 4.95 */ --color-warning: #7A4E00; /* на surface-1 7.20 · на своём чипе 5.21 */ --color-danger: #A5201A; /* на surface-1 7.44 · на своём чипе 5.31 */ --color-info: #17607F; /* на surface-1 6.96 · на своём чипе 5.08 */ /* ---------- ПОДЛОЖКИ ЧИПОВ ---------- */ --color-success-bg: #C6E4D0; --color-warning-bg: #E3DBC4; --color-danger-bg: #F7D2C6; --color-info-bg: #C6E1E7; --color-accent-bg: #C6E4D1; /* ---------- БРЕНД ---------- */ --color-logo: #14764A; --color-logo-wordmark: #161C18; /* ---------- ПЛАСТИК КАРТЫ: тёмный камень в тон темы ---------- */ --card-stone: #032F1B; --card-stone-1: #073D25; /* светлая грань, белые чернила 12.33 */ --card-stone-2: #022312; } /* ============================================================ ПАЛИТРА QUARTZ — «Кварц», розовая Светлый режим — грунты почти белые с розовым оттенком. Тёмный: те же тон и светлота действия, грунты подкрашены розовым на 1.5% хромы, акцент поднят до L 0.80 — в темноте он светлее действия. ============================================================ */ [data-theme="quartz"][data-mode="light"] { /* ---------- ГРУНТЫ ---------- */ --color-bg: #FFF3F8; --color-surface-1: #FFFFFF; --color-surface-2: #F8ECF1; --color-surface-3: #F1E4E9; /* ---------- ДЕЙСТВИЕ ---------- */ --color-primary: #B23471; /* белый текст 5.80 · заливка к фону 5.36 */ --color-primary-hover: #A82968; /* белый текст 6.60 */ --color-primary-press: #97155A; /* белый текст 8.17 */ --color-text-on-primary: #FFFFFF; /* Грани плиты: тот же тон, светлота ±0.04. Текст на них 4.80 и 6.73 */ --color-primary-facet-1: #C1437E; --color-primary-facet-2: #A62867; /* ---------- АКЦЕНТ И ДЕНЬГИ ---------- */ --color-accent: #96225C; /* на фоне 7.25 · на своей подложке 5.57 */ --color-accent-glow: #B23471; /* кольцо фокуса, 5.36 к фону. НЕ для текста */ --color-balance: #96225C; /* на surface-1 7.84 */ /* ---------- ТЕКСТ ---------- */ --color-text: #1F181B; /* на surface-1 17.43 */ --color-text-2: #5C5256; /* на surface-3 6.08 */ --color-text-3: #6A6064; /* на surface-3 4.90 (худший случай) */ --color-text-disabled: #B8AEB2; /* выключено, норма не применяется */ /* ---------- ГРАНИЦЫ ---------- */ --color-border-subtle: #EDE1E5; /* декоративная линия, норма не применяется */ --color-border: #DFD4D8; /* декоративная линия, норма не применяется */ --color-border-strong: #81777B; /* контур поля, 3.76 к surface-2 */ /* ---------- СТАТУСЫ (те же, что у Снега) ---------- */ --color-success: #10693F; /* на surface-1 6.74 · на своём чипе 4.91 */ --color-warning: #7A4E00; /* на surface-1 7.20 · на своём чипе 5.26 */ --color-danger: #A5201A; /* на surface-1 7.44 · на своём чипе 5.25 */ --color-info: #17607F; /* на surface-1 6.96 · на своём чипе 5.05 */ /* ---------- ПОДЛОЖКИ ЧИПОВ ---------- */ --color-success-bg: #D9DDDA; --color-warning-bg: #EAD9D0; --color-danger-bg: #F1D1D4; --color-info-bg: #DADBE5; --color-accent-bg: #EED2DF; /* ---------- БРЕНД ---------- */ --color-logo: #B23471; --color-logo-wordmark: #1F181B; /* ---------- ПЛАСТИК КАРТЫ: тёмный камень в тон темы ---------- */ --card-stone: #3C1929; /* белые чернила на грани 1: 13.13 */ --card-stone-1: #4D2237; --card-stone-2: #2D111E; } [data-theme="quartz"][data-mode="dark"] { /* ---------- ГРУНТЫ ---------- */ --color-bg: #0E0709; --color-surface-1: #191114; --color-surface-2: #221A1D; --color-surface-3: #2C2427; /* ---------- ДЕЙСТВИЕ ---------- */ --color-primary: #B23471; /* текст на ней 5.80 · заливка к фону 3.44 */ --color-primary-hover: #BC3E7A; /* текст на ней 5.11 */ --color-primary-press: #A12263; /* текст на ней 7.18 */ --color-text-on-primary: #FFFFFF; --color-primary-facet-1: #C2437E; /* грань плиты, текст на ней 4.77 */ --color-primary-facet-2: #A62867; /* грань плиты, текст на ней 6.73 */ /* ---------- АКЦЕНТ И ДЕНЬГИ ---------- */ --color-accent: #FF99C2; /* на фоне 10.05 · на своей подложке 8.32 */ --color-accent-glow: #C2437E; /* кольцо фокуса, 4.18 к фону. НЕ для текста */ --color-balance: #EEEAEB; /* на surface-1 15.56 */ /* ---------- ТЕКСТ ---------- */ --color-text: #F9F6F7; /* худший грунт 14.08 */ --color-text-2: #B1A8AB; /* худший грунт 6.52 */ --color-text-3: #998F92; /* худший грунт 4.82 */ --color-text-disabled: #524B4E; /* выключено, норма не применяется */ /* ---------- ГРАНИЦЫ ---------- */ --color-border-subtle: #281F22; /* декоративная линия, норма не применяется */ --color-border: #362D31; /* декоративная линия, норма не применяется */ --color-border-strong: #796E72; /* контур поля, 3.47 к surface-2 */ /* ---------- СТАТУСЫ ---------- */ --color-success: #61CB7C; /* на surface-1 9.14 · на своём чипе 7.90 */ --color-warning: #FDA856; /* на surface-1 9.64 · на своём чипе 8.53 */ --color-danger: #EC7069; /* на surface-1 6.26 · на своём чипе 5.57 */ --color-info: #6DBFD3; /* на surface-1 8.88 · на своём чипе 7.74 */ /* ---------- ПОДЛОЖКИ ЧИПОВ ---------- */ --color-success-bg: #162515; --color-warning-bg: #321909; --color-danger-bg: #371415; --color-info-bg: #182228; --color-accent-bg: #321621; /* ---------- БРЕНД ---------- */ --color-logo: #FF99C2; --color-logo-wordmark: #F9F6F7; /* ---------- ПЛАСТИК КАРТЫ: тёмный камень в тон темы ---------- */ --card-stone: #3C1929; --card-stone-1: #4D2237; /* светлая грань, белые чернила 13.13 */ --card-stone-2: #2D111E; } /* ============================================================ ПАЛИТРА AMETHYST — «Аметист», фиолетовая ============================================================ */ [data-theme="amethyst"][data-mode="dark"] { /* ---------- ГРУНТЫ ---------- */ --color-bg: #0A080F; --color-surface-1: #15121A; --color-surface-2: #1E1B23; --color-surface-3: #27252D; /* ---------- ДЕЙСТВИЕ ---------- */ --color-primary: #7B50B9; /* белый текст 5.69 · заливка к фону 3.50 */ --color-primary-hover: #8459C3; /* белый текст 5.00 */ --color-primary-press: #6D41A9; /* белый текст 7.05 */ --color-text-on-primary: #FFFFFF; /* Грани плиты: тот же тон, светлота ±0.04. Текст на них 4.69 и 6.64 */ --color-primary-facet-1: #885EC8; --color-primary-facet-2: #7145AE; /* ---------- АКЦЕНТ И ДЕНЬГИ ---------- */ --color-accent: #C8AEFA; /* на фоне 10.33 · на своей подложке 7.88 */ --color-accent-glow: #885EC8; /* кольцо фокуса, 4.25 к фону. НЕ для текста */ --color-balance: #EBEAED; /* на surface-1 15.46 */ /* ---------- ТЕКСТ ---------- */ --color-text: #F7F6F9; /* на surface-1 17.21 */ --color-text-2: #ACA9B1; /* на surface-3 6.53 */ --color-text-3: #939199; /* на surface-3 4.86 (худший случай) */ --color-text-disabled: #4E4C52; /* выключено, норма не применяется */ /* ---------- ГРАНИЦЫ ---------- */ --color-border-subtle: #232028; /* декоративная линия, норма не применяется */ --color-border: #312F37; /* декоративная линия, норма не применяется */ --color-border-strong: #73707A; /* контур поля, 3.50 к surface-2 */ /* ---------- СТАТУСЫ (те же, что у Базальта) ---------- */ --color-success: #61CB7C; /* на surface-1 9.13 · на своём чипе 7.66 */ --color-warning: #FDA856; /* на surface-1 9.63 · на своём чипе 7.94 */ --color-danger: #EC7069; /* на surface-1 6.25 · на своём чипе 5.57 */ --color-info: #6DBFD3; /* на surface-1 8.86 · на своём чипе 7.45 */ /* ---------- ПОДЛОЖКИ ЧИПОВ ---------- */ --color-success-bg: #182720; --color-warning-bg: #31221A; --color-danger-bg: #2E191D; --color-info-bg: #1A252E; --color-accent-bg: #282335; /* ---------- БРЕНД ---------- */ --color-logo: #C8AEFA; --color-logo-wordmark: #F7F6F9; /* ---------- ПЛАСТИК КАРТЫ: тёмный камень в тон темы ---------- */ --card-stone: #2B1F3F; /* белые чернила на грани 1: 12.93 */ --card-stone-1: #392A51; --card-stone-2: #1F162F; } [data-theme="amethyst"][data-mode="light"] { /* ---------- ГРУНТЫ ---------- */ --color-bg: #F8F5FF; --color-surface-1: #FFFFFF; --color-surface-2: #F1EEF8; --color-surface-3: #E9E6F1; /* ---------- ДЕЙСТВИЕ ---------- */ --color-primary: #7B50B9; /* текст на ней 5.69 · заливка к фону 5.28 */ --color-primary-hover: #7247AF; /* текст на ней 6.49 */ --color-primary-press: #64389F; /* текст на ней 8.05 */ --color-text-on-primary: #FFFFFF; --color-primary-facet-1: #885EC8; /* грань плиты, текст на ней 4.69 */ --color-primary-facet-2: #7145AD; /* грань плиты, текст на ней 6.65 */ /* ---------- АКЦЕНТ И ДЕНЬГИ ---------- */ --color-accent: #62359C; /* на фоне 7.77 · на своей подложке 5.99 */ --color-accent-glow: #7B50B9; /* кольцо фокуса, 5.28 к фону. НЕ для текста */ --color-balance: #62359C; /* на surface-1 8.37 */ /* ---------- ТЕКСТ ---------- */ --color-text: #1B191F; /* худший грунт 14.15 */ --color-text-2: #56545C; /* худший грунт 6.05 */ --color-text-3: #64616B; /* худший грунт 4.92 */ --color-text-disabled: #B2AFB8; /* выключено, норма не применяется */ /* ---------- ГРАНИЦЫ ---------- */ --color-border-subtle: #E6E3ED; /* декоративная линия, норма не применяется */ --color-border: #D9D6DF; /* декоративная линия, норма не применяется */ --color-border-strong: #7B7982; /* контур поля, 3.74 к surface-2 */ /* ---------- СТАТУСЫ ---------- */ --color-success: #10693F; /* на surface-1 6.74 · на своём чипе 4.93 */ --color-warning: #7A4E00; /* на surface-1 7.20 · на своём чипе 5.20 */ --color-danger: #A5201A; /* на surface-1 7.44 · на своём чипе 5.27 */ --color-info: #17607F; /* на surface-1 6.96 · на своём чипе 5.07 */ /* ---------- ПОДЛОЖКИ ЧИПОВ ---------- */ --color-success-bg: #CCE1D9; --color-warning-bg: #E9D8CD; --color-danger-bg: #FCCECF; --color-info-bg: #CDDEEF; --color-accent-bg: #E1D4FD; /* ---------- БРЕНД ---------- */ --color-logo: #7B50B9; --color-logo-wordmark: #1B191F; /* ---------- ПЛАСТИК КАРТЫ: тёмный камень в тон темы ---------- */ --card-stone: #2B1F3F; --card-stone-1: #392A51; /* светлая грань, белые чернила 12.93 */ --card-stone-2: #1F162F; } /* ============================================================ ПАЛИТРА AMBER — «Янтарь», тёплая Единственная палитра, где светлота действия разная по режимам. В темноте действие жёлтое (L 0.80) и текст на нём тёмный — как на жёлтой шапке референса. На светлом листе жёлтый невозможен: L 0.80 даёт к листу 1.77 при норме 3.0 (WCAG 1.4.11), и кнопка перестаёт опознаваться как кнопка. Поднять лист нельзя — выше белого ничего нет. Поэтому в светлом режиме тон тот же, а светлота ниже: тёмный мёд, белый текст. Расчёт — COLORS.md, п. 9. ============================================================ */ [data-theme="amber"][data-mode="dark"] { /* ---------- ГРУНТЫ ---------- */ --color-bg: #0D0804; --color-surface-1: #18130D; --color-surface-2: #211C16; --color-surface-3: #2B251F; /* ---------- ДЕЙСТВИЕ ---------- */ --color-primary: #F1B12B; /* тёмный текст 9.52 · заливка к фону 10.50 */ --color-primary-hover: #FBBB39; /* тёмный текст 10.56 */ --color-primary-press: #E0A103; /* тёмный текст 7.98 */ --color-text-on-primary: #1C150C; /* Грани плиты: тот же тон, светлота ±0.04. Текст на них 11.09 и 8.43 */ --color-primary-facet-1: #FFC046; --color-primary-facet-2: #E5A615; /* ---------- АКЦЕНТ И ДЕНЬГИ ---------- */ --color-accent: #FBC959; /* на фоне 12.91 · на своей подложке 9.45 */ --color-accent-glow: #FFC046; /* кольцо фокуса, 12.23 к фону. НЕ для текста */ --color-balance: #EDEBE8; /* на surface-1 15.51 */ /* ---------- ТЕКСТ ---------- */ --color-text: #F8F6F4; /* на surface-1 17.12 */ --color-text-2: #B0AAA3; /* на surface-3 6.58 */ --color-text-3: #97918A; /* на surface-3 4.85 (худший случай) */ --color-text-disabled: #514C47; /* выключено, норма не применяется */ /* ---------- ГРАНИЦЫ ---------- */ --color-border-subtle: #26211A; /* декоративная линия, норма не применяется */ --color-border: #352F29; /* декоративная линия, норма не применяется */ --color-border-strong: #777069; /* контур поля, 3.47 к surface-2 */ /* ---------- СТАТУСЫ (те же, что у Базальта) ---------- */ --color-success: #61CB7C; /* на surface-1 9.09 · на своём чипе 7.68 */ --color-warning: #FDA856; /* на surface-1 9.59 · на своём чипе 7.92 */ --color-danger: #EC7069; /* на surface-1 6.23 · на своём чипе 5.54 */ --color-info: #6DBFD3; /* на surface-1 8.83 · на своём чипе 7.49 */ /* ---------- ПОДЛОЖКИ ЧИПОВ ---------- */ --color-success-bg: #1A2717; --color-warning-bg: #332211; --color-danger-bg: #311914; --color-info-bg: #1C2525; --color-accent-bg: #332712; /* ---------- БРЕНД ---------- */ --color-logo: #FBC959; --color-logo-wordmark: #F8F6F4; /* ---------- ПЛАСТИК КАРТЫ: тёмный камень в тон темы ---------- */ --card-stone: #382100; /* белые чернила на грани 1: 12.84 */ --card-stone-1: #482C00; --card-stone-2: #2A1700; } [data-theme="amber"][data-mode="light"] { /* ---------- ГРУНТЫ ---------- */ --color-bg: #FCF6ED; --color-surface-1: #FFFFFF; --color-surface-2: #F5EFE5; --color-surface-3: #EDE7DC; /* ---------- ДЕЙСТВИЕ ---------- */ --color-primary: #896100; /* текст на ней 5.57 · заливка к фону 5.18 */ --color-primary-hover: #7E5900; /* текст на ней 6.33 */ --color-primary-press: #6C4C00; /* текст на ней 7.86 */ --color-text-on-primary: #FFFFFF; --color-primary-facet-1: #996D00; /* грань плиты, текст на ней 4.62 */ --color-primary-facet-2: #7C5700; /* грань плиты, текст на ней 6.52 */ /* ---------- АКЦЕНТ И ДЕНЬГИ ---------- */ --color-accent: #6C4C00; /* на фоне 7.32 · на своей подложке 5.66 */ --color-accent-glow: #896100; /* кольцо фокуса, 5.18 к фону. НЕ для текста */ --color-balance: #6C4C00; /* на surface-1 7.86 */ /* ---------- ТЕКСТ ---------- */ --color-text: #1D1A14; /* худший грунт 14.10 */ --color-text-2: #59554D; /* худший грунт 6.03 */ --color-text-3: #68625A; /* худший грунт 4.90 */ --color-text-disabled: #B5B0A8; /* выключено, норма не применяется */ /* ---------- ГРАНИЦЫ ---------- */ --color-border-subtle: #EAE4DA; /* декоративная линия, норма не применяется */ --color-border: #DCD7CE; /* декоративная линия, норма не применяется */ --color-border-strong: #7F7A71; /* контур поля, 3.73 к surface-2 */ /* ---------- СТАТУСЫ ---------- */ --color-success: #10693F; /* на surface-1 6.74 · на своём чипе 4.95 */ --color-warning: #7A4E00; /* на surface-1 7.20 · на своём чипе 5.19 */ --color-danger: #A5201A; /* на surface-1 7.44 · на своём чипе 5.30 */ --color-info: #17607F; /* на surface-1 6.96 · на своём чипе 5.04 */ /* ---------- ПОДЛОЖКИ ЧИПОВ ---------- */ --color-success-bg: #CFE2CC; --color-warning-bg: #ECD8C0; --color-danger-bg: #FFCFC2; --color-info-bg: #CFDEE3; --color-accent-bg: #E8D9C1; /* ---------- БРЕНД ---------- */ --color-logo: #896100; --color-logo-wordmark: #1D1A14; /* ---------- ПЛАСТИК КАРТЫ: тёмный камень в тон темы ---------- */ --card-stone: #382100; --card-stone-1: #482C00; /* светлая грань, белые чернила 12.84 */ --card-stone-2: #2A1700; } /* ============================================================ ПАЛИТРА TURQUOISE — «Бирюза» ============================================================ */ [data-theme="turquoise"][data-mode="light"] { /* ---------- ГРУНТЫ ---------- */ --color-bg: #EDFAFB; --color-surface-1: #FFFFFF; --color-surface-2: #E6F3F5; --color-surface-3: #DCEBED; /* ---------- ДЕЙСТВИЕ ---------- */ --color-primary: #02707E; /* белый текст 5.80 · заливка к фону 5.43 */ --color-primary-hover: #056773; /* белый текст 6.57 */ --color-primary-press: #025762; /* белый текст 8.26 */ --color-text-on-primary: #FFFFFF; /* Грани плиты: тот же тон, светлота ±0.04. Текст на них 4.81 и 6.76 */ --color-primary-facet-1: #1E7D8C; --color-primary-facet-2: #026572; /* ---------- АКЦЕНТ И ДЕНЬГИ ---------- */ --color-accent: #025763; /* на фоне 7.73 · на своей подложке 5.97 */ --color-accent-glow: #02707E; /* кольцо фокуса, 5.43 к фону. НЕ для текста */ --color-balance: #025763; /* на surface-1 8.25 */ /* ---------- ТЕКСТ ---------- */ --color-text: #141C1D; /* на surface-1 17.30 */ --color-text-2: #4D5859; /* на surface-3 6.01 */ --color-text-3: #5A6667; /* на surface-3 4.86 (худший случай) */ --color-text-disabled: #A9B3B5; /* выключено, норма не применяется */ /* ---------- ГРАНИЦЫ ---------- */ --color-border-subtle: #DAE7E9; /* декоративная линия, норма не применяется */ --color-border: #CDDADC; /* декоративная линия, норма не применяется */ --color-border-strong: #717D7E; /* контур поля, 3.75 к surface-2 */ /* ---------- СТАТУСЫ (те же, что у Снега) ---------- */ --color-success: #10693F; /* на surface-1 6.74 · на своём чипе 4.99 */ --color-warning: #7A4E00; /* на surface-1 7.20 · на своём чипе 5.28 */ --color-danger: #A5201A; /* на surface-1 7.44 · на своём чипе 5.28 */ --color-info: #17607F; /* на surface-1 6.96 · на своём чипе 5.13 */ /* ---------- ПОДЛОЖКИ ЧИПОВ ---------- */ --color-success-bg: #CAE3DD; --color-warning-bg: #DBDED3; --color-danger-bg: #E1D7D7; --color-info-bg: #CBE1E7; --color-accent-bg: #C7E0E3; /* ---------- БРЕНД ---------- */ --color-logo: #02707E; --color-logo-wordmark: #141C1D; /* ---------- ПЛАСТИК КАРТЫ: тёмный камень в тон темы ---------- */ --card-stone: #002D31; /* белые чернила на грани 1: 12.35 */ --card-stone-1: #013B40; --card-stone-2: #002125; } [data-theme="turquoise"][data-mode="dark"] { /* ---------- ГРУНТЫ ---------- */ --color-bg: #030B0C; --color-surface-1: #0C1617; --color-surface-2: #151F21; --color-surface-3: #1E282A; /* ---------- ДЕЙСТВИЕ ---------- */ --color-primary: #02707E; /* текст на ней 5.80 · заливка к фону 3.43 */ --color-primary-hover: #177987; /* текст на ней 5.10 */ --color-primary-press: #00616D; /* текст на ней 7.17 */ --color-text-on-primary: #FFFFFF; --color-primary-facet-1: #1E7D8C; /* грань плиты, текст на ней 4.81 */ --color-primary-facet-2: #006572; /* грань плиты, текст на ней 6.76 */ /* ---------- АКЦЕНТ И ДЕНЬГИ ---------- */ --color-accent: #77CDDC; /* на фоне 10.93 · на своей подложке 8.85 */ --color-accent-glow: #1E7D8C; /* кольцо фокуса, 4.13 к фону. НЕ для текста */ --color-balance: #E8ECED; /* на surface-1 15.45 */ /* ---------- ТЕКСТ ---------- */ --color-text: #F4F8F8; /* худший грунт 14.10 */ --color-text-2: #A3ADAF; /* худший грунт 6.58 */ --color-text-3: #8A9496; /* худший грунт 4.85 */ --color-text-disabled: #474F50; /* выключено, норма не применяется */ /* ---------- ГРАНИЦЫ ---------- */ --color-border-subtle: #1A2426; /* декоративная линия, норма не применяется */ --color-border: #283234; /* декоративная линия, норма не применяется */ --color-border-strong: #697476; /* контур поля, 3.49 к surface-2 */ /* ---------- СТАТУСЫ ---------- */ --color-success: #61CB7C; /* на surface-1 9.05 · на своём чипе 7.84 */ --color-warning: #FDA856; /* на surface-1 9.55 · на своём чипе 8.46 */ --color-danger: #EC7069; /* на surface-1 6.20 · на своём чипе 5.53 */ --color-info: #6DBFD3; /* на surface-1 8.79 · на своём чипе 7.68 */ /* ---------- ПОДЛОЖКИ ЧИПОВ ---------- */ --color-success-bg: #032817; --color-warning-bg: #2A1E0D; --color-danger-bg: #2F1A18; --color-info-bg: #07252A; --color-accent-bg: #06252A; /* ---------- БРЕНД ---------- */ --color-logo: #77CDDC; --color-logo-wordmark: #F4F8F8; /* ---------- ПЛАСТИК КАРТЫ: тёмный камень в тон темы ---------- */ --card-stone: #002D31; --card-stone-1: #013B40; /* светлая грань, белые чернила 12.35 */ --card-stone-2: #002125; } /* ============================================================ ПЛИТА У цветных палитр и у Telegram плита — это цвет действия с его гранями: шапка экрана и кнопка одного тона. У «Полночи» плита темнее кнопки, поэтому она своя и задана в блоках basalt; здесь — вывод для остальных, чтобы токен плиты был у всех палитр и не расходился с их действием. ============================================================ */ :root, [data-theme] { --color-plate: var(--color-primary); --color-plate-facet-1: var(--color-primary-facet-1); --color-plate-facet-2: var(--color-primary-facet-2); --color-text-on-plate: var(--color-text-on-primary); } /* ============================================================ ПЕЧАТЬ НА ПЛАСТИКЕ Карта — тёмный камень в любом режиме и в любой палитре, поэтому чернила, кромка, магнитная полоса и чип одни на всё. Всё, что напечатано на пластике, — один цвет с разной прозрачностью; альфа задаётся на месте: color-mix(in srgb, var(--card-ink) 90%, transparent). Чернила белые везде, кроме «Полночи»: там они сливочные, в тон тексту на плите. Чип золотой: у настоящих карт он такой, и здесь металл читается как свойство предмета, а не как акцент бренда. ============================================================ */ :root, [data-theme] { --card-ink: rgb(255 255 255); --card-edge: rgb(255 255 255 / 0.10); /* Магнитная полоса темнее пластика: светлая читалась как незагруженный блок */ --card-stripe: rgb(0 0 0 / 0.72); --card-chip: linear-gradient(135deg, #D6B981, #8C7443 55%, #E7D2A2); } /* ============================================================ ДЕНЬГИ В СПИСКАХ Приход красится брендом, а не зелёным: зелёный в продукте оставлен только за статусами («Активна»), иначе цвет успеха размывается. Расход — красный. Отдельные имена, а не accent/danger по месту: в компоненте должно быть видно, что покрашены именно деньги. ============================================================ */ :root, [data-theme] { --color-money-in: var(--color-accent); --color-money-in-bg: var(--color-accent-bg); --color-money-out: var(--color-danger); } /* ============================================================ ОБЩЕЕ ДЛЯ ВСЕХ ТЕМ Ниже нет ни одного цвета — только размеры, время и форма. ============================================================ */ :root { /* ---------- ТИПОГРАФИКА ---------- Manrope — интерфейс. JetBrains Mono — номера карт, коды, суммы. */ --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 34px; --text-4xl: 44px; /* баланс на главной */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.55; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extra: 800; /* только логотип и баланс */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; /* ---------- ПРОСТРАНСТВО — сетка 4px ---------- */ --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; --screen-padding: var(--space-4); --tap-target: 44px; /* минимальная тач-цель, не уменьшать */ --bottom-safe: 88px; /* зона под палец на обычной веб-странице */ /* В Telegram Mini App низ экрана держит сам клиент: там уже есть системная полоса и safe-area. Поэтому нижняя навигация и кнопки прижимаются к --safe-bottom, а не к --bottom-safe — иначе внизу висит пустая полоса. */ --safe-bottom: env(safe-area-inset-bottom, 0px); /* Высота нижней навигации целиком: 8 сверху + док 54 + 12 снизу. На неё опирается нижний отступ контента, поэтому меняется вместе с доком. */ --tabbar-h: 74px; /* ---------- ФОРМА ---------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-card: 18px; --radius-full: 999px; /* Лист с содержимым: скругление верха и на сколько он наезжает на плиту */ --radius-sheet: 26px; --sheet-overlap: 28px; --border-width: 1px; /* ---------- ДВИЖЕНИЕ ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-instant: 80ms; --duration-fast: 140ms; --duration-normal: 200ms; --duration-slow: 250ms; /* потолок */ /* ---------- СЛОИ ---------- */ --z-base: 0; --z-sticky: 10; --z-nav: 20; --z-veil: 30; --z-sheet: 40; --z-modal: 50; --z-toast: 60; } /* Кольцо фокуса собирается из токенов темы, поэтому объявлено отдельно */ :root, [data-theme] { --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent-glow); } /* Графики пульта (/dash). Цвета выводятся из токенов темы, поэтому одни на все палитры и оба режима и ни одного своего хекса. Ряд данных один — цвет акцента: действие «Полночи» на ночной поверхности даёт 1.83 и тонет, а акцент держит 5.11 в ночи и 7.42 на сливках. Где нужно сравнить две величины, рисуем два графика рядом, а не два цвета на одном. Серые — контекст в разборе денег (что ушло шлюзу и партнёру): рассказ там про наше, а не про них. Контрасты — COLORS.md, п. 10. */ :root, [data-theme] { --chart-1: var(--color-accent); --chart-1-wash: color-mix(in srgb, var(--color-accent) 14%, transparent); --chart-mute-1: var(--color-text-3); --chart-mute-2: var(--color-border-strong); --chart-grid: var(--color-border-subtle); --chart-axis: var(--color-border); --chart-crosshair: var(--color-border-strong); --chart-heat-base: var(--color-surface-2); } /* ============================================================ БАЗА ============================================================ */ * { box-sizing: border-box; } body { margin: 0; background: var(--color-bg); background-image: var(--gradient-ambient); background-attachment: fixed; color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out); } /* Цифры, которые выстраиваются в колонку, не должны прыгать */ .amount, .balance, table td, [data-numeric] { font-variant-numeric: tabular-nums; } /* Реквизиты карты — моно, с воздухом между группами */ .card-number { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; } :focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Широкое содержимое скроллится внутри себя, а не ломает страницу */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }