Ignite UI Theming — от Infragistics

Репозиторий Ignite UI Theming собирает набор Sass миксинов, функций и переменных, используемых для создания тем для множества UI-фреймворков, над которыми работает Infragistics. Пакет темирования упрощает создание палитр, теневых эффектов (elevations) и стилей типографики для ваших проектов.

Структура репозитория

Этот репозиторий представляет собой монорепозиторий npm workspaces с двумя пакетами:

Пакет	Название	Описание
packages/theming	igniteui-theming	Sass-источник, артефакты сборки в формате JSON, опубликованы в npm
packages/mcp	igniteui-theming-mcp	Исходники MCP-сервера, собраны в packages/theming/dist/mcp/

Пакет igniteui-theming является единственным опубликованным артефактом — он включает как Sass-библиотеку темирования, так и бинарник MCP-сервера.

Сервер MCP также прописан в MCP Registry как io.github.IgniteUI/igniteui-theming. Файл server.json в корне репозитория содержит его манифест реестра и автоматически публикуется при релизе.

Общие команды из корня репозитория:

npm install    # установить все зависимости рабочих пространств
npm run build  # собрать theming + MCP в порядке зависимостей
npm test       # запустить все тесты по обоим пакетам
npm run lint   # выполнить линтинг всех пакетов

Палитры

Мы предоставляем четыре предопределенные палитры — material, bootstrap, fluent и indigo — в которых собраны все необходимые цвета и их вариации, что облегчает выбор подходящего варианта для вашего случая. Вот как они выглядят:

Чтобы получить доступ к любому цвету из палитр, используйте функцию color:

background: color($light-material-palette, 'primary', 500);

Подробнее о том, какие функции цвета и миксины содержит пакет и как ими пользоваться, можно узнать на Странеовая страница Вики: Colors

Типография

Еще один ценный модуль нашей библиотеки темирования — типография, которая обеспечивает единообразие на всём проекте. Опять же доступно четыре пресета типографики под четыре темы, которые мы предоставляем из коробки.

Вы можете задать любую семейство шрифтов, используя миксин typography, который принимает 2 аргумента (font-family и type-scale). По умолчанию типографика использует material-шрифты и масштаб типографики.

@include typography($font-family: $material-typeface, $type-scale: $material-type-scale);

Подробнее о модуле типографики можно узнать на Странице Вики: Typography

Elevations

Пакет темирования предоставляет один набор теневых эффектов (elevations), который можно использовать, чтобы ваши компоненты выглядели «поднятыми» — это особенно полезно для кнопок, карточек, панелей навигации и т. д.

Вы можете задавать elevations от 0 до 24, используя функцию elevation, которая принимает уровеньElevations в качестве аргумента:

box-shadow: elevation(12);

Подробнее об Elevations и их возможностях можно узнать на Странице Вики: Elevations (draft)

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

Чтобы использовать Ignite UI Theming в вашем приложении, установите пакет igniteui-theming:

npm install igniteui-theming

Затем потребуется использовать его в файле, который вы хотите оформить, следующим образом:

@use '.../node_modules/igniteui-theming/' as *;

Также можно использовать только часть пакета:

@use '.../node_modules/igniteui-theming/sass/color' as *;

Мы предлагаем предустановки для тем material, bootstrap, fluent и indigo для color (светлые и тёмные палитры), typography и elevations. Их можно импортировать в ваш scss-файл так:

@use '.../node_modules/igniteui-theming/sass/typography/presets' as *;

Подробнее о составе пакета можно узнать на Страница Вики

Линтинг и тестирование

Для проверки проекта на наличие ошибок линтинга запустите

npm run lint

Чтобы запустить набор тестов, выполните

npm run test

Тестирование и отладка

Предварительный просмотр палитр

Запуск из packages/theming. Укажите палитру (material, bootstrap, fluent, indigo) и вариант (light или dark).

npm run preview:palette -- --palette=material --variant=light

---

Сервер MCP (AI-помощь в темировании)

Пакет Ignite UI Theming включает сервер Model Context Protocol (MCP), который позволяет AI-ассистентам генерировать готовый к продакшену код темирования для ваших приложений Ignite UI. Этот MCP-сервер является частью более широкой цепочки инструментов разработки с поддержкой AI для Ignite UI.

Что такое MCP?

Model Context Protocol позволяет AI-асистентам (таким как Claude, GitHub Copilot и другие) подключаться к внешним инструментам и источникам данных. Сервер MCP Ignite UI Theming выступает в роли эксперта по темированию и может:

• 🎨 Генерировать палитры цветов с автоматическими вариациями оттенков
• 📝 Создавать системы типографики в соответствии с принципами дизайна
• 🌓 Формировать полные темы для светлой и тёмной режимов
• 🎯 Настраивать компоненты с использованием дизайновых токенов
• ✅ Проверять цвета на доступность

Быстрый старт

Большинство пользователей не нуждаются в клонировании репозитория. Сервер поставляется внутри опубликованного пакета igniteui-theming и зарегистрирован в MCP Registry как io.github.IgniteUI/igniteui-theming — клиенты, поддерживающие установку через реестр, могут добавить его по этому имени, а дальнейшее использование — через конфигурацию npx, приведённую ниже.

Чтобы запустить его из исходников:

1. Клонируйте и соберите

npm install
npm run build

2. Настройте вашего AI-клиента

