food-market/docs/pos-design.md

Касса 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 нет — сетка, колонки корзины, степперы, правая панель, клавиатура, модалка и сегменты совпадают с эталоном. Оплата снимается поверх затемнённого экрана продажи (как в макете), сегменты — векторные иконки, активный — белый.