npm - igniteui-cli - Versions diffs - 14.10.0-alpha.2 → 14.10.0-alpha.4 - Mend

igniteui-cli 14.10.0-alpha.2 → 14.10.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/CSS-THEMING.md ADDED Viewed

@@ -0,0 +1,265 @@
+# CSS Theming
+This guide covers theming Ignite UI for React using CSS custom properties — works in any project without additional build tooling.
+## Pre-built Themes
+Import a pre-built CSS file in your React entry point:
+```tsx
+// main.tsx or index.tsx
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+```
+> **CRITICAL:** Theme CSS imports are **required** for components to render correctly.
+**For grids**, you **must also** import the grid theme CSS:
+```tsx
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
+```
+### Available Pre-built CSS Files
+| Import path | Theme |
+|---|---|
+| `igniteui-webcomponents/themes/light/bootstrap.css` | Bootstrap Light |
+| `igniteui-webcomponents/themes/dark/bootstrap.css` | Bootstrap Dark |
+| `igniteui-webcomponents/themes/light/material.css` | Material Light |
+| `igniteui-webcomponents/themes/dark/material.css` | Material Dark |
+| `igniteui-webcomponents/themes/light/fluent.css` | Fluent Light |
+| `igniteui-webcomponents/themes/dark/fluent.css` | Fluent Dark |
+| `igniteui-webcomponents/themes/light/indigo.css` | Indigo Light |
+| `igniteui-webcomponents/themes/dark/indigo.css` | Indigo Dark |
+Grid theme CSS files follow the same pattern under `igniteui-react-grids/grids/themes/`.
+### Next.js
+In Next.js, import the theme CSS in each client component file or in a shared root layout:
+```tsx
+// app/layout.tsx
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+## Custom Theme via CSS Custom Properties
+After importing a pre-built theme, override individual design tokens with CSS custom properties.
+### Global Overrides (in your CSS file)
+```css
+/* src/index.css */
+:root {
+  --ig-primary-h: 211deg;
+  --ig-primary-s: 100%;
+  --ig-primary-l: 50%;
+  --ig-secondary-h: 33deg;
+  --ig-secondary-s: 100%;
+  --ig-secondary-l: 50%;
+}
+```
+Import it in your entry point:
+```tsx
+// main.tsx
+import 'igniteui-webcomponents/themes/light/bootstrap.css'; // Theme first
+import './index.css'; // Overrides — must come after the theme import
+```
+### Scoped Overrides
+Use a CSS class to scope theme overrides to a specific container:
+```css
+/* src/AdminPanel.css */
+.admin-panel {
+  --ig-primary-h: 260deg;
+  --ig-primary-s: 60%;
+  --ig-primary-l: 45%;
+}
+```
+```tsx
+// AdminPanel.tsx
+import './AdminPanel.css';
+import { IgrButton, IgrInput } from 'igniteui-react';
+function AdminPanel() {
+  return (
+    <div className="admin-panel">
+      <IgrInput label="Admin Search" />
+      <IgrButton>Save</IgrButton>
+    </div>
+  );
+}
+```
+### CSS Modules
+```css
+/* AdminPanel.module.css */
+.panel {
+  --ig-primary-h: 260deg;
+  --ig-primary-s: 60%;
+  --ig-primary-l: 45%;
+}
+```
+```tsx
+import styles from './AdminPanel.module.css';
+import { IgrButton } from 'igniteui-react';
+function AdminPanel() {
+  return (
+    <div className={styles.panel}>
+      <IgrButton>Save</IgrButton>
+    </div>
+  );
+}
+```
+### Inline Styles on a Wrapper
+For truly dynamic one-off overrides:
+```tsx
+<div style={{ '--ig-primary-h': '260deg', '--ig-primary-s': '60%', '--ig-primary-l': '45%' } as React.CSSProperties}>
+  <IgrButton>Custom Color Button</IgrButton>
+</div>
+```
+> **Note:** TypeScript requires the `as React.CSSProperties` cast. Prefer CSS classes when possible.
+## Component-Level Theming
+Override individual component appearance using CSS custom properties.
+```css
+/* Target the Ignite UI web component tag name */
+igc-avatar {
+  --ig-avatar-background: var(--ig-primary-500);
+  --ig-avatar-color: var(--ig-primary-500-contrast);
+}
+igc-button {
+  --ig-button-foreground: var(--ig-secondary-500);
+}
+```
+> **IMPORTANT — No Hardcoded Colors**
+>
+> ✅ **Right:** `--ig-avatar-background: var(--ig-primary-500);`
+> ❌ **Wrong:** `--ig-avatar-background: #E91E63;`
+### CSS `::part()` Selectors
+Use `::part()` selectors to style shadow DOM internal elements:
+```css
+igc-input::part(input) {
+  font-size: 1.1rem;
+}
+igc-card::part(header) {
+  padding: 1rem;
+}
+```
+> **Note:** In CSS, use web component tag names (`igc-input`), not React component names (`IgrInput`).
+## Layout Controls
+### Sizing
+```css
+:root { --ig-size: 2; }  /* 1 = small, 2 = medium, 3 = large */
+igc-button { --ig-size: 1; }
+```
+### Spacing
+```css
+:root { --ig-spacing: 1; }  /* 0.5 = compact, 1 = default, 2 = spacious */
+.compact-section { --ig-spacing: 0.75; }
+```
+### Roundness
+```css
+:root { --ig-radius-factor: 1; }  /* 0 = square, 1 = maximum radius */
+igc-avatar { --ig-radius-factor: 0.5; }
+```
+## Switching Between Light and Dark Themes
+### Approach 1: CSS class toggle
+```tsx
+import { useState } from 'react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './theme-overrides.css';
+function App() {
+  const [isDark, setIsDark] = useState(false);
+  return (
+    <div className={isDark ? 'dark-theme' : ''}>
+      <button onClick={() => setIsDark(!isDark)}>Toggle Theme</button>
+    </div>
+  );
+}
+```
+```css
+/* theme-overrides.css */
+.dark-theme {
+  --ig-surface-h: 0deg;
+  --ig-surface-s: 0%;
+  --ig-surface-l: 7%;
+  --ig-gray-h: 0deg;
+  --ig-gray-s: 0%;
+  --ig-gray-l: 100%;
+}
+```
+### Approach 2: CSS media query
+```css
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ig-surface-h: 0deg;
+    --ig-surface-s: 0%;
+    --ig-surface-l: 7%;
+  }
+}
+```
+### Approach 3: Dynamically swap theme stylesheet
+```tsx
+import { useEffect } from 'react';
+function useTheme(variant: 'light' | 'dark', design = 'bootstrap') {
+  useEffect(() => {
+    const link = document.getElementById('igc-theme') as HTMLLinkElement;
+    if (link) {
+      link.href = `node_modules/igniteui-webcomponents/themes/${variant}/${design}.css`;
+    }
+  }, [variant, design]);
+}
+```

