Zimin A.N.
b94912789f
Заменяет 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.
60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import * as React from 'react'
|
||
import { cn } from '@/lib/utils'
|
||
|
||
/**
|
||
* Card / Panel — surface block с radius-card, border-line. Замена для
|
||
* {@code @nstart/ui} Panel. Используем сложно через {@link CardHeader},
|
||
* {@link CardContent}, {@link CardFooter}.
|
||
*/
|
||
export const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||
function Card({ className, ...props }, ref) {
|
||
return (
|
||
<div
|
||
ref={ref}
|
||
className={cn(
|
||
'rounded-lg border border-line bg-surface text-ink shadow-sm',
|
||
className,
|
||
)}
|
||
{...props}
|
||
/>
|
||
)
|
||
},
|
||
)
|
||
|
||
export const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||
function CardHeader({ className, ...props }, ref) {
|
||
return <div ref={ref} className={cn('flex flex-col gap-1.5 p-4', className)} {...props} />
|
||
},
|
||
)
|
||
|
||
export const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
|
||
function CardTitle({ className, ...props }, ref) {
|
||
return (
|
||
<h3
|
||
ref={ref}
|
||
className={cn('text-title-md text-ink', className)}
|
||
{...props}
|
||
/>
|
||
)
|
||
},
|
||
)
|
||
|
||
export const CardDescription = React.forwardRef<
|
||
HTMLParagraphElement,
|
||
React.HTMLAttributes<HTMLParagraphElement>
|
||
>(function CardDescription({ className, ...props }, ref) {
|
||
return <p ref={ref} className={cn('text-body text-ink-2', className)} {...props} />
|
||
})
|
||
|
||
export const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||
function CardContent({ className, ...props }, ref) {
|
||
return <div ref={ref} className={cn('p-4 pt-0', className)} {...props} />
|
||
},
|
||
)
|
||
|
||
export const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||
function CardFooter({ className, ...props }, ref) {
|
||
return <div ref={ref} className={cn('flex items-center p-4 pt-0', className)} {...props} />
|
||
},
|
||
)
|