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.
@@ -7,7 +7,7 @@ import { cn } from '@/lib/utils'
|
||||
* shadcn-style API: children может быть [Title, Description] или произвольный.
|
||||
*/
|
||||
const alertVariants = cva(
|
||||
'relative w-full rounded-md border-l-4 px-4 py-3 text-sm [&>svg]:text-ink-2 [&>svg]:size-4 [&>svg]:absolute [&>svg]:left-3 [&>svg]:top-3 [&>svg+*]:pl-6',
|
||||
'relative w-full rounded-md border-l-4 px-4 py-3 text-body [&>svg]:text-ink-2 [&>svg]:size-4 [&>svg]:absolute [&>svg]:left-3 [&>svg]:top-3 [&>svg+*]:pl-6',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
|
||||
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const badgeVariants = cva(
|
||||
'inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-2xs font-medium font-mono uppercase tracking-wide whitespace-nowrap',
|
||||
'inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-cell font-medium font-mono uppercase tracking-wide whitespace-nowrap',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
|
||||
@@ -22,7 +22,7 @@ import { cn } from '@/lib/utils'
|
||||
const buttonVariants = cva(
|
||||
[
|
||||
'inline-flex items-center justify-center gap-2 whitespace-nowrap',
|
||||
'rounded-md text-sm font-medium transition-colors',
|
||||
'rounded-md text-body font-medium transition-colors',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg',
|
||||
'disabled:pointer-events-none disabled:opacity-50',
|
||||
'[&_svg]:pointer-events-none [&_svg]:shrink-0',
|
||||
@@ -42,7 +42,7 @@ const buttonVariants = cva(
|
||||
'text-accent underline-offset-4 hover:underline',
|
||||
},
|
||||
size: {
|
||||
sm: 'h-7 px-2.5 text-xs',
|
||||
sm: 'h-7 px-2.5 text-cell',
|
||||
md: 'h-9 px-3.5',
|
||||
lg: 'h-10 px-4',
|
||||
'icon-sm': 'h-6 w-6',
|
||||
|
||||
@@ -32,7 +32,7 @@ export const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttribut
|
||||
return (
|
||||
<h3
|
||||
ref={ref}
|
||||
className={cn('text-base font-semibold leading-tight text-ink', className)}
|
||||
className={cn('text-title-md text-ink', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
@@ -43,7 +43,7 @@ export const CardDescription = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLParagraphElement>
|
||||
>(function CardDescription({ className, ...props }, ref) {
|
||||
return <p ref={ref} className={cn('text-sm text-ink-2', className)} {...props} />
|
||||
return <p ref={ref} className={cn('text-body text-ink-2', className)} {...props} />
|
||||
})
|
||||
|
||||
export const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
|
||||
@@ -118,7 +118,7 @@ export const DialogTitle = React.forwardRef<
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn('text-base font-semibold text-ink leading-tight', className)}
|
||||
className={cn('text-title-xl text-ink', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
@@ -131,7 +131,7 @@ export const DialogDescription = React.forwardRef<
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn('text-sm text-ink-2', className)}
|
||||
className={cn('text-body text-ink-2', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
@@ -20,7 +20,7 @@ export const DropdownMenuSubTrigger = React.forwardRef<
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-surface-2 data-[state=open]:bg-surface-2',
|
||||
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-body outline-none focus:bg-surface-2 data-[state=open]:bg-surface-2',
|
||||
inset && 'pl-8',
|
||||
className,
|
||||
)}
|
||||
@@ -77,7 +77,7 @@ export const DropdownMenuItem = React.forwardRef<
|
||||
<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-surface-2 focus:text-ink',
|
||||
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-body outline-none transition-colors focus:bg-surface-2 focus:text-ink',
|
||||
'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
inset && 'pl-8',
|
||||
className,
|
||||
@@ -95,7 +95,7 @@ export const DropdownMenuCheckboxItem = React.forwardRef<
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-surface-2',
|
||||
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-body outline-none transition-colors focus:bg-surface-2',
|
||||
'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
className,
|
||||
)}
|
||||
@@ -120,7 +120,7 @@ export const DropdownMenuRadioItem = React.forwardRef<
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-surface-2',
|
||||
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-body outline-none transition-colors focus:bg-surface-2',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -142,7 +142,7 @@ export const DropdownMenuLabel = React.forwardRef<
|
||||
return (
|
||||
<DropdownMenuPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn('px-2 py-1.5 text-2xs font-semibold uppercase tracking-wider text-mute', inset && 'pl-8', className)}
|
||||
className={cn('px-2 py-1.5 text-cell font-semibold uppercase tracking-wider text-mute', inset && 'pl-8', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
@@ -27,8 +27,8 @@ export function EmptyState({
|
||||
>
|
||||
{icon && <div className="text-mute [&>svg]:size-8">{icon}</div>}
|
||||
<div className="space-y-1">
|
||||
<div className="text-base font-semibold text-ink">{title}</div>
|
||||
{description && <div className="text-sm text-ink-2 max-w-md">{description}</div>}
|
||||
<div className="text-title-md text-ink">{title}</div>
|
||||
{description && <div className="text-body text-ink-2 max-w-md">{description}</div>}
|
||||
</div>
|
||||
{action && <div className="mt-2">{action}</div>}
|
||||
</div>
|
||||
|
||||
@@ -37,11 +37,11 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
aria-required={required || undefined}
|
||||
aria-invalid={Boolean(error) || undefined}
|
||||
className={cn(
|
||||
'flex h-9 w-full rounded-md border border-line bg-surface px-3 py-1 text-sm text-ink',
|
||||
'flex h-9 w-full rounded-md border border-line bg-surface px-3 py-1 text-body text-ink',
|
||||
'placeholder:text-mute',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-bg',
|
||||
'disabled:cursor-not-allowed disabled:opacity-50',
|
||||
'file:border-0 file:bg-transparent file:text-sm file:font-medium',
|
||||
'file:border-0 file:bg-transparent file:text-body file:font-medium',
|
||||
error && 'border-pink focus-visible:ring-pink',
|
||||
className,
|
||||
)}
|
||||
@@ -64,9 +64,9 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
)}
|
||||
{inputEl}
|
||||
{error ? (
|
||||
<span className="text-xs text-pink">{error}</span>
|
||||
<span className="text-cell text-pink">{error}</span>
|
||||
) : hint ? (
|
||||
<span className="text-xs text-mute">{hint}</span>
|
||||
<span className="text-cell text-mute">{hint}</span>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -10,7 +10,7 @@ export const Label = React.forwardRef<
|
||||
<LabelPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'text-2xs font-medium font-display uppercase tracking-[0.10em] text-mute leading-none',
|
||||
'text-cap font-medium text-mute ',
|
||||
'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
|
||||
className,
|
||||
)}
|
||||
|
||||
@@ -35,7 +35,7 @@ export function LoadingBlock({ className, label, size = 'md', ...props }: Loadin
|
||||
{...props}
|
||||
>
|
||||
<Loader2 className={cn('animate-spin text-accent', s.icon)} />
|
||||
{label && <span className="text-sm">{label}</span>}
|
||||
{label && <span className="text-body">{label}</span>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -32,8 +32,8 @@ export function PageHeader({
|
||||
)}
|
||||
<div className="flex items-start justify-between gap-3 flex-wrap">
|
||||
<div className="min-w-0">
|
||||
<h1 className="text-lg font-semibold text-ink leading-tight truncate">{title}</h1>
|
||||
{description && <p className="text-sm text-ink-2 mt-1 max-w-2xl">{description}</p>}
|
||||
<h1 className="text-title-lg text-ink truncate">{title}</h1>
|
||||
{description && <p className="text-body text-ink-2 mt-1 max-w-2xl">{description}</p>}
|
||||
</div>
|
||||
{actions && <div className="shrink-0 flex items-center gap-2">{actions}</div>}
|
||||
</div>
|
||||
|
||||
@@ -17,7 +17,7 @@ export const PopoverContent = React.forwardRef<
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
'z-50 w-72 rounded-md border border-line bg-surface p-3 text-sm text-ink shadow-lg outline-none',
|
||||
'z-50 w-72 rounded-md border border-line bg-surface p-3 text-body text-ink shadow-lg outline-none',
|
||||
'data-[state=open]:animate-in data-[state=closed]:animate-out',
|
||||
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
||||
'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
|
||||
|
||||
@@ -64,7 +64,7 @@ export function ScopeBadge({
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-2xs font-mono font-medium',
|
||||
'inline-flex items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-cell font-mono font-medium',
|
||||
SCOPE_BG[scope],
|
||||
className,
|
||||
)}
|
||||
|
||||
@@ -113,7 +113,7 @@ export const SheetTitle = React.forwardRef<
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn('text-base font-semibold text-ink', className)}
|
||||
className={cn('text-title-xl text-ink', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
@@ -126,7 +126,7 @@ export const SheetDescription = React.forwardRef<
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn('text-sm text-ink-2', className)}
|
||||
className={cn('text-body text-ink-2', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
@@ -33,7 +33,7 @@ export const TabsTrigger = React.forwardRef<
|
||||
<TabsPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'inline-flex items-center justify-center whitespace-nowrap px-3.5 h-10 text-sm text-ink-2 -mb-px',
|
||||
'inline-flex items-center justify-center whitespace-nowrap px-3.5 h-10 text-body text-ink-2 -mb-px',
|
||||
'border-b-2 border-transparent transition-all hover:text-ink',
|
||||
'focus-visible:outline-none focus-visible:text-accent',
|
||||
'disabled:pointer-events-none disabled:opacity-50',
|
||||
|
||||
@@ -36,7 +36,7 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
|
||||
aria-required={required || undefined}
|
||||
aria-invalid={Boolean(error) || undefined}
|
||||
className={cn(
|
||||
'flex w-full rounded-md border border-line bg-surface px-3 py-2 text-sm text-ink',
|
||||
'flex w-full rounded-md border border-line bg-surface px-3 py-2 text-body text-ink',
|
||||
'placeholder:text-mute',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-bg',
|
||||
'disabled:cursor-not-allowed disabled:opacity-50',
|
||||
@@ -63,9 +63,9 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
|
||||
)}
|
||||
{textareaEl}
|
||||
{error ? (
|
||||
<span className="text-xs text-pink">{error}</span>
|
||||
<span className="text-cell text-pink">{error}</span>
|
||||
) : hint ? (
|
||||
<span className="text-xs text-mute">{hint}</span>
|
||||
<span className="text-cell text-mute">{hint}</span>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -41,7 +41,7 @@ export function Toaster() {
|
||||
},
|
||||
classNames: {
|
||||
title: 'font-medium',
|
||||
description: 'text-mute text-xs',
|
||||
description: 'text-mute text-cell',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -16,7 +16,7 @@ export const TooltipContent = React.forwardRef<
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
'z-50 overflow-hidden rounded-sm bg-ink text-on-accent px-2 py-1 text-2xs font-medium shadow',
|
||||
'z-50 overflow-hidden rounded-sm bg-ink text-on-accent px-2 py-1 text-cell font-medium shadow',
|
||||
'data-[state=open]:animate-in data-[state=closed]:animate-out',
|
||||
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
||||
className,
|
||||
|
||||
Reference in New Issue
Block a user