7a93c1941d
По просьбе владельца («фон мрачный — сделай светлее, стильнее, удобнее»). - Дизайн-система на токенах: Styles/Tokens.axaml (ThemeDictionaries Light/Dark) + Styles/PosStyles.axaml (карточки/кнопки/чипы/клавиши/сегменты). RequestedThemeVariant=Light. Палитра: фон #F4F6F5, карточки белые, бренд-зелёный #16A34A, опасное — красный контур, предупреждение — янтарь. Inter, крупная иерархия, скругления 12–14, мягкие тени, сетка 8px. - Экран продажи: белая верхняя полоса (лого/точка/кассир + чипы смены и связи), поиск со скан-иконкой, корзина-карточки со степпером [−]N[+] и удалением, скидка в строке зелёным, пустая корзина-заглушка, правая карточка чека с крупным зелёным ИТОГО и «Оплатить · F12», вторичные кнопки-контуры, капсулы горячих клавиш. - Оплата (светлое модальное): сегменты Наличные/Карта/Смешанная, быстрые суммы, цифровая клавиатура, крупная «Сдача». - Вход (логин + PIN-пад), смена/Z-отчёт (разница цветом), возврат (степперы) — в том же стиле. - Кнопки ≥48px, клавиши крупные. Скорость не ухудшилась (старт 149мс, скан 11мс, поиск 33мс). --uitest OK, 43 unit зелёные. Галерея: разделы «Стало»/«Было». Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
51 lines
3.5 KiB
Markdown
51 lines
3.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` + подмену словаря. По умолчанию — светлая.
|