/* СГЕНЕРИРОВАНО — НЕ ПРАВИТЬ Источник: репозиторий TN_Services_Design, tokens/ Версия визуального языка: 0.87 Хеш содержимого: 6191d271e126 Правки вносятся в источнике и раздаются: python3 tools/emit_tokens.py emit Правка этого файла будет затёрта, а до тех пор уронит CI (шаг `emit_tokens.py check`). */ /* --- tokens/tokens.css --- */ /* ==================================================================== TN Services — токены визуального языка Версия 0.87 · 20.08.2026 ЕДИНСТВЕННЫЙ ИСТОЧНИК ЗНАЧЕНИЙ. Правила применения — DESIGN.md. Значение, которого нет здесь, в продукте появляться не должно: хардкод цвета или отступа ломает тёмную тему и режим повышенного контраста, и ломает молча. Правило добавления цвета: цвет без определения в одну строку в язык не добавляется. Если определение не формулируется — нужен не цвет, а другой способ передать смысл. ==================================================================== */ :root { /* --- ИНТЕРВАЛЫ ----------------------------------------------------- Атом 4, основной шаг 8. Промежуточных значений нет намеренно: свобода в отступах — главный источник ощущения случайности. */ --s1: 4px; /* внутри ячейки, между значением и подписью */ --s2: 8px; /* между связанными элементами */ --s3: 12px; /* внутренний отступ плотной строки */ --s4: 16px; /* внутренний отступ блока */ --s5: 20px; /* поле секции */ --s6: 24px; /* отступ вложенности */ --s8: 32px; /* между смысловыми группами */ /* --- РАДИУСЫ ------------------------------------------------------- Скругление означает «управляемый элемент». Данные не скругляются. */ --r-sm: 4px; /* контролы, чипы, метки */ --r-md: 6px; /* кнопки, сегментированный контрол */ --r-lg: 8px; /* контейнер, если он вообще нужен */ /* --- КЕГЛИ --------------------------------------------------------- Роль, а не размер. Обращаться по роли: «подпись колонки», а не «одиннадцатый». */ --f-micro: 11px; /* подписи колонок, сноски под значением */ --f-small: 12px; /* второстепенный текст, обвязка */ --f-body: 13px; /* данные в таблицах и списках */ --f-ui: 14px; /* контролы, основной текст интерфейса */ --f-lead: 20px; /* вторичное крупное значение */ --f-display: 30px; /* главный итог экрана */ --lh-tight: 1.15; /* крупные значения */ --lh-base: 1.4; /* интерфейс */ --lh-text: 1.55; /* абзацы объяснений */ /* --- ШРИФТ --------------------------------------------------------- Только системный стек. Внешние шрифты невозможны: политика безопасности FinanceWatcher — default-src 'none' без font-src. Совпадает с тем, что будет в SwiftUI, и это удача, а не потеря. */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* --- НЕЙТРАЛЬНАЯ ШКАЛА --------------------------------------------- Основа интерфейса. Всё, что не является состоянием данных, берётся отсюда. */ --n0: #ffffff; /* рабочая поверхность */ --n1: #fafaf9; /* подложка: шапка таблицы, боковая колонка */ --n2: #f2f2f0; /* фон приложения, заголовок группы */ --n3: #e7e7e4; /* линия-разделитель */ --n4: #d4d4d0; /* граница контрола, сильная линия */ --n6: #6c6c68; /* текст третьего уровня: подписи, единицы */ --n7: #5c5c58; /* текст второго уровня: пояснения */ --n9: #1b1b1a; /* основной текст и значения */ /* --- АКЦЕНТ -------------------------------------------------------- Ровно один. Означает «здесь ты сейчас» или «это изменено». Данные акцентом не красятся никогда. */ --accent: #2f5bd0; --accent-soft: #e9eefb; /* --- БРЕНД --------------------------------------------------------- ЦВЕТ ТОЖДЕСТВА, А НЕ СМЫСЛА (D-079, D-085). Отвечает на вопрос «чьё это», а не «что это значит». Продукт вправе переопределить обе величины; язык задаёт их равными акценту, чтобы продукт без бренда был верен без единой строки. --brand — ТОЛЬКО поверхность: background, border, fill. Как `color:` запрещён. --brand-ink — ТОЛЬКО текст, и только на фоне --brand. Пара обязана давать 4.5 между собой: tools/brand_check.py. Одним токеном это не решается — брендовый цвет и цвет, которым можно набирать текст, разные величины. STRU_magic показал числами: их жёлтый даёт 1.05 на белом и 13.09 на тёмном. */ --brand: var(--accent); --brand-ink: var(--n0); /* НАБОР, А НЕ ПАРА (D-149). Продукт отвечает «чьё это» больше чем в одном месте, и роли у этих мест разные. Заявка-19 STRU_magic просила второй брендовый цвет и осталась без ответа; заявка-31 назвала форму верно — нужен набор с ролями. Роль каждого формулируется в одну строку, иначе цвета не будет (принцип 3). Ограничение D-085 остаётся целиком: ни один брендовый токен не кодирует состояние данных, отклонение и положение. --brand-action — поверхность ГЛАВНОГО ДЕЙСТВИЯ: «нажми здесь». Не «здесь ты сейчас» — это --accent, и он не бренд. --brand-mark — поверхность ПОМЕТКИ: чем продукт помечает выбранное. Положение обязано кодироваться ещё чем-то, кроме цвета (§2а), и это ограничение здесь не ослаблено. ЗНАЧЕНИЕ ПО УМОЛЧАНИЮ — ТО, ЧЕМ ЯЗЫК КРАСИТ ЭТО МЕСТО СЕЙЧАС, а не `--brand` (D-160). Роль обязана читаться компонентом языка, иначе правило пишет каждый продукт сам — и это своя копия компонента, ровно то, от чего роль должна была избавить (находка STRU_magic 32). Но подставить туда `--brand` значило бы перекрасить главную кнопку у всех, кто бренда не заводил. Поэтому умолчание равно нынешнему цвету места, и продукт без бренда не замечает появления роли вовсе. */ --brand-action: var(--n9); --brand-action-ink: var(--n0); --brand-mark: var(--accent-soft); --brand-mark-ink: var(--accent); /* --- СОСТОЯНИЯ ДАННЫХ ---------------------------------------------- Четыре, больше нет. Каждое — про доверие к числу, а не про хорошо/плохо. Определения печатаются на экране рядом с данными. */ /* значение подтверждено сверкой на выбранную дату */ --st-ok: #2c7549; --st-ok-soft: #ecf4ef; /* значение подтверждено, но давно. ПОРОГ ЗАДАЁТ ПРОДУКТ и называет его на экране: у сверки остатка и у биржевой цены он разный (D-023) */ --st-old: #8f6410; --st-old-soft: #fcf7ed; /* данных нет; значение не показывается и нулём не считается */ --st-none: #6c6c68; --st-none-soft: #f7f7f5; /* значение есть, но применить нельзя: нет курса, нет цены */ --st-unusable: #a52a24; --st-unusable-soft: #fbecea; /* НАВЕДЕНИЕ НА ПОДЛОЖКЕ — ШАГ, А НЕ ОТДЕЛЬНЫЙ СМЫСЛ (D-150). Подложка на шаг ближе к своим чернилам. Мера шага — ΔL* ≈ 2, и это НЕ ослабление порога 3.0 из theme_check: тот отвечает на вопрос «различимы ли две категории РЯДОМ», а наведение различается ВО ВРЕМЕНИ, на одном и том же элементе. Глаз ловит временную разницу заметно меньшую, чем пространственную. Чернила на подложке наведения обязаны остаться выше 4.5. Ради этого --st-old-soft и --st-none-soft стали светлее: они стояли впритык к порогу, и шага под ними не помещалось. Подложке, по которой водят мышью, нужен запас. */ --st-ok-soft-hover: #e4efe8; --st-old-soft-hover: #f8f1e4; --st-none-soft-hover: #f1f1ef; --st-unusable-soft-hover: #f8e5e3; --accent-soft-hover: #e2e8f9; /* --- ПРИМЕЧАНИЕ ЧИТАТЕЛЮ ------------------------------------------- Определение в одну строку: пояснение, обращённое к читателю, которое НЕ является состоянием данных и не требует действия. Отдельный цвет нужен именно потому, что состояние данных и примечание — разные вещи, и красить второе первым значило бы дать одному цвету два смысла (§10). Заявка-31 STRU_magic сформулировала это точнее, чем было записано у нас. Фиолетовый, а не синий: синий занят акцентом, и «примечание» не должно читаться как «здесь ты сейчас». */ --info: #5b3f9c; --info-soft: #f0ecf9; --info-soft-hover: #eae5f5; /* --- ДОСТОВЕРНОСТЬ НА ГРАФИКАХ ------------------------------------- Кодируется НЕ цветом, а заливкой и штрихом (IBCS / ISO 24896): сплошное — факт, штриховка — оценка, пунктир — план. Цвет остаётся свободным для смысла величины. */ /* --- ЗНАКИ ------------------------------------------------------- Один вес штриха на весь набор: разнобой в толщине читается как разное качество рисунка, а не как разные знаки (OPEN §5). */ --ico-stroke: 1.5; /* Для знаков из двух и более штрихов: оптическая компенсация массы, а не производная от --ico-stroke (D-195). */ --ico-stroke-dense: 1.25; /* --- ЗАЛИВКА ВЕЛИЧИНЫ БЕЗ ОТКЛОНЕНИЯ ------------------------------- Полоса таймлайна красилась `--n4` — тоном ГРАНИЦЫ КОНТРОЛА, и давала 1.49 на строке. Полоса и есть диаграмма: её положение и длина — данные, а §9 требует 3.0 для значимой графики. Одно значение делало две разные работы: волосяную линию, которая обязана быть тихой, и заливку, которая обязана быть видимой. Развести пришлось потому, что затемнить `--n4` значило бы утяжелить рамку у каждого контрола (D-184). Цвет остаётся НЕЙТРАЛЬНЫМ: по D-043 заливка полосы кодирует отклонение, и оттенок закреплён за ним. Это заливка величины, у которой отклонения нет. */ --fill-plain: #8c8c88; /* Заливка ОБЪЕДИНЕНИЯ, а не работы: раздел собирает задачи, сам работой не являясь. Темнее заливки задачи на 3.23 — различимы между собой, а не только каждая с фоном (D-193). */ --fill-group: #3d3d3a; --dash-estimate: 3 2; /* stroke-dasharray для оценки */ --dash-plan: 1 3; /* stroke-dasharray для плана */ /* --- ПАЛИТРА ДАННЫХ ------------------------------------------------ Для разрезов, категорий и компонент прироста. Не состояния: эти цвета ничего не означают сами по себе, только различают. Зелёный и красный сюда НЕ входят — они заняты отклонениями. */ --d1: #2f5bd0; --d2: #0f7a86; --d3: #7a4fbf; --d4: #b06a1f; --d5: #3f7a3f; --d6: #96336b; /* --- ТЕНИ ---------------------------------------------------------- Тень означает ОДНО: элемент всплыл над плоскостью. Модал, поповер, перетаскиваемая карточка. Секции содержимого теней не имеют — они разделяются линиями (D-003), иначе экран снова распадается на острова. */ /* --- ПОВЕРХНОСТЬ ВСПЛЫВШЕГО --------------------------------------- §6 говорит: тень означает ровно одно — элемент всплыл над плоскостью. В СВЕТЛОЙ теме это делает тень: белая поверхность на сером фоне страницы уже отделена, тень лишь подтверждает. В ТЁМНОЙ теме тень не работает и работать не может: она темнее фона, а фон уже тёмный. Календарь поверх модала давал контраст 1.0 — поверхность всплывшего равнялась поверхности того, над чем она всплыла (замер STRU_magic, отчёт-39). Поэтому глубина в тёмной теме кодируется ПОВЕРХНОСТЬЮ, а не тенью, и это не обходной приём: так устроены все тёмные интерфейсы, потому что затемнять темнее нечего. Величина одна и переключается темой — второго правила заводить не нужно (D-179). */ --surface-raised: var(--n0); /* ТРЕТИЙ УРОВЕНЬ: всплывшее НАД ВСПЛЫВШИМ — календарь внутри модала. Имя по роли, а не по номеру: `-2` пригласил бы четвёртый, и останавливаться было бы негде (довод STRU_magic, отчёт-40). Четвёртого нет по той же причине, по какой нет четвёртого приоритета кнопки: всплывающее внутри всплывающего внутри модала — ошибка планировки, а не глубина (D-182). В СВЕТЛОЙ теме равен предыдущему намеренно: над белым светлее нечего, и там работу делает тень — она на белом видна. Глубина кодируется поверхностью только там, где тень бессильна. */ --surface-over: var(--surface-raised); --sh-raised: 0 1px 2px rgba(16,16,22,.06); /* поднято на волос: карточка под курсором */ --sh-popover: 0 4px 12px rgba(16,16,22,.12); /* всплывающее: меню, подсказка */ --sh-modal: 0 8px 30px rgba(16,16,22,.22); /* поверх всего: модал */ /* --- ДВИЖЕНИЕ ------------------------------------------------------ Три длительности, больше не нужно. Движение подтверждает действие пользователя, а не развлекает: всё, что дольше --dur-slow, воспринимается как тормоза. */ --dur-fast: 120ms; /* отклик контрола: нажатие, галочка */ --dur-base: 160ms; /* появление и скрытие */ --dur-slow: 220ms; /* въезд крупной поверхности: модал, панель */ --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); /* --- СЛОИ ---------------------------------------------------------- Числа z-index берутся только отсюда. Стихийные «z-index: 9999» разъезжаются между экранами и потом не чинятся. */ --z-sticky: 2; /* залипшая шапка или колонка таблицы */ --z-header: 10; /* шапка страницы поверх содержимого */ --z-popover: 30; /* меню, подсказка */ --z-modal: 50; /* подложка и окно */ /* --- ЛИНИИ В SVG --------------------------------------------------- На диаграмме половина решений оказывается на элементах, у которых нет background и border, а есть fill и stroke. Цвет берётся из тех же токенов; толщина — отсюда. Волосяная линия в SVG не равна 1 px в CSS: при дробном devicePixelRatio она размывается, поэтому для сетки задан свой токен, а не «единица». */ --line-w: 1px; /* сетка, разделители на диаграмме */ --line-w-strong: 2px; /* связь между задачами, ось, граница периода */ /* ТОРЦЫ СВЯЗИ. Размеры — величины языка: они одинаковы всегда и читаются как знак. Сама геометрия (координаты уса) считается продуктом из данных, поэтому здесь только длины и угол (D-128). Ус короче полосы задачи по построению: 7 px против 20 px минимальной полосы — наконечник не должен спорить с тем, на что указывает. */ /* --- СВЯЗЬ ----------------------------------------------------------- СВОЙ ТОКЕН ВЕСА (D-190). Связь рисовалась `--line-w-strong`, а он объявлен для трёх употреблений: связь, ось, граница периода. Заказчик просил тоньше связь — правка токена изменила бы оси и границы заодно. Возражение TN Gantt, и оно верное. Единица, а не двойка: связь тоньше знака раздела, а не толще. Раздел — структура, связь — отношение между двумя задачами, и структура не может быть легче отношения. ПРИГЛУШЕНИЕ ИМЕЕТ ПОЛ. При плотности сверх 300 связей слой приглушается, и приглушённая единица толщины пропадает — второе возражение TN Gantt, тоже верное. Порог посчитан: 0.7 держит 3.0 к фону в обеих темах, 0.65 уже нет. Ниже опускать нельзя. */ /* --- ЗНАК РАЗДЕЛА --------------------------------------------------- ПОЛОСА, А НЕ СКОБКА (D-193, отменяет D-192). Раздел показывается литой полосой ВПОЛОВИНУ задачи, с торцами вниз на обоих концах. Так это устроено в MS Project, и заказчик TN Gantt, двадцать лет смотревший на него, назвал скобку непохожей на ожидаемое. ЧЕМ БЫЛ НЕВЕРЕН МОЙ ОТКАЗ. Я оставил скобку бестелесной, сославшись на D-046: «у полосы есть тело, которое читается как объём». Довод доказывает слишком много — у полосы ЗАДАЧИ тело тоже есть, и её длина тоже не равна трудоёмкости. Опасность была не в теле, а в НЕОТЛИЧИМОСТИ раздела от задачи, и снимается она тремя различиями сразу: толщина вдвое меньше, заливка своя, торцы, которых у задачи нет. ТОНКАЯ ЛИНИЯ ОСТАЁТСЯ ЗА СВЯЗЬЮ. Волосяной знак на полотне ровно один — связь; раздел им быть перестал. */ --tl-bracket-h: 5px; /* треть полосы задачи: вполовину оказалось массивно на глаз */ --tl-bracket-cap: 7px; /* ширина торца: 5px не читались рядом с плашкой имени — замер, не прикидка */ --tl-bracket-drop: 5px; /* насколько торец свисает ниже полосы */ --link-w: 1px; --link-dim: .7; /* пол приглушения: держит 3.0 к фону */ --link-head: 5px; /* сторона литого наконечника */ --link-head-deg: 30; /* половина раствора, градусы — число, не угол: продукт считает координаты, а не поворачивает */ --link-blind: 7px; /* высота глухого торца: «вам не покажут» */ --line-w-bar: 3px; /* полоса-метка, подчёркивание выбранного */ /* --- ТАЧ-ТАРГЕТ ---------------------------------------------------- Минимальная высота элемента, по которому попадают пальцем. Значение из Apple HIG; в вебе действует то же, планшет никто не отменял. */ --tap-min: 44px; /* --- КОМПАКТНЫЙ ЭЛЕМЕНТ УПРАВЛЕНИЯ --------------------------------- Язык объявил подстроку в 24px (`--tl-row-sub`) и не дал ни одного элемента, который в неё влезает: любое поле при кегле 12 и отступах 3 даёт 26 (замер TN Gantt, D-203). Строка, в которую нечего положить, — не строка. На крупном указателе действует `--tap-min`, и компактный размер на него не распространяется. */ --ctl-h-sm: 22px; /* Переключатель правого угла просроченной части (D-205). Объявлен здесь, а не только на самом знаке: `var()`, который разрешается лишь в одном правиле, для проверки языка неотличим от опечатки, а для продукта — от собственного имени. */ --late-end: 0; /* --- ТОЧКИ ПЕРЕЛОМА ------------------------------------------------ ЕДИНСТВЕННОЕ, что нельзя вынести в переменные: CSS-переменные в media-запросах не работают. Значения дублируются в каждом файле руками, поэтому записаны здесь — чтобы было где искать. 1180px — реестр перестаёт помещаться рядом с аналитикой и уходит вниз ЦЕЛИКОМ (сжимать до 300 px нельзя) 860px — боковая навигация убирается */ /* --- РАЗМЕРЫ КАРКАСА ----------------------------------------------- */ /* Зазор между модалом и краем окна по вертикали. ОДНА величина на два места: поле подложки и вычет из высоты модала. Записанные порознь, они разошлись бы при первой правке — а разошедшись, дали бы полосу, в которой содержимое видно ВЫШЕ шапки (D-134). */ --modal-inset: 6vh; --side-w: 208px; /* боковая навигация */ /* Выехавшая панель ШИРЕ прижатой: на узком экране рядом с ней нет содержимого, ради которого её ужимали, а пункт навигации получает тач-габарит и полное имя раздела без переноса. */ --side-w-open: 264px; --reg-w: 452px; /* колонка реестра: минимум, на котором двухстрочная ячейка ещё читается, и он же ширина iPhone-макета */ --row-h: 32px; /* строка плотной таблицы */ --form-w: 340px; /* отдельно стоящая форма: вход, узкий диалог. Мера строки (--measure) для неё втрое широка */ --measure: 760px; /* мера строки объяснений: длиннее не читается */ /* --- ТАЙМЛАЙН (0.10) ------------------------------------------------- Высота строки — единственное место, откуда её берут ОБЕ панели. Значение в одном месте потому, что два списка одних и тех же чисел расходятся всегда, а здесь расхождение делает диаграмму ложной. */ --tl-row: 28px; /* строка задачи: плотность реестра (D-004) */ --tl-row-sub: 24px; /* подстрока назначения — мельче, но не вдвое */ /* ШИРИНОЙ ТАБЛИЦЫ УПРАВЛЯЮТ ДВА МЕХАНИЗМА: захват границы и свёртка. Захват писал прямо в `--tl-table-w` инлайновым стилем, а свёртка — классом; инлайновый стиль сильнее класса ВСЕГДА, и свёрнутая таблица оставляла на экране пустое место шириной с последнее перетаскивание. Величина, которой управляют два механизма, обязана иметь ОДИН выход: захват пишет в `--tl-table-set`, свёртка перебивает результат (D-114). ПРОИЗВОДНАЯ ВЕЛИЧИНА ВЫЧИСЛЯЕТСЯ ТАМ, ГДЕ ОБЪЯВЛЕНА. Пока `--tl-table-w: var(--tl-table-set)` стояло здесь, в `:root`, оно подставлялось из корневого значения и наследовалось вниз ГОТОВЫМ числом: задать `--tl-table-set` на самом таймлайне было уже поздно, и захват границы переставал работать (D-115). Вывод перенесён на `.tl` — туда, где меняется источник. */ --tl-table-set: 520px; /* левая панель: галочка, название, даты, дни */ /* Умолчание на случай, если продукт не подключил каркас: вывод, который действительно работает, стоит на `.tl` во frame.css. */ --tl-table-w: var(--tl-table-set); --tl-bar-h: 14px; /* полоса: половина строки, поля сверху и снизу */ --tl-tick-w: 3px; /* засечка ниже порога — у неё НЕТ длины */ --tl-min-bar: 6px; /* порог смены знака: уже — засечка (D-046) */ /* Колонки левой панели. Имя резиновое, три величины — по содержимому. Заведено 0.10.4: шапка обещала «начало · конец · раб. дн.», а строка была одним текстовым блоком. Обещание разметкой не выполнялось. */ /* ШИРИНА ПОЛОТНА. Значение назначает ПРОДУКТ — это геометрия (D-028). Но то, что полотно имеет СОБСТВЕННУЮ ширину, а не ширину колонки, и что проценты считаются от неё, — планировка, и без этого липкая таблица и горизонтальная прокрутка были механизмом без предмета: переполнения не возникало никогда (D-058). 100% сохраняет поведение «всё влезает». Масштаб «день» на годовом проекте — это ~3000px, и он же включает прокрутку. */ /* ШИРИНА ДОРОЖКИ. Переименован из `--tl-canvas-w` в 0.25: полотна как элемента больше нет, а имя называло его. Ноль означает «дорожка по остатку окна», то есть горизонтали нет. */ --tl-track-w: 0px; /* --- КАЛЕНДАРНАЯ ПОДЛОЖКА ------------------------------------------- ДЕЛЕНИЕ ВРЕМЕНИ — ЛИНИЯ, НЕРАБОЧЕЕ ВРЕМЯ — ЗАЛИВКА. Линия делит, заливка кодирует; смешивать нельзя, иначе на полотне окажется четыре уровня серого позади полос, и полосы перестанут читаться (D-092). ЦВЕТ ЗДЕСЬ НЕ ТРАТИТСЯ. Оттенок закреплён за отклонением (D-010), а подложка календаря — это не состояние данных. Выходной и праздник различаются ГЛУБИНОЙ ТОНА одной шкалы, а не оттенком. Шаг сетки и ширину полосы зебры даёт продукт: это геометрия, а не язык. Ноль означает «не показывать». СЕТКА ДВУХСТУПЕНЧАТАЯ: мелкий шаг — единица (день на квартале), крупный — та единица, которую можно подписать (неделя). Подпись стоит ровно на крупной линии, иначе она называет не то деление, под которым стоит (D-093). ТОН КАЛЕНДАРЯ ХОЛОДНЫЙ, НО ЭТО ТОН, А НЕ ЦВЕТ: насыщенность держится ниже C* = 4 в Lab. Выше начинается цвет, а цвет закреплён за отклонением (D-010). Проверяется tools/theme_check.py. НОЛЬ НЕ ВЫКЛЮЧАЕТ СЛОЙ, А ЗАЛИВАЕТ ЕГО ЦЕЛИКОМ. Повторяющийся градиент с нулевым периодом не «ничего»: браузер разливает первый цвет по всей ширине. Именно так полотно квартала стало сплошь серым при `--tl-band: 0px`. Выключается слой ЦВЕТОМ, а не длиной: `transparent` — единственное значение, которое означает «нет» при любом периоде (D-100). */ --tl-step: 100%; /* мелкий шаг сетки: единица масштаба */ --tl-major: 100%; /* крупный шаг: то, что подписывается */ --tl-band: 100%; /* ширина полосы зебры: обычно неделя */ --tl-week: 100%; /* период недели в доле дорожки */ --tl-off-at: 100%; /* сдвиг до первого выходного внутри недели */ --tl-off-w: 0%; /* длина выходных: обычно две доли из семи */ --tl-grid-c: #f2f2f0; /* мелкая линия */ --tl-grid-major-c: #e7e7e4; /* крупная линия — та, что подписана */ --tl-zebra-c: transparent; /* чередование недель: включает ГОДОВОЙ масштаб */ --tl-off-c: #eff2f5; /* выходной: L* 95.3, C* 1.9 */ --tl-holiday-c: #e7e7ee; /* праздник: C* 3.6, ΔL* 3.5 к выходному */ /* ВЫСОТА ШАПКИ — ОДНА НА ОБЕ ПАНЕЛИ, как и высота строки. Шапка двухъярусная: крупная единица сверху, мелкая снизу. Пока высота выводилась из содержимого, панели давали разное число рядов — таблица один, полотно два, — и всё полотно съезжало вниз на строку. Ровно тот же класс, что `--tl-row`: величина, обязанная совпадать, вычислялась каждой панелью отдельно (D-059). */ /* ШАПКА — НАБОР ЯРУСОВ, И ЧИСЛО ИХ СЛЕДУЕТ ИЗ МАСШТАБА, а не задано раз навсегда. На квартале читается день: месяц · неделя · число · день недели. На годе день не читается вовсе: месяц · неделя · период дат. Ярус, который нечем заполнить, не показывается — иначе шапка занимает высоту ради пустоты (D-095). `--tl-head-h` стал НИЖНЕЙ границей, а не высотой: высота теперь считается из числа ярусов. Раньше это была величина, обязанная совпадать у двух панелей; панелей нет. */ --tl-head-h: 40px; --tl-tier-h: 16px; /* высота одного яруса шкалы */ /* ПОДПИСЬ НЕ ЗАНИМАЕТ БОЛЬШЕ ПОЛОВИНЫ СВОЕГО ДЕЛЕНИЯ. Двузначное число кеглем --f-micro — около 14 px, значит деление, у которого подписано каждое, обязано быть не уже 28 px. БЫЛО 44 px — «двузначное число С ЗАПАСОМ НА ГЛАЗ». Запас взялся из референса, где кегль крупнее, и обоснования не имел: правило давало 28, остальные 16 были вкусом, выданным за правило (D-106). Ниже порога подписывается каждое N-е деление, и формула считается ПРОТИВ ПОЛОВИНЫ, потому что ограничивает половина: N = ceil(2 × ширина подписи / шаг деления) ФОРМУЛА БЫЛА НЕВЕРНА ДО 0.57: там стояло `ceil(подпись / деление)`, то есть она давала «подписывать каждое» ровно тогда, когда подпись уже не помещается — при подписи шире половины, но ýже деления. Правило и формула противоречили друг другу, и правило было верным (TN Gantt, замер 19.08 → D-133). ШИРИНУ ПОДПИСИ НАДО МЕРИТЬ, А НЕ ПРЕДПОЛАГАТЬ. Формула верна при любом шрифте, но с подставленным числом «как у нас» она ошибается у того, у кого шрифт шире, — и ошибается тихо и только у части читателей. ПЕРЕИМЕНОВАН ДВАЖДЫ. `--tl-label-min` говорил о подписи, а величина была про деление (D-129). `--tl-div-min` говорил о делении шкалы, а величина — про ШАГ ПОДПИСЕЙ: подписывают не каждое деление, и ограничивает подпись расстояние до соседней подписи, а не длительность названного интервала. Первое переименование починило половину лжи (D-133). */ --tl-label-step-min: 28px; /* УСТАРЕЛИ, снять в 1.0. Оставлены значением нового имени, чтобы продукт со старым получал прежнее число, а не пустоту. */ --tl-div-min: var(--tl-label-step-min); --tl-label-min: var(--tl-label-step-min); /* ПОРЯДОК ЗДЕСЬ ОБЯЗАН СОВПАДАТЬ С ПОРЯДКОМ В РАЗМЕТКЕ. В 0.11 резиновая колонка стояла первой, а первым в разметке идёт треугольник свёртки: имя попадало в 20 px и схлопывалось в одну букву, треугольник — в резину. Ошибка бесшумная: сетка разложила всё честно, просто не то не туда (D-064). */ /* КАЖДАЯ КОЛОНКА — СВОЙ ТОКЕН, а состав собирается из них. Иначе ширину одной колонки нельзя изменить, не переписав строку целиком, то есть не тронув остальные пять. ИМЯ ОСТАЁТСЯ РЕЗИНОВЫМ, и это не упущение: резиновая колонка в таблице ровно одна, иначе остаток делится между несколькими и ни одна не имеет своей ширины. Ширина имени меняется двумя способами, и оба сводятся к одному числу — остатку: раздвинуть панель или отнять у числовых колонок (D-090). У ИМЕНИ ЕСТЬ ПОЛ. `minmax(0, 1fr)` позволял ему схлопнуться в ноль: на узкой панели числовые колонки забирали всё, потому что их ширины заданы жёстко, а у имени нижней границы не было. */ --tl-c-fold: 24px; --tl-name-min: 90px; --tl-c-date: 60px; --tl-c-days: 44px; --tl-prog-col: 104px; --tl-cols: var(--tl-c-fold) minmax(var(--tl-name-min), 1fr) var(--tl-c-date) var(--tl-c-date) var(--tl-c-days) var(--tl-prog-col); --tl-prog-w: 56px; /* полоса прогресса: общая база для сравнения */ /* ОТСТУП НА ОДИН УРОВЕНЬ. Задача — один, назначение — два. Уровней в архетипе три, и множитель пишется в правиле, чтобы число жило в одном месте (D-088). */ --tl-indent: 14px; --tl-fold-mark: 14px; /* треугольник свёртки: знак, а не точка */ --tl-fold-btn: 20px; /* сторона кнопки управления в шапке полотна. Стояла числом внутри `.tl-tiers`, и продукт снял её глазами — вторая копия чужой величины (замер TN Gantt, D-202). */ /* ПОЛОСА УПРАВЛЕНИЯ между таблицей и дорожкой: липкая вместе с таблицей, шириной в один знак с полем. Знаки полотна живут в ней, а не внутри того, что они сворачивают (D-202). */ --tl-gutter: calc(var(--tl-fold-btn) + var(--s2)); /* ЭЛЕМЕНТ СТОПКИ В ЯЧЕЙКЕ. Соседние колонки-списки обязаны идти параллельно: третий проект напротив своей третьей суммы. Общая высота элемента — величина языка, потому что расходится она молча и выглядит при этом правдоподобно (D-089). */ --stack-item: 26px; --tl-grip-w: 5px; /* полоса захвата границы панелей */ /* отступ задачи под разделом */ } /* --- ТЁМНАЯ ТЕМА ------------------------------------------------------ Переопределяются только значения, ни одно правило не дублируется. ТЁМНАЯ ТЕМА ОБЯЗАНА ДАВАТЬ НЕ МЕНЬШЕ СВЕТЛОЙ на структурных парах, и мерится это ΔL*, а не отношением контраста (D-087). Отношение при низкой яркости сжимается: две тёмные краски, различимые так же, как две светлые, дают заметно меньшее число. Считать по нему — значит либо не увидеть провал, либо переправить то, что верно. `--n2` был #111113: ΔL* до `--n0` — 2.73 против 4.60 в светлой теме. Это разделитель строки (`border-bottom` у каждой строки таблицы и таймлайна), то есть главный структурирующий приём плотного реестра. Проверяется tools/theme_check.py. */ [data-theme="dark"] { --n0: #17171a; --n1: #1d1d21; --n2: #0c0c0e; --n3: #2a2a30; --n4: #3a3a42; --n6: #8c8c97; --n7: #a8a8b2; --n9: #ececef; --accent: #7d9dff; --accent-soft: #1d2540; --st-ok: #63c08c; --st-ok-soft: #16261d; --st-old: #d8ad5b; --st-old-soft: #272013; --st-none: #8c8c97; --st-none-soft: #1f1f24; --st-unusable: #ef8079; --st-unusable-soft: #2b1917; /* ТОНА КАЛЕНДАРЯ И ПОЛОТНА В ТЁМНОЙ ТЕМЕ (D-165). Их не было вовсе: ни один `--tl-*` не переопределялся, и в тёмной теме подложка выходного оставалась СВЕТЛОЙ — на ней светлый текст. Это касалось не только календаря 0.63, но и всего полотна с 0.25; не увидел никто, потому что полотно ни у кого ещё не выпущено, а витрина до 0.61 рендерилась в колонку навигации. Отношения сохранены: ΔL* выходного к празднику 3.38 при пороге 3.0, насыщенность обоих ниже предела 4.0. Проверяет theme_check. */ /* Глубина тёмной темы — поверхностью, а не тенью (D-179). ΔL* к --n0 равен 4.09 — столько же, сколько у --n0 к фону страницы: всплывшее отделено от своего основания ровно так же, как основание отделено от страницы. Тени переопределены тоже: на тёмном они не отделяют, но и мешать не должны. */ --surface-raised: #1f1f24; --surface-over: #272730; /* ΔL* 4.03 к предыдущему — тот же шаг */ --sh-raised: 0 1px 2px rgba(0,0,0,.40); --sh-popover: 0 4px 12px rgba(0,0,0,.55); --sh-modal: 0 8px 30px rgba(0,0,0,.65); --fill-plain: #666672; --fill-group: #c0c0c8; --tl-grid-c: #1e1e1e; --tl-grid-major-c: #262626; --tl-off-c: #202025; --tl-holiday-c: #27272c; --st-ok-soft-hover: #182b20; --st-old-soft-hover: #2c2415; --st-none-soft-hover: #242429; --st-unusable-soft-hover: #321d1a; --accent-soft-hover: #212a48; --info: #b09ce8; --info-soft: #221c33; --info-soft-hover: #272039; --d1: #7d9dff; --d2: #4fc0cc; --d3: #b18cf0; --d4: #e0a45e; --d5: #71bb71; --d6: #e07bb0; } /* --- tokens/components.css --- */ /* ==================================================================== TN Services — компоненты визуального языка Версия 0.87 · 20.08.2026 Правила применения токенов. Значений здесь нет — только var(). Любое число, кроме 0, 1px и 100%, — ошибка: его место в tokens.css. Подключать после tokens.css. ==================================================================== */ /* --- ОСНОВА --------------------------------------------------------- */ .tn, .tn * { box-sizing: border-box; } /* --- [hidden] ОБЯЗАН СКРЫВАТЬ ---------------------------------------- Браузерное правило `[hidden] { display: none }` — селектор по атрибуту, специфичность 0,1,0. Любой класс языка, задающий `display`, его перебивает: таких классов 49, включая `.app`, который оборачивает КАЖДЫЙ экран. Скрытый элемент продолжает рисоваться. Отказ при этом БЕСШУМНЫЙ. В продукте это выглядело так: владелец вводит пароль, вход проходит, поле очищается — и страница не меняется. Ни ошибки, ни отказа в консоли. Диагностировать пришлось по единственной зацепке «поле очистилось, а очищается оно только в then». Точечные `.work[hidden]`, `.panel[hidden]`, `.ms-pop[hidden]` были заплатками на три известных случая из сорока девяти — то есть приглашением наступить на сорок шестую. `!important` здесь оправдан и не является исключением из вкуса: `hidden` означает «элемент не относится к делу и не должен отображаться». Правило, которое это перебивает, — дефект по определению. Так же поступают все распространённые сбросы стилей. ПОЧЕМУ ЭТО НЕ ПОЙМАЛИ ПРОВЕРКИ. Прогон разметки БЕЗ стиля показывает идеально работающий `[hidden]`: ломает его именно CSS. Проверка вёрстки, не подключающая стиль, отвечает не на тот вопрос (D-027). */ .tn [hidden], .tn[hidden] { display: none !important; } .tn { font: var(--f-ui)/var(--lh-base) var(--font); color: var(--n9); background: var(--n0); -webkit-font-smoothing: antialiased; } /* Цифры табличные ВЕЗДЕ, где число можно сравнить с другим числом. Пропорциональные цифры делают колонку сумм нечитаемой. */ .tn .num, .tn .value, .tn input[inputmode="decimal"], .tn input[inputmode="numeric"] { font-variant-numeric: tabular-nums lining-nums; } /* ПОЛЕ ДАТЫ — СВОЁ, А НЕ `type="date"`. Нативное поле рисует формат по локали ЧИТАТЕЛЯ: `08/18/2026` при en-US у русского продукта, и управлять этим из разметки нельзя (§5а п.15, D-069). Ссылку на проект открывают несколько человек, скриншоты пересылают — `03.04` и `04.03` у двух читателей выглядят одинаково и означают разное. Цена ошибки — сорванный срок (TN Gantt, заявка о датах). Поведение календаря язык не раздаёт (D-137). Что он даёт — общий ВИД и общий договор о вводе: ширина по содержимому формата, табличные цифры, `inputmode` для цифровой клавиатуры на телефоне. Подсказка формата живёт в `placeholder`, но placeholder НЕ ЗАМЕНЯЕТ подпись: он исчезает при первом знаке, и поле остаётся без имени — ровно для того читателя, которому имя нужнее всех. Подпись — `.field > .label`, как у всех прочих полей. */ /* ШИРИНА В ЗНАКАХ — ПРО СОДЕРЖИМОЕ, А КОРОБКА СЧИТАЕТСЯ ПО ГРАНИЦЕ (D-189). `width: 10ch` при `box-sizing: border-box` — это десять знаков МИНУС поля и рамка: «18.08.2026» превращалось в «18.08.202». Год обрезался у поля, заведённого ради того, чтобы год был виден. Поля прибавлены явно. Величина остаётся в знаках: она про формат, а не про пиксели, и от кегля не отвяжется. */ .tn input.date { width: calc(10ch + var(--s2) * 2 + 2px); min-width: 0; text-align: right; font-variant-numeric: tabular-nums lining-nums; } .tn input.date--short { width: calc(5ch + var(--s2) * 2 + 2px); } /* ДД.ММ */ .tn input.time { width: calc(5ch + var(--s2) * 2 + 2px); text-align: right; font-variant-numeric: tabular-nums lining-nums; } /* --- ТИПОГРАФИКА ---------------------------------------------------- */ .tn .t-label { /* подпись колонки, заголовок секции */ font-size: var(--f-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--n6); font-weight: 600; } .tn .t-meta { font-size: var(--f-micro); color: var(--n6); } .tn .t-sub { font-size: var(--f-small); color: var(--n7); } .tn .t-body { font-size: var(--f-body); } .tn .t-explain { font-size: var(--f-small); color: var(--n7); line-height: var(--lh-text); max-width: var(--measure); } /* --- ЗНАЧЕНИЕ И ЕДИНИЦА --------------------------------------------- Величина и единица — разные вещи. Код валюты мельче и приглушён, иначе он спорит с числом за внимание. В таблицах — ISO-код, а не символ: «$» схлопывает USD, AUD и CAD в один знак. */ .tn .value { font-size: var(--f-display); font-weight: 600; letter-spacing: -.025em; line-height: var(--lh-tight); } .tn .value--lead { font-size: var(--f-lead); } .tn .value--body { font-size: var(--f-body); font-weight: 400; } .tn .unit { font-size: var(--f-ui); font-weight: 500; color: var(--n6); margin-left: 6px; letter-spacing: 0; } .tn .value--lead .unit { font-size: var(--f-small); } .tn .value--body .unit { font-size: 10px; margin-left: 4px; } /* Дельта всегда с базой сравнения: «+4,3 %» без «к чему» — мусор. */ .tn .delta { display: inline-flex; align-items: baseline; gap: var(--s2); font-size: var(--f-small); } .tn .delta .v { font-weight: 600; font-variant-numeric: tabular-nums; } .tn .delta .v--up { color: var(--st-ok); } .tn .delta .v--down { color: var(--st-unusable); } .tn .delta .base { color: var(--n6); } /* --- КОНТРОЛЫ -------------------------------------------------------- ГЕОМЕТРИЯ КНОПКИ ЖИВЁТ НА КЛАССЕ, А НЕ НА ТЕГЕ (D-121). До 0.51 отступы, рамка, радиус и минимальная высота стояли на `.tn button`, а вид — на `.btn-*`. Значит `` получал цвет и не получал ничего остального: буквы сидели вплотную к подложке. Ссылка, выглядящая кнопкой, — не вольность: там, где действие ЯВЛЯЕТСЯ ПЕРЕХОДОМ (внешний адрес, файл, вход через провайдера), подменить её на `