Токены дизайна

Токены дизайна представляют собой единицы абстракции для хранения значений, используемых в интерфейсе: цвета, размеры, отступы, шрифты и другие параметры визуального оформления. В FAST Element они служат связующим звеном между стилями компонентов и их поведением, обеспечивая единообразие и масштабируемость интерфейсов.

Определение токена

Токен создается через функцию DesignToken.create, которая возвращает объект, способный хранить значение и распространять его по компонентам. Каждый токен имеет уникальное имя и может иметь значение по умолчанию.

Пример создания базового токена цвета:

import { DesignToken } from "@microsoft/fast-element";

const accentColor = DesignToken.create<string>("accent-color");
accentColor.setDefault("#0078D4");

Здесь:

  • accentColor — объект токена, хранящий значение цвета.
  • setDefault задает значение по умолчанию, используемое компонентом, если не задано другое.

Применение токенов в компонентах

Токены интегрируются в стили компонентов через CSS-переменные. В FAST Element для этого используется синтаксис ${token} внутри шаблонов стилей:

import { css, FASTElement } from "@microsoft/fast-element";

const styles = css`
  :host {
    background-color: ${accentColor};
    color: white;
    padding: 16px;
    border-radius: 8px;
  }
`;

class MyButton extends FASTElement {}
MyButton.styles = styles;

В этом примере значение accentColor автоматически конвертируется в CSS-переменную, которую можно переопределить на уровне родительского компонента или документа.

Локальные и глобальные токены

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

const localPadding = DesignToken.create<number>("local-padding");
localPadding.setDefault(12);

styles = css`
  :host {
    padding: ${localPadding}px;
  }
`;

Глобальные токены удобно использовать для базовой палитры цветов, типографики и основных размеров, а локальные — для специфических компонентов.

Переопределение токенов

Значение токена можно изменить через метод setValueFor для конкретного элемента:

accentColor.setValueFor(document.body, "#FF5733");

В этом случае все компоненты, использующие токен accentColor, внутри document.body автоматически получат новое значение.

Поддержка наследования

FAST Element поддерживает наследование токенов: если токен переопределен на родительском элементе, дочерние элементы автоматически используют это значение. Это делает возможным создание тем и динамическое изменение внешнего вида приложений без изменения исходного кода компонентов.

Токены для сложных структур

Токены могут хранить не только простые значения (цвет, число, строку), но и объекты, массивы или функции, что позволяет создавать более гибкие настройки дизайна:

const spacingToken = DesignToken.create<{ small: number; large: number }>("spacing");
spacingToken.setDefault({ small: 4, large: 16 });

Использование в CSS-шаблонах может быть реализовано через вычисляемые значения:

const styles = css`
  :host {
    padding: ${x => x.spacing.small}px ${x => x.spacing.large}px;
  }
`;

Интеграция с темами

Токены дизайна — основной инструмент для поддержки тем в FAST Element. Можно создать несколько наборов значений токенов для разных тем и применять их к документу или отдельным компонентам, что позволяет динамически менять внешний вид интерфейса:

const darkThemeColor = "#1A1A1A";
const lightThemeColor = "#FFFFFF";

function applyTheme(isDark: boolean) {
    accentColor.setValueFor(document.body, isDark ? darkThemeColor : lightThemeColor);
}

Ключевые преимущества использования токенов

  • Унификация интерфейса — все компоненты используют общие значения.
  • Легкость поддержки — изменение токена автоматически обновляет все зависимости.
  • Гибкость темизации — быстрый переход между светлыми и тёмными темами.
  • Повторное использование — один токен может применяться в нескольких компонентах или проектах.

Токены дизайна в FAST Element позволяют создавать модульные, масштабируемые и управляемые интерфейсы, обеспечивая чистую архитектуру компонентов и простую поддержку визуального стиля на всех уровнях приложения.

Оглавление