From e424ab704c502dc77085dbd8512e0e61c188a69e Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 19 Feb 2026 16:11:44 +0200 Subject: [PATCH 1/9] docs(theming): update the docs with the new tokens mixin --- en/components/accordion.md | 4 +- en/components/action-strip.md | 4 +- en/components/avatar.md | 6 +- en/components/badge.md | 6 +- en/components/banner.md | 4 +- en/components/button-group.md | 4 +- en/components/button.md | 6 +- en/components/calendar.md | 4 +- en/components/card.md | 4 +- en/components/carousel.md | 4 +- en/components/checkbox.md | 4 +- en/components/chip.md | 8 +- en/components/circular-progress.md | 4 +- en/components/combo.md | 8 +- en/components/date-picker.md | 6 +- en/components/date-range-picker.md | 8 +- en/components/dialog.md | 6 +- en/components/drop-down.md | 6 +- en/components/expansion-panel.md | 6 +- .../general/how-to/how-to-customize-theme.md | 6 +- en/components/grid/groupby.md | 12 +-- .../grids_templates/advanced-filtering.md | 4 +- .../grids_templates/cell-selection.md | 4 +- .../grids_templates/column-hiding.md | 20 ++--- .../grids_templates/column-moving.md | 4 +- .../grids_templates/column-pinning.md | 4 +- .../grids_templates/column-resizing.md | 4 +- .../grids_templates/column-selection.md | 4 +- .../grids_templates/excel-style-filtering.md | 48 +++++++----- en/components/grids_templates/filtering.md | 22 +++--- .../grids_templates/multi-column-headers.md | 4 +- .../grids_templates/multi-row-layout.md | 4 +- en/components/grids_templates/paging.md | 16 ++-- en/components/grids_templates/row-editing.md | 14 ++-- en/components/grids_templates/row-pinning.md | 4 +- en/components/grids_templates/sorting.md | 4 +- en/components/grids_templates/summaries.md | 6 +- en/components/grids_templates/toolbar.md | 18 +++-- en/components/grids_templates/validation.md | 4 +- .../hierarchicalgrid/hierarchical-grid.md | 4 +- en/components/icon.md | 8 +- en/components/input-group.md | 4 +- en/components/linear-progress.md | 4 +- en/components/list.md | 4 +- en/components/month-picker.md | 4 +- en/components/navbar.md | 6 +- en/components/navdrawer.md | 6 +- en/components/overlay-styling.md | 21 +++-- en/components/query-builder.md | 15 ++-- en/components/radio-button.md | 4 +- en/components/ripple.md | 4 +- en/components/select.md | 4 +- en/components/simple-combo.md | 6 +- en/components/slider/slider.md | 4 +- en/components/snackbar.md | 4 +- en/components/splitter.md | 8 +- en/components/stepper.md | 4 +- en/components/switch.md | 4 +- en/components/tabbar.md | 4 +- en/components/tabs.md | 4 +- en/components/texthighlight.md | 6 +- en/components/themes/index.md | 8 +- en/components/themes/sass/component-themes.md | 76 +++++++++++++++---- en/components/themes/sass/configuration.md | 7 +- en/components/themes/sass/elevations.md | 6 +- en/components/themes/sass/schemas.md | 2 +- en/components/time-picker.md | 10 ++- en/components/toast.md | 4 +- en/components/tooltip.md | 6 +- en/components/tree.md | 4 +- en/components/treegrid/tree-grid.md | 4 +- 71 files changed, 369 insertions(+), 198 deletions(-) diff --git a/en/components/accordion.md b/en/components/accordion.md index a4c850fa20..8e942cc582 100644 --- 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 index 411c409d2c..ab815d5ea5 100644 --- 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); +} ``` @@ -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 index 67830a8743..b95e1d7b13 100644 --- 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 index 4df3b2c854..a6c3ab70cb 100644 --- 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); +} ``` @@ -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 index d497254d67..7b809fc851 100644 --- 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); +} ``` @@ -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 index 3269613129..9f5ce120d8 100644 --- 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 index e73228470b..f6a288e966 100644 --- 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 index cbaef0dd81..4a955ff45f 100644 --- 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 index 9ee038d480..1ea9d11e82 100644 --- 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 index 59c810d746..6328b938d9 100644 --- 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 index 08dfae8287..e88cff82f8 100644 --- 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 index fbb3bb6e4f..0f4419533a 100644 --- 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/how-to/how-to-customize-theme.md b/en/components/general/how-to/how-to-customize-theme.md index 470192d18b..670fa87fd3 100644 --- a/en/components/general/how-to/how-to-customize-theme.md +++ b/en/components/general/how-to/how-to-customize-theme.md @@ -110,7 +110,9 @@ $toolbar-theme: grid-toolbar-theme( $background-color: $primary ); -@include css-vars($toolbar-theme); +:host { + @include tokens($toolbar-theme); +} /* END Grid Toolbar */ ``` @@ -186,7 +188,7 @@ Then our theme definition will go in the general scope, which we will use for th ``` >[!NOTE] -> I have switched the `igx-grid-toolbar` theme override to overriding just two of its variables, instead of reincluding all of the theme variables using [`css-vars()`]({environment:sassApiUrl}/themes#mixin-css-vars). +> I have switched the `igx-grid-toolbar` theme override to overriding just two of its variables, instead of reincluding all of the theme variables using [`tokens`]({environment:sassApiUrl}/themes#mixin-tokens). > All theme variables can be found in the [corresponding sass api doc]({environment:sassApiUrl}/themes#function-grid-toolbar-theme) and are equivalent to the sass variables, but prefixed with `--` instead of `$`. And the result now looks like this with light OS theme: diff --git a/en/components/grid/groupby.md b/en/components/grid/groupby.md index 51dcf08acc..cc045c95bf 100644 --- a/en/components/grid/groupby.md +++ b/en/components/grid/groupby.md @@ -442,8 +442,10 @@ $custom-theme: grid-theme( The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: ```scss -@include css-vars($custom-theme); -@include css-vars($custom-chips-theme); +:host { + @include tokens($custom-theme); + @include tokens($custom-chips-theme); +} ``` ### Scoped component theme @@ -458,11 +460,11 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo In our example, we need to use `::ng-deep` for our chip theme: ```scss -@include css-vars($custom-theme); - :host { + @include tokens($custom-theme); + ::ng-deep { - @include chip($custom-chips-theme); + @include tokens($custom-chips-theme); } } ``` diff --git a/en/components/grids_templates/advanced-filtering.md b/en/components/grids_templates/advanced-filtering.md index e9a567739e..c07e53f3f1 100644 --- a/en/components/grids_templates/advanced-filtering.md +++ b/en/components/grids_templates/advanced-filtering.md @@ -286,7 +286,7 @@ $custom-query-builder: query-builder-theme( ); igx-advanced-filtering-dialog { - @include css-vars($custom-query-builder); + @include tokens($custom-query-builder); } ``` @@ -308,7 +308,7 @@ $custom-query-builder: query-builder-theme( :host { ::ng-deep { igx-advanced-filtering-dialog { - @include css-vars($custom-query-builder); + @include tokens($custom-query-builder); } } } diff --git a/en/components/grids_templates/cell-selection.md b/en/components/grids_templates/cell-selection.md index db22903828..20d103b3f2 100644 --- a/en/components/grids_templates/cell-selection.md +++ b/en/components/grids_templates/cell-selection.md @@ -332,7 +332,9 @@ $custom-grid-theme: grid-theme( Afterwards, all we need to do is include the mixin in our component's style (could also be in the app styles), so that our @@igSelector uses the newly created theme instead of the default one: ```scss -@include css-vars($custom-grid-theme); +:host { + @include tokens($custom-grid-theme); +} ``` With the custom theme applied, the selected grid cells are highlighted with our selected colors: diff --git a/en/components/grids_templates/column-hiding.md b/en/components/grids_templates/column-hiding.md index 1ba1aaa6dd..a90e234a99 100644 --- a/en/components/grids_templates/column-hiding.md +++ b/en/components/grids_templates/column-hiding.md @@ -516,7 +516,7 @@ $custom-column-actions-theme: column-actions-theme( As seen, the `column-actions-theme` only controls colors for the column actions container, but does not affect the buttons, checkboxes and the input-group inside of it. Let's say we want to style the buttons as well, so we will create a new button theme: ```scss -$custom-button: button-theme( +$custom-button: flat-button-theme( $foreground: #292826, $disabled-foreground: rgba(255, 255, 255, .54) ); @@ -530,25 +530,27 @@ In this example we only changed the text-color of the flat buttons and the butto The last step is to **include** the component mixins, each with its respective theme: ```scss -@include css-vars($custom-column-actions-theme); - -.igx-column-actions { - @include css-vars($custom-button); +:host { + @include tokens($custom-column-actions-theme); + + .igx-column-actions { + @include tokens($custom-button); + } } ``` >[!NOTE] ->We include the created **button-theme** within `.igx-column-actions`, so that only the column hiding buttons would be styled. Otherwise other buttons in the grid would be affected too. +>We include the created **flat-button-theme** within `.igx-column-actions`, so that only the column hiding buttons would be styled. Otherwise other buttons in the grid would be affected too. >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` for the components inside the column action component (buttons, checkboxes ...etc): ```scss -@include css-vars($custom-column-actions-theme); - :host { + @include tokens($custom-column-actions-theme); + ::ng-deep { .igx-column-actions { - @include css-vars($custom-button); + @include tokens($custom-button); } } } diff --git a/en/components/grids_templates/column-moving.md b/en/components/grids_templates/column-moving.md index a89537a527..ce348dfe9d 100644 --- a/en/components/grids_templates/column-moving.md +++ b/en/components/grids_templates/column-moving.md @@ -219,7 +219,9 @@ $dark-grid-column-moving-theme: grid-theme( The last step is to **include** the component mixins with its respective theme: ```scss -@include css-vars($dark-grid-column-moving-theme); +:host { + @include tokens($dark-grid-column-moving-theme); +} ``` ### Demo diff --git a/en/components/grids_templates/column-pinning.md b/en/components/grids_templates/column-pinning.md index 60187235a5..810b1676e0 100644 --- a/en/components/grids_templates/column-pinning.md +++ b/en/components/grids_templates/column-pinning.md @@ -442,7 +442,9 @@ $custom-theme: grid-theme( The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: ```scss -@include css-vars($custom-theme); +:host { + @include tokens($custom-theme); +} ``` ### Demo diff --git a/en/components/grids_templates/column-resizing.md b/en/components/grids_templates/column-resizing.md index c2c80d188e..065aadc717 100644 --- a/en/components/grids_templates/column-resizing.md +++ b/en/components/grids_templates/column-resizing.md @@ -343,7 +343,9 @@ $custom-grid-theme: grid-theme( The last step is to **include** the component mixins with its respective theme: ```scss -@include css-vars($custom-grid-theme); +:host { + @include tokens($custom-grid-theme); +} ``` ### Demo diff --git a/en/components/grids_templates/column-selection.md b/en/components/grids_templates/column-selection.md index bbf64ae569..1f6e00494d 100644 --- a/en/components/grids_templates/column-selection.md +++ b/en/components/grids_templates/column-selection.md @@ -164,7 +164,9 @@ The [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) accepts The last step is to include the custom `igx-grid` theme. ```scss -@include css-vars($custom-grid-theme) +:host { + @include tokens($custom-grid-theme) +} ``` ### Demo diff --git a/en/components/grids_templates/excel-style-filtering.md b/en/components/grids_templates/excel-style-filtering.md index b74534535d..75deb1a880 100644 --- a/en/components/grids_templates/excel-style-filtering.md +++ b/en/components/grids_templates/excel-style-filtering.md @@ -578,13 +578,17 @@ $custom-grid: grid-theme( We obviously have a lot more components inside the excel like filtering dialog, such as buttons, checkboxes, a list and even a drop-down. In order to style them, we need to create a separate theme for each one: ```scss -$custom-button: button-theme( +$custom-button: contained-button-theme( $background: #ffcd0f, $foreground: #292826, $hover-background: #292826, $hover-foreground: #ffcd0f ); +$flat-custom-button: flat-button-theme( + $foreground: #ffcd0f, +); + $custom-checkbox: checkbox-theme( $empty-color: #292826, $fill-color: #292826, @@ -620,19 +624,21 @@ In this example we only changed some of the parameters for the listed components The last step is to **include** each component’s custom theme. We will also set the color property for the input's placeholder. ```scss -@include css-vars($custom-grid); -@include css-vars($custom-drop-down); - -.igx-excel-filter, -.igx-excel-filter__secondary { - @include css-vars($custom-button); - @include css-vars($custom-checkbox); - @include css-vars($custom-input-group); - @include css-vars($custom-list); - - .igx-input-group__input::placeholder { - color: #ffcd0f; - } +:host { + @include tokens($custom-grid); + @include tokens($custom-drop-down); + + .igx-excel-filter, + .igx-excel-filter__secondary { + @include tokens($custom-button); + @include tokens($custom-checkbox); + @include tokens($custom-input-group); + @include tokens($custom-list); + + .igx-input-group__input::placeholder { + color: #ffcd0f; + } + } } ``` @@ -644,16 +650,16 @@ The last step is to **include** each component’s custom theme. We will also se ```scss :host { ::ng-deep { - @include css-vars($custom-grid); - @include css-vars($custom-drop-down); - + @include tokens($custom-grid); + @include tokens($custom-drop-down); .igx-excel-filter, .igx-excel-filter__secondary { - @include css-vars($custom-button); - @include css-vars($custom-checkbox); - @include css-vars($custom-input-group); - @include css-vars($custom-list); + @include tokens($custom-button); + @include tokens($flat-custom-button); + @include tokens($custom-checkbox); + @include tokens($custom-input-group); + @include tokens($custom-list); .igx-input-group__input::placeholder { color: #ffcd0f; diff --git a/en/components/grids_templates/filtering.md b/en/components/grids_templates/filtering.md index 15d4a7383a..189e9472d6 100644 --- a/en/components/grids_templates/filtering.md +++ b/en/components/grids_templates/filtering.md @@ -626,15 +626,17 @@ In this example we only changed some of the parameters for the input group and t The last step is to **include** the component mixins, each with its respective theme. We will also set the color property for the input's placeholder. ```scss -@include css-vars($custom-grid); +:host { +@include tokens($custom-grid); -.igx-grid__filtering-row { - @include css-vars($dark-button); - @include css-vars($dark-input-group); + .igx-grid__filtering-row { + @include tokens($dark-button); + @include tokens($dark-input-group); - .igx-input-group__input::placeholder { - color: #ffcd0f; - } + .igx-input-group__input::placeholder { + color: #ffcd0f; + } + } } ``` @@ -646,11 +648,11 @@ The last step is to **include** the component mixins, each with its respective t ```scss :host { ::ng-deep { - @include css-vars($custom-grid); + @include tokens($custom-grid); .igx-grid__filtering-row { - @include css-vars($dark-button); - @include css-vars($dark-input-group) + @include tokens($dark-button); + @include tokens($dark-input-group) .igx-input-group__input::placeholder { color: #ffcd0f; diff --git a/en/components/grids_templates/multi-column-headers.md b/en/components/grids_templates/multi-column-headers.md index a29caf4b89..7ca257c174 100644 --- a/en/components/grids_templates/multi-column-headers.md +++ b/en/components/grids_templates/multi-column-headers.md @@ -311,7 +311,9 @@ $custom-theme: grid-theme( The last step is to **include** the component mixins: ```scss -@include css-vars($custom-theme); +:host { + @include tokens($custom-theme); +} ``` @@if (igxName === 'IgxGrid') { diff --git a/en/components/grids_templates/multi-row-layout.md b/en/components/grids_templates/multi-row-layout.md index c80ccfe5c1..4466c5d10c 100644 --- a/en/components/grids_templates/multi-row-layout.md +++ b/en/components/grids_templates/multi-row-layout.md @@ -174,7 +174,9 @@ $custom-theme: grid-theme( The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: ```scss -@include css-vars($custom-theme); +:host { + @include tokens($custom-theme); +} ``` In order for the custom theme do affect only specific component, you can move all of the styles you just defined from the global styles file to the custom component's style file (including the import of the `index` file). diff --git a/en/components/grids_templates/paging.md b/en/components/grids_templates/paging.md index 9e36c88e40..17c6d9b3ca 100644 --- a/en/components/grids_templates/paging.md +++ b/en/components/grids_templates/paging.md @@ -223,7 +223,7 @@ $dark-paginator: paginator-theme( As seen, the `paginator-theme` only controls colors for the paging container, but does not affect the buttons in the pager UI. To style those buttons, let's create a new icon button theme: ```scss -$dark-button: icon-button-theme( +$dark-button: flat-icon-button-theme( $foreground: #d0ab23, $hover-foreground: #231c2c, $hover-background: #d0ab23, @@ -239,10 +239,12 @@ $dark-button: icon-button-theme( The last step is to **include** the component mixins, each with its respective theme: ```scss -@include css-vars($dark-paginator); +:host { + @include tokens($dark-paginator); -.igx-grid-paginator__pager { - @include css-vars($dark-button); + .igx-grid-paginator__pager { + @include tokens($dark-button); + } } ``` @@ -252,12 +254,12 @@ The last step is to **include** the component mixins, each with its respective t >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` in order to style the components which are inside the paging container, like the button: ```scss -@include css-vars($dark-paginator); - :host { + @include tokens($dark-paginator); + igx-paginator { ::ng-deep { - @include css-vars($dark-button); + @include tokens($dark-button); } } } diff --git a/en/components/grids_templates/row-editing.md b/en/components/grids_templates/row-editing.md index 0eec5b77a9..1293381b86 100644 --- a/en/components/grids_templates/row-editing.md +++ b/en/components/grids_templates/row-editing.md @@ -359,10 +359,12 @@ Here we are using `my-banner-palette` in conjunction with [`igx-color`]({environ ### Include the theme -All we have to do now is apply the theme with a Sass `@include` statement. We pass our newly defined `$banner-theme` through the [`css-vars mixin`]({environment:sassApiUrl}/themes#mixin-css-vars): +All we have to do now is apply the theme with a Sass `@include` statement. We pass our newly defined `$banner-theme` through the [`tokens mixin`]({environment:sassApiUrl}/themes#mixin-tokens): ```scss -@include css-vars($banner-theme); +:host { + @include tokens($banner-theme); +} ``` ### Component styles @@ -377,7 +379,7 @@ Since the Row Editing overlay makes use of a lot of other components' themes, st :host { ::ng-deep { - @include css-vars($banner-theme); + @include tokens($banner-theme); } } ``` @@ -404,19 +406,19 @@ To further customize our Row Editing overlay, we can pass a custom template so w ``` -After we've defined our custom buttons, we can make use of the [`button-theme`]({environment:sassApiUrl}/themes#function-button-theme) to style them. You can learn more about `igx-button` styling in the [Button Styling documentation](../button.md#styling). We can create a custom theme for our `Done` and `Cancel`: +After we've defined our custom buttons, we can make use of the [`flat-icon-button-theme`]({environment:sassApiUrl}/themes#function-flat-icon-button-theme) to style them. You can learn more about `igx-icon-button` styling in the [Icon Button Styling documentation](../icon-button.md#icon-button-styling). We can create a custom theme for our `Done` and `Cancel`: ```scss // custom.component.scss ... -$button-theme: button-theme( +$button-theme: flat-icon-button-theme( $palette: $purple-palette ); ... .custom-buttons { - @include css-vars($button-theme); + @include tokens($button-theme); } ``` diff --git a/en/components/grids_templates/row-pinning.md b/en/components/grids_templates/row-pinning.md index 7eea13b7e5..906fe5070f 100644 --- a/en/components/grids_templates/row-pinning.md +++ b/en/components/grids_templates/row-pinning.md @@ -463,7 +463,9 @@ $custom-grid-theme: grid-theme( The last step is to pass the custom grid theme: ```scss -@include css-vars($custom-grid-theme); +:host { + @include tokens($custom-grid-theme); +} ``` ### Demo diff --git a/en/components/grids_templates/sorting.md b/en/components/grids_templates/sorting.md index ca27f599ce..e1616cf565 100644 --- a/en/components/grids_templates/sorting.md +++ b/en/components/grids_templates/sorting.md @@ -292,7 +292,9 @@ $custom-theme: grid-theme( The last step is to **include** the component mixins: ```scss -@include css-vars($custom-theme); +:host { + @include tokens($custom-theme); +} ``` @@if (igxName === 'IgxGrid') { diff --git a/en/components/grids_templates/summaries.md b/en/components/grids_templates/summaries.md index 3e61781d65..cd52ac752d 100644 --- a/en/components/grids_templates/summaries.md +++ b/en/components/grids_templates/summaries.md @@ -790,7 +790,9 @@ $custom-theme: grid-summary-theme( The last step is to **include** the component custom theme: ```scss -@include css-vars($custom-theme); +:host { + @include tokens($custom-theme); +} ``` >[!NOTE] @@ -799,7 +801,7 @@ The last step is to **include** the component custom theme: ```scss :host { ::ng-deep { - @include css-vars($custom-theme); + @include tokens($custom-theme); } } ``` diff --git a/en/components/grids_templates/toolbar.md b/en/components/grids_templates/toolbar.md index ca734e146e..fd14ade338 100644 --- a/en/components/grids_templates/toolbar.md +++ b/en/components/grids_templates/toolbar.md @@ -619,23 +619,25 @@ $dark-checkbox-theme: checkbox-theme( The last step is to **include** the newly created themes. ```scss -@include css-vars($dark-grid-toolbar-theme); -@include css-vars($dark-column-actions-theme); -@include css-vars($dark-checkbox-theme); -@include css-vars($dark-button-theme); +:host { + @include tokens($dark-grid-toolbar-theme); + @include tokens($dark-column-actions-theme); + @include tokens($dark-checkbox-theme); + @include tokens($dark-button-theme); +} ``` >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` to style the components inside the grid toolbar component: ```scss -@include css-vars($dark-grid-toolbar-theme); +@include tokens($dark-grid-toolbar-theme); :host { ::ng-deep { - @include css-vars($dark-column-actions-theme); - @include css-vars($dark-checkbox-theme); - @include css-vars($dark-button-theme); + @include tokens($dark-column-actions-theme); + @include tokens($dark-checkbox-theme); + @include tokens($dark-button-theme); } } ``` diff --git a/en/components/grids_templates/validation.md b/en/components/grids_templates/validation.md index 53d525ecaf..65e5dc9449 100644 --- a/en/components/grids_templates/validation.md +++ b/en/components/grids_templates/validation.md @@ -621,10 +621,10 @@ The first thing we need to do is import the `themes/index` file - this gives us ### Include the styles -In order to change the error color you can use the css variable `--igx-error-500`: +In order to change the error color you can use the css variable `--ig-error-500`: ```scss ---igx-error-500: 34, 80%, 63%; +--ig-error-500: 34, 80%, 63%; ``` ### Custom Templates diff --git a/en/components/hierarchicalgrid/hierarchical-grid.md b/en/components/hierarchicalgrid/hierarchical-grid.md index 853c016cc5..f8b34efdd6 100644 --- a/en/components/hierarchicalgrid/hierarchical-grid.md +++ b/en/components/hierarchicalgrid/hierarchical-grid.md @@ -352,7 +352,9 @@ $custom-theme: grid-theme( The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: ```scss -@include css-vars($custom-theme); +:host { + @include tokens($custom-theme); +} ``` In order for the custom theme do affect only specific component, you can move all of the styles you just defined from the global styles file to the custom component's style file (including the import of the `index` file). diff --git a/en/components/icon.md b/en/components/icon.md index f5231794e8..701963375b 100644 --- a/en/components/icon.md +++ b/en/components/icon.md @@ -235,7 +235,9 @@ $custom-icon-theme: icon-theme( The last step is to pass the custom icon theme in our application: ```scss -@include css-vars($custom-icon-theme); +:host { + @include tokens($custom-icon-theme); +} ``` ### Demo @@ -290,7 +292,7 @@ igx-icon { } ``` -Or you can use the universal `--igx-icon-size` variable to target all instances: +Or you can use the universal `--ig-icon-size` variable to target all instances: ```html
@@ -300,7 +302,7 @@ Or you can use the universal `--igx-icon-size` variable to target all instances: ```scss .my-app { - --igx-icon-size: 50px; + --ig-icon-size: 50px; } ``` diff --git a/en/components/input-group.md b/en/components/input-group.md index 83c18bfd2e..24b71d0262 100644 --- a/en/components/input-group.md +++ b/en/components/input-group.md @@ -780,7 +780,9 @@ $custom-input-group: input-group-theme( The last step is to include the newly created theme: ```scss -@include css-vars($custom-input-group); +:host { + @include tokens($custom-input-group); +} ``` In the sample below, you can see how using the input group with customized CSS variables allows you to create a design that visually resembles the one used in the [`Carbon`](https://carbondesignsystem.com/components/text-input/usage/#live-demo) design system. diff --git a/en/components/linear-progress.md b/en/components/linear-progress.md index eb8e33eb74..7cbadd2442 100644 --- a/en/components/linear-progress.md +++ b/en/components/linear-progress.md @@ -267,7 +267,9 @@ $custom-theme: progress-linear-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/list.md b/en/components/list.md index fb12b53111..739d7b57d2 100644 --- a/en/components/list.md +++ b/en/components/list.md @@ -834,7 +834,9 @@ Take a look at the [`list-theme`]({environment:sassApiUrl}/themes#function-list- The last step is to **include** the newly created themes. ```scss -@include css-vars($my-list-theme); +:host { + @include tokens($my-list-theme); +} ``` The result is the following: diff --git a/en/components/month-picker.md b/en/components/month-picker.md index 5913176026..d5de678801 100644 --- a/en/components/month-picker.md +++ b/en/components/month-picker.md @@ -204,7 +204,9 @@ $my-calendar-theme: calendar-theme( The next step is to **include** the component theme in our application. ```scss -@include css-vars($my-calendar-theme); +:host { + @include tokens($my-calendar-theme); +} ``` After everything's done, your component should look like this: diff --git a/en/components/navbar.md b/en/components/navbar.md index 97778a846c..7ac1cff727 100644 --- a/en/components/navbar.md +++ b/en/components/navbar.md @@ -326,10 +326,12 @@ $custom-navbar-theme: navbar-theme( >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes.md) topic for detailed guidance on how to use them. -The last step is to pass the newly created theme to the `css-vars` mixin: +The last step is to pass the newly created theme to the `tokens` mixin: ```scss -@include css-vars($custom-navbar-theme); +:host { + @include tokens($custom-navbar-theme); +} ``` ### Demo diff --git a/en/components/navdrawer.md b/en/components/navdrawer.md index 126119f7da..3f855b876c 100644 --- a/en/components/navdrawer.md +++ b/en/components/navdrawer.md @@ -480,7 +480,9 @@ As seen, the `navdrawer-theme` exposes some useful parameters for basic styling The last step is to **include** the component theme in our application. ```scss -@include css-vars($custom-theme); +:host { + @include tokens($custom-theme); +} ``` >[!NOTE] @@ -489,7 +491,7 @@ The last step is to **include** the component theme in our application. ```scss :host { ::ng-deep { - @include css-vars($custom-theme); + @include tokens($custom-theme); } } ``` diff --git a/en/components/overlay-styling.md b/en/components/overlay-styling.md index 43b31c942d..2990dd9795 100644 --- a/en/components/overlay-styling.md +++ b/en/components/overlay-styling.md @@ -16,7 +16,7 @@ To display the content above other elements, the service moves it into a special ## Styling Overlay Components -In most cases [global](themes/sass/global-themes.md) theme styles are not affected by the overlay outlets. For example, let's take a look at a Drop Down, [styled](drop-down.md#styling) by the global [`css-vars`]({environment:sassApiUrl}/themes#mixin-css-vars) mixin: +In most cases [global](themes/sass/global-themes.md) theme styles are not affected by the overlay outlets. For example, let's take a look at a Drop Down, [styled](drop-down.md#styling) by the [`tokens`]({environment:sassApiUrl}/themes#mixin-tokens) mixin: ```html @@ -37,7 +37,9 @@ $my-drop-down-theme: drop-down-theme( $background-color: #efefef ); -@include css-vars($my-drop-down-theme); +:host { + @include tokens($my-drop-down-theme); +} ``` The global styles are not generated under a scoped rule and are not affected by any encapsulation, and thus can match any element on the page, including `igx-drop-down-item` the service moved to the overlay outlet. @@ -50,7 +52,10 @@ For example, let's take the `igx-combo` - its item [styles](combo.md#styling) us ```scss // overlay-styling.component.scss -@include css-vars($my-drop-down-theme); + +:host { + @include tokens($my-drop-down-theme); +} ``` >[!NOTE] @@ -60,7 +65,7 @@ For example, let's take the `igx-combo` - its item [styles](combo.md#styling) us // overlay-styling.component.scss :host { ::ng-deep { - @include css-vars($my-drop-down-theme); + @include tokens($my-drop-down-theme); } } ``` @@ -106,7 +111,9 @@ $my-overlay-theme: overlay-theme( $background-color: rgba(0, 153, 255, 0.3) ); -@include css-vars($my-overlay-theme); +:host { + @include tokens($my-overlay-theme); +} ``` Now **all** modal overlays will have a purple tint to their background. @@ -118,7 +125,7 @@ Now **all** modal overlays will have a purple tint to their background. // overlay-styling.component.scss :host { ::ng-deep { - @include css-vars($my-overlay-theme); + @include tokens($my-overlay-theme); } } ``` @@ -132,7 +139,7 @@ When scoping a modal overlay, you need to move the overlay outlet, which has som // styles.scss ... .purple { - @include css-vars($my-overlay-theme); + @include tokens($my-overlay-theme); } ``` diff --git a/en/components/query-builder.md b/en/components/query-builder.md index e4dcefc50a..573c9d962b 100644 --- a/en/components/query-builder.md +++ b/en/components/query-builder.md @@ -349,21 +349,18 @@ In this example we only changed some of the parameters for the listed components >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes.md) topic for detailed guidance on how to use them. -The last step is to **include** the new component themes using the `css-vars` mixin. +The last step is to **include** the new component themes using the `tokens` mixin. ```scss -@include css-vars($custom-query-builder); - :host { - ::ng-deep { - @include css-vars($custom-input-group); - @include css-vars($custom-chip); - @include css-vars($custom-icon-button); + @include tokens($custom-query-builder); + @include tokens($custom-input-group); + @include tokens($custom-chip); + @include tokens($custom-icon-button); .igx-filter-tree__buttons { - @include css-vars($custom-button); + @include tokens($custom-button); } - } } ``` diff --git a/en/components/radio-button.md b/en/components/radio-button.md index 4424feaa7c..8e14f8dd79 100644 --- a/en/components/radio-button.md +++ b/en/components/radio-button.md @@ -216,7 +216,9 @@ $custom-radio-theme: radio-theme( Finally, **include** the custom theme in your application: ```scss -@include css-vars($custom-radio-theme); +:host { + @include tokens($custom-radio-theme); +} ``` [!NOTE] diff --git a/en/components/select.md b/en/components/select.md index 0dc2f1879f..9b8046bcb8 100644 --- a/en/components/select.md +++ b/en/components/select.md @@ -425,7 +425,9 @@ $custom-select-theme: select-theme( The last step is to pass the custom radio theme in our application: ```scss -@include css-vars($custom-select-theme); +:host { + @include tokens($custom-select-theme); +} ``` @@ -335,7 +337,7 @@ Or you can use the universal `--igx-splitter-size` variable to target all instan ```scss .my-app { - --igx-splitter-size: 10px; + --ig-splitter-size: 10px; } ``` diff --git a/en/components/stepper.md b/en/components/stepper.md index d37c945dab..6b0a6236a4 100644 --- a/en/components/stepper.md +++ b/en/components/stepper.md @@ -444,7 +444,9 @@ $stepper-theme: stepper-theme( The last step is to include the component's theme. ```scss -@include css-vars($custom-stepper-theme); +:host { + @include tokens($custom-stepper-theme); +} ``` ### Demo diff --git a/en/components/switch.md b/en/components/switch.md index dc4acf45ca..ea207cdcf7 100644 --- a/en/components/switch.md +++ b/en/components/switch.md @@ -384,7 +384,9 @@ $custom-switch-theme: switch-theme( Finally, **include** the custom theme in your application: ```scss -@include css-vars($custom-switch-theme); +:host { + @include tokens($custom-switch-theme); +} ``` In the sample below, you can see how using the switch component with customized CSS variables allows you to create a design that visually resembles the switch used in the [`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.Switch/sample/sap.m.sample.Switch) design system. diff --git a/en/components/tabbar.md b/en/components/tabbar.md index 097cc0e554..d14af26553 100644 --- a/en/components/tabbar.md +++ b/en/components/tabbar.md @@ -470,7 +470,9 @@ If we take a look at the [`bottom-nav-theme`]({environment:sassApiUrl}/themes#fu The last step is to **include** the component theme in our application. ```scss -@include css-vars($dark-bottom-nav); +:host { + @include tokens($dark-bottom-nav); +} ``` ### Demo diff --git a/en/components/tabs.md b/en/components/tabs.md index 7eb2950d21..3f6d07dda5 100644 --- a/en/components/tabs.md +++ b/en/components/tabs.md @@ -737,7 +737,9 @@ If we take a look at the [`tabs-theme`]({environment:sassApiUrl}/themes#function The last step is to **include** the component theme in our application. ```scss -@include css-vars($dark-tabs); +:host { + @include tokens($dark-tabs); +} ``` ### Demo diff --git a/en/components/texthighlight.md b/en/components/texthighlight.md index bf820029e9..753297e128 100644 --- a/en/components/texthighlight.md +++ b/en/components/texthighlight.md @@ -377,9 +377,7 @@ The last step is to **include** the newly created theme. ```scss :host { - ::ng-deep { - @include css-vars($dark-highlight); - } + @include tokens($dark-highlight); } ``` @@ -417,7 +415,7 @@ As mentioned earlier, we can even combine them with a theme: ```scss :host { ::ng-deep { - @include css-vars($dark-highlight); + @include tokens($dark-highlight); .custom-highlight { border: 1px solid #ffcd0f; diff --git a/en/components/themes/index.md b/en/components/themes/index.md index 4b2772f569..00cb9c4d85 100644 --- a/en/components/themes/index.md +++ b/en/components/themes/index.md @@ -140,7 +140,7 @@ Let's look at an example. Say you wanted to modify the background of the avatar. ```css /* styles.css */ :root { - --igx-avatar-background: black; + --ig-avatar-background: black; } igx-avatar { @@ -151,13 +151,13 @@ igx-avatar { The snippet above will set the background in all avatars to orange. The avatar component will look for the `--background` variable first. If explicitly set, it will take its value. In other words, `local` variables have higher priority and will work **only** if applied to the `igx-avatar` directly, either by using its tag selector or any other selector that targets `igx-avatar`. -The global `--igx-avatar-background` can be thought of as _fallback_ variable. It's going to be used only if the local `--background` is not explicitly overridden. +The global `--ig-avatar-background` can be thought of as _fallback_ variable. It's going to be used only if the local `--background` is not explicitly overridden. For the curious, here's how this is implemented internally in the avatar: ```css igx-avatar { - --background: var(--igx-avatar-background, var(--ig-gray-400)); + --background: var(--ig-avatar-background, var(--ig-gray-400)); background: var(--background); } ``` @@ -182,7 +182,7 @@ Here's another example: ```css /* styles.css */ :root { - --igx-avatar-background: lavender; + --ig-avatar-background: lavender; } ``` diff --git a/en/components/themes/sass/component-themes.md b/en/components/themes/sass/component-themes.md index 5b13bdd23d..8c786c21fa 100644 --- a/en/components/themes/sass/component-themes.md +++ b/en/components/themes/sass/component-themes.md @@ -28,44 +28,92 @@ We'll take a look at how these approaches work in practice, and how to use one i There are several parts to a component theme: - **The component theme function** - A Sass function that normalizes the passed arguments and produces a theme to be consumed by a component mixin. -- **The CSS variable mixin** - A Sass mixin that consumes a component theme and produces _CSS variables_ used to style a particular component. +- **The Тokens mixin** - A Sass mixin that consumes a component theme that generates CSS variable tokens from an Ignite UI component theme. - **The component mixin** - A Sass mixin that consumes a component theme and produces _CSS rules_ used to style a particular component. + +### The tokens mixin + +Using the `tokens` mixin is the preferred way to customize your components. It generates CSS custom properties (`design tokens`) from an Ignite UI component theme in either global or scoped mode. + +**Global mode (default)** — emits universal `--ig-{component}-{property} ` tokens. Local var() references are rewritten to their global equivalents so derived values (e.g., `adaptive-contrast`) resolve correctly at any scope. Sizable expressions are skipped, you have to pass concrete values instead. + +```scss +// Input: +@include tokens(avatar-theme($background: red)); + +// Output: +:root { + --ig-avatar-background: red; + /* ... remaining avatar properties ... */ +} +``` + +**Scoped mode** — emits component-scoped variables `--{property}` with a fallback chain: configured prefix `(--igx-*) -> universal (--ig-*) -> schema default`. When called from the stylesheet root, the theme's selector is used to create the rule. When called inside a selector, both the current selector and the component selector receive the variables. + +```scss +// Input (from root): +@include tokens(avatar-theme($background: red), $mode: 'scoped'); + +// Output: +igx-avatar { + --background: var(--igx-avatar-background, var(--ig-avatar-background, red)); + /* ... remaining avatar properties ... */ +} + + +// Input (from within a selector): +.my-theme { + @include tokens(avatar-theme($background: red), $mode: 'scoped'); +} + +// Output: +.my-theme, +.my-theme igx-avatar { + --background: var(--igx-avatar-background, var(--ig-avatar-background, red)); + /* ... */ +} +``` + Say you want to create a new global avatar theme that has a different background color to the one we set in the avatar's default theme. As mentioned in the [**overview section**](#overview) there are 2 general approaches to creating a component theme. There are even more ways you can organize and scope your component themes. The most straightforward way to do that is in the same file you defined your [**global theme**](./global-themes.md). Defining an avatar theme: ```scss -// Some place after @include theme(...); - // Change the background of the avatar to purple. $avatar-purple-theme: avatar-theme( $background: purple, ); -// Pass the css-vars to the `css-vars` mixin -@include css-vars($avatar-purple-theme); +// Pass the theme to the `tokens` mixin +:root { + @include tokens($avatar-purple-theme); +} ``` The above code produces CSS variables for the `igx-avatar` component. These new CSS variables overwrite the default avatar rules. -Similarly, if you were to include `css-vars` mixin later down in the global `scss` file, the mixin will again overwrite any previously defined themes. +Similarly, if you were to include `tokens` mixin later down in the global `scss` file, the mixin will again overwrite any previously defined themes. For instance: ```scss // ... -@include css-vars($avatar-purple-theme); +:root { + @include tokens($avatar-purple-theme); +} // Later $avatar-royalblue-theme: avatar-theme( $background: royalblue, ); -@include css-vars($avatar-royalblue-theme); +:root { + @include tokens($avatar-royalblue-theme); +} ``` -In the above code, the de facto global theme is now the `$avatar-royalblue-theme` as it overwrites any previously included `css-vars` mixins. +In the above code, the de facto global theme is now the `$avatar-royalblue-theme` as it overwrites any previously included `tokens` mixins. This brings us to our next point. @@ -81,11 +129,11 @@ As we saw in the previous example, when adding multiple themes targeting the sam // ... // CSS class selectors .avatar-royalblue { - @include css-vars($avatar-royalblue-theme); + @include tokens($avatar-royalblue-theme); } .avatar-purple { - @include css-vars($avatar-purple-theme); + @include tokens($avatar-purple-theme); } ``` @@ -146,18 +194,18 @@ $avatar-royalblue-theme: avatar-theme( ); :host { - @include css-vars($avatar-royalblue-theme); + @include tokens($avatar-royalblue-theme); } ``` When using CSS variables, we don't have to use the `::ng-deep` pseudo-selector. With the code above we've created CSS variables for the `igx-avatar`, which will always have `royalblue` as its background color. The theme for our custom avatar will not 'leak' into other `igx-avatar` component instances, thus staying encapsulated within our custom `app-avatar` component. -The above instance could also be achieved without using any Sass. All we need to do is to set the value of `--igx-avatar-background` CSS variable to the desired color: +The above instance could also be achieved without using any Sass. All we need to do is to set the value of `--ig-avatar-background` CSS variable to the desired color: ```css /* app-avatar.component.css */ :host { - --igx-avatar-background: royalblue; + --ig-avatar-background: royalblue; } ``` diff --git a/en/components/themes/sass/configuration.md b/en/components/themes/sass/configuration.md index d2acb1f416..d2a6805d78 100644 --- a/en/components/themes/sass/configuration.md +++ b/en/components/themes/sass/configuration.md @@ -29,8 +29,11 @@ To customize the scrollbar further, you can create a new scrollbar style with th // Here we set the scrollbar to have size of 16px, scrollbar thumb to be in color pink, and scrolblar track to be in color green $my-scrollbar-theme: scrollbar-theme($sb-size: 16px, $sb-thumb-bg-color: pink, $sb-track-bg-color: green); -// We use 'css-vars' mixin for generating the css variables with the new scrollbar values. -@include css-vars($my-scrollbar-theme); +// We use 'tokens' mixin for generating the css variables with the new scrollbar values. + +:host { + @include tokens($my-scrollbar-theme); +} ```
diff --git a/en/components/themes/sass/elevations.md b/en/components/themes/sass/elevations.md index f8c018fe1b..24a47ea4d3 100644 --- a/en/components/themes/sass/elevations.md +++ b/en/components/themes/sass/elevations.md @@ -76,7 +76,9 @@ $card-theme: card-theme( $resting-shadow: elevation(10) ); -@include css-vars($card-theme); +:host { + @include tokens($card-theme); +} ``` You can also pass simple box shadows without taking advantage of the `elevation` function: @@ -87,7 +89,7 @@ $card-theme: card-theme( ); .my-card { - @include css-vars($card-theme); + @include tokens($card-theme); } ``` diff --git a/en/components/themes/sass/schemas.md b/en/components/themes/sass/schemas.md index 32caa5c9a8..6ef17a036c 100644 --- a/en/components/themes/sass/schemas.md +++ b/en/components/themes/sass/schemas.md @@ -144,7 +144,7 @@ $indigo-avatar: map.get($light-indigo-schema, avatar); // We include the specific schema to a class which we can then set on the avatar component that we want .indigo-avatar { - @include css-vars( + @include tokens( avatar-theme( $schema: $indigo-avatar ) diff --git a/en/components/time-picker.md b/en/components/time-picker.md index 0676676328..83e0a204ef 100644 --- a/en/components/time-picker.md +++ b/en/components/time-picker.md @@ -438,7 +438,9 @@ Now, the time picker's items are properly rendered **inside** of our component's >In order to learn more about the various options for providing themes to elements that are shown by using the [`IgxOverlayService`](overlay.md), you can take a look at the [Overlay styling topic](overlay-styling.md). ```scss - @include css-vars($my-time-picker-theme); +:host { + @include tokens($my-time-picker-theme); +} ``` >[!WARNING] @@ -446,9 +448,9 @@ Now, the time picker's items are properly rendered **inside** of our component's ```scss :host { - ::ng-deep { - @include css-vars($my-time-picker-theme); - } + ::ng-deep { + @include tokens($my-time-picker-theme); + } } ``` diff --git a/en/components/toast.md b/en/components/toast.md index 998db305f9..e27de1d638 100644 --- a/en/components/toast.md +++ b/en/components/toast.md @@ -236,7 +236,9 @@ $custom-toast-theme: toast-theme( The last step is to pass the custom toast theme: ```scss -@include css-vars($custom-toast-theme); +:host { + @include tokens($custom-toast-theme); +} ``` ### Demo diff --git a/en/components/tooltip.md b/en/components/tooltip.md index 7a9bae7b55..055880850b 100644 --- a/en/components/tooltip.md +++ b/en/components/tooltip.md @@ -194,7 +194,7 @@ We will also use the following styles for our application: .locationTooltip { width: 310px; - background-color: var(--igx-grays-700); + background-color: var(--ig-grays-700); padding: 3px; font-size: 13px; } @@ -476,7 +476,9 @@ Since the tooltip uses the [`IgxOverlayService`](overlay.md), in order for our c The last step is to **include** the component theme in our application. ```scss -@include css-vars($dark-tooltip); +:host { + @include tokens($dark-tooltip); +} ``` So now our styled tooltip should look like this: diff --git a/en/components/tree.md b/en/components/tree.md index 84f24def20..82aad25e61 100644 --- a/en/components/tree.md +++ b/en/components/tree.md @@ -437,7 +437,9 @@ $custom-tree-theme: tree-theme( The last step is to include the component's theme. ```scss -@include css-vars($custom-tree-theme); +:host { + @include tokens($custom-tree-theme); +} ``` ### Demo diff --git a/en/components/treegrid/tree-grid.md b/en/components/treegrid/tree-grid.md index 4408879cf3..932146ede2 100644 --- a/en/components/treegrid/tree-grid.md +++ b/en/components/treegrid/tree-grid.md @@ -321,7 +321,9 @@ $custom-theme: grid-theme( The last step is to **include** the component theme in our application. ```scss -@include css-vars($custom-theme); +:host { + @include tokens($custom-theme); +} ``` ### Angular Tree Grid Styling Demo From dc33296729e9025aca200aa0ddaacc17c6fb1030 Mon Sep 17 00:00:00 2001 From: didimmova Date: Fri, 20 Feb 2026 09:55:27 +0200 Subject: [PATCH 2/9] docs(*): replace button themes with specific ones --- en/components/grids_templates/filtering.md | 16 ++++++++-------- en/components/grids_templates/toolbar.md | 8 ++++---- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/en/components/grids_templates/filtering.md b/en/components/grids_templates/filtering.md index 189e9472d6..556b46178c 100644 --- a/en/components/grids_templates/filtering.md +++ b/en/components/grids_templates/filtering.md @@ -600,7 +600,7 @@ $custom-grid: grid-theme( ); ``` -As seen, the `grid-theme` only controls colors for the filtering row and the respective column header that is being filtered. We obviously have a lot more components inside the filtering row, such as an input group, chips, buttons and others. In order to style them, we need to create a separate theme for each one, so let's create a new [`input-group-theme`]({environment:sassApiUrl}/themes#input-group-theme) and a new [`button-theme`]({environment:sassApiUrl}/themes#button-theme): +As seen, the `grid-theme` only controls colors for the filtering row and the respective column header that is being filtered. We obviously have a lot more components inside the filtering row, such as an input group, chips, buttons and others. In order to style them, we need to create a separate theme for each one, so let's create a new [`input-group-theme`]({environment:sassApiUrl}/themes#input-group-theme) and a new [`flat-button-theme`]({environment:sassApiUrl}/themes#flat-button-theme): ```scss $dark-input-group: input-group-theme( @@ -610,18 +610,18 @@ $dark-input-group: input-group-theme( $filled-text-color: #292826 ); -$dark-button: button-theme( - $flat-background: #ffcd0f, - $flat-text-color: #292826, - $flat-hover-background: #292826, - $flat-hover-text-color: #ffcd0f +$dark-button: flat-button-theme( + $background: #ffcd0f, + $foreground: #292826, + $hover-background: #292826, + $hover-foreground: #ffcd0f ); ``` >[!NOTE] >Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. -In this example we only changed some of the parameters for the input group and the button, but the [`input-group-theme`]({environment:sassApiUrl}/themes#function-input-group-theme) and the [`button-theme`]({environment:sassApiUrl}/themes#function-button-theme) provide way more parameters to control their respective styling. +In this example we only changed some of the parameters for the input group and the button, but the [`input-group-theme`]({environment:sassApiUrl}/themes#function-input-group-theme) and the [`flat-button-theme`]({environment:sassApiUrl}/themes#function-flat-button-theme) provide way more parameters to control their respective styling. The last step is to **include** the component mixins, each with its respective theme. We will also set the color property for the input's placeholder. @@ -641,7 +641,7 @@ The last step is to **include** the component mixins, each with its respective t ``` >[!NOTE] ->We include the created **button-theme** and **input-group-theme** within `.igx-grid__filtering-row`, so that only the filtering row buttons and its input group would be styled. Otherwise other buttons and input groups in the grid would be affected too. +>We include the created **flat-button-theme** and **input-group-theme** within `.igx-grid__filtering-row`, so that only the filtering row buttons and its input group would be styled. Otherwise other buttons and input groups in the grid would be affected too. >[!NOTE] >If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: diff --git a/en/components/grids_templates/toolbar.md b/en/components/grids_templates/toolbar.md index fd14ade338..0429b5414a 100644 --- a/en/components/grids_templates/toolbar.md +++ b/en/components/grids_templates/toolbar.md @@ -605,10 +605,10 @@ $dark-column-actions-theme: column-actions-theme( Since the column actions are using other components - `igx-button` and `igx-checkbox` we need to change their themes to match our new toolbar theme. ```scss -$dark-button-theme: button-theme( - $outlined-background: color($my-dark-palette, 'secondary'), - $outlined-hover-background: color($my-dark-palette, 'grays', 100), - $outlined-hover-text-color: color($my-dark-palette, 'secondary') +$dark-button-theme: outlined-button-theme( + $background: color($my-dark-palette, 'secondary'), + $hover-background: color($my-dark-palette, 'grays', 100), + $hover-foreground: color($my-dark-palette, 'secondary') ); $dark-checkbox-theme: checkbox-theme( From 8663c0b41f40bb2ae8b76df79eb93ce3484c97f0 Mon Sep 17 00:00:00 2001 From: didimmova Date: Fri, 20 Feb 2026 10:23:38 +0200 Subject: [PATCH 3/9] chore: replace T in docs --- en/components/themes/sass/component-themes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/themes/sass/component-themes.md b/en/components/themes/sass/component-themes.md index 8c786c21fa..795f34ec1c 100644 --- a/en/components/themes/sass/component-themes.md +++ b/en/components/themes/sass/component-themes.md @@ -28,7 +28,7 @@ We'll take a look at how these approaches work in practice, and how to use one i There are several parts to a component theme: - **The component theme function** - A Sass function that normalizes the passed arguments and produces a theme to be consumed by a component mixin. -- **The Тokens mixin** - A Sass mixin that consumes a component theme that generates CSS variable tokens from an Ignite UI component theme. +- **The Tokens mixin** - A Sass mixin that consumes a component theme that generates CSS variable tokens from an Ignite UI component theme. - **The component mixin** - A Sass mixin that consumes a component theme and produces _CSS rules_ used to style a particular component. From 9e6a57f15ece0bbee09fbb1a78e7b77763623cc0 Mon Sep 17 00:00:00 2001 From: didimmova Date: Fri, 20 Feb 2026 10:27:11 +0200 Subject: [PATCH 4/9] chore: remove trailing space --- en/components/themes/sass/component-themes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/themes/sass/component-themes.md b/en/components/themes/sass/component-themes.md index 795f34ec1c..5e4218a52c 100644 --- a/en/components/themes/sass/component-themes.md +++ b/en/components/themes/sass/component-themes.md @@ -36,7 +36,7 @@ There are several parts to a component theme: Using the `tokens` mixin is the preferred way to customize your components. It generates CSS custom properties (`design tokens`) from an Ignite UI component theme in either global or scoped mode. -**Global mode (default)** — emits universal `--ig-{component}-{property} ` tokens. Local var() references are rewritten to their global equivalents so derived values (e.g., `adaptive-contrast`) resolve correctly at any scope. Sizable expressions are skipped, you have to pass concrete values instead. +**Global mode (default)** — emits universal `--ig-{component}-{property}` tokens. Local var() references are rewritten to their global equivalents so derived values (e.g., `adaptive-contrast`) resolve correctly at any scope. Sizable expressions are skipped, you have to pass concrete values instead. ```scss // Input: From 3c71d2c2b335af63b9f71cbe8a18653ecbe562b5 Mon Sep 17 00:00:00 2001 From: zdrawku Date: Thu, 26 Feb 2026 09:05:27 +0200 Subject: [PATCH 5/9] Updating code snippet for curl download --- en/components/general/ai-assisted-development.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/en/components/general/ai-assisted-development.md b/en/components/general/ai-assisted-development.md index d03639abc6..b4ae6b1e25 100644 --- a/en/components/general/ai-assisted-development.md +++ b/en/components/general/ai-assisted-development.md @@ -129,20 +129,18 @@ Use this approach when you want to load a specific skill on demand, without perm Each skill file can be downloaded directly from GitHub. First, create the `.agents/skills/` directory in your project root, then download the files into it: ```bash -# Create the .agents/skills directory -mkdir -p .agents/skills -# Download skill files into .agents/skills/ -cd .agents/skills +# Define the base target directory +BASE_DIR=".agents/skills" # Components & Layout -curl -O https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-components/SKILL.md +curl --create-dirs -o $BASE_DIR/igniteui-angular-components/SKILL.md https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-components/SKILL.md # Data Grids -curl -O https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-grids/SKILL.md +curl --create-dirs -o $BASE_DIR/igniteui-angular-grids/SKILL.md https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-grids/SKILL.md # Theming & Styling -curl -O https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-theming/SKILL.md +curl --create-dirs -o $BASE_DIR/igniteui-angular-theming/SKILL.md https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-theming/SKILL.md ``` The skill files will now be available in `.agents/skills/` and will be automatically discovered by compatible AI assistants. From 9c4716f3d79d6ce39552b4addce66d306b3d3872 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 26 Feb 2026 12:32:58 +0200 Subject: [PATCH 6/9] chore: add update-guide for tokens --- en/components/general/update-guide.md | 65 +++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) diff --git a/en/components/general/update-guide.md b/en/components/general/update-guide.md index 6e6876b341..ff7fc2a5b6 100644 --- a/en/components/general/update-guide.md +++ b/en/components/general/update-guide.md @@ -60,6 +60,71 @@ Unfortunately not all changes can be automatically updated. Changes below are sp For example: if you are updating from version 6.2.4 to 7.1.0 you'd start from the "From 6.x .." section apply those changes and work your way up: +## From 21.0.x to 21.1.x + +Version 21.1.0 ships with a new `tokens` mixin that can be used in place of the now deprecated `css-vars` mixin of our Sass theming framework. On the surface, this is a cosmetic change, however, the new `tokens` mixin produces universal global component theme tokens that work across all of our Ignite UI frameworks. The `css-vars` mixin is now deprecated and will be removed in a future version, so we recommend switching to the new `tokens` mixin as soon as possible. + +The `tokens` mixin generates CSS variable tokens for components in `global` or `scoped` modes, with a universal `--ig-*` fallback chain and proper rewriting of local token references. + +**Global mode** (default) — emits universal `--ig-{component}-{property}` tokens. Local `var()` references are rewritten to their global equivalents so derived values (e.g., `adaptive-contrast`) resolve correctly at any scope. Sizable expressions are skipped; pass concrete values instead. + +```scss +// Input: +@include tokens(avatar-theme($background: red)); + +// Output: +:root { + --ig-avatar-background: red; + /* ... remaining avatar properties ... */ +} +``` + +**Scoped mode** — emits component-scoped variables (`--{property}`) with a fallback chain: configured prefix (`--igx-*`) -> universal (`--ig-*`) -> schema default. When called from the stylesheet root, the theme's `selector` is used to create the rule. When called inside a selector, both the current selector and the component selector receive the variables. Essentially, this yields the same result as the now deprecated `css-vars` mixin. + +```scss +// Input (from root): +@include tokens(avatar-theme($background: red), $mode: 'scoped'); + +// Output: +igx-avatar { + --background: var(--igx-avatar-background, var(--ig-avatar-background, red)); + /* ... remaining avatar properties ... */ +} +``` + +```scss +// Input (from within a selector): +.my-theme { + @include tokens(avatar-theme($background: red), $mode: 'scoped'); +} + +// Output: +.my-theme, +.my-theme igx-avatar { + --background: var(--igx-avatar-background, var(--ig-avatar-background, red)); + /* ... */ +} +``` + +> [!NOTE] +> In scoped mode, the `selector` property in the produced theme map is required to determine the component selector for proper variable scoping. If the mixin is called from the stylesheet root, the generated rule will use the theme's internal `selector` value. If called from within a selector, both that selector and the component selector will receive the variables. + +```scss +// Global override: +:root { + @include tokens(avatar-theme($background: orange)); +} +// Result: --ig-avatar-background: orange; + +// Scoped consumption (no explicit override): +@include tokens(avatar-theme($schema: $schema), $mode: 'scoped'); +// Result: --background resolves through var(--igx-avatar-background, var(--ig-avatar-background, #000)) +// and picks up the global orange value from --ig-avatar-background. +``` + +> [!IMPORTANT] +> **Global overrides flow into scoped mode.** Because scoped variables fall back to `--ig-*` tokens, setting a global token at `:root` will propagate to all scoped instances: + ## From 20.x to 21.0.x ### Multiple Entry Points Support From 543300830c74d845372b4be06ac0716bbcc0f68b Mon Sep 17 00:00:00 2001 From: Galina Edinakova Date: Thu, 26 Feb 2026 15:50:57 +0200 Subject: [PATCH 7/9] chore(QueryBuilder): Reset updated & new toc flags --- en/components/toc.yml | 3 +-- jp/components/toc.yml | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/en/components/toc.yml b/en/components/toc.yml index 04882fc734..a689e6a4d5 100644 --- a/en/components/toc.yml +++ b/en/components/toc.yml @@ -1265,11 +1265,10 @@ - name: Query Builder href: query-builder.md new: false - updated: true items: - name: Using Query Builder Model href: query-builder-model.md - new: true + new: false - name: Radio & Radio Group href: radio-button.md new: false diff --git a/jp/components/toc.yml b/jp/components/toc.yml index 8f52e60c52..f4159b2bb5 100644 --- a/jp/components/toc.yml +++ b/jp/components/toc.yml @@ -1261,11 +1261,10 @@ - name: Query Builder href: query-builder.md new: false - updated: true items: - name: Query Builder モデルの使用 href: query-builder-model.md - new: true + new: false - name: Radio & Radio Group href: radio-button.md new: false From 64e69b11c44c3dc3e899f4f04ba976261c2b4351 Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Thu, 26 Feb 2026 15:58:46 +0200 Subject: [PATCH 8/9] docs(*): updating toc for better searchability --- .../skills.md} | 14 +++++++------- .../{themes/mcp.md => ai/theming-mcp.md} | 18 +++++++++--------- en/components/general/getting-started.md | 4 ++-- en/components/grid/grid.md | 2 +- .../hierarchicalgrid/hierarchical-grid.md | 2 +- en/components/pivotGrid/pivot-grid.md | 2 +- en/components/toc.yml | 7 ++++--- en/components/treegrid/tree-grid.md | 2 +- 8 files changed, 26 insertions(+), 25 deletions(-) rename en/components/{general/ai-assisted-development.md => ai/skills.md} (96%) rename en/components/{themes/mcp.md => ai/theming-mcp.md} (97%) diff --git a/en/components/general/ai-assisted-development.md b/en/components/ai/skills.md similarity index 96% rename from en/components/general/ai-assisted-development.md rename to en/components/ai/skills.md index b4ae6b1e25..ca3c68153d 100644 --- a/en/components/general/ai-assisted-development.md +++ b/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
-- [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)
Our community is active and always welcoming to new ideas. diff --git a/en/components/themes/mcp.md b/en/components/ai/theming-mcp.md similarity index 97% rename from en/components/themes/mcp.md rename to en/components/ai/theming-mcp.md index f5f15e9327..021440d451 100644 --- a/en/components/themes/mcp.md +++ b/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)
diff --git a/en/components/general/getting-started.md b/en/components/general/getting-started.md index 2cd668c3b6..bfcfd32293 100644 --- 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
-- [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) diff --git a/en/components/grid/grid.md b/en/components/grid/grid.md index 752d75d6ef..0ae03df0b3 100644 --- a/en/components/grid/grid.md +++ b/en/components/grid/grid.md @@ -875,7 +875,7 @@ Learn more about creating an Angular data grid in our short tutorial video: - [Selection](selection.md) - [Column Data Types](column-types.md#default-template) - [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) -- [AI-Assisted Development](../general/ai-assisted-development.md) — Agent Skills for grids, data operations, and theming +- [Ignite UI for Angular Skills](../ai/skills.md) — Agent Skills for grids, data operations, and theming
Our community is active and always welcoming to new ideas. diff --git a/en/components/hierarchicalgrid/hierarchical-grid.md b/en/components/hierarchicalgrid/hierarchical-grid.md index 709aae978d..aace9d4c98 100644 --- a/en/components/hierarchicalgrid/hierarchical-grid.md +++ b/en/components/hierarchicalgrid/hierarchical-grid.md @@ -433,7 +433,7 @@ platformBrowserDynamic() - [Column Pinning](column-pinning.md) - [Column Resizing](column-resizing.md) - [Selection](selection.md) -- [AI-Assisted Development](../general/ai-assisted-development.md) — Agent Skills for grids, data operations, and theming +- [Ignite UI for Angular Skills](../ai/skills.md) — Agent Skills for grids, data operations, and theming
Our community is active and always welcoming to new ideas. diff --git a/en/components/pivotGrid/pivot-grid.md b/en/components/pivotGrid/pivot-grid.md index b75cb2bd97..b49280d63a 100644 --- a/en/components/pivotGrid/pivot-grid.md +++ b/en/components/pivotGrid/pivot-grid.md @@ -346,7 +346,7 @@ This feature allows developers to quickly create a pivot view without manually s - [Angular Pivot Grid Features](pivot-grid-features.md) - [Angular Pivot Grid Custom Aggregations](pivot-grid-custom.md) -- [AI-Assisted Development](../general/ai-assisted-development.md) — Agent Skills for grids, data operations, and theming +- [Ignite UI for Angular Skills](../ai/skills.md) — Agent Skills for grids, data operations, and theming
Our community is active and always welcoming to new ideas. diff --git a/en/components/toc.yml b/en/components/toc.yml index 04882fc734..f9972f7444 100644 --- a/en/components/toc.yml +++ b/en/components/toc.yml @@ -1,9 +1,10 @@ - name: AI-Assisted Development - href: general/ai-assisted-development.md - new: true header: true +- name: Ignite UI for Angular Skills + href: ai/skills.md + new: true - name: Theming MCP - href: themes/mcp.md + href: ai/theming-mcp.md new: true - name: General header: true diff --git a/en/components/treegrid/tree-grid.md b/en/components/treegrid/tree-grid.md index cb7bd00922..e0b0beea79 100644 --- a/en/components/treegrid/tree-grid.md +++ b/en/components/treegrid/tree-grid.md @@ -408,7 +408,7 @@ platformBrowserDynamic() - [Grid Sizing](sizing.md) - [Data Grid](../grid/grid.md) - [Row Editing](row-editing.md) -- [AI-Assisted Development](../general/ai-assisted-development.md) — Agent Skills for grids, data operations, and theming +- [Ignite UI for Angular Skills](../ai/skills.md) — Agent Skills for grids, data operations, and theming
Our community is active and always welcoming to new ideas. From a6b73c88222e55575172e39fcb3a608a7a01b91c Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Thu, 26 Feb 2026 19:26:26 +0200 Subject: [PATCH 9/9] feat(grid-lite): Update documentation based on angular wrappers (#6388) --- en/components/grid-lite/binding.md | 16 ++- en/components/grid-lite/cell-template.md | 100 +++++++++++------- .../grid-lite/column-configuration.md | 26 ++--- en/components/grid-lite/filtering.md | 30 +++--- en/components/grid-lite/header-template.md | 35 ++++-- en/components/grid-lite/overview.md | 23 ++-- en/components/grid-lite/sorting.md | 24 +++-- .../pivotGrid/pivot-grid-features.md | 1 - 8 files changed, 156 insertions(+), 99 deletions(-) diff --git a/en/components/grid-lite/binding.md b/en/components/grid-lite/binding.md index e832fb17db..7fe886ba01 100644 --- a/en/components/grid-lite/binding.md +++ b/en/components/grid-lite/binding.md @@ -24,10 +24,10 @@ grid.data = [...{ ``` ```html - + - - + + ``` If the grid has `autoGenerate` enabled, it will "_infer_" the new column configuration automatically when the data changes. @@ -39,6 +39,16 @@ grid.autoGenerate = true; grid.data = []; ``` +Or just set the respective properties in the html instead of using a `@ViewChild` for the grid. + +```html + + +``` + + >[!NOTE] >The sort/filter states of the Grid Lite component are kept when changing the data source in this manner. Usually you will want to reset them by calling either **`clearSort()`** and/or **`clearFilter()`**. diff --git a/en/components/grid-lite/cell-template.md b/en/components/grid-lite/cell-template.md index 8d9a72ce3f..70c7a6c737 100644 --- a/en/components/grid-lite/cell-template.md +++ b/en/components/grid-lite/cell-template.md @@ -11,18 +11,27 @@ namespace: Infragistics.Controls By default, the grid uses the field of the column to render the value as a string inside the cell. This is fine for basic scenarios, but if you want to customize the rendered output or the final output is a combination of different data fields, you can customize the cell template. -To achieve that, set the `cellTemplate` property of the column. +To achieve that, use **``** inside `...` of a column in which you want to template the content. + +```html + + + + + + +``` + +You also need to import **`IgxGridLiteCellTemplateDirective`** ```typescript -protected cellTemplate(params: IgcCellContext) { - // return template result -} +import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective } from 'igniteui-angular/grids/lite'; ``` -```html - - - +And add it to the `imports` array + +```typescript +imports: [ IgxGridLiteCellTemplateDirective ] ``` ## Use as a Formatter Function @@ -30,10 +39,15 @@ protected cellTemplate(params: IgcCellContext) { For the simple scenario where some formatting is required, one can just return the formatted value. Here is an example for displaying a number value to a locale currency format: ```typescript -const { format: asCurrency } = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'EUR' }); +public formatter = new Intl.NumberFormat('en-150', { + style: 'currency', + currency: 'EUR' +}); /** Return the custom currency format for a value `value = 123456.789` */ -protected cellTemplate = (params) => asCurrency(params.value); // => "€123,456.79" +protected formatCurrency = (value: number) => { + return this.formatter.format(value); // => "€123,456.79" +}; ``` You can combine values different fields from the data source as well. @@ -41,41 +55,56 @@ You can combine values different fields from the data source as well. Refer to the API documentation for **`GridLiteCellContext`** for more information. --> ```typescript -const { format: asCurrency } = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'EUR' }); - -/** Return the custom currency format for an order of 10 items where the price is 99.99 */ -protected cellTemplate = ({value, row}) => asCurrency(value * row.data.count); // => "€999.90" +public formatter = new Intl.NumberFormat('en-150', { + style: 'currency', + currency: 'EUR' +}); + +/** Return the total earned money from a product in custom currency */ +protected formatCurrency = (value: number, unitsSold: number) => { + return this.formatter.format(value * unitsSold); +}; ``` ```html - - - + + + {{formatCurrency(value, row.data.sold)}} + + ``` ## Custom DOM Templates -Aside from using the **`cellTemplate`** property as a value formatter, you can also create your own DOM template, which -will be rendered inside the cell container. +Aside from using components from **`igniteui-angular`** inside the **``** , you can also create your own DOM template, which will be rendered inside the cell container. -We've decided to re-use the functionality provided by Lit and its -tagged template syntax for building declarative -DOM fragments. - -You can template any standard DOM elements as well as web components from other libraries. +You can template any standard DOM elements as well as web components from other libraries. For example in the following code snippets we are using the rating component coming from **`igniteui-webcomponents`**. In order to use it properly, we need to go through a few steps described below. ```typescript -// Import the `html` tag function from the Lit package. -import { html } from "lit"; - -// Use another web component to represent the `rating` value in the grid -protected cellTemplate = ({ value }) => html``; +// Import external components for the custom template +import { + defineComponents, + IgcRatingComponent +} from 'igniteui-webcomponents'; + +// Define them so that we can use them in our sample +defineComponents( + IgcRatingComponent +); ``` ```html - - - + + + + + + + ``` >[!NOTE] @@ -90,10 +119,7 @@ The custom cell renderer is passed an **`GridLiteCellContext`** object as a para /** * Context object for the row cell template callback. */ -export interface GridLiteCellContext< - T extends object, - K extends Keys = Keys -> { +export interface IgxGridLiteCellTemplateContext { /** * The cell element parent of the template. */ @@ -110,6 +136,8 @@ export interface GridLiteCellContext< * The value from the data source for this cell. */ value: PropertyType; + + $implicit: PropertyType; } ``` diff --git a/en/components/grid-lite/column-configuration.md b/en/components/grid-lite/column-configuration.md index 74a315570c..11c7afe7e5 100644 --- a/en/components/grid-lite/column-configuration.md +++ b/en/components/grid-lite/column-configuration.md @@ -12,14 +12,14 @@ namespace: Infragistics.Controls Columns are defined declaratively using column child components within the grid. The `field` property is the only required for a column, as it serves as the column identifier. It is also the property that is used to map and render the relevant data in the grid rows. ```html - - + + > - + ``` ## Configuration Based on the Data Source @@ -34,17 +34,17 @@ const data: Record[] = [ ``` ```html - + ``` The previous snippet will result in the grid automatically creating columns equivalent to: ```html - - - - - + + + + + ``` Useful for a quick render of some data without any additional customizations. @@ -65,7 +65,7 @@ in the grid width. To change the width of column, use the `width` property of the column. ```html - + ``` The property accepts valid CSS length units. @@ -75,7 +75,7 @@ The property accepts