/* =========================================================================== Дизайн-токены platform-web. Фаза 1 редизайна. Единственное место, где объявлены цвета, шкала типографики, радиусы, тени и отступы. Компоненты (components.css) и экраны берут ТОЛЬКО отсюда — литеральных цветов в остальном UI быть не должно. Тема. Три состояния, а не два: явный выбор ставит data-theme на , а значение «как в системе» не ставит ничего — тогда светлую и тёмную различает только prefers-color-scheme. Поэтому :root задаёт ПОЛНУЮ светлую палитру, медиазапрос переопределяет токены с защитой :not([data-theme="light"]), а [data-theme="dark"] переопределяет их же ещё раз, чтобы переключатель выигрывал в обе стороны. Контраст. Все пары «текст на своей поверхности» проверены на WCAG AA (≥4.5:1 для основного текста, ≥3:1 для крупного и для границ элементов управления) — значения подобраны, а не взяты на глаз. =========================================================================== */ :root { /* --- поверхности ------------------------------------------------------ */ --bg: #f6f6fa; /* фон страницы */ --surface: #ffffff; /* карточки, панели, модалы */ --surface-2: #eeeef4; /* вложенные блоки, шапки таблиц, скелетоны */ --surface-3: #e3e3ec; /* hover по строке, разделители блоков */ --border: #d7d7e2; --border-soft: #e8e8f0; /* --- текст: три уровня иерархии --------------------------------------- */ --text-1: #15151f; /* заголовки, суммы, основное — 16.8:1 на surface */ --text-2: #474759; /* обычный текст — 8.6:1 */ --text-3: #61617a; /* подписи, hint, мета — 6.0:1 на surface, 5.2:1 на surface-2 */ /* --- основной акцент --------------------------------------------------- */ --primary: #5638e8; /* белый текст на нём — 6.9:1 */ --primary-hover: #452cc4; --primary-active: #37229c; --primary-text: #ffffff; /* текст ПОВЕРХ --primary */ --primary-ink: #4a2fd6; /* сам акцент как ЦВЕТ ТЕКСТА на светлом фоне */ --primary-wash: #efecfe; /* 8%-подложка чипов и выделений */ /* --- семантика: отдельно от акцента ------------------------------------ */ --success: #0f7550; --success-ink: #0c6344; --success-wash: #e2f3ec; --success-text: #ffffff; /* текст ПОВЕРХ --success */ --warning: #8a5300; --warning-text: #ffffff; /* текст ПОВЕРХ --warning */ --warning-ink: #7a4900; --warning-wash: #fbf0dd; --danger: #bc2a1c; --danger-ink: #a32418; --danger-wash: #fbe7e4; --danger-text: #ffffff; /* текст ПОВЕРХ --danger */ --info: #1a5f9c; --info-ink: #17538a; --info-wash: #e4eff9; /* --- фокус ------------------------------------------------------------- */ --focus-ring: #5638e8; /* --- типографика ------------------------------------------------------- */ --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --fs-12: 0.75rem; --lh-12: 1.4; --fs-14: 0.875rem; --lh-14: 1.5; --fs-16: 1rem; --lh-16: 1.55; --fs-20: 1.25rem; --lh-20: 1.35; --fs-24: 1.5rem; --lh-24: 1.25; --fs-32: 2rem; --lh-32: 1.15; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* --- геометрия --------------------------------------------------------- */ --r-sm: 8px; --r-md: 12px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; /* Тач-таргет: минимальная высота интерактивного элемента (0.7 чеклиста). */ --tap: 44px; --shadow-card: 0 1px 2px rgba(21, 21, 31, .06), 0 2px 8px -4px rgba(21, 21, 31, .12); --shadow-modal: 0 8px 20px -6px rgba(21, 21, 31, .22), 0 24px 60px -20px rgba(21, 21, 31, .35); /* --- слои -------------------------------------------------------------- */ --z-sticky: 10; --z-shell: 50; --z-overlay: 100; --z-toast: 200; color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f1115; --surface: #171a21; --surface-2: #1e222b; --surface-3: #272c37; --border: #2e3441; --border-soft: #232833; --text-1: #eaebf1; /* 15.1:1 на surface */ --text-2: #b4b9c6; /* 8.2:1 */ --text-3: #949aab; /* 5.7:1 на surface, 5.0:1 на surface-2 */ --primary: #7b62ff; --primary-hover: #8d78ff; --primary-active: #6a4ff0; --primary-text: #0f1115; --primary-ink: #a793ff; --primary-wash: #201d3a; --success: #35b98c; --success-ink: #55d0a6; --success-wash: #102e26; --success-text: #05241a; /* success в тёмной теме СВЕТЛЫЙ — поверх него нужен тёмный текст */ --warning: #d99a34; --warning-text: #2a1a00; /* warning в тёмной теме СВЕТЛЫЙ — поверх него нужен тёмный текст */ --warning-ink: #e8b25a; --warning-wash: #302510; --danger: #f0655c; --danger-ink: #ff8b83; --danger-wash: #341a18; --danger-text: #2b0c08; /* danger в тёмной теме СВЕТЛЫЙ — поверх него нужен тёмный текст */ --info: #59a8ec; --info-ink: #7dbdf3; --info-wash: #12283c; --focus-ring: #9c88ff; --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px -4px rgba(0, 0, 0, .5); --shadow-modal: 0 8px 20px -6px rgba(0, 0, 0, .55), 0 24px 60px -20px rgba(0, 0, 0, .75); } } :root[data-theme="dark"] { --bg: #0f1115; --surface: #171a21; --surface-2: #1e222b; --surface-3: #272c37; --border: #2e3441; --border-soft: #232833; --text-1: #eaebf1; --text-2: #b4b9c6; --text-3: #949aab; --primary: #7b62ff; --primary-hover: #8d78ff; --primary-active: #6a4ff0; --primary-text: #0f1115; --primary-ink: #a793ff; --primary-wash: #201d3a; --success: #35b98c; --success-ink: #55d0a6; --success-wash: #102e26; --success-text: #05241a; /* success в тёмной теме СВЕТЛЫЙ — поверх него нужен тёмный текст */ --warning: #d99a34; --warning-ink: #e8b25a; --warning-wash: #302510; --warning-text: #2a1a00; /* warning в тёмной теме СВЕТЛЫЙ — поверх него нужен тёмный текст */ --danger: #f0655c; --danger-ink: #ff8b83; --danger-wash: #341a18; --danger-text: #2b0c08; /* danger в тёмной теме СВЕТЛЫЙ — поверх него нужен тёмный текст */ --info: #59a8ec; --info-ink: #7dbdf3; --info-wash: #12283c; --focus-ring: #9c88ff; --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px -4px rgba(0, 0, 0, .5); --shadow-modal: 0 8px 20px -6px rgba(0, 0, 0, .55), 0 24px 60px -20px rgba(0, 0, 0, .75); } /* --------------------------------------------------------------------------- Статусы. Единый словарь: каждый статус — это ЦВЕТ + ИКОНКА + ТЕКСТ, и цвет никогда не единственный носитель смысла (0.6 чеклиста). Здесь только цветовая часть; иконка и подпись задаются в ui/status.js, чтобы у статуса было одно определение на весь проект. --------------------------------------------------------------------------- */ :root { --st-valid: var(--success); --st-valid-wash: var(--success-wash); --st-redeemed: var(--text-3); --st-redeemed-wash: var(--surface-2); --st-listed: var(--info); --st-listed-wash: var(--info-wash); --st-refunded: var(--warning); --st-refunded-wash: var(--warning-wash); --st-cancelled: var(--danger); --st-cancelled-wash: var(--danger-wash); --st-paused: var(--warning); --st-paused-wash: var(--warning-wash); --st-draft: var(--text-3); --st-draft-wash: var(--surface-2); --st-soldout: var(--text-3); --st-soldout-wash: var(--surface-2); } /* --------------------------------------------------------------------------- База документа. Цифры — tabular-nums глобально: суммы XTR, дедлайны и счётчики встречаются почти на каждом экране, и разъезжающиеся колонки цифр заметны сильнее, чем выигрыш от пропорциональных. --------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; } body.ui { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text-2); font-family: var(--font-sans); font-size: var(--fs-16); line-height: var(--lh-16); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } body.ui * { box-sizing: border-box; } body.ui h1, body.ui h2, body.ui h3, body.ui h4 { color: var(--text-1); font-weight: var(--fw-semibold); margin: 0; text-wrap: balance; } body.ui h1 { font-size: var(--fs-32); line-height: var(--lh-32); letter-spacing: -0.02em; } body.ui h2 { font-size: var(--fs-24); line-height: var(--lh-24); letter-spacing: -0.015em; } body.ui h3 { font-size: var(--fs-20); line-height: var(--lh-20); letter-spacing: -0.01em; } body.ui h4 { font-size: var(--fs-16); line-height: var(--lh-16); } body.ui p { margin: 0; } /* Общий цвет ссылки НЕ должен доставать кнопки: `.ui-btn--primary` имеет специфичность (0,1,0), а `body.ui a` — (0,1,2) и выигрывает, из-за чего кнопка-ссылка получала фиолетовый текст на фиолетовом фоне (1.17:1, практически невидимо). Исключаем кнопки из правила явно. */ body.ui a:not(.ui-btn):not(.ui-nav-link):not(.ui-tabbar-link):not(.ui-brand) { color: var(--primary-ink); } /* Видимое кольцо фокуса на всём интерактивном — обязательное условие клавиатурной навигации (0.6). Именно :focus-visible, чтобы кольцо не мешало при обычном клике мышью. */ body.ui :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm); } @media (prefers-reduced-motion: reduce) { body.ui *, body.ui *::before, body.ui *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Атрибут hidden должен ВЫИГРЫВАТЬ у классов раскладки. Браузерное правило [hidden]{display:none} слабее любого авторского класса, поэтому элемент с display:flex/grid остаётся видимым, даже будучи помечен hidden — так пустое состояние скрытой вкладки «Перепродажа» показывалось на активной вкладке «Мои билеты». Ловится только глазами: разметка при этом корректна. */ [hidden] { display: none !important; } /* Только для скринридеров: подписи там, где визуально смысл несёт иконка. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }