style: format docs markdown
This commit is contained in:
@@ -1,103 +1,118 @@
|
||||
# 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`). Ниже — исходный текст на момент написания.
|
||||
> текущий статус пунктов 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). Зоны различий размазаны
|
||||
по всей высоте → править надо глобально, не точечно.
|
||||
Метод: Playwright, viewport 1440×900, скриншоты обеих страниц + замер
|
||||
вычисленных стилей ключевых элементов + пиксель-дифф (без чтения картинки
|
||||
моделью). Пиксель-дифф: **24.9%** (наш скролл 1731px, реф 1579px). Зоны различий
|
||||
размазаны по всей высоте → править надо глобально, не точечно.
|
||||
|
||||
Теперь процесс автоматизирован: `pnpm audit` (Playwright) пишет
|
||||
`web/audit/audit-report.md` — light/dark токены + поэлементный дифф стилей по тексту.
|
||||
Пиксель-дифф убран (неудобен для работы). Фиксы можно делать в любой момент и
|
||||
перепроверять аудитом.
|
||||
`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)
|
||||
Доказательство: пробы `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 колонки как выбор нового дизайна.
|
||||
- **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 — скорее артефакт замера (вложенный текст/чип размера), проверить визуально.
|
||||
- **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) — паддинг панели.
|
||||
- **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 = «сетка против плоского», не цвет фона.
|
||||
Серый фон `#EEF1F4` — это **светлая** тема. Уточнение по F1: наш токен
|
||||
`--background` уже равен `#EEF1F4` (совпадает с рефом); видимое отличие — только
|
||||
blueprint-сетка поверх фона, а не «белый vs серый». То есть F1 = «сетка против
|
||||
плоского», не цвет фона.
|
||||
|
||||
Перед тем как сверять цвета бейджей/тайлов/раскладок (F2-F4), нужно сначала
|
||||
зафиксировать палитры light/dark как единый источник токенов. Сейчас они есть в
|
||||
`web/src/lib/styles/design2.css` (`:root` + `[data-theme="dark"]`), но не сверены с рефом.
|
||||
`web/src/lib/styles/design2.css` (`:root` + `[data-theme="dark"]`), но не
|
||||
сверены с рефом.
|
||||
|
||||
**Как проверить темы в refs-html:**
|
||||
|
||||
- Открыть `refs-html/demo.html` (и соседние `gradient.html`, `background-remover.html`)
|
||||
через Playwright/браузер.
|
||||
- Открыть `refs-html/demo.html` (и соседние `gradient.html`,
|
||||
`background-remover.html`) через Playwright/браузер.
|
||||
- Нажать theme-toggle в топбаре рефа (иконка луны/солнца) — переключает тему
|
||||
(скорее всего меняет атрибут/класс на `<html>` или `.page` и переопределяет CSS-переменные).
|
||||
- Снять скриншоты светлой и тёмной темы, замерить computed-стиль `:root` переменных
|
||||
рефа (через `getComputedStyle(document.documentElement).getPropertyValue('--...')`)
|
||||
и сопоставить с нашими токенами в `design2.css`.
|
||||
(скорее всего меняет атрибут/класс на `<html>` или `.page` и переопределяет
|
||||
CSS-переменные).
|
||||
- Снять скриншоты светлой и тёмной темы, замерить computed-стиль `:root`
|
||||
переменных рефа (через
|
||||
`getComputedStyle(document.documentElement).getPropertyValue('--...')`) и
|
||||
сопоставить с нашими токенами в `design2.css`.
|
||||
- Рефы, похоже, не доделаны по тёмной теме — зафиксировать, какие именно токены
|
||||
меняются и где расхождения. На основе этого выровнять наши токены, затем вернуться
|
||||
к F2 (бейдж типа), F3 (тайлы), F4 (раскладка preview-stack).
|
||||
меняются и где расхождения. На основе этого выровнять наши токены, затем
|
||||
вернуться к F2 (бейдж типа), F3 (тайлы), F4 (раскладка preview-stack).
|
||||
|
||||
Решение по F1-F4 принимается только после сверки токенов светлой/тёмной темы с рефом.
|
||||
Решение по F1-F4 принимается только после сверки токенов светлой/тёмной темы с
|
||||
рефом.
|
||||
|
||||
**Состояние тем (уточнение):** наша dark-тема реализована в `design2.css`
|
||||
(`[data-theme="dark"]`), но пока подключена только на preview-маршрутах (старые
|
||||
страницы грузят `app.css`). Этого достаточно для сверки: токены, отличные от light,
|
||||
соберём по всем `refs-html/*.html` (не только `demo.html`), остальные токены
|
||||
не меняются. Light-токены уже совпадают с рефом (`--background`, `--panel`,
|
||||
`--foreground`, `--muted`, `--line`, `--blue` равны).
|
||||
страницы грузят `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) — без регрессий.
|
||||
Цветовые расхождения против `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: рефакторинг + верность). Ниже — исходные наброски.
|
||||
> Актуальный пошаговый план фикса вынесен в `docs/plan-design-fix.md` (Этапы
|
||||
> 0–1: рефакторинг + верность). Ниже — исходные наброски.
|
||||
|
||||
1. Сразу поправить B1 + B2 (чёткие баги, улучшают все страницы).
|
||||
2. По F1–F4 — решение за тобой (совпадать с рефом дословно ИЛИ оставить как сигнатуру нового дизайна).
|
||||
3. F5–F10 — мелочи, подчистить в том же проходе, если решаем «совпадать с рефом».
|
||||
2. По F1–F4 — решение за тобой (совпадать с рефом дословно ИЛИ оставить как
|
||||
сигнатуру нового дизайна).
|
||||
3. F5–F10 — мелочи, подчистить в том же проходе, если решаем «совпадать с
|
||||
рефом».
|
||||
4. Переснять скриншоты и перепроверить пиксель-дифф.
|
||||
|
||||
Reference in New Issue
Block a user