Ignite UI Theming MCP

Ignite UI Theming - da Infragistics

O repositório Ignite UI Theming reúne um conjunto de mixins, funções e variáveis Sass usados para criar temas para uma variedade de frameworks de UI desenvolvidos pela Infragistics. O pacote de theming facilita muito a criação de paletas, elevações e estilos de tipografia para seus projetos.

Estrutura do Repositório

Este repositório é um monorepo de workspaces npm com dois pacotes:

O pacote igniteui-theming é o único artefato publicado — ele inclui tanto a biblioteca de theming Sass quanto o binário do servidor MCP.

Comandos comuns a partir da raiz do repositório:

npm install    # install all workspace dependencies
npm run build  # build theming + MCP in dependency order
npm test       # run all tests across both packages
npm run lint   # lint all packages

Paletas

Fornecemos quatro paletas predefinidas — material, bootstrap, fluent e indigo — que têm todas as cores necessárias, junto com diferentes variantes dessas cores, para facilitar ainda mais a escolha da cor certa para o seu caso. Veja como elas são:

Para acessar qualquer uma das cores nas paletas, você pode usar a função color:

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

Você pode ver mais detalhes sobre quais funções e mixins de cores o pacote contém e como usá-los na Página da Wiki de Cores

Tipografia

Outro módulo valioso do nosso pacote de theming é a tipografia, ajudando você a ter consistência em todo o seu projeto. Existem novamente quatro predefinições de tipografia para os quatro temas que fornecemos prontos para uso.

Você pode definir qualquer uma das fontes usando o mixin typography, que aceita 2 argumentos (família de fonte e escala de tipo). Por padrão, a tipografia usa a fonte e a escala de tipo material.

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

Saiba mais sobre o módulo de tipografia no pacote conferindo a Página da Wiki de Tipografia

Elevações

O pacote de theming fornece uma predefinição de sombras que pode ser usada para dar um destaque aos seus componentes. Elas são super úteis em botões, cards, barras de navegação, etc.

Você pode definir elevações de 0 a 24 usando a função elevation, que aceita o nível de elevação como argumento:

box-shadow: elevation(12);

Saiba mais sobre elevações e suas capacidades na Página da Wiki de Elevações

Uso

Para usar o Ignite UI Theming no seu aplicativo, você deve instalar o pacote igniteui-theming:

npm install igniteui-theming

Em seguida, você precisará usá-lo no arquivo desejado assim:

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

Você também pode usar apenas uma fração do pacote:

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

Fornecemos predefinições para os temas material, bootstrap, fluent e indigo para as frações de cor (paletas claras e escuras), tipografia e elevações. Você pode importá-las no seu arquivo scss assim:

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

Você pode ler mais sobre o que o pacote contém na página da Wiki

Linting e Testes

Para verificar o projeto em busca de erros de linting, execute

npm run lint

Para executar a suíte de testes, execute

npm run test

Testes e Depuração

Visualizar Paletas

Execute a partir de packages/theming. Passe a paleta (material, bootstrap, fluent, indigo) e a variante (light ou dark).

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

Servidor MCP (Theming Assistido por IA)

O pacote Ignite UI Theming inclui um servidor Model Context Protocol (MCP) que permite que assistentes de IA gerem código de theming pronto para produção para seus aplicativos Ignite UI. Este servidor MCP faz parte do toolchain de desenvolvimento assistido por IA maior para Ignite UI.

O que é MCP?

O Model Context Protocol permite que assistentes de IA (como Claude, GitHub Copilot e outros) se conectem a ferramentas externas e fontes de dados. O servidor MCP Ignite UI Theming atua como um assistente especialista em theming que pode:

• 🎨 Gerar paletas de cores com variações automáticas de tons
• 📝 Criar sistemas de tipografia seguindo padrões de design
• 🌓 Construir temas completos para modos claro e escuro
• 🎯 Personalizar componentes com design tokens
• ✅ Validar cores para conformidade de acessibilidade

Início Rápido

1. Clonar e Compilar

Clone o repositório e compile:

npm install
npm run build

2. Configurar Seu Cliente de IA

O servidor MCP funciona com qualquer cliente compatível com MCP. Aqui estão as instruções de configuração para clientes populares:

{
  "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", "igniteui-theming-mcp"]
    }
  }
}

{
  "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", "igniteui-theming-mcp"]
    }
  }
}

{
  "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", "igniteui-theming-mcp"]
    }
  }
}

O Que Ele Pode Fazer?

🎨 Criar Temas Completos

Simplesmente descreva seu tema para seu assistente de IA:

"Crie um tema escuro Material Design para meu aplicativo Angular inspirado no esquema de cores Gruvbox."

A IA gerará código Sass pronto para produção com:

• Paleta de cores com todas as variações de tons
• Configuração de tipografia com escalas de tipo adequadas
• Sombras de elevação
• Imports e configuração específicos da plataforma

🌈 Gerar Paletas de Cores

"Gere uma paleta de tema claro usando teal como cor primária e roxo como secundária"

Obtenha tons de cores perfeitamente calculados seguindo padrões de design system.

📝 Configurar Tipografia

"Configure tipografia usando a fonte Inter com escala de tipo Material Design para Web Components"

Obtenha configuração de tipografia adequada com famílias de fonte e escalas de tipo responsivas.

🎯 Personalizar Componentes

"Quais design tokens estão disponíveis para o componente de botão?"

"Crie um tema de botão flat com fundo roxo e texto branco"

Descubra e personalize estilos de componentes individuais usando design tokens.

Capacidades Disponíveis

O servidor MCP fornece 8 ferramentas e 16 recursos:

Ferramentas (Ações)

Recursos (Dados de Referência)

• Informações da Plataforma: Configuração para Angular, Web Components, React e Blazor
• Bibliotecas de Predefinições: Paletas, tipografias e conjuntos de elevação pré-construídos
• Orientação de Cores: Melhores práticas para seleção e uso de cores
• Esquemas de Design System: Configurações Material, Bootstrap, Fluent e Indigo

Plataformas Suportadas

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

Exemplos de Interação

Documentação Completa

Para documentação detalhada, incluindo:

• Referência completa dos parâmetros das ferramentas
• Todos os exemplos de prompts
• Diferenças específicas por plataforma
• Guia de solução de problemas
• Instruções de desenvolvimento

Consulte o README do Servidor MCP

Scripts de Desenvolvimento

# Build for production (theming + MCP)
npm run build

# Run tests
npm run test

# Debug with MCP Inspector (from packages/mcp)
npm run inspect

Contribuindo

Contribuições são bem-vindas! Sinta-se à vontade para enviar um Pull Request.