Дизайн-токены в картах

Дизайн-токены — это именованные базовые значения дизайна: цвета, шаги отступов, размеры шрифта, скругления. Дизайнеры и разработчики договариваются об именах — primary, «отступ 2», «скругление md», — и код использует только эти имена, а не случайные значения. В Sass токены естественно хранить в картах.

Файл токенов

Создайте styles/abstracts/_tokens.scss с тремя группами токенов:

// styles/abstracts/_tokens.scss
$colors: (
  "primary": #2563eb,
  "surface": #ffffff,
  "text": #1f2937,
  "muted": #6b7280,
);
 
$space: (
  1: 4px,
  2: 8px,
  3: 16px,
  4: 32px,
);
 
$radius: (
  "sm": 4px,
  "md": 8px,
);

Ключи отступов — числа: 1, 2, 3. Числовые ключи пишутся без кавычек.

Функции для чтения токенов

Каждый раз писать map.get(tokens.$colors, "primary") долго. Небольшие функции делают запись короткой и проверяют имя. Создайте styles/abstracts/_functions.scss:

// styles/abstracts/_functions.scss
@use "sass:map";
@use "tokens";
 
@function color($name) {
  @if not map.has-key(tokens.$colors, $name) {
    @error "Неизвестный токен цвета '#{$name}'.";
  }
  @return map.get(tokens.$colors, $name);
}
 
@function space($step) {
  @return map.get(tokens.$space, $step);
}
 
@function radius($name) {
  @return map.get(tokens.$radius, $name);
}

Токены в компоненте

Карточка берёт все значения из токенов:

// styles/components/_cards.scss
@use "../abstracts/functions" as fn;
 
.card {
  padding: fn.space(3);
  color: fn.color("text");
  background: fn.color("surface");
  border: 1px solid fn.color("muted");
  border-radius: fn.radius("md");
}

// styles/main.scss
@use "components/cards";

.card {
  padding: 16px;
  color: #1f2937;
  background: #ffffff;
  border: 1px solid #6b7280;
  border-radius: 8px;
}

<style>
  .card {
    padding: 16px;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #6b7280;
    border-radius: 8px;
  }
</style>
 
<div class="card">Значения карточки взяты из токенов</div>

Если дизайнер изменит «отступ 3» с 16px на 20px, вы поправите одну строку в _tokens.scss, и обновятся все карточки, формы и шапка.

Классы из токенов

Те же карты питают служебные классы, поэтому классы всегда совпадают с токенами:

// styles/utilities/_spacing.scss
@use "../abstracts/tokens";
 
@each $step, $value in tokens.$space {
  .p-#{$step} {
    padding: $value;
  }
}

// styles/main.scss
@use "utilities/spacing";

.p-1 {
  padding: 4px;
}
 
.p-2 {
  padding: 8px;
}
 
.p-3 {
  padding: 16px;
}
 
.p-4 {
  padding: 32px;
}

Почему не обычные переменные

Отдельные переменные	Токены в карте
`$space-1`, `$space-2`, `$space-3`	Одна карта `$space`
Перебрать их циклом нельзя	`@each` проходит по всем токенам
Опечатка — ошибка `Undefined variable`	Опечатку ловит `@error` в функции
Просто для маленького проекта	Масштабируется до десятков значений

Частая ошибка

Не обходите токены «только в этот раз» значением вроде padding: 15px. Одно исключение превращается в десять, и следующее изменение дизайна их пропустит. Если значения не хватает, добавьте для него токен — или уточните, не подойдёт ли ближайший существующий шаг.

Спасибо, что читаете!