nns 7a93c1941d feat(pos-ui): светлая стильная тема по умолчанию (Square/Loyverse-подход)

По просьбе владельца («фон мрачный — сделай светлее, стильнее, удобнее»).
- Дизайн-система на токенах: 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>

2026-10-08 13:26:07 +05:00

3.5 KiB

Raw Blame History

Касса 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 + подмену словаря. По умолчанию — светлая.

3.5 KiB Raw Blame History Unescape Escape