Ku6epXBOCTuK/easy-png-tools2
1
0
Fork 0
mirror of https://github.com/Ku6epXBOCTuK/easy-png-tools.git synced 2026-09-14 21:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
bcdfc4cf123d2891ebfea3e240087c08b2ecb39c
easy-png-tools2/docs/demo-fidelity.md
T

7.6 KiB
Raw Blame History

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

Метод: 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. Наш (StepCard type → Badge accent): синий #1769D2. Решение: сделать приглушённым (меняет StepCard глобально) или оставить синим.
  • F3. Подписи превью-тайлов (SOURCE / STEP 01 / FINAL OUTPUT). Реф: синий #1769D2, weight 400. Наш (PreviewTile label): серый, weight 500.
  • 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 равны).

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

  1. Сразу поправить B1 + B2 (чёткие баги, улучшают все страницы).
  2. По F1–F4 — решение за тобой (совпадать с рефом дословно ИЛИ оставить как сигнатуру нового дизайна).
  3. F5–F10 — мелочи, подчистить в том же проходе, если решаем «совпадать с рефом».
  4. Переснять скриншоты и перепроверить пиксель-дифф.
Reference in New Issue View Git Blame Copy Permalink