Demo fidelity: /preview/demo vs refs-html/demo.html

⚠️ УТРАТИЛ АКТУАЛЬНОСТЬ — архивная копия. Актуальный план фикса верности и текущий статус пунктов B/F — в docs/plan-design-fix.md (Этап 1). Аудит верности теперь автоматизирован (pnpm audit → web/audit/audit-report.md; пиксель-дифф не используется); темы в refs-html переключаются (скрипт инжектится в scripts/extract-static.mjs). Ниже — исходный текст на момент написания.

Метод: Playwright, viewport 1440×900, скриншоты обеих страниц + замер вычисленных стилей ключевых элементов + пиксель-дифф (без чтения картинки моделью). Пиксель-дифф: 24.9% (наш скролл 1731px, реф 1579px). Зоны различий размазаны по всей высоте → править надо глобально, не точечно.

Теперь процесс автоматизирован: pnpm audit (Playwright) пишет web/audit/audit-report.md — light/dark токены + поэлементный дифф стилей по тексту. Пиксель-дифф убран (неудобен для работы). Фиксы можно делать в любой момент и перепроверять аудитом.

Баги (объективно, правим в любом случае)

B1. Кнопки/инпуты рендерятся шрифтом Arial, а не IBM Plex Sans. Доказательство: пробы Reset pipeline → fontFamily: Arial. Причина: у button/input не задан font-family: inherit. Фикс: добавить в reset design2.css button, input, select, textarea { font-family: inherit; }. Влияет на все страницы. (P1)
B2. Двойной топбар. Страница демо рендерит свой .topbar (brand / AUTO PIPELINE / help / theme / lang), который перекрывается глобальным fixed Header из preview/+layout.svelte (в нём только theme-toggle). В рефе — один топбар. Контент демо-топбара (brand, статус, язык) визуально спрятан за фикс-хедером. Фикс: убрать кастомный .topbar из демо и сделать хедер лейаута реф-стайл топбаром (brand + version + status + help + theme + lang) — улучшит и C9/C10. (P1)

Расхождения дизайна (нужно решение)

F1. Фон холста. Реф: плоский серый #EEF1F4. Наш: белый + blueprint-сетка. Решение: совпасть с рефом (убрать сетку на демо) или оставить сетку как сигнатуру нового дизайна.
F2. Бейдж типа шага (BACKGROUND/TRANSFORM/STYLE). Реф: приглушённый серый #6D787F. Решено C16: StepCard рендерит type как приглушённый моно-текст (не синий бейдж); индекс шага (step-index) — синий #1769D2, как в рефе.
F3. Подписи превью-тайлов (SOURCE / STEP 01 / FINAL OUTPUT). Реф: синий #1769D2, weight 400. Решено C16: PreviewTile label — синий #1769D2.
F4. Раскладка preview-stack. Реф: одна колонка (5 строк, выше). Наш: 2 колонки (grid). Решение: одна колонка (как реф) или оставить 2 колонки как выбор нового дизайна.
F5. Вес лейблов контролов. Реф: 400. Наш (MonoLabel): 500. Мелко.
F6. Мета-подписи (DIMENSIONS/FORMAT/SIZE): реф fs 9px, наш 10px. Мелко.
F7. Копирайт: Add tool у нас + Add tool; кнопка Download result — сверить стиль (в рефе синяя с белым текстом 478×42). Пробы Download result/Add tool/DIRECTION вернули NOT FOUND — скорее артефакт замера (вложенный текст/чип размера), проверить визуально.
F8. h1 line-height чуть выше (наш 150px vs реф 115px) — мелкий зазор.
F9. Вертикальный ритм: контент на ~152px выше, зазоры между секциями отличаются (pipeline-head y 434 vs 400 и т.д.) — подровнять паддинги под реф.
F10. Внутренние отступы preview-панели (Hide intermediate x 907 vs 1218) — паддинг панели.

Темы (отложено — F1-F4)

Серый фон #EEF1F4 — это светлая тема. Уточнение по F1: наш токен --background уже равен #EEF1F4 (совпадает с рефом); видимое отличие — только blueprint-сетка поверх фона, а не «белый vs серый». То есть F1 = «сетка против плоского», не цвет фона.

Перед тем как сверять цвета бейджей/тайлов/раскладок (F2-F4), нужно сначала зафиксировать палитры light/dark как единый источник токенов. Сейчас они есть в web/src/lib/styles/design2.css (:root + [data-theme="dark"]), но не сверены с рефом.

Как проверить темы в refs-html:

Открыть refs-html/demo.html (и соседние gradient.html, background-remover.html) через Playwright/браузер.
Нажать theme-toggle в топбаре рефа (иконка луны/солнца) — переключает тему (скорее всего меняет атрибут/класс на <html> или .page и переопределяет CSS-переменные).
Снять скриншоты светлой и тёмной темы, замерить computed-стиль :root переменных рефа (через getComputedStyle(document.documentElement).getPropertyValue('--...')) и сопоставить с нашими токенами в design2.css.
Рефы, похоже, не доделаны по тёмной теме — зафиксировать, какие именно токены меняются и где расхождения. На основе этого выровнять наши токены, затем вернуться к F2 (бейдж типа), F3 (тайлы), F4 (раскладка preview-stack).

Решение по F1-F4 принимается только после сверки токенов светлой/тёмной темы с рефом.

Состояние тем (уточнение): наша dark-тема реализована в design2.css ([data-theme="dark"]), но пока подключена только на preview-маршрутах (старые страницы грузят app.css). Этого достаточно для сверки: токены, отличные от light, соберём по всем refs-html/*.html (не только demo.html), остальные токены не меняются. Light-токены уже совпадают с рефом (--background, --panel, --foreground, --muted, --line, --blue равны).

Состояние (C16)

Цветовые расхождения против refs-html/demo.html устранены: стек шрифтов сверен с рефом ("IBM Plex Sans", sans-serif / "IBM Plex Mono", monospace), бренд топбара — --foreground, индекс шага — синий, тип шага и подпись плитки — как в рефе, Segmented — 10px/32px. Аудит: токены light 10 / dark 16, элементы 47. Остаток — sub-pixel (10px→9px лейблы, letter-spacing) и структурные (display/rect от наших flex/grid раскладок против статичного мока); визуально незначимы, правим точечно при желании. Старые тесты (583) — без регрессий.

План действий (предлагаю)

Актуальный пошаговый план фикса вынесен в docs/plan-design-fix.md (Этапы 0–1: рефакторинг + верность). Ниже — исходные наброски.

Сразу поправить B1 + B2 (чёткие баги, улучшают все страницы).
По F1–F4 — решение за тобой (совпадать с рефом дословно ИЛИ оставить как сигнатуру нового дизайна).
F5–F10 — мелочи, подчистить в том же проходе, если решаем «совпадать с рефом».
Переснять скриншоты и перепроверить пиксель-дифф.

9.3 KiB Raw Permalink Blame History Unescape Escape