# Вид Zeyt

Приложение открывается внутри Zeyt, и лучше всего оно выглядит, когда его не отличить от остального Zeyt. Для этого есть
набор вида: два файла, которые кладут в пакет приложения. В нём цвета, шрифт и элементы самого Zeyt. Тема берётся из Zeyt,
и светлая, и тёмная. Текст растёт вместе с системным размером, а касаться всего удобно: каждый элемент не меньше 44 px.
Этим набором сделаны приложения Zeyt.

## Подключить

Скачайте [pairx-ui.css](https://dev.zeyt.org/download/pairx-ui.css) и [pairx-ui.js](https://dev.zeyt.org/download/pairx-ui.js), положите их рядом с `index.html` и
подключите в `<head>`:

```html
<link rel="stylesheet" href="pairx-ui.css">
<script src="pairx-ui.js"></script>
```

Затем, до первого экрана, — `PairxUI.start()`: он берёт точные цвета открытого Zeyt (`ui.theme`), отступы (`ui.safeArea`) и
дальше следит за сменой темы.

```js
await PairxUI.start();
render();
pairx.call("app.ready");
```

Без моста — в обычном браузере или в тесте — набор тоже работает: цвета Zeyt берутся по теме системы.

## Страница и текст

```html
<main class="px-page">
  <h1 class="px-large-title">Крокодил</h1>
  <p class="px-subhead px-muted">Один рисует — остальные угадывают.</p>
</main>
```

`.px-page` даёт отступы страницы с учётом краёв экрана. Размеры текста — те же, что в Zeyt: `.px-large-title`, `.px-title`,
`.px-title3`, `.px-headline`, `.px-body`, `.px-subhead`, `.px-footnote`, `.px-caption`. Задавайте свои размеры в `rem`, а не в `px`:
так текст растёт с Dynamic Type на iPhone и с размером шрифта на Android. Ещё есть цвета: `.px-muted`, `.px-accent`,
`.px-good`, `.px-destructive`.

## Списки

Как на страницах Zeyt — карточка строк, заголовок над ней и пояснение под ней:

```html
<section class="px-section">
  <h2 class="px-section-header">Партия</h2>
  <div class="px-list">
    <div class="px-row">
      <div class="px-row-main"><p class="px-row-title">Раундов</p></div>
      <span class="px-row-value">8</span>
    </div>
    <label class="px-row">
      <span class="px-row-main"><span class="px-row-title">Подсказки буквами</span></span>
      <input type="checkbox" role="switch" class="px-switch" checked>
    </label>
    <button class="px-row" type="button">
      <span class="px-row-main"><span class="px-row-title">Набор слов</span></span>
      <span class="px-row-value">Обычные</span>
      <span class="px-row-chevron" aria-hidden="true"></span>
    </button>
  </div>
  <p class="px-section-footer">Подсказки открывают буквы слова на 30-й и 45-й секунде.</p>
</section>
```

Строка-кнопка (`button.px-row`) подсвечивается при нажатии. `.px-row--accent` и `.px-row--destructive` окрашивают её название.

## Кнопки

- `.px-button` — главная, во всю ширину; кнопка называет действие: «Начать игру», «Отправить».
- `.px-button--tonal` — второстепенная, `.px-button--plain` — текстом, `.px-button--destructive` — разрушительная.
- `.px-button--small` — маленькая рядом со строкой: 36 px на вид, 44 px для касания.
- `.px-icon-button` — круглая со значком; у неё обязательно `aria-label`, `aria-pressed="true"` — выбранный инструмент.

Главное действие экрана удобнее отдать [нативной кнопке Zeyt](https://dev.zeyt.org/guides/interface): она стоит над клавиатурой и жестами системы.

## Поля и выбор

- `.px-field` — поле ввода и `textarea`.
- `.px-chips` с `.px-chip[aria-pressed]` — категории и фильтры.
- `.px-segmented` с кнопками `role="radio"` и `aria-checked` — выбор одного из двух-трёх.
- `input.px-switch[role="switch"]` — выключатель.

## Люди

```js
row.prepend(PairxUI.avatar({ name: "Анна Смирнова", id: member.id, present: true }));
```

Аватар — инициалы человека на одном из семи цветов Zeyt: у одного человека в приложении всегда один цвет. `present` ставит
зелёную точку, как в «в сети», — для тех, кто сейчас в приложении (`context.present`, мост 1.2). Несколько аватаров рядом —
`.px-avatars`.

## Состояния

У каждого экрана с данными есть три состояния, а ошибка фонового обновления не стирает уже показанное:

- загрузка — `.px-spinner` или `.px-progress`;
- пусто — `.px-empty`: значок, заголовок, пояснение и одна главная кнопка;
- ошибка — строка с понятным текстом и кнопкой «Повторить».

## Лист

```html
<dialog class="px-sheet" id="rules">
  <div class="px-sheet-grabber" aria-hidden="true"></div>
  <h2 class="px-title3">Правила</h2>
  …
</dialog>
```

```js
const rules = PairxUI.sheet(document.getElementById("rules"));
rules.open();
```

Лист открывается снизу; нажатие на затемнение его закрывает.

## Что ещё в pairx-ui.js

- `PairxUI.onTheme(callback)` — тема сменилась: например, перерисовать холст.
- `PairxUI.initials(name)` — одна-две буквы имени.
- `PairxUI.plural(n, "игрок", "игрока", "игроков")` — слово для числа.

## Под капотом

- **Шрифт.** На Android Zeyt отдаёт приложениям свой шрифт Inter с их же адреса, `/_pairx/fonts/`. На iPhone — системный, как в
  самом Zeyt. Пути под `/_pairx/` принадлежат Zeyt: файлы приложения с такими путями не откроются.
- **Размер текста.** На Android приложение получает размер шрифта телефона так же, как Chrome: растут буквы, а длины в `rem` — нет.
  Поэтому круги аватаров и круглые кнопки набор растит сам — по переменной `--px-zoom`.
- **Цвета** — переменные `--px-background`, `--px-surface`, `--px-text`, `--px-muted`, `--px-line`, `--px-accent`, `--px-accent-fill`,
  `--px-good`, `--px-destructive`. Используйте их в своих стилях, а не свои цвета, — тогда приложение сменит тему вместе с Zeyt.