fix(fonts): explicit font-family on title utilities + cascade conflicts

Реальные измерения через 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.
This commit is contained in:
Zimin A.N.
2026-05-11 14:58:32 +03:00
parent 6805c70a6b
commit f0dbc20f62
4 changed files with 18 additions and 4 deletions
@@ -348,7 +348,7 @@ function QuickPresets({ onPick }: { onPick: (deltaMs: number) => void }) {
key={p.key} key={p.key}
type="button" type="button"
onClick={() => onPick(p.deltaMs)} 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} {p.label}
</button> </button>
@@ -253,7 +253,7 @@ function DictionariesPage() {
/> />
</div> </div>
<span className="text-cap text-mute whitespace-nowrap font-mono"> <span className="text-mono text-mute whitespace-nowrap tabular-nums">
{filtered.length}/{data.length} {filtered.length}/{data.length}
</span> </span>
@@ -273,7 +273,7 @@ function DictionariesPage() {
onClick={() => toggleScope(scope)} onClick={() => toggleScope(scope)}
aria-pressed={selected} aria-pressed={selected}
title={t(`dict.list.section.${scope}`)} 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 selected
? 'border-accent bg-accent-bg text-accent' ? 'border-accent bg-accent-bg text-accent'
: 'border-line hover:border-accent/60 text-ink' : 'border-line hover:border-accent/60 text-ink'
@@ -321,7 +321,7 @@ function DictionariesPage() {
type="button" type="button"
onClick={() => setBundle(selected ? undefined : bundle)} onClick={() => setBundle(selected ? undefined : bundle)}
aria-pressed={selected} 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 selected
? 'border-accent bg-accent-bg text-accent' ? 'border-accent bg-accent-bg text-accent'
: 'border-line hover:border-accent/60 text-ink' : 'border-line hover:border-accent/60 text-ink'
+10
View File
@@ -182,7 +182,13 @@
* (e.g. `text-body font-medium text-ink`). НЕ накладывать font-mono/ * (e.g. `text-body font-medium text-ink`). НЕ накладывать font-mono/
* font-display/uppercase/tracking — они baked в соответствующие utility. */ * 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 { @utility text-title-xl {
font-family: var(--font-sans);
font-size: 22px; font-size: 22px;
font-weight: 600; font-weight: 600;
line-height: 1.2; line-height: 1.2;
@@ -190,6 +196,7 @@
} }
@utility text-title-lg { @utility text-title-lg {
font-family: var(--font-sans);
font-size: 17px; font-size: 17px;
font-weight: 600; font-weight: 600;
line-height: 1.25; line-height: 1.25;
@@ -197,18 +204,21 @@
} }
@utility text-title-md { @utility text-title-md {
font-family: var(--font-sans);
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
line-height: 1.3; line-height: 1.3;
} }
@utility text-body { @utility text-body {
font-family: var(--font-sans);
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
line-height: 1.45; line-height: 1.45;
} }
@utility text-cell { @utility text-cell {
font-family: var(--font-sans);
font-size: 12.5px; font-size: 12.5px;
font-weight: 500; font-weight: 500;
line-height: 1.35; line-height: 1.35;
+4
View File
@@ -38,6 +38,10 @@ export { Alert, type AlertProps } from './components/alert'
// TextArea override — shadcn с handoff tokens. Phase 3 migration step // TextArea override — shadcn с handoff tokens. Phase 3 migration step
// (Stage 3.8a). API совместим с @nstart/ui TextArea (label/hint/error). // (Stage 3.8a). API совместим с @nstart/ui TextArea (label/hint/error).
export { TextArea, type TextAreaProps } from './components/textarea' 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-аналога === // === Handoff design system primitives — новые компоненты без nstart-аналога ===
export { Cap, type CapProps } from './components/cap' export { Cap, type CapProps } from './components/cap'