Темизация

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

Основы темизации

FAST Element использует концепцию Design Tokens — централизованных переменных для цветов, размеров, отступов и других параметров стиля. Эти токены могут быть определены глобально или локально для конкретного компонента.

Пример объявления токена в FAST Element:

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

export const themeTokens = css`
  :host {
    --primary-color: #0078d4;
    --secondary-color: #2b88d8;
    --font-size-base: 16px;
  }
`;

Ключевые моменты:

  • :host позволяет определять переменные непосредственно на уровне компонента.
  • Переменные можно использовать внутри стилей компонента через var(--имя-переменной).
  • Токены могут быть переопределены глобально или для конкретного контекста.

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

Глобальная тема применяется ко всем компонентам, если они используют одинаковые токены. Обычно объявляется на уровне <body> или через отдельный <style> в основном HTML или JS.

document.body.style.setProperty('--primary-color', '#ff5722');

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

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

const localTheme = css`
  :host {
    --primary-color: #4caf50;
  }
`;

class MyButton extends FASTElement {
  static styles = localTheme;
  render() {
    return html`<button style="background-color: var(--primary-color)">Нажми меня</button>`;
  }
}

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

Наследование стилей и токенов

FAST Element автоматически поддерживает наследование CSS-переменных через DOM. Если токен определен на родительском элементе, дочерние компоненты могут использовать его без повторного определения:

document.body.style.setProperty('--primary-color', '#6200ea');

const buttonTemplate = html`
  <button style="color: var(--primary-color)">Кнопка</button>
`;

В этом примере все кнопки, использующие var(--primary-color), автоматически получают цвет, заданный на <body>.

Динамическое переключение тем

FAST Element позволяет изменять тему во время выполнения приложения. Для этого используются методы установки CSS-переменных через JavaScript или реактивные свойства:

const toggleTheme = (darkMode) => {
  const root = document.documentElement;
  if(darkMode) {
    root.style.setProperty('--background-color', '#121212');
    root.style.setProperty('--text-color', '#ffffff');
  } else {
    root.style.setProperty('--background-color', '#ffffff');
    root.style.setProperty('--text-color', '#000000');
  }
};

Компоненты автоматически применяют новые значения без перерисовки или обновления шаблона.

Использование FAST Design System

FAST предоставляет встроенную систему темизации — Design System, которая позволяет создавать и подключать темы централизованно. Она использует FASTDesignSystemProvider и готовые токены.

Пример подключения системы:

import { provideDesignSystem, FASTDesignSystemProvider } from "@microsoft/fast-foundation";

provideDesignSystem()
  .register(FASTDesignSystemProvider);

const darkTheme = {
  accentBaseColor: '#ff4081',
  neutralForegroundRest: '#ffffff',
  neutralFillRest: '#333333'
};

FASTDesignSystemProvider.prototype.designSystem = darkTheme;

Особенности:

  • Токены системы автоматически синхронизируются с компонентами.
  • Легко создавать несколько тем и переключать их динамически.
  • Поддерживается наследование и локальная переопределяемость.

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

  1. Использовать переменные CSS вместо прямых значений для всех цветов, отступов и размеров.
  2. Группировать токены по смыслу (цвета, типографика, отступы), чтобы их было легко переопределять.
  3. Минимизировать локальные переопределения, чтобы сохранить консистентность тем.
  4. Создавать отдельные модули для каждой темы, чтобы можно было подключать их без изменений кода компонентов.
  5. Тестировать динамическое переключение тем на разных компонентах, особенно если используются сторонние стили или веб-компоненты.

Заключение по архитектуре темизации

Темизация в FAST Element построена на мощной комбинации CSS-переменных, реактивных свойств и централизованных токенов Design System. Она обеспечивает:

  • Гибкость в настройке внешнего вида.
  • Простое переключение тем без изменения логики компонентов.
  • Масштабируемость и повторное использование стилей.

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

Оглавление