package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/MCP-SERVER.md ADDED Viewed

@@ -0,0 +1,75 @@
+# Ignite UI Theming MCP Server
+The Ignite UI Theming MCP server enables AI assistants to generate production-ready theming code. It must be configured in your editor before the theming tools become available.
+> **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)**
+>
+> Before using any theming tools, you MUST verify the MCP server is available
+> by calling `detect_platform`. If the tool is not available or the call fails,
+> configure it by following the setup steps below.
+## VS Code Setup
+Create or edit `.vscode/mcp.json` in your project:
+```json
+{
+  "servers": {
+    "igniteui-theming": {
+      "command": "npx",
+      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
+    }
+  }
+}
+```
+## Cursor Setup
+Create or edit `.cursor/mcp.json`:
+```json
+{
+  "mcpServers": {
+    "igniteui-theming": {
+      "command": "npx",
+      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
+    }
+  }
+}
+```
+## Claude Desktop Setup
+Edit the Claude Desktop config file:
+- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
+- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
+```json
+{
+  "mcpServers": {
+    "igniteui-theming": {
+      "command": "npx",
+      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
+    }
+  }
+}
+```
+## WebStorm / JetBrains IDEs Setup
+1. Go to **Settings → Tools → AI Assistant → MCP Servers**
+2. Click **+ Add MCP Server**
+3. Set Command to `npx` and Arguments to `igniteui-theming igniteui-theming-mcp`
+4. Click OK and restart the AI Assistant
+## MCP Server Workflow
+1. **Detect platform**: Call `detect_platform` — it will detect `webcomponents` from `package.json`
+2. **Generate a theme**: Call `create_theme` with your desired colors and design system
+3. **Customize components**: Call `get_component_design_tokens` first, then `create_component_theme` with palette token values
+4. **Get color references**: Call `get_color` to get the correct CSS custom property for any palette shade
+5. **Adjust layout**: Call `set_size`, `set_spacing`, or `set_roundness`
+## File Safety Rule
+> **IMPORTANT — File Safety Rule**: When generating theme code, **never overwrite existing style files directly**. Always propose changes as an update and let the user review before writing to disk.

