IgniteUI · ChronosSF · Feb 26, 2026 · Feb 19, 2026 · Feb 20, 2026 · Feb 20, 2026
diff --git a/en/components/accordion.md b/en/components/accordion.md
@@ -294,7 +294,9 @@ $custom-panel-theme: expansion-panel-theme(
 The last step is to include the component's theme.
 
 ```scss
-@include css-vars($custom-panel-theme);
+:host {
+    @include tokens($custom-panel-theme);
+}
 ```
 
 ### Demo

diff --git a/en/components/action-strip.md b/en/components/action-strip.md
@@ -185,7 +185,9 @@ $custom-strip: action-strip-theme(
 The last step is to include the newly created component theme in our application.
 
 ```scss
-@include css-vars($custom-strip);
+:host {
+  @include tokens($custom-strip);
+}
 ```
 
 <code-view style="height: 400px;"

diff --git a/...onents/general/ai-assisted-development.md → en/components/ai/skills.md b/...onents/general/ai-assisted-development.md → en/components/ai/skills.md
@@ -1,10 +1,10 @@
 ---
-title: AI-Assisted Development | AI Skills | Ignite UI for Angular | Infragistics
+title: Ignite UI for Angular Skills | AI Skills | AI-Assisted Development | Ignite UI for Angular | Infragistics
 _description: Learn how to use Agent Skills to supercharge AI-assisted development with Ignite UI for Angular components, grids, data operations, and theming.
 _keywords: ignite ui for angular, copilot skills, ai assisted development, github copilot, cursor, windsurf, claude, jetbrains ai
 ---
 
-# AI-Assisted Development
+# Ignite UI for Angular Skills
 
 Ignite UI for Angular ships with **Agent Skills** — structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI, etc.) how to work with Ignite UI for Angular. These skill files provide context-aware guidance on components, grids, data operations, and theming, enabling your AI assistant to generate accurate, idiomatic code that follows best practices.
 
@@ -257,16 +257,16 @@ Once you have the files, open them and load them into your AI assistant:
 
 The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs.
 
-For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](../themes/mcp.md) documentation.
+For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./theming-mcp.md) documentation.
 
 ## Additional Resources
 
 <div class="divider--half"></div>
 
-- [Getting Started with Ignite UI for Angular](getting-started.md)
-- [Angular Schematics & Ignite UI CLI](cli-overview.md)
-- [How to Use Standalone Components](how-to/how-to-use-standalone-components.md)
-- [Code Splitting and Multiple Entry Points](code-splitting-and-multiple-entry-points.md)
+- [Getting Started with Ignite UI for Angular](../general/getting-started.md)
+- [Angular Schematics & Ignite UI CLI](../general/cli-overview.md)
+- [How to Use Standalone Components](../general/how-to/how-to-use-standalone-components.md)
+- [Code Splitting and Multiple Entry Points](../general/code-splitting-and-multiple-entry-points.md)
 
 <div class="divider--half"></div>
 Our community is active and always welcoming to new ideas.

