refactor(grid-summary): remove redundant code

projects/igniteui-angular/migrations/migration-collection.json

@@ -226,6 +226,11 @@
             "version": "19.2.0",
             "description": "Updates Ignite UI for Angular from v19.1.0 to v19.2.0",
             "factory": "./update-19_2_0"
+        },
+        "migration-46": {
+            "version": "20.0.0",
+            "description": "Updates Ignite UI for Angular from v19.2.0 to v20.0.0",
+            "factory": "./update-20_0_0"
         }
     }
 }

projects/igniteui-angular/migrations/update-20_0_0/changes/theme-changes.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../common/schema/theme-changes.schema.json",
+  "changes": [
+    {
+      "name": "$focus-background-color",
+      "remove": true,
+      "owner": "grid-summary-theme",
+      "type": "property"
+    }
+  ]
+}

projects/igniteui-angular/migrations/update-20_0_0/index.spec.ts

@@ -0,0 +1,37 @@
+import * as path from 'path';
+
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { setupTestTree } from '../common/setup.spec';
+
+const version = '20.0.0';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+
+    beforeEach(() => {
+        appTree = setupTestTree();
+    });
+
+    const migrationName = 'migration-46';
+
+    it('should remove the $focus-background-color property from the grid summary theme', async () => {
+        const testFilePath = `/testSrc/appPrefix/component/test.component.scss`;
+
+        appTree.create(
+            testFilePath,
+            `$my-grid-theme: grid-summary-theme(
+                $label-color: white,
+                $focus-background-color: orange,
+            );`
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent(testFilePath)).toEqual(
+            `$my-grid-theme: grid-summary-theme(
+                $label-color: white,
+            );`
+        );
+    });
+});

projects/igniteui-angular/migrations/update-20_0_0/index.ts

@@ -0,0 +1,14 @@
+import type {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '20.0.0';
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+    context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+    const update = new UpdateChanges(__dirname, host, context);
+    update.applyChanges();
+};

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

@@ -12,7 +12,6 @@
 
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {Color} $background-color [null] - The summaries background color is inherited form igx-grid__tfoot
-/// @param {Color} $focus-background-color [null] - The background color when a summary item is on focus.
 /// @param {Color} $label-color [null] - The summaries label color.
 /// @param {Color} $result-color [null] - The summaries value/result color.
 /// @param {Color} $border-color [null] - The summaries border color.
@@ -32,7 +31,6 @@
     $schema: $light-material-schema,
 
     $background-color: null,
-    $focus-background-color: null,
     $label-color: null,
     $result-color: null,
     $border-color: null,
@@ -74,7 +72,6 @@
         name: $name,
         selector: $selector,
         background-color: $background-color,
-        focus-background-color: $focus-background-color,
         label-color: $label-color,
         result-color: $result-color,
         border-color: $border-color,
@@ -131,15 +128,6 @@
         overflow: hidden;
         outline-style: none;
 
-        &::after {
-            position: absolute;
-            inset: 0;
-        }
-
-        &:focus::after {
-            background: var-get($theme, 'focus-background-color');
-        }
-
         @if $variant == 'indigo' {
             border-top: rem(1px) solid var-get($theme, 'border-color');
         }