denozord/auth-portal
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity

fix(design-preview): правки по ревью — пороги, высоты вкладок, контраст фокуса, счётчик вкладок

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
This commit is contained in:
DenozordecandClaude Sonnet 5.5 committed 2026-10-18 14:57:22 +07:00
1 parent b82c8031c2
commit 700ad508d8
5 files changed
+15 -14
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/web/src/design-preview/bits.tsx
+1 -1
View File
@@ -434,7 +434,7 @@ export function PageTab({ value, label, count }: { value: string; label: string;
return (
<TabsTrigger value={value} className="gap-1.5 px-4 text-sm after:-bottom-px!">
{label}
{count !== undefined ? <em className="font-mono text-[10px] font-normal not-italic opacity-60">{count}</em> : null}
{count !== undefined ? <span className="text-muted-foreground font-mono text-xs font-normal">{count}</span> : null}
</TabsTrigger>
)
}
apps/web/src/design-preview/design-preview.css
+3 -2
View File
@@ -77,7 +77,7 @@ html[data-preview-density][data-preview-contrast='high'] {
--border: color-mix(in oklch, var(--foreground) 55%, transparent);
--input: color-mix(in oklch, var(--foreground) 60%, transparent);
--muted-foreground: color-mix(in oklch, var(--foreground) 88%, transparent);
--ring: oklch(0.85 0.17 95);
--ring: oklch(0.35 0.2 264);
}
html[data-preview-density].dark[data-preview-contrast='high'] {
@@ -127,7 +127,8 @@ html[data-preview-density] #main-content :focus-visible {
}
/* Шапка таблицы как на досках: 12px, лёгкая подложка. */
html[data-preview-density] [data-slot='data-grid-table'] thead th {
html[data-preview-density] [data-slot='data-grid-table'] thead th,
html[data-preview-density] [data-slot='data-grid-table'] thead th :is(span, button, div) {
font-size: 0.75rem;
background: color-mix(in oklch, var(--muted) 30%, transparent);
}
apps/web/src/design-preview/kpi-strip.tsx
+3 -3
View File
@@ -15,8 +15,8 @@ const VALUE: Record<KpiTone, string> = {
const COLS: Record<number, string> = {
1: 'grid-cols-1',
2: 'grid-cols-2 max-[640px]:grid-cols-1',
3: 'grid-cols-1 min-[1241px]:grid-cols-3',
4: 'grid-cols-1 min-[641px]:grid-cols-2 min-[1241px]:grid-cols-4',
3: 'grid-cols-1 min-[1240px]:grid-cols-3',
4: 'grid-cols-1 min-[640px]:grid-cols-2 min-[1240px]:grid-cols-4',
}
const GLYPH: Record<KpiTone, string> = { neutral: '', ok: '●', in: '', wn: '▲', er: '✕' }
@@ -35,7 +35,7 @@ const BADGE = {
*/
export function KpiStrip({ items, 'aria-label': ariaLabel }: { items: KpiItem[]; 'aria-label'?: string }) {
return (
<Frame spacing="sm" className="@container w-full min-w-0" aria-label={ariaLabel}>
<Frame spacing="sm" className="w-full min-w-0" aria-label={ariaLabel}>
<FramePanel className="overflow-hidden p-0">
<div className={cn('bg-border grid gap-px', COLS[Math.min(Math.max(items.length, 1), 4)])}>
{items.map((k) => (
apps/web/src/design-preview/preview-chrome.tsx
+5 -5
View File
@@ -349,17 +349,17 @@ function MonitorPopover() {
}
>
<ActivityIcon className="text-warning size-4" aria-hidden />
<span className="text-warning hidden text-sm font-medium min-[1001px]:inline">Внимание</span>
<span className="hidden items-center gap-1.5 text-sm tabular-nums min-[1241px]:inline-flex">
<span className="text-warning hidden text-sm font-medium min-[1000px]:inline">Внимание</span>
<span className="hidden items-center gap-1.5 text-sm tabular-nums min-[1240px]:inline-flex">
<span className="bg-destructive size-1.5 rounded-full" aria-hidden />
{errors}
<span className="bg-warning size-1.5 rounded-full" aria-hidden />
{warnings}
</span>
<span className="bg-destructive hidden size-4.5 min-w-4.5 items-center justify-center rounded-full px-1 text-[11px] font-semibold text-white min-[761px]:inline-flex min-[1241px]:hidden">
<span className="bg-destructive hidden size-4.5 min-w-4.5 items-center justify-center rounded-full px-1 text-[11px] font-semibold text-white min-[760px]:inline-flex min-[1240px]:hidden">
{bad.length}
</span>
<span className="bg-destructive ring-background absolute top-1 right-1 size-2 rounded-full ring-2 min-[761px]:hidden" aria-hidden />
<span className="bg-destructive ring-background absolute top-1 right-1 size-2 rounded-full ring-2 min-[760px]:hidden" aria-hidden />
</PopoverTrigger>
<PopoverContent align="end" className="flex w-[22rem] max-w-[calc(100vw-1.5rem)] flex-col gap-2 p-2">
<div className="flex items-start justify-between gap-2 px-1.5 pt-1.5">
@@ -444,7 +444,7 @@ function FreshPill() {
return (
<span
role="status"
className="text-muted-foreground hidden h-[30px] items-center gap-2 rounded-lg border px-2.5 text-xs min-[1321px]:inline-flex"
className="text-muted-foreground hidden h-[30px] items-center gap-2 rounded-lg border px-2.5 text-xs min-[1320px]:inline-flex"
>
<span className="bg-success size-1.5 rounded-full" aria-hidden />
Обновлено 14:02 · Live
apps/web/src/design-preview/section-grid.tsx
+3 -3
View File
@@ -296,11 +296,11 @@ export function PreviewSectionGrid<T extends object>({
{typeof tools === 'function' ? tools(selectedIds) : tools}
{card ? (
<Tabs value={cards ? 'cards' : 'table'} onValueChange={(v) => setCards(v === 'cards')} aria-label="Вид списка">
<TabsList className="h-9 gap-0.5 p-[3px]">
<TabsTrigger value="table" className="h-7 px-2.5 text-[12.5px]">
<TabsList className="h-9! gap-0.5 p-[3px]">
<TabsTrigger value="table" className="h-7! px-2.5 text-[12.5px]">
Таблица
</TabsTrigger>
<TabsTrigger value="cards" className="h-7 px-2.5 text-[12.5px]">
<TabsTrigger value="cards" className="h-7! px-2.5 text-[12.5px]">
Карточки
</TabsTrigger>
</TabsList>