fix(calendar): fix material and indigo theme styles to match webC#16371
Merged
fix(calendar): fix material and indigo theme styles to match webC#16371
Conversation
…ines - Adjust date selection, hover, and focus styles. - Add support for range previews and various states specific to Fluent theme. - Refactor styles to accommodate Fluent theme-specific variants.
SisIvanova
requested changes
Nov 11, 2025
Collaborator
SisIvanova
left a comment
SisIvanova
left a comment
There was a problem hiding this comment.
All Themes (except Indigo)
- Week number border - missing in WC and present in Angular
All Themes (except Bootstrap)
- Range selection - hover special date - different colors in WC and Angular
Material Theme
- Disabled dates - missing border in WC and present in Angular
Bootstrap Theme
- Missing year/month selected box-shadow in Angular idle state
- Range selection - differences in special dates colors
- Dates in range selection border - missing in Angular and present in WC
Fluent Theme
- Range selection - start date border - different colors in WC and Angular
- Range selection - start date background discrepancy when the first date is special
- Range selection - hover special date - different colors in WC and Angular
Contributor
Fluent theme:
Indigo theme:
Angular: WC: 
Screen.Recording.2025-11-17.at.10.22.54.mov |
SisIvanova
requested changes
Nov 17, 2025
Collaborator
SisIvanova
left a comment
SisIvanova
left a comment
There was a problem hiding this comment.
Material Theme - date current special & disabled - different foreground in Angular and WC
SisIvanova
requested changes
Nov 18, 2025
Collaborator
SisIvanova
left a comment
SisIvanova
left a comment
There was a problem hiding this comment.
Bootstrap theme - range selection - special dates different colors on focus
Contributor
Fluent theme:
Screen.Recording.2025-11-18.at.18.21.16.movScreen.Recording.2025-11-18.at.18.20.09.mov
Indigo theme:
|
- Remove `$bootstrap-theme` variable and use `$variant` for conditionals. - Consolidate redundant styles and improve readability. - Enhance support for theme-specific behaviors across all variants.
- Implement new styles for current, special, selected, and range states. - Add support for hover, focus, and preview across combinations of states. - Update border radius and alignment
- Implement dynamic theme bindings and theme-specific classes for Material, Fluent, Bootstrap, and Indigo variants. - Introduce `theme` input property and handle theme overrides via DOM or token. - Update `AfterContentChecked` to adapt theme changes dynamically.
desig9stein
force-pushed
the
mpopov/refactoring/calendar
branch
3 times, most recently
from
2ebd9b7 to
f0932b9
Compare
Contributor
|
Focus + hover styles present in angular, no focus + hover styles present for wc in months/years view in both themes Fluent theme:
Indigo theme:
Fluent: Indigo Angular: Indigo WebComponents: |
SisIvanova
added
✅ status: verified
SisIvanova
approved these changes
Nov 27, 2025
didimmova
approved these changes
Nov 27, 2025
simeonoff
approved these changes
Nov 28, 2025
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
4 participants
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.
Closes IgniteUI/igniteui-webcomponents#1858
Required packages to test
theming: IgniteUI/igniteui-theming#489
web-components: IgniteUI/igniteui-webcomponents#1899
Additional information (check all that apply):
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)