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 torna super fácil criar 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.

O servidor MCP também está listado no Registro MCP como io.github.IgniteUI/igniteui-theming. O server.json na raiz do repositório é seu manifesto de registro, publicado automaticamente no lançamento.

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, juntamente 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 cor 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 para usar com botões, cartões, 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 que desejar, 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 Ignite UI Theming MCP 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 tokens de design
• ✅ Validar cores para conformidade de acessibilidade

Início Rápido

A maioria dos usuários não precisa clonar nada. O servidor vem dentro do pacote publicado igniteui-theming e está listado no Registro MCP como io.github.IgniteUI/igniteui-theming — clientes que suportam instalação por registro podem adicioná-lo por esse nome, e todo o resto usa a configuração npx mostrada abaixo.

Para executá-lo a partir do código-fonte:

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 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"]
    }
  }
}

{
  "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"]
    }
  }
}

{
  "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"]
    }
  }
}

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 que se inspire 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 sistemas de design.

📝 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 fontes e escalas de tipo responsivas.

🎯 Personalizar Componentes

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

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

Descubra e personalize estilos de componentes individuais usando tokens de design.

Capacidades Disponíveis

O servidor MCP fornece 8 ferramentas e 16 recursos:

Ferramentas (Ações)

Recursos (Dados de Referência)

• Informações de 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 Sistemas de Design: 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 de parâmetros de ferramentas
• Todos os exemplos de prompts
• Diferenças específicas de 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.