diff --git a/en/components/themes/mcp.md → en/components/ai/theming-mcp.md b/en/components/themes/mcp.md → en/components/ai/theming-mcp.md
@@ -292,7 +292,7 @@ $my-typography: typography(
 
 > _"Our design system specifies exact hex values for all 14 shades of our primary green. I'll paste the values — create a custom palette."_
 
-The AI will call `create_custom_palette` with `mode: "explicit"` for the primary color and auto-generate the rest. See [Palettes](./palettes.md) for more detail on shade generation.
+The AI will call `create_custom_palette` with `mode: "explicit"` for the primary color and auto-generate the rest. See [Palettes](../themes/palettes.md) for more detail on shade generation.
 
 ### Component-Level Customization
 
@@ -328,19 +328,19 @@ Ensure `igniteui-angular` and `igniteui-theming` are installed:
 ng add igniteui-angular
 ```
 
-Also confirm that `core()` is called before any other theming mixin in your `styles.scss`. See [Theming with Sass](./sass/index.md) for the correct file setup.
+Also confirm that `core()` is called before any other theming mixin in your `styles.scss`. See [Theming with Sass](../themes/sass/index.md) for the correct file setup.
 
 ## Additional Resources
 
 Related topics:
 
-- [Theming Overview](./index.md)
-- [Palettes](./palettes.md)
-- [Typography](./typography.md)
-- [Elevations](./elevations.md)
-- [Spacing](./spacing.md)
-- [Roundness](./roundness.md)
-- [Theming with Sass](./sass/index.md)
+- [Theming Overview](../themes/index.md)
+- [Palettes](../themes/palettes.md)
+- [Typography](../themes/typography.md)
+- [Elevations](../themes/elevations.md)
+- [Spacing](../themes/spacing.md)
+- [Roundness](../themes/roundness.md)
+- [Theming with Sass](../themes/sass/index.md)
 
 <div class="divider--half"></div>
 

diff --git a/en/components/avatar.md b/en/components/avatar.md
@@ -208,7 +208,7 @@ The last step is to pass the custom avatar theme:
 
 ```scss
 .initials {
-  @include css-vars($custom-avatar-theme);
+  @include tokens($custom-avatar-theme);
 }
 ```
 
@@ -270,7 +270,7 @@ igx-avatar {
 }
 ```
 
-Or you can use the universal `--igx-avatar-size` variable to target all instances:
+Or you can use the universal `--ig-avatar-size` variable to target all instances:
 
 ```html
 <div class="my-app">
@@ -280,7 +280,7 @@ Or you can use the universal `--igx-avatar-size` variable to target all instance
 
 ```scss
 .my-app {
-  --igx-avatar-size: 200px;
+  --ig-avatar-size: 200px;
 }
 ```
 

diff --git a/en/components/badge.md b/en/components/badge.md
@@ -345,10 +345,12 @@ $custom-badge-theme: badge-theme(
 );
 ```
 
-To include the new theme we use the `css-vars` mixin:
+To include the new theme we use the `tokens` mixin:
 
 ```scss
-@include css-vars($custom-badge-theme);
+:host {
+  @include tokens($custom-badge-theme);
+}
 ```
 
 ### Demo

diff --git a/en/components/banner.md b/en/components/banner.md
@@ -286,7 +286,9 @@ $custom-banner-theme: banner-theme(
 The last step is to pass the custom banner theme:
 
 ```scss
-@include css-vars($custom-banner-theme);
+:host {
+    @include tokens($custom-banner-theme);
+}
 ```
 
 <code-view style="height: 530px"

diff --git a/en/components/button-group.md b/en/components/button-group.md
@@ -425,7 +425,9 @@ As seen, the `button-group-theme` exposes some useful parameters for basic styli
 The last step is to include the component's theme.
 
 ```scss
-@include css-vars($custom-button-group);
+:host {
+  @include tokens($custom-button-group);
+}
 ```
 
 ### Demo

diff --git a/en/components/button.md b/en/components/button.md
@@ -1451,7 +1451,7 @@ Finally, **include** the custom theme in your application:
 
 ```scss
 .my-contained-btn {
-    @include css-vars($custom-contained-theme);
+  @include tokens($custom-contained-theme);
 }
 ```
 
@@ -1548,7 +1548,7 @@ button {
 }
 ```
 
-Or you can use the universal `--igx-button-size` variable to target all instances:
+Or you can use the universal `--ig-button-size` variable to target all instances:
 
 ```html
 <div class="my-app">
@@ -1558,7 +1558,7 @@ Or you can use the universal `--igx-button-size` variable to target all instance
 
 ```scss
 .my-app {
-  --igx-button-size: 50px;
+  --ig-button-size: 50px;
 }
 ```
 

diff --git a/en/components/calendar.md b/en/components/calendar.md
@@ -799,7 +799,9 @@ $custom-calendar-theme: calendar-theme(
 The last step is to pass the custom calendar theme:
 
 ```scss
- @include css-vars($custom-calendar-theme);
+:host {
+    @include tokens($custom-calendar-theme);
+}
 ```
 
 <code-view style="height:500px"

diff --git a/en/components/card.md b/en/components/card.md
@@ -396,7 +396,9 @@ As seen, the `card-theme` exposes some useful parameters for basic styling of it
 Finally, **include** the custom theme in your application:
 
 ```scss
-@include css-vars($custom-card-theme);
+:host {
+    @include tokens($custom-card-theme);
+}
 ```
 
 In the sample below, you can see how using the card component with customized CSS variables allows you to create a design that visually resembles the card used in the [`Ant`](https://ant.design/components/card?theme=light#card-demo-meta) design system.

diff --git a/en/components/carousel.md b/en/components/carousel.md
@@ -696,7 +696,9 @@ $carousel-theme: carousel-theme(
 The last step is to include the component's theme.
 
 ```scss
-@include css-vars($carousel-theme);
+:host {
+  @include tokens($carousel-theme);
+}
 ```
 
 ### Demo

diff --git a/en/components/checkbox.md b/en/components/checkbox.md
@@ -343,7 +343,9 @@ $custom-checkbox-theme: checkbox-theme(
 Finally, **include** the custom theme in your application:
 
 ```scss
-@include css-vars($custom-checkbox-theme);
+:host {
+    @include tokens($custom-checkbox-theme);
+}
 ```
 
 In the sample below, you can see how using the checkbox component with customized CSS variables allows you to create a design that visually resembles the checkbox used in the [`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.CheckBox/sample/sap.m.sample.CheckBox) design system.

diff --git a/en/components/chip.md b/en/components/chip.md
@@ -624,7 +624,9 @@ $custom-chip-theme: chip-theme(
 Finally, **include** the custom theme in your application:
 
 ```scss
-@include css-vars($custom-chip-theme);
+:host {
+  @include tokens($custom-chip-theme);
+}
 ```
 
 In the sample below, you can see how using the chip component with customized CSS variables allows you to create a design that visually resembles the chip used in the [`Ant`](https://ant.design/components/tag?theme=light#tag-demo-icon) design system.
@@ -687,7 +689,7 @@ igx-chip {
 }
 ```
 
-Or you can use the universal `--igx-chip-size` variable to target all instances:
+Or you can use the universal `--ig-chip-size` variable to target all instances:
 
 ```html
 <div class="my-app">
@@ -697,7 +699,7 @@ Or you can use the universal `--igx-chip-size` variable to target all instances:
 
 ```scss
 .my-app {
-  --igx-chip-size: 50px;
+  --ig-chip-size: 50px;
 }
 ```
 

diff --git a/en/components/circular-progress.md b/en/components/circular-progress.md
@@ -250,7 +250,9 @@ $custom-theme: progress-circular-theme(
 The last step is to **include** the component theme in our application.
 
 ```scss
-@include css-vars($custom-theme);
+:host {
+  @include tokens($custom-theme);
+}
 ```
 
 ### Demo

diff --git a/en/components/combo.md b/en/components/combo.md
@@ -387,10 +387,10 @@ $custom-checkbox-theme: checkbox-theme(
 The last step is to include the component's theme.
 
 ```scss
-:host ::ng-deep {
-  @include css-vars($custom-combo-theme);
-  @include css-vars($custom-drop-down-theme);
-  @include css-vars($custom-checkbox-theme);
+:host {
+  @include tokens($custom-combo-theme);
+  @include tokens($custom-drop-down-theme);
+  @include tokens($custom-checkbox-theme);
 }
 ```
 

diff --git a/en/components/date-picker.md b/en/components/date-picker.md
@@ -336,7 +336,9 @@ $custom-datepicker-theme: calendar-theme(
 The last step is to pass the custom Date Picker theme:
 
 ```scss
-@include css-vars($custom-datepicker-theme);
+:host {
+    @include tokens($custom-datepicker-theme);
+}
 ```
 
 >[!WARNING]
@@ -345,7 +347,7 @@ The last step is to pass the custom Date Picker theme:
 ```scss
 :host {
   ::ng-deep {
-    @include css-vars($custom-datepicker-theme);
+    @include tokens($custom-datepicker-theme);
   }
 }
 ```

diff --git a/en/components/date-range-picker.md b/en/components/date-range-picker.md
@@ -535,9 +535,11 @@ $custom-calendar-theme: calendar-theme(
 The last step is to pass the custom themes:
 
 ```scss
-@include css-vars($custom-date-range-theme);
-@include css-vars($custom-input-group-theme);
-@include css-vars($custom-calendar-theme);
+:host {
+  @include tokens($custom-date-range-theme);
+  @include tokens($custom-input-group-theme);
+  @include tokens($custom-calendar-theme);
+}
 ```
 
 >[!WARNING]

diff --git a/en/components/dialog.md b/en/components/dialog.md
@@ -338,7 +338,9 @@ Since the dialog window uses the [`IgxOverlayService`](overlay.md), in order for
 The last step is to **include** the component theme in our application.
 
 ```scss
-@include css-vars($my-dialog-theme);
+:host {
+    @include tokens($my-dialog-theme);
+}
 ```
 
 >[!NOTE]
@@ -347,7 +349,7 @@ The last step is to **include** the component theme in our application.
 ```scss
 :host {
   ::ng-deep {
-    @include css-vars($my-dialog-theme);
+    @include tokens($my-dialog-theme);
   }
 }
 ```

diff --git a/en/components/drop-down.md b/en/components/drop-down.md
@@ -635,11 +635,11 @@ $custom-drop-down-theme: drop-down-theme(
 );
 ```
 
-The last step is to pass the custom drop-down theme to a class or element selector:
+The last step is to pass the custom drop-down theme:
 
 ```scss
-.drop-down__scroll-container {
-  @include css-vars($custom-drop-down-theme);
+:host {
+  @include tokens($custom-drop-down-theme);
 }
 ```
 

diff --git a/en/components/expansion-panel.md b/en/components/expansion-panel.md
@@ -335,11 +335,13 @@ $custom-panel-theme: expansion-panel-theme(
 
 ### Applying the Component Theme
 
-Now to apply the component theme all that's left is to include `css-vars` mixin and pass the `$custom-panel-theme` map.
+Now to apply the component theme all that's left is to include `tokens` mixin and pass the `$custom-panel-theme` map.
 
 ```scss
 // In expansion-styling.component.scss
-@include css-vars($custom-panel-theme);
+:host {
+  @include tokens($custom-panel-theme);
+}
 ```
 
 To find out more on how you can use Ignite UI theming engine [`click here`](themes/sass/component-themes.md)

diff --git a/en/components/general/getting-started.md b/en/components/general/getting-started.md
@@ -306,13 +306,13 @@ In this article we learned how to create our own Ignite UI for Angular applicati
 
 Ignite UI for Angular ships with **Agent Skills** — structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI, etc.) how to work with the library. Skills cover components, data grids, grid data operations, and theming.
 
-Learn more in the [AI-Assisted Development](ai-assisted-development.md) topic.
+Learn more in the [Ignite UI for Angular Skills](../ai/skills.md) topic.
 
 ## Additional Resources
 
 <div class="divider--half"></div>
 
-- [AI-Assisted Development](ai-assisted-development.md)
+- [Ignite UI for Angular Skills](../ai/skills.md)
 - [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli)
 - [Ignite UI CLI Commands](https://github.com/IgniteUI/igniteui-cli/wiki#available-commands)
 - [Grid overview](../grid/grid.md)