Дизайн-токены и темизация

С одной темой переменные кажутся излишеством: ну да, --purple: #6544e0 вместо цвета в двадцати местах. Удобно, но не революция.

Разница видна, когда просят тёмную тему. И становится болезненной, когда после неё просят контрастную — для слабовидящих.

Если компоненты ссылаются на --purple, в тёмной теме придётся переопределить --purple на не-фиолетовый. Имя начинает врать. Дальше кто-то заводит --purple-dark, и через месяц никто не понимает, какую переменную брать.

Решение — разделить переменные по слоям. Каждый следующий ссылается на предыдущий.

1/* Уровень 1: палитра. Одна на весь проект, темы её не трогают */2:root {3  --violet-600: #6544e0;4  --violet-300: #b9a5ff;5  --red-600: #c8394a;6  --gray-900: #16181d;7  --gray-100: #f4f4f8;8  --white: #fff;9}1011/* Уровень 2: смысл. Вот это и переключают темы */12:root,13[data-theme="light"] {14  --color-surface: var(--white);15  --color-text: var(--gray-900);16  --color-accent: var(--violet-600);17  --color-danger: var(--red-600);18}1920[data-theme="dark"] {21  --color-surface: var(--gray-900);22  --color-text: var(--gray-100);23  --color-accent: var(--violet-300);24  --color-danger: #f2777a;25}2627/* Уровень 3: компонент. Нужен не всегда, только для точек настройки */28.btn {29  --btn-bg: var(--color-accent);30  background: var(--btn-bg);31}3233.btn--danger {34  /* Меняем одну переменную вместо переписывания правил */35  --btn-bg: var(--color-danger);36}

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

.btn--danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
}

.btn--danger:hover {
  background: var(--color-danger-dark);
}

.btn {
  --btn-bg: var(--color-accent);
  background: var(--btn-bg);
  border-color: var(--btn-bg);
}

.btn--danger { --btn-bg: var(--color-danger); }
.btn--ok { --btn-bg: var(--color-ok); }

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

Лечится встроенным скриптом в head — до того, как браузер что-либо нарисует. Он маленький и намеренно не вынесен в файл: внешний файл пришлось бы ждать.

1<script>2  // Выполняется до первой отрисовки — поэтому мигания нет3  (function () {4    try {5      var saved = localStorage.getItem('theme');6      var system = matchMedia('(prefers-color-scheme: dark)').matches7        ? 'dark' : 'light';8      document.documentElement.dataset.theme = saved || system;9    } catch (err) {10      document.documentElement.dataset.theme = 'light';11    }12  })();13</script>

Свойство color-scheme сообщает браузеру, какие темы поддерживает страница. От него зависят системные элементы: полосы прокрутки, поля ввода, выпадающие списки. Без него в тёмной теме останутся белые скроллбары.

Функция light-dark() — недавнее сокращение: два значения в одной строке вместо двух блоков переопределения.

1:root {2  /* Обязательно: иначе системные элементы останутся светлыми */3  color-scheme: light dark;45  /* Первое значение для светлой темы, второе для тёмной */6  --color-surface: light-dark(#fff, #16181d);7  --color-text: light-dark(#16181d, #e8eaf2);8}

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

Работающий приём — смягчить оба конца: фон не абсолютно чёрный, текст не абсолютно белый.

Токенами описывают всё, что должно быть согласованным: отступы, радиусы, тени, скорости анимации, размеры шрифта.

Польза та же, что и с цветом: значения перестают быть случайными. Отступ 13px в одном месте и 14px в другом — это не решение дизайнера, это опечатка, которую шкала не пропустит.

1:root {2  /* Шаг шкалы, а не произвольные числа */3  --space-1: 4px;4  --space-2: 8px;5  --space-3: 12px;6  --space-4: 16px;7  --space-6: 24px;89  --radius-sm: 8px;10  --radius-md: 14px;11  --radius-full: 999px;1213  --speed-fast: .15s;14  --speed-base: .3s;15  --ease: cubic-bezier(.22, 1, .36, 1);16}

1@layer tokens {2  :root {3    color-scheme: light dark;45    /* Палитра: не меняется никогда */6    --violet-600: #6544e0;7    --violet-300: #b9a5ff;8    --gray-950: #0b0e17;9    --gray-050: #f6f7fb;10  }1112  /* Светлая — она же значение по умолчанию */13  :root,14  [data-theme="light"] {15    --color-bg: var(--gray-050);16    --color-text: #131627;17    --color-accent: var(--violet-600);18    --color-border: rgb(16 20 40 / .1);19  }2021  [data-theme="dark"] {22    --color-bg: var(--gray-950);23    --color-text: #e8eaf2;24    --color-accent: var(--violet-300);25    --color-border: rgb(255 255 255 / .08);26  }2728  /* Третья тема — те же имена, другие значения.29     Ни один компонент об этом не знает */30  [data-theme="contrast"] {31    --color-bg: #000;32    --color-text: #fff;33    --color-accent: #ffe600;34    --color-border: #fff;35  }36}

• Три уровня на лендинге. Одна тема, десять цветов — хватит одного уровня семантических переменных. Палитра отдельно тут только добавит файлов.
• Токен на каждое значение. Если переменная используется один раз в одном месте, она не токен, а лишний уровень косвенности.
• Переменные внутри медиазапросов ради адаптива. Работает, но отлаживать тяжело: значение меняется невидимо. Для размеров лучше clamp().
• Хранить в токенах логику. Переменная — это значение. Если хочется положить туда целое правило, нужен класс, а не токен.

<div data-theme="contrast" class="page">  <article class="card">    <h3 class="card__title">Раф на кокосовом</h3>    <p class="card__text">Мягкий вкус</p>    <button class="btn">В корзину</button>  </article></div>

:root {  --violet-600: #6544e0;  --gray-900: #16181d;  --gray-100: #f4f4f8;  --white: #fff;}​/* Компоненты берут цвета прямо из палитры — это и надо исправить */.page { padding: 20px; background: var(--gray-100); }​.card {  padding: 16px;  background: var(--white);  color: var(--gray-900);  border-radius: 14px;}​.card__title { margin: 0 0 6px; font-size: 17px; }.card__text { margin: 0 0 12px; font-size: 14px; }​.btn {  padding: 9px 16px;  font: inherit;  color: var(--white);  background: var(--violet-600);  border: 0;  border-radius: 999px;}

1<div data-theme="contrast" class="page">2  <article class="card">3    <h3 class="card__title">Раф на кокосовом</h3>4    <p class="card__text">Мягкий вкус</p>5    <button class="btn">В корзину</button>6  </article>7</div>

1:root {2  color-scheme: light dark;34  /* Палитра */5  --violet-600: #6544e0;6  --gray-900: #16181d;7  --gray-100: #f4f4f8;8  --white: #fff;910  /* Смысл: только эти имена знают компоненты */11  --color-bg: var(--gray-100);12  --color-surface: var(--white);13  --color-text: var(--gray-900);14  --color-accent: var(--violet-600);15  --color-on-accent: var(--white);16}1718[data-theme="contrast"] {19  --color-bg: #000;20  --color-surface: #000;21  --color-text: #fff;22  --color-accent: #ffe600;23  --color-on-accent: #000;24}2526.page { padding: 20px; background: var(--color-bg); }2728.card {29  padding: 16px;30  background: var(--color-surface);31  color: var(--color-text);32  border-radius: 14px;33}3435.card__title { margin: 0 0 6px; font-size: 17px; }36.card__text { margin: 0 0 12px; font-size: 14px; }3738.btn {39  padding: 9px 16px;40  font: inherit;41  color: var(--color-on-accent);42  background: var(--color-accent);43  border: 0;44  border-radius: 999px;45}