igniteui-angular-theming

Files (3)

• SKILL.md
• common-patterns.md · references/
• mcp-setup.md · references/

SKILL.md (first lines)

# Ignite UI for Angular — Theming Skill

## OpenClaw Safety Adapter

This skill has been adapted for Lucy/OpenClaw.

- Do **not** automatically install npm packages, configure MCP servers, edit IDE settings, or write external configuration without Camilo's explicit approval.
- First inspect the project (`package.json`, Angular version, installed Ignite UI package variant, existing theme/config).
- If an Ignite UI MCP server/tool is already available, use it to verify current APIs. If it is unavailable, use the bundled references and say when an answer should be checked against vendor docs.
- Project `docs/STANDARDS.md`, SDD phase gates, and higher-priority workspace rules remain authoritative.
- Never put secrets, license tokens, private registry credentials, or PATs in code, docs, logs, or chat.

## Description

This skill teaches AI agents how to theme Ignite UI for Angular applications using the Sass-based theming system and the **Ignite UI Theming MCP server**. It covers global themes, palettes, typography, elevations, component-level theming, layout controls (spacing, sizing, roundness), and how to use the MCP tools for code generation.

## Prerequisites

- An Angular project with `igniteui-angular` installed, **or** `@infragistics/igniteui-angular` for licensed users
- Sass support enabled in the project (default for Angular CLI projects)
- The **Ignite UI Theming MCP server** (`igniteui-theming`) available as a tool provider

> ## Optional Ignite UI Theming MCP Server

> **Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in [`references/mcp-setup.md`](./references/mcp-setup.md).** Read that file for editor-specific configuration steps and verification.

## Theming Architecture

> **Docs:** [Theming Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/index) · [Palette](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/palettes) · [Typography](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/typography) · [Elevations](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/elevations)

The Ignite UI theming system is built on four pillars:

| Concept        | Purpose                                                                                                                               |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| **Palette**    | Color system with primary, secondary, surface, gray, info, success, warn, error families, each with shades 50–900 + accents A100–A700 |
| **Typography** | Font family, type scale (h1–h6, subtitle, body, button, caption, overline)                                                            |
| **Elevations** | Box-shadow levels 0–24 for visual depth                                                                                               |
| **Schema**     | Per-component recipes mapping palette colors to component tokens                                                                      |

### Design Systems

Four built-in design systems are available:

- **Material** (default) — Material Design 3
- **Bootstrap** — Bootstrap-inspired
- **Fluent** — Microsoft Fluent Design
- **Indigo** — Infragistics Indigo Design

Each has light and dark variants (e.g., `$light-material-schema`, `$dark-fluent-schema`).

## Pre-built Themes

The quickest way to theme an app is to include a pre-built CSS file in `angular.json`:

```json
"styles": ["node_modules/igniteui-angular/styles/igniteui-angular.css"]
```

> **Licensed package users:** replace `igniteui-angular` with `@infragistics/igniteui-angular` in the path:
> ```json
> "styles": ["node_modules/@infragistics/igniteui-angular/styles/igniteui-angular.css"]
> ```

Available pre-built CSS files:

| File                           | Theme           |
| ------------------------------ | --------------- |
| `igniteui-angular.css`         | Material Light  |
| `igniteui-angular-dark.css`    | Material Dark   |
| `igniteui-fluent-light.css`    | Fluent Light    |
| `igniteui-fluent-dark.css`     | Fluent Dark     |
| `igniteui-bootstrap-light.css` | Bootstrap Light |
| `igniteui-bootstrap-dark.css`  | Bootstrap Dark  |
| `igniteui-indigo-light.css`    | Indigo Light    |
| `igniteui-indigo-dark.css`     | Indigo Dark     |

All files are located under `node_modules/igniteui-angular/styles/` (or `node_modules/@infragistics/igniteui-angular/styles/` for the licensed package).

## Custom Sass Theme (Manual)

> **AGENT INSTRUCTION — Sass Theming Docs**: If the user explicitly asks to build a Sass-based theme or configure Sass, refer to the dedicated Sass documentation:
>
> - [Sass Theming Overview](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/index)
> - [Sass Configuration](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/configuration)
> - [Sass Palettes](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/palettes)
> - [Sass Component Themes](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/component-themes)

Create a `styles.scss` file and include it in `angular.json`:

```scss
// Open-source package
@use 'igniteui-angular/theming' as *;
// Licensed package — same Sass API, different import path
// @use '@infragistics/igniteui-angular/theming' as *;
$my-palette: palette(
  $primary: #1976d2,
  $secondary: #ff9800,
  $surface: #fafafa,
);

// 2. Typography (optional)
@include typography($font-family: $material-typeface, $type-scale: $material-type-scale);

// 3. Core reset & base styles
@include core();

// 4. Apply theme
@include theme($palette: $my-palette, $schema: $light-material-schema);
```

For dark themes, use a dark surface color and a dark schema:

```scss
$dark-palette: palette(
  $primary: #90caf9,
  $secondary: #ffb74d,
  $surface: #121212,
);

From CamiloAndresGTRUniandes/lucy-ai, MIT.

More from CamiloAndresGTRUniandes/lucy-ai