Урок 06. Домашнее задание: цветовая система

📁 Раздел: Базовые утилиты ⏱️ Время изучения: ~45 мин 🎯 Сложность: Начальная

⚡ Кратко

Описать цветовую систему проекта: акцент, нейтраль, три статусных цвета — и применить её на странице со списком заказов.

Задание

В проекте курса добавьте страницу «Заказы» и оформите её по цветовой системе:

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

Подготовка окружения

cd tailwind-course
npm run dev

Пошаговое решение

Шаг 1. Выберите роли

Например: акцент — sky, нейтраль — slate, успех — emerald, ожидание — amber, ошибка — rose. Запишите это решение в комментарии к CSS: через месяц вы забудете, а комментарий останется.

Шаг 2. Бейджи

Одна формула на все статусы: rounded-full bg-{оттенок}-100 text-{оттенок}-800 border border-{оттенок}-200 px-2.5 py-0.5 text-xs font-medium.

Шаг 3. Подсветка строки

Фон bg-rose-50, текст оставляем text-slate-900. Так подсветка заметна, но не мешает читать.

Шаг 4. Проверка контраста

Откройте DevTools, выберите текст и посмотрите значение контраста в панели выбора цвета: для мелкого текста нужно не меньше 4.5:1.

Как проверить

  • На экране не больше четырёх имён оттенков.
  • Каждый статус имеет и цвет, и подпись.
  • Контраст основного текста — не ниже 4.5:1.
  • Нет классов вида bg-[#…].

Ориентир

Заказы

  • № 1042 · Смирнова Готово
  • № 1043 · Ковалёв Ожидает
  • № 1044 · Титова Ошибка оплаты 
<div class="max-w-2xl overflow-hidden rounded-xl border border-slate-200">
  <div class="flex items-center justify-between border-b border-slate-200 bg-white px-4 py-3">
    <h3 class="text-sm font-semibold text-slate-900">Заказы</h3>
    <button class="rounded-md bg-sky-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-sky-700">Новый заказ</button>
  </div>
  <ul class="divide-y divide-slate-200 bg-white">
    <li class="flex items-center justify-between px-4 py-3 text-sm">
      <span class="text-slate-900">№ 1042 · Смирнова</span>
      <span class="rounded-full border border-emerald-200 bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-800">Готово</span>
    </li>
    <li class="flex items-center justify-between px-4 py-3 text-sm">
      <span class="text-slate-900">№ 1043 · Ковалёв</span>
      <span class="rounded-full border border-amber-200 bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-800">Ожидает</span>
    </li>
    <li class="flex items-center justify-between bg-rose-50 px-4 py-3 text-sm">
      <span class="text-slate-900">№ 1044 · Титова</span>
      <span class="rounded-full border border-rose-200 bg-rose-100 px-2.5 py-0.5 text-xs font-medium text-rose-800">Ошибка оплаты</span>
    </li>
  </ul>
</div>