С MCP-сервером работает любой клиент, совместимый с MCP. Ниже приведены инструкции для популярных клиентов:

VS Code (с совместимыми расширениями MCP) Для локальной разработки - создайте или откройте файл .vscode/mcp.json:

{
  "servers": {
    "igniteui-theming": {
      "command": "node",
      "args": ["/absolute/path/to/igniteui-theming/packages/theming/dist/mcp/index.js"]
    }
  }
}

Использование опубликованного пакета:

{
  "servers": {
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming"]
    }
  }
}

WebStorm / JetBrains IDEs

• Откройте Settings → Tools → AI Assistant → MCP Servers
• Нажмите + Add MCP Server
• Настройка:
  • Name: igniteui-theming
  • Command: node (для локала) или npx (для пакета)
  • Arguments:
    • Local: /absolute/path/to/igniteui-theming/packages/theming/dist/mcp/index.js
    • Package: -y igniteui-theming
• Нажмите OK и перезапустите AI Assistant

Claude Desktop Добавьте в конфигурационный файл:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Windows: %APPDATA%\Claude\claude_desktop_config.json

Для локальной разработки:

{
  "mcpServers": {
    "igniteui-theming": {
      "command": "node",
      "args": ["/absolute/path/to/igniteui-theming/packages/theming/dist/mcp/index.js"]
    }
  }
}

Использование опубликованного пакета:

{
  "mcpServers": {
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming"]
    }
  }
}

Cursor Создайте или отредактируйте .cursor/mcp.json в вашем проекте:

Для локальной разработки:

{
  "mcpServers": {
    "igniteui-theming": {
      "command": "node",
      "args": ["/absolute/path/to/igniteui-theming/packages/theming/dist/mcp/index.js"]
    }
  }
}

Использование опубликованного пакета:

{
  "mcpServers": {
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming"]
    }
  }
}

Что он умеет?

🎨 Создание полных тем

Просто опишите тему вашему AI-ассистенту:

"Create a Material Design dark theme for my Angular app with that takes inspiration from the Gruvbox color scheme."

ИИ сгенерирует готовый к продакшену Sass-код со:

• палитрой цветов со всеми вариациями оттенков
• настройкой типографики с корректными шкалами
• теневыми эффектами Elevations
• платформозависимыми импортами и конфигурацией

🌈 Генерация цветовых палитр

"Generate a light theme palette using teal as primary and purple as secondary"

Получите точно рассчитанные оттенки цветов в соответствии с принципами дизайн-системы.

📝 Настройка типографики

"Set up typography using Inter font with Material Design type scale for Web Components"

Получите корректную конфигурацию типографики с семействами шрифтов и адаптивными типоразмерами.

🎯 Настройка компонентов

"What design tokens are available for the button component?"

"Create a flat button theme with purple background and white text"

Открывайте и настраивайте стили отдельных компонентов с помощью design tokens.

Доступные возможности

MCP-сервер предоставляет 8 инструментов и 16 ресурсов:

Инструменты (Actions)

Инструмент	Описание
detect_platform	Автоопределение платформы Ignite UI, которую вы используете в проекте
create_palette	Генерация палитры цветов с автоматическими расчётами оттенков
create_custom_palette	Создание палитры с точным контролем над отдельными оттенками
create_typography	Настройка типографики со шрифтами и масштабами
create_elevations	Конфигурация теневых эффектов (Elevations)
create_theme	Генерация полной темы (палитра + типографика + Elevations)
get_component_design_tokens	Поиск настраиваемых свойств для компонентов
create_component_theme	Генерация кода темы, специфичной для компонентов

Ресурсы (Справочные данные)

• Platform Information: Конфигурации для Angular, Web Components, React и Blazor
• Preset Libraries: Готовые палитры, типография и наборы Elevations
• Color Guidance: Практические рекомендации по выбору и использованию цветов
• Design System Schemas: Конфигурации Material, Bootstrap, Fluent и Indigo

Поддерживаемые платформы

• Angular - igniteui-angular
• Web Components - igniteui-webcomponents
• React - igniteui-react
• Blazor - igniteui-blazor

Примеры взаимодействий

Создание новой темы проекта Вы: "Я начинаю новый проект на Angular с Ignite UI. Создай полную тему Material Design с основным синим цветом, второстепенным коралловым, светлый режим и шрифтом Roboto"

ИИ: Использует инструмент create_theme и генерирует готовый к использованию Sass-код

Добавление темной версии Вы: "Мне нужна версия с темным режимом, тот же основной синий, но темная поверхность"

ИИ: Использует create_theme с variant: "dark" и генерирует код темной темы

Настройка компонентов Вы: "Какие свойства можно настроить у компонента карточка (card)?"

ИИ: Использует get_component_design_tokens для показа доступных токенов

Вы: "Сделай фон карточки светло-серым и добавь легкую тень"

ИИ: Использует create_component_theme для генерации кода темы компонента

Полная документация

Подробная документация включает:

• Полный справочник параметров инструментов
• Все примеры запросов
• Различия между платформами
• Руководство по устранению неполадок
• Инструкции по разработке

Смотрите README MCP Server

Скрипты разработки

# Сборка для production (theming + MCP)
npm run build

# Запуск тестов
npm run test

# Отладка с MCP Inspector (из packages/mcp)
npm run inspect

---

Вклад

Вклад приветствуется! Не стесняйтесь отправлять Pull Request.