/* ============================================================================= ШРИФТ ИНТЕРФЕЙСА (v0.20.0.0) Two things live here and nothing else: 1. What each [data-font] id means, as an override of BOTH type tokens. 2. Which surfaces suppress fake bold. v0.20.0.1 (владелец: «человек меняет шрифт осознанно и хочет видеть это везде»): раньше подменялся только --chronos-font-display, то есть сорок заголовков, почти все внутри модалок. На видимой доске из 263 элементов шрифт менял РОВНО ОДИН - человек выбирал начертание, смотрел на доску и справедливо решал, что ничего не произошло. Теперь подменяются оба токена, и весь текст интерфейса едет следом. Моноширинный не трогаем: --chronos-font-mono держит счётчики и таймеры, где важна равная ширина цифр. The id on is written by the server (App.razor, resolved by Services/UiFontMiddleware.cs from the reader's /set-font cookie and, failing that, from the interface language). The catalog that decides both lives in Chronos.Application/Design/UiFontCatalog.cs and is pinned by UiFontCatalogTests; UiFontPickerTests pins this file against that catalog, so a face added there without a block here fails a test instead of silently rendering as Inter. WHY THE OVERRIDE IS NOT IN 00-tokens-base.css. That file's --chronos-font-display is the DEFAULT and has to stay Inter: DesignKnobCatalog carries a byte-for-byte copy of every :root declaration in it, and a drift test compares the two. The Russian face is not a new default, it is a condition on top of one, so it belongs in a conditional rule in its own file. WHY THE SELECTOR CARRIES NO :root. [data-font="x"] is specificity 0,1,0 - the same as :root - so the design overlay's own :root block, which ChronosHead renders after every stylesheet, still wins the source-order tie when an admin sets the heading font by hand from /design. That precedence is what the overlay's position in the head was built to give it. It also means the same rule works on any wrapper inside the page, which is how the /studio specimen shows six faces at once without a single extra declaration. ============================================================================= */ /* ---- What each id means ----------------------------------------------------- No block for "inter": it is the default the token already carries, so the default face costs zero bytes of override and zero risk of drifting from 00-tokens-base.css. --chronos-display-synth exists only in this file and only for the faces that ship ONE cut. Chronos asks headings for 600/700/800; a browser handed a single-weight family fakes the rest by smearing the outline, which on a rounded face like Marmelad reads as a printing fault rather than as bold. Setting font-synthesis-weight: none lets the face render at the weight it actually has. The flag is UiFont.SingleWeight in the catalog - keep the two in step. Гасится он ТОЛЬКО на крупных заголовках, а не на всём тексте, и это осознанный компромисс. На 24-30px подделка видна как размазанный контур. На 12-15px она почти незаметна, зато если выключить синтез везде, у одноначертательного Marmelad во всём продукте пропадёт жирный - вся иерархия акцентов схлопнется в один вес. Крупному тексту важнее чистота контура, мелкому - наличие акцента. */ [data-font="marmelad"] { --chronos-font-sans: 'Marmelad', 'Noto Color Emoji', system-ui, -apple-system, 'Segoe UI', sans-serif; --chronos-font-display: 'Marmelad', 'Noto Color Emoji', system-ui, -apple-system, 'Segoe UI', sans-serif; --chronos-display-synth: none; } [data-font="golos"] { --chronos-font-sans: 'Golos Text', 'Noto Color Emoji', system-ui, -apple-system, 'Segoe UI', sans-serif; --chronos-font-display: 'Golos Text', 'Noto Color Emoji', system-ui, -apple-system, 'Segoe UI', sans-serif; } [data-font="onest"] { --chronos-font-sans: 'Onest', 'Noto Color Emoji', system-ui, -apple-system, 'Segoe UI', sans-serif; --chronos-font-display: 'Onest', 'Noto Color Emoji', system-ui, -apple-system, 'Segoe UI', sans-serif; } [data-font="comfortaa"] { --chronos-font-sans: 'Comfortaa', 'Noto Color Emoji', system-ui, -apple-system, 'Segoe UI', sans-serif; --chronos-font-display: 'Comfortaa', 'Noto Color Emoji', system-ui, -apple-system, 'Segoe UI', sans-serif; } [data-font="unbounded"] { --chronos-font-sans: 'Unbounded', 'Noto Color Emoji', system-ui, -apple-system, 'Segoe UI', sans-serif; --chronos-font-display: 'Unbounded', 'Noto Color Emoji', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ---- Who reads it ----------------------------------------------------------- Chrome only: the titles the PRODUCT writes. User content is deliberately absent from this list - a task the reader typed is their sentence, not our chrome, and a display face is the wrong voice for it. That is why .task-title, .subtask-title, .main-task-title, .suggest-row-title, .drafts-entry-title, .almanac-entry-title and .ai-draft-title are not here. Before this file, --chronos-font-display had exactly one consumer in the whole cascade (.friends-title) and every other heading inherited --chronos-font-sans from `html, body`. The comment in 00-tokens-base.css that says "headings use --chronos-font-display" became true on this line. font-synthesis-weight is ignored by browsers older than Chrome 97 / Safari 16.4 / Firefox 111, which fall back to today's behaviour (a faked bold). Nothing breaks there; it is simply less pretty. */ .modal-head h2, .login-title, .store-title, .store-section-title, .store-unbundle-title, .profile-section-title, .profile-inventory-title, .theme-modal-title, .confirm-title, .milestone-title, .onboarding-title, .tour-title, .pit-page-title, .pit-wins-title, .pit-multi-recent-title, .pit-multi-results-title, .inventory-title, .last-drops-title, .fusion-station-title, .fusion-help-title, .friends-title, .pair-modal-title, .founders-offer-title, .upgrade-hero-title, .upgrade-hook-title, .upgrade-canceled-title, .settings-section-title, .close-account-title, .cancel-title, .cancel-code-title, .pay-title, .pay-manual-title, .wx-map-title, .voice-title, .circuit-title, .detail-title, .pet-card-title, .pet-coach-title, .pet-coach-title-static, .gz-title, .plan-title, .suggest-locked-title { font-family: var(--chronos-font-display); font-synthesis-weight: var(--chronos-display-synth, auto); }