diff --git a/docs/angular/src/content/en/components/hierarchicalgrid/hierarchical-grid.mdx b/docs/angular/src/content/en/components/hierarchicalgrid/hierarchical-grid.mdx index 5ba2f98fc1..b18b7075c6 100644 --- a/docs/angular/src/content/en/components/hierarchicalgrid/hierarchical-grid.mdx +++ b/docs/angular/src/content/en/components/hierarchicalgrid/hierarchical-grid.mdx @@ -338,17 +338,14 @@ Next, create a new theme, that extends the ```scss -$custom-theme: grid-theme( - $cell-active-border-color: #ffcd0f, - $cell-selected-background: #6f6f6f, - $row-hover-background: #f8e495, - $row-selected-background: #8d8d8d, - $header-background: #494949, - $header-text-color: #fff, - $expand-icon-color: #ffcd0f, - $expand-icon-hover-color: #e0b710, - $resize-line-color: #ffcd0f, - $row-highlight: #ffcd0f +$background: #292826; +$foreground: #eeece1; +$accent: #ffcd0f; + +$custom-grid: grid-theme( + $background: $background, + $foreground: $foreground, + $accent-color: $accent, ); ``` @@ -362,7 +359,7 @@ The easiest way to apply your theme is with a `sass` `@include` statement in the ```scss :host { - @include tokens($custom-theme); + @include tokens($custom-grid); } ``` diff --git a/docs/angular/src/content/en/components/treegrid/tree-grid.mdx b/docs/angular/src/content/en/components/treegrid/tree-grid.mdx index 1710719917..5c019293fc 100644 --- a/docs/angular/src/content/en/components/treegrid/tree-grid.mdx +++ b/docs/angular/src/content/en/components/treegrid/tree-grid.mdx @@ -303,17 +303,14 @@ There is no specific `sass` tree grid function. ```scss -$custom-theme: grid-theme( - $cell-active-border-color: #ffcd0f, - $cell-selected-background: #6f6f6f, - $row-hover-background: #f8e495, - $row-selected-background: #8d8d8d, - $header-background: #494949, - $header-text-color: #fff, - $expand-icon-color: #ffcd0f, - $expand-icon-hover-color: #e0b710, - $resize-line-color: #ffcd0f, - $row-highlight: #ffcd0f +$background: #292826; +$foreground: #eeece1; +$accent: #ffcd0f; + +$custom-grid: grid-theme( + $background: $background, + $foreground: $foreground, + $accent-color: $accent, ); ``` @@ -325,7 +322,7 @@ The last step is to **include** the component theme in our application. ```scss :host { - @include tokens($custom-theme); + @include tokens($custom-grid); } ``` diff --git a/docs/angular/src/content/en/grids_templates/advanced-filtering.mdx b/docs/angular/src/content/en/grids_templates/advanced-filtering.mdx index c3ddb06596..c4c2d0c324 100644 --- a/docs/angular/src/content/en/grids_templates/advanced-filtering.mdx +++ b/docs/angular/src/content/en/grids_templates/advanced-filtering.mdx @@ -251,7 +251,9 @@ Since the Advanced Filtering dialog uses the com ```scss $custom-query-builder: query-builder-theme( - $header-foreground: #512da8 + $background: #1f2836, + $foreground: #f5f6e6, + $accent-color: #f5f6e6 ); ``` @@ -262,15 +264,6 @@ Instead of hardcoding the color values like we just did, we can achieve greater The last step is to **include** the component theme in our application. ```scss -$custom-query-builder: query-builder-theme( - $header-foreground: #512da8, - $color-expression-group-and: #eb0000, - $color-expression-group-or: #0000f3, - $subquery-header-background: var(--ig-gray-300), - $subquery-border-color: var(--ig-warn-500), - $subquery-border-radius: rem(4px) -); - igx-advanced-filtering-dialog { @include tokens($custom-query-builder); } @@ -285,15 +278,6 @@ If the component is using an [`Emulated`](/themes/sass/component-themes#view-enc ```scss -$custom-query-builder: query-builder-theme( - $header-foreground: #512da8, - $color-expression-group-and: #eb0000, - $color-expression-group-or: #0000f3, - $subquery-header-background: var(--ig-gray-300), - $subquery-border-color: var(--ig-warn-500), - $subquery-border-radius: rem(4px) -); - :host { ::ng-deep { igx-advanced-filtering-dialog { diff --git a/docs/angular/src/content/en/grids_templates/cell-editing.mdx b/docs/angular/src/content/en/grids_templates/cell-editing.mdx index afe096b77b..f3a8f429e6 100644 --- a/docs/angular/src/content/en/grids_templates/cell-editing.mdx +++ b/docs/angular/src/content/en/grids_templates/cell-editing.mdx @@ -581,22 +581,50 @@ $color-palette: palette( We can now define the theme using our palette. The cells are styled by the , so we can use that to generate a theme for our {ComponentName}: ```scss -$custom-grid-theme: grid-theme( +$grid-theme: grid-theme( $cell-editing-background: $blue, + $cell-editing-foreground: $white, + $cell-active-border-color: $blue, $cell-edited-value-color: $white, - $cell-active-border-color: $white, - $edit-mode-color: color($color-palette, "secondary", 200) + $edit-mode-color: color($color: "secondary", $variant: 200) ); ``` ### Applying the theme -The easiest way to apply our theme is with a `sass` `@include` statement in the global styles file: +The last step is to **include** the custom palette and grid themes. + + + +```scss +igx-grid { + @include palette($color-palette); + @include tokens($grid-theme); +} +``` + + + ```scss -@include grid($custom-grid-theme); +igx-tree-grid { + @include palette($color-palette); + @include tokens($grid-theme); +} ``` + + + +```scss +igx-hierarchical-grid { + @include palette($color-palette); + @include tokens($grid-theme); +} +``` + + + ### Demo In addition to the steps above, we can also style the controls that are used for the cells' editing templates: [`input-group`](/input-group#styling), [`datepicker`](/date-picker#styling) & [`checkbox`](/checkbox#styling) diff --git a/docs/angular/src/content/en/grids_templates/column-resizing.mdx b/docs/angular/src/content/en/grids_templates/column-resizing.mdx index 897c1d5c93..04ae693560 100644 --- a/docs/angular/src/content/en/grids_templates/column-resizing.mdx +++ b/docs/angular/src/content/en/grids_templates/column-resizing.mdx @@ -314,12 +314,34 @@ To get started with the styling of the {ComponentTitle} column resize line, we n The simplest approach to achieve this is to create a new theme that extends the and accepts many parameters as well as the `$resize-line-color` parameter. + + ``` scss $custom-grid-theme: grid-theme( $resize-line-color: #0288d1 ); ``` + + + +``` scss +$custom-grid-theme: grid-theme( + $resize-line-color: #dc38e8 +); +``` + + + + +``` scss +$custom-grid-theme: grid-theme( + $resize-line-color: #07ea07 +); +``` + + + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the and functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them. diff --git a/docs/angular/src/content/en/grids_templates/column-selection.mdx b/docs/angular/src/content/en/grids_templates/column-selection.mdx index a6e48d16cc..69e43ab69a 100644 --- a/docs/angular/src/content/en/grids_templates/column-selection.mdx +++ b/docs/angular/src/content/en/grids_templates/column-selection.mdx @@ -130,14 +130,22 @@ Following the simplest approach, let's define our custom **theme**. ```scss -$custom-grid-theme: grid-theme( - $row-selected-background: #011627, - $row-selected-text-color: #ecaa53, - $row-selected-hover-background: #011627, - $header-selected-text-color: #ecaa53, - $header-selected-background: #011627, - $expand-icon-color: #ecaa53, - $expand-icon-hover-color: #b64b80 +$background: #0b0119; +$foreground: #eeece1; +$accent: #f6b560; + +$grid-theme: grid-theme( + $background: $background, + $foreground: $foreground, + $accent-color: $accent, + + $row-selected-background: #012724, + $row-selected-text-color: $accent, + $header-selected-text-color: $accent, + $header-selected-background: #012427, + + $row-selected-hover-background: hsl(from #012427 h s 10%), + $row-selected-hover-text-color: $accent, ); ``` @@ -145,29 +153,33 @@ $custom-grid-theme: grid-theme( ```scss +$background: #011627; +$accent: #ecaa53; + $custom-grid-theme: grid-theme( - $row-selected-background: #011627, - $row-selected-text-color: #ecaa53, - $row-selected-hover-background: #011627, - $header-selected-text-color: #ecaa53, - $header-selected-background: #011627 + $row-selected-background: $background, + $row-selected-text-color: $accent, + $row-selected-hover-background: hsl(from $background h s 10%), + $row-selected-hover-text-color: $accent, + $header-selected-text-color: $accent, + $header-selected-background: $background, ); ``` - The accepts several parameters but those are the five responsible for changing the appearance of all selected columns: - **$row-selected-background** - sets the background of the selected fraction. - **$row-selected-text-color** - sets the text color of the selected fraction -- **$row-selected-hover-background** - sets the color of the hovered cell or bunch of cells. +- **$row-selected-hover-background** - sets the color of the hovered cell or group of cells. +- **$row-selected-hover-text-color** - sets the text color of the hovered cell or group of cells. - **$header-selected-text-color** - sets the text color of the selected column header - **$header-selected-background** - sets the background color of the selected column header. ### Using CSS Variables -The last step is to include the custom `igx-grid` theme. +The last step is to **include** the custom grid theme. ```scss :host { diff --git a/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx b/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx index d2944dd96a..0ebc9c71ef 100644 --- a/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx +++ b/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx @@ -507,114 +507,49 @@ To get started with styling the Excel Style Filtering dialog, we need to import // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -The Excel Style Filtering dialog takes its background color from the grid's theme, using the `filtering-row-background` parameter. Additionally, there are specific Excel Style Filtering parameters available for customizing the text color of elements within the dialog. To change the overall style of the dialog, you need to create a custom theme. +There are a couple of ways to style the Excel Style Filtering dialog. It can be styled using the . The Excel Style Filtering dialog inherits the `$background`, `$foreground`, and `$accent-color` values defined in the . It also provides dedicated parameters for customizing the dialog’s text colors. -```scss -$custom-grid: grid-theme( - $filtering-row-background: #ffcd0f, - $excel-filtering-header-foreground: #292826, - $excel-filtering-subheader-foreground: #292826, - $excel-filtering-actions-foreground: #006400, - $excel-filtering-actions-hover-foreground: #ffcd0f, - $excel-filtering-actions-disabled-foreground: #9e9e9e -); -``` +Alternatively, you can use the dedicated , which allows you to fully style only the Excel Style Filtering dialog. -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: +The simplest approach is to use the : ```scss -$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, - $tick-color: #ffcd0f, - $label-color: #292826 -); - -$custom-drop-down: drop-down-theme( - $background-color: #ffcd0f, - $item-text-color: #292826, - $hover-item-background: #292826, - $hover-item-text-color: #ffcd0f -); - -$custom-input-group: input-group-theme( - $box-background: #ffcd0f, - $idle-text-color: #292826, - $focused-text-color: #292826, - $filled-text-color: #292826 -); +$background: #292826; +$foreground: #eeece1; +$accent: #ffcd0f; -$custom-list: list-theme( - $background: #ffcd0f +$custom-grid: grid-theme( + $background: $background, + $foreground: $foreground, + $accent-color: $accent, ); - ``` - -Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the and functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them. - - -In this example we only changed some of the parameters for the listed components, but the , , , , themes provide way more parameters to control their respective styling. +The background and foreground colors of the Excel Style Filtering dialog are inherited from the grid theme. Additionally, all nested components, such as buttons and checkboxes, inherit the accent color from the grid theme. -The last step is to **include** each component’s custom theme. We will also set the color property for the input's placeholder. +After that, we are ready to include our newly created grid theme. If we want to make additional style changes specific to the Excel Style Filtering dialog, we can target it directly: ```scss :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; - } + + igx-grid-excel-style-filtering { + --ig-excel-filtering-background: #444; } } ``` - -We scope most of the components' mixins within `.igx-excel-filter` and `.igx-excel-filter__secondary`, so that these custom themes will affect only components nested in the excel style filtering dialog and all of its sub-dialogs. Otherwise other buttons, checkboxes, input-groups and lists would be affected too. - - If the component is using an [`Emulated`](/themes/sass/component-themes#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`: ```scss -:host { - ::ng-deep { +:host ::ng-deep { @include tokens($custom-grid); - @include tokens($custom-drop-down); - - .igx-excel-filter, - .igx-excel-filter__secondary { - @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; - } + + igx-grid-excel-style-filtering { + --ig-excel-filtering-background: #444; } - } } ``` @@ -645,6 +580,7 @@ The sample will not be affected by the selected global theme from `Change Theme` - - - +- ## Additional Resources diff --git a/docs/angular/src/content/en/grids_templates/multi-column-headers.mdx b/docs/angular/src/content/en/grids_templates/multi-column-headers.mdx index 84aefc751e..309febd6c7 100644 --- a/docs/angular/src/content/en/grids_templates/multi-column-headers.mdx +++ b/docs/angular/src/content/en/grids_templates/multi-column-headers.mdx @@ -286,6 +286,8 @@ To get started with styling the sorting behavior, we need to import the `index` Following the simplest approach, we create a new theme that extends the and accepts the `$header-background`, `$header-text-color`, `$header-border-width`, `$header-border-style` and `$header-border-color` parameters. + + ```scss $custom-theme: grid-theme( $header-background: #e0f3ff, @@ -296,6 +298,34 @@ $custom-theme: grid-theme( ); ``` + + + +```scss +$custom-theme: grid-theme( + $header-background: #f1eaf6, + $header-text-color: #8c1bdd, + $header-border-width: 1px, + $header-border-style: solid, + $header-border-color: #d3b9e6, + $cell-active-border-color: #7409c1 +); +``` + + + + +```scss +$custom-theme: grid-theme( + $header-background: #f8f8ed, + $header-text-color: #7a6551, + $header-border-style: dashed, + $header-border-color: rgba(0, 0, 0, 0.08) +); +``` + + + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the and functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them. diff --git a/docs/angular/src/content/en/grids_templates/multi-row-layout.mdx b/docs/angular/src/content/en/grids_templates/multi-row-layout.mdx index 1f3b9c4270..fa33358a86 100644 --- a/docs/angular/src/content/en/grids_templates/multi-row-layout.mdx +++ b/docs/angular/src/content/en/grids_templates/multi-row-layout.mdx @@ -149,6 +149,7 @@ Next, create a new theme, that extends the and accepts the `$text-color`, `$background-color` and the `$border-color` parameters. +Following the simplest approach, we create a new theme that extends the and accepts the `$foreground`, `$background`, `$border-color` and `$accent-color` parameters. ```scss -$dark-paginator: paginator-theme( - $text-color: #d0ab23;, - $background-color: #231c2c, - $border-color: #d0ab23; +$paginator-theme: paginator-theme( + $foreground: #ff570f, + $background: #130425FF, + $border-color: #ff570f, + $accent-color: #ff570f, ); ``` -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: +After that we can **include** the newly created theme. ```scss -$dark-button: flat-icon-button-theme( - $foreground: #d0ab23, - $hover-foreground: #231c2c, - $hover-background: #d0ab23, - $focus-foreground: #231c2c, - $focus-background: #d0ab23, - $disabled-foreground: #9b7829 -); -``` - - -Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the and functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them. - - -The last step is to **include** the component mixins, each with its respective theme: - -```scss -:host { - @include tokens($dark-paginator); - - .igx-grid-paginator__pager { - @include tokens($dark-button); - } -} -``` - - -We include the created **icon-button-theme** within `.igx-paginator__pager`, so that only the paginator buttons would be styled. Otherwise other icon buttons in the grid would be affected too. - - - -If the component is using an [`Emulated`](/themes/sass/component-themes#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 -:host { - @include tokens($dark-paginator); - - igx-paginator { - ::ng-deep { - @include tokens($dark-button); - } - } +igx-paginator { + @include tokens($paginator-theme); } ``` diff --git a/docs/angular/src/content/en/grids_templates/row-pinning.mdx b/docs/angular/src/content/en/grids_templates/row-pinning.mdx index f41f6d7511..8cf85483f3 100644 --- a/docs/angular/src/content/en/grids_templates/row-pinning.mdx +++ b/docs/angular/src/content/en/grids_templates/row-pinning.mdx @@ -428,8 +428,10 @@ To begin the customization of the row pinning feature, you need to import the `i Next, create a new theme, that extends the and accepts the parameters, required to customize the row pinning feature as desired. + + ```scss -$custom-grid-theme: grid-theme( +$custom-theme: grid-theme( $pinned-border-width: 5px, $pinned-border-style: double, $pinned-border-color: #ffcd0f, @@ -437,16 +439,59 @@ $custom-grid-theme: grid-theme( ); ``` + + + +```scss +$custom-theme: grid-theme( + $pinned-border-width: 1px, + $pinned-border-style: dashed, + $pinned-border-color: #f325e9, +); +``` + + + + +```scss +$background: #292826; +$foreground: #eeece1; +$accent: #ffcd0f; + +$custom-grid: grid-theme( + $background: $background, + $foreground: $foreground, + $accent-color: $accent, + $pinned-border-color: $accent, +); +``` + + + ### Using CSS variables The last step is to pass the custom grid theme: + + ```scss :host { - @include tokens($custom-grid-theme); + @include tokens($custom-theme); } ``` + + + + +```scss +:host { + @include tokens($custom-grid); +} +``` + + + ### Demo diff --git a/docs/angular/src/content/en/grids_templates/sorting.mdx b/docs/angular/src/content/en/grids_templates/sorting.mdx index 3010a984e6..66c12d0b1f 100644 --- a/docs/angular/src/content/en/grids_templates/sorting.mdx +++ b/docs/angular/src/content/en/grids_templates/sorting.mdx @@ -275,6 +275,8 @@ To get started with styling the sorting behavior, we need to import the `index` Following the simplest approach, we create a new theme that extends the and accepts the `$sorted-header-icon-color` and `sortable-header-icon-hover-color` parameters. + + ```scss $custom-theme: grid-theme( $sorted-header-icon-color: #ffb06a, @@ -282,6 +284,19 @@ $custom-theme: grid-theme( ); ``` + + + + +```scss +$custom-theme: grid-theme( + $sorted-header-icon-color: #dc38e8, + $sortable-header-icon-hover-color: #5d1461 +); +``` + + + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the and functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them. diff --git a/docs/angular/src/content/en/grids_templates/summaries.mdx b/docs/angular/src/content/en/grids_templates/summaries.mdx index be5ead4284..3eb597e21f 100644 --- a/docs/angular/src/content/en/grids_templates/summaries.mdx +++ b/docs/angular/src/content/en/grids_templates/summaries.mdx @@ -726,18 +726,54 @@ To get started with styling the sorting behavior, we need to import the `index` Following the simplest approach, we create a new theme that extends the and accepts the `$background-color`, `$focus-background-color`, `$label-color`, `$result-color`, `$pinned-border-width`, `$pinned-border-style` and `$pinned-border-color` parameters. + + + + ```scss +$summaries-background: #e0f3ff; + $custom-theme: grid-summary-theme( - $background-color: #e0f3ff, - $focus-background-color: rgba(#94d1f7, .3), + $background-color: $summaries-background, $label-color: #e41c77, $result-color: black, $pinned-border-width: 2px, $pinned-border-style: dotted, - $pinned-border-color: #e41c77 + $pinned-border-color: #e41c77, ); ``` + + + +```scss +$summaries-background: #eef4e5; + +$custom-theme: grid-summary-theme( + $background-color: $summaries-background, + $label-color: #486821, + $result-color: #172505, + $pinned-border-width: 2px, + $pinned-border-style: dotted, + $pinned-border-color: #172505, +); +``` + + + + +```scss +$summaries-background: #e0f3ff; + +$custom-theme: grid-summary-theme( + $background-color: $summaries-background, + $label-color: #e41c77, + $result-color: black, +); +``` + + + Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the and functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them. diff --git a/docs/angular/src/content/en/grids_templates/toolbar.mdx b/docs/angular/src/content/en/grids_templates/toolbar.mdx index 99ac6d7bd8..81a89a9e26 100644 --- a/docs/angular/src/content/en/grids_templates/toolbar.mdx +++ b/docs/angular/src/content/en/grids_templates/toolbar.mdx @@ -537,49 +537,16 @@ To get started with styling the toolbar, we need to import the index file, where // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -First, let's create a new palette. +Next, create a new theme that extends the . ```scss -$my-dark-palette: palette( - $primary: #2466ff, - $secondary: #ffcd0f, - $surface: #2a2b2f, - $grays: #fff, -); - -$my-dark-color: color($my-dark-palette, 'surface'); -``` - -Now, create a new theme that extends the and modify the `$background-color` and the `$title-text-color` parameters. - -```scss -$dark-grid-toolbar-theme: grid-toolbar-theme( - $background-color: $my-dark-color, - $title-text-color: color($my-dark-palette, 'secondary'), - $dropdown-background: $my-dark-color, -); -``` - -To theme the column actions menus of the toolbar, we have to change the theme of the component. - -```scss -$dark-column-actions-theme: column-actions-theme( - $title-color: color($my-dark-palette, 'secondary'), - $background-color: color($my-dark-palette, 'surface') -); -``` - -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: outlined-button-theme( - $background: color($my-dark-palette, 'secondary'), - $hover-background: color($my-dark-palette, 'grays', 100), - $hover-foreground: color($my-dark-palette, 'secondary') -); +$accent: #ffcd0f; -$dark-checkbox-theme: checkbox-theme( - $tick-color: $my-dark-color, +$grid-toolbar-theme: grid-toolbar-theme( + $background: #170237, + $border-color: $accent, + $title-text-color: #f6d8d8, + $item-hover-background: rgb(246 216 216 / 0.3), ); ``` @@ -587,10 +554,9 @@ The last step is to **include** the newly created themes. ```scss :host { - @include tokens($dark-grid-toolbar-theme); - @include tokens($dark-column-actions-theme); - @include tokens($dark-checkbox-theme); - @include tokens($dark-button-theme); + igx-grid-toolbar { + @include tokens($grid-toolbar-theme); + } } ``` @@ -599,13 +565,9 @@ If the component is using an [`Emulated`](/themes/sass/component-themes#view-enc ```scss -@include tokens($dark-grid-toolbar-theme); - -:host { - ::ng-deep { - @include tokens($dark-column-actions-theme); - @include tokens($dark-checkbox-theme); - @include tokens($dark-button-theme); +:host ::ng-deep { + igx-grid-toolbar { + @include tokens($grid-toolbar-theme); } } ```