/* Токены дизайн-системы Hyperion (static/css/tokens.css в репозитории Hyperion), перенесены без изменений: палитра «сталь», оранжевый градиент, Inter Tight и Martian Mono (pro.md#decisions, «Дизайн»). Правятся там, сюда — переносом. */ /* Hyperion — управляющие токены продукта. Единственное место, где живут значения. Всё остальное в системе ссылается на токены и про тему, шрифт и шкалу не знает. Порядок блоков: 1) палитра — сырые значения светлой и тёмной темы, нигде больше не нужны; 2) раскладка — какие сырые значения получают управляющие токены в теме; 3) производные — то, что вычисляется из управляющих токенов операциями; 4) размерности — шрифт, шкала кеглей, пространство, радиусы, движение. Продукт — рабочая среда, а не витрина: плотность, читаемость состояния и скорость. Отсюда три решения, которые тянут за собой весь остальной вид: структуру держат хайрлайн и воздух (не плашки и тени), данные набраны моноширинно табличными цифрами, акцент — один и его мало. Тема: светлая по умолчанию, тёмная по prefers-color-scheme, override через data-theme. Атрибут работает на любом узле — это нужно и витрине, которая показывает обе темы рядом, и режиму приборной подложки живого разговора. */ :root { /* 1. Палитра ------------------------------------------------------------ «Сталь»: холодные нейтральные серые без тёплого подтона, уголь и сигнальный оранжевый #FF7426. Светлая тема — светло-серый холст и белые поверхности, тёмная — тот же нейтральный ключ, уведённый в уголь. Оранжевый в системе двух видов. Заливка (`--accent`) — всегда градиент со свечением (`--grad-accent`, `--glow`): кнопки, маркеры, прогресс, пройденное. Текстом и тонкой линией сплошной #FF7426 на светлом не читается (2.6:1), поэтому у текста свой тон — `--accent-ink`. */ /* Три тона текста и три линии. Иерархию текста в системе держат ДВА тона — `--ink` и `--ink-2`; третий тоном иерархии не является. `--ink-3` означает «приглушено»: выключенный контрол, заполнитель поля, служебный значок, величина, которой ещё нет. Он нарочно поднят до проходящего контраста в обеих темах — приглушённое в инструменте всё равно читают, а оговорка «третичный только на кегле ≥18px» в продукте, где почти весь текст мельче, не соблюдается никем. Замеры `--ink-3`: светлая 4.8 на холсте, тёмная 5.9 — проходят в обеих. Линии: `--line` разделяет, `--line-strong` подчёркивает, `--line-control` очерчивает контрол. Первые две — приём композиции и порогу 3:1 не подчиняются: они не единственный признак чего бы то ни было. Третья — подчиняется: граница поля ввода, маркера выбора и вторичной кнопки часто единственное, чем контрол опознаётся (замеры ≥3.16 в обеих темах). */ /* Пять ступеней подмеса тона в поверхность (`--tint-1…5`) — доля сигнального цвета в клетке, подложке или мягкой полосе. Ступени разные в темах: на угле тот же подмес темнит поверхность сильнее, а текст тоном `--ink` на верхней ступени обязан держать 4.5:1 — замеры с `--bad`: светлая 7.1, тёмная 6.2. Смешение пишется на месте — `color-mix(in srgb, var(--bad) var(--tint-3), var(--surface))`: отдельного токена на каждую пару тона и ступени нет. `--tint-soft` — подмес мягкого градиента полос: на угле оранжевый, подмешанный слабо, становится коричневым, поэтому в тёмной теме подмес сильнее. */ --palette-light-bg: #eeeeee; --palette-light-surface: #ffffff; --palette-light-surface-2: #e2e2e2; --palette-light-ink: #1c1c1c; --palette-light-ink-2: #5c5c5c; --palette-light-ink-3: #6a6a6a; --palette-light-line: #d9d9d9; --palette-light-line-2: #c4c4c4; --palette-light-line-3: #858585; --palette-light-accent: #ff7426; --palette-light-accent-hover: #ff8640; --palette-light-accent-soft: #ffe9dc; --palette-light-accent-ink: #b0400a; --palette-light-on-accent: #1c1c1c; --palette-light-bad: #c0271d; --palette-light-bad-soft: #fbe3e1; --palette-light-warn: #8a6100; --palette-light-warn-soft: #f6ecd5; --palette-light-scrim: rgba(28, 28, 28, 0.38); --palette-light-shadow: 0 0 0; --palette-light-tint-1: 8%; --palette-light-tint-2: 16%; --palette-light-tint-3: 26%; --palette-light-tint-4: 38%; --palette-light-tint-5: 50%; --palette-light-tint-soft: 50%; --palette-dark-bg: #1a1a1a; --palette-dark-surface: #242424; --palette-dark-surface-2: #2b2b2b; --palette-dark-ink: #f2f2f2; --palette-dark-ink-2: #ababab; --palette-dark-ink-3: #999999; --palette-dark-line: #383838; --palette-dark-line-2: #4a4a4a; --palette-dark-line-3: #7a7a7a; --palette-dark-accent: #ff7a2e; --palette-dark-accent-hover: #ff9050; --palette-dark-accent-soft: #3a2418; --palette-dark-accent-ink: #ff9a5c; --palette-dark-on-accent: #1a1a1a; --palette-dark-bad: #f08a80; --palette-dark-bad-soft: #2e1a18; --palette-dark-warn: #e0b060; --palette-dark-warn-soft: #2c2412; --palette-dark-scrim: rgba(0, 0, 0, 0.62); --palette-dark-shadow: 0 0 0; --palette-dark-tint-1: 12%; --palette-dark-tint-2: 18%; --palette-dark-tint-3: 26%; --palette-dark-tint-4: 34%; --palette-dark-tint-5: 42%; --palette-dark-tint-soft: 66%; } /* 2. Раскладка ------------------------------------------------------------ Управляющих токенов ровно столько, сколько ролей в дизайн-языке. Тема меняет только их; ни одно правило системы не знает, какая тема сейчас. `--good` в этом продукте — тот же оранжевый, что и акцент, и это решение, а не экономия: зачисленное, пройденное и главное действие — одно и то же событие «получилось», и второго цвета успеха в системе быть не должно. Текстом `--good` берёт читаемый тон акцента, заливкой компоненты берут градиент. Отдельными остаются только `--bad` и `--warn`. */ :root, [data-theme="light"] { --bg: var(--palette-light-bg); --surface: var(--palette-light-surface); --surface-2: var(--palette-light-surface-2); --ink: var(--palette-light-ink); --ink-2: var(--palette-light-ink-2); --ink-3: var(--palette-light-ink-3); --line: var(--palette-light-line); --line-strong: var(--palette-light-line-2); --line-control: var(--palette-light-line-3); --accent: var(--palette-light-accent); --accent-hover: var(--palette-light-accent-hover); --accent-soft: var(--palette-light-accent-soft); --accent-ink: var(--palette-light-accent-ink); --on-accent: var(--palette-light-on-accent); --on-bad: #ffffff; --good: var(--palette-light-accent-ink); --good-soft: var(--palette-light-accent-soft); --bad: var(--palette-light-bad); --bad-soft: var(--palette-light-bad-soft); --warn: var(--palette-light-warn); --warn-soft: var(--palette-light-warn-soft); --scrim: var(--palette-light-scrim); --shadow-rgb: var(--palette-light-shadow); --tint-1: var(--palette-light-tint-1); --tint-2: var(--palette-light-tint-2); --tint-3: var(--palette-light-tint-3); --tint-4: var(--palette-light-tint-4); --tint-5: var(--palette-light-tint-5); --tint-soft: var(--palette-light-tint-soft); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--palette-dark-bg); --surface: var(--palette-dark-surface); --surface-2: var(--palette-dark-surface-2); --ink: var(--palette-dark-ink); --ink-2: var(--palette-dark-ink-2); --ink-3: var(--palette-dark-ink-3); --line: var(--palette-dark-line); --line-strong: var(--palette-dark-line-2); --line-control: var(--palette-dark-line-3); --accent: var(--palette-dark-accent); --accent-hover: var(--palette-dark-accent-hover); --accent-soft: var(--palette-dark-accent-soft); --accent-ink: var(--palette-dark-accent-ink); --on-accent: var(--palette-dark-on-accent); --on-bad: #1a1a1a; --good: var(--palette-dark-accent-ink); --good-soft: var(--palette-dark-accent-soft); --bad: var(--palette-dark-bad); --bad-soft: var(--palette-dark-bad-soft); --warn: var(--palette-dark-warn); --warn-soft: var(--palette-dark-warn-soft); --scrim: var(--palette-dark-scrim); --shadow-rgb: var(--palette-dark-shadow); --tint-1: var(--palette-dark-tint-1); --tint-2: var(--palette-dark-tint-2); --tint-3: var(--palette-dark-tint-3); --tint-4: var(--palette-dark-tint-4); --tint-5: var(--palette-dark-tint-5); --tint-soft: var(--palette-dark-tint-soft); color-scheme: dark; } } [data-theme="dark"] { --bg: var(--palette-dark-bg); --surface: var(--palette-dark-surface); --surface-2: var(--palette-dark-surface-2); --ink: var(--palette-dark-ink); --ink-2: var(--palette-dark-ink-2); --ink-3: var(--palette-dark-ink-3); --line: var(--palette-dark-line); --line-strong: var(--palette-dark-line-2); --line-control: var(--palette-dark-line-3); --accent: var(--palette-dark-accent); --accent-hover: var(--palette-dark-accent-hover); --accent-soft: var(--palette-dark-accent-soft); --accent-ink: var(--palette-dark-accent-ink); --on-accent: var(--palette-dark-on-accent); --on-bad: #1a1a1a; --good: var(--palette-dark-accent-ink); --good-soft: var(--palette-dark-accent-soft); --bad: var(--palette-dark-bad); --bad-soft: var(--palette-dark-bad-soft); --warn: var(--palette-dark-warn); --warn-soft: var(--palette-dark-warn-soft); --scrim: var(--palette-dark-scrim); --shadow-rgb: var(--palette-dark-shadow); --tint-1: var(--palette-dark-tint-1); --tint-2: var(--palette-dark-tint-2); --tint-3: var(--palette-dark-tint-3); --tint-4: var(--palette-dark-tint-4); --tint-5: var(--palette-dark-tint-5); --tint-soft: var(--palette-dark-tint-soft); color-scheme: dark; } /* 3. Производные от управляющих токенов ---------------------------------- Тему не знают: считаются операциями над --ink, --accent и --bg. Объявлены на `:root` и на `[data-theme]` намеренно. Значение подставляется там, где свойство объявлено, и дальше наследуется уже вычисленным. Поэтому производные, объявленные только на `:root`, считались бы по корневой теме и не менялись бы внутри узла с собственным `data-theme` — а такой узел в системе есть и в витрине, и в режиме приборной подложки. */ :root, [data-theme] { --overlay-hover: color-mix(in srgb, var(--ink) 5%, transparent); --overlay-active: color-mix(in srgb, var(--ink) 10%, transparent); --accent-active: color-mix(in srgb, var(--accent-hover) 88%, var(--ink)); --bad-hover: color-mix(in srgb, var(--bad) 85%, var(--ink)); --bad-active: color-mix(in srgb, var(--bad) 72%, var(--ink)); /* Выбранное в списке — едва тёплая поверхность: от наведения отличается тоном, а не темнотой, и с оранжевым действием не спорит. */ --accent-wash: color-mix(in srgb, var(--accent) calc(var(--tint-1) * 0.6), var(--surface)); /* Фокус: рамка тоном текста плюс оранжевое кольцо. Сплошной оранжевый рамкой на светлом не виден, а системного синего в продукте нет. */ --focus: var(--ink); --focus-ring: color-mix(in srgb, var(--accent) 30%, transparent); /* Единственная тень в системе — мягкая, в тёплом ключе фона, и только для по-настоящему приподнятого. Разделяют хайрлайн и воздух, не тени. */ --e-0: none; --e-1: none; --e-2: 0 1px 2px rgb(var(--shadow-rgb) / 0.04), 0 12px 32px rgb(var(--shadow-rgb) / 0.08); --e-3: 0 2px 6px rgb(var(--shadow-rgb) / 0.07), 0 24px 64px rgb(var(--shadow-rgb) / 0.16); } /* Оранжевый: градиент и свечение ------------------------------------------ Один цвет — сигнальный #FF7426 — от янтарного края к красно-оранжевому. Заливка акцентом в системе — всегда градиент, и почти всегда со свечением. Значения одинаковы в обеих темах: свечение на угле и на светло-сером читается одинаково мягко. */ :root { --o-hi: #ffb84d; --o: #ff7426; --o-lo: #e83d0c; --grad-accent: linear-gradient(110deg, var(--o-hi) 0%, var(--o) 48%, var(--o-lo) 100%); --grad-accent-x: linear-gradient(90deg, var(--o-lo) 0%, var(--o) 55%, var(--o-hi) 100%); --grad-accent-y: linear-gradient(0deg, var(--o-lo) 0%, var(--o) 50%, var(--o-hi) 100%); --glow: 0 0 0 1px rgb(232 61 12 / 0.25), 0 6px 18px -6px rgb(255 116 38 / 0.45), 0 0 32px -12px rgb(255 140 60 / 0.35); --glow-hot: 0 0 0 1px rgb(232 61 12 / 0.35), 0 10px 26px -6px rgb(255 116 38 / 0.6), 0 0 52px -10px rgb(255 140 60 / 0.5); --glow-soft: 0 0 12px -2px rgb(255 116 38 / 0.4); --glow-dot: 0 0 6px rgb(255 116 38 / 0.5); --btn-highlight: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 -2px 0 rgb(120 30 0 / 0.12); } /* Мягкий градиент: тёплая половина того же хода, подмешанная в поверхность темы, — без красно-оранжевого края, чтобы с тоном риска не спутаться. Для полос данных, которых на экране много (ступени воронки, столбики, доли). Полная заливка со свечением остаётся тому, что отмечено. Считается от поверхности, поэтому объявлен там же, где производные. */ :root, [data-theme] { --grad-accent-soft: linear-gradient( 90deg, color-mix(in srgb, var(--o) calc(var(--tint-soft) - 10%), var(--surface)) 0%, color-mix(in srgb, var(--o-hi) var(--tint-soft), var(--surface)) 100% ); } :root { /* 4. Размерности -------------------------------------------------------- */ /* Шрифты. Файлы свои (fonts.css); здесь только назначение на роли. Inter Tight — дисплей и текст, гротеск в духе Helvetica. Martian Mono — всё, что данные: цифры, счётчики, таймеры, номера, лейблы и служебные подписи; крупные величины — в широком начертании. Кириллицы у обоих файлов нет: русский текст берёт системный гротеск, моноширинный — кириллический IBM Plex Mono, который лежит в проекте. */ --font: "Inter Tight", "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "Martian Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Шкала кеглей: шесть ступеней, ни одной сверх. Тело фиксировано — в инструменте оно не должно ездить от ширины окна; ездят заголовки, и разрыв между телом и главной величиной вида остаётся реальным (17 → 52 = 3.06x), а не косметическим. Опора: 375px → 1440px. */ --size-1: 12px; --size-2: 14px; --size-3: 17px; --size-4: clamp(18px, 17.3px + 0.19vw, 20px); --size-5: clamp(24px, 21.9px + 0.56vw, 30px); --size-6: clamp(34px, 27.7px + 1.69vw, 52px); /* Роли. Крупное — с минус-трекингом, мелкий капс — с плюс-трекингом; трекинг живёт рядом с ролью в base.css, здесь только шрифт-шорткат. */ --t-display: 800 var(--size-6) / 0.98 var(--font); --t-h1: 700 var(--size-5) / 1.1 var(--font); --t-h2: 650 var(--size-4) / 1.22 var(--font); --t-body: 400 var(--size-3) / 1.52 var(--font); --t-small: 400 var(--size-2) / 1.45 var(--font); --t-caption: 500 semi-condensed 11px / 1.35 var(--font-mono); /* Лид — не седьмая ступень, а тело вторичным тоном: иерархию здесь держит светлота, а не размер. */ --t-lead: var(--t-body); /* Данные: тот же кегль, что у соседнего текста, но моноширинный и полужирный — величина обязана читаться как величина. */ --t-data: 500 var(--size-3) / 1.3 var(--font-mono); --t-data-sm: 500 var(--size-2) / 1.3 var(--font-mono); --t-data-lg: 500 semi-expanded var(--size-5) / 1.05 var(--font-mono); --t-data-xl: 500 semi-expanded var(--size-6) / 1 var(--font-mono); /* Мера читаемой колонки. Переменная: сетки шире, узкие формы уже. Проза меряется знаками, а не пикселями: строка длиннее 70 знаков теряется при возврате независимо от кегля. */ --measure: 660px; --measure-prose: 66ch; /* Сетка страницы: двенадцать колонок, gutter 24, контейнер 1180. Композиция держится на ней, а не на центрированном столбце: содержание стоит на единой левой оси, а справа остаётся поле и полоса состояния. */ --container: 1180px; --gutter: 24px; --grid: repeat(12, minmax(0, 1fr)); /* Пространство: три явных уровня, и переход между уровнями — скачок, а не следующее значение шкалы. Внутри блока плотно (инструмент), между секциями просторно (воздух вместо линий). */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* Карта связи: один тип связи — один зазор. Раскладка берёт эти имена, а не числа шкалы. Уровень I — внутри блока: tight · inline · related Уровень II — между блоками: stack · group Уровень III — между секциями: block · section */ --gap-tight: var(--s-1); --gap-inline: var(--s-2); --gap-related: var(--s-3); --gap-stack: var(--s-5); --gap-group: var(--s-6); --gap-block: var(--s-10); --gap-section: clamp(40px, 2.3vw + 31px, 64px); /* Радиусы: концентрично, внутренний меньше внешнего. Скругление мягкое, как у корпуса прибора: крупные панели 20, поверхности 16, контролы 10, мелочь 6. */ --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px; /* Высоты и хром */ --header-h: 60px; /* Высота хедера, сжатого прокруткой: хром уступает место чтению, но остаётся полноценной строкой — знаки в ней не должны мельчать. */ --header-h-compact: 46px; --control-h: 44px; --control-h-sm: 32px; /* Поле ввода выше кнопки: в него целятся, а не просто нажимают. */ --field-h: 54px; --icon: 18px; --icon-sm: 16px; /* Кольцо фокуса */ --ring-w: 2px; --ring-offset: 2px; --ring-spread: 5px; /* Движение: transform, opacity и цвет; вход ease-out, выход ease-in. Отклик на состояние — 120–200мс, появление блоков — 700мс каскадом. */ --dur-fast: 120ms; --dur-in: 200ms; --dur-out: 160ms; --dur-reveal: 700ms; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1); --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); --stagger: 70ms; /* Слои: оверлеи под хедером */ --z-overlay: 40; --z-header: 60; --z-dev: 80; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-in: 1ms; --dur-out: 1ms; --dur-reveal: 1ms; --stagger: 0ms; } } @media (max-width: 720px) { :root { --header-h: 52px; --header-h-compact: 44px; } }