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

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

apps/web/src/design-preview/bits.tsx

@@ -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

@@ -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

@@ -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',
+  3: 'grid-cols-1 min-[1240px]:grid-cols-3',
-  4: 'grid-cols-1 min-[641px]:grid-cols-2 min-[1241px]:grid-cols-4',
+  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

@@ -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="text-warning hidden text-sm font-medium min-[1000px]:inline">Внимание</span>
-        <span className="hidden items-center gap-1.5 text-sm tabular-nums min-[1241px]:inline-flex">
+        <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

@@ -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]">
+              <TabsList className="h-9! gap-0.5 p-[3px]">
-                <TabsTrigger value="table" className="h-7 px-2.5 text-[12.5px]">
+                <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>