/* utilities-fill.css — заплатка на утилиты, которые шаблоны используют, а собранный tailwind.css не содержит (сборка, не JIT). Список измерен 11.08.2026, см. docs/ui-audit.md, дефект №2. Это НЕ дизайн-система: файл существует, чтобы вёрстка в шаблонах означала то, что в ней написано. По мере переписывания шаблонов — сокращать. Тёмная тема в проекте включается классом .dark на , поэтому dark-варианты пишутся селектором :is(.dark *) — как в tailwind.css. */ /* ── разделители строк таблиц и списков ────────────────────────────── */ .divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; border-bottom-width: 0; border-top-style: solid; } .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--gray-100); } .dark\:divide-gray-700:is(.dark *) > :not([hidden]) ~ :not([hidden]) { border-color: var(--gray-700); } /* ── поверхности с прозрачностью (модификатор /50 не собран) ────────── */ .bg-gray-900\/50 { background-color: color-mix(in srgb, var(--gray-900) 50%, transparent); } .dark\:bg-gray-900\/50:is(.dark *) { background-color: color-mix(in srgb, var(--gray-900) 50%, transparent); } .bg-gray-800\/50 { background-color: color-mix(in srgb, var(--gray-800) 50%, transparent); } .dark\:bg-gray-800\/50:is(.dark *) { background-color: color-mix(in srgb, var(--gray-800) 50%, transparent); } .dark\:hover\:bg-gray-800\/50:is(.dark *):hover { background-color: color-mix(in srgb, var(--gray-800) 50%, transparent); } .dark\:bg-amber-900:is(.dark *) { background-color: #78350f; } /* ── размеры и выравнивание ─────────────────────────────────────────── */ .min-w-full { min-width: 100%; } .align-middle { vertical-align: middle; } .flex-row { flex-direction: row; } .flex-nowrap { flex-wrap: nowrap; } .shrink-0 { flex-shrink: 0; } /* ── отступы и гэпы, которых нет в сборке ───────────────────────────── */ .pl-2 { padding-left: 0.5rem; } .pl-6 { padding-left: 1.5rem; } .pr-6 { padding-right: 1.5rem; } .mt-12 { margin-top: 3rem; } .gap-0\.5 { gap: 0.125rem; } .gap-1\.5 { gap: 0.375rem; } .gap-5 { gap: 1.25rem; } /* ── единая ширина контейнера ───────────────────────────────────────── */ /* Решение Tim, 11.08.2026: 1280 px везде. Было два семейства — .container из Tailwind (до 1536) и .page-container страниц объектов/контрагентов (1280). Строки таблиц на широком мониторе растягивались и хуже прослеживались. Тут переопределён только верхний брейкпойнт: до 1280 Tailwind и так даёт нужное значение. */ @media (min-width: 1536px) { .container { max-width: 1280px; } } /* ── сетки на широких экранах (собраны только sm:/md:grid-cols-2) ───── */ @media (min-width: 768px) { .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1280px) { .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ── фокус полей, набранных утилитами ────────────────────────────────── Сплошная сверка 23.08.2026: в шаблонах 152 разных цветовых утилиты, 1598 вхождений. Из них 100 вхождений задают фокус СИНИМ литералом (`focus:border-blue-500` ×48, `focus:ring-blue-500` ×52) — это поля, свёрстанные утилитами мимо дизайн-системы, и они спорили с общим правилом кольца фокуса (docs/UI-POLISH.md), которое 23.08 приведено к непрозрачному outline на всех остальных полях. Ещё 88 вхождений (`focus:*-brand-500`) ведут на `--primary-500`, а это СЕРАЯ шкала — «фирменное» имя снова отдаёт серым. Правим не 188 мест в разметке, а сами утилиты: они и так живут в этом файле-заплатке. Значение одно и то же для всех — токен фокуса. Флага `!important` не нужно: правила в tailwind.css объявлены без него, а этот файл подключается следом (base.html:125 → 127). */ .focus\:border-blue-500:focus, .focus\:border-brand-500:focus, .focus\:border-orange-500:focus, .focus\:border-amber-500:focus { border-color: var(--input-border-hover, var(--input-border)); } .focus\:ring-blue-500:focus, .focus\:ring-brand-500:focus, .focus\:ring-orange-500:focus, .focus\:ring-amber-500:focus, .focus\:ring-indigo-500:focus { --tw-ring-color: var(--focus-ring-color); } /* ── статусные тона: один набор вместо четырёх похожих ──────────────── Сверка 23.08.2026: 74 цветовые утилиты красят литералом (474 вхождения). Большая их часть — статусные плашки на страницах админки, свёрстанные утилитами: `bg-green-100 text-green-800`, `bg-red-100 text-red-700`, `bg-amber-100 text-amber-800`, `bg-blue-100 text-blue-700` и их `dark:`-пары. Каждая пара сама по себе читается и проходит норму — но это ЧЕТЫРЕ слегка разных зелёных, красных, янтарных и синих рядом с уже измеренными парными токенами `--status-*`. Ровно то, что Tim назвал «пёстро»: один и тот же смысл окрашен по-разному в зависимости от того, кто верстал страницу. Ведём их на токены. Токены сами меняются по теме, поэтому `dark:`-пары ведём на те же имена: в тёмной теме побеждает `dark:`-правило, значение получается одно и то же — и светлая, и тёмная остаются согласованными. Замер после правки — в отчёте `docs/redesign/101-palette-23-08.md`. */ /* успех */ .text-green-600, .text-green-700, .text-green-800, .dark\:text-green-200:is(.dark *), .dark\:text-green-300:is(.dark *), .dark\:text-green-400:is(.dark *) { color: var(--status-success-text); } .bg-green-50, .bg-green-100, .dark\:bg-green-900:is(.dark *) { background-color: var(--status-success-bg); } /* ошибка */ .text-red-500, .text-red-600, .text-red-700, .dark\:text-red-300:is(.dark *), .dark\:text-red-400:is(.dark *) { color: var(--status-error-text); } .bg-red-50, .bg-red-100, .dark\:bg-red-900:is(.dark *) { background-color: var(--status-error-bg); } .border-red-200, .border-red-500 { border-color: var(--error-500); } /* предупреждение — янтарный, жёлтый и оранжевый сходятся в один тон */ .text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900, .text-yellow-500, .text-yellow-600, .text-yellow-800, .text-orange-500, .text-orange-600, .text-orange-700, .dark\:text-amber-200:is(.dark *), .dark\:text-amber-300:is(.dark *), .dark\:text-yellow-200:is(.dark *), .dark\:text-orange-300:is(.dark *) { color: var(--status-warning-text); } .bg-amber-50, .bg-amber-100, .bg-yellow-100, .bg-orange-100, .dark\:bg-yellow-900:is(.dark *) { background-color: var(--status-warning-bg); } .border-amber-300 { border-color: var(--warning-500); } /* информация */ .text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800, .text-indigo-600, .dark\:text-blue-200:is(.dark *), .dark\:text-blue-300:is(.dark *), .dark\:text-blue-400:is(.dark *) { color: var(--status-info-text); } .bg-blue-50, .bg-blue-100, .dark\:bg-blue-900:is(.dark *) { background-color: var(--info-bg); } .border-blue-500 { border-color: var(--status-info-text); } /* ── добор мёртвых цветовых утилит ───────────────────────────────────── Пересчёт 23.08.2026 с учётом составных префиксов (`dark:hover:`, модификаторы прозрачности `/30`): в шаблонах мертвы РОВНО девять классов, 29 вхождений — прежняя цифра «34 класса» была ошибкой разбора, она резала `dark:hover:bg-gray-800` на несуществующий `hover:bg-gray-800`. Все девять осмысленные, поэтому не удаляем из разметки, а доводим до палитры. `bg-gray-50/50` — приглушённая подложка секции; соседние правила этого файла (`bg-gray-800/50`, `bg-gray-900/50`) уже написаны через color-mix, здесь тот же приём. Остальные восемь — левая полоса и рамка у флеш-сообщений и карточек состояния (`border-l-4 border-green-500`, `dark:border-red-700` и прочие): без объявления цвет границы падал на currentColor и совпадал с текстом. Светлые варианты берут насыщенную ступень шкалы, тёмные — парный светлый статусный тон, иначе граница тонет в тёмном фоне. */ .bg-gray-50\/50 { background-color: color-mix(in srgb, var(--gray-50) 50%, transparent); } .border-green-500 { border-color: var(--success-500); } .border-amber-500 { border-color: var(--warning-500); } .dark\:border-green-700:is(.dark *) { border-color: var(--status-success-text); } .dark\:border-red-700:is(.dark *) { border-color: var(--status-error-text); } .dark\:border-amber-600:is(.dark *) { border-color: var(--status-warning-text); } .dark\:border-blue-700:is(.dark *) { border-color: var(--status-info-text); } .dark\:bg-yellow-900\/30:is(.dark *), .dark\:bg-amber-900\/20:is(.dark *) { background-color: var(--status-warning-bg); }