From 021e7d6746a0278102e7b8208231a5c2b03801ed Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 16 Jun 2026 14:37:15 +0300 Subject: [PATCH 01/14] deps: bump igniteui-angular to latest beta --- package-lock.json | 16 ++++++++-------- package.json | 6 +++--- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 69569188b..711cf25f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,7 +36,7 @@ "file-saver": "^2.0.2", "fuse.js": "^7.1.0", "hammerjs": "^2.0.8", - "igniteui-angular": "^22.0.0-beta.2", + "igniteui-angular": "^22.0.0-beta.3", "igniteui-angular-charts": "^22.0.0-alpha.0", "igniteui-angular-core": "^22.0.0-alpha.0", "igniteui-angular-extras": "^22.0.0-beta.2", @@ -10627,15 +10627,15 @@ "license": "BSD-3-Clause" }, "node_modules/igniteui-angular": { - "version": "22.0.0-beta.2", - "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-22.0.0-beta.2.tgz", - "integrity": "sha512-Ry1fsb/K4Pnp464qnnvSzimt9wydFkp0SE7UUeCLYjxDYLf1hbVjpCTGqaK+uZrcRS+K1u7dvlEYeqvRoHNQOw==", + "version": "22.0.0-beta.3", + "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-22.0.0-beta.3.tgz", + "integrity": "sha512-IzrvUdgNdn9ZCnLqB9vbk84MmGAS1sHm0RWonrPGjbcEOY2pFMkJrnvIAKMEZj/JsXIy7x+S9S3srYi39FIVbA==", "license": "SEE LICENSE IN LICENSE", "dependencies": { "@igniteui/material-icons-extended": "^3.1.0", "fflate": "^0.8.2", "igniteui-i18n-core": "^1.0.5", - "igniteui-theming": "^27.0.0", + "igniteui-theming": "^27.2.0", "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.2.1", "lodash-es": "^4.17.21", @@ -10822,9 +10822,9 @@ "license": "MIT" }, "node_modules/igniteui-theming": { - "version": "27.1.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-27.1.0.tgz", - "integrity": "sha512-67NK/TwdmLKuVDK5j3lJi+yIBnZ/VjJWIavRc2tDs2SEcde2Q2dR0LpIfwDlodKH9V3StTRMyd6mpq3agzJ6zg==", + "version": "27.2.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-27.2.0.tgz", + "integrity": "sha512-XGI8MIP2x2RO6yuiAkGHJHbocixPPGoAUQyFOxMgNWWqqGtEEM5OYAkzzKBNjJKWgbrmIMWTXtlIzd8yPV5qjQ==", "license": "MIT", "dependencies": { "@modelcontextprotocol/sdk": "^1.28.0", diff --git a/package.json b/package.json index 097f654bf..eeae5addf 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "file-saver": "^2.0.2", "fuse.js": "^7.1.0", "hammerjs": "^2.0.8", - "igniteui-angular": "^22.0.0-beta.2", + "igniteui-angular": "^22.0.0-beta.3", "igniteui-angular-charts": "^22.0.0-alpha.0", "igniteui-angular-core": "^22.0.0-alpha.0", "igniteui-angular-extras": "^22.0.0-beta.2", @@ -113,8 +113,8 @@ "@angular/compiler": "^22.0.0" }, "igniteui-angular-extras": { - "igniteui-angular": "^22.0.0-beta.2", - "@infragistics/igniteui-angular": "^22.0.0-beta.2", + "igniteui-angular": "^22.0.0-beta.3", + "@infragistics/igniteui-angular": "^22.0.0-beta.3", "igniteui-angular-core": "^22.0.0-alpha.0", "igniteui-angular-charts": "^22.0.0-alpha.0", "@angular/core": "^22.0.0", From 54d923b7b3c6aba7460cc63b62dfc9cc316ed52e Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 16 Jun 2026 16:21:40 +0300 Subject: [PATCH 02/14] refactor(crm): update styles and layout --- .../src/app/grid-crm/grid-crm.component.html | 41 +- .../src/app/grid-crm/grid-crm.component.scss | 443 ++---------------- .../src/app/grid-crm/grid-crm.component.ts | 4 +- 3 files changed, 56 insertions(+), 432 deletions(-) diff --git a/projects/app-crm/src/app/grid-crm/grid-crm.component.html b/projects/app-crm/src/app/grid-crm/grid-crm.component.html index abffe6907..5538301ee 100644 --- a/projects/app-crm/src/app/grid-crm/grid-crm.component.html +++ b/projects/app-crm/src/app/grid-crm/grid-crm.component.html @@ -7,62 +7,55 @@ -
-
- - - - Business Propeller -
-
@if (searchText.length === 0) { - search + search } @if (searchText.length > 0) { - clear - + clear } - + @if (searchText.length > 0) { - + @if (grid1.lastSearchInfo) { -
+
@if (grid1.lastSearchInfo.matchInfoCache.length > 0) { - + {{ grid1.lastSearchInfo.activeMatchIndex + 1 }} of {{ grid1.lastSearchInfo.matchInfoCache.length }} results } @if (grid1.lastSearchInfo.matchInfoCache.length === 0) { - + No results }
} -
- +
-
- -
} -
-
diff --git a/projects/app-crm/src/app/grid-crm/grid-crm.component.scss b/projects/app-crm/src/app/grid-crm/grid-crm.component.scss index 5141fd0d1..b9e09b575 100644 --- a/projects/app-crm/src/app/grid-crm/grid-crm.component.scss +++ b/projects/app-crm/src/app/grid-crm/grid-crm.component.scss @@ -1,421 +1,52 @@ @use '../../variables' as *; -@import url('https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css'); -@import url('https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css'); -@import url('https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css'); -:host ::ng-deep { - $light-palette: palette( - $primary: #09f, - $secondary: #ffbf00, - $surface: #fff - ); +:host { + $crm-grid-theme: grid-theme( + $background: #1f2836, + $foreground: #f5f6e6, + $header-background: #2f3744, + $header-text-color: #f5f6e6, + $accent-color: #f5f6e6, + ); - @include palette($light-palette); + $crm-toolbar-theme: grid-toolbar-theme( + $background: #1f2836, + $accent-color: #f5f6e6 + ); - $checkbox-theme: checkbox-theme( - $fill-color: color($color: 'secondary', $variant: 500), - $tick-color: contrast-color($color: 'secondary', $variant: 500) - ); - $summary-theme: grid-summary-theme( - $background-color: #f0f8fe, - $result-color: color($color: 'primary', $variant: 500) - ); + igx-grid { + @include tokens($crm-grid-theme); - $crm-grid-theme: grid-theme( - $header-background: #f0f8fe, - $header-border-color: #dde5eb - ); + } - $crm-grid-toolbar: grid-toolbar-theme( - $background: color($color: 'primary', $variant: 500), - $title-text-color: contrast-color($color: 'primary', $variant: 500) - ); + igx-grid-toolbar { + @include tokens($crm-toolbar-theme); - $crm-grid-toolbar-button: outlined-button-theme( - $background: color($light-palette, 'primary', 800), - $hover-background: color($light-palette, 'primary', 900), - $active-foreground: contrast-color($light-palette, 'primary', 900), - $focus-foreground: contrast-color($light-palette, 'primary', 900) - ); - - $crm-grid-search-button: flat-icon-button-theme( - $background: transparent, - $focus-background: color($light-palette, 'gray', 200), - $hover-background: color($light-palette, 'gray', 200) - ); - - $crm-input-drop-down: input-group-theme( - $placeholder-color: color($light-palette, 'gray', 500), - $idle-text-color: color($light-palette, 'gray', 900), - $size: sizable(rem(24px), rem(32px), rem(40px)) - ); - - input-group[type="search"] { - --ig-size: var(--ig-size-small); + igx-input-group[type="search"] { + --ig-size: var(--ig-size-small); + --search-resting-elevation: none; + --search-hover-elevation: none; + --search-disabled-elevation: none; } + } - .grid__wrapper { - --ig-size: var(--ig-size-medium); - width: inherit; - position: relative; - height: 100%; - background: transparent; - padding: 1rem; - } - - .avatar-cell { - --ig-size: var(--ig-size-small); - - width: 100%; - display: flex; - justify-content: center; - } - - // grid caption styling - .crm-toolbar-template { - justify-content: space-between; - display: flex; - flex: 1 0 0%; - align-items: center; - padding-right: rem(24px); - border-radius: 2px; - - & span { - margin-right: auto; - } - - .igx-button--flat { - flex-wrap: nowrap; - white-space: nowrap; - } - - .igx-button--icon { - border-radius: 0; - } - - .logo-propeller { - display: flex; - align-items: center; - justify-content: center; - margin-right: 10px; - } - } - - .sample-flex-container { - display: flex; - align-self: center; - justify-content: flex-end; - max-width: 500px; - width: 70% - } - - @include tokens($crm-grid-toolbar, $mode: 'scoped'); - - .igx-grid-toolbar__actions { - .igx-button--outlined { - border: none; - } - } - - .igx-grid-toolbar__title { - max-width: 68ch; - } - - .igx-grid-toolbar__custom-content { - flex: 1 0 0%; - } - - .igx-grid-toolbar__actions { - .igx-button--outlined { - margin-left: 0.5rem; - } - } - - .igx-grid-toolbar__actions { - .igx-button--outlined { - border: none; - } - } - - .igx-grid-toolbar__actions { - @include tokens($crm-grid-toolbar-button); - } - - .crm-sample-toolbar__title { - margin-right: rem(16px); - display: flex; - align-items: center; - justify-self: flex-start; - width: 30%; - } - - .crm-sample-toolbar__ellipsis { - @include ellipsis(); - opacity: 0; - animation: slide-fade 1.25s .25s ease-out forwards; - } - - .igx-input-group--search { - width: 100%; - } - - .sample-flex-container { - .igx-input-group, - .igx-input-group--focused { - font-size: 13px; - overflow: hidden; - } - - .igx-input-group__input { - &::placeholder { - opacity: 1; - } - } - } - - .caseSensitiveButton { - margin-left: 8px; - } - - .igx-input-group--search .igx-input-group__bundle .igx-button--icon { - border-radius: 0; - } - - .caseSensitiveIcon { - width: 1.25rem; - height: 1.25rem; - font-size: 1.25rem; - } - - .searchButtons { - margin-left: 4px; - } - - .case-sensitive--active { - background: color($color: 'primary', $variant: 200); - } - - .igx-grid__th-resize-line { - background: color($color: 'secondary', $variant: 500); - } - - .igx-input-group--search .igx-input-group__bundle, - .igx-input-group--search .igx-input-group__bundle:hover { - box-shadow: none; - } - - @include tokens($crm-input-drop-down, $mode: 'scoped'); - - .sample-flex-container { - .igx-input-group, - .igx-input-group--focused { - .igx-input-group__bundle { - transition: all 250ms ease-in-out; - } - - igx-icon { - color: color($color: 'primary', $variant: 200); - } - } + .search-extras { + display: flex; + align-items: center; + gap: 0.5rem; - .igx-input-group__textarea, - .igx-input-group__input { - color: color($color: 'primary', $variant: 100); - } - - .igx-input-group { - igx-icon { - color: contrast-color($color: 'gray', $variant: 900); - } - - &:hover, - &:focus, - &.igx-input-group--focused { - igx-icon { - color: color($color: 'gray', $variant: 600); - } - - .igx-input-group__bundle { - background: contrast-color($color: 'gray', $variant: 900); - color: color($color: 'gray', $variant: 600); - } - - .igx-input-group__input { - &::placeholder { - color: color($color: 'gray', $variant: 600); - opacity: 1; - } - } - - .igx-input-group__textarea, - .igx-input-group__input { - color: color($color: 'gray', $variant: 600); - } - - .igx-button--icon { - &:focus, - &:active { - color: color($color: 'gray', $variant: 600); - } - } - } - } - - .igx-button--icon { - &:focus, - &:active { - color: color($color: 'primary', $variant: 100); - background: transparent; - } - } - - .igx-input-group__input { - &::placeholder { - color: contrast-color($color: 'gray', $variant: 900); - opacity: 1; - } - } - } - - .igx-input-group--search .igx-input-group__bundle { - background-color: color($color: 'primary', $variant: 800); - - @include tokens($crm-grid-search-button); - } - - .grid__wrapper:not(.dark_grid) { - @include tokens($crm-grid-theme); - @include tokens($summary-theme); - @include tokens($checkbox-theme); - } - - - // DARK THEME - $dark-palette: palette( - $primary: #09f, - $secondary: #fff, - $surface: #222, - ); - - $checkbox-dark-theme: checkbox-theme( - $fill-color: color($color: 'gray', $variant: 900), - $tick-color: contrast-color($color: 'gray', $variant: 900) - ); - - $crm-dark-grid-theme: grid-theme( - $row-selected-background: color($color: 'gray', $variant: 100), - $row-selected-text-color: contrast-color($color: 'gray', $variant: 100), - $row-hover-background: color($color: 'gray', $variant: 200), - $row-hover-text-color: contrast-color($color: 'gray', $variant: 200), - $row-selected-hover-background: color($color: 'gray', $variant: 200), - $row-selected-hover-text-color: contrast-color($color: 'gray', $variant: 200), - $cell-selected-background: color($color: 'gray', $variant: 900), - $cell-selected-text-color: contrast-color($color: 'gray', $variant: 900), - $cell-active-border-color: color($color: 'gray', $variant: 900), - ); - - $crm-grid-dark-button: flat-button-theme( - $foreground: color($color: 'primary', $variant: 500), - $hover-foreground: color($color: 'primary', $variant: 500), - $focus-foreground: color($color: 'primary', $variant: 500), - ); - - $crm-grid-dark-progress: progress-linear-theme( - $track-color: color($color: 'gray', $variant: 500) - ); - - .dark_grid { - @include palette($dark-palette); - @include tokens($checkbox-dark-theme); - @include tokens($crm-dark-grid-theme); - @include tokens($crm-grid-dark-button); - @include tokens($crm-grid-dark-progress); - - .igx-grid-toolbar__actions { - @include tokens($crm-grid-toolbar-button); - } - - .sample-flex-container { - .igx-input-group, - .igx-input-group--focused { - igx-icon { - color: color($color: 'primary', $variant: 200); - } - } - - .igx-input-group__textarea, - .igx-input-group__input { - color: color($color: 'primary', $variant: 100); - } - - .igx-input-group { - igx-icon { - color: contrast-color($color: 'gray', $variant: 50); - } - - &:hover, - &:focus, - &.igx-input-group--focused { - igx-icon { - color: color($color: 'gray', $variant: 400); - } - - .igx-input-group__bundle { - background: contrast-color($color: 'gray', $variant: 50); - color: color($color: 'gray', $variant: 400); - } - - .igx-input-group__input { - &::placeholder { - color: color($color: 'gray', $variant: 400); - } - } - - .igx-input-group__textarea, - .igx-input-group__input { - color: color($color: 'gray', $variant: 400); - } - - .igx-button--icon { - &:focus, - &:active { - color: color($color: 'gray', $variant: 400); - } - } - } - } - - .igx-input-group__input { - &::placeholder { - color: contrast-color($color: 'gray', $variant: 50); - } - } - } + &__inner-container { + display: flex; } -} - -.animated-fan { - animation: spin-fade 1.5s cubic-bezier(0.21, 1.07, 0.99, 1) forwards; -} + } -@keyframes spin-fade { - 0% { - opacity: 0; - transform: rotate(0); - } - 100% { - opacity: 1; - transform: rotate(270deg); - } -} + .search-results { + color: rgb(from var(--ig-grid-foreground) r g b / 0.5); + font-size: .875rem; + } -@keyframes slide-fade { - 0% { - transform: translateX(-5%); - } - 100% { - opacity: 1; - transform: translateX(0); - } + .case-sensitive--inactive { + color: rgb(from var(--ig-grid-foreground) r g b / 0.7); + } } diff --git a/projects/app-crm/src/app/grid-crm/grid-crm.component.ts b/projects/app-crm/src/app/grid-crm/grid-crm.component.ts index 8978f4933..0b76333d4 100644 --- a/projects/app-crm/src/app/grid-crm/grid-crm.component.ts +++ b/projects/app-crm/src/app/grid-crm/grid-crm.component.ts @@ -4,7 +4,7 @@ import { ActivatedRoute } from '@angular/router'; import { CloseScrollStrategy, ConnectedPositioningStrategy, HorizontalAlignment, IgxSummaryResult, OverlaySettings, PositionSettings, VerticalAlignment } from 'igniteui-angular/core'; import { CellType, GridSelectionMode, IgxCellTemplateDirective, IgxColumnComponent, IgxDateSummaryOperand, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxNumberSummaryOperand, IColumnExportingEventArgs, IgxCsvExporterService, IgxExcelExporterService } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; -import { IgxIconButtonDirective, IgxRippleDirective, IgxToggleDirective } from 'igniteui-angular/directives'; +import { IgxIconButtonDirective, IgxToggleDirective } from 'igniteui-angular/directives'; import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; @@ -76,7 +76,7 @@ class SoonSummary extends IgxDateSummaryOperand { styleUrls: ['./grid-crm.component.scss'], templateUrl: './grid-crm.component.html', changeDetection: ChangeDetectionStrategy.Eager, - imports: [NgClass, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxGridToolbarTitleComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxLinearProgressBarComponent] + imports: [NgClass, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxGridToolbarTitleComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxLinearProgressBarComponent] }) export class GridCRMComponent implements OnInit, AfterViewInit { private csvExporter = inject(IgxCsvExporterService); From 6587495b7df375be1cbd25f7f1883d56c59c8054 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 16 Jun 2026 16:25:24 +0300 Subject: [PATCH 03/14] style(crm): remove empty line --- projects/app-crm/src/app/grid-crm/grid-crm.component.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/app-crm/src/app/grid-crm/grid-crm.component.scss b/projects/app-crm/src/app/grid-crm/grid-crm.component.scss index b9e09b575..0adda7d04 100644 --- a/projects/app-crm/src/app/grid-crm/grid-crm.component.scss +++ b/projects/app-crm/src/app/grid-crm/grid-crm.component.scss @@ -17,7 +17,6 @@ igx-grid { @include tokens($crm-grid-theme); - } igx-grid-toolbar { From bafa0719abd5c049f433f5d8eedadb2d9bd0c644 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 17 Jun 2026 10:20:01 +0300 Subject: [PATCH 04/14] refactor(advanced-filtering-samples): update and simplify styles --- ...grid-advanced-filtering-style.component.scss | 15 +++++++-------- ...grid-advanced-filtering-style.component.scss | 15 +++++++-------- ...grid-advanced-filtering-style.component.scss | 17 +++++++---------- 3 files changed, 21 insertions(+), 26 deletions(-) diff --git a/src/app/grid/grid-advanced-filtering-style/grid-advanced-filtering-style.component.scss b/src/app/grid/grid-advanced-filtering-style/grid-advanced-filtering-style.component.scss index 287111727..e31cca005 100644 --- a/src/app/grid/grid-advanced-filtering-style/grid-advanced-filtering-style.component.scss +++ b/src/app/grid/grid-advanced-filtering-style/grid-advanced-filtering-style.component.scss @@ -1,14 +1,13 @@ @use "igniteui-angular/theming" as *; $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) + $background: #1f2836, + $foreground: #f5f6e6, + $accent-color: #f5f6e6 ); -:host { - @include tokens($custom-query-builder); +:host ::ng-deep { + igx-advanced-filtering-dialog { + @include tokens($custom-query-builder); + } } diff --git a/src/app/hierarchical-grid/hierarchical-grid-advanced-filtering-style/hierarchical-grid-advanced-filtering-style.component.scss b/src/app/hierarchical-grid/hierarchical-grid-advanced-filtering-style/hierarchical-grid-advanced-filtering-style.component.scss index 287111727..e31cca005 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-advanced-filtering-style/hierarchical-grid-advanced-filtering-style.component.scss +++ b/src/app/hierarchical-grid/hierarchical-grid-advanced-filtering-style/hierarchical-grid-advanced-filtering-style.component.scss @@ -1,14 +1,13 @@ @use "igniteui-angular/theming" as *; $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) + $background: #1f2836, + $foreground: #f5f6e6, + $accent-color: #f5f6e6 ); -:host { - @include tokens($custom-query-builder); +:host ::ng-deep { + igx-advanced-filtering-dialog { + @include tokens($custom-query-builder); + } } diff --git a/src/app/tree-grid/tree-grid-advanced-filtering-style/tree-grid-advanced-filtering-style.component.scss b/src/app/tree-grid/tree-grid-advanced-filtering-style/tree-grid-advanced-filtering-style.component.scss index be765bb9c..e31cca005 100644 --- a/src/app/tree-grid/tree-grid-advanced-filtering-style/tree-grid-advanced-filtering-style.component.scss +++ b/src/app/tree-grid/tree-grid-advanced-filtering-style/tree-grid-advanced-filtering-style.component.scss @@ -1,16 +1,13 @@ @use "igniteui-angular/theming" as *; $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) + $background: #1f2836, + $foreground: #f5f6e6, + $accent-color: #f5f6e6 ); -:host { - igx-advanced-filtering-dialog { - @include tokens($custom-query-builder); - } +:host ::ng-deep { + igx-advanced-filtering-dialog { + @include tokens($custom-query-builder); + } } From 597565a01ee5473c13d450a63137913375ae0e59 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 17 Jun 2026 10:52:06 +0300 Subject: [PATCH 05/14] refactor(excel-style-filtering): update theme --- .../grid-excel-style-filtering-style.component.scss | 4 ++++ ...erarchical-grid-excel-style-filtering-style.component.scss | 4 ++++ .../tree-grid-excel-style-filtering-style.component.scss | 4 ++++ 3 files changed, 12 insertions(+) diff --git a/src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.scss b/src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.scss index a497ae343..330233855 100644 --- a/src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.scss +++ b/src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.scss @@ -13,4 +13,8 @@ $custom-grid: grid-theme( :host ::ng-deep { @include tokens($custom-grid); + + igx-grid-excel-style-filtering { + --ig-excel-filtering-background: #444; + } } diff --git a/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-style/hierarchical-grid-excel-style-filtering-style.component.scss b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-style/hierarchical-grid-excel-style-filtering-style.component.scss index a497ae343..330233855 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-style/hierarchical-grid-excel-style-filtering-style.component.scss +++ b/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-style/hierarchical-grid-excel-style-filtering-style.component.scss @@ -13,4 +13,8 @@ $custom-grid: grid-theme( :host ::ng-deep { @include tokens($custom-grid); + + igx-grid-excel-style-filtering { + --ig-excel-filtering-background: #444; + } } diff --git a/src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.scss b/src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.scss index a497ae343..330233855 100644 --- a/src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.scss +++ b/src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component.scss @@ -13,4 +13,8 @@ $custom-grid: grid-theme( :host ::ng-deep { @include tokens($custom-grid); + + igx-grid-excel-style-filtering { + --ig-excel-filtering-background: #444; + } } From c3a3383a195933c9423c26d8f47dfd3ff5977d2c Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 17 Jun 2026 11:50:55 +0300 Subject: [PATCH 06/14] fix(column-selection-styles): fix row hover text color --- .../column-selection-styles.component.scss | 14 +++++++++----- ...cal-grid-column-selection-styles.component.scss | 14 +++++++++----- ...tree-grid-column-selection-style.component.scss | 14 +++++++++----- 3 files changed, 27 insertions(+), 15 deletions(-) diff --git a/src/app/grid/column-selection-styles/column-selection-styles.component.scss b/src/app/grid/column-selection-styles/column-selection-styles.component.scss index 0672c9d37..b174e7eb5 100644 --- a/src/app/grid/column-selection-styles/column-selection-styles.component.scss +++ b/src/app/grid/column-selection-styles/column-selection-styles.component.scss @@ -1,12 +1,16 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; +$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, ); :host { diff --git a/src/app/hierarchical-grid/column-selection-styles/hierarchical-grid-column-selection-styles.component.scss b/src/app/hierarchical-grid/column-selection-styles/hierarchical-grid-column-selection-styles.component.scss index 0672c9d37..b174e7eb5 100644 --- a/src/app/hierarchical-grid/column-selection-styles/hierarchical-grid-column-selection-styles.component.scss +++ b/src/app/hierarchical-grid/column-selection-styles/hierarchical-grid-column-selection-styles.component.scss @@ -1,12 +1,16 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; +$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, ); :host { diff --git a/src/app/tree-grid/column-selection-styles/tree-grid-column-selection-style.component.scss b/src/app/tree-grid/column-selection-styles/tree-grid-column-selection-style.component.scss index 0672c9d37..b174e7eb5 100644 --- a/src/app/tree-grid/column-selection-styles/tree-grid-column-selection-style.component.scss +++ b/src/app/tree-grid/column-selection-styles/tree-grid-column-selection-style.component.scss @@ -1,12 +1,16 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; +$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, ); :host { From 8cb3ad623664113653b8bc0bbcccf241a7e9dc34 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 17 Jun 2026 12:06:11 +0300 Subject: [PATCH 07/14] fix(samples): update grid cell-editing styling samples --- .../grid-editing-style-sample.component.scss | 12 +++---- ...archical-grid-editing-style.component.scss | 36 +++++++++---------- .../tree-grid-editing-sample.component.scss | 26 +++++--------- 3 files changed, 31 insertions(+), 43 deletions(-) diff --git a/src/app/grid/grid-editing-style-sample/grid-editing-style-sample.component.scss b/src/app/grid/grid-editing-style-sample/grid-editing-style-sample.component.scss index 5227c4f7a..d45c7b212 100644 --- a/src/app/grid/grid-editing-style-sample/grid-editing-style-sample.component.scss +++ b/src/app/grid/grid-editing-style-sample/grid-editing-style-sample.component.scss @@ -13,13 +13,14 @@ $color-palette: palette( $grid-theme: grid-theme( $cell-editing-background: $blue, + $cell-editing-foreground: $white, $cell-active-border-color: $blue, $cell-edited-value-color: $white, - $edit-mode-color: color($color-palette, "secondary", 200) + $edit-mode-color: color($color: "secondary", $variant: 200) ); $checkbox-theme: checkbox-theme( - $empty-color: color($color-palette, "secondary", 200), + $empty-color: color($color: "secondary", $variant: 200), $fill-color: $white, $tick-color: $blue ); @@ -39,13 +40,10 @@ $input-theme: input-group-theme( $box-background: $blue ); -:host { +igx-grid { + @include palette($color-palette); @include tokens($grid-theme); @include tokens($checkbox-theme); @include tokens($datepicker-theme); @include tokens($input-theme); } - -.igx-grid { - @include palette($color-palette); -} diff --git a/src/app/hierarchical-grid/hierarchical-grid-editing-style/hierarchical-grid-editing-style.component.scss b/src/app/hierarchical-grid/hierarchical-grid-editing-style/hierarchical-grid-editing-style.component.scss index 5e754a5c2..9924278a1 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-editing-style/hierarchical-grid-editing-style.component.scss +++ b/src/app/hierarchical-grid/hierarchical-grid-editing-style/hierarchical-grid-editing-style.component.scss @@ -13,23 +13,14 @@ $color-palette: palette( $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) -); - -$input-theme: input-group-theme( - $filled-text-color: $white, - $focused-text-color: $white, - $idle-text-color: $white, - $idle-bottom-line-color: $white, - $focused-bottom-line-color: $white, - $hover-bottom-line-color: $white, - $box-background: $blue + $edit-mode-color: color($color: "secondary", $variant: 200) ); $checkbox-theme: checkbox-theme( - $empty-color: color($color-palette, "secondary", 200), + $empty-color: color($color: "secondary", $variant: 200), $fill-color: $white, $tick-color: $blue ); @@ -39,13 +30,20 @@ $datepicker-theme: calendar-theme( $date-selected-background: $blue ); -:host { +$input-theme: input-group-theme( + $filled-text-color: $white, + $focused-text-color: $white, + $idle-text-color: $white, + $idle-bottom-line-color: $white, + $focused-bottom-line-color: $white, + $hover-bottom-line-color: $white, + $box-background: $blue +); + +igx-hierarchical-grid { + @include palette($color-palette); @include tokens($grid-theme); @include tokens($checkbox-theme); - @include tokens($input-theme); @include tokens($datepicker-theme); -} - -igx-hierarchical-grid { - @include palette($color-palette); + @include tokens($input-theme); } diff --git a/src/app/tree-grid/tree-grid-editing-style/tree-grid-editing-sample.component.scss b/src/app/tree-grid/tree-grid-editing-style/tree-grid-editing-sample.component.scss index d0cd07d23..8d4cc02df 100644 --- a/src/app/tree-grid/tree-grid-editing-style/tree-grid-editing-sample.component.scss +++ b/src/app/tree-grid/tree-grid-editing-style/tree-grid-editing-sample.component.scss @@ -13,13 +13,14 @@ $color-palette: palette( $grid-theme: grid-theme( $cell-editing-background: $blue, + $cell-editing-foreground: $white, $cell-active-border-color: $blue, $cell-edited-value-color: $white, - $edit-mode-color: color($color-palette, "secondary", 200) + $edit-mode-color: color($color: "secondary", $variant: 200) ); $checkbox-theme: checkbox-theme( - $empty-color: color($color-palette, "secondary", 200), + $empty-color: color($color: "secondary", $variant: 200), $fill-color: $white, $tick-color: $blue ); @@ -39,19 +40,10 @@ $input-theme: input-group-theme( $box-background: $blue ); - -:host { - @include tokens($grid-theme); - @include tokens($checkbox-theme); - @include tokens($datepicker-theme); - - ::ng-deep { - .igx-grid__tbody { - @include tokens($input-theme); - } - } -} - -.igx-grid { - @include palette($color-palette); +igx-tree-grid { + @include palette($color-palette); + @include tokens($grid-theme); + @include tokens($checkbox-theme); + @include tokens($datepicker-theme); + @include tokens($input-theme); } From d9691c150658ef3853285766ace63d53c6f6fe77 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 17 Jun 2026 12:10:19 +0300 Subject: [PATCH 08/14] fix(samples): multi-row layout styling for selected cells --- .../grid-multi-row-layout-styling.component.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/grid/grid-multi-row-layout-styling/grid-multi-row-layout-styling.component.scss b/src/app/grid/grid-multi-row-layout-styling/grid-multi-row-layout-styling.component.scss index 38c3a8a2c..69d6f3e54 100644 --- a/src/app/grid/grid-multi-row-layout-styling/grid-multi-row-layout-styling.component.scss +++ b/src/app/grid/grid-multi-row-layout-styling/grid-multi-row-layout-styling.component.scss @@ -4,6 +4,7 @@ $custom-theme: grid-theme( $cell-active-border-color: #ffcd0f, $cell-selected-background: #6f6f6f, + $cell-selected-text-color: #ffcd0f, $row-hover-background: #fde069, $row-selected-background: #8d8d8d, $header-background: #494949, From 084a6737a31cfa0918f847f3c15bceb69e7bc58f Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 17 Jun 2026 13:49:26 +0300 Subject: [PATCH 09/14] feat(styles): update theming for hierarchical and tree grids samples --- ...l-grid-multi-column-styling.component.scss | 15 ++-- ...rarchical-grid-paging-style.component.scss | 2 +- ...al-grid-resize-line-styling.component.scss | 8 +-- ...al-grid-row-pinning-styling.component.scss | 20 +++--- .../hierarchical-grid-styling.component.scss | 22 +++--- ...chical-grid-summary-styling.component.scss | 3 - ...grid-column-selection-style.component.scss | 27 +++++--- ...nditional-cell-style-sample.component.scss | 9 +-- ...ulti-column-headers-styling.component.scss | 17 ++--- ...ee-grid-paging-style-sample.component.scss | 68 ++++--------------- ...-resize-line-styling-sample.component.scss | 2 +- .../tree-grid-row-edit-style.component.scss | 22 +++--- ...ee-grid-row-pinning-styling.component.scss | 7 +- .../tree-grid-sorting-styling.component.scss | 4 +- .../tree-grid-style.component.scss | 21 +++--- .../tree-grid-summary-styling.component.scss | 8 +-- .../tree-grid-toolbar-style.component.scss | 29 +++++--- 17 files changed, 131 insertions(+), 153 deletions(-) diff --git a/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-styling/hierarchical-grid-multi-column-styling.component.scss b/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-styling/hierarchical-grid-multi-column-styling.component.scss index 9c43b67bd..b504d21e0 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-styling/hierarchical-grid-multi-column-styling.component.scss +++ b/src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-styling/hierarchical-grid-multi-column-styling.component.scss @@ -1,14 +1,13 @@ -@use "layout.scss"; -@use "igniteui-angular/theming" as *; +@use 'layout.scss'; +@use 'igniteui-angular/theming' as *; $custom-theme: grid-theme( - $header-background: #e0f3ff, - $header-text-color: #e41c77, - $header-border-width: 1px, - $header-border-style: solid, - $header-border-color: rgba(0, 0, 0, 0.08) + $header-background: #f8f8ed, + $header-text-color: #7a6551, + $header-border-style: dashed, + $header-border-color: rgba(0, 0, 0, 0.08) ); :host { - @include tokens($custom-theme); + @include tokens($custom-theme); } diff --git a/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss b/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss index 60d751355..6370113eb 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss +++ b/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss @@ -1,7 +1,7 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -$my-primary: #231c2c; +$my-primary: #130425; $my-secondary: #d0ab23; $dark-gray: #333; $light-gray: #999; diff --git a/src/app/hierarchical-grid/hierarchical-grid-resize-line-styling/hierarchical-grid-resize-line-styling.component.scss b/src/app/hierarchical-grid/hierarchical-grid-resize-line-styling/hierarchical-grid-resize-line-styling.component.scss index b86f7777c..2ae2e3082 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-resize-line-styling/hierarchical-grid-resize-line-styling.component.scss +++ b/src/app/hierarchical-grid/hierarchical-grid-resize-line-styling/hierarchical-grid-resize-line-styling.component.scss @@ -1,10 +1,10 @@ -@use "layout.scss"; -@use "igniteui-angular/theming" as *; +@use 'layout.scss'; +@use 'igniteui-angular/theming' as *; $custom-grid-theme: grid-theme( - $resize-line-color: #0288d1 + $resize-line-color: #07ea07 ); :host { - @include tokens($custom-grid-theme); + @include tokens($custom-grid-theme); } diff --git a/src/app/hierarchical-grid/hierarchical-grid-row-pinning-styling/hierarchical-grid-row-pinning-styling.component.scss b/src/app/hierarchical-grid/hierarchical-grid-row-pinning-styling/hierarchical-grid-row-pinning-styling.component.scss index 4393111d0..d80ae7967 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-row-pinning-styling/hierarchical-grid-row-pinning-styling.component.scss +++ b/src/app/hierarchical-grid/hierarchical-grid-row-pinning-styling/hierarchical-grid-row-pinning-styling.component.scss @@ -1,13 +1,17 @@ -@use "layout.scss"; -@use "igniteui-angular/theming" as *; +@use 'layout.scss'; +@use 'igniteui-angular/theming' as *; -$custom-theme: grid-theme( - $pinned-border-width: 5px, - $pinned-border-style: double, - $pinned-border-color: #ffcd0f, - $cell-active-border-color: #ffcd0f +$background: #292826; +$foreground: #eeece1; +$accent: #ffcd0f; + +$custom-grid: grid-theme( + $background: $background, + $foreground: $foreground, + $accent-color: $accent, + $pinned-border-color: $accent, ); :host { - @include tokens($custom-theme); + @include tokens($custom-grid); } diff --git a/src/app/hierarchical-grid/hierarchical-grid-styling/hierarchical-grid-styling.component.scss b/src/app/hierarchical-grid/hierarchical-grid-styling/hierarchical-grid-styling.component.scss index dfe99fdeb..2c0d35a3b 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-styling/hierarchical-grid-styling.component.scss +++ b/src/app/hierarchical-grid/hierarchical-grid-styling/hierarchical-grid-styling.component.scss @@ -1,20 +1,16 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -$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, +); :host { - @include tokens($custom-theme); + @include tokens($custom-grid); } diff --git a/src/app/hierarchical-grid/hierarchical-grid-summary-styling/hierarchical-grid-summary-styling.component.scss b/src/app/hierarchical-grid/hierarchical-grid-summary-styling/hierarchical-grid-summary-styling.component.scss index 0ade0da84..0d547e6a7 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-summary-styling/hierarchical-grid-summary-styling.component.scss +++ b/src/app/hierarchical-grid/hierarchical-grid-summary-styling/hierarchical-grid-summary-styling.component.scss @@ -7,9 +7,6 @@ $custom-theme: grid-summary-theme( $background-color: $summaries-background, $label-color: #e41c77, $result-color: black, - $pinned-border-width: 2px, - $pinned-border-style: dotted, - $pinned-border-color: #e41c77, ); :host { diff --git a/src/app/tree-grid/column-selection-styles/tree-grid-column-selection-style.component.scss b/src/app/tree-grid/column-selection-styles/tree-grid-column-selection-style.component.scss index b174e7eb5..a7325c52f 100644 --- a/src/app/tree-grid/column-selection-styles/tree-grid-column-selection-style.component.scss +++ b/src/app/tree-grid/column-selection-styles/tree-grid-column-selection-style.component.scss @@ -1,18 +1,25 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -$background: #011627; -$accent: #ecaa53; +$background: #0b0119; +$foreground: #eeece1; +$accent: #f6b560; -$custom-grid-theme: grid-theme( - $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, +$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, + + // The intersection between row & column, visible when row is hovered + $row-selected-hover-background: hsl(from #012427 h s 10%), + $row-selected-hover-text-color: $accent, ); :host { - @include tokens($custom-grid-theme); + @include tokens($grid-theme); } diff --git a/src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component.scss b/src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component.scss index c175fc211..513258d86 100644 --- a/src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component.scss +++ b/src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component.scss @@ -3,9 +3,10 @@ } :host::ng-deep { - $primary-color-green: green; - $primary-color-red: red; - $primary-color-blue: royalblue; + $primary-color-green: #195e19; + $primary-color-red: #b52626; + $primary-color-blue: #4144e1; + $margin-right-images: 5px; $images-font-size: 1.5em; $images-font-weight: bold; @@ -30,7 +31,7 @@ .star { @extend .contentStyle; - content: "*"; + content: '*'; } .allergens:after { diff --git a/src/app/tree-grid/tree-grid-multi-column-headers-styling/tree-grid-multi-column-headers-styling.component.scss b/src/app/tree-grid/tree-grid-multi-column-headers-styling/tree-grid-multi-column-headers-styling.component.scss index 9c43b67bd..e1de94fff 100644 --- a/src/app/tree-grid/tree-grid-multi-column-headers-styling/tree-grid-multi-column-headers-styling.component.scss +++ b/src/app/tree-grid/tree-grid-multi-column-headers-styling/tree-grid-multi-column-headers-styling.component.scss @@ -1,14 +1,15 @@ -@use "layout.scss"; -@use "igniteui-angular/theming" as *; +@use 'layout.scss'; +@use 'igniteui-angular/theming' as *; $custom-theme: grid-theme( - $header-background: #e0f3ff, - $header-text-color: #e41c77, - $header-border-width: 1px, - $header-border-style: solid, - $header-border-color: rgba(0, 0, 0, 0.08) + $header-background: #f1eaf6, + $header-text-color: #8c1bdd, + $header-border-width: 1px, + $header-border-style: solid, + $header-border-color: #d3b9e6, + $cell-active-border-color: #7409c1 ); :host { - @include tokens($custom-theme); + @include tokens($custom-theme); } diff --git a/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss b/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss index 17398ee38..873c84658 100644 --- a/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss +++ b/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss @@ -1,67 +1,29 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -$my-primary: #231c2c; -$my-secondary: #d0ab23; -$dark-gray: #333; -$light-gray: #999; -$inactive-color: #826217; - -$dark-paginator: paginator-theme( - $foreground: $my-secondary, - $background: $my-primary, - $border-color: $my-secondary, +$background: #19171b; +$foreground: #eeece1; +$accent: #ffcd0f; + +$grid-theme: grid-theme( + $background: $background, + $foreground: $foreground, + $accent-color: $accent, ); -$dark-button: flat-icon-button-theme( - $foreground: $my-secondary, - $hover-foreground: $dark-gray, - $hover-background: $my-secondary, - $focus-foreground: $dark-gray, - $focus-background: $my-secondary, - $border-color: $my-secondary, - $focus-border-color: $my-secondary, - $disabled-foreground: $inactive-color, +$paginator-theme: paginator-theme( + $foreground: #ff570f, + $background: #130425FF, + $border-color: #ff570f, + $accent-color: #ff570f, ); -$dark-select: select-theme( - $toggle-button-background: $my-primary, - $toggle-button-foreground: $inactive-color, - $toggle-button-foreground-filled: $inactive-color, - $toggle-button-foreground-focus: $inactive-color, - $toggle-button-background-focus--border: $my-primary, -); -$dark-input-group: input-group-theme( - $filled-text-color: $my-secondary, - $idle-text-color: $my-secondary, - $filled-text-hover-color: $my-secondary, - $focused-text-color: $my-secondary, - $border-color: darken($inactive-color, 10%), - $focused-border-color: $my-secondary, - $input-suffix-color: $my-secondary, -); - -$dark-drop-down-theme: drop-down-theme( - $background-color: $my-primary, - $item-text-color: $my-secondary, - $selected-item-background: $my-secondary, - $selected-item-text-color: $dark-gray, - $focused-item-background: $my-secondary, - $focused-item-text-color: $dark-gray, - $selected-focus-item-background: $my-secondary, - $selected-focus-item-text-color: $dark-gray, - $selected-hover-item-background: $my-secondary, - $selected-hover-item-text-color: $dark-gray, -); igx-tree-grid { - @include tokens($dark-paginator); - @include tokens($dark-drop-down-theme); + @include tokens($grid-theme); } igx-paginator { - @include tokens($dark-button); - @include tokens($dark-input-group); - @include tokens($dark-select); + @include tokens($paginator-theme); } diff --git a/src/app/tree-grid/tree-grid-resize-line-styling-sample/tree-grid-resize-line-styling-sample.component.scss b/src/app/tree-grid/tree-grid-resize-line-styling-sample/tree-grid-resize-line-styling-sample.component.scss index b86f7777c..a158a3131 100644 --- a/src/app/tree-grid/tree-grid-resize-line-styling-sample/tree-grid-resize-line-styling-sample.component.scss +++ b/src/app/tree-grid/tree-grid-resize-line-styling-sample/tree-grid-resize-line-styling-sample.component.scss @@ -2,7 +2,7 @@ @use "igniteui-angular/theming" as *; $custom-grid-theme: grid-theme( - $resize-line-color: #0288d1 + $resize-line-color: #dc38e8 ); :host { diff --git a/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.scss b/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.scss index 2373d5551..071eb6114 100644 --- a/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.scss +++ b/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.scss @@ -1,15 +1,17 @@ -@use "layout.scss"; -@use "igniteui-angular/theming" as *; +@use 'layout.scss'; +@use 'igniteui-angular/theming' as *; -$banner-theme: banner-theme( - $banner-background: #e3e3e3, - $banner-message-color: color($purple-palette, "secondary", 600) +$grid-theme: grid-theme( + $edit-mode-color: #9311ea, + $cell-editing-background: #e4d9f4, ); -:host { - @include tokens($banner-theme); -} +$banner-theme: banner-theme( + $banner-background: #e4d9f4, + $banner-message-color: #000, +); -igx-tree-grid{ - @include palette($purple-palette); +igx-tree-grid { + @include tokens($banner-theme); + @include tokens($grid-theme); } diff --git a/src/app/tree-grid/tree-grid-row-pinning-styling/tree-grid-row-pinning-styling.component.scss b/src/app/tree-grid/tree-grid-row-pinning-styling/tree-grid-row-pinning-styling.component.scss index 4393111d0..94e11ff86 100644 --- a/src/app/tree-grid/tree-grid-row-pinning-styling/tree-grid-row-pinning-styling.component.scss +++ b/src/app/tree-grid/tree-grid-row-pinning-styling/tree-grid-row-pinning-styling.component.scss @@ -2,10 +2,9 @@ @use "igniteui-angular/theming" as *; $custom-theme: grid-theme( - $pinned-border-width: 5px, - $pinned-border-style: double, - $pinned-border-color: #ffcd0f, - $cell-active-border-color: #ffcd0f + $pinned-border-width: 1px, + $pinned-border-style: dashed, + $pinned-border-color: #f325e9, ); :host { diff --git a/src/app/tree-grid/tree-grid-sorting-styling/tree-grid-sorting-styling.component.scss b/src/app/tree-grid/tree-grid-sorting-styling/tree-grid-sorting-styling.component.scss index a40fd09d5..7bae60eac 100644 --- a/src/app/tree-grid/tree-grid-sorting-styling/tree-grid-sorting-styling.component.scss +++ b/src/app/tree-grid/tree-grid-sorting-styling/tree-grid-sorting-styling.component.scss @@ -2,8 +2,8 @@ @use "igniteui-angular/theming" as *; $custom-theme: grid-theme( - $sorted-header-icon-color: #ffb06a, - $sortable-header-icon-hover-color: black + $sorted-header-icon-color: #dc38e8, + $sortable-header-icon-hover-color: #5d1461 ); :host { diff --git a/src/app/tree-grid/tree-grid-style/tree-grid-style.component.scss b/src/app/tree-grid/tree-grid-style/tree-grid-style.component.scss index 07d55f303..2c0d35a3b 100644 --- a/src/app/tree-grid/tree-grid-style/tree-grid-style.component.scss +++ b/src/app/tree-grid/tree-grid-style/tree-grid-style.component.scss @@ -1,19 +1,16 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -$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, ); :host { - @include tokens($custom-theme); + @include tokens($custom-grid); } diff --git a/src/app/tree-grid/tree-grid-summary-styling/tree-grid-summary-styling.component.scss b/src/app/tree-grid/tree-grid-summary-styling/tree-grid-summary-styling.component.scss index 0ade0da84..07c3707c3 100644 --- a/src/app/tree-grid/tree-grid-summary-styling/tree-grid-summary-styling.component.scss +++ b/src/app/tree-grid/tree-grid-summary-styling/tree-grid-summary-styling.component.scss @@ -1,15 +1,15 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -$summaries-background: #e0f3ff; +$summaries-background: #eef4e5; $custom-theme: grid-summary-theme( $background-color: $summaries-background, - $label-color: #e41c77, - $result-color: black, + $label-color: #486821, + $result-color: #172505, $pinned-border-width: 2px, $pinned-border-style: dotted, - $pinned-border-color: #e41c77, + $pinned-border-color: #172505, ); :host { diff --git a/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.scss b/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.scss index 1d455bb5c..9c0ee5e4c 100644 --- a/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.scss +++ b/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.scss @@ -1,25 +1,38 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -$background: #292826; +$background: #19171b; +$foreground: #eeece1; $accent: #ffcd0f; -$dark-button-theme: outlined-button-theme( +$grid-theme: grid-theme( + $background: $background, + $foreground: $foreground, + $accent-color: $accent, +); + +$button-theme: outlined-button-theme( $foreground: $accent, $hover-background: $accent, ); -$dark-grid-toolbar-theme: grid-toolbar-theme( - $background: $background, - $title-text-color: $accent, +$grid-toolbar-theme: grid-toolbar-theme( + $background: #25025a, + $border-color: $accent, + $title-text-color: #f6d8d8, + $item-hover-background: rgb(246 216 216 / 0.3), ); :host ::ng-deep { + igx-tree-grid { + @include tokens($grid-theme); + } + igx-grid-toolbar { - @include tokens($dark-grid-toolbar-theme); + @include tokens($grid-toolbar-theme); - [igxButton="outlined"] { - @include tokens($dark-button-theme); + [igxButton='outlined'] { + @include tokens($button-theme); } } } From 48b21e863e80564b72a9598af6113a8d3c578bb1 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 17 Jun 2026 14:51:31 +0300 Subject: [PATCH 10/14] featr(styles): update theming for hierarchical and tree grids --- ...rarchical-grid-paging-style.component.scss | 72 +++++-------------- ...archical-grid-toolbar-style.component.scss | 32 +++++---- .../tree-grid-toolbar-style.component.scss | 11 +-- 3 files changed, 35 insertions(+), 80 deletions(-) diff --git a/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss b/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss index 6370113eb..e87eb5ed2 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss +++ b/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss @@ -1,67 +1,27 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -$my-primary: #130425; -$my-secondary: #d0ab23; -$dark-gray: #333; -$light-gray: #999; -$inactive-color: #826217; - -$dark-paginator: paginator-theme( - $foreground: $my-secondary, - $background: $my-primary, - $border-color: $my-secondary, -); - -$dark-button: flat-icon-button-theme( - $foreground: $my-secondary, - $hover-foreground: $dark-gray, - $hover-background: $my-secondary, - $focus-foreground: $dark-gray, - $focus-background: $my-secondary, - $border-color: $my-secondary, - $focus-border-color: $my-secondary, - $disabled-foreground: $inactive-color, -); - -$dark-select: select-theme( - $toggle-button-background: $my-primary, - $toggle-button-foreground: $inactive-color, - $toggle-button-foreground-filled: $inactive-color, - $toggle-button-foreground-focus: $inactive-color, - $toggle-button-background-focus--border: $my-primary, -); - -$dark-input-group: input-group-theme( - $filled-text-color: $my-secondary, - $idle-text-color: $my-secondary, - $filled-text-hover-color: $my-secondary, - $focused-text-color: $my-secondary, - $border-color: darken($inactive-color, 10%), - $focused-border-color: $my-secondary, - $input-suffix-color: $my-secondary, +$background: #19171b; +$foreground: #eeece1; +$accent: #ffcd0f; + +$grid-theme: grid-theme( + $background: $background, + $foreground: $foreground, + $accent-color: $accent, ); -$dark-drop-down-theme: drop-down-theme( - $background-color: $my-primary, - $item-text-color: $my-secondary, - $selected-item-background: $my-secondary, - $selected-item-text-color: $dark-gray, - $focused-item-background: $my-secondary, - $focused-item-text-color: $dark-gray, - $selected-focus-item-background: $my-secondary, - $selected-focus-item-text-color: $dark-gray, - $selected-hover-item-background: $my-secondary, - $selected-hover-item-text-color: $dark-gray, +$paginator-theme: paginator-theme( + $foreground: #ff570f, + $background: #130425FF, + $border-color: #ff570f, + $accent-color: #ff570f, ); -igx-hierarchical-grid { - @include tokens($dark-paginator); - @include tokens($dark-drop-down-theme); +igx-tree-grid { + @include tokens($grid-theme); } igx-paginator { - @include tokens($dark-button); - @include tokens($dark-input-group); - @include tokens($dark-select); + @include tokens($paginator-theme); } diff --git a/src/app/hierarchical-grid/hierarchical-grid-toolbar-style/hierarchical-grid-toolbar-style.component.scss b/src/app/hierarchical-grid/hierarchical-grid-toolbar-style/hierarchical-grid-toolbar-style.component.scss index 1d455bb5c..eaaa892cf 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-toolbar-style/hierarchical-grid-toolbar-style.component.scss +++ b/src/app/hierarchical-grid/hierarchical-grid-toolbar-style/hierarchical-grid-toolbar-style.component.scss @@ -1,25 +1,29 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -$background: #292826; +$background: #19171b; +$foreground: #eeece1; $accent: #ffcd0f; -$dark-button-theme: outlined-button-theme( - $foreground: $accent, - $hover-background: $accent, +$grid-theme: grid-theme( + $background: $background, + $foreground: $foreground, + $accent-color: $accent, ); -$dark-grid-toolbar-theme: grid-toolbar-theme( - $background: $background, - $title-text-color: $accent, +$grid-toolbar-theme: grid-toolbar-theme( + $background: #170237, + $border-color: $accent, + $title-text-color: #f6d8d8, + $item-hover-background: rgb(246 216 216 / 0.3), ); :host ::ng-deep { - igx-grid-toolbar { - @include tokens($dark-grid-toolbar-theme); - - [igxButton="outlined"] { - @include tokens($dark-button-theme); - } - } + igx-hierarchical-grid { + @include tokens($grid-theme); + } + + igx-grid-toolbar { + @include tokens($grid-toolbar-theme); + } } diff --git a/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.scss b/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.scss index 9c0ee5e4c..73465e54c 100644 --- a/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.scss +++ b/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.scss @@ -11,13 +11,8 @@ $grid-theme: grid-theme( $accent-color: $accent, ); -$button-theme: outlined-button-theme( - $foreground: $accent, - $hover-background: $accent, -); - $grid-toolbar-theme: grid-toolbar-theme( - $background: #25025a, + $background: #170237, $border-color: $accent, $title-text-color: #f6d8d8, $item-hover-background: rgb(246 216 216 / 0.3), @@ -30,9 +25,5 @@ $grid-toolbar-theme: grid-toolbar-theme( igx-grid-toolbar { @include tokens($grid-toolbar-theme); - - [igxButton='outlined'] { - @include tokens($button-theme); - } } } From a0393ad0c846a5b77388a92844850ef3963aad32 Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 17 Jun 2026 14:53:54 +0300 Subject: [PATCH 11/14] featr(styles): update theming for hierarchical and tree grids --- .../hierarchical-grid-paging-style.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss b/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss index e87eb5ed2..c50c4ca51 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss +++ b/src/app/hierarchical-grid/hierarchical-grid-paging-style/hierarchical-grid-paging-style.component.scss @@ -18,7 +18,7 @@ $paginator-theme: paginator-theme( $accent-color: #ff570f, ); -igx-tree-grid { +igx-hierarchical-grid { @include tokens($grid-theme); } From 4cb7e418e9e6e75ddf788377dec99e6903158db8 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Wed, 17 Jun 2026 16:55:44 +0300 Subject: [PATCH 12/14] feat(): align Grid paginator styles with Tree and HrGrid ones --- .../custom-grid-paging-style.component.scss | 72 +++++-------------- ...ee-grid-paging-style-sample.component.scss | 8 +-- 2 files changed, 19 insertions(+), 61 deletions(-) diff --git a/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.scss b/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.scss index 825b4ad5d..2986d177b 100644 --- a/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.scss +++ b/src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component.scss @@ -1,67 +1,27 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -$my-primary: #231c2c; -$my-secondary: #d0ab23; -$dark-gray: #333; -$light-gray: #999; -$inactive-color: #826217; - -$dark-paginator: paginator-theme( - $foreground: $my-secondary, - $background: $my-primary, - $border-color: $my-secondary, -); - -$dark-button: flat-icon-button-theme( - $foreground: $my-secondary, - $hover-foreground: $dark-gray, - $hover-background: $my-secondary, - $focus-foreground: $dark-gray, - $focus-background: $my-secondary, - $border-color: $my-secondary, - $focus-border-color: $my-secondary, - $disabled-foreground: $inactive-color, -); - -$dark-select: select-theme( - $toggle-button-background: $my-primary, - $toggle-button-foreground: $inactive-color, - $toggle-button-foreground-filled: $inactive-color, - $toggle-button-foreground-focus: $inactive-color, - $toggle-button-background-focus--border: $my-primary, -); - -$dark-input-group: input-group-theme( - $filled-text-color: $my-secondary, - $idle-text-color: $my-secondary, - $filled-text-hover-color: $my-secondary, - $focused-text-color: $my-secondary, - $border-color: darken($inactive-color, 10%), - $focused-border-color: $my-secondary, - $input-suffix-color: $my-secondary, +$background: #19171b; +$foreground: #eeece1; +$accent: #ffcd0f; + +$grid-theme: grid-theme( + $background: $background, + $foreground: $foreground, + $accent-color: $accent, ); -$dark-drop-down-theme: drop-down-theme( - $background-color: $my-primary, - $item-text-color: $my-secondary, - $selected-item-background: $my-secondary, - $selected-item-text-color: $dark-gray, - $focused-item-background: $my-secondary, - $focused-item-text-color: $dark-gray, - $selected-focus-item-background: $my-secondary, - $selected-focus-item-text-color: $dark-gray, - $selected-hover-item-background: $my-secondary, - $selected-hover-item-text-color: $dark-gray, +$paginator-theme: paginator-theme( + $foreground: #ff570f, + $background: #130425FF, + $border-color: #ff570f, + $accent-color: #ff570f, ); igx-grid { - @include tokens($dark-paginator); - @include tokens($dark-drop-down-theme); + @include tokens($grid-theme); } igx-paginator { - @include tokens($dark-button); - @include tokens($dark-input-group); - @include tokens($dark-select); -} + @include tokens($paginator-theme); +} \ No newline at end of file diff --git a/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss b/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss index 873c84658..3a77229dc 100644 --- a/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss +++ b/src/app/tree-grid/tree-grid-paging-style/tree-grid-paging-style-sample.component.scss @@ -6,9 +6,9 @@ $foreground: #eeece1; $accent: #ffcd0f; $grid-theme: grid-theme( - $background: $background, - $foreground: $foreground, - $accent-color: $accent, + $background: $background, + $foreground: $foreground, + $accent-color: $accent, ); $paginator-theme: paginator-theme( @@ -18,8 +18,6 @@ $paginator-theme: paginator-theme( $accent-color: #ff570f, ); - - igx-tree-grid { @include tokens($grid-theme); } From d35f79caba3f37c097dad2b822ddcf6f051e6c00 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Wed, 17 Jun 2026 18:57:42 +0300 Subject: [PATCH 13/14] feat(): align Grid Toolbar styles with the Tree and Hgrid ones --- .../grid-toolbar-style.component.scss | 63 +++++++------------ 1 file changed, 21 insertions(+), 42 deletions(-) diff --git a/src/app/grid/grid-toolbar-style/grid-toolbar-style.component.scss b/src/app/grid/grid-toolbar-style/grid-toolbar-style.component.scss index 6f2ecdbe7..0216ba07b 100644 --- a/src/app/grid/grid-toolbar-style/grid-toolbar-style.component.scss +++ b/src/app/grid/grid-toolbar-style/grid-toolbar-style.component.scss @@ -1,50 +1,29 @@ @use "layout.scss"; @use "igniteui-angular/theming" as *; -$my-dark-palette: palette( - $primary: #2466ff, - $secondary: #ffcd0f, - $surface: #2a2b2f, - $gray: #fff, +$background: #19171b; +$foreground: #eeece1; +$accent: #ffcd0f; + +$grid-theme: grid-theme( + $background: $background, + $foreground: $foreground, + $accent-color: $accent, ); -$my-dark-color: color($my-dark-palette, 'surface'); - -$dark-button-theme: flat-button-theme( - $hover-foreground: color($my-dark-palette, 'secondary') -); - -$dark-grid-toolbar-theme: grid-toolbar-theme( - $background: $my-dark-color, - $title-text-color: color($my-dark-palette, 'secondary'), - $dropdown-background: $my-dark-color, -); - -$dark-column-actions-theme: column-actions-theme( - $title-color: color($my-dark-palette, 'secondary'), - $background: color($my-dark-palette, 'surface') +$grid-toolbar-theme: grid-toolbar-theme( + $background: #170237, + $border-color: $accent, + $title-text-color: #f6d8d8, + $item-hover-background: rgb(246 216 216 / 0.3), ); -$dark-checkbox-theme: checkbox-theme( - $tick-color: $my-dark-color, -); - -igx-grid { - @include palette($my-dark-palette); - @include tokens($dark-grid-toolbar-theme); - @include tokens($dark-column-actions-theme); - @include tokens($dark-checkbox-theme); - @include tokens($dark-button-theme); -} - -:host { - ::ng-deep { - .igx-grid-toolbar__actions { - .igx-button--outlined { - margin-left: 0.5rem; - border: none; - } +:host ::ng-deep { + igx-grid { + @include tokens($grid-theme); } - } -} - + + igx-grid-toolbar { + @include tokens($grid-toolbar-theme); + } +} \ No newline at end of file From 6105310c12825ca7eacd40690d494197e71ffc71 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 18 Jun 2026 16:29:46 +0300 Subject: [PATCH 14/14] deps: update to latest igniteui-angular version --- package-lock.json | 16 ++++++++-------- package.json | 6 +++--- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 711cf25f1..78d8725d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,7 +36,7 @@ "file-saver": "^2.0.2", "fuse.js": "^7.1.0", "hammerjs": "^2.0.8", - "igniteui-angular": "^22.0.0-beta.3", + "igniteui-angular": "^22.0.0-beta.4", "igniteui-angular-charts": "^22.0.0-alpha.0", "igniteui-angular-core": "^22.0.0-alpha.0", "igniteui-angular-extras": "^22.0.0-beta.2", @@ -10627,15 +10627,15 @@ "license": "BSD-3-Clause" }, "node_modules/igniteui-angular": { - "version": "22.0.0-beta.3", - "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-22.0.0-beta.3.tgz", - "integrity": "sha512-IzrvUdgNdn9ZCnLqB9vbk84MmGAS1sHm0RWonrPGjbcEOY2pFMkJrnvIAKMEZj/JsXIy7x+S9S3srYi39FIVbA==", + "version": "22.0.0-beta.4", + "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-22.0.0-beta.4.tgz", + "integrity": "sha512-kMpCePvE2GI9yzZ8hpvEUfrM06szbPKS3dbsOJYJrcLvkEgqgIsM4xBEgVb0rvSNZZ4+x9VlN0VxZuVplXRdSw==", "license": "SEE LICENSE IN LICENSE", "dependencies": { "@igniteui/material-icons-extended": "^3.1.0", "fflate": "^0.8.2", "igniteui-i18n-core": "^1.0.5", - "igniteui-theming": "^27.2.0", + "igniteui-theming": "^27.3.0", "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.2.1", "lodash-es": "^4.17.21", @@ -10822,9 +10822,9 @@ "license": "MIT" }, "node_modules/igniteui-theming": { - "version": "27.2.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-27.2.0.tgz", - "integrity": "sha512-XGI8MIP2x2RO6yuiAkGHJHbocixPPGoAUQyFOxMgNWWqqGtEEM5OYAkzzKBNjJKWgbrmIMWTXtlIzd8yPV5qjQ==", + "version": "27.3.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-27.3.0.tgz", + "integrity": "sha512-9xpPZkMUBSBzA1KzBoXurx61RoaUKW7p/H6CWks+Nh8SehsvAj2j4DSQlT0IR6bb41kRICYVNuyTqMicqLmaLA==", "license": "MIT", "dependencies": { "@modelcontextprotocol/sdk": "^1.28.0", diff --git a/package.json b/package.json index eeae5addf..5f06a3d7a 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "file-saver": "^2.0.2", "fuse.js": "^7.1.0", "hammerjs": "^2.0.8", - "igniteui-angular": "^22.0.0-beta.3", + "igniteui-angular": "^22.0.0-beta.4", "igniteui-angular-charts": "^22.0.0-alpha.0", "igniteui-angular-core": "^22.0.0-alpha.0", "igniteui-angular-extras": "^22.0.0-beta.2", @@ -113,8 +113,8 @@ "@angular/compiler": "^22.0.0" }, "igniteui-angular-extras": { - "igniteui-angular": "^22.0.0-beta.3", - "@infragistics/igniteui-angular": "^22.0.0-beta.3", + "igniteui-angular": "^22.0.0-beta.4", + "@infragistics/igniteui-angular": "^22.0.0-beta.4", "igniteui-angular-core": "^22.0.0-alpha.0", "igniteui-angular-charts": "^22.0.0-alpha.0", "@angular/core": "^22.0.0",