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

Система токенов дизайна (Design Tokens) в Element Plus представляет собой централизованное хранилище переменных, отвечающих за визуальное оформление компонентов: цвета, отступы, размеры шрифтов, тени и другие параметры интерфейса. Она обеспечивает единообразие визуального языка и позволяет гибко управлять темами без необходимости менять код компонентов напрямую.

В Element Plus токены реализованы через SCSS-переменные и JavaScript-константы, что позволяет интегрировать их как в шаблоны стилей, так и в логику компонентов.

Типы токенов

  1. Цветовые токены

    • Primary / Secondary Colors — основные и второстепенные цвета интерфейса.
    • Semantic Colors — цвета для состояний: успех, предупреждение, ошибка, информационные сообщения.
    • Neutral Colors — серые и нейтральные оттенки для фона, текста и границ.
    $--color-primary: #409EFF;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-error: #F56C6C;
$--color-info: #909399;

  2. Токены типографики

    • Font Sizes — размеры шрифтов для заголовков, текста и мелкого текста.
    • Font Weights — жирность шрифта для акцентов и базового текста.
    • Line Heights — высота строки для улучшенной читаемости.
    $--font-size-base: 14px;
$--font-size-lg: 16px;
$--font-size-sm: 12px;
$--font-weight-bold: 600;
$--line-height-base: 1.5;

  3. Токены размеров и отступов

    • Spacing — стандартные отступы между элементами.
    • Border Radius — радиус скругления углов компонентов.
    • Component Sizes — размеры кнопок, инпутов и других UI-элементов.
    $--spacing-xs: 4px;
$--spacing-sm: 8px;
$--spacing-md: 16px;
$--spacing-lg: 24px;
$--border-radius-base: 4px;

  4. Токены теней и эффектов

    • Box Shadows — тени элементов для создания глубины интерфейса.
    • Opacity Levels — прозрачность для модальных окон и оверлеев.
    $--box-shadow-base: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$--overlay-opacity: 0.5;

Работа с токенами в компонентах

Использование SCSS-переменных

Компоненты Element Plus автоматически используют токены при подключении стилей. Можно переопределить переменные глобально или локально.

// Переопределение глобального цвета кнопки
$--color-primary: #ff6600;

.el-button {
  background-color: $--color-primary;
  border-radius: $--border-radius-base;
}

Динамическая работа через JavaScript

Токены доступны через объект ElDesignTokens, что позволяет программно изменять стили.

import { ElDesignTokens } from 'element-plus'

ElDesignTokens.colorPrimary = '#ff6600';

Такой подход полезен для реализации смены темы в приложении без перезагрузки страницы.

Темизация через токены

Element Plus поддерживает несколько видов тем:

  1. Light и Dark

    • Все токены можно определить отдельно для светлой и тёмной темы.
    • Смена темы сводится к подгрузке соответствующих значений токенов.
    const lightTheme = {
  colorPrimary: '#409EFF',
  colorBackground: '#ffffff'
}

const darkTheme = {
  colorPrimary: '#1F2D3D',
  colorBackground: '#141414'
}

  2. Кастомные темы

    • Создание собственной палитры и типографики через переопределение токенов.
    • Можно подключать темы через SCSS или JS, что делает их совместимыми с любой компонентной библиотекой на Vue 3.

Инструменты и методы работы с токенами

  • SCSS Variables — базовый способ централизованного хранения стилей.
  • CSS Custom Properties — позволяет менять токены динамически через DOM.
  • JavaScript API — управление токенами в runtime.
  • Theme Builder — онлайн-инструмент Element Plus для генерации кастомных наборов токенов.

Рекомендации по использованию

  • Все визуальные параметры компонентов должны базироваться на токенах, чтобы обеспечить консистентность.
  • При изменении темы рекомендуется переопределять токены, а не стили компонентов напрямую.
  • Для сложных интерфейсов лучше использовать комбинацию SCSS и JS-токенов, что позволяет управлять стилями глобально и локально.
  • Документировать созданные токены и их назначение для поддержки единого стиля во всем проекте.

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

Пример интеграции токенов в проект Vue 3 с Element Plus:

<template>
  <el-button type="primary">Кнопка</el-button>
</template>

<script setup>
import { ElDesignTokens } from 'element-plus'

ElDesignTokens.colorPrimary = '#ff6600';
ElDesignTokens.borderRadiusBase = '8px';
</script>

<style lang="scss">
@import "~element-plus/packages/theme-chalk/src/index";

.el-button {
  font-size: $--font-size-lg;
  padding: $--spacing-sm $--spacing-md;
}
</style>

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

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

Оглавление