Дизайн-токены — Примеры

Пример 1 — Двухслойный набор с одного живого экрана

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

Подобранные вручную значения на экране
  заливка кнопки сохранения   #1F6FEB
  фон страницы                #F5F6F7
  фон карточки                #FFFFFF
  текст ошибки                #B3261E
  отступы                     8px, 16px, 24px
  радиусы                     6px, 999px

Решение

{
  "primitive": {
    "colour.blue.600": "#1F6FEB",
    "colour.grey.100": "#F5F6F7",
    "colour.white": "#FFFFFF",
    "colour.red.700": "#B3261E",
    "space.2": "8px",
    "space.4": "16px",
    "space.6": "24px",
    "radius.control": "6px",
    "radius.pill": "999px"
  },
  "semantic": {
    "colour.action.default": "colour.blue.600",
    "colour.surface.base": "colour.grey.100",
    "colour.surface.raised": "colour.white",
    "colour.text.danger": "colour.red.700",
    "space.gap.control": "space.2",
    "space.block": "space.6"
  }
}

Семантика указывает на примитивы и никогда наоборот, поэтому тёмная тема подменяет то, во что семантика разрешается, не трогая компонент. Именование по роли заодно сохраняет читаемость colour.action.default после ребрендинга, тогда как blue600 уже не был бы верен. Однако если компонент тянется напрямую к colour.blue.600, тему он тихо обходит.

Пример 2 — Токены, доходящие до браузера

Набор выше должен дойти до кодовой базы, а не остаться в дизайн-файле, поэтому опубликуйте его как кастомные свойства CSS и используйте в единственном компоненте экрана; подменить приподнятую поверхность для тёмной темы можно, не правя этот компонент.

Цель
  одна кнопка сохранения настроек, использующая набор
  тёмная тема меняет только семантический слой
  ни один компонент не называет примитивный цвет или сырое значение

Решение

:root {
  /* примитивы */
  --colour-grey-100: #F5F6F7;
  --colour-grey-900: #1B1F23;
  --colour-blue-600: #1F6FEB;
  --colour-white: #FFFFFF;

  /* семантика */
  --colour-surface-raised: var(--colour-white);
  --colour-action-default: var(--colour-blue-600);
  --space-gap-control: 8px;
  --radius-control: 6px;
}

[data-theme="dark"] {
  --colour-surface-raised: var(--colour-grey-900);
}

.settings-save {
  background: var(--colour-action-default);
  color: var(--colour-surface-raised);
  padding: var(--space-gap-control);
  border-radius: var(--radius-control);
}

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