48 lines
8.0 KiB
Markdown
48 lines
8.0 KiB
Markdown
# Отчёт этапа 2 — Мост тем/скинов iistwin в DI2
|
||
|
||
Дата: 2026-09-07. Коммит: **`b457934`** — `DI2: мост тем/скинов iistwin — Di2ThemeProvider, общий generated-skins.css, токены в формате основного клиента` (32 файла, +588/−348). Push в main выполнен, pre-push hook (check+build) — «All checks passed». Автодеплой запущен.
|
||
|
||
## Что сделано
|
||
|
||
### Общий код тем
|
||
- `vite.config.di2.ts` — алиас `@skin` → `client/src/themes` (resolve.alias; покрывает `@skin` и `@skin/*`).
|
||
- `client-di2/tsconfig.json` — paths: `"@skin": ["../client/src/themes/index.ts"]`, `"@skin/*": ["../client/src/themes/*"]`.
|
||
- `client-di2/src/index.css` — первой строкой `@import '../../client/src/themes/styles/generated-skins.css'` (8 селекторов `[data-skin="..."][data-theme="..."]` в собранном CSS — проверено).
|
||
|
||
### Di2ThemeProvider (`client-di2/src/themes/Di2ThemeProvider.tsx`, новый)
|
||
- Порт логики `client/src/themes/ThemeProvider.tsx` без useAuth/useQuery (plain fetch, credentials: include).
|
||
- Приоритет скина: `localStorage['skin']` (валидация среди BUILT_IN_SKINS + кастомных с сервера) → `GET /api/organization/current-skin` → `'iistwin'`. Формат ответов сверён с `server/routes/organization-skins.routes.ts` (`{success, skins: [{id, name, description, isEditable, isBuiltIn}]}`, `{success, skinId, skin}`, `{success, skin}`).
|
||
- Кастомные скины: список через `/api/organization/skins`, токены текущего кастомного — через `/api/organization/skins/:id`; runtime CSS через `generateSkinCss` в `<style id="skin-runtime">` (тот же генератор, что в основном клиенте).
|
||
- Тема: `localStorage['theme']` → `prefers-color-scheme` + слушатель.
|
||
- На `<html>`: `data-skin`, `data-theme`, класс `light|dark`. Ключи localStorage общие с основным приложением — выбор синхронизируется iistwin ↔ /di2.
|
||
- Экспортирует `useDi2Theme()` (theme/setTheme/toggleTheme/skinId/setSkinId/availableSkins) и `useDi2Skin()` — для переключателя темы на этапе 3.
|
||
- `client-di2/src/main.tsx` — `<Router base="/di2"><Di2ThemeProvider><App/></Di2ThemeProvider></Router>`.
|
||
|
||
### Перевод DI2 на полный формат токенов
|
||
- `client-di2/tailwind.config.ts` — все цвета `hsl(var(--x) / <alpha-value>)` → `var(--x)`; радиусы → `var(--radius)` + каскад `calc(-2px/-4px)`; добавлены `warning/success/info` (+foreground); структура `sidebar`/`sidebar-primary`/`sidebar-accent` и DI2-nested border'ы (`card.border` → `card-border` и т.д.) сохранены; `status` (rgb, неиспользуемый) оставлен без изменений.
|
||
- `client-di2/src/index.css` — собственные `:root`/`.dark` HSL-тройки заменены fallback-блоками из `client/src/index.css:13-138`; DI2-only переменные переопределены: `--card-border`/`--popover-border` → `var(--border)`, `--primary-border`/`--secondary-border`/`--muted-border`/`--accent-border`/`--destructive-border`/`--sidebar-primary-border`/`--sidebar-accent-border` → `color-mix(in oklab, var(--X) 82%, black)`, `--button-outline` → `color-mix(in oklab, var(--primary) 35%, transparent)`, `--badge-outline` → `color-mix(in oklab, var(--muted-foreground) 35%, transparent)`, `--elevate-1/2` → `rgba(0,0,0,.05/.08)` (в `.dark` — светлые); удалены `--opaque-button-border-intensity` и все `hsl(from ...)` relative-color блоки; жёсткие `--font-sans: Open Sans` и т.п. удалены (шрифты эмитит `generateSkinCss` из токенов скина); `hsl(var(--muted-foreground))` в contenteditable-плейсхолдере → `var(--muted-foreground)`. Слой elevate-утилит DI2 (hover-elevate и т.д.) сохранён — используется badge/button.
|
||
- `client-di2/index.html` — `lang="ru"`, viewport без `maximum-scale=1` + `interactive-widget=resizes-content`, оба preconnect и мега-link (23 семейства) заменены одним линком Inter + DM Mono как в `client/index.html:23`.
|
||
|
||
### Alpha-модификаторы семантических цветов — важная находка
|
||
Эмпирическая проверка на Tailwind 3.4.19 (тестовый скрипт, затем удалён): класс с модификатором прозрачности (`bg-muted/50`) для цвета-`var()` **молча не генерируется** в CSS вообще (Tailwind не умеет alpha для var-цветов; трюки с `<alpha-value>` + color-mix в конфиге дают битый CSS через legacy `--tw-bg-opacity`). Основной клиент iistwin живёт с этим же ограничением.
|
||
|
||
Решение (как в плане): 166 вхождений в client-di2/src заменены скриптом `tmp/di2-alpha-replace.cjs` (удалён после прогона) на arbitrary values: `bg-muted/50` → `bg-[color-mix(in_oklab,var(--muted)_50%,transparent)]`. Варианты (`hover:`, `aria-selected:`, arbitrary-variant) сохраняются. Палитровые цвета (`bg-green-500/10`, `bg-black/80` и т.п. — с ними alpha работает штатно) не тронуты. Полный список заменённых паттернов — в выводе скрипта (скопирован в git-коммит-сообщение частично, полный лог не сохранялся; повторяемость: bg-muted/50 ×37, bg-muted/30 ×28, border-muted-foreground/30 ×10 и т.д.).
|
||
|
||
## Проверки
|
||
|
||
- `npm run check` (tsc корневой + `tsc -p client-di2/tsconfig.json`) — чисто.
|
||
- `npm run build` (main → di2 → server) — успешно.
|
||
- Собранный `dist/public-di2/assets/index-*.css` (116.4 kB, было 88.3 kB) проверен grep/node: `.bg-primary{background-color:var(--primary)}`, 8 селекторов `[data-skin=...]`, правила `color-mix(in oklab,var(--muted) N%,transparent)` для bg/border/divide/stroke/text + hover-варианты, `border-radius:var(--radius)`.
|
||
- JS-бандл DI2 вырос с 1363 до 1405 kB (~42 kB — модули тем/скинов), ожидаемо.
|
||
|
||
## Отклонения от плана
|
||
|
||
1. План предполагал, что замена alpha-модификаторов может быть не нужна, если Tailwind справится; фактически без замены классы исчезли бы из CSS — замена выполнена массово (166 мест), как и предписывал план.
|
||
2. `--elevate-1/2`: план → `rgba(0,0,0,.05/.08)`; основной клиент использует `.03/.08` (light) и `.03/.08` (dark). Следовал плану: light `.05/.08`, dark `rgba(255,255,255,.05/.08)`.
|
||
3. `bg-warning` и др. пока не используются в DI2 — классы не генерируются (конфиг готов к этапу 3).
|
||
4. В собранном CSS замечен `var(--color-border)` из `client-di2/src/components/ui/chart.tsx` (собственная индикатор-переменная recharts-обёртки, inline-стили) — не конфликтует с нашими токенами, не трогал.
|
||
|
||
## Оставшееся (этапы 3–4)
|
||
|
||
Этап 3 (визуальный рестайл: графики var(--chart-*), хардкод-цвета, таблицы, контролы, нижняя панель по референсу FinanceBottomNav.reference.tsx, переключатель темы), этап 4 (проверка, документация, ручной Google redirect URI).
|