Design tokens

Design tokens — это абстракция, которая позволяет централизовать и управлять стилями интерфейса, такими как цвета, размеры, шрифты, отступы и прочее. В контексте Stencil фреймворка, использование design tokens помогает создавать компоненты, которые можно легко адаптировать к различным темам и стилям.

Основные понятия

Design tokens представляют собой значения, которые задаются в виде ключ-значение и могут быть использованы для генерации стилей в рамках различных UI-решений. Эти токены включают:

  • Цвета (primary, secondary, background, text)
  • Шрифты (font-size, font-family, line-height)
  • Отступы (padding, margin)
  • Границы (border-radius, border-width)
  • Размеры (width, height, spacing)

Они могут быть записаны в различных форматах, таких как JSON, YAML или даже SCSS переменные. Основное преимущество в том, что design tokens позволяют не только унифицировать стили, но и сделать их легко изменяемыми и масштабируемыми.

Использование Design Tokens в Stencil

Для интеграции design tokens в Stencil необходимо понимать, как эти токены могут быть использованы в процессе разработки веб-компонентов. Рассмотрим несколько примеров.

Шаг 1. Создание файла с design tokens

Первым шагом в настройке design tokens является создание файла, который будет хранить все необходимые значения. Например, можно создать файл design-tokens.json:

{
  "colors": {
    "primary": "#6200EE",
    "secondary": "#03DAC6",
    "background": "#F5F5F5",
    "text": "#212121"
  },
  "typography": {
    "font-size": {
      "small": "12px",
      "medium": "16px",
      "large": "20px"
    },
    "font-family": "Arial, sans-serif"
  },
  "spacing": {
    "small": "8px",
    "medium": "16px",
    "large": "32px"
  }
}

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

Шаг 2. Импорт токенов в компоненты

После того как файл с design tokens готов, необходимо внедрить его в компоненты Stencil. Это можно сделать через импорт JSON-файла или путем использования SCSS переменных, если проект настроен на использование SCSS.

Если использовать JSON-файл, его можно импортировать прямо в компонент:

import { Component, h } from '@stencil/core';
import tokens from './design-tokens.json';

@Component({
  tag: 'my-button',
  styleUrl: 'my-button.css',
  shadow: true
})
export class MyButton {
  render() {
    return (
      <button
        style={{
          backgroundColor: tokens.colors.primary,
          color: tokens.colors.text,
          padding: tokens.spacing.medium,
          fontSize: tokens.typography.font-size.medium,
          fontFamily: tokens.typography.font-family
        }}
      >
        Click me
      </button>
    );
  }
}

В этом примере компонента my-button использует значения из файла design-tokens.json для задания цвета фона, текста, отступов и шрифта.

Шаг 3. Использование SCSS переменных

Если проект настроен на использование SCSS, можно создать отдельные SCSS файлы для design tokens и затем импортировать их в стилевые файлы компонентов. Например, можно создать файл _tokens.scss:

$primary-color: #6200EE;
$secondary-color: #03DAC6;
$background-color: #F5F5F5;
$text-color: #212121;

$small-font-size: 12px;
$medium-font-size: 16px;
$large-font-size: 20px;

$small-spacing: 8px;
$medium-spacing: 16px;
$large-spacing: 32px;

Затем этот файл можно импортировать в стилевой файл компонента:

@import 'design-tokens';

button {
  background-color: $primary-color;
  color: $text-color;
  padding: $medium-spacing;
  font-size: $medium-font-size;
  font-family: 'Arial', sans-serif;
}

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

Преимущества использования Design Tokens в Stencil

  1. Унификация и централизованное управление стилями: Все стили централизованы в одном месте, что облегчает изменение темы или стилей в дальнейшем.
  2. Масштабируемость: Легко добавлять новые токены для новых стилей и компонентов без необходимости переписывать код.
  3. Гибкость: Возможность легко адаптировать компоненты под различные темы и настройки, поддерживая гибкость при изменении внешнего вида интерфейса.
  4. Снижение повторения: Вместо того чтобы вручную прописывать одно и то же значение в нескольких местах, можно использовать единую переменную, что минимизирует вероятность ошибок и улучшает поддержку кода.

Best Practices

  1. Использование семантических имен: Названия токенов должны быть интуитивно понятными. Например, вместо color1 и color2, лучше использовать более осмысленные имена, такие как primary и secondary.
  2. Организация токенов по категориям: Группировка токенов по типам (цвета, отступы, шрифты и т.д.) позволяет лучше управлять ими и ускоряет их использование в проектах.
  3. Модульность: Если проект большой, стоит разделить токены на несколько файлов по категориям, чтобы упростить их использование и управление.

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

Design tokens играют ключевую роль в реализации динамических тем. С помощью этих токенов можно легко переключать стили в зависимости от предпочтений пользователя, например, для темной или светлой темы. Для реализации динамических тем можно использовать JavaScript или CSS custom properties (CSS переменные).

Пример использования CSS переменных для динамических тем:

:root {
  --primary-color: #6200EE;
  --secondary-color: #03DAC6;
  --background-color: #F5F5F5;
  --text-color: #212121;
}

[data-theme="dark"] {
  --primary-color: #BB86FC;
  --secondary-color: #03DAC6;
  --background-color: #121212;
  --text-color: #E1E1E1;
}

Переключение темы может быть выполнено с помощью Jav * aScript:

document.documentElement.setAttribute('data-theme', 'dark');

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

Заключение

Внедрение и использование design tokens в Stencil позволяет создать удобный, масштабируемый и легко адаптируемый интерфейс. Этот подход не только улучшает поддержку кода, но и дает возможность гибко управлять стилями, что особенно важно при разработке сложных веб-приложений с множеством компонентов.

Оглавление