Light theme inconsistencies in Grid with scoped style

[viktorkombov]

Description

In the light theme, there are several visual inconsistencies in the Grid between an app using scoped styles and an older version of igniteui-angular.

The following differences are visible:

• The Expand/Collapse All icon uses a different color.
• A right border is visible in the Grid selection cells, while this border is not present in the older version.
• The right border of the Group By Expand/Collapse column uses a different color.

Framework

Angular

Angular Version

22

Ignite UI for Angular Version

22.1.0-beta.4

Component / Area

Grid

Browser

Chrome

Operating System

Windows

Steps to Reproduce

1. Use the chore: apply migrations and improve dialog drag sample igniteui-angular-samples#4004 branch in the igniteui-angular-samples repository, or any branch that uses an igniteui-angular version higher than 22.1.0-beta.4.
2. Run the app-lob samples: npm run start:app-lob
3. Open the Grid Finance Partial Demo sample.
4. Compare it with the same sample currently available in production.

Actual Result

Several Grid elements have different styling compared to the older version:

• The Expand/Collapse All icon has a different color.
• A right border is visible in the Grid selection cells.
• The right border of the Group By Expand/Collapse column has a different color.

Expected Result

The Grid styling in the scoped-styles-based app should be consistent with the older igniteui-angular version used in production.

The affected icons and borders should use the same colors and styling as in the production sample.

Reproduction URL

N/A

Attachments

[simeonoff]

@viktorkombov I will take a look, just bear in mind, however, that there are intentional changes made to the design of the grid. Specifically the things you're pointing out in the screenshot.