Отчёт этапа 3 — визуальный рестайл DI2

Дата: 2026-09-08 (сессия продолжения плана di2-restyle) Коммит: 968010c (в main, запушен, автодеплой запущен)

Что сделано

1. Графики recharts: hex/hsl → токены скина

Все палитры графиков переведены на var(--chart-1..5) (цикл по позиции), семантические ряды — на var(--info/success/warning/destructive):

pages/calculations.tsx — COLORS (income→info, expense→destructive, profit→success, tax→warning, toPay→chart-1, cumulative→chart-2), HIGHLIGHT_COLORS (10 → цикл chart-1..5).
pages/debt.tsx — OVERDUE_COLORS и clsColorMap: возрастная шкала cls0→success, 1-30→info, 31-60→warning, 61-90→color-mix(warning 55%, destructive), 91-365→destructive, >365→color-mix(destructive 70%, black); fallback #94a3b8→var(--muted-foreground); линии ДЗ/ПДЗ stroke→info/destructive.
pages/income-overview.tsx, pages/expenses-overview.tsx — COLORS (20 цветов → цикл chart-1..5), fallback #999/#ccc→var(--muted-foreground).
pages/salary.tsx — CHART_COLORS (20 → цикл), __other__→muted-foreground.
pages/income-categories.tsx — TAG_COLORS (8 → цикл chart-1..5).
pages/planning.tsx — PIE_COLORS (8 → цикл), paid→success, debt/totalDebt→info, totalOverdue→destructive, зарплаты→chart-4 (прогноз — color-mix(... 50%, transparent)), чистая прибыль→chart-1.
pages/profitability.tsx — income→success, expense→destructive, profit→info.
pages/heatmap.tsx — #6b7280→var(--muted-foreground).

2. Палитровые Tailwind-классы → семантика

~133 вхождений text-red-500, bg-amber-50 dark:bg-amber-950/30 и т.п. заменены на семантические классы. Alpha-варианты (bg-green-500/10) — на bg-[color-mix(in_oklab,var(--token)_N%,transparent)] (Tailwind v3.4 не генерирует alpha для var-цветов, паттерн этапа 2). Пары light/dark: свёрнуты в один класс (токен адаптируется скином).

Grep-контроль (итог):

Палитровые классы: 0 вхождений.
Hex: остались только обоснованные исключения:
- components/ui/chart.tsx:55 — селекторы [fill='#ccc']/[fill='#fff'] (шаблонный файл shadcn, это селекторы, а не UI-цвета);
- pages/heatmap.tsx:30 — #fff/#111 контрастный текст на вычисляемой тепловой шкале (динамический фон, не токен UI).
Собранный CSS (dist/public-di2/assets/index-*.css): .text-success/.text-info/.text-chart-1/.bg-info присутствуют, red-500/green-600 — 0.

3. Таблицы `ui/table.tsx` по UI Style Guide

TableHead: h-[var(--table-row-height,40px)], bg-[color-mix(in_oklab,var(--muted)_50%,transparent)], text-[12px] font-medium text-muted-foreground, px-3.
TableRow: hover muted 40%.
TableCell: px-3 py-2 (вместо p-4).

4. `lib/field-styles.ts` + кастомные контролы

Порт client/src/components/fields/field-styles.ts → client-di2/src/lib/field-styles.ts с адаптацией: hover:border-primary/50 и focus:ring-ring/20 заменены на color-mix arbitrary values (в DI2 конфиге цветы — голые var(), alpha-модификаторы не генерируются).
fieldControlClass("form", "h-7 pl-5 pr-1.5 text-xs ...") применён в components/column-filter.tsx.
В draggable-column-list.tsx и copyable-cell.tsx кастомных input/select нет (только shadcn Checkbox/Button и текстовый спан) — применять нечего, shadcn-обёртки не тронуты.

5. `app-sidebar.tsx`

Брендинг: «ОмегаПром» font-semibold + «Финансы» text-xs muted (было почти целевое), отступы py-5→py-4, gap-2.5→gap-2, leading-tight у текстового блока.

6. Мобильная нижняя панель `components/bottom-nav.tsx`

По референсу FinanceBottomNav.reference.tsx: fixed bottom-0 bg-background border-t z-50 md:hidden safe-area-bottom, nav h-14, три кнопки flex-col (иконка w-5 h-5 + подпись text-[10px]), активная — text-primary, «Разделы» — DropdownMenu side="top" с 9 разделами (Доходы, Расходы, Дебиторка, Расчёты, Планирование, Зарплата, Аудит, Прибыльность, Тепловая карта) и индикатором-точкой. wouter Link base-aware (Router base="/di2"). Подключена в App.tsx, контент <main> получил pb-20 md:pb-0. Утилита .safe-area-bottom добавлена в client-di2/src/index.css (паттерн основного клиента). SidebarTrigger скрыт на мобильном (hidden md:flex) — Sheet-сайдбар остаётся в дереве, но недоступен (минимальное решение, компонент ui/sidebar.tsx не переписывался).

7. Переключатель темы

Кнопка Sun/Moon в хедере справа через useDi2Theme().toggleTheme (Di2ThemeProvider с этапа 2), с tooltip. Ключи localStorage общие с основным приложением — тема синхронизируется.

8. Заголовки страниц

Все h1: text-2xl font-bold → text-lg font-semibold (audit, dashboard, debt, expense-categories, expenses-overview, income-categories, income-overview, not-found, profitability, settings). Отклонение: KPI-значение на дашборде (stat-value, dashboard.tsx:79) оставлено text-2xl font-bold — это метрика, а не заголовок; крупный размер даёт иерархию над заголовком text-lg.

Проверки

npm run check (tsc && tsc -p client-di2/tsconfig.json) — чисто.
npm run build (main → di2 → server) — чисто; pre-push hook при push повторил обе проверки успешно.
Grep-контроли: палитровые классы 0, hex только исключения, семантические классы в собранном CSS присутствуют.

Отклонения и заметки

Скрипты-заменялки писались как tmp/*.cjs и удалены после прогона. Первая версия молча теряла hex-фазу из-за дублей ключей объекта и безусловного OK — поймана пост-grep'ом, исправлена вторая версия (отдельные объекты HEX/PALETTE, CRLF-адаптация, контроль счётчиков).
Файлы DI2 в CRLF — многострочные шаблоны скрипта конвертировались в \r\n; git предупреждает о переводе в LF при коммите (нормально для репо).
Циклическая палитра chart-1..5 даёт повторы цветов при >5 рядов (раньше было 20 различимых цветов) — осознанный компромисс за skin-адаптивность по плану.
draggable-column-list.tsx / copyable-cell.tsx без изменений (см. п.4 выше).
Heatmap-шкала и #fff/#111 не переведены на токены — вычисляемый цветовой градиент, привязанный к light-шкале (зафиксировано как исключение).

8.0 KiB Raw Blame History Unescape Escape