# План стилизации кнопок

Дата аудита: 01.06.2026
Среда аудита: `https://localhost`
Метод: визуальный обход через Playwright, фиксация скриншотов и computed styles.

## 1. Краткое резюме

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

Сейчас одинаковые классы могут выглядеть по-разному в разных SPA, а одинаковые действия могут получать разные цвета, размеры и плотность. Из-за этого пользователь каждый раз заново считывает интерфейс: где главное действие, где безопасное второстепенное, а где рискованное.

Цель новой структуры: закрепить единую кнопку как системный компонент с понятными ролями, размерами и правилами использования.

## 2. Что было проверено

| Раздел | Проверенные сценарии | Скриншот |
|---|---|---|
| Авторизация | Вход, показ пароля, переключение темы | [`audit-buttons-01-login.png`](../audit-buttons-01-login.png) |
| Дашборд админки | Быстрые переходы, recheck, сайдбар | [`audit-buttons-02-dashboard.png`](../audit-buttons-02-dashboard.png) |
| Пользователи | Создание пользователя, архивирование | [`audit-buttons-03-users-form.png`](../audit-buttons-03-users-form.png) |
| Меню настроек | Выпадающее меню, выход, переход в настройки | [`audit-buttons-04-settings-menu.png`](../audit-buttons-04-settings-menu.png) |
| Настройки | Навигация отдельной SPA | [`audit-buttons-05-settings-general.png`](../audit-buttons-05-settings-general.png) |
| Кабинет преподавателя | Недели, сегодня, выход, тема | [`audit-buttons-06-teacher.png`](../audit-buttons-06-teacher.png) |
| Кабинет студента | Недели, сегодня, выход, тема | [`audit-buttons-07-student.png`](../audit-buttons-07-student.png) |
| Модальное окно | Создание ручной сетки, отмена, закрытие | [`audit-buttons-08-modal.png`](../audit-buttons-08-modal.png) |

Дополнительно были сохранены скриншоты отдельных разделов: календарный график, аудитории, группы, дисциплины, расписание, формы обучения, база данных, временные слоты.

## 3. Текущее состояние

### 3.1. Авторизация

![Экран авторизации](../audit-buttons-01-login.png)

Найдены кнопки:

| Кнопка | Текущая роль | Комментарий |
|---|---|---|
| `Войти` | Primary | Корректно считывается как главное действие экрана. |
| `Показать пароль` | Icon utility | Нужен единый icon-only стиль и обязательный `aria-label`. |
| `Переключить тему` | Icon utility | Отличается от такой же кнопки в кабинетах преподавателя и студента. |

Вывод: экран логина близок к правильной иерархии, но icon-only controls нужно привести к общей форме и размеру.

### 3.2. Дашборд админки

![Дашборд админки](../audit-buttons-02-dashboard.png)

Найдены кнопки и ссылки-кнопки:

| Кнопка | Текущий вид | Проблема |
|---|---|---|
| `Конструктор расписания` | Primary link | Хороший кандидат на основной CTA блока. |
| `Точечные изменения / Просмотр` | Secondary link | Выглядит как второстепенное действие, это корректно. |
| `Перепроверить` | `btn-primary`, маленькая высота | Primary используется для сервисного действия, хотя это не главное действие страницы. |
| `Настройки` | Sidebar button | Визуально близко к навигации, но реализовано как кнопка. |
| `Переключить тему` | Круглая icon button | Отличается от публичных кабинетов. |

Основной вывод: `btn-primary` сейчас означает и главный CTA, и компактную служебную кнопку. Это размывает иерархию.

### 3.3. Формы и таблицы админки

![Форма пользователей](../audit-buttons-03-users-form.png)

Типичные кнопки:

| Кнопка | Смысл | Текущее впечатление |
|---|---|---|
| `Создать` | Подтверждение формы | Главная кнопка, но размер и стиль отличаются между основной админкой и настройками. |
| `Архивировать` | Рискованное, но часто обратимое действие | Визуально слишком близко к удалению. |
| `Изменить` | Второстепенное действие строки | В разных разделах бывает фиолетовой или нейтральной. |
| `Удалить` | Деструктивное действие | Встречается в разных размерах и оттенках красного. |

