Система дизайн-токенов

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

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

Дизайн-токен — это атомарная единица визуального свойства. В контексте SvelteKit UI библиотек токены обычно определяются в формате JSON или TypeScript объектов. Структура токена может включать:

export const tokens = {
  colors: {
    primary: "#1E40AF",
    secondary: "#FBBF24",
    background: "#F3F4F6",
    text: "#111827"
  },
  spacing: {
    xs: "4px",
    sm: "8px",
    md: "16px",
    lg: "24px",
    xl: "32px"
  },
  typography: {
    fontFamily: "'Inter', sans-serif",
    fontSize: {
      sm: "0.875rem",
      md: "1rem",
      lg: "1.25rem"
    },
    fontWeight: {
      regular: 400,
      medium: 500,
      bold: 700
    }
  },
  radii: {
    sm: "4px",
    md: "8px",
    lg: "16px"
  }
};

Ключевое преимущество такой структуры — возможность легко ссылаться на токены в компонентах и стилях, что снижает риск рассогласования интерфейса при изменении визуальных параметров.

Интеграция токенов с компонентами

В SvelteKit компоненты могут напрямую использовать токены через импорты:

<script lang="ts">
  import { tokens } from '$lib/design/tokens';
</script>

<button
  style="background-color: {tokens.colors.primary}; color: {tokens.colors.text}; padding: {tokens.spacing.md}; border-radius: {tokens.radii.md};"
>
  Кнопка
</button>

При такой интеграции изменения в файле токенов автоматически отражаются во всех компонентах, использующих эти токены.

Использование токенов в CSS и SCSS

Для более масштабируемых проектов токены можно интегрировать в CSS переменные, чтобы использовать их в стилях без инлайн-стилей:

// src/lib/design/tokens-to-css.ts
import { tokens } from './tokens';

export function generateCssVariables() {
  const vars: string[] = [];
  Object.entries(tokens.colors).forEach(([key, value]) => {
    vars.push(`--color-${key}: ${value};`);
  });
  Object.entries(tokens.spacing).forEach(([key, value]) => {
    vars.push(`--spacing-${key}: ${value};`);
  });
  return `:root { ${vars.join(' ')} }`;
}

Подключение переменных в глобальные стили:

<style global>
  {@html generateCssVariables()}
</style>

Теперь CSS и SCSS файлы могут использовать переменные:

.button {
  background-color: var(--color-primary);
  padding: var(--spacing-md);
  border-radius: var(--radii-md);
}

Динамические токены и темы

SvelteKit UI библиотеки поддерживают динамические темы через дизайн-токены. Стандартная практика — хранить несколько наборов токенов для светлой и тёмной темы:

export const lightTheme = {
  ...tokens,
  colors: {
    ...tokens.colors,
    background: "#FFFFFF",
    text: "#111827"
  }
};

export const darkTheme = {
  ...tokens,
  colors: {
    ...tokens.colors,
    background: "#111827",
    text: "#F9FAFB"
  }
};

Переключение темы можно реализовать через Svelte store:

import { writable } from 'svelte/store';
export const theme = writable(lightTheme);

В компонентах:

<script lang="ts">
  import { theme } from '$lib/stores/theme';
</script>

<button
  style="background-color: {$theme.colors.primary}; color: {$theme.colors.text};"
>
  Кнопка
</button>

Преимущества системы токенов

  1. Консистентность интерфейса — все компоненты используют единые значения.
  2. Масштабируемость — изменение токена мгновенно обновляет все элементы, где он используется.
  3. Поддержка тем — легко реализуются светлые и тёмные режимы.
  4. Централизованное управление стилями — упрощает поддержку больших проектов.
  5. Типизация и автокомплит — при использовании TypeScript токены становятся безопасными и удобными для IDE.

Практические рекомендации

  • Разделять токены по категориям: цвета, типографика, размеры, тени, радиусы.
  • Использовать CSS-переменные для глобальных стилей и тем.
  • Создавать Svelte store для динамических тем.
  • Поддерживать единый формат именования (например, primary, secondary, sm, md, lg) для упрощения восприятия.
  • Интегрировать токены с дизайн-системой для визуального прототипирования и дизайнерской документации.

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

Оглавление