Урок 19. Задания
⚡ Кратко
Три задания на темизацию и четыре вопроса.
Задания
Задание 1. Фирменный primary
Замените --primary и --primary-foreground
на фирменную пару в обеих темах. Проверьте контраст текста на кнопке —
не ниже 4.5:1.
Задание 2. Своя пара токенов
Добавьте роль --success / --success-foreground,
свяжите её с утилитами и используйте в бейдже и кнопке подтверждения.
Убедитесь, что она корректна в тёмной теме.
Задание 3. Страница-образец
Соберите страницу /theme, где показаны: все пары токенов,
кнопки всех вариантов, поля ввода, бейджи и карточка. Она пригодится
при каждой правке темы.
Проверка понимания
Выберите один вариант ответа — правильный подсветится после клика.
Вопрос 1
Зачем каждому фону соответствует токен с суффиксом -foreground?
Вопрос 2
Что произойдёт, если убрать слово inline из @theme inline?
Вопрос 3
Как перекрасить все основные кнопки проекта?
Вопрос 4
Почему в тёмной теме --primary становится светлым?