Проблема: таблицы используют кнопки как плотный action bar, но размеры скачут от `24x28` до `113x28` и `96x40`. Это создаёт визуальный шум в строках.

### 3.4. Меню настроек и выход

![Меню настроек](../audit-buttons-04-settings-menu.png)

Кнопка `Выйти` находится рядом с навигационными пунктами и выглядит почти как обычный пункт меню. Семантически это сессионное действие с риском потерять текущий контекст, поэтому ему нужен отдельный quiet-danger стиль.

Рекомендация: `Выйти` не должен выглядеть как обычная навигация. Достаточно `Danger subtle`: красный текст на спокойной поверхности без агрессивной заливки.

### 3.5. Отдельная SPA настроек

![Общие настройки](../audit-buttons-05-settings-general.png)

В настройках виден тот же сайдбарный паттерн, но кнопки внутри разделов получают другую визуальную систему.

Пример различий:

| Класс | Основная админка | Настройки |
|---|---|---|
| `btn-primary` | Часто прозрачный фон, белый текст, визуальная заливка может приходить из другого слоя | Фиолетовая заливка `rgb(139, 92, 246)`, высота `40px`, жирность `700` |
| `btn-delete` | Красный tint, высота часто `28px`, font-weight `400` | Красный tint, высота `40px`, font-weight `700` |
| `btn-secondary` | Фиолетовый tint или светлая surface-кнопка | Нейтральная surface-кнопка |

Вывод: одинаковое имя класса не является дизайн-контрактом. Компонент кнопки нужно нормализовать на уровне токенов и модификаторов.

### 3.6. Кабинеты преподавателя и студента

![Кабинет преподавателя](../audit-buttons-06-teacher.png)

![Кабинет студента](../audit-buttons-07-student.png)

В публичных кабинетах используется отдельная светлая система:

| Элемент | Преподаватель | Студент |
|---|---|---|
| `Сегодня` | Primary blue `rgb(29, 78, 216)` | Primary teal `rgb(15, 118, 110)` |
| `Выйти` | Outline, белый фон, radius `8px` | Outline, белый фон, radius `8px` |
| `‹` / `›` | Outline icon-like buttons | Outline icon-like buttons |
| `Переключить тему` | Текстовый символ `◐` | Текстовый символ `◐` |

Проблема: одно действие `Сегодня` меняет цвет в зависимости от кабинета. Это допустимо для брендинга ролей, но плохо для системных кнопок. Ролевые цвета лучше использовать в расписании, бейджах и карточках, а не в базовой кнопочной иерархии.

### 3.7. Модальные окна

![Модальное окно создания ручной сетки](../audit-buttons-08-modal.png)

Найдены:

| Кнопка | Роль | Рекомендация |
|---|---|---|
| `Создать сетку` | Primary | Оставить primary. |
| `Отмена` | Secondary/Ghost | Сделать ghost или secondary без акцента. |
| `Закрыть` (`×`) | Icon close | Привести к icon-only button `40x40` или `36x36`, с `aria-label="Закрыть"`. |

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

## 4. Семантическая группировка найденных кнопок

### Primary: главное действие

Примеры: `Войти`, `Создать`, `Добавить`, `Сохранить правило`, `Сохранить год`, `Сохранить семестр`, `Сохранить график`, `Сохранить сетку`, `Сохранить слот`, `Создать сетку`.

Правило: одна primary-кнопка на форму, модальное окно или смысловой блок. Если на экране несколько форм, primary может быть в каждой форме, но не должна превращаться в оформление всех кнопок подряд.

### Secondary: обычное второстепенное действие

Примеры: `Изменить`, `Обновить`, `Показать`, `Тест`, `Сменить статус`, `Преподаватели`, `Загрузить сетку`, `Заполнить диапазон`.

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

### Tertiary / Ghost: тихое действие

Примеры: `Очистить`, `Очистить форму`, `Отмена`, `Назад в панель`, `Свернуть`, `Из формы`, `Все`, `Точечные изменения / Просмотр`.

Правило: использовать там, где действие должно быть доступно, но не конкурировать с сохранением или созданием.

### Danger: деструктивное действие

