/* 00-tokens.css — накладной токен-слой светлого языка TeamON One. Подключается ПОСЛЕ teamon-workspace-shell.css и app.css и перебивает их :root. Зачем этот файл существует. Боевой app.css собран по модели «полупрозрачный белый оверлей поверх тёмного»: --surface-soft, --line и --line-strong объявлены как rgba(255,255,255,…) в app.css:10–12, а --cosmos-base это #101014. На молочном фоне белый оверлей перестаёт существовать — поэтому светлая тема начинается не с перекраски компонентов, а с замены самого набора токенов на непрозрачные значения лендинга team-on.io. Один этот файл уже разворачивает фон, текст, линии и активные состояния. Второе назначение — завести токен-слой, которого в боевом UI нет вообще. В app.css нет ни одного токена радиуса, отступа, кегля и длительности: 244 объявления border-radius при 37 разных значениях, 339 объявлений font-size. Остальные накладные файлы должны опираться на шкалы отсюда, а не изобретать значения заново. Файл ничего не удаляет и ничего не переименовывает. Откат — снять на него. */ :root { /* ЦВЕТОВАЯ БАЗА ЛЕНДИНГА Имена и значения взяты один в один из apps/marketing-site/public/app.css:2–13 и editorial.css:2–10, чтобы капсула и публичный сайт ссылались на одни и те же величины. Ни одно из этих имён не встречается в боевом CSS/JS (проверено грепом) — коллизий нет. */ --milk: #f5f8ef; /* фон страницы */ --paper: #ffffff; /* бумага карточек и панелей */ --ink-soft: #4d5751; /* второй текстовый тон */ --green: #16d34f; /* ON Green — действие */ --green-dark: #0d6547; /* Emerald — структура и глубина, зелёный для текста */ --green-soft: #e9f8e7; /* мягкая зелёная плашка */ --lime: #d9ff55; --violet: #7657e8; /* системный акцент, по бренду короткий и не второй primary */ /* Радиусы и тень фирменных поверхностей — те же имена, что на лендинге, чтобы правило «56 / 36» читалось одинаково в обоих проектах. */ --card-radius: 56px; --inset-radius: 36px; --card-shadow: 0 18px 60px rgba(16, 23, 19, .06); /* ПЕРЕОПРЕДЕЛЕНИЕ ТОКЕНОВ app.css:1–19 В боевом :root объявлено 16 кастомных свойств (строки 3–18) плюс color-scheme. Ниже переопределены все 16 — ни одно имя не добавлено и не выброшено. */ color-scheme: light; /* было dark в app.css:2 — иначе браузер красит скроллбары, автозаполнение и системные контролы под тёмную тему */ --cosmos-base: var(--milk); /* app.css:3 #101014 → молоко. Используется в body (app.css:24) и как нижний слой .app-shell (app.css:151), поэтому одна эта строка переворачивает фон всего приложения */ --cosmos-line: var(--line); /* app.css:4 rgba(184,174,255,.11) — фиолетовая линия по тёмному. На светлом это грязь, поэтому та же линия, что везде */ --ink: #101713; /* app.css:5 #ececf1 → чернильный (31 использование) */ --muted: var(--ink-soft); /* app.css:6 #a2a2ad → #4d5751 (59 использований). Это лендинговый --ink-soft: второй тон должен оставаться уверенно читаемым, а не серым шумом */ --muted-2: #6f7973; /* app.css:7 #74747f → третий тон (48 использований). Лендинговый --muted #77817b даёт на белом ≈4.0:1, а в этом UI 117 объявлений font-size лежат в диапазоне 9–10px. Взят на шаг темнее — визуально то же, но проходит 4.5:1 */ --surface: var(--paper); /* app.css:8 rgba(31,31,35,.86) */ --surface-strong: var(--paper); /* app.css:9 #1b1b1f. В тёмной теме это была пара «полупрозрачная / непрозрачная поверхность». На светлом лестница высоты идёт молоко → бумага и упирается в белый, дальше глубину даёт тень, а не третья заливка. Оба токена в боевом CSS не используются ни разу */ --surface-soft: var(--green-soft); /* app.css:10 rgba(255,255,255,.05). 6 использований, и все это фон активной вкладки/пункта (app.css:308, 804, 1477). Белый оверлей на светлом невидим, поэтому активное состояние получает мягкую зелёную плашку бренда */ --line: #dfe5dc; /* app.css:11 rgba(255,255,255,.07) → сплошная линия лендинга. 68 использований. Значение намеренно тихое: в новом языке разделителей почти нет, и оставшиеся 124 рамки должны перестать читаться как сетка */ --line-strong: #cfd7cd; /* app.css:12 rgba(255,255,255,.12), 3 использования (hover рамок) */ /* Акцент. Осознанное !important — единственное в файле. app.js:7473 на старте безусловно вызывает setAccent(localStorage… || '#8b7cff'), а setAccent (app.js:7081–7088) пишет --accent и --accent-rgb инлайном в document.documentElement.style. Инлайновое объявление сильнее любого селектора, поэтому обычная строка в :root будет проиграна и фиолетовый акцент тёмной темы останется в 149 местах вида rgba(var(--accent-rgb), …). Важное объявление из таблицы стилей перебивает неважное инлайновое — это и есть тот случай, когда без !important задачу не решить, не трогая JS. Следствие, которое надо знать: три легаси-переключателя акцента в index.html:961–963 перестают перекрашивать интерфейс (сам обработчик, localStorage и частицы работают как раньше). Все три их значения — цвета тёмной темы и на молоке всё равно нерабочие. */ --accent: var(--green) !important; /* app.css:13 #8b7cff → ON Green */ --accent-rgb: 22, 211, 79 !important; /* app.css:14. 149 использований; из разобранных 130 объявлений 54 это фон, 51 рамка, 18 тень, 6 outline — то есть почти везде прозрачная подкраска, которая на светлом корректно читается как зелёный оттенок */ --success: var(--green-dark); /* app.css:15 #57d3a4 → Emerald: зелёный, который остаётся читаемым как текст на молоке */ --warning: #8f5a12; /* app.css:16 #f0ae6d. В бренде нет «чернильного» янтарного: Peach #f6e1d7 это поверхность, а не текст. Взят тот же тон (H≈30°), опущенный до контраста, пригодного на светлом */ --danger: #b3303f; /* app.css:17 #ff7a86 — та же логика: тот же тон, тёмная светлота, потому что розовый на молоке не читается */ --shadow: 0 24px 70px rgba(16, 23, 19, .10); /* app.css:18 0 30px 90px rgba(0,0,0,.42). 3 использования, все — всплывающие слои (поповер app.css:126, drawer app.css:1471). Чёрная тень такой плотности на молоке выглядит грязью; здесь чернильная и мягкая */ /* НЕДОСТАЮЩИЙ ТОКЕН --accent-bright используется в app.css:2463 (outline фокуса у summary), но нигде не объявлен — иначе outline-color молча падает в currentColor. Значение здесь больше не задаётся. Это имя объявляли ТРИ файла слоя, и на стенде выигрывал самый поздний — чернильный #101713 из кольца фокуса слоя доступности. Фиолетовое значение, задуманное по бренд-системе, не доезжало до экрана ни в одном состоянии, а комментарий утверждал обратное. Спор разрешён в 70-fixes.css, раздел 26.1: имя ссылается на --a11y-ring, то есть кольцо фокуса у summary становится таким же, как у всех остальных фокусируемых элементов, а не отдельным фиолетовым исключением. */ /* НОВЫЙ СЛОЙ: РАДИУСЫ В app.css нет ни одного токена радиуса при 244 объявлениях border-radius и 37 разных значениях. Шкала снята с лендинга (56 / 36), но сдвинута на ступень вниз: капсула — плотный рабочий интерфейс, и 56px на панели чата читались бы как макет лендинга, а не как рабочая поверхность. Верхняя ступень соответствует лендинговому --inset-radius. */ --r-lg: 32px; /* крупные поверхности: панели, модальные слои, drawer */ --r-md: 20px; /* карточки и блоки внутри панели */ --r-sm: 12px; /* кнопки, поля ввода, чипы, вкладки */ --r-pill: 999px; /* сегментные переключатели и статусные пилюли; заведён отдельно, чтобы 999px не изобретался заново в каждом накладном файле */ /* НОВЫЙ СЛОЙ: ШКАЛА КЕГЛЯ Базовый кегль в body — 15px/1.55 (app.css:25). Нижняя ступень шкалы — 11px: это пол пояснительного текста по бренд-системе. Токена мельче 11px здесь сознательно нет, чтобы 22 объявления по 8px и 117 объявлений в диапазоне 9–10px не получили легального имени и не воспроизводились дальше. */ --fs-xxs: 11px; /* пол: подписи и пояснения */ --fs-xs: 12px; /* функциональные подписи, навигация, значения */ --fs-sm: 13px; /* вторичный текст, объяснение результата */ --fs-base: 15px; /* базовый текст интерфейса */ --fs-md: 17px; --fs-lg: 20px; --fs-xl: 26px; --fs-2xl: 34px; /* верх шкалы: заголовок экрана. Плакатных кеглей лендинга здесь нет */ /* НОВЫЙ СЛОЙ: ТЕНЬ В app.css 85 объявлений box-shadow при 60 уникальных значениях. Здесь одна мягкая тень покоя (значение лендингового --card-shadow) — её достаточно, потому что на светлом высоту даёт не тень, а сама бумага на молоке. Второе значение — --shadow выше — оставлено только для всплывающих слоёв. */ /* Токен удалён: ноль обращений во всём web-public. Тень покоя берут прямо из --card-shadow, а имя-синоним только множило ступени поверхности. */ /* НОВЫЙ СЛОЙ: ШАГ ОТСТУПОВ Токенов отступа в боевом CSS нет вообще. Шаг 4px. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* НОВЫЙ СЛОЙ: ДЛИТЕЛЬНОСТИ --dur-base и --ease совпадают со значением, зашитым в teamon-workspace-shell.css:10, — чтобы у оболочки и содержимого была одна кривая. */ --dur-fast: .16s; --dur-base: .24s; --dur-slow: .42s; --ease: cubic-bezier(.2, .8, .2, 1); /* Отключает синтетическое начертание: на нативном стеке (SF Pro / Segoe UI Variable) подделанный bold на светлом фоне заметно грязнит текст. Строка повторяет корневое правило лендинга (marketing-site/public/app.css:18). */ font-synthesis: none; } /* ТОКЕНЫ ОБОЛОЧКИ TEAMON SPACE Каноничный файл объявляет их через :where(...) (teamon-workspace-shell.css:3, 13), то есть с нулевой специфичностью — обычного селектора без :where() достаточно, чтобы перебить, !important не нужен. Файл в шапке (строки 1–2) прямо разрешает продуктовым темам переопределять цветовые токены и объявляет геометрию общей для всех Space. Поэтому три геометрических токена (--teamon-space-rail-expanded, --teamon-space-rail-collapsed, --teamon-space-mobile-header) здесь НЕ трогаются: переопределить их значило бы завести второй источник правды для контракта оболочки, у которого есть свои .d.ts и manifest.json. Смена языка их и не требует. */ [data-teamon-workspace-shell] { --teamon-workspace-shell-bg: var(--milk); /* было #101014 */ --teamon-space-rail-bg: var(--paper); /* было rgba(12,12,17,.92): рельс становится бумажной плоскостью на молочной странице */ --teamon-space-line: var(--line); /* было rgba(184,174,255,.11) */ --teamon-space-motion: var(--dur-base) var(--ease); /* значение то же, что каноничное (.24s cubic-bezier(.2,.8,.2,1)) — просто теперь оно берётся из общей шкалы */ } [data-teamon-workspace-shell][data-teamon-shell-tone="family"] { --teamon-space-accent: var(--green); /* было #7369ee */ --teamon-space-accent-secondary: var(--violet); /* было #28b5a2 */ } /* Ступень радиусов на узком экране. Лендинг снижает 56/36 → 32/24 на max-width:760px (editorial.css:1251–1254); 760px — уже существующий брейкпоинт боевого CSS (app.css:2260, 2368, 3133), так что новая шкала ломается там же, где ломается вёрстка. */ @media (max-width: 760px) { :root { --card-radius: 32px; --inset-radius: 24px; --r-lg: 24px; --r-md: 16px; } } /* БАЗА СТРАНИЦЫ Ровно то, что должен задать токенный слой: молочный фон и чернильный текст. background у body формально уже становится молочным сам — app.css:24 читает var(--cosmos-base), — но фон задан здесь явно, чтобы слой был самодостаточен и переживал любую правку app.css. Используется background-color, а не сокращение background, чтобы не сбрасывать возможные слои у боевых правил. */ html { background-color: var(--milk); /* у html в app.css фона нет: без этой строки область overscroll и фон под .app-shell остаются системными */ } body { background-color: var(--milk); color: var(--ink); } /* ЧТО СОЗНАТЕЛЬНО НЕ ТРОНУТО В ЭТОМ ФАЙЛЕ 1. Геометрия оболочки — --teamon-space-rail-expanded / -collapsed / -mobile-header. Причина в комментарии к блоку выше: каноничный файл объявляет их общими для всех Space, и это контракт, а не тема. 2. body { overflow: hidden } (app.css:24) и .app-shell { height:100dvh; overflow:hidden } (app.css:146–147). Это модель прокрутки приложения, а не цвет. Правка здесь сломала бы раскладку, а зона файла — токены. 3. Кольцо фокуса app.css:32–34: box-shadow 0 0 0 3px rgba(var(--accent-rgb), .28). С зелёным акцентом на молоке это кольцо становится слишком тихим. Само правило — компонентное, ему место в следующем накладном файле; здесь для него уже готов цвет --accent-bright (фиолетовый). Глобальный outline:none в app.css:30 тоже оставлен как есть. 4. Декоративные тёмные слои: .boot-cosmos i (app.css:84–92), .login-orbit (114–122), .ambient-grid (157–162), виньетка .app-shell::after (163–168) и #particle-canvas (index.html:79, цвет частиц ставится из JS через state.scene.setAccent). Все они рассчитаны на чёрный фон и на молоке будут выглядеть грязью, но это отдельные слои разметки, а не токены. 5. Шрифтовой стек в app.css:25 и базовый кегль 15px/1.55: шкала --fs-* заведена, но ни одно из 339 объявлений font-size на неё пока не переведено — это работа типографического файла. 6. 22 backdrop-filter, 65 градиентов, 203 уникальных hex и 326 rgba-литералов, записанных мимо токенов. Через :root их не достать: их переписывают компонентные накладные файлы. 7. --surface и --surface-strong переопределены, но в боевом CSS не используются ни разу (0 обращений) — сделано только ради полноты набора, визуального эффекта нет. */