ivan-igorevich/mdm-ordinis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(fonts): semantic typography utilities per handoff (7 roles)

Browse Source 
Заменяет 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.
2026-05-11 14:31:35 +03:00
parent e62633d903
commit b94912789f
46 changed files with 296 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ordinis-admin-ui/src/auth/AuthBadge.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ export function AuthBadge() {
return (
<div className="flex items-center gap-2">
<span className="inline-flex items-center gap-1 text-sm text-ink">
<span className="inline-flex items-center gap-1 text-body text-ink">
<UserIcon size={14} weight="duotone" />
<span className="hidden sm:inline">{display}</span>
</span>
ordinis-admin-ui/src/auth/RequireAuth.tsx
+4 -4
View File
@@ -34,14 +34,14 @@ export function RequireAuth({ children }: { children: ReactNode }) {
return (
<div className="min-h-screen flex items-center justify-center p-8">
<div className="max-w-md text-center space-y-2">
<h1 className="text-lg font-sans">Ошибка входа</h1>
<p className="text-sm text-ink-2">
<h1 className="text-title-lg font-sans">Ошибка входа</h1>
<p className="text-body text-ink-2">
Keycloak вернул ошибку:{' '}
<code className="font-mono">{oidcError}</code>
</p>
<button
type="button"
className="mt-4 inline-flex items-center justify-center rounded-sm border border-accent text-accent px-4 py-2 text-sm hover:bg-accent-bg"
className="mt-4 inline-flex items-center justify-center rounded-sm border border-accent text-accent px-4 py-2 text-body hover:bg-accent-bg"
onClick={() => {
window.location.href = '/'
}}
@@ -59,7 +59,7 @@ export function RequireAuth({ children }: { children: ReactNode }) {
if (auth.error && !auth.isAuthenticated) {
return (
<>
<div className="px-4 py-2 bg-amber-50 border-b border-amber-200 text-xs text-amber-900 text-center">
<div className="px-4 py-2 bg-amber-50 border-b border-amber-200 text-cell text-amber-900 text-center">
Авторизация недоступна: {auth.error.message}. Доступен просмотр публичных данных.
</div>
{children}
ordinis-admin-ui/src/components/form/SchemaDrivenForm.tsx
+5 -5
View File
@@ -184,7 +184,7 @@ export const SchemaDrivenForm = ({
</div>
)}
{idSource && (
<div className="sm:col-span-2 text-2xs text-mute px-2">
<div className="sm:col-span-2 text-cell text-mute px-2">
{t('form.idSourceNote', { field: idSource })}
</div>
)}
@@ -337,7 +337,7 @@ const FieldBody = ({
name={`data.${fieldKey}.${loc}` as `data.${string}`}
render={({ field }) => (
<div className="flex items-center gap-3">
<span className="text-xs font-mono text-ink-2 normal-case tracking-normal whitespace-nowrap shrink-0 w-14">
<span className="text-mono text-ink-2 normal-case tracking-normal whitespace-nowrap shrink-0 w-14">
{loc === defaultLocale ? <strong>{loc}</strong> : loc}
</span>
<div className="flex-1 min-w-0">
@@ -599,8 +599,8 @@ const DateTimeField = ({ label, value, defaultTime, onChange, hint, error }: Dat
/>
</div>
</div>
{hint && !error && <p className="text-2xs text-mute mt-1">{hint}</p>}
{error && <p className="text-2xs text-mars mt-1">{error}</p>}
{hint && !error && <p className="text-cell text-mute mt-1">{hint}</p>}
{error && <p className="text-cell text-mars mt-1">{error}</p>}
</div>
)
}
@@ -797,7 +797,7 @@ const ReferenceSelectField = ({
// appearance-none убирает OS default стрелку.
// py-2 (8px) match'ит TextInput высоту. pr-10 — место под адорнмент.
className={[
'w-full appearance-none border rounded-sm pl-3 pr-10 py-2 text-sm font-display',
'w-full appearance-none border rounded-sm pl-3 pr-10 py-2 text-body font-display',
'bg-white text-black transition-colors',
'focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent',
errorMsg ? 'border-mars' : 'border-line hover:border-carbon/40',
ordinis-admin-ui/src/components/geo/AoiPickerDialog.tsx
+4 -4
View File
@@ -163,7 +163,7 @@ export const AoiPickerDialog = ({ isOpen, onClose, onApply, initial }: Props) =>
type="button"
onClick={() => setDrawMode(active ? 'idle' : mode)}
className={[
'px-3 py-1.5 text-xs font-display rounded-sm border transition-colors',
'px-3 py-1.5 text-cell font-display rounded-sm border transition-colors',
active
? 'border-accent bg-accent text-white'
: 'border-line bg-white text-ink hover:border-carbon/40',
@@ -183,7 +183,7 @@ export const AoiPickerDialog = ({ isOpen, onClose, onApply, initial }: Props) =>
panelClassName="max-h-[calc(100vh-2rem)] my-4 flex flex-col"
bodyClassName="flex-1 flex flex-col gap-3 overflow-hidden"
>
<p className="text-sm text-ink-2">{t('aoi.dialog.help')}</p>
<p className="text-body text-ink-2">{t('aoi.dialog.help')}</p>
<div className="flex flex-wrap items-center gap-2">
{toolbarBtn('rectangle', t('aoi.dialog.drawRectangle'))}
@@ -192,12 +192,12 @@ export const AoiPickerDialog = ({ isOpen, onClose, onApply, initial }: Props) =>
type="button"
onClick={handleClear}
disabled={!shape}
className="px-3 py-1.5 text-xs font-display rounded-sm border border-line bg-white text-ink hover:border-carbon/40 disabled:opacity-40 disabled:cursor-not-allowed"
className="px-3 py-1.5 text-cell font-display rounded-sm border border-line bg-white text-ink hover:border-carbon/40 disabled:opacity-40 disabled:cursor-not-allowed"
>
{t('aoi.dialog.clear')}
</button>
{drawMode === 'polygon' && (
<span className="text-2xs text-mute">
<span className="text-cell text-mute">
{t('aoi.dialog.polygonHint')}
</span>
)}
ordinis-admin-ui/src/components/graph/DictionaryGraph.tsx
+4 -4
View File
@@ -89,11 +89,11 @@ export function DictionaryGraph() {
}
if (dictsQuery.error) {
return <div className="text-sm text-pink">Ошибка загрузки: {String(dictsQuery.error)}</div>
return <div className="text-body text-pink">Ошибка загрузки: {String(dictsQuery.error)}</div>
}
if (dicts.length === 0) {
return <div className="text-sm text-mute">Справочники не найдены.</div>
return <div className="text-body text-mute">Справочники не найдены.</div>
}
return (
@@ -222,7 +222,7 @@ function GraphCanvas({
return (
<div ref={wrapperRef} className="relative w-full h-[calc(100vh-220px)] min-h-[500px] rounded-lg border border-line bg-surface overflow-hidden">
{depsLoading && (
<div className="absolute top-3 right-3 z-10 text-2xs font-mono uppercase tracking-wider text-mute bg-surface/80 backdrop-blur px-2 py-1 rounded">
<div className="text-mono absolute top-3 right-3 z-10 uppercase tracking-wider text-mute bg-surface/80 backdrop-blur px-2 py-1 rounded">
Загрузка связей…
</div>
)}
@@ -318,7 +318,7 @@ function GraphCanvas({
})}
</svg>
{/* Legend */}
<div className="absolute bottom-3 left-3 flex flex-col gap-1 bg-surface/90 backdrop-blur px-3 py-2 rounded-md border border-line text-2xs">
<div className="absolute bottom-3 left-3 flex flex-col gap-1 bg-surface/90 backdrop-blur px-3 py-2 rounded-md border border-line text-cell">
<div className="font-display uppercase tracking-wider text-mute mb-0.5">Bundle</div>
{Object.entries(BUNDLE_COLORS)
.filter(([k]) => k !== 'default')
ordinis-admin-ui/src/components/layout/Sidebar.tsx
+6 -7
View File
@@ -140,7 +140,7 @@ export function Sidebar() {
{/* User block — sticky bottom */}
{auth.isAuthenticated && auth.user?.profile && (
<div className="border-t border-line px-3 py-3 flex items-center gap-2">
<div className="size-8 rounded-full bg-accent text-on-accent inline-flex items-center justify-center text-xs font-semibold">
<div className="size-8 rounded-full bg-accent text-on-accent inline-flex items-center justify-center text-cell font-semibold">
{String(
auth.user.profile.preferred_username ||
auth.user.profile.name ||
@@ -150,7 +150,7 @@ export function Sidebar() {
.toUpperCase()}
</div>
<div className="min-w-0 flex-1">
<div className="text-xs font-medium text-ink truncate">
<div className="text-cell font-medium text-ink truncate">
{String(
auth.user.profile.preferred_username ||
auth.user.profile.name ||
@@ -159,7 +159,7 @@ export function Sidebar() {
)}
</div>
{auth.user.profile.email && (
<div className="text-2xs text-mute truncate">{String(auth.user.profile.email)}</div>
<div className="text-cell text-mute truncate">{String(auth.user.profile.email)}</div>
)}
</div>
</div>
@@ -179,9 +179,8 @@ function SidebarLink({ to, label, icon: Icon, badge }: NavItem) {
<Link
to={to}
className={cn(
// 13px per handoff spec для workhorse body text. text-sm = 14px (Tailwind),
// text-[13px] = exact handoff value.
'group flex items-center gap-2.5 px-3 py-1.5 rounded-md text-[13px] transition-colors',
// text-body = 13px workhorse per handoff (см. styles.css @utility).
'group flex items-center gap-2.5 px-3 py-1.5 rounded-md text-body transition-colors',
active
? 'bg-accent-bg text-accent font-medium'
: 'text-ink-2 hover:text-ink hover:bg-surface-2',
@@ -192,7 +191,7 @@ function SidebarLink({ to, label, icon: Icon, badge }: NavItem) {
{badge !== undefined && (
<span
className={cn(
'inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-sm text-[11px] font-mono',
'inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-sm text-mono',
active
? 'bg-accent text-on-accent'
: 'bg-surface-2 text-ink-2 group-hover:bg-line',
ordinis-admin-ui/src/components/layout/TopBar.tsx
+3 -3
View File
@@ -60,12 +60,12 @@ export function TopBar() {
return (
<header className="h-14 shrink-0 border-b border-line bg-surface flex items-center px-4 sm:px-6 gap-3">
{/* Breadcrumb — left */}
<nav className="flex items-center gap-1.5 text-sm min-w-0">
<nav className="flex items-center gap-1.5 text-body min-w-0">
{breadcrumb.map((crumb, i) => {
const isLast = i === breadcrumb.length - 1
return (
<span key={i} className="flex items-center gap-1.5 min-w-0">
{i > 0 && <span className="text-mute text-xs">/</span>}
{i > 0 && <span className="text-mute text-cell">/</span>}
{crumb.to && !isLast ? (
<Link
to={crumb.to}
@@ -101,7 +101,7 @@ export function TopBar() {
href="/docs/"
target="_blank"
rel="noreferrer noopener"
className="hidden sm:inline text-xs text-ink-2 hover:text-ink transition-colors"
className="hidden sm:inline text-cell text-ink-2 hover:text-ink transition-colors"
>
{t('nav.docs')}
</a>
ordinis-admin-ui/src/components/lineage/CascadeConfirmDialog.tsx
+7 -7
View File
@@ -119,7 +119,7 @@ export const CascadeConfirmDialog = ({
{plan && (
<>
{/* Header summary */}
<p className="text-sm text-ink">
<p className="text-body text-ink">
{hasBlockers
? t('cascade.summary.blocked', {
blockers: plan.blockers.length,
@@ -137,7 +137,7 @@ export const CascadeConfirmDialog = ({
variant="error"
title={t('cascade.blockers.title', { count: plan.blockers.length })}
>
<ul className="space-y-1.5 mt-2 text-2xs">
<ul className="space-y-1.5 mt-2 text-cell">
{plan.blockers.slice(0, 5).map((b) => (
<li key={b.recordId} className="flex items-center gap-2">
<XCircleIcon weight="bold" size={12} className="text-aurora shrink-0" />
@@ -153,7 +153,7 @@ export const CascadeConfirmDialog = ({
</li>
)}
</ul>
<p className="mt-2 text-2xs text-ink-2">
<p className="mt-2 text-cell text-ink-2">
{t('cascade.blockers.resolveFirst')}
</p>
</Alert>
@@ -164,7 +164,7 @@ export const CascadeConfirmDialog = ({
<section className="space-y-2">
<div className="flex items-center gap-2">
<WarningIcon weight="bold" size={14} className="text-horizon" />
<h4 className="text-sm font-sans">
<h4 className="text-body font-sans">
{t('cascade.cascade.title', { count: plan.cascade.length })}
</h4>
</div>
@@ -176,7 +176,7 @@ export const CascadeConfirmDialog = ({
return (
<li
key={key}
className="border border-line rounded-sm px-3 py-2 text-2xs"
className="border border-line rounded-sm px-3 py-2 text-cell"
>
<div className="flex items-center gap-2 mb-1">
<span className="font-mono text-accent">
@@ -190,7 +190,7 @@ export const CascadeConfirmDialog = ({
</Badge>
<Badge variant="neutral">{entries.length}</Badge>
</div>
<ul className="text-2xs text-ink-2 ml-1 space-y-0.5">
<ul className="text-cell text-ink-2 ml-1 space-y-0.5">
{sample.map((e) => (
<li key={e.recordId} className="font-mono">
· {e.businessKey}
@@ -215,7 +215,7 @@ export const CascadeConfirmDialog = ({
variant="warning"
title={t('cascade.warnings.title', { count: plan.warnings.length })}
>
<p className="text-2xs">{t('cascade.warnings.note')}</p>
<p className="text-cell">{t('cascade.warnings.note')}</p>
</Alert>
)}
ordinis-admin-ui/src/components/lineage/DictionaryDependentsPanel.tsx
+3 -3
View File
@@ -37,10 +37,10 @@ export const DictionaryDependentsPanel = ({ dictionaryName }: Props) => {
return (
<Panel>
<div className="flex items-center justify-between mb-3">
<h3 className="text-sm font-sans text-ink">
<h3 className="text-body font-sans text-ink">
{t('lineage.usedBy.title')}
</h3>
<span className="text-2xs text-mute">
<span className="text-cell text-mute">
{t('lineage.usedBy.count', { count: data.length })}
</span>
</div>
@@ -48,7 +48,7 @@ export const DictionaryDependentsPanel = ({ dictionaryName }: Props) => {
{data.map((d) => (
<li
key={`${d.sourceDict}.${d.sourceField}`}
className="flex items-center gap-2 px-2.5 py-1.5 rounded-sm border border-line bg-white text-2xs"
className="flex items-center gap-2 px-2.5 py-1.5 rounded-sm border border-line bg-white text-cell"
>
<Link
to="/dictionaries/$name"
ordinis-admin-ui/src/components/lineage/DictionaryHubView.tsx
+6 -6
View File
@@ -85,7 +85,7 @@ const SectionLabel = ({
const { t } = useTranslation()
return (
<div
className={`text-2xs uppercase tracking-[0.10em] text-mute mb-2 ${
className={`text-cap text-mute mb-2 ${
side === 'left' ? 'text-right' : 'text-left'
}`}
>
@@ -141,7 +141,7 @@ export function DictionaryHubView({ detail }: { detail: DictionaryDetail }) {
<div className="md:order-1 order-2 space-y-2">
<SectionLabel side="left" count={outgoingDicts.length} />
{outgoingDicts.length === 0 ? (
<div className="text-2xs text-mute/70 text-right italic">
<div className="text-cell text-mute/70 text-right italic">
{t('hub.noOutgoing', { defaultValue: 'нет исходящих ссылок' })}
</div>
) : (
@@ -166,14 +166,14 @@ export function DictionaryHubView({ detail }: { detail: DictionaryDetail }) {
{t('dict.list.approval', { defaultValue: 'approval' })}
</Badge>
)}
<span className="ml-auto font-mono text-[11px] text-mute">
<span className="text-mono ml-auto text-mute">
v{detail.schemaVersion}
</span>
</div>
<h2 className="font-sans text-[22px] font-semibold text-accent leading-tight">
<h2 className="text-title-xl font-sans text-accent leading-tight">
{detail.displayName ?? detail.name}
</h2>
<div className="font-mono text-[11px] text-mute mt-0.5">
<div className="text-mono text-mute mt-0.5">
{detail.name}
</div>
{detail.description && (
@@ -197,7 +197,7 @@ export function DictionaryHubView({ detail }: { detail: DictionaryDetail }) {
<div className="md:order-3 order-3 space-y-2">
<SectionLabel side="right" count={incomingDicts.length} />
{incomingDicts.length === 0 ? (
<div className="text-2xs text-mute/70 italic">
<div className="text-cell text-mute/70 italic">
{t('hub.noIncoming', { defaultValue: 'никто не ссылается' })}
</div>
) : (
ordinis-admin-ui/src/components/lineage/RecordDependentsPanel.tsx
+6 -6
View File
@@ -68,19 +68,19 @@ export const RecordDependentsPanel = ({ dictionaryName, businessKey }: Props) =>
return (
<section className="space-y-3">
<div className="flex items-center justify-between">
<h3 className="text-sm font-sans text-ink">
<h3 className="text-body font-sans text-ink">
{t('lineage.refs.title')}
</h3>
<div className="flex items-center gap-2">
{stale !== null && stale >= 2 && (
<span
className="text-2xs text-mute px-2 py-0.5 rounded-sm border border-line"
className="text-cell text-mute px-2 py-0.5 rounded-sm border border-line"
title={t('lineage.refs.staleHint')}
>
{t('lineage.refs.stale', { minutes: stale })}
</span>
)}
<span className="text-2xs text-mute">
<span className="text-cell text-mute">
{t('lineage.refs.total', { count: data.total })}
</span>
</div>
@@ -91,7 +91,7 @@ export const RecordDependentsPanel = ({ dictionaryName, businessKey }: Props) =>
{data.perSource.map((s) => (
<li
key={`${s.sourceDict}.${s.sourceField}`}
className="flex items-center gap-1.5 px-2 py-1 rounded-sm border border-line bg-line/30 text-2xs"
className="flex items-center gap-1.5 px-2 py-1 rounded-sm border border-line bg-line/30 text-cell"
>
<Link
to="/dictionaries/$name"
@@ -115,7 +115,7 @@ export const RecordDependentsPanel = ({ dictionaryName, businessKey }: Props) =>
{data.items.map((r) => (
<li
key={r.id}
className="flex items-center justify-between gap-3 px-3 py-2 text-2xs"
className="flex items-center justify-between gap-3 px-3 py-2 text-cell"
>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
@@ -152,7 +152,7 @@ export const RecordDependentsPanel = ({ dictionaryName, businessKey }: Props) =>
{/* Pagination */}
{totalPages > 1 && (
<div className="flex items-center justify-between text-2xs">
<div className="flex items-center justify-between text-cell">
<Button
variant="secondary"
size="sm"
ordinis-admin-ui/src/components/record/RecordHistoryDrawer.tsx
+5 -5
View File
@@ -40,7 +40,7 @@ export const RecordHistoryDrawer = ({ open, onClose, dictionaryName, businessKey
</Alert>
)}
{data && data.length === 0 && (
<p className="text-sm text-mute">{t('history.empty')}</p>
<p className="text-body text-mute">{t('history.empty')}</p>
)}
{data && data.length > 0 && (
<ol className="relative border-l-2 border-line pl-5 space-y-4">
@@ -74,7 +74,7 @@ export const RecordHistoryDrawer = ({ open, onClose, dictionaryName, businessKey
}`}
/>
<div className="flex items-center gap-2 mb-1">
<span className="text-sm font-sans text-accent">v{displayVersion}</span>
<span className="text-body font-sans text-accent">v{displayVersion}</span>
{isLatest && status === 'active' && (
<Badge variant="primary">{t('history.current')}</Badge>
)}
@@ -84,7 +84,7 @@ export const RecordHistoryDrawer = ({ open, onClose, dictionaryName, businessKey
<Badge variant="success">{t('history.active')}</Badge>
)}
</div>
<div className="text-2xs text-ink-2 space-y-0.5">
<div className="text-cell text-ink-2 space-y-0.5">
<div>
<span className="font-mono">{t('history.validFrom')}:</span>{' '}
{new Date(rec.validFrom).toLocaleString()}
@@ -102,10 +102,10 @@ export const RecordHistoryDrawer = ({ open, onClose, dictionaryName, businessKey
)}
</div>
<details className="mt-2">
<summary className="text-2xs text-accent cursor-pointer hover:underline">
<summary className="text-cell text-accent cursor-pointer hover:underline">
{t('history.viewData')}
</summary>
<pre className="mt-1 bg-line/30 rounded p-2 text-2xs font-mono overflow-x-auto">
<pre className="text-mono mt-1 bg-line/30 rounded p-2 overflow-x-auto">
{JSON.stringify(rec.data, null, 2)}
</pre>
</details>
ordinis-admin-ui/src/components/schema/DictionaryEditorDialog.tsx
+9 -9
View File
@@ -308,10 +308,10 @@ export const DictionaryEditorDialog = ({ open, mode, onClose, onSuccess }: Props
className="mt-0.5 size-4 accent-ultramarain"
/>
<span className="flex-1">
<span className="block text-sm font-sans text-ink">
<span className="block text-body font-sans text-ink">
{t('schema.redisProjection.label')}
</span>
<span className="block text-2xs text-mute mt-0.5">
<span className="block text-cell text-mute mt-0.5">
{t('schema.redisProjection.hint')}
</span>
</span>
@@ -328,10 +328,10 @@ export const DictionaryEditorDialog = ({ open, mode, onClose, onSuccess }: Props
className="mt-0.5 size-4 accent-orbit"
/>
<span className="flex-1">
<span className="block text-sm font-sans text-ink">
<span className="block text-body font-sans text-ink">
{t('schema.approvalRequired.label')}
</span>
<span className="block text-2xs text-mute mt-0.5">
<span className="block text-cell text-mute mt-0.5">
{t('schema.approvalRequired.hint')}
</span>
</span>
@@ -351,7 +351,7 @@ export const DictionaryEditorDialog = ({ open, mode, onClose, onSuccess }: Props
onChange={(e) => setApprovalMinRole(e.target.value)}
placeholder="ordinis:internal"
/>
<p className="text-2xs text-mute mt-0.5">
<p className="text-cell text-mute mt-0.5">
{t('schema.approvalMinRole.hint')}
</p>
</div>
@@ -364,7 +364,7 @@ export const DictionaryEditorDialog = ({ open, mode, onClose, onSuccess }: Props
</div>
<div className={activeTab === 'preview' ? 'block' : 'hidden'}>
<pre className="bg-line/30 rounded p-3 text-2xs font-mono overflow-x-auto whitespace-pre-wrap">
<pre className="text-mono bg-line/30 rounded p-3 overflow-x-auto whitespace-pre-wrap">
{JSON.stringify(schemaJson, null, 2)}
</pre>
</div>
@@ -384,8 +384,8 @@ export const DictionaryEditorDialog = ({ open, mode, onClose, onSuccess }: Props
{isEdit && breaking && (
<Alert variant="error" title={t('schema.diff.blockedTitle')}>
<div className="space-y-2">
<p className="text-sm">{t('schema.diff.blockedBody')}</p>
<ul className="list-disc pl-5 text-sm space-y-0.5">
<p className="text-body">{t('schema.diff.blockedBody')}</p>
<ul className="list-disc pl-5 text-body space-y-0.5">
{changes
.filter((c) => c.severity === 'breaking')
.map((c, i) => (
@@ -400,7 +400,7 @@ export const DictionaryEditorDialog = ({ open, mode, onClose, onSuccess }: Props
{isEdit && !breaking && changes.length > 0 && (
<Alert variant="info" title={t('schema.diff.compatibleTitle')}>
<ul className="list-disc pl-5 text-sm space-y-0.5">
<ul className="list-disc pl-5 text-body space-y-0.5">
{changes.map((c, i) => (
<li key={i}>
<span className="font-mono">{c.field}</span> — {c.reason}
ordinis-admin-ui/src/components/schema/EventsPreviewTab.tsx
+6 -6
View File
@@ -47,7 +47,7 @@ export const EventsPreviewTab = ({
return (
<div className="space-y-3">
<p className="text-sm text-ink-2">
<p className="text-body text-ink-2">
{t('schema.events.intro')}
</p>
@@ -57,18 +57,18 @@ export const EventsPreviewTab = ({
<div className="space-y-2">
<div className="flex items-center gap-2 flex-wrap">
<Badge variant="info">{current.eventType}</Badge>
<span className="text-2xs text-ink-2">
<span className="text-cell text-ink-2">
{t('schema.events.topic')}:
</span>
<code className="text-2xs font-mono text-accent">
<code className="text-mono text-accent">
{current.topic}
</code>
</div>
<p className="text-2xs text-mute">{current.description}</p>
<pre className="bg-line/30 rounded p-3 text-2xs font-mono overflow-x-auto whitespace-pre-wrap">
<p className="text-cell text-mute">{current.description}</p>
<pre className="text-mono bg-line/30 rounded p-3 overflow-x-auto whitespace-pre-wrap">
{JSON.stringify(current.envelope, null, 2)}
</pre>
<p className="text-2xs text-mute">
<p className="text-cell text-mute">
{t('schema.events.disclaimer')}
</p>
</div>
ordinis-admin-ui/src/components/schema/PropertyEditor.tsx
+3 -3
View File
@@ -118,14 +118,14 @@ export const PropertyEditor = ({
/>
{prop.kind === 'opaque' && (
<div className="bg-amber-50 border border-amber-200 rounded-md p-3 text-2xs space-y-2">
<div className="bg-amber-50 border border-amber-200 rounded-md p-3 text-cell space-y-2">
<div className="font-medium text-ink">
{t('schema.opaque.title')}
</div>
<div className="text-ink-2">
{t('schema.opaque.hint')}
</div>
<pre className="font-mono text-2xs bg-white border border-line rounded p-2 overflow-auto max-h-40">
<pre className="text-mono bg-white border border-line rounded p-2 overflow-auto max-h-40">
{JSON.stringify(prop.rawSchema ?? {}, null, 2)}
</pre>
</div>
@@ -285,7 +285,7 @@ const ReferenceTargetPicker = ({ value, onChange }: ReferenceTargetPickerProps)
/>
</div>
{!isValid && (
<div className="text-2xs text-mars">{t('schema.reference.required')}</div>
<div className="text-cell text-mars">{t('schema.reference.required')}</div>
)}
</div>
)
ordinis-admin-ui/src/components/timetravel/TimeTravelPicker.tsx
+11 -11
View File
@@ -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')}
ordinis-admin-ui/src/components/version/UpdateBanner.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ export function UpdateBanner() {
aria-live="polite"
className="bg-accent text-on-accent"
>
<div className="max-w-6xl mx-auto px-4 sm:px-6 py-2 flex items-center gap-3 flex-wrap text-sm">
<div className="max-w-6xl mx-auto px-4 sm:px-6 py-2 flex items-center gap-3 flex-wrap text-body">
<ArrowClockwise size={18} weight="bold" className="shrink-0" aria-hidden />
<span className="flex-1 min-w-0">{message}</span>
<div className="flex items-center gap-2 ml-auto">
ordinis-admin-ui/src/components/version/VersionBadge.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export function VersionBadge() {
return (
<span
className="inline-flex items-center gap-1.5 text-xs text-mute font-mono select-none"
className="inline-flex items-center gap-1.5 text-mono text-mute select-none"
title={tooltip}
>
{updateAvailable && (
ordinis-admin-ui/src/routes/audit.tsx
+9 -9
View File
@@ -308,7 +308,7 @@ function ActiveFilterChips({ filters, onRemove }: ActiveFilterChipsProps) {
type="button"
onClick={() => onRemove(f.key)}
className={[
'inline-flex items-center gap-1.5 px-2 py-1 rounded-sm border text-2xs',
'inline-flex items-center gap-1.5 px-2 py-1 rounded-sm border text-cell',
'bg-white border-line hover:border-carbon/40 hover:bg-line/30',
'transition-colors group',
].join(' ')}
@@ -469,7 +469,7 @@ function AuditRow({ row }: { row: AuditEntry }) {
<>
<TableRow>
<TableCell>
<span className="text-2xs tabular-nums">{timeLabel}</span>
<span className="text-cell tabular-nums">{timeLabel}</span>
</TableCell>
<TableCell>
<Badge variant={actionVariant}>
@@ -478,7 +478,7 @@ function AuditRow({ row }: { row: AuditEntry }) {
</TableCell>
<TableCell>{row.dictionaryName ?? '—'}</TableCell>
<TableCell>
<span className="font-mono text-xs">{row.businessKey ?? '—'}</span>
<span className=" text-mono">{row.businessKey ?? '—'}</span>
</TableCell>
<TableCell>{row.userId ?? 'anonymous'}</TableCell>
<TableCell>
@@ -486,7 +486,7 @@ function AuditRow({ row }: { row: AuditEntry }) {
</TableCell>
<TableCell>
<span
className="font-mono text-2xs text-ink-2"
className="text-mono text-ink-2"
title={row.traceId ?? ''}
>
{row.traceId ? row.traceId.slice(0, 8) : '—'}
@@ -509,7 +509,7 @@ function AuditRow({ row }: { row: AuditEntry }) {
<div className="text-cap text-ink-2 mb-1">
{t('audit.diff.before')}
</div>
<pre className="text-2xs font-mono whitespace-pre-wrap break-all bg-white border border-line rounded p-2 max-h-60 overflow-auto">
<pre className="text-mono whitespace-pre-wrap break-all bg-white border border-line rounded p-2 max-h-60 overflow-auto">
{row.payloadBefore
? JSON.stringify(row.payloadBefore, null, 2)
: '—'}
@@ -519,14 +519,14 @@ function AuditRow({ row }: { row: AuditEntry }) {
<div className="text-cap text-ink-2 mb-1">
{t('audit.diff.after')}
</div>
<pre className="text-2xs font-mono whitespace-pre-wrap break-all bg-white border border-line rounded p-2 max-h-60 overflow-auto">
<pre className="text-mono whitespace-pre-wrap break-all bg-white border border-line rounded p-2 max-h-60 overflow-auto">
{row.payloadAfter
? JSON.stringify(row.payloadAfter, null, 2)
: '—'}
</pre>
</div>
{(row.ipAddress || row.userAgent || row.requestId) && (
<div className="md:col-span-2 text-2xs text-ink-2 flex flex-wrap gap-x-4 gap-y-1 pt-1">
<div className="md:col-span-2 text-cell text-ink-2 flex flex-wrap gap-x-4 gap-y-1 pt-1">
{row.ipAddress && <span>IP: {row.ipAddress}</span>}
{row.requestId && <span>req: {row.requestId}</span>}
{row.userAgent && (
@@ -562,7 +562,7 @@ function Pagination({
const { t } = useTranslation()
return (
<div className="flex items-center justify-between flex-wrap gap-3">
<div className="flex items-center gap-2 text-sm">
<div className="flex items-center gap-2 text-body">
<span className="text-ink-2">{t('audit.page.size')}</span>
<SingleSelect
options={PAGE_SIZE_OPTIONS}
@@ -570,7 +570,7 @@ function Pagination({
onChange={(id) => onSizeChange(Number(id))}
/>
</div>
<div className="flex items-center gap-3 text-sm">
<div className="flex items-center gap-3 text-body">
<Button
type="button"
variant="secondary"
ordinis-admin-ui/src/routes/dictionaries.$name.tsx
+33 -33
View File
@@ -506,7 +506,7 @@ function DictionaryDetail() {
)}
<PageHeader
breadcrumb={
<div className="flex items-center gap-3 text-sm">
<div className="flex items-center gap-3 text-body">
<Link to="/dictionaries" className="text-ink-2 hover:text-accent">
← {t('nav.dictionaries')}
</Link>
@@ -630,8 +630,8 @@ function DictionaryDetail() {
)}
{aoi && (
<div className="flex items-center gap-3 px-3 py-2 rounded-sm border border-accent/30 bg-accent/4 text-sm">
<span className="font-mono text-xs text-ink">
<div className="flex items-center gap-3 px-3 py-2 rounded-sm border border-accent/30 bg-accent/4 text-body">
<span className=" text-mono text-ink">
{aoi.kind === 'bbox'
? t('aoi.activeBbox', { value: aoi.bboxCsv })
: t('aoi.activePolygon', {
@@ -640,7 +640,7 @@ function DictionaryDetail() {
</span>
<button
type="button"
className="text-xs text-accent hover:underline"
className="text-cell text-accent hover:underline"
onClick={handleAoiClear}
>
{t('aoi.clear')}
@@ -667,16 +667,16 @@ function DictionaryDetail() {
{/* Active state — ambient banner если ?at= задан, даже если picker закрыт. */}
{timeTravelAt && !timeTravelOpen && (
<div className="flex items-center gap-3 px-3 py-2 rounded-sm border border-warn bg-warn-bg text-sm">
<div className="flex items-center gap-3 px-3 py-2 rounded-sm border border-warn bg-warn-bg text-body">
<ClockCounterClockwiseIcon weight="bold" size={16} className="text-warn shrink-0" />
<span className="font-mono text-xs text-ink">
<span className=" text-mono text-ink">
{t('timeTravel.viewing', {
date: new Date(timeTravelAt).toLocaleString(),
})}
</span>
<button
type="button"
className="text-xs text-accent hover:underline ml-auto"
className="text-cell text-accent hover:underline ml-auto"
onClick={() => setTimeTravelAt(undefined)}
>
{t('timeTravel.clear')}
@@ -717,7 +717,7 @@ function DictionaryDetail() {
onClick={() => toggleScope(s)}
aria-pressed={active}
className={[
'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-sm border text-2xs uppercase tracking-[0.10em] font-display transition-colors',
'text-cap inline-flex items-center gap-1.5 px-2.5 py-1 rounded-sm border transition-colors',
active
? 'border-accent bg-accent/8 text-accent'
: 'border-line bg-white text-ink-2 hover:border-carbon/40',
@@ -733,7 +733,7 @@ function DictionaryDetail() {
})}
</div>
{filtersActive && (
<div className="flex items-center gap-2 text-xs text-ink-2">
<div className="flex items-center gap-2 text-cell text-ink-2">
<span>
{t('dict.filter.matched', { count: filteredCount, total: totalRecords })}
</span>
@@ -800,7 +800,7 @@ function DictionaryDetail() {
)}
<TableCell>
<div className="flex items-center gap-1.5">
<span className="font-mono text-2xs">{r.businessKey}</span>
<span className="text-mono">{r.businessKey}</span>
{pendingByKey.has(r.businessKey) ? (
<span title={t('dict.pendingReview.tooltip')}>
<Badge variant="warning">{t('dict.pendingReview.label')}</Badge>
@@ -819,7 +819,7 @@ function DictionaryDetail() {
if (v == null || v === '') {
return (
<TableCell key={c.key}>
<span className="text-2xs text-mute/70">—</span>
<span className="text-cell text-mute/70">—</span>
</TableCell>
)
}
@@ -828,7 +828,7 @@ function DictionaryDetail() {
<TableCell key={c.key}>
<span
className={[
'inline-block px-1.5 py-0.5 rounded-sm font-mono text-2xs',
'inline-block px-1.5 py-0.5 rounded-sm font-mono text-cell',
c.isFk
? 'bg-accent/8 text-accent'
: 'bg-carbon/8 text-ink',
@@ -843,7 +843,7 @@ function DictionaryDetail() {
<Badge variant="info">{r.dataScope}</Badge>
</TableCell>
<TableCell>
<span className="text-2xs text-mute">
<span className="text-cell text-mute">
{new Date(r.validFrom).toLocaleDateString()}
</span>
</TableCell>
@@ -970,7 +970,7 @@ function DictionaryDetail() {
>
{edit.kind === 'close-confirm' && (
<div className="space-y-4">
<p className="text-sm text-ink">
<p className="text-body text-ink">
{t('dict.confirmClose.body', { key: edit.record.businessKey })}
</p>
<TextInput
@@ -1093,13 +1093,13 @@ function BulkSelectionToolbar({
].join(' ')}
>
<div className="flex items-center gap-3">
<span className="text-sm font-medium tabular-nums">
<span className="text-body font-medium tabular-nums">
{t('dict.bulk.selectedCount', { count, total: totalVisible })}
</span>
<button
type="button"
onClick={onClear}
className="inline-flex items-center gap-1 text-2xs underline-offset-2 hover:underline opacity-80 hover:opacity-100"
className="inline-flex items-center gap-1 text-cell underline-offset-2 hover:underline opacity-80 hover:opacity-100"
>
<XIcon size={12} weight="bold" />
{t('dict.bulk.clearSelection')}
@@ -1150,10 +1150,10 @@ function RecordsPagination({
const to = Math.min((page + 1) * pageSize, totalCount)
return (
<div className="flex items-center justify-between flex-wrap gap-3 px-2">
<span className="text-2xs text-ink-2 tabular-nums">
<span className="text-cell text-ink-2 tabular-nums">
{t('dict.page.range', { from, to, total: totalCount })}
</span>
<div className="flex items-center gap-3 text-sm">
<div className="flex items-center gap-3 text-body">
<Button
type="button"
variant="secondary"
@@ -1163,7 +1163,7 @@ function RecordsPagination({
>
{t('dict.page.prev')}
</Button>
<span className="tabular-nums text-2xs text-ink-2">
<span className="tabular-nums text-cell text-ink-2">
{t('dict.page.of', { cur: page + 1, total: totalPages })}
</span>
<Button
@@ -1209,19 +1209,19 @@ function BulkCloseDialog({
<div className="space-y-4">
<div className="space-y-2">
{result.closed.length > 0 && (
<div className="flex items-center gap-2 text-sm text-soyuz-green">
<div className="flex items-center gap-2 text-body text-soyuz-green">
<CheckCircleIcon size={18} weight="fill" />
<span>{t('dict.bulk.resultClosed', { count: result.closed.length })}</span>
</div>
)}
{result.skipped.length > 0 && (
<div className="flex items-center gap-2 text-sm text-saturn">
<div className="flex items-center gap-2 text-body text-saturn">
<WarningIcon size={18} weight="fill" />
<span>{t('dict.bulk.resultSkipped', { count: result.skipped.length })}</span>
</div>
)}
{result.errors.length > 0 && (
<div className="flex items-center gap-2 text-sm text-mars">
<div className="flex items-center gap-2 text-body text-mars">
<XCircleIcon size={18} weight="fill" />
<span>{t('dict.bulk.resultErrors', { count: result.errors.length })}</span>
</div>
@@ -1230,7 +1230,7 @@ function BulkCloseDialog({
{(result.skipped.length > 0 || result.errors.length > 0) && (
<div className="border border-line rounded p-3 max-h-48 overflow-auto bg-line/30">
<ul className="text-2xs font-mono space-y-1">
<ul className="text-mono space-y-1">
{result.skipped.map((s) => (
<li key={`s-${s.businessKey}`} className="text-saturn">
· {s.businessKey} — {s.reason}
@@ -1256,7 +1256,7 @@ function BulkCloseDialog({
return (
<div className="space-y-4">
<p className="text-sm text-ink">{t('dict.bulk.confirmBody', { count })}</p>
<p className="text-body text-ink">{t('dict.bulk.confirmBody', { count })}</p>
<TextInput
label={t('dict.confirmClose.reason')}
placeholder={t('dict.confirmClose.reasonPlaceholder')}
@@ -1361,7 +1361,7 @@ function EditorTabBar({
onClick={() => onChange(tab.id)}
aria-pressed={isActive}
className={[
'px-3.5 h-10 text-sm transition-colors -mb-px border-b-2',
'px-3.5 h-10 text-body transition-colors -mb-px border-b-2',
isActive
? 'border-accent text-ink font-semibold'
: 'border-transparent text-ink-2 hover:text-ink',
@@ -1382,14 +1382,14 @@ function FieldsTabContent({ detail }: { detail: { schemaJson: import('@/api/clie
const entries = Object.entries(props)
if (entries.length === 0) {
return (
<div className="text-sm text-mute py-8 text-center">
<div className="text-body text-mute py-8 text-center">
Schema без properties.
</div>
)
}
return (
<div className="rounded-lg border border-line overflow-hidden">
<table className="w-full text-sm">
<table className="w-full text-body">
<thead className="text-cap bg-surface-2 font-display text-mute">
<tr>
<th className="text-left px-3 py-2">name</th>
@@ -1404,15 +1404,15 @@ function FieldsTabContent({ detail }: { detail: { schemaJson: import('@/api/clie
<tbody>
{entries.map(([key, prop]) => (
<tr key={key} className="border-t border-line-2 hover:bg-surface-2/50">
<td className="px-3 py-1.5 font-mono text-[12.5px]">{key}</td>
<td className="text-cell px-3 py-1.5 font-mono">{key}</td>
<td className="px-3 py-1.5 text-ink-2">{prop.type ?? '—'}</td>
<td className="px-3 py-1.5">{required.has(key) ? '✓' : ''}</td>
<td className="px-3 py-1.5">{prop['x-unique'] ? '✓' : ''}</td>
<td className="px-3 py-1.5">{prop['x-localized'] ? '✓' : ''}</td>
<td className="px-3 py-1.5 font-mono text-[11px] text-accent">
<td className="text-mono px-3 py-1.5 text-accent">
{prop['x-references'] ?? ''}
</td>
<td className="px-3 py-1.5 text-ink-2 text-xs max-w-[300px] truncate">
<td className="px-3 py-1.5 text-ink-2 text-cell max-w-[300px] truncate">
{prop.description ?? ''}
</td>
</tr>
@@ -1437,13 +1437,13 @@ function JsonTabContent({ detail }: { detail: { schemaJson: import('@/api/client
function EventsTabContent({ dictName }: { dictName: string }) {
return (
<div className="rounded-lg border border-line bg-surface p-6 text-center space-y-3">
<p className="text-sm text-ink-2">
<p className="text-body text-ink-2">
События для справочника <span className="font-mono">{dictName}</span> — в общем аудит-логе.
</p>
<Link
to="/audit"
search={{ dict: dictName }}
className="inline-flex items-center gap-1 text-accent hover:underline text-sm"
className="inline-flex items-center gap-1 text-accent hover:underline text-body"
>
Открыть /audit с фильтром →
</Link>
@@ -1454,7 +1454,7 @@ function EventsTabContent({ dictName }: { dictName: string }) {
/** History tab — placeholder (Stage 3.x followup, требует backend changelog endpoint). */
function HistoryTabContent() {
return (
<div className="rounded-lg border border-dashed border-line bg-surface-2/30 p-8 text-center text-sm text-mute">
<div className="rounded-lg border border-dashed border-line bg-surface-2/30 p-8 text-center text-body text-mute">
Timeline изменений справочника — скоро. Требует backend endpoint для schema versions.
</div>
)
ordinis-admin-ui/src/routes/dictionaries.index.tsx
+10 -10
View File
@@ -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' && (
ordinis-admin-ui/src/routes/my-drafts.tsx
+7 -7
View File
@@ -82,7 +82,7 @@ function MyDraftsPage() {
{drafts.data && drafts.data.totalElements > 0 && (
<Panel>
<div className="flex items-center justify-between mb-3">
<p className="text-2xs text-mute">
<p className="text-cell text-mute">
{t('myDrafts.total', { count: drafts.data.totalElements })}
</p>
</div>
@@ -102,25 +102,25 @@ function MyDraftsPage() {
<TableBody>
{drafts.data.items.map((d) => (
<TableRow key={d.id}>
<TableCell className="font-mono text-2xs">{d.businessKey}</TableCell>
<TableCell className="text-mono">{d.businessKey}</TableCell>
<TableCell>
<Badge variant={operationVariant(d.operation)}>{d.operation}</Badge>
</TableCell>
<TableCell>
<Badge variant={statusVariant(d.status)}>{d.status}</Badge>
</TableCell>
<TableCell className="text-2xs text-ink-2">
<TableCell className="text-cell text-ink-2">
{new Date(d.submittedAt).toLocaleString()}
</TableCell>
<TableCell className="text-2xs text-ink-2">
<TableCell className="text-cell text-ink-2">
{d.reviewedAt
? new Date(d.reviewedAt).toLocaleString()
: '—'}
</TableCell>
<TableCell className="font-mono text-2xs">
<TableCell className="text-mono">
{d.reviewerId ?? '—'}
</TableCell>
<TableCell className="text-2xs text-ink max-w-md">
<TableCell className="text-cell text-ink max-w-md">
{d.reviewComment ?? d.makerComment ?? '—'}
</TableCell>
<TableCell>
@@ -134,7 +134,7 @@ function MyDraftsPage() {
{t('myDrafts.action.withdraw')}
</Button>
) : (
<span className="text-2xs text-mute/70">—</span>
<span className="text-cell text-mute/70">—</span>
)}
</TableCell>
</TableRow>
ordinis-admin-ui/src/routes/outbox.tsx
+6 -6
View File
@@ -90,29 +90,29 @@ function OutboxPage() {
{dlq.data.content.map((row) => (
<TableRow key={row.id}>
<TableCell>
<span className="font-mono text-2xs">{row.id}</span>
<span className="text-mono">{row.id}</span>
</TableCell>
<TableCell>
<Badge variant="warning">{row.eventType}</Badge>
</TableCell>
<TableCell>{row.dictionaryName ?? '—'}</TableCell>
<TableCell>
<span className="font-mono text-2xs">{row.aggregateId}</span>
<span className="text-mono">{row.aggregateId}</span>
</TableCell>
<TableCell>
<span className="font-mono text-2xs">{row.kafkaTopic}</span>
<span className="text-mono">{row.kafkaTopic}</span>
</TableCell>
<TableCell>{row.attemptCount}</TableCell>
<TableCell>
<span
className="text-2xs text-ink-2 truncate max-w-md inline-block align-middle"
className="text-cell text-ink-2 truncate max-w-md inline-block align-middle"
title={row.lastError ?? ''}
>
{row.lastError ?? '—'}
</span>
</TableCell>
<TableCell>
<span className="text-2xs tabular-nums">
<span className="text-cell tabular-nums">
{new Date(row.dlqAt).toLocaleString()}
</span>
</TableCell>
@@ -120,7 +120,7 @@ function OutboxPage() {
))}
</TableBody>
</Table>
<div className="flex items-center justify-end gap-3 text-sm">
<div className="flex items-center justify-end gap-3 text-body">
<Button
type="button"
variant="secondary"
ordinis-admin-ui/src/routes/reviews.tsx
+13 -13
View File
@@ -160,7 +160,7 @@ function ReviewsPage() {
</Button>
}
>
<ul className="space-y-1 text-2xs">
<ul className="space-y-1 text-cell">
{bulkResult.approved.length > 0 && (
<li>
{t('reviews.bulk.approvedCount', { count: bulkResult.approved.length })}
@@ -196,7 +196,7 @@ function ReviewsPage() {
{queue.data && queue.data.totalElements > 0 && (
<Panel>
<div className="flex items-center justify-between mb-3 gap-3">
<p className="text-2xs text-mute">
<p className="text-cell text-mute">
{t('reviews.queueTotal', { count: queue.data.totalElements })}
{anySelected ? (
<span className="ml-2 text-accent font-medium">
@@ -264,17 +264,17 @@ function ReviewsPage() {
<Link
to="/dictionaries/$name"
params={{ name: d.dictionaryId }}
className="text-accent hover:underline font-mono text-2xs"
className="text-mono text-accent hover:underline"
>
{d.dictionaryId.slice(0, 8)}…
</Link>
</TableCell>
<TableCell className="font-mono text-2xs">{d.businessKey}</TableCell>
<TableCell className="text-mono">{d.businessKey}</TableCell>
<TableCell>
<Badge variant={operationVariant(d.operation)}>{d.operation}</Badge>
</TableCell>
<TableCell className="font-mono text-2xs">{d.makerId}</TableCell>
<TableCell className="text-2xs text-ink-2">
<TableCell className="text-mono">{d.makerId}</TableCell>
<TableCell className="text-cell text-ink-2">
{new Date(d.submittedAt).toLocaleString()}
</TableCell>
<TableCell>
@@ -304,7 +304,7 @@ function ReviewsPage() {
title={t('reviews.bulk.rejectModalTitle', { count: selection.size })}
>
<div className="space-y-3">
<p className="text-2xs text-ink-2">
<p className="text-cell text-ink-2">
{t('reviews.bulk.rejectModalDescription')}
</p>
<TextArea
@@ -400,7 +400,7 @@ function ReviewDrawer({ draftId, onClose }: DrawerProps) {
{draft && (
<>
<div className="flex flex-wrap items-center gap-2 text-2xs">
<div className="flex flex-wrap items-center gap-2 text-cell">
<Badge variant={operationVariant(draft.operation)}>{draft.operation}</Badge>
<span className="font-mono">{draft.businessKey}</span>
<span className="text-mute">
@@ -413,7 +413,7 @@ function ReviewDrawer({ draftId, onClose }: DrawerProps) {
</div>
{draft.makerComment && (
<div className="px-3 py-2 rounded-sm border border-line bg-line/30 text-2xs">
<div className="px-3 py-2 rounded-sm border border-line bg-line/30 text-cell">
<span className="text-mute uppercase tracking-[0.10em] font-display">
{t('reviews.drawer.makerComment')}:
</span>{' '}
@@ -428,12 +428,12 @@ function ReviewDrawer({ draftId, onClose }: DrawerProps) {
</p>
{liveQ.isLoading && <LoadingBlock size="sm" label={t('loading')} />}
{liveQ.data === null && (
<p className="text-2xs text-mute italic">
<p className="text-cell text-mute italic">
{t('reviews.drawer.noLive')}
</p>
)}
{liveQ.data && (
<pre className="bg-line/30 rounded p-2 text-2xs font-mono overflow-x-auto whitespace-pre-wrap">
<pre className="text-mono bg-line/30 rounded p-2 overflow-x-auto whitespace-pre-wrap">
{JSON.stringify(liveQ.data.data, null, 2)}
</pre>
)}
@@ -443,11 +443,11 @@ function ReviewDrawer({ draftId, onClose }: DrawerProps) {
{t('reviews.drawer.proposed')}
</p>
{draft.operation === 'CLOSE' ? (
<p className="text-2xs text-aurora italic">
<p className="text-cell text-aurora italic">
{t('reviews.drawer.closeNote')}
</p>
) : (
<pre className="bg-accent/4 rounded p-2 text-2xs font-mono overflow-x-auto whitespace-pre-wrap">
<pre className="text-mono bg-accent/4 rounded p-2 overflow-x-auto whitespace-pre-wrap">
{JSON.stringify(draft.data, null, 2)}
</pre>
)}
ordinis-admin-ui/src/routes/search.tsx
+5 -5
View File
@@ -70,7 +70,7 @@ function SearchPage() {
</form>
{tooShort && (
<p className="text-2xs text-mute">{t('search.tooShort')}</p>
<p className="text-cell text-mute">{t('search.tooShort')}</p>
)}
{hasQuery && result.isLoading && (
@@ -89,7 +89,7 @@ function SearchPage() {
{hasQuery && result.data && result.data.total > 0 && (
<>
<p className="text-2xs text-mute">
<p className="text-cell text-mute">
{t('search.totalHits', { count: result.data.total })}
</p>
<div className="space-y-3">
@@ -100,7 +100,7 @@ function SearchPage() {
to="/dictionaries/$name"
params={{ name: g.dictName }}
search={{ q: urlSearch.q }}
className="text-sm font-sans text-accent hover:underline"
className="text-body font-sans text-accent hover:underline"
>
{g.dictDisplayName ?? g.dictName}
</Link>
@@ -110,7 +110,7 @@ function SearchPage() {
{g.items.map((it) => (
<li
key={`${g.dictName}-${it.businessKey}`}
className="flex items-center justify-between gap-3 py-2 text-2xs"
className="flex items-center justify-between gap-3 py-2 text-cell"
>
<Link
to="/dictionaries/$name"
@@ -136,7 +136,7 @@ function SearchPage() {
)}
{!hasQuery && !tooShort && (
<p className="text-2xs text-mute">{t('search.intro')}</p>
<p className="text-cell text-mute">{t('search.intro')}</p>
)}
</div>
)
ordinis-admin-ui/src/routes/webhooks.$id.tsx
+21 -21
View File
@@ -115,7 +115,7 @@ function WebhookDetailPage() {
<div className="space-y-6">
<PageHeader
breadcrumb={
<Link to="/webhooks" className="text-sm text-ink-2 hover:text-accent">
<Link to="/webhooks" className="text-body text-ink-2 hover:text-accent">
← {t('nav.webhooks')}
</Link>
}
@@ -156,7 +156,7 @@ function WebhookDetailPage() {
<Panel>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 p-4">
<InfoRow label={t('webhooks.field.url')}>
<code className="font-mono text-2xs break-all">{data.url}</code>
<code className="text-mono break-all">{data.url}</code>
</InfoRow>
<InfoRow label={t('webhooks.col.status')}>
<Badge variant={data.active ? 'success' : 'neutral'}>
@@ -177,28 +177,28 @@ function WebhookDetailPage() {
))}
</div>
) : (
<span className="text-2xs text-mute">{t('webhooks.allScopes')}</span>
<span className="text-cell text-mute">{t('webhooks.allScopes')}</span>
)}
</InfoRow>
<InfoRow label={t('webhooks.field.dictionaryFilter')}>
<span className="text-2xs">
<span className="text-cell">
{data.dictionaryFilter && data.dictionaryFilter.length > 0
? data.dictionaryFilter.join(', ')
: t('webhooks.allDicts')}
</span>
</InfoRow>
<InfoRow label={t('webhooks.field.eventTypeFilter')}>
<span className="text-2xs">
<span className="text-cell">
{data.eventTypeFilter && data.eventTypeFilter.length > 0
? data.eventTypeFilter.join(', ')
: t('webhooks.allEvents')}
</span>
</InfoRow>
<InfoRow label="HMAC secret">
<code className="font-mono text-2xs">{data.hmacSecret}</code>
<code className="text-mono">{data.hmacSecret}</code>
</InfoRow>
<InfoRow label={t('webhooks.field.createdBy')}>
<span className="text-2xs">
<span className="text-cell">
{data.createdBy} · {new Date(data.createdAt).toLocaleString()}
</span>
</InfoRow>
@@ -207,7 +207,7 @@ function WebhookDetailPage() {
<div>
<div className="flex items-center justify-between mb-3">
<h2 className="font-sans text-base text-accent">
<h2 className="font-sans text-title-md text-accent">
{t('webhooks.deliveries.title')}
</h2>
<IconButton
@@ -232,7 +232,7 @@ function WebhookDetailPage() {
onClick={() => handleStatusToggle(s)}
aria-pressed={active}
className={[
'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-sm border text-2xs uppercase tracking-[0.10em] font-display transition-colors',
'text-cap inline-flex items-center gap-1.5 px-2.5 py-1 rounded-sm border transition-colors',
active
? 'border-accent bg-accent/8 text-accent'
: 'border-line bg-white text-ink-2 hover:border-carbon/40',
@@ -249,7 +249,7 @@ function WebhookDetailPage() {
setPage(0)
setStatusFilter(undefined)
}}
className="text-xs text-accent hover:underline ml-2"
className="text-cell text-accent hover:underline ml-2"
>
{t('webhooks.deliveries.filter.clear')}
</button>
@@ -282,7 +282,7 @@ function WebhookDetailPage() {
return (
<TableRow key={d.id}>
<TableCell>
<span className="font-mono text-2xs">{d.outboxEventId}</span>
<span className="text-mono">{d.outboxEventId}</span>
</TableCell>
<TableCell>
<Badge variant={STATUS_BADGE[d.status] ?? 'neutral'}>
@@ -290,22 +290,22 @@ function WebhookDetailPage() {
</Badge>
</TableCell>
<TableCell>
<span className="font-mono text-2xs">{d.attemptCount}</span>
<span className="text-mono">{d.attemptCount}</span>
</TableCell>
<TableCell>
<span className="text-2xs text-ink-2">
<span className="text-cell text-ink-2">
{d.lastAttemptAt
? new Date(d.lastAttemptAt).toLocaleString()
: '—'}
</span>
</TableCell>
<TableCell>
<span className="font-mono text-2xs">
<span className="text-mono">
{d.lastStatusCode ?? '—'}
</span>
</TableCell>
<TableCell>
<span className="text-2xs text-ink-2 line-clamp-2 max-w-md inline-block">
<span className="text-cell text-ink-2 line-clamp-2 max-w-md inline-block">
{d.lastError ?? '—'}
</span>
</TableCell>
@@ -337,7 +337,7 @@ function WebhookDetailPage() {
>
←
</Button>
<span className="text-sm text-ink-2 self-center">
<span className="text-body text-ink-2 self-center">
{page + 1} / {deliveries.data.totalPages}
</span>
<Button
@@ -384,14 +384,14 @@ function TestResultAlert({
action={
<button
type="button"
className="text-xs text-ink-2 hover:text-ink"
className="text-cell text-ink-2 hover:text-ink"
onClick={onDismiss}
>
✕
</button>
}
>
<div className="space-y-1 text-sm">
<div className="space-y-1 text-body">
{result.httpStatus != null && (
<div>
<span className="text-cap text-mute mr-2">
@@ -409,7 +409,7 @@ function TestResultAlert({
</div>
)}
{result.message && (
<div className="font-mono text-2xs text-ink whitespace-pre-wrap break-all">
<div className="text-mono text-ink whitespace-pre-wrap break-all">
{result.message}
</div>
)}
@@ -446,14 +446,14 @@ function RotateRevealModal({
className="bg-white rounded-lg p-6 max-w-xl w-full space-y-4"
onClick={(e) => e.stopPropagation()}
>
<h3 className="font-sans text-lg text-accent">
<h3 className="font-sans text-title-lg text-accent">
{t('webhooks.secret.rotatedTitle')}
</h3>
<Alert variant="warning" title={t('webhooks.secret.warningTitle')}>
{t('webhooks.secret.rotatedWarning')}
</Alert>
<div className="bg-carbon/5 border border-line rounded-md p-3">
<code className="font-mono text-2xs break-all">{secret}</code>
<code className="text-mono break-all">{secret}</code>
</div>
<div className="flex justify-end">
<Button variant="primary" onClick={onClose}>
ordinis-admin-ui/src/routes/webhooks.index.tsx
+5 -5
View File
@@ -118,7 +118,7 @@ function WebhooksPage() {
</Link>
</TableCell>
<TableCell>
<span className="font-mono text-2xs truncate max-w-xs inline-block align-middle">
<span className="text-mono truncate max-w-xs inline-block align-middle">
{sub.url}
</span>
</TableCell>
@@ -127,12 +127,12 @@ function WebhooksPage() {
</TableCell>
<TableCell>
{sub.dictionaryFilter && sub.dictionaryFilter.length > 0 ? (
<span className="text-2xs text-ink">
<span className="text-cell text-ink">
{sub.dictionaryFilter.slice(0, 3).join(', ')}
{sub.dictionaryFilter.length > 3 && ` +${sub.dictionaryFilter.length - 3}`}
</span>
) : (
<span className="text-2xs text-mute">{t('webhooks.allDicts')}</span>
<span className="text-cell text-mute">{t('webhooks.allDicts')}</span>
)}
</TableCell>
<TableCell>
@@ -175,7 +175,7 @@ function WebhooksPage() {
function ScopeChips({ scopes }: { scopes?: DataScope[] | null }) {
const { t } = useTranslation()
if (!scopes || scopes.length === 0) {
return <span className="text-2xs text-mute">{t('webhooks.allScopes')}</span>
return <span className="text-cell text-mute">{t('webhooks.allScopes')}</span>
}
return (
<div className="flex gap-1">
@@ -368,7 +368,7 @@ function SecretRevealModal({
{t('webhooks.secret.warning')}
</Alert>
<div className="bg-carbon/5 border border-line rounded-md p-3">
<code className="font-mono text-2xs break-all">{revealed.secret}</code>
<code className="text-mono break-all">{revealed.secret}</code>
</div>
<div className="flex justify-end gap-2">
<Button
ordinis-admin-ui/src/styles.css
+69 -15
View File
@@ -146,32 +146,86 @@
--font-mono: 'JetBrains Mono', 'SF Mono', monospace;
--font-display: 'Tektur', 'Inter', sans-serif;
/* Font sizes per design_handoff_ordinis_mdm/README.md spec.
* Override Tailwind defaults так чтобы существующие utility classes
* автоматически соответствовали handoff:
* text-sm : 13px (workhorse — body, buttons, tabs)
* text-xs : 12px (default, без изменений — secondary meta)
* text-2xs : 11px (custom — IDs, dates, table mono meta)
* Tektur caps 10.5px → используй .cap или text-cap utility (отдельно).
* Table cells 12.5px / page titles 17px / modal titles 22px — explicit
* через text-[Npx] arbitrary value по месту. */
/* Font scale.
*
* Наши собственные классы — семантические @utility ниже (text-body,
* text-cell, text-mono, text-title-*, text-cap). Каждая роль = место в UI.
*
* --text-sm: 13px — нужно потому что @nstart/ui dist внутри использует
* text-sm для buttons/inputs/forms (см. @source выше). Без этого override
* библиотечные компоненты ушли бы к Tailwind default 14px и разошлись с
* нашим handoff workhorse 13px. После Stage 3.9 (pnpm remove @nstart/ui)
* этот override можно убрать — наш код text-sm не использует.
*
* --text-2xs override НЕ нужен: убрали все usage в audit, text-2xs больше
* нигде не появляется. */
--text-sm: 13px;
--text-sm--line-height: 1.4;
--text-2xs: 11px;
--text-2xs--line-height: 1.35;
--text-sm--line-height: 1.45;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
}
/* Tektur caps utility — handoff 10.5px uppercase tracking 0.10em.
* Codemod target: replace `text-2xs uppercase tracking-[0.10em]` → `text-cap`. */
/* === Semantic typography utilities per design_handoff_ordinis_mdm/README.md ===
* Type system — 7 ролей, каждая соответствует месту в UI:
*
* text-title-xl — 22/600 modal title, section header (rare)
* 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
* text-cap — 10.5/600 Tektur UPPERCASE caption / section label
*
* Color и weight overrides поверх — добавлять отдельными utility classes
* (e.g. `text-body font-medium text-ink`). НЕ накладывать font-mono/
* font-display/uppercase/tracking — они baked в соответствующие utility. */
@utility text-title-xl {
font-size: 22px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
}
@utility text-title-lg {
font-size: 17px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.005em;
}
@utility text-title-md {
font-size: 15px;
font-weight: 600;
line-height: 1.3;
}
@utility text-body {
font-size: 13px;
font-weight: 400;
line-height: 1.45;
}
@utility text-cell {
font-size: 12.5px;
font-weight: 500;
line-height: 1.35;
}
@utility text-mono {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
line-height: 1.4;
}
@utility text-cap {
font-family: var(--font-display);
font-size: 10.5px;
line-height: 1;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.10em;
}
ordinis-admin-ui/src/ui/components/alert.tsx
+1 -1
View File
@@ -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: {
ordinis-admin-ui/src/ui/components/badge.tsx
+1 -1
View File
@@ -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: {
ordinis-admin-ui/src/ui/components/button.tsx
+2 -2
View File
@@ -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',
ordinis-admin-ui/src/ui/components/card.tsx
+2 -2
View File
@@ -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>>(
ordinis-admin-ui/src/ui/components/dialog.tsx
+2 -2
View File
@@ -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}
/>
)
ordinis-admin-ui/src/ui/components/dropdown-menu.tsx
+5 -5
View File
@@ -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}
/>
)
ordinis-admin-ui/src/ui/components/empty-state.tsx
+2 -2
View File
@@ -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>
ordinis-admin-ui/src/ui/components/input.tsx
+4 -4
View File
@@ -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>
)
ordinis-admin-ui/src/ui/components/label.tsx
+1 -1
View File
@@ -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,
)}
ordinis-admin-ui/src/ui/components/loading-block.tsx
+1 -1
View File
@@ -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>
)
}
ordinis-admin-ui/src/ui/components/page-header.tsx
+2 -2
View File
@@ -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>
ordinis-admin-ui/src/ui/components/popover.tsx
+1 -1
View File
@@ -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',
ordinis-admin-ui/src/ui/components/scope.tsx
+1 -1
View File
@@ -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,
)}
ordinis-admin-ui/src/ui/components/sheet.tsx
+2 -2
View File
@@ -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}
/>
)
ordinis-admin-ui/src/ui/components/tabs.tsx
+1 -1
View File
@@ -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',
ordinis-admin-ui/src/ui/components/textarea.tsx
+3 -3
View File
@@ -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>
)
ordinis-admin-ui/src/ui/components/toaster.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export function Toaster() {
},
classNames: {
title: 'font-medium',
description: 'text-mute text-xs',
description: 'text-mute text-cell',
},
}}
/>
ordinis-admin-ui/src/ui/components/tooltip.tsx
+1 -1
View File
@@ -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,