feat(grid): update grid styles and theme builder sample (scoped-styles)

projects/igniteui-angular/core/src/core/styles/components/grid-summary/_grid-summary-theme.scss

@@ -44,7 +44,7 @@
         outline-style: none;
 
         @if $variant == 'indigo' {
-            border-top: rem(1px) solid var-get($theme, 'border-color');
+            border-top: var-get($theme, 'border-width') var-get($theme, 'border-style') var-get($theme, 'border-color');
         }
     }
 

projects/igniteui-angular/core/src/core/styles/themes/_standalone.scss

@@ -2,6 +2,7 @@
 @use 'sass:map';
 @use 'igniteui-theming/sass/bem' as *;
 @use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas' as schemas;
 @forward 'igniteui-theming/sass/themes';
 @forward 'igniteui-theming/sass/bem';
 
@@ -98,3 +99,16 @@
 
     @return ($map-1, $map-2);
 }
+
+/// All theme/variant/schema combinations used by derived component styles.
+/// @access private
+$derived-schemas: (
+    ('material', 'light', schemas.$light-material-schema),
+    ('material', 'dark', schemas.$dark-material-schema),
+    ('bootstrap', 'light', schemas.$light-bootstrap-schema),
+    ('bootstrap', 'dark', schemas.$dark-bootstrap-schema),
+    ('fluent', 'light', schemas.$light-fluent-schema),
+    ('fluent', 'dark', schemas.$dark-fluent-schema),
+    ('indigo', 'light', schemas.$light-indigo-schema),
+    ('indigo', 'dark', schemas.$dark-indigo-schema),
+);

projects/igniteui-angular/grids/core/src/column-actions/column-actions.component.scss

@@ -2,3 +2,4 @@
 @use 'themes/shared';
 @use 'themes/light';
 @use 'themes/dark';
+@use 'themes/derived';

projects/igniteui-angular/grids/core/src/column-actions/themes/_base.scss

@@ -12,7 +12,7 @@ $_theme: $material;
     @include b(igx-column-actions) {
         display: flex;
         flex-flow: column nowrap;
-        background: var-get($_theme, 'background-color');
+        background: var-get($_theme, 'background');
         box-shadow: var(--ig-elevation-8);
         width: 100%;
         flex: 1 1 auto;

projects/igniteui-angular/grids/core/src/column-actions/themes/_derived.scss

@@ -0,0 +1,81 @@
+@use 'sass:map';
+@use 'igniteui-theming/sass/themes' as *;
+@use 'styles/themes/standalone' as *;
+
+/// Applies all sub-component token overrides used by the column-actions component.
+/// @access private
+
+@each $theme-name, $variant-name, $schema in $derived-schemas {
+    @include layer(derived) {
+        @scope ([data-ig-theme='#{$theme-name}'][data-ig-theme-variant='#{$variant-name}']) {
+            :where(igx-column-actions) {
+                --_column-actions-background: var(--background, var(--ig-column-actions-background));
+                --_column-actions-foreground: var(--foreground, var(--ig-column-actions-foreground));
+                --_column-actions-accent-color: var(--accent-color, var(--ig-column-actions-accent-color));
+
+                @include tokens(
+                    checkbox-theme(
+                        $schema: $schema,
+                        $empty-color: color-mix(in srgb, var(--_column-actions-foreground) 80%, var(--_column-actions-background)),
+                        $empty-fill-color: var(--_column-actions-background),
+                        $tick-color-hover: color-mix(in srgb, var(--_column-actions-foreground) 40%, var(--_column-actions-background)),
+                        $fill-color: var(--_column-actions-accent-color),
+                        $label-color: var(--_column-actions-foreground),
+                        $disabled-color: color-mix(in srgb, var(--_column-actions-foreground) 50%, var(--_column-actions-background)),
+                    )
+                );
+
+                @include tokens(
+                    drop-down-theme(
+                        $schema: $schema,
+                        $background-color: var(--_column-actions-background),
+                        $item-text-color: var(--_column-actions-foreground),
+                        $border-color: color-mix(in srgb, var(--_column-actions-foreground) 12%, var(--_column-actions-background)),
+                        $hover-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 8%, var(--_column-actions-background)),
+                        $focused-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 12%, var(--_column-actions-background)),
+                        $selected-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 12%, var(--_column-actions-background)),
+                        $selected-hover-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 16%, var(--_column-actions-background)),
+                        $selected-focus-item-background: color-mix(in srgb, var(--_column-actions-accent-color) 24%, var(--_column-actions-background)),
+                    )
+                );
+
+                @include tokens(
+                    flat-button-theme(
+                        $schema: $schema,
+                        $foreground: var(--_column-actions-accent-color),
+                        $disabled-background: transparent,
+                        $disabled-foreground: color-mix(in srgb, var(--_column-actions-accent-color) 50%, var(--_column-actions-background)),
+                    )
+                );
+
+                @include tokens(
+                    input-group-theme(
+                        $schema: $schema,
+                        $idle-bottom-line-color: var(--_column-actions-accent-color),
+                        $border-color: var(--_column-actions-accent-color),
+                        $idle-text-color: var(--_column-actions-foreground),
+                        $placeholder-color: color-mix(in srgb, var(--_column-actions-foreground) 80%, var(--_column-actions-background)),
+                    )
+                );
+
+                $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(--_column-actions-foreground) 50%, var(--_column-actions-background));
+                --_scrollbar-track-border-color: color-mix(in srgb, var(--_column-actions-foreground) 16%, var(--_column-actions-background));
+
+                @include tokens(
+                    scrollbar-theme(
+                        $schema: $schema,
+                        $sb-track-bg-color: var(--_column-actions-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'
+                );
+            }
+        }
+    }
+}

projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-filtering.component.scss

@@ -2,3 +2,4 @@
 @use 'themes/shared';
 @use 'themes/light';
 @use 'themes/dark';
+@use 'themes/derived';