igniteui-cli 15.0.0 → 15.0.1

package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-generate-from-image-design/reference/component-mapping.md

@@ -0,0 +1,146 @@
+# Ignite UI React Component Mapping Reference
+
+## Table of Contents
+- [Dashboard & Layout Components](#dashboard--layout-components)
+- [Chart Components](#chart-components)
+- [Data Display Components](#data-display-components)
+- [Form & Input Components](#form--input-components)
+- [Calendar & Scheduling Components](#calendar--scheduling-components)
+- [Map Components](#map-components)
+- [Gauge Components](#gauge-components)
+- [Package Requirements](#package-requirements)
+- [Import Patterns](#import-patterns)
+
+## Dashboard & Layout Components
+
+| UI Pattern | Ignite UI Component | Key Properties |
+|---|---|---|
+| Top navigation bar | `IgrNavbar` | children plus named action/content slots |
+| Side navigation | `IgrNavDrawer` | `open`, drawer items, `icon` and `content` slots |
+| Content cards/panels | `IgrCard` | `IgrCardHeader`, `IgrCardContent`, `IgrCardActions` |
+| Tabbed content | `IgrTabs` + `IgrTab` | `label`, `slot="label"` |
+| Accordion sections | `IgrAccordion` | `IgrExpansionPanel` children |
+| Split layouts | `IgrSplitter` | resizable panes when splitter chrome is visible |
+| Tile dashboard | `IgrTileManager` | drag/resize tiles |
+
+Decision rule:
+
+- Use `IgrNavbar` for a top horizontal bar when its slot structure and behavior match the screenshot. Use custom children and CSS flex overrides to achieve multi-zone layouts inside it. Use a plain `<header>` when that is a closer structural fit.
+- Use `IgrNavDrawer` for a sidebar or side-navigation panel when drawer structure and behavior match the screenshot. Configure open and mini behavior according to whether the design shows fixed, collapsible, or icon-only navigation. Use a plain `<aside>` when a static custom sidebar matches the screenshot better.
+- Use `IgrTabs` for a horizontal tab strip when the screenshot clearly shows tabbed state switching. Use label-only tabs for routed navigation and inline tab content for local view switching.
+
+Component decision matrix (by visual pattern, domain-neutral):
+
+| Visual Pattern | Recommended Component | Notes |
+|---|---|---|
+| Repeated rows with icon/text/action | `IgrList` | Use when the row anatomy and interaction model match. Compose the row content with React children and the documented slots. Use native `<ul>/<li>` or custom containers when that is a closer visual fit |
+| Spreadsheet-like editable or sortable table | `IgrGridLite` or `IgrGrid` | Use only when content is truly tabular. Prefer `IgrGridLite` for lightweight MIT cases and `IgrGrid` when advanced grid features are required |
+| Hierarchical or tree-structured table | `IgrTreeGrid` or `IgrTree` | Use `IgrTreeGrid` for hierarchical tables and `IgrTree` for tree-style navigation or nested lists |
+| Content blocks / summary cards | `IgrCard` | Use when card chrome helps match the panel shape and structure. Use `IgrCardHeader`, `IgrCardContent`, and `IgrCardActions`, or plain `<div>` containers for flat or highly custom tiles |
+| Any text input field | `IgrInput` | Use when the input anatomy matches the screenshot, including search fields and inline editors. Apply CSS to match the screenshot's border/radius style |
+| Dropdown or select | `IgrSelect` | Use when the screenshot clearly shows select/dropdown behavior |
+| Form fields with labels and inputs | `IgrInput`, `IgrSelect`, `IgrCombo`, `IgrDatepicker`, `IgrDateTimeInput` | Cover text, select, combo, and date/time inputs |
+| Multi-step form / wizard | `IgrStepper` | Use when a sequence of steps is visually present |
+| Filter chips / tag inputs | `IgrChip` | Use when chip anatomy matches status badges, filter tags, or removable labels in the screenshot |
+| Calendar or date picker as a primary view element | `IgrCalendar`, `IgrDatepicker`, `IgrDateRangePicker` | Use when scheduling or date selection is the core UI |
+| Top icon/action bar | `IgrNavbar` with `IgrButton` / `IgrIconButton` | Use when a navbar structure matches the screenshot; use plain icon buttons or custom containers when that is a closer fit |
+
+## Chart Components
+
+| UI Pattern | Ignite UI Component | Key Properties |
+|---|---|---|
+| Area chart | `IgrCategoryChart` | `chartType`, `markerTypes`, `areaFillOpacity` |
+| Line chart | `IgrCategoryChart` | `chartType`, `markerTypes` |
+| Column/bar chart | `IgrCategoryChart` | `chartType`, `markerTypes`, `includedProperties` |
+| Sparkline (mini chart) | `IgrSparkline` or `IgrDataChart` | `displayType`, `valueMemberPath`, sized container |
+| Pie/donut chart | `IgrPieChart` | `valueMemberPath`, `labelMemberPath` |
+| Financial chart | `IgrFinancialChart` | OHLC/candlestick data |
+| Complex multi-series | `IgrDataChart` | multiple series + axes plus module registration |
+
+Decision rule:
+
+- Financial or OHLC screenshot: prefer `IgrFinancialChart`
+- Simple or moderate trend panel: prefer `IgrCategoryChart`; move to `IgrDataChart` when you need lower-level per-series control
+- Highly custom sparkline or microchart: use the sparkline component from `igniteui-react-charts` or a custom fallback if the built-in anatomy is not a close visual match
+
+## Data Display Components
+
+| UI Pattern | Ignite UI Component | Key Properties |
+|---|---|---|
+| Item list | `IgrList` | slot-based row content, selection, and dense list styling |
+| User avatar | `IgrAvatar` | `initials`, `shape`, `size` |
+| Status badge | `IgrBadge` | value/children plus token-based styling |
+| Icons | `IgrIcon` | icon name, collection, styling |
+| Progress bar | `IgrLinearProgress` | `value`, `max` |
+| Circular progress | `IgrCircularProgress` | `value`, `max` |
+| Flat data grid | `IgrGridLite` or `IgrGrid` | choose by feature level and package availability |
+| Hierarchical/tree data grid | `IgrTreeGrid` | parent-child data |
+| Filter/tag chips | `IgrChip` | selected state, removable UI, token-based styling |
+
+Decision rule:
+
+- Use `IgrList` for repeated-row content lists when its row structure and interaction model match the screenshot. The component adds accessible keyboard navigation, item structure, and theming when those benefits fit the design. Use native `<ul>/<li>` or custom containers when they are a closer visual fit.
+- Choose `IgrGridLite` or `IgrGrid` only when the image is truly tabular (flat rows and columns, spreadsheet-style).
+- Choose `IgrTreeGrid` when rows have parent-child or hierarchical structure.
+- Use `IgrChip` when chip anatomy matches the screenshot's status badges, tags, or label pills. Use custom badge or pill markup when a simpler or more exact visual match is needed.
+
+## Form & Input Components
+
+| UI Pattern | Ignite UI Component | Key Properties |
+|---|---|---|
+| Text input | `IgrInput` | `label`, `placeholder`, `type` |
+| Dropdown select | `IgrSelect` | option children, label, value |
+| Searchable multi-select | `IgrCombo` | `data`, `displayKey`, `valueKey` |
+| Date picker | `IgrDatepicker` | value and label props |
+| Date/time input | `IgrDateTimeInput` | value, format options |
+| Toggle switch | `IgrSwitch` | checked state, change events |
+| Checkbox | `IgrCheckbox` | checked state, `indeterminate` |
+| Radio button group | `IgrRadioGroup` + `IgrRadio` | `name`, selected value |
+| Slider | `IgrSlider` | `min`, `max`, `value` |
+| Multi-step wizard | `IgrStepper` | orientation, step composition |
+| Chip filter bar | `IgrChip` collection in a flex wrapper | compose removable/filter chips manually |
+
+## Calendar & Scheduling Components
+
+| UI Pattern | Ignite UI Component | Key Properties |
+|---|---|---|
+| Calendar view | `IgrCalendar` | selection mode, `value`, change events |
+| Date range picker | `IgrDateRangePicker` | range value, change events |
+| Month/year picker | `IgrCalendar` | month/year view settings per docs |
+
+## Map Components
+
+| UI Pattern | Ignite UI Component | Key Properties |
+|---|---|---|
+| World map | `IgrGeographicMap` | `zoomable`, `backgroundContent` |
+| Map markers | `IgrGeographicSymbolSeries` | `latitudeMemberPath`, `longitudeMemberPath`, `markerType`, `markerBrush` |
+| Bubble overlay | `IgrGeographicProportionalSymbolSeries` | sized markers |
+| Shape regions | `IgrGeographicShapeSeries` | polygon rendering |
+
+## Gauge Components
+
+| UI Pattern | Ignite UI Component | Key Properties |
+|---|---|---|
+| Linear gauge | `IgrLinearGauge` | `value`, `minimumValue`, `maximumValue`, `needleBrush` |
+| Radial gauge | `IgrRadialGauge` | `value`, `minimumValue`, `maximumValue` |
+| Bullet graph | `IgrBulletGraph` | performance vs target |
+
+## Package Requirements
+
+The main `igniteui-react` package contains core UI components (list, avatar, navbar, nav drawer, card, badge, progress, icon, etc.).
+
+Additional component families may require **additional packages** beyond the main React package:
+
+| Capability | Additional packages |
+|---|---|
+| Grid Lite | `igniteui-react` and `igniteui-grid-lite` |
+| Advanced grids | `igniteui-react-grids` or `@infragistics/igniteui-react-grids` |
+| Charts / sparklines | `igniteui-react-charts` or `@infragistics/igniteui-react-charts` |
+| Maps | `igniteui-react-maps` or `@infragistics/igniteui-react-maps` |
+| Gauges / bullet graphs | `igniteui-react-gauges` or `@infragistics/igniteui-react-gauges` |
+
+Install only the packages required by the components you actually selected. Resolve the exact package version against the installed Ignite UI major and the actual published package versions before installing. Charts, maps, and gauges also require module registration in React files.
+
+## Import Patterns
+
+Treat this file as a component selection reference, not as authoritative import guidance for a specific repo. Confirm exact imports from the current workspace, the existing React skills, and `get_doc` results. For styling selectors, target the rendered `igc-*` tag names instead of the React `Igr*` component names.

package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-generate-from-image-design/reference/gotchas.md

@@ -0,0 +1,200 @@
+# Ignite UI React Gotchas & Pitfalls
+
+## Table of Contents
+- [React Wrappers & CSS Selectors](#react-wrappers--css-selectors)
+- [Chart Properties](#chart-properties)
+- [Component Properties](#component-properties)
+- [Theming Pitfalls](#theming-pitfalls)
+- [Map Component](#map-component)
+- [Dark Theme Specifics](#dark-theme-specifics)
+
+## React Wrappers & CSS Selectors
+
+### Use JSX props and children
+Pass dynamic values as JSX expressions and use children with `slot` attributes for named regions:
+
+```tsx
+<IgrCard>
+  <IgrCardHeader>
+    <h3 slot="title">{'<resolved-card-title>'}</h3>
+    <p slot="subtitle">{'<resolved-card-subtitle>'}</p>
+  </IgrCardHeader>
+  <IgrCardContent>{'<resolved-card-content>'}</IgrCardContent>
+</IgrCard>
+```
+
+### CSS selectors must target rendered `igc-*` tags
+When applying CSS custom properties, `::part()` selectors, or MCP-generated component theme blocks, target the underlying web component selectors:
+
+```css
+.dashboard-panel igc-card::part(header) {
+  padding: <resolved-header-padding>;
+}
+```
+
+Do not write selectors against React wrapper names.
+
+## Chart Properties
+
+### Charts, gauges, and maps require module registration
+The React wrappers for charts, gauges, and maps must register their modules once at module level before use:
+
+```tsx
+import { IgrCategoryChartModule } from 'igniteui-react-charts';
+
+IgrCategoryChartModule.register();
+```
+
+`IgrGridLite` does **not** require registration.
+
+### Markers shown by default
+Category charts show markers at every data point by default. If the screenshot does not show markers, set `markerTypes` to the matching no-marker option documented for the component:
+```tsx
+<IgrCategoryChart markerTypes="<resolved-marker-types>" />
+```
+
+`markerTypes` must use the documented marker type values for the chosen chart. Do not pass an array of lowercase strings.
+
+### `plotAreaBackground` does NOT exist on `IgrCategoryChart`
+Use CSS to style the chart container background instead.
+
+### `areaFillOpacity` exists on `IgrCategoryChart`
+It does NOT exist on the sparkline component.
+
+### `includedProperties` must be an array prop
+Use a JSX array expression, not a plain string:
+```tsx
+<IgrCategoryChart includedProperties={['fieldOne', 'fieldTwo', 'fieldThree']} />
+```
+Replace `'fieldOne'`, `'fieldTwo'`, etc. with the actual data property names from your mock data.
+
+### Chart callback props must receive function references
+Function-valued chart props must receive a function reference:
+```tsx
+<IgrCategoryChart xAxisFormatLabel={labelFormatter} />
+```
+
+### Smooth area charts
+For smooth-looking area charts where the data should appear continuous rather than spiky:
+- Increase data density until the line or area reads as continuous at the rendered size
+- Apply smoothing only when the source shape in the design looks smoothed rather than point-to-point
+- Hide markers unless the screenshot clearly shows visible data points
+- Tune fill opacity and label density to match the screenshot instead of relying on a fixed default
+
+### Charts inside CSS Grid can collapse
+In a flexible CSS Grid track, set `min-height: 0` on the grid cell and make the chart fill its container:
+```css
+.chart-panel {
+  min-height: 0;
+}
+
+.chart-panel > * {
+  height: <resolved-chart-height>;
+  width: <resolved-chart-width>;
+}
+```
+
+## Component Properties
+
+### `roundShape` does NOT exist on `IgrAvatar`
+Use the supported `shape` input alone. Do not add `roundShape`.
+
+### Tabs used for navigation should be label-only
+When a screenshot shows tabs that drive routed page content, use label-only `IgrTab` items and keep the routed content outside the `IgrTabs` component. Do not place inline tab panel content inside router-driven tabs.
+
+### Avatar background color via CSS variable
+```tsx
+<div style={{ '--ig-avatar-background': color } as React.CSSProperties}>
+  <IgrAvatar />
+</div>
+```
+
+## Theming Pitfalls
+
+### Theme CSS imports are required
+Core components need a base theme import, and grids need an additional grid theme import:
+
+```tsx
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
+```
+
+Do not remove or replace those imports unless the user explicitly wants a theme variant change.
+
+### DV components require explicit visual props
+Charts, maps, gauges, and sparklines do not use the component-token theme generation flow from this skill. Set their visual properties explicitly via component props. After a palette exists, prefer palette tokens or local semantic CSS variables over leaving raw color literals in the final JSX:
+```tsx
+<IgrCategoryChart
+  brushes="<resolved-series-brush>"
+  outlines="<resolved-series-outline>"
+  xAxisLabelTextColor="<resolved-axis-label-color>"
+  yAxisMajorStroke="<resolved-grid-line-color>"
+/>
+```
+
+### Component theme functions
+For core UI component theming, prefer `create_component_theme` and apply the returned theme block as generated by the MCP server.
+
+### Nav drawer width
+Override the drawer width using the nav drawer CSS custom properties measured from the design image:
+```css
+igc-nav-drawer {
+  --ig-nav-drawer-size: <extracted-sidebar-width>;
+  --ig-nav-drawer-size--mini: <extracted-mini-drawer-width>;
+}
+```
+
+### Read luminance warnings from theme generation
+If `create_theme` returns a luminance warning for a generated surface, do not ignore it. If the design needs multiple surface depths, use `create_custom_palette` or define semantic CSS variables such as `--surface-1` and `--surface-2` in a shared CSS file instead of relying on a single generated surface color.
+
+## Map Component
+
+### Adding markers programmatically
+The geographic map often requires programmatic series setup once the map ref is available:
+```tsx
+const mapRef = useRef<IgrGeographicMap>(null);
+
+useEffect(() => {
+  const map = mapRef.current;
+  if (!map) return;
+
+  const symbolSeries = new IgrGeographicSymbolSeries();
+  symbolSeries.dataSource = locations;
+  symbolSeries.latitudeMemberPath = '<latitude-field>';
+  symbolSeries.longitudeMemberPath = '<longitude-field>';
+  symbolSeries.markerType = <resolvedMarkerType>;
+  symbolSeries.markerBrush = '<resolved-accent-color>';
+  symbolSeries.markerOutline = '<resolved-accent-color>';
+  map.series.add(symbolSeries);
+  map.zoomToGeographic({ left: <min-longitude>, top: <top-latitude>, width: <longitude-span>, height: <latitude-span> });
+}, []);
+```
+
+### Dark map styling
+OpenStreetMap tiles are light by default. For dark themes, apply a CSS filter to the container. Adjust the values to match the map tone in the design image:
+```css
+.map-container {
+  /* tune grayscale (0-1) and brightness (0-1) to match the design */
+  filter: grayscale(<0-1>) brightness(<0-1>);
+}
+```
+
+## Dark Theme Specifics
+
+### CSS custom properties for dark panels
+When the design uses multiple dark surface depths (panels, sidebars, cards on a dark background), define reusable semantic tokens using palette references or values derived from the design intent:
+
+```css
+:root {
+  --surface-primary: <resolved-surface-token>;
+  --surface-secondary: <resolved-surface-token>;
+  --accent-strong: <resolved-accent-token>;
+  --text-primary: <resolved-text-token>;
+  --text-secondary: <resolved-text-token>;
+}
+```
+
+If `create_theme` returns a single surface color that doesn't cover all depth levels visible in the design, define additional surface tokens (`--surface-1`, `--surface-2`, etc.) for each distinct depth.
+
+### Scope dark overrides on a wrapper before reaching for file-wide theme swaps
+When only one view or panel should match a dark screenshot, prefer a scoped wrapper class with semantic CSS variables over replacing the app's global theme import.

package/templates/react/igr-ts/projects/_base/files/package.json

@@ -15,7 +15,7 @@
     "@testing-library/react": "^16.3.0",
     "element-internals-polyfill": "^3.0.2",
     "functions-have-names": "^1.2.3",
-    "igniteui-react": "~19.6.1",
+    "igniteui-react": "~19.6.2",
     "react": "^19.2.4",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^19.2.4",

package/templates/webcomponents/igc-ts/dock-manager/default/index.js

@@ -11,7 +11,7 @@ class IgcDockManagerTemplate extends IgniteUIForWebComponentsTemplate_1.IgniteUI
         this.projectType = "igc-ts";
         this.name = "Dock Manager";
         this.description = "Dock Manager with most functionalities and docking options";
-        this.packages = ["igniteui-dockmanager@^2.1.0"];
+        this.packages = ["igniteui-dockmanager@^2.1.1"];
     }
 }
 module.exports = new IgcDockManagerTemplate();

package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-choose-components/SKILL.md

@@ -8,6 +8,26 @@ user-invocable: true
 
 This skill helps AI agents and developers identify the best Ignite UI components for any UI requirement, then provides direct links to official documentation, usage examples, and API references.
 
+## Prerequisites
+
+- The **Ignite UI CLI MCP server** (`igniteui-cli`) available as a tool provider
+
+> **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)**
+>
+> Before using the Ignite UI CLI MCP tools, you MUST verify the MCP server is available
+> by calling `list_components`. If the tool is not available or the call fails,
+> you MUST automatically configure it by following the setup instructions in
+> [`reference/mcp-setup.md`](./reference/mcp-setup.md).
+>
+> After writing the file, inform the user that the MCP server has been
+> configured and they may need to reload the editor for the tools to activate.
+> Start the MCP server and wait for that MCP server to start before continuing the component-related work.
+> Do NOT skip this step or ask the user to do it manually.
+
+## Setting Up the Ignite UI CLI MCP Server
+
+> **Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in [`reference/mcp-setup.md`](./reference/mcp-setup.md).** Read that file for editor-specific configuration steps and verification.
+
 ## Before You Answer
 
 - Choose the package before writing imports or install steps.

package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-choose-components/reference/mcp-setup.md

@@ -0,0 +1,82 @@
+# Setting Up the Ignite UI CLI MCP Server
+
+> **Part of the [`igniteui-wc-choose-components`](../SKILL.md) skill hub.**
+
+## Contents
+
+- [Setting Up the Ignite UI CLI MCP Server](#setting-up-the-ignite-ui-cli-mcp-server)
+  - [Contents](#contents)
+  - [VS Code](#vs-code)
+  - [Cursor](#cursor)
+  - [Claude Desktop](#claude-desktop)
+  - [WebStorm / JetBrains IDEs](#webstorm--jetbrains-ides)
+  - [Verifying the Setup](#verifying-the-setup)
+
+The Ignite UI CLI MCP server enables AI assistants to discover Ignite UI components, access component documentation, and support related Ignite UI workflows. It must be configured in your editor before these tools become available.
+
+## VS Code
+
+Create or edit `.vscode/mcp.json` in your project:
+
+```json
+{
+  "servers": {
+    "igniteui-cli": {
+      "command": "npx",
+      "args": ["-y", "igniteui-cli", "mcp"]
+    }
+  }
+}
+```
+
+This works whether `igniteui-cli` is installed locally in `node_modules` or needs to be pulled from the npm registry — `npx -y` handles both cases.
+
+## Cursor
+
+Create or edit `.cursor/mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "igniteui-cli": {
+      "command": "npx",
+      "args": ["-y", "igniteui-cli", "mcp"]
+    }
+  }
+}
+```
+
+## Claude Desktop
+
+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-cli": {
+      "command": "npx",
+      "args": ["-y", "igniteui-cli", "mcp"]
+    }
+  }
+}
+```
+
+## WebStorm / JetBrains IDEs
+
+1. Go to **Settings → Tools → AI Assistant → MCP Servers**
+2. Click **+ Add MCP Server**
+3. Set Command to `npx` and Arguments to `-y igniteui-cli mcp`
+4. Click OK and restart the AI Assistant
+
+> The `-y` flag skips interactive prompts if `igniteui-cli` is not already installed locally.
+
+## Verifying the Setup
+
+After configuring the MCP server, ask your AI assistant:
+
+> "List all available Ignite UI components"
+
+If the MCP server is running, the `list_components` tool will return all available components for the detected framework.

package/templates/webcomponents/igc-ts/projects/_base/files/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@vaadin/router": "^2.0.0",
-    "igniteui-webcomponents": "~7.1.2",
+    "igniteui-webcomponents": "~7.1.3",
     "lit": "^3.3.2"
   },
   "devDependencies": {

package/templates/webcomponents/igc-ts/projects/_base_with_home/files/package.json

@@ -14,8 +14,8 @@
   "dependencies": {
     "@vaadin/router": "^2.0.0",
     "@igniteui/material-icons-extended": "^3.0.2",
-    "igniteui-dockmanager": "^2.1.0",
-    "igniteui-webcomponents": "~7.1.2",
+    "igniteui-dockmanager": "^2.1.1",
+    "igniteui-webcomponents": "~7.1.3",
     "igniteui-webcomponents-charts": "~7.0.0",
     "igniteui-webcomponents-core": "~7.0.0",
     "igniteui-webcomponents-gauges": "~7.0.0",

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

@@ -1,125 +0,0 @@
-# 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