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.
49 lines
1.9 KiB
TypeScript
49 lines
1.9 KiB
TypeScript
import * as React from 'react'
|
|
import { cva, type VariantProps } from 'class-variance-authority'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
/**
|
|
* Alert / inline message — статусная карточка с border-left accent.
|
|
* shadcn-style API: children может быть [Title, Description] или произвольный.
|
|
*/
|
|
const alertVariants = cva(
|
|
'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: {
|
|
info: 'border-l-accent bg-accent-bg text-ink',
|
|
success: 'border-l-green bg-green-bg text-ink',
|
|
warning: 'border-l-warn bg-warn-bg text-ink',
|
|
danger: 'border-l-pink bg-pink-bg text-ink',
|
|
// Alias для nstart-compat: error === danger визуально.
|
|
error: 'border-l-pink bg-pink-bg text-ink',
|
|
neutral: 'border-l-line bg-surface-2 text-ink',
|
|
},
|
|
},
|
|
defaultVariants: { variant: 'info' },
|
|
},
|
|
)
|
|
|
|
export type AlertProps = React.HTMLAttributes<HTMLDivElement> &
|
|
VariantProps<typeof alertVariants> & {
|
|
title?: React.ReactNode
|
|
/** Right-aligned slot для action button(s) inside alert. */
|
|
action?: React.ReactNode
|
|
}
|
|
|
|
export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
|
|
function Alert({ className, variant, title, action, children, ...props }, ref) {
|
|
return (
|
|
<div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props}>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
{title && <div className="font-medium mb-0.5">{title}</div>}
|
|
<div className="text-ink-2 text-[13px] leading-snug">{children}</div>
|
|
</div>
|
|
{action && <div className="shrink-0 flex items-center gap-2">{action}</div>}
|
|
</div>
|
|
</div>
|
|
)
|
|
},
|
|
)
|