igniteui-angular 21.2.0-rc.0 → 21.2.0-rc.2

package/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -40,7 +40,7 @@
         flex-grow: 1;
 
         @if $variant == 'indigo' {
-            box-shadow: elevation(if($theme-variant == 'light', 3, 2)), 0 0 0 rem(1px) color(null, 'gray', if($theme-variant == 'light', 400, 100));
+            box-shadow: elevation(if($theme-variant == 'light', 3, 2)), 0 0 0 rem(1px) var-get($theme, 'excel-filtering-border-color');
 
             // TODO: The border-radius should not be hardcoded.
             border-radius: border-radius(rem(4px));
@@ -102,13 +102,13 @@
         opacity: 1;
 
         igx-icon {
-            color: if($variant == 'indigo', color($color: 'primary', $variant: 500), color($color: 'secondary'));
+            color: var-get($theme, 'sorted-header-icon-color');
         }
 
         @if $variant == 'indigo' {
             &:hover {
                 igx-icon {
-                    color: color($color: 'primary', $variant: 400);
+                    color: var-get($theme, 'sortable-header-icon-hover-color');
                 }
             }
         }
@@ -126,65 +126,8 @@
 
         @if $variant != 'indigo' {
             background: var-get($theme, 'filtering-row-background');
-
-            %igx-group-display {
-                --elevation: none;
-                --item-background: #{var-get($theme, 'filtering-row-background')};
-                --item-hover-background: #{color($color: 'gray', $variant: 100)};
-                --item-selected-background: #{color($color: 'gray', $variant: 100)};
-                --item-text-color: #{color($color: 'gray', $variant: 700)};
-                --item-icon-color: #{color($color: 'gray', $variant: 700)};
-                --item-hover-text-color: #{color($color: 'gray', $variant: 800)};
-                --item-hover-icon-color: #{color($color: 'gray', $variant: 800)};
-                --item-selected-text-color: #{if(
-                $variant == 'indigo',
-                contrast-color($color: 'surface'),
-                color($color: 'secondary', $variant: 500)
-            )};
-                --item-selected-icon-color: #{if(
-                $variant == 'indigo',
-                contrast-color($color: 'surface'),
-                color($color: 'secondary', $variant: 500)
-            )};
-                --item-selected-hover-icon-color: #{if(
-                $variant == 'fluent',
-                color($color: 'secondary', $variant: 500),
-                contrast-color($color: 'gray', $variant: 50)
-            )};
-                --item-border-color: transparent;
-                --item-hover-border-color: transparent;
-                --item-focused-border-color: #{if(
-                $variant == 'fluent',
-                color($color: 'gray', $variant: 700),
-                transparent
-            )};
-                --item-selected-border-color: transparent;
-                --item-selected-hover-border-color: transparent;
-                --item-disabled-border: transparent;
-                --disabled-selected-border-color: transparent;
-            }
         } @else {
-            @if $theme-variant == 'light' {
-                background: contrast-color($color: 'gray', $variant: 900);
-            } @else {
-                background: color($color: 'gray', $variant: 50);
-            }
-
-            %igx-group-display {
-                --item-background: transparent;
-                @if $theme-variant == 'dark' {
-                    --item-text-color: #{contrast-color($color: 'surface', $variant: 500)};
-                }
-                --border-color: transparent;
-                --item-border-color: transparent;
-                --item-focused-border-color: transparent;
-                --item-hover-border-color: transparent;
-                --item-selected-border-color: transparent;
-                --item-selected-hover-border-color: transparent;
-                --item-disabled-border: transparent;
-                --disabled-selected-border-color: transparent;
-                --elevation: none;
-            }
+            background: var-get($theme, 'filtering-dialog-background');
 
             %igx-group-item {
                 &:not(:nth-child(1)) {
@@ -348,11 +291,7 @@
 
     %grid-excel-actions--selected {
         igx-icon {
-            color: if(
-                $variant == 'indigo',
-                color($color: 'primary', $variant: 200),
-                color($color: 'secondary')
-            );
+            color: var-get($theme, 'excel-filtering-actions-selected-icon-color');
         }
     }
 
@@ -401,25 +340,10 @@
         &:hover,
         &:focus {
             color: var-get($theme, 'excel-filtering-actions-hover-foreground');
+            background: var-get($theme, 'excel-filtering-actions-hover-background');
 
-            @if $variant == 'indigo' {
-                @if $theme-variant == 'light' {
-                    background: color($color: 'gray', $variant: 200);
-                } @else {
-                    background: contrast-color($color: 'gray', $variant: 50, $opacity: .1);
-                }
-
-                igx-icon {
-                    /* stylelint-disable max-nesting-depth */
-                    @if $theme-variant == 'light' {
-                        color: color($color: 'gray', $variant: 700);
-                    } @else {
-                        color: contrast-color($color: 'gray', $variant: 50, $opacity: .8);
-                    }
-                    /* stylelint-enable max-nesting-depth */
-                }
-            } @else {
-                background: color($color: 'gray', $variant: 100);
+            igx-icon {
+                color: var-get($theme, 'excel-filtering-actions-hover-icon-color');
             }
         }
 
@@ -427,11 +351,7 @@
             igx-icon {
                 --component-size: 2;
 
-                @if $theme-variant == 'light' {
-                    color: color($color: 'gray', $variant: 600);
-                } @else {
-                    color: contrast-color($color: 'gray', $variant: 50, $opacity: .6);
-                }
+                color: var-get($theme, 'excel-filtering-actions-icon-color');
             }
         }
 
@@ -449,7 +369,6 @@
     }
 
     %grid-excel-actions__action--active {
-        background: color($color: 'gray', $variant: 100);
         color: var-get($theme, 'excel-filtering-actions-hover-foreground');
     }
 
@@ -468,6 +387,7 @@
         display: grid;
         place-items: center;
         height: 100%;
+        color: var-get($theme, 'excel-filtering-subheader-foreground');
     }
 
     %grid-excel-main {
@@ -489,7 +409,7 @@
             overflow: hidden;
 
             @if $variant == 'indigo' {
-                --background: #{color($color: 'surface', $variant: 500)};
+                --background: var(--_grid-background, #{color($color: 'surface', $variant: 500)});
 
                 margin-inline: calc(sizable(rem(-16px)) * -1);
 
@@ -510,19 +430,8 @@
             }
 
             border: 0;
-
-            @if $bootstrap-theme {
-                border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
-                border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
-            } @else {
-                border-top: rem(1px) dashed color($color: 'gray', $variant: 300);
-                border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300);
-            }
-
-            @if $variant == 'indigo' and $theme-variant == 'dark' {
-                border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
-                border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
-            }
+            border-top: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
+            border-bottom: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
         }
 
         %igx-excel-filter__tree {
@@ -531,19 +440,8 @@
             margin-inline: calc(pad-inline(rem(-4px), rem(-8px), rem(-16px)) * -1);
             margin-block: 0;
             flex: 1;
-
-            @if $bootstrap-theme {
-                border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
-                border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
-            } @else {
-                border-top: rem(1px) dashed color($color: 'gray', $variant: 300);
-                border-bottom: rem(1px) dashed color($color: 'gray', $variant: 300);
-            }
-
-            @if $variant == 'indigo' and $theme-variant == 'dark' {
-                border-top: rem(1px) dashed color($color: 'gray', $variant: 100);
-                border-bottom: rem(1px) dashed color($color: 'gray', $variant: 100);
-            }
+            border-top: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
+            border-bottom: rem(1px) dashed var-get($theme, 'excel-filtering-border-color');
 
             igx-icon {
                 width: var(--ig-icon-size, #{$tree-node-expander-size});
@@ -721,7 +619,7 @@
 
         @if $bootstrap-theme {
             padding-block-start: pad-block(rem(16px));
-            border-top: rem(1px) solid color($color: 'gray', $variant: 300);
+            border-top: rem(1px) solid color-mix(in srgb, var(--_grid-foreground, var(--ig-gray-300)) 20%, var(--_grid-background, var(--ig-gray-300)));
         }
 
         %grid-excel-filter__apply,

package/lib/core/styles/components/grid/_grid-theme-builder.scss

@@ -0,0 +1,391 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use 'igniteui-theming/sass/themes/schemas' as *;
+
+/// Applies all sub-component token overrides used by the grid.
+/// @access private
+/// @param {Map} $theme - The grid theme map.
+@mixin grid-theme-builder($theme) {
+    $variant: map.get($theme, '_meta', 'theme');
+    $theme-variant: map.get($theme, '_meta', 'variant');
+
+    $schema: map.get(
+        (
+            'light-material': $light-material-schema,
+            'light-bootstrap': $light-bootstrap-schema,
+            'light-fluent': $light-fluent-schema,
+            'light-indigo': $light-indigo-schema,
+            'dark-material': $dark-material-schema,
+            'dark-bootstrap': $dark-bootstrap-schema,
+            'dark-fluent': $dark-fluent-schema,
+            'dark-indigo': $dark-indigo-schema,
+        ),
+        '#{$theme-variant}-#{$variant}'
+    );
+
+    igx-grid,
+    igc-grid,
+    igx-tree-grid,
+    igc-tree-grid,
+    igx-hierarchical-grid,
+    igc-hierarchical-grid,
+    igx-pivot-grid,
+    igc-pivot-grid,
+    igx-grid-lite,
+    igc-grid-lite {
+        --_grid-background: var(--background, var(--ig-grid-background));
+        --_grid-foreground: var(--foreground, var(--ig-grid-foreground));
+        --_grid-accent-color: var(--accent-color, var(--ig-grid-accent-color));
+
+        @include tokens(
+            action-strip-theme(
+                $schema: $schema,
+                $background: color-mix(in srgb, var(--_grid-accent-color) 12%, transparent),
+                $actions-background: color-mix(in srgb, var(--_grid-accent-color) 12%, var(--_grid-background)),
+                $icon-color: var(--_grid-accent-color),
+            )
+        );
+
+        @include tokens(
+            badge-theme(
+                $schema: $schema,
+                $background-color: var(--_grid-accent-color),
+            )
+        );
+
+        @include tokens(
+            banner-theme(
+                $schema: $schema,
+                $banner-background: var(--_grid-background),
+                $banner-message-color: var(--_grid-foreground),
+                $banner-illustration-color: var(--_grid-foreground),
+                $banner-border-color: color-mix(in srgb, var(--_grid-foreground) 20%, var(--_grid-background))
+            )
+        );
+
+        .igx-excel-filter__menu .igx-button-group,
+        .igx-button-group {
+            --ig-btn-group-selected-bg: color-mix(in srgb, var(--_grid-accent-color) 8%, var(--_grid-background));
+
+            @include tokens(
+                button-group-theme(
+                    $schema: $schema,
+                    $item-background: var(--_grid-background, #{var-get($theme, if($variant == 'indigo', 'filtering-dialog-background', 'filtering-row-background'))}),
+                    $item-border-color: transparent,
+                    $item-text-color: var(--_grid-foreground, #{color($color: 'gray', $variant: 700)}),
+                    $item-selected-background: if(
+                        $variant == 'indigo',
+                        var(--ig-btn-group-selected-bg, var(--ig-primary-500)),
+                        var(--ig-btn-group-selected-bg, #{color($color: 'gray', $variant: 100)}),
+                    ),
+                    $item-hover-background: var(--item-selected-background),
+                    $item-selected-text-color: var(--_grid-accent-color, #{if(
+                        $variant == 'indigo',
+                        contrast-color($color: 'primary'),
+                        if($variant == 'material',
+                            color($color: 'secondary', $variant: 500),
+                            color($color: 'primary', $variant: 500)
+                        )
+                    )}),
+                    $item-selected-hover-text-color: var(--_grid-accent-color, #{if(
+                        $variant == 'indigo',
+                        contrast-color($color: 'primary'),
+                        if($variant == 'material',
+                            color($color: 'secondary', $variant: 500),
+                            color($color: 'primary', $variant: 500)
+                        )
+                    )}),
+                    $item-selected-hover-background: dynamic-shade(var(--item-hover-background), $offset: 3),
+                    $shadow: none
+                ),
+                $mode: 'scoped'
+            );
+        }
+
+        @include tokens(
+            contained-button-theme(
+                $schema: $schema,
+                $background: var(--_grid-accent-color),
+                $disabled-background: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
+                $disabled-foreground: color-mix(in srgb, var(--_grid-foreground) 50%, var(--_grid-background)),
+            )
+        );
+
+        @include tokens(
+            flat-button-theme(
+                $schema: $schema,
+                $foreground: var(--_grid-accent-color),
+                $disabled-background: transparent,
+                $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
+            )
+        );
+
+        @include tokens(
+            outlined-button-theme(
+                $schema: $schema,
+                $foreground: var(--_grid-accent-color),
+                $disabled-background: transparent,
+                $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
+                $disabled-border-color: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
+            )
+        );
+
+        @include tokens(
+            calendar-theme(
+                $header-background: var(--_grid-accent-color),
+                $content-background: var(--_grid-background),
+                $content-foreground: var(--_grid-foreground),
+            )
+        );
+
+        @include tokens(
+            checkbox-theme(
+                $schema: $schema,
+                $empty-color: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background)),
+                $empty-fill-color: var(--_grid-background),
+                $tick-color-hover: color-mix(in srgb, var(--_grid-foreground) 40%, var(--_grid-background)),
+                $fill-color: var(--_grid-accent-color),
+                $label-color: var(--_grid-foreground),
+                $disabled-color: color-mix(in srgb, var(--_grid-foreground) 50%, var(--_grid-background)),
+            )
+        );
+
+        @include tokens(
+            chip-theme(
+                $schema: $schema,
+                $background: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
+                $text-color: var(--_grid-foreground),
+                $ghost-background: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
+                $ghost-text-color: var(--_grid-foreground),
+                $disabled-background: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
+                $disabled-text-color: color-mix(in srgb, var(--_grid-foreground) 50%, var(--_grid-background)),
+                $disabled-border-color: color-mix(in srgb, var(--_grid-foreground) 24%, var(--_grid-background)),
+            )
+        );
+
+        @include tokens(
+            column-actions-theme(
+                $schema: $schema,
+                $background-color: var(--_grid-background),
+                $title-color: var(--_grid-accent-color)
+            )
+        );
+
+        @include tokens(
+            drop-down-theme(
+                $schema: $schema,
+                $background-color: var(--_grid-background),
+                $item-text-color: var(--_grid-foreground),
+                $border-color: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
+                $hover-item-background: color-mix(in srgb, var(--_grid-accent-color) 8%, var(--_grid-background)),
+                $focused-item-background: color-mix(in srgb, var(--_grid-accent-color) 12%, var(--_grid-background)),
+                $selected-item-background: color-mix(in srgb, var(--_grid-accent-color) 12%, var(--_grid-background)),
+                $selected-hover-item-background: color-mix(in srgb, var(--_grid-accent-color) 16%, var(--_grid-background)),
+                $selected-focus-item-background: color-mix(in srgb, var(--_grid-accent-color) 24%, var(--_grid-background)),
+            )
+        );
+
+        @include tokens(
+            grid-summary-theme(
+                $schema: $schema,
+                $background-color: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
+                $border-color: color-mix(in srgb, var(--_grid-foreground) 20%, var(--_grid-background)),
+                $pinned-border-color: color-mix(in srgb, var(--_grid-foreground) 30%, var(--_grid-background)),
+                $label-color: var(--_grid-accent-color),
+                $result-color: var(--_grid-foreground)
+            )
+        );
+
+        @include tokens(
+            grid-toolbar-theme(
+                $schema: $schema,
+                $background-color: var(--_grid-background),
+                $title-text-color: var(--_grid-foreground),
+                $dropdown-background: var(--_grid-background),
+                $item-text-color: var(--_grid-foreground),
+                $item-hover-background: color-mix(in srgb, var(--_grid-accent-color) 8%, var(--_grid-background)),
+                $item-hover-text-color: var(--_grid-foreground),
+                $item-focus-background: color-mix(in srgb, var(--_grid-accent-color) 12%, var(--_grid-background)),
+                $item-focus-text-color: var(--_grid-foreground),
+                $border-color: color-mix(in srgb, var(--_grid-foreground) 20%, var(--_grid-background))
+            )
+        );
+
+        @include tokens(
+            highlight-theme(
+                $schema: $schema,
+                $resting-background: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background)),
+                $active-background: var(--_grid-accent-color)
+            )
+        );
+
+        @include tokens(
+            flat-icon-button-theme(
+                $schema: $schema,
+                $foreground: var(--_grid-accent-color),
+                $disabled-background: transparent,
+                $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
+            )
+        );
+
+        @include tokens(
+            outlined-icon-button-theme(
+                $schema: $schema,
+                $foreground: var(--_grid-accent-color),
+                $disabled-background: transparent,
+                $disabled-foreground: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
+                $disabled-border-color: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background))
+            )
+        );
+
+        @if $variant == 'material' {
+            @include tokens(
+                input-group-theme(
+                    $schema: $schema,
+                    $box-background: var(--_grid-background),
+                    $search-background: color-mix(in srgb, var(--_grid-foreground) 6%, var(--_grid-background)),
+                    $idle-bottom-line-color: var(--_grid-accent-color),
+                    $idle-secondary-color: var(--_grid-foreground),
+                    $focused-secondary-color: var(--_grid-accent-color),
+                    $border-color: var(--_grid-accent-color),
+                    $idle-text-color: var(--_grid-foreground),
+                    $placeholder-color: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background)),
+                )
+            );
+        } @else if $variant == 'indigo' {
+            @include tokens(
+                input-group-theme(
+                    $schema: $schema,
+                    $idle-bottom-line-color: var(--_grid-accent-color),
+                    $idle-text-color: var(--_grid-foreground),
+                    $placeholder-color: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background)),
+                )
+            );
+        } @else {
+            @include tokens(
+                input-group-theme(
+                    $schema: $schema,
+                    $border-color: var(--_grid-accent-color),
+                    $idle-text-color: var(--_grid-foreground),
+                    $placeholder-color: color-mix(in srgb, var(--_grid-foreground) 80%, var(--_grid-background)),
+                    $input-prefix-background: var(--_grid-accent-color),
+                    $border-disabled-background: transparent,
+                    $disabled-border-color: color-mix(in srgb, var(--_grid-accent-color) 50%, transparent),
+                )
+            );
+        }
+
+        @include tokens(
+            list-theme(
+                $schema: $schema,
+                $background: var(--_grid-background),
+                $item-background-hover: color-mix(in srgb, var(--_grid-accent-color) 8%, var(--_grid-background))
+            )
+        );
+
+        @include tokens(
+            paginator-theme(
+                $schema: $schema,
+                $background-color: var(--_grid-background),
+                $text-color: var(--_grid-foreground),
+                $border-color: color-mix(in srgb, var(--_grid-foreground) 16%, var(--_grid-background)),
+            )
+        );
+
+        @include tokens(
+            progress-circular-theme(
+                $schema: $schema,
+                $track-color: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
+                $fill-color-default: var(--_grid-accent-color),
+                $text-color: var(--_grid-foreground)
+            )
+        );
+
+        @include tokens(
+            progress-linear-theme(
+                $schema: $schema,
+                $track-color: color-mix(in srgb, var(--_grid-foreground) 12%, var(--_grid-background)),
+                $fill-color-default: var(--_grid-accent-color),
+                $text-color: var(--_grid-foreground)
+            ),
+        );
+
+        @if $variant == 'bootstrap' {
+            @include tokens(
+                query-builder-theme(
+                    $schema: $schema,
+                    $background: var(--_grid-background),
+                    $header-foreground: var(--_grid-foreground),
+                    $header-border: color-mix(in srgb, var(--_grid-foreground) 20%, var(--_grid-background)),
+                )
+            );
+        } @else {
+            @include tokens(
+                query-builder-theme(
+                    $schema: $schema,
+                    $background: var(--_grid-background),
+                    $header-foreground: var(--_grid-foreground),
+                )
+            );
+        }
+
+        $scrollbar-theme: digest-schema(map.get($schema, 'scrollbar'));
+        $scrollbar-bg-color: map.get($scrollbar-theme, 'sb-track-bg-color');
+        $scrollbar-thumb-color: map.get($scrollbar-theme, 'sb-thumb-bg-color');
+        $scrollbar-track-border-color: map.get($scrollbar-theme, 'sb-track-border-color');
+
+        --_scrollbar-thumb-color: color-mix(in srgb, var(--_grid-foreground) 50%, var(--_grid-background));
+        --_scrollbar-track-border-color: color-mix(in srgb, var(--_grid-foreground) 16%, var(--_grid-background));
+
+        @include tokens(
+            scrollbar-theme(
+                $schema: $schema,
+                $sb-track-bg-color: var(--_grid-background, $scrollbar-bg-color),
+                $sb-thumb-bg-color: var(--_scrollbar-thumb-color, $scrollbar-thumb-color),
+                $sb-track-border-color: var(--_scrollbar-track-border-color, $scrollbar-track-border-color),
+            ),
+            $mode: 'scoped'
+        );
+
+        @if $variant == 'indigo' {
+            @include tokens(
+                select-theme(
+                    $schema: $schema,
+                    $toggle-button-foreground: var(--_grid-accent-color),
+                    $toggle-button-foreground-disabled: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
+                )
+            );
+        } @else {
+            @include tokens(
+                select-theme(
+                    $schema: $schema,
+                    $toggle-button-background: var(--_grid-accent-color),
+                )
+            );
+        }
+
+        @include tokens(
+            tooltip-theme(
+                $schema: $schema,
+                $background: hsl(from var(--_grid-foreground) h s l / 80%)
+            ),
+        );
+
+        @include tokens(
+            tree-theme(
+                $schema: $schema,
+                $background: var(--_grid-background)
+            ),
+        );
+
+        @include tokens(
+            watermark-theme(
+                $schema: $schema,
+                $base-color: color-mix(in srgb, var(--_grid-accent-color) 50%, var(--_grid-background)),
+                $color: var(--_grid-foreground),
+                $border-color: color-mix(in srgb, var(--_grid-accent-color) 16%, var(--_grid-background))
+            )
+        );
+
+    }
+}