# Перекрасить школу под фирменный стиль

**Задача:** школа выглядит как наш продукт, а должна выглядеть как ваша школа —
фирменный цвет, свой шрифт, свои углы.

**Сколько занимает:** пять минут на цвет, полчаса вместе с проверкой.

**Работает ли сегодня:** да, целиком. Это единственный рецепт в разделе, который
не упирается ни в API, ни в якоря.

## Что понадобится

Право менять настройки школы и фирменный цвет в шестнадцатеричном виде — тот самый,
который лежит в вашем брендбуке.

## Шаг 1. Одна строка

Настройки школы → «Оформление» → создать тему → в поле CSS:

```css
:root {
  --brand: #C2185B;
}
```

Посмотрите предпросмотр. Изменится **не только кнопка**: акцент, наведение, нажатие,
бледная подложка выделенной строки, рамка контурной кнопки, цвет ссылок, активный
пункт меню, заполненная часть прогресса и кольцо фокуса.

И всё это — **отдельно для светлой и тёмной темы**. Малиновая школа остаётся
малиновой в тёмной теме, а не превращается в бурую.

### Почему одна переменная, а не десять

Из `--brand` производные считаются формулами в цветовом пространстве, где светлота
отделена от насыщенности. Две из них считаются не «покрасивее», а по порогу
контраста:

- **`--text-accent`** — акцент, когда он текст или ссылка. Всегда темнее заливки,
  потому что текст обязан давать контраст 4.5:1, а фирменный цвет школы этого
  не гарантирует.
- **`--text-on-accent`** — цвет надписи **поверх** акцентной заливки. Считается сам:
  на тёмном акценте светлый, на светлом — тёмный. Поэтому у школы с песочным
  фирменным цветом не получится белых букв на жёлтой кнопке.
- **`--focus-ring`** — кольцо фокуса. Намеренно **не равно** акценту: у светлой школы
  акцент даёт 1.5:1, кольцо исчезает, и вместе с ним исчезает возможность работать
  с клавиатуры.

Задав десять переменных руками, вы эти пороги потеряете. Задав одну — получите их
бесплатно.

## Шаг 2. Шрифт

```css
:root {
  --brand: #C2185B;
  --font-sans-brand: "PT Sans";
}
```

Менять `--font-sans` целиком не нужно: `--font-sans-brand` стоит первой в её списке,
а запасные варианты на случай «шрифт не загрузился» останутся нашими.

Шрифт должен быть доступен браузеру: системный, подключённый через `@font-face`
в той же теме или через ваш CDN.

## Шаг 3. Углы и плотность

```css
:root {
  --brand: #C2185B;
  --font-sans-brand: "PT Sans";

  /* Острые углы вместо скруглённых */
  --radius-control: 0;
  --radius-card: 0;

  /* Плотнее: было 16, стало 12 */
  --space-4: 12px;

  /* Плоско: без теней у карточек */
  --shadow-card: none;
}
```

Полный перечень с описаниями и значениями по умолчанию —
[Переменные оформления](/appearance/variables/).

## Шаг 4. Применить

Предпросмотр → применить. История правок сохраняется: если получилось не то,
откат к предыдущей редакции — одна кнопка.

## Что проверить обязательно

Четыре вещи. Первые три — за минуту, четвёртая — то, из-за чего вообще написан
этот раздел.

**1. Тёмная тема.** Переключите тему в системе или в настройках и пройдите те же
экраны. Акцент в тёмной теме автоматически светлеет — убедитесь, что получившийся
оттенок вам подходит.

**2. Кольцо фокуса.** Нажмите Tab несколько раз на любом экране. Кольцо должно быть
**видно** на каждом элементе. Если вы не переопределяли `--focus-ring`, оно видно
по построению; если переопределяли — проверьте на светлых подложках.

**3. Текст на акценте.** Найдите главную кнопку и прочитайте надпись на ней.
Если вы не трогали `--text-on-accent`, она читается по построению.

**4. Экраны, которые темой не оформляются.** Их три: вход, настройки школы
и настройки аккаунта. Они специально исключены, и это значит, что **там ваш
фирменный цвет не появится**. Это не ошибка — это [аварийный
выключатель](/appearance/kill-switch/): экран, на котором чинят последствия
неудачной темы, ломать нельзя в принципе.

## Чего этим не сделать

**Спрятать конкретный элемент.** Переменные меняют вид **везде**, где используются.
Задачи вида «убрать колонку из таблицы заказов» решаются
[якорями](/appearance/anchors/), а их в продукте пока нет.

**Поменять цвета состояний.** Зелёное «оплачено» и красное «отказ» не отдаются
школе намеренно: они должны выглядеть одинаково во всех школах, иначе ученик
и куратор перестают понимать экран с первого взгляда.

**Написать селектор по нашей вёрстке.** Технически можно, но это отложенная поломка:
при первой же перевёрстке правило перестанет применяться — молча, при обновлении,
без ошибки в логах.

## Готовый пример целиком

Скопируйте, замените цвет и шрифт на свои:

```css
:root {
  /* Единственное обязательное */
  --brand: #C2185B;

  /* Необязательное */
  --font-sans-brand: "PT Sans";
  --radius-control: 4px;
  --radius-card: 4px;
  --shadow-card: none;
}
```

Всё остальное — акцент, наведение, нажатие, ссылки, кольцо фокуса, тёмная тема —
посчитается само.