package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/REVEAL-THEME.md ADDED Viewed

@@ -0,0 +1,86 @@
+# Reveal SDK Theme Sync
+When the project includes Reveal SDK (`reveal-sdk-wrappers-react`) alongside Ignite UI for React, the Reveal dashboard theme should be synced with the active Ignite UI theme.
+> **⚠️ IMPORTANT:** Reveal SDK requires client runtime scripts (jQuery, Day.js, infragistics.reveal.js) to be loaded and initialization must happen in `useEffect` after mount. See [REVEAL-SDK.md](../../igniteui-react-components/reference/REVEAL-SDK.md) for full setup instructions.
+## How It Works
+Ignite UI themes expose CSS custom properties (`--ig-font-family`, `--ig-surface-500`, `--ig-gray-100`, etc.) on the page. The Reveal SDK has its own `$.ig.RevealTheme` object that controls dashboard appearance. The sync function reads the Ignite UI tokens from computed styles and maps them to Reveal's theme properties.
+## Reveal Theme Sync Function
+Call this function in `useEffect` when initializing a component that uses Reveal. Always guard against missing `$` and `$.ig`:
+```tsx
+import { useEffect } from 'react';
+declare const $: any;
+function setRevealTheme() {
+  // Guard: Ensure Reveal runtime is loaded
+  if (typeof $ === 'undefined' || !$.ig) {
+    console.error('Reveal SDK runtime not loaded.');
+    return;
+  }
+  const style = window.getComputedStyle(document.body);
+  const theme = new $.ig.RevealTheme();
+  // 1. Sync fonts with the Ignite UI --ig-font-family token
+  theme.regularFont = style.getPropertyValue('--ig-font-family')?.trim() || 'sans-serif';
+  theme.mediumFont = theme.regularFont;
+  theme.boldFont = theme.regularFont;
+  // 2. Auto-detect light/dark from surface color brightness
+  const color = style.getPropertyValue('--ig-surface-500').trim() || '#fff';
+  const [r, g, b] = [1, 3, 5].map(i => parseInt(color.substring(i, i + 2), 16));
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+  theme.isDark = brightness < 128;
+  theme.fontColor = theme.isDark ? 'white' : 'black';
+  // 3. Sync background colors with Ignite UI palette tokens
+  theme.dashboardBackgroundColor = style.getPropertyValue('--ig-gray-100').trim();
+  theme.visualizationBackgroundColor = style.getPropertyValue('--ig-surface-500').trim();
+  $.ig.RevealSdkSettings.theme = theme;
+}
+// Example usage in a component
+function DashboardView() {
+  useEffect(() => {
+    // Initialize theme sync after mount
+    setRevealTheme();
+  }, []);
+  // ... component implementation
+}
+```
+## Token Mapping Reference
+| Reveal Theme Property | Ignite UI CSS Token | Purpose |
+|---|---|---|
+| `regularFont`, `mediumFont`, `boldFont` | `--ig-font-family` | Font family |
+| `isDark` | Computed from `--ig-surface-500` brightness | Light/dark mode detection |
+| `fontColor` | Derived from `isDark` | Text color (white for dark, black for light) |
+| `dashboardBackgroundColor` | `--ig-gray-100` | Dashboard background |
+| `visualizationBackgroundColor` | `--ig-surface-500` | Individual visualization card background |
+## Re-syncing After Theme Switch
+When the user switches between light and dark Ignite UI themes, call `setRevealTheme()` again to update the Reveal dashboard:
+```tsx
+function handleThemeToggle() {
+  // ... toggle Ignite UI theme (e.g., swap CSS imports)
+  // Re-sync Reveal theme after DOM updates
+  requestAnimationFrame(() => {
+    setRevealTheme();
+  });
+}
+```
+See the [components skill](../../igniteui-react-components/reference/REVEAL-SDK.md) for full Reveal SDK setup instructions including installation, runtime scripts, and `$.ig.RevealView` initialization.

