61985c1062
- docs/pos-design/: эталон-макет (pos-mockup.html + mockup-*.png) и сверка
«макет | касса» рядом — compare-sale.png, compare-payment.png (данные те же:
4 позиции, 3 362 ₸, получено 5 000 → сдача 1 638 ₸). Расхождений
выравнивания/размеров > 4px нет.
- Перегенерированы скриншоты «Стало» (1920×1080 + 1366×768) и галерея.
- Реальное окно Windows 11 (software-рендер на VM): экран продажи и оплаты
(docs/pos-screenshots/windows/windows11-{sale,payment}.png).
- Обновлены docs/pos-design.md (раздел сверки) и docs/pos-ui-progress.md (итог).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
70 lines
5.5 KiB
Markdown
70 lines
5.5 KiB
Markdown
# Касса food-market — дизайн-система (светлая тема)
|
||
|
||
Подход: чисто, светло, крупно, ничего лишнего (как Square POS / Loyverse / Poster).
|
||
Всё строится на токенах из одного места — `Styles/Tokens.axaml` (ResourceDictionary).
|
||
Тёмная тема — те же токены, другой набор значений (опция в настройках, не по умолчанию).
|
||
|
||
## Палитра (токены)
|
||
| Токен | Светлая | Назначение |
|
||
|---|---|---|
|
||
| `PosBg` | #F4F6F5 | фон приложения |
|
||
| `PosCard` | #FFFFFF | карточки, полосы, модальные |
|
||
| `PosBorder` | #E3E8E6 | рамки, разделители |
|
||
| `PosText` | #0F1F17 | основной текст |
|
||
| `PosтатText2` / `PosTextMuted` | #5F6F68 | вторичный текст |
|
||
| `PosBrand` | #16A34A | бренд/главное действие (зелёный Food Market) |
|
||
| `PosBrandHover` | #15803D | hover |
|
||
| `PosBrandPressed` | #166534 | pressed |
|
||
| `PosDanger` | #DC2626 | опасное (Очистить/Удалить) — только контур |
|
||
| `PosWarn` | #D97706 | предупреждение (смена закрыта, нет связи) — янтарный |
|
||
| `PosBrandSoft` | #DCFCE7 | мягкий зелёный фон (чипы, успех) |
|
||
| `PosWarnSoft` | #FEF3C7 | мягкий янтарный фон |
|
||
|
||
Контраст текста к фону ≥ WCAG AA (PosText на PosCard/PosBg — ~14:1; PosTextMuted — ~5:1).
|
||
|
||
## Типографика (Inter)
|
||
- ИТОГО: 44–56 pt, Bold.
|
||
- Суммы строк: 18–20 pt, SemiBold, **tabular** (моноширинные цифры — колонки не прыгают).
|
||
- Названия товаров: 17–18 pt.
|
||
- Служебное/подписи: 13–14 pt, PosTextMuted.
|
||
- Моноширинные цифры: `<TextBlock Classes="num">` → FontFeatures "tnum=1" / FontFamily с tabular.
|
||
|
||
## Форма и ритм
|
||
- Скругления: карточки/кнопки 12–14, чипы 999 (капсула).
|
||
- Тени: мягкие у карточек (BoxShadow 0 1 3 #00000014, 0 4 12 #00000010).
|
||
- Сетка отступов: шаг 8 px (8/12/16/24).
|
||
- Кнопки: высота ≥ 48 px (сенсор ≥ 44). Главная — заливка PosBrand; вторичные —
|
||
контур PosBorder на белом; опасная — контур PosDanger (без заливки).
|
||
|
||
## Компоненты (классы стилей)
|
||
- `Button.primary` — зелёная заливка, белый текст, крупная.
|
||
- `Button.ghost` — белая, контур PosBorder, текст PosText (вторичные действия).
|
||
- `Button.danger` — белая, контур PosDanger, текст PosDanger (Очистить/Удалить).
|
||
- `Button.key` — клавиша цифровой клавиатуры/степпера.
|
||
- `Border.card` — белая карточка со скруглением и тенью.
|
||
- `Border.chip` / `Border.chip.ok` / `.warn` — капсулы статуса.
|
||
- `TextBox.search` — поле поиска/скана с иконкой.
|
||
|
||
## Тёмная тема (опция)
|
||
Те же имена токенов, тёмные значения (PosBg #0F1713, PosCard #15201B, PosText #E8EFEA…),
|
||
переключается через `RequestedThemeVariant` + подмену словаря. По умолчанию — светлая.
|
||
|
||
## Эталон-макет (Mac-Claude, 08.10)
|
||
Верстать ТОЧНО по макету: `docs/pos-design/pos-mockup.html` (все размеры/цвета/отступы в CSS)
|
||
+ отрисовки `mockup-sale-1920x1080.png`, `mockup-payment-1920x1080.png`. Сравнение
|
||
«макет | касса» — `docs/pos-design/compare-*.png` (расхождения выравнивания > 4px — править).
|
||
|
||
Ключевые размеры из макета: app rows 64/1fr/40; main cols 1fr/440, gap 16, padding 16/24;
|
||
search h64 border 2px green; избранное 6 плиток h84; корзина cols «1fr 200 160 56», thead h48,
|
||
строка h76, выбранная — зелёный акцент слева; степпер 44/1fr/44 слитный; правая панель p24 gap16,
|
||
ИТОГО green-soft, блок «Последний чек/Чеков за смену», pay h76; grid2 кнопки h52 с иконками и kbd;
|
||
модалка 880, pad 3×4 по 72, quick 3×2, seg 3 в серой подложке. Иконки — векторные (не эмодзи).
|
||
|
||
### Сверка «макет | касса»
|
||
`dotnet run --project src/food-market.pos -- --compare` складывает эталон и наш рендер
|
||
рядом (`CompareRunner`, SkiaSharp): `compare-sale.png`, `compare-payment.png`. Данные те же,
|
||
что в макете — 4 позиции, подытог 3 422 ₸, скидка −60 ₸, итог 3 362 ₸, получено 5 000 → сдача 1 638 ₸.
|
||
Результат сверки на 08.10: расхождений выравнивания/размеров > 4 px нет — сетка, колонки корзины,
|
||
степперы, правая панель, клавиатура, модалка и сегменты совпадают с эталоном. Оплата снимается
|
||
поверх затемнённого экрана продажи (как в макете), сегменты — векторные иконки, активный — белый.
|