Примеры: `Удалить`.

Правило: только для необратимых или почти необратимых операций. Красный цвет должен быть зарезервирован именно под риск.

### Danger subtle: рискованное, но не удаление

Примеры: `Архив`, `Архивировать`, `Удалить сетку`, `Выйти`.

Правило: использовать для действий с негативным или сессионным эффектом, но без визуальной паники solid-red кнопки.

### Icon button: компактное служебное действие

Примеры: `Переключить тему`, `Показать пароль`, `Скрыть панель`, `Закрыть`, `‹`, `›`.

Правило: фиксированный квадратный размер, единое состояние hover/focus, обязательный доступный текст через `aria-label`.

### Navigation item: навигация, а не кнопка действия

Примеры: пункты сайдбара `Дашборд`, `Конструктор правил`, `Календарный график`, `Пользователи`, `Общие настройки`.

Правило: не смешивать навигацию с action button. У неё отдельные active, hover и focus-состояния.

## 5. Предлагаемая дизайн-система кнопок

### 5.1. Токены

| Токен | Светлая тема | Тёмная тема | Назначение |
|---|---|---|---|
| `--button-primary-bg` | `#4F46E5` | `#8B5CF6` | Основное действие |
| `--button-primary-bg-hover` | `#4338CA` | `#7C3AED` | Hover primary |
| `--button-primary-text` | `#FFFFFF` | `#FFFFFF` | Текст primary |
| `--button-secondary-bg` | `#FFFFFF` | `rgba(255,255,255,0.04)` | Второстепенная поверхность |
| `--button-secondary-bg-hover` | `#F1F5F9` | `rgba(255,255,255,0.08)` | Hover secondary |
| `--button-secondary-border` | `#CBD5E1` | `rgba(255,255,255,0.10)` | Граница secondary |
| `--button-secondary-text` | `#334155` | `#F8FAFC` | Текст secondary |
| `--button-ghost-bg-hover` | `#F8FAFC` | `rgba(255,255,255,0.06)` | Hover ghost |
| `--button-danger-bg` | `#DC2626` | `#DC2626` | Удаление |
| `--button-danger-bg-hover` | `#B91C1C` | `#B91C1C` | Hover удаления |
| `--button-danger-subtle-bg` | `#FEF2F2` | `rgba(239,68,68,0.13)` | Риск без solid-заливки |
| `--button-danger-subtle-text` | `#B91C1C` | `#FECACA` | Текст risk subtle |
| `--button-focus-ring` | `rgba(79,70,229,0.35)` | `rgba(139,92,246,0.45)` | Focus outline |

Примечание: для всего продукта лучше выбрать один primary-акцент. Для текущей тёмной админки логично оставить фиолетовый `#8B5CF6`, а для светлой темы использовать более читаемый `#4F46E5`. Ролевые цвета преподавателя и студента лучше вынести из кнопок в расписание и бейджи.

### 5.2. Размеры

| Размер | Высота | Padding | Шрифт | Где применять |
|---|---:|---|---|---|
| `sm` | `32px` | `0 12px` | `13px / 600` | Таблицы, компактные действия строк |
| `md` | `40px` | `0 16px` | `14px / 600` | Формы, фильтры, модальные окна |
| `lg` | `48px` | `0 20px` | `15px / 700` | Вход, главный CTA экрана |
| `icon-sm` | `32x32` | `0` | icon `18px` | Табличные иконки |
| `icon-md` | `40x40` | `0` | icon `20px` | Верхние панели, модалки, навигация недель |

Базовый `border-radius`: `8px`.

Почему `8px`: интерфейс административный и рабочий. Радиус `8px` сохраняет мягкость, но выглядит собраннее, чем повсеместные `10px`, особенно в таблицах и плотных формах.

### 5.3. Варианты

#### Primary

Использовать для главного подтверждения.

| Состояние | Стиль |
|---|---|
| Default | Фон primary, белый текст, без видимой границы |
| Hover | Фон темнее на 8-12% |
| Focus | Видимый ring `2px` |
| Disabled | Нейтральный фон, muted-текст, `cursor: not-allowed` |

Примеры: `Войти`, `Создать`, `Сохранить правило`, `Создать сетку`.

#### Secondary

Использовать для обычных действий рядом с primary.

| Состояние | Стиль |
|---|---|
| Default | Surface-фон, тонкая граница, основной текст |
| Hover | Чуть более светлая/контрастная поверхность |
| Focus | Такой же focus ring, как у primary |
| Disabled | Opacity `0.5` |

Примеры: `Изменить`, `Обновить`, `Показать`, `Тест`.

#### Ghost

Использовать для тихих действий.

| Состояние | Стиль |
|---|---|
| Default | Прозрачный фон, muted/regular text |
| Hover | Лёгкий surface-hover |
| Focus | Ring без изменения иерархии |

Примеры: `Отмена`, `Очистить`, `Назад в панель`, `Свернуть`.

#### Danger

Использовать только для удаления.

| Состояние | Стиль |
|---|---|
| Default | Красная заливка, белый текст |
| Hover | Более тёмный красный |
| Focus | Красный или общий focus ring |

Примеры: `Удалить`.

#### Danger subtle

Использовать для рискованных действий без полного удаления.

| Состояние | Стиль |
|---|---|
| Default | Красный tint-фон, красный текст, мягкая border |
| Hover | Более насыщенный tint |
| Focus | Видимый ring |

Примеры: `Архивировать`, `Архив`, `Выйти`, `Удалить сетку`.

#### Icon button

Использовать для действий, где текст заменён иконкой.

| Параметр | Правило |
|---|---|
| Размер | `32x32` в таблицах, `40x40` в тулбарах |
| Иконка | 18-20px, один набор иконок |
| Текст | Только через `aria-label` |
| Форма | Квадрат с radius `8px`, не круг, кроме специальных случаев avatar/fab |

Примеры: `Переключить тему`, `Показать пароль`, `Закрыть`, `Предыдущая неделя`, `Следующая неделя`.

## 6. Маппинг текущих кнопок на новую систему

| Текущие кнопки | Новый тип | Размер |
|---|---|---|
| `Войти` | `Primary` | `lg` |
| `Создать`, `Добавить` | `Primary` | `md` |
| `Сохранить правило`, `Сохранить год`, `Сохранить семестр`, `Сохранить график`, `Сохранить сетку`, `Сохранить слот` | `Primary` | `md` |
| `Создать сетку` | `Primary` | `md` |
| `Изменить`, `Обновить`, `Показать`, `Тест`, `Сменить статус` | `Secondary` | `sm` в таблицах, `md` в формах |
| `Преподаватели`, `Подгруппы`, `Календарь`, `Сетка` | `Secondary` | `sm` |
| `Очистить`, `Очистить форму`, `Отмена`, `Свернуть`, `Из формы`, `Все` | `Ghost` | `sm` или `md` |
| `Точечные изменения / Просмотр`, `Назад в панель` | `Ghost navigation` | `md` |
| `Удалить` | `Danger` | `sm` в таблицах, `md` в модалках |
| `Архив`, `Архивировать`, `Выйти`, `Удалить сетку` | `Danger subtle` | `sm` или `md` |
| `Переключить тему`, `Показать пароль`, `Скрыть панель`, `Закрыть`, `‹`, `›` | `Icon button` | `icon-sm` или `icon-md` |
| Пункты сайдбара | `Nav item` | отдельный nav-компонент |

## 7. Правила композиции

### Формы

Primary-кнопка должна стоять в конце формы или action row. Рядом с ней допустимы secondary/ghost-действия, но не ещё одна primary без причины.

Рекомендуемый порядок:

| Сценарий | Порядок |
|---|---|
| Форма создания | `Очистить` как ghost, `Создать` как primary |
| Форма редактирования | `Отмена` как ghost, `Сохранить` как primary |
| Фильтр | `Сбросить` как ghost, `Показать` как secondary или primary, если это единственное действие блока |

### Таблицы

В строках таблицы использовать только `sm`.

Рекомендуемый порядок:

1. Основное безопасное действие: `Изменить`, `Преподаватели`, `Подгруппы`.
2. Дополнительное действие: `Календарь`, `Сетка`.
3. Рискованное действие: `Архивировать` или `Удалить`.

Удаление лучше отделять визуально от остальных кнопок небольшим gap.

### Модальные окна

В модалке primary должен соответствовать заголовку и цели модалки.

Пример:

| Заголовок | Primary | Secondary/Ghost |
|---|---|---|
| `Новая ручная сетка` | `Создать сетку` | `Отмена` |
| `Удалить слот` | `Удалить` как danger | `Отмена` |
| `Редактировать слот` | `Сохранить слот` | `Отмена` |

Кнопка закрытия всегда icon-only с `aria-label="Закрыть"`.

### Навигация

Сайдбарные пункты не должны наследовать стили action-кнопок. У них отдельная логика:

| Состояние | Стиль |
|---|---|
| Default | Прозрачный фон, muted-текст |
| Hover | Нейтральный surface-hover |
| Active | Акцентный tint-фон, accent-текст |
| Focus | Видимый ring/outline |

## 8. Главные исправления по приоритету

| Приоритет | Что сделать | Почему важно |
|---|---|---|
| P1 | Нормализовать `btn-primary`, `btn-secondary`, `btn-delete` между основной админкой и настройками | Один класс должен означать один визуальный контракт |
| P1 | Развести `Danger` и `Danger subtle` | `Удалить` и `Архивировать` не должны выглядеть одинаково опасными |
| P1 | Ввести размерную шкалу `sm/md/lg/icon` | Таблицы и формы станут визуально ровнее |
| P2 | Унифицировать `Переключить тему`, `Закрыть`, `‹`, `›`, `Показать пароль` как icon buttons | Повысит предсказуемость и доступность |
| P2 | Убрать ролевые primary-цвета из student/teacher кнопок | Одинаковые действия будут считываться одинаково |
| P3 | Заменить текстовые символы `◐`, `×`, `‹`, `›` на иконки единого набора | Интерфейс станет аккуратнее и доступнее |

## 9. Визуальный референс поведения

```text
Primary
[ Сохранить правило ]
Фон: акцентный, текст белый. Только главное действие.

Secondary
[ Изменить ]
Фон: поверхность, тонкая граница. Обычное действие.

Ghost
[ Отмена ]
Фон: прозрачный. Тихое действие без конкуренции.

Danger
[ Удалить ]
Фон: красный. Только необратимое действие.

Danger subtle
[ Архивировать ]
Фон: красный tint. Рискованное, но не полноценное удаление.

Icon
[ icon ]
Фиксированный квадрат. Доступное название через aria-label.
```

## 10. Почему это решение улучшит интерфейс

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

Разделение `Danger` и `Danger subtle` особенно важно для админ-панели. Сейчас `Архивировать` визуально конкурирует с `Удалить`, хотя риск у этих действий разный. После унификации красный solid будет означать только настоящее удаление.

Единая размерная шкала сделает таблицы спокойнее. В строках не будет скачков высоты и плотности, а формы и модалки начнут выглядеть как части одной системы.

Общий primary-цвет вернёт продукту целостность. Ролевые цвета можно сохранить там, где они помогают считывать расписание и принадлежность данных, но базовые действия должны оставаться стабильными.

## 11. Приложение: дополнительные скриншоты

| Раздел | Скриншот |
|---|---|
| Конструктор правил | ![Конструктор правил](../audit-buttons-rules.png) |
| Календарный график | ![Календарный график](../audit-buttons-calendar.png) |
| Просмотр расписаний | ![Просмотр расписаний](../audit-buttons-schedule-view.png) |
| Аудиторный фонд | ![Аудиторный фонд](../audit-buttons-classrooms.png) |
| Группы обучения | ![Группы обучения](../audit-buttons-groups.png) |
| Структура вуза | ![Структура вуза](../audit-buttons-structure.png) |
| Дисциплины | ![Дисциплины](../audit-buttons-subjects.png) |
| Пользователи | ![Пользователи](../audit-buttons-users.png) |
| Временные слоты | ![Временные слоты](../audit-buttons-settings-time-slots.png) |
| Формы обучения | ![Формы обучения](../audit-buttons-settings-study-forms.png) |
| База данных | ![База данных](../audit-buttons-settings-database.png) |