package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/SASS-THEMING.md ADDED Viewed

@@ -0,0 +1,125 @@
+# Sass Theming
+> Requires Sass configured in the project (e.g., `sass` in `devDependencies` and Vite/webpack configured to handle `.scss` files).
+## Basic Setup
+```scss
+// src/styles.scss
+@use 'igniteui-theming' as *;
+// 1. Define a palette
+$my-palette: palette(
+  $primary: #1976D2,
+  $secondary: #FF9800,
+  $surface: #FAFAFA
+);
+// 2. Apply the palette
+@include palette($my-palette);
+// 3. Optional: Typography
+@include typography($font-family: "'Roboto', sans-serif");
+// 4. Optional: Elevations
+@include elevations();
+// 5. Optional: Spacing
+@include spacing();
+```
+Import in your React entry point:
+```tsx
+// main.tsx
+import './styles.scss';
+```
+## Dark Theme
+For dark themes, use a dark surface color and a dark schema:
+```scss
+@use 'igniteui-theming' as *;
+$dark-palette: palette(
+  $primary: #90CAF9,
+  $secondary: #FFB74D,
+  $surface: #121212
+);
+@include palette($dark-palette, $schema: $dark-material-schema);
+```
+> **Important:** Use `@use 'igniteui-theming'` — not `igniteui-angular/theming` or Angular-specific `core()` / `theme()` mixins.
+## Component-Level Theming with Sass
+When Sass is configured, use component theme functions and the `tokens` mixin:
+```scss
+@use 'igniteui-theming' as *;
+$custom-avatar: avatar-theme(
+  $schema: $light-material-schema,
+  $background: var(--ig-primary-500),
+  $color: var(--ig-primary-500-contrast)
+);
+igc-avatar {
+  @include tokens($custom-avatar);
+}
+```
+## Light/Dark Toggle with Sass
+```scss
+@use 'igniteui-theming' as *;
+$light-palette: palette($primary: #1976D2, $secondary: #FF9800, $surface: #FAFAFA);
+$dark-palette: palette($primary: #90CAF9, $secondary: #FFB74D, $surface: #121212);
+@include typography($font-family: "'Roboto', sans-serif");
+@include elevations();
+// Light is default
+@include palette($light-palette, $schema: $light-material-schema);
+// Dark via class on a container or <body>
+.dark-theme {
+  @include palette($dark-palette, $schema: $dark-material-schema);
+}
+```
+## Theming Architecture
+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`).
+### Palette Shades
+- Shades 50 = lightest, 900 = darkest for all chromatic colors
+- Surface color must match the variant — light color for `light`, dark color for `dark`
+## Key Rules
+1. **Sass**: Use `@use 'igniteui-theming'` — not `igniteui-angular/theming`
+2. **Sass**: Component themes use `@include tokens($theme)` inside a selector
+3. **Never hardcode colors after palette generation** — use `var(--ig-<family>-<shade>)` palette tokens everywhere

package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/TROUBLESHOOTING.md ADDED Viewed

@@ -0,0 +1,35 @@
+# Theming Troubleshooting
+## Issue: Theme overrides not taking effect
+**Cause:** Override CSS is loaded before the theme CSS.
+**Solution:** Make sure your custom CSS is imported *after* the theme:
+```tsx
+// main.tsx
+import 'igniteui-webcomponents/themes/light/bootstrap.css'; // Theme first
+import './custom-overrides.css'; // Overrides second
+```
+## Issue: CSS custom properties not recognized by TypeScript in inline styles
+**Solution:** Cast to `React.CSSProperties`:
+```tsx
+<div style={{ '--ig-primary-h': '260deg' } as React.CSSProperties}>
+```
+## Issue: Component-level CSS selectors don't match
+**Cause:** Using React component name instead of web component tag name in CSS.
+**Solution:** Use the underlying web component tag name in CSS selectors:
+```css
+/* ✅ Correct — web component tag */
+igc-button { --ig-size: 1; }
+/* ❌ Wrong — React wrapper name */
+IgrButton { --ig-size: 1; }
+```