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:
Zimin A.N.
@@ -273,7 +273,7 @@ function DictionariesPage() {
|
||||
onClick={() => toggleScope(scope)}
|
||||
aria-pressed={selected}
|
||||
title={t(`dict.list.section.${scope}`)}
|
||||
className={`px-2 py-1 rounded-full text-2xs uppercase tracking-[0.10em] 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 font-mono ${
|
||||
selected
|
||||
? 'border-accent bg-accent-bg text-accent'
|
||||
: 'border-line hover:border-accent/60 text-ink'
|
||||
@@ -303,7 +303,7 @@ function DictionariesPage() {
|
||||
type="button"
|
||||
onClick={() => setBundle(undefined)}
|
||||
aria-pressed={!bundleFilter}
|
||||
className={`px-2 py-1 rounded-sm text-2xs uppercase tracking-[0.10em] border transition focus:outline-none focus:ring-2 focus:ring-accent/40 ${
|
||||
className={`text-cap px-2 py-1 rounded-sm border transition focus:outline-none focus:ring-2 focus:ring-accent/40 ${
|
||||
!bundleFilter
|
||||
? '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={`px-2 py-1 rounded-sm text-2xs uppercase tracking-[0.10em] 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 font-mono ${
|
||||
selected
|
||||
? 'border-accent bg-accent-bg text-accent'
|
||||
: 'border-line hover:border-accent/60 text-ink'
|
||||
@@ -342,7 +342,7 @@ function DictionariesPage() {
|
||||
onClick={() => setSearch({ deps: withDepsOnly ? undefined : '1' })}
|
||||
aria-pressed={withDepsOnly}
|
||||
title={t('dict.list.deps.only')}
|
||||
className={`px-2 py-1 rounded-sm text-2xs uppercase tracking-[0.10em] border transition focus:outline-none focus:ring-2 focus:ring-accent/40 ${
|
||||
className={`text-cap px-2 py-1 rounded-sm border transition focus:outline-none focus:ring-2 focus:ring-accent/40 ${
|
||||
withDepsOnly
|
||||
? 'border-accent bg-accent-bg text-accent'
|
||||
: 'border-line hover:border-accent/60 text-ink'
|
||||
@@ -355,7 +355,7 @@ function DictionariesPage() {
|
||||
{/* Empty state */}
|
||||
{filtered.length === 0 ? (
|
||||
<div className="border border-line rounded-lg p-12 text-center bg-surface-2">
|
||||
<p className="font-sans text-lg text-accent mb-2">
|
||||
<p className="font-sans text-title-md text-accent mb-2">
|
||||
{t('dict.list.search.empty')}
|
||||
</p>
|
||||
{filtersActive && (
|
||||
@@ -369,7 +369,7 @@ function DictionariesPage() {
|
||||
Array.from(grouped.entries()).map(([bundle, items]) => (
|
||||
<section key={bundle} className="space-y-3">
|
||||
<h2 className="flex items-baseline gap-3 pb-2 border-b border-line">
|
||||
<span className="text-sm uppercase tracking-[0.10em] text-accent font-mono font-medium">
|
||||
<span className="text-body uppercase tracking-[0.10em] text-accent font-mono font-medium">
|
||||
{bundle}
|
||||
</span>
|
||||
<span className="text-cap text-mute">
|
||||
@@ -467,10 +467,10 @@ const DictCard = ({ d, t }: { d: DictionaryDefinition; t: TFunc }) => {
|
||||
{/* Body */}
|
||||
<div className="px-3.5 py-3 min-w-0">
|
||||
<div className="flex items-baseline gap-2.5 flex-wrap">
|
||||
<h3 className="text-[15px] font-semibold text-navy truncate">
|
||||
<h3 className="text-title-md text-navy truncate">
|
||||
{d.displayName ?? d.name}
|
||||
</h3>
|
||||
<span className="font-mono text-[11px] text-mute truncate">{d.name}</span>
|
||||
<span className="text-mono text-mute truncate">{d.name}</span>
|
||||
{d.approvalRequired && (
|
||||
<Badge variant="warning">{t('dict.list.approval')}</Badge>
|
||||
)}
|
||||
@@ -494,7 +494,7 @@ const DictCard = ({ d, t }: { d: DictionaryDefinition; t: TFunc }) => {
|
||||
/>
|
||||
))}
|
||||
{refBy.length > MAX_REFBY_CHIPS && (
|
||||
<span className="font-mono text-[11px] text-mute">
|
||||
<span className="text-mono text-mute">
|
||||
+{refBy.length - MAX_REFBY_CHIPS}
|
||||
</span>
|
||||
)}
|
||||
@@ -505,7 +505,7 @@ const DictCard = ({ d, t }: { d: DictionaryDefinition; t: TFunc }) => {
|
||||
{/* Right rail: scope badge + version */}
|
||||
<div className="px-3.5 py-3 flex flex-col items-end gap-1.5 shrink-0">
|
||||
<Badge variant="info">{d.scope}</Badge>
|
||||
<span className="font-mono text-[11px] text-mute whitespace-nowrap">
|
||||
<span className="text-mono text-mute whitespace-nowrap">
|
||||
v{d.schemaVersion}
|
||||
</span>
|
||||
{typeof d.recordCount === 'number' && (
|
||||
|
||||
Reference in New Issue
Block a user