feat(grid): derive theme tokens for internal components#17049
Merged
feat(grid): derive theme tokens for internal components#17049
Conversation
…heme to grid theme builder
Contributor
There was a problem hiding this comment.
Pull request overview
Adds an initial “Grid Theme Builder” demo and expands the grid’s theming integration by introducing scoped token application for many related components within grid contexts.
Changes:
- Added a new
GridThemeBuilderSampleComponent+ route/nav entry to demo runtime CSS-variable theming for the grid. - Updated demo/sample styles and grid search UI styling to align with tokenized theming variables.
- Extended grid SCSS theme to apply additional component tokens (button, chip, input-group, select, etc.) under grid selectors, and refined excel filtering theme variables.
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/_demo-theme.scss | Applies grid-theme tokens at :root level for the demo theme. |
| src/app/hierarchical-grid/hierarchical-grid.sample.scss | Updates hierarchical grid sample styling to use theming utilities. |
| src/app/grid-theme-builder/grid-theme-builder.sample.ts | Introduces the new grid theme builder sample component (signals + CSS var reading). |
| src/app/grid-theme-builder/grid-theme-builder.sample.scss | Adds scoped grid-theme tokens and layout styles for the theme builder sample. |
| src/app/grid-theme-builder/grid-theme-builder.sample.html | Adds UI for picking colors and binding them to grid CSS custom properties. |
| src/app/grid-search-box/grid-search-box.component.ts | Removes ripple directive import after template changes. |
| src/app/grid-search-box/grid-search-box.component.html | Adjusts chip colors and removes ripple usage on icons. |
| src/app/grid-percentage-columns/grid-percantge-widths.sample.scss | Switches hardcoded border color to a grid CSS variable. |
| src/app/app.routes.ts | Adds route for the grid theme builder sample. |
| src/app/app.component.ts | Adds navigation entry for the grid theme builder sample. |
| projects/igniteui-angular/core/src/core/styles/components/select/_select-theme.scss | Tweaks select toggle background in focused material non-box state. |
| projects/igniteui-angular/core/src/core/styles/components/input/_input-group-theme.scss | Updates filled text color token mapping. |
| projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss | Adds schema selection and applies many related component tokens scoped under grid elements. |
| projects/igniteui-angular/core/src/core/styles/components/grid/_excel-filtering-theme.scss | Replaces hardcoded colors with theme variables / grid-aware values in excel filtering styles. |
| projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss | Adjusts selected/hover icon coloring behavior for button group items. |
| projects/igniteui-angular-elements/src/index.html | Cleans up demo CSS overrides and adds @vite-ignore to a dynamic import. |
adrianptrv
added
✅ status: verified
adrianptrv
added
💥 status: in-test
adrianptrv
added
✅ status: verified
simeonoff
changed the title
simeonoff
added
❌ status: rejected
Collaborator
|
@didimmova The state of the elements build is not satisfactory. All custom styles overrides no longer work compared to master. |
simeonoff
added
✅ status: verified
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Test with this theming PR