From f0dbc20f62c7b3b0c9f0150247fb3b14007f267d Mon Sep 17 00:00:00 2001 From: "Zimin A.N." Date: Mon, 11 May 2026 14:58:32 +0300 Subject: [PATCH] fix(fonts): explicit font-family on title utilities + cascade conflicts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Реальные измерения через DevTools на staging выявили 3 бага после MR !47: Bug 1: text-title-md/lg/xl inherited Tektur от @nstart/ui Card parent. Handoff: 'Inter for all headings'. Computed: Tektur. Fix: добавил font-family: var(--font-sans) explicit на text-title-* и text-body/text-cell. После Stage 3.9 (nstart gone) можно убрать — body inherit будет достаточно. Bug 2: text-cap + font-mono cohabit (catalog scope chips, time-travel presets) → Tailwind v4 cascade order: font-mono идёт после text-cap в bundled CSS → JetBrains Mono перебивает Tektur. text-cap baked font-display, font-mono token redundant. Fix: codemod strip font-mono где есть text-cap (4 sites). Computed font-family теперь правильно Tektur. Bug 3: @nstart/ui PageHeader рендерил h1 'DICTIONARIES' в Tektur 36px/700 uppercase (font-primary text-4xl). Handoff page title: 17px/600 Inter normal case. Наш src/ui/components/page-header.tsx написан но не экспортирован через barrel — все routes резолвили PageHeader к nstart версии. Fix: добавил 'export { PageHeader }' override в src/ui/index.ts. Все 7 PageHeader usages (catalog/search/reviews/webhooks/outbox/ my-drafts/graph) теперь получат handoff-conformant heading. Bug 4 (small): catalog counter '37/37' использовал text-cap но это numeric value — handoff role text-mono (11px JetBrains Mono). Fix: text-cap → text-mono + tabular-nums для grid alignment. Verified via injected test elements + CDP computed styles: text-title-xl: 22/600 Inter text-title-lg: 17/600 Inter text-title-md: 15/600 Inter text-body: 13/400 Inter text-cell: 12.5/500 Inter text-mono: 11/500 JetBrains Mono text-cap: 10.5/600 Tektur Все 7 utilities точно matches handoff scale. Files: 4 modified. TS strict + 116 tests pass. --- .../src/components/timetravel/TimeTravelPicker.tsx | 2 +- ordinis-admin-ui/src/routes/dictionaries.index.tsx | 6 +++--- ordinis-admin-ui/src/styles.css | 10 ++++++++++ ordinis-admin-ui/src/ui/index.ts | 4 ++++ 4 files changed, 18 insertions(+), 4 deletions(-) diff --git a/ordinis-admin-ui/src/components/timetravel/TimeTravelPicker.tsx b/ordinis-admin-ui/src/components/timetravel/TimeTravelPicker.tsx index 1bb6389..0321cd6 100644 --- a/ordinis-admin-ui/src/components/timetravel/TimeTravelPicker.tsx +++ b/ordinis-admin-ui/src/components/timetravel/TimeTravelPicker.tsx @@ -348,7 +348,7 @@ function QuickPresets({ onPick }: { onPick: (deltaMs: number) => void }) { key={p.key} type="button" onClick={() => onPick(p.deltaMs)} - className="text-cap px-2.5 py-1 rounded-full border border-line hover:border-accent hover:bg-accent/4 font-mono text-ink transition-colors" + className="text-cap px-2.5 py-1 rounded-full border border-line hover:border-accent hover:bg-accent/4 text-ink transition-colors" > {p.label} diff --git a/ordinis-admin-ui/src/routes/dictionaries.index.tsx b/ordinis-admin-ui/src/routes/dictionaries.index.tsx index a32651a..1c0d9ad 100644 --- a/ordinis-admin-ui/src/routes/dictionaries.index.tsx +++ b/ordinis-admin-ui/src/routes/dictionaries.index.tsx @@ -253,7 +253,7 @@ function DictionariesPage() { /> - + {filtered.length}/{data.length} @@ -273,7 +273,7 @@ function DictionariesPage() { onClick={() => toggleScope(scope)} aria-pressed={selected} title={t(`dict.list.section.${scope}`)} - className={`text-cap px-2 py-1 rounded-full flex items-center gap-1 border transition focus:outline-none focus:ring-2 focus:ring-accent/40 font-mono ${ + className={`text-cap px-2 py-1 rounded-full flex items-center gap-1 border transition focus:outline-none focus:ring-2 focus:ring-accent/40 ${ selected ? 'border-accent bg-accent-bg text-accent' : 'border-line hover:border-accent/60 text-ink' @@ -321,7 +321,7 @@ function DictionariesPage() { type="button" onClick={() => setBundle(selected ? undefined : bundle)} aria-pressed={selected} - className={`text-cap px-2 py-1 rounded-sm flex items-center gap-1 border transition focus:outline-none focus:ring-2 focus:ring-accent/40 font-mono ${ + className={`text-cap px-2 py-1 rounded-sm flex items-center gap-1 border transition focus:outline-none focus:ring-2 focus:ring-accent/40 ${ selected ? 'border-accent bg-accent-bg text-accent' : 'border-line hover:border-accent/60 text-ink' diff --git a/ordinis-admin-ui/src/styles.css b/ordinis-admin-ui/src/styles.css index dc7a05a..b2ac0c1 100644 --- a/ordinis-admin-ui/src/styles.css +++ b/ordinis-admin-ui/src/styles.css @@ -182,7 +182,13 @@ * (e.g. `text-body font-medium text-ink`). НЕ накладывать font-mono/ * font-display/uppercase/tracking — они baked в соответствующие utility. */ +/* font-family: var(--font-sans) explicit — наследование может ломаться когда + * титлы используются внутри @nstart/ui Card/PageHeader которые sеtают + * font-family: Tektur на parent. После Stage 3.9 (nstart removed) можно + * убрать font-family из этих utilities — body inherit будет достаточно. */ + @utility text-title-xl { + font-family: var(--font-sans); font-size: 22px; font-weight: 600; line-height: 1.2; @@ -190,6 +196,7 @@ } @utility text-title-lg { + font-family: var(--font-sans); font-size: 17px; font-weight: 600; line-height: 1.25; @@ -197,18 +204,21 @@ } @utility text-title-md { + font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 1.3; } @utility text-body { + font-family: var(--font-sans); font-size: 13px; font-weight: 400; line-height: 1.45; } @utility text-cell { + font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; line-height: 1.35; diff --git a/ordinis-admin-ui/src/ui/index.ts b/ordinis-admin-ui/src/ui/index.ts index d935289..af7eb55 100644 --- a/ordinis-admin-ui/src/ui/index.ts +++ b/ordinis-admin-ui/src/ui/index.ts @@ -38,6 +38,10 @@ export { Alert, type AlertProps } from './components/alert' // TextArea override — shadcn с handoff tokens. Phase 3 migration step // (Stage 3.8a). API совместим с @nstart/ui TextArea (label/hint/error). export { TextArea, type TextAreaProps } from './components/textarea' +// PageHeader override — @nstart/ui рендерил h1 в Tektur 36px/700 (text-4xl +// uppercase tracking-tight font-primary), что не соответствует handoff +// page title 17/600 Inter. Наша версия использует text-title-lg utility. +export { PageHeader } from './components/page-header' // === Handoff design system primitives — новые компоненты без nstart-аналога === export { Cap, type CapProps } from './components/cap'