fix(fonts): semantic typography utilities per handoff (7 roles)
Заменяет blanket override из MR !45 на типизированную type scale per design_handoff_ordinis_mdm/README.md "Scale" section. Семь semantic @utility в styles.css: text-title-xl 22/600 — modal title, section header text-title-lg 17/600 — page title в editor text-title-md 15/600 — dictionary card title text-body 13/400 — workhorse: body, buttons, tabs, inputs text-cell 12.5/500 — table cell text text-mono 11/500 — Mono: IDs, dates, FK refs (font-mono baked in) text-cap 10.5/600 — Tektur UPPERCASE caption (font/uppercase baked in) Audit phases: P1: добавил 7 утилит, font/uppercase/tracking baked где надо P2: 43 deterministic codemods (font-mono+text-2xs/[11px] → text-mono, [15/17/22]px+font-semibold → text-title-*, [12.5]px → text-cell, [10.5]px+uppercase+tracking → text-cap) P3: 64 text-sm → text-body (handoff workhorse), 84 text-2xs context-aware (TableCell → text-cell, bare → text-cell, плюс cleanup caps в backticks template literals который Phase 2 пропустил), 25 text-xs (6 → text-mono когда с font-mono, 19 → text-cell), 8 titles text-base/lg → text-title-* P4: убрал --text-2xs override (no users), оставил --text-sm: 13px scoped к @nstart/ui passthrough (см. comment в styles.css — убирается в Stage 3.9) Stats: text-body: 69 | text-cell: 99 | text-mono: 50 | text-cap: 42 text-title-xl: 5 | text-title-lg: 5 | text-title-md: 7 text-sm/text-2xs/text-xs в src/: 0 (только в styles.css комментариях) Поведение всех 277 typography usages теперь явно соответствует handoff — каждое место осознанно выбрано под роль, не плажирующий override.
This commit is contained in:
@@ -50,7 +50,7 @@ export function TimeTravelPicker({
|
||||
}, [marks, valueDate])
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 px-4 py-3 rounded-md border border-warn bg-warn-bg text-sm">
|
||||
<div className="flex flex-col gap-3 px-4 py-3 rounded-md border border-warn bg-warn-bg text-body">
|
||||
<div className="flex items-center gap-2">
|
||||
<ClockCounterClockwiseIcon weight="bold" size={16} className="text-warn" />
|
||||
<span className="text-cap font-display text-ink-2">
|
||||
@@ -58,7 +58,7 @@ export function TimeTravelPicker({
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="ml-auto text-2xs text-mute hover:text-ink hover:underline inline-flex items-center gap-1"
|
||||
className="ml-auto text-cell text-mute hover:text-ink hover:underline inline-flex items-center gap-1"
|
||||
onClick={onClose}
|
||||
>
|
||||
<XIcon weight="bold" size={12} />
|
||||
@@ -306,7 +306,7 @@ function TimelineTrack({
|
||||
|
||||
{tooltipText && hover !== null && (
|
||||
<div
|
||||
className="absolute -top-2 -translate-y-full px-2 py-0.5 rounded bg-carbon text-white text-2xs font-mono pointer-events-none whitespace-nowrap"
|
||||
className="text-mono absolute -top-2 -translate-y-full px-2 py-0.5 rounded bg-carbon text-white pointer-events-none whitespace-nowrap"
|
||||
style={{ left: timeToX(hover), transform: 'translate(-50%, -100%)' }}
|
||||
>
|
||||
{tooltipText}
|
||||
@@ -314,7 +314,7 @@ function TimelineTrack({
|
||||
)}
|
||||
|
||||
{marks.length > 0 && (
|
||||
<div className="text-2xs text-mute font-display mt-1">
|
||||
<div className="text-cell text-mute font-display mt-1">
|
||||
{marks.length === 1
|
||||
? '1 точка изменений'
|
||||
: marks.length < 5
|
||||
@@ -386,7 +386,7 @@ function StatusFooter({
|
||||
|
||||
if (!valueDate) {
|
||||
return (
|
||||
<div className="text-2xs text-mute font-display italic">
|
||||
<div className="text-cell text-mute font-display italic">
|
||||
{t('timeTravel.hint')}
|
||||
</div>
|
||||
)
|
||||
@@ -395,14 +395,14 @@ function StatusFooter({
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-2 pt-2 border-t border-warn/30">
|
||||
<ClockCounterClockwiseIcon weight="regular" size={14} className="text-warn shrink-0" />
|
||||
<span className="text-xs font-mono text-ink">
|
||||
<span className="text-mono text-ink">
|
||||
{valueDate.toLocaleString(lang === 'en' ? 'en-US' : 'ru-RU', {
|
||||
dateStyle: 'long',
|
||||
timeStyle: 'short',
|
||||
})}
|
||||
</span>
|
||||
{relativeLabel && (
|
||||
<span className="text-2xs text-mute font-display lowercase">
|
||||
<span className="text-cell text-mute font-display lowercase">
|
||||
({relativeLabel})
|
||||
</span>
|
||||
)}
|
||||
@@ -418,10 +418,10 @@ function StatusFooter({
|
||||
valueDate.getMinutes(),
|
||||
)
|
||||
}
|
||||
className="w-10 px-1.5 py-0.5 rounded-sm border border-line bg-white text-2xs font-mono text-center"
|
||||
className="text-mono w-10 px-1.5 py-0.5 rounded-sm border border-line bg-white text-center"
|
||||
aria-label={t('timeTravel.hours')}
|
||||
/>
|
||||
<span className="text-mute font-mono text-2xs">:</span>
|
||||
<span className="text-mono text-mute">:</span>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
@@ -433,13 +433,13 @@ function StatusFooter({
|
||||
Math.max(0, Math.min(59, parseInt(e.target.value, 10) || 0)),
|
||||
)
|
||||
}
|
||||
className="w-10 px-1.5 py-0.5 rounded-sm border border-line bg-white text-2xs font-mono text-center"
|
||||
className="text-mono w-10 px-1.5 py-0.5 rounded-sm border border-line bg-white text-center"
|
||||
aria-label={t('timeTravel.minutes')}
|
||||
/>
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="ml-auto text-2xs text-accent hover:underline"
|
||||
className="ml-auto text-cell text-accent hover:underline"
|
||||
onClick={onClear}
|
||||
>
|
||||
{t('timeTravel.clear')}
|
||||
|
||||
Reference in New Issue
Block a user