/* Личный ассистент — токены. Без сборки: подключается как обычный CSS. */ :root { /* Поверхности */ --bg: #f5f4f1; --surface: #ffffff; --surface-sunk: #eceae5; --glass: rgba(255,255,255,.72); --glass-blur: 22px; --scrim: rgba(23,22,26,.34); /* Текст и линии */ --ink: #17161a; --ink-2: rgba(23,22,26,.52); --ink-3: rgba(23,22,26,.35); --line: rgba(23,22,26,.08); --line-strong: rgba(23,22,26,.13); /* Акцент — только живое: прогресс, «сейчас», найденная связь, активный ввод */ --accent: #4b52e8; --accent-soft: rgba(75,82,232,.08); --on-accent: #ffffff; /* Обложка выпуска — всегда тёмная, в обеих темах */ --cover-bg: #1b1a20; --cover-ink: #ffffff; --cover-ink-2: rgba(255,255,255,.55); --cover-accent: #8e93ff; /* Типографика: только системные шрифты */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, monospace; --t-display: 600 38px/1.04 var(--font); --t-display-ls: -.045em; --t-title: 600 27px/1.12 var(--font); --t-title-ls: -.03em; --t-head: 600 19px/1.25 var(--font); --t-head-ls: -.02em; --t-body: 400 16px/1.5 var(--font); --t-row: 400 15px/1.3 var(--font); --t-meta: 500 12px/1 var(--font); --t-label: 600 9.5px/1 var(--font); --t-label-ls: .16em; /* Ритм */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 26px; --sp-7: 34px; /* Отступы экрана — имена вместо голой арифметики. До них каждый файл (today.css, plan.css, money.css, calendar.css, wheel.css, base.css, news.css, style.css) писал свою копию одной и той же формулы отступа от чёлки, и копии расходились: у news.css `.n-back` рядом стоял буквальный комментарий «второй набор чисел для того же предмета — то, из-за чего экраны расходятся». Экран без поиска над «Базой» (см. `.b-find` в style.css) — тот же симптом: отступа не было вовсе, потому что формулы не было ни в одной из копий. Форм отступа сверху ДВЕ, и это не ошибка, а разная разметка шапки: --page-top — компактный: max(20, env+12). Для шапок с собственным воздухом над первой строкой (Сегодня, План, Деньги, Календарь, Колесо) — там весь верх и так не садится вплотную к вырезу. --page-top-tall — высокий: env+20. Для шапок-строк без своего воздуха (`.top` — чат/выпуск, `.b-chrome` — База, `.n-back` — новости) — там заголовок единственная строка и ему нужен явный отступ. Смешивать их не нужно — которая где, решено местом. Но теперь это два имени, а не N копий подсчёта. */ --page-top: max(var(--sp-5), calc(env(safe-area-inset-top, 0px) + var(--sp-3))); --page-top-tall: calc(env(safe-area-inset-top, 0px) + var(--sp-5)); --page-x: var(--sp-5); /* боковые поля экрана — 20px в большинстве разделов */ --stack-gap: var(--sp-4); /* шапка → первый блок тела */ --card-gap: var(--sp-3); /* карточка/строка → следующая подряд */ --r-sheet: 32px; --r-card: 28px; --r-ctl: 20px; --r-chip: 14px; --r-pill: 99px; --tap-min: 44px; /* минимальная зона нажатия */ --check: 22px; /* квадрат «Готово» у дела */ --bottom-dock: 118px; /* запас под плавающую панель */ --ease: cubic-bezier(.2,.8,.2,1); --dur-1: 140ms; --dur-2: 260ms; --dur-3: 420ms; /* ------------------------------------------------ добавлено «Карточками v2» Только НОВЫЕ имена: ни одно из перечисленного выше не переименовано и не удалено — на них стоят style.css и app.js. Хорошо и плохо — цвета тона. Раньше их не было, и cards.css записывал тон запасным значением внутри `var(…)`: он существовал, но был неотличим от акцента. Теперь отличим, и запасных значений рядом с этими именами не осталось нигде — запасное значение, которое никогда не берётся, читается как «имени может не быть», а оно есть. */ --good: #1f8f63; --warn: #b4632f; /* Ещё два тона — «высоко» и «опасно». Имён у них не было, и три места писали цвет прямо в запись запасным значением (`var(--danger, #b3261e)` в today.css, `var(--danger, #b84949)` в calendar.css, тот же приём в gauge.js с комментарием «общего имени нет»). Запасное значение, которое берётся ВСЕГДА, — это не запасное значение, а цвет, набранный мимо токенов; два таких в одном приложении уже разошлись на полтона. Взят более тёмный из двух: тон говорит «опасно», и мягкий кирпичный calendar.css рядом с красным шкалы читался как другой смысл. */ --high: #d9822b; --danger: #b3261e; /* Три кегля вместо одного — правило макета: подпись 9, значение 17, заголовок 20. Ровно из-за их отсутствия карточка читалась одной плоскостью. */ --t-kicker: 600 9px/1 var(--font); --t-kicker-ls: .15em; --t-card: 600 20px/1.15 var(--font); --t-card-ls: -.025em; --t-lead: 400 14.5px/1.5 var(--font); --t-value: 500 17px/1.15 var(--font); --t-big: 600 24px/1 var(--font); --t-big-ls: -.03em; --t-tag: 500 11px/1.2 var(--font); /* метка */ --t-link: 500 12.5px/1.2 var(--font); /* подпись ссылки */ --t-dom: 400 11px/1 var(--font); /* домен под ней */ --t-btn: 500 13px/1 var(--font); /* кнопка */ --t-note: 400 12.5px/1.4 var(--font); /* служебная строка */ /* Метка — прямоугольная (r-tag), кнопка — таблетка (r-pill). Разные скругления здесь и есть то, чем одно отличается от другого. */ --r-tag: 6px; --r-thumb: 12px; /* Малая карточка внутри карточки — вложение, файл, снимок. Половина от `--r-card`: то же семейство скруглений, а не второе. */ --r-card-sm: 14px; --c-btn-h: 40px; /* Плёнка на обложке. Значения подняты после жалобы: белый текст пропадал на светлом окне снимка. Слабое место было НЕ внизу, где заголовок, а в середине и наверху — там стояло 32% затемнения, и кикер с подписью на светлой части кадра исчезали. Верхняя граница выбрана так, чтобы фотография осталась фотографией: выше 70% снимок превращается в тёмный прямоугольник, и обложка перестаёт быть обложкой. Ниже 50% текст не держится на светлом. */ --cover-scrim: rgba(18,17,22,.90); --cover-scrim-mid: rgba(18,17,22,.74); --cover-scrim-soft: rgba(18,17,22,.56); /* ------------------------------------------ добавлено аналитикой «Денег» РЯД ЦВЕТОВ ДЛЯ ДОЛЕЙ ДИАГРАММЫ. Раньше его не было вовсе: единственные цвета в системе — акцент и два тона, а ими доли красить нельзя. Почему не радуга наугад. Цвет доли здесь ничего не означает: он только связывает дугу кольца со строкой списка, и список остаётся основным способом прочитать экран. Значит от ряда требуется одно — чтобы шесть цветов различались между собой в обеих темах, а не чтобы их было много. Почему шесть. Седьмой цвет при той же светлоте неизбежно садится между двумя соседними, и две разные категории становятся одной дугой. Всё, что не поместилось, складывается сервером в одну долю и красится --ch-rest. Чего в ряду НЕТ намеренно: индиго акцента (он означает «сюда нажимать» и на диаграмме читался бы как выбранная доля) и оранжевого тревоги (он означает «плохо», а категория не бывает плохой). Оливковый и коричневый стоят на их местах. Светлота внутри ряда одна на все шесть: доля, покрашенная светлее соседних, кажется меньше при равном проценте — то есть рисунок начинает врать про число, которое сам же показывает. */ --ch-1: #3d6ea8; /* пыльно-синий */ --ch-2: #2f8f86; /* бирюзовый */ --ch-3: #7d5aa6; /* фиолетовый */ --ch-4: #a85476; /* винно-розовый */ --ch-5: #6d8a3a; /* оливковый */ --ch-6: #96603f; /* коричневый */ /* «Остальные» и всё, чему цвета не досталось: нейтральный, а не седьмой цвет ряда — сумма непохожих категорий не имеет собственного цвета. */ --ch-rest: rgba(23,22,26,.28); /* Дорожка кольца под дугами: она видна там, где долей нет вовсе. */ --ch-rail: rgba(23,22,26,.06); } [data-t="dark"] { --bg: #121114; --surface: #1b1a1f; --surface-sunk: #232228; --glass: rgba(30,29,35,.72); --scrim: rgba(0,0,0,.5); --ink: #f2f1ee; --ink-2: rgba(242,241,238,.55); --ink-3: rgba(242,241,238,.38); --line: rgba(255,255,255,.09); --line-strong: rgba(255,255,255,.16); --accent: #8e93ff; --accent-soft: rgba(142,147,255,.12); --on-accent: #16151a; /* Тёмная тема: те же тона светлее, иначе они тонут в фоне. */ --good: #4fcf98; --warn: #e3a468; --high: #f0a95c; --danger: #f2857c; /* Ряд долей — те же шесть оттенков, поднятые по светлоте: на фоне #1b1a1f светлые версии читаются, а дневные садятся в фон и кольцо превращается в тёмное пятно. Порядок и смысл те же, поэтому строка списка и её дуга остаются связаны в обеих темах. */ --ch-1: #82aede; --ch-2: #63c7bb; --ch-3: #b195dd; --ch-4: #dd8ba8; --ch-5: #a6c46a; --ch-6: #cf9a72; --ch-rest: rgba(242,241,238,.30); --ch-rail: rgba(255,255,255,.07); }