refactor(scrollbar): use standard scrollbar-color/width, re-declare p…

[simeonoff]

Description

Migrates scrollbar theming from the ::-webkit-scrollbar-* pseudo-elements to the standard scrollbar-color / scrollbar-width properties, and fixes the contextual theming that broke as a result.

The scrollbar-color and scrollbar-width substitute their var()s on the element that declares them, and descendants inherit the already-resolved value. The old webkit rules were descendant selectors, so each scroller's pseudo-element resolved the tokens against its own originating element.

Changes:

• scrollbar() now emits the properties alongside the tokens, and the four derived themes call it instead of bare tokens(..., $mode: 'scoped').
• scrollbar-width reads var(--sb-width, auto); it only accepts auto | thin | none, so the length-based sb-size token cannot drive it. .igx-filter-tree__section sets scrollbar-width: thin directly.
• Untracks the generated grid-base.styles.ts (already matched by .gitignore:53, but gitignore is inert for tracked files) and guards the 12 test scripts that compile lib TS with npm run build:styles:components.

Motivation / Context

Scrollbars did not adapt to derived themes — the grid's own background/foreground had no influence on its scrollbar colors. Investigation showed two independent faults: the inherited-resolved-value behaviour above, and the leaked & that dropped the rule.

Type of Change (check all that apply):

• Bug fix
• New functionality
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Refactoring (no functional changes)
• Documentation
• Demos
• CI/CD
• Tests
• Changelog
• Skills/Agents

Component(s) / Area(s) Affected:

Theming (scrollbar), Grid, Query Builder, Column Actions, Excel-Style Filtering, build/packaging scripts (scripts/sass.mjs, package.json)

How Has This Been Tested?

• Unit tests
• Manual testing
• Automated e2e tests

Verified against compiled output rather than in a browser:

• All five scopes emit valid selectors carrying both tokens and properties, with no stray &, in both light and dark theme files.

Test Configuration:

• Angular version: 22.1.1
• OS: macOS 26.6

Checklist:

• All relevant tags have been applied to this PR
• This PR includes unit tests covering all the new code
• This PR includes API docs for newly added methods/properties
• This PR includes feature/README.MD updates for the feature docs
• This PR includes general feature table updates in the root README.MD
• This PR includes CHANGELOG.MD updates for newly added functionality
• This PR contains breaking changes
• This PR includes ng update migrations for the breaking changes
• This PR includes behavioral changes and the feature specification has been updated with them
• Accessibility (ARIA, keyboard navigation, focus management) has been verified

Breaking changes

The standard properties expose only two colors and three width keywords. Of the 14 scrollbar-theme tokens, three still have effect — sb-thumb-bg-color, sb-track-bg-color, and sb-size only if remapped to thin/auto/none.

These become no-ops: sb-thumb-bg-color-hover, sb-track-bg-color-hover, sb-thumb-min-height, sb-thumb-border-color, sb-thumb-border-size, sb-thumb-border-radius, sb-track-border-color, sb-track-border-size, sb-corner-bg, sb-corner-border-color, sb-corner-border-size.

[Copilot]

Pull request overview

This PR updates Ignite UI for Angular’s Sass theming to style scrollbars via the standards-based scrollbar-color / scrollbar-width properties (instead of ::-webkit-scrollbar-*), and adjusts derived theme scoping so contextual/derived themes correctly affect scrollbar colors. It also removes a tracked generated grid styles artifact and updates test scripts to ensure component styles are generated before TS compilation.

Changes:

• Refactor scrollbar theming mixins to emit standard scrollbar properties alongside scoped tokens, and update derived themes (grid, query builder, column actions, excel-style filtering) to use the new mixin.
• Replace length-driven sb-size behavior with scrollbar-width keyword usage (e.g., setting scrollbar-width: thin where needed).
• Untrack the generated grid-base.styles.ts and guard multiple test scripts by running build:styles:components first; broaden Sass dist path rewriting in scripts/sass.mjs.

Reviewed changes

Copilot reviewed 9 out of 10 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
scripts/sass.mjs	Broadens cross-package derived-theme path rewriting to drop core/src/core/styles/ consistently.
projects/igniteui-angular/query-builder/src/query-builder/themes/_derived.scss	Switches derived scrollbar overrides to @include scrollbar(...) and imports the scrollbar mixin.
projects/igniteui-angular/query-builder/src/query-builder/themes/_base.scss	Replaces --sb-size usage with direct scrollbar-width: thin on a specific scroller.
projects/igniteui-angular/grids/themes/_derived.scss	Updates grid derived themes to use the new scrollbar mixin for contextual scrollbar colors.
projects/igniteui-angular/grids/grid/src/grid-base.styles.ts	Removes a previously tracked auto-generated styles artifact.
projects/igniteui-angular/grids/core/src/filtering/excel-style/themes/_derived.scss	Updates excel-style filtering derived theme to use the new scrollbar mixin.
projects/igniteui-angular/grids/core/src/column-actions/themes/_derived.scss	Updates column actions derived theme to use the new scrollbar mixin.
projects/igniteui-angular/core/src/core/styles/components/scrollbar/scrollbar-theme.scss	Refactors scrollbar theming to standard properties and centralizes property emission with token scoping.
projects/igniteui-angular/core/src/core/styles/components/scrollbar/scrollbar-component.scss	Removes the old %scrollbar-display extend hook from the component registry mixin.
package.json	Prepends npm run build:styles:components to multiple test scripts to ensure generated styles exist before TS builds/tests.

---

💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.