Конфигурация и дизайн-токены — Примеры

Пример 1 — Один и тот же hex-код в одиннадцати шаблонах

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

<button class="bg-[#0f766e] text-white">Сохранить</button>
<a class="text-[#0f766e] underline">Подробнее</a>
<!-- ещё девять, два из них по случайности #0e756d -->

Решение

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: { brand: { 50: "#f0fdfa", 500: "#14b8a6", 700: "#0f766e" } },
    },
  },
};

<button class="bg-brand-700 text-white">Сохранить</button>
<a class="text-brand-700 underline">Подробнее</a>

Утилита, сгенерированная из темы, ссылается на токен: bg-brand-700 означает основной оттенок продукта, поэтому изменение в конфигурации меняет его везде, где он встречается, — именно эта гарантия позволяет подходу «сначала утилиты» пережить редизайн. В произвольном значении нет ничего, кроме самого литерала, поэтому палитра дублируется по шаблонам и расходится по одному оттенку за раз. Если сохранить числовые шаги фреймворка, но подставить свои значения, у каждого разработчика будет очевидный набор вариантов и не останется повода тянуться за hex-кодом. extend уместен, пока умолчания ещё могут быть в ходу; полностью заменять тему стоит только после поиска использований.

Пример 2 — Палитра, поддерживаемая в двух местах

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

// tokens.json
{ "brand": { "700": "#0f766e", "500": "#14b8a6" } }

// tailwind.config.js — набран вручную из файла выше
export default { theme: { extend: { colors: { brand: { 700: "#0e756d", 500: "#14b8a6" } } } } };

Решение

// tailwind.config.js — сгенерирован из одного источника
import tokens from "./tokens.json";

export default {
  theme: {
    extend: {
      colors: {
        brand: tokens.brand,
      },
    },
  },
};

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