feat(themes): add forced-colors media styles - #2347
Merged
Merged
Conversation
simeonoff
changed the title
simeonoff
changed the title
simeonoff
changed the title
forced-colors media styles
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
Several newly added forced-colors rules have correctness/consistency issues (selector robustness and lint-prone formatting/unit usage) that should be fixed before merging.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
Adds @media (forced-colors: active) overrides across multiple components to improve High Contrast / Forced Colors support, aligning the theme layer with the accessibility requirements from #2248.
Changes:
- Introduces forced-colors borders/outlines and state styling (hover/focus/active/disabled/selected) across many component theme SCSS files.
- Adds new forced-colors styling scaffolding for
resize-containerand shared Bootstrap styles for linear progress, and wires the latter into the theme aggregator.
File summaries
| File | Description |
|---|---|
| src/components/validation-container/themes/validator.base.scss | Add forced-colors text/icon color overrides for validation UI. |
| src/components/tree/themes/item.base.scss | Add forced-colors outline styling for active/focused tree items. |
| src/components/tooltip/themes/tooltip.base.scss | Add forced-colors border for tooltip surface. |
| src/components/toast/themes/toast.base.scss | Add forced-colors border for toast host. |
| src/components/tile-manager/themes/tile.base.scss | Add forced-colors border/hover indicators for resize triggers. |
| src/components/textarea/themes/shared/textarea.material.scss | Add forced-colors focus/disabled styling for Material textarea. |
| src/components/textarea/themes/shared/textarea.indigo.scss | Add forced-colors focus/disabled styling for Indigo textarea. |
| src/components/textarea/themes/shared/textarea.fluent.scss | Add forced-colors focus/disabled styling for Fluent textarea. |
| src/components/textarea/themes/shared/textarea.common.scss | Add forced-colors disabled helper/affix styling for textarea. |
| src/components/textarea/themes/shared/textarea.bootstrap.scss | Add forced-colors focus/disabled styling for Bootstrap textarea. |
| src/components/tabs/themes/tab.base.scss | Add forced-colors focus outline for selected tab header. |
| src/components/tabs/themes/shared/tabs/tabs.material.scss | Add forced-colors selected-indicator border for Material tabs. |
| src/components/tabs/themes/shared/tabs/tabs.indigo.scss | Add forced-colors selected-indicator border for Indigo tabs. |
| src/components/tabs/themes/shared/tabs/tabs.fluent.scss | Add forced-colors selected-indicator border for Fluent tabs. |
| src/components/tabs/themes/shared/tab/tab.material.scss | Add forced-colors hover/focus affordances for Material tabs. |
| src/components/tabs/themes/shared/tab/tab.indigo.scss | Add forced-colors hover/selected-focus outlines for Indigo tabs. |
| src/components/tabs/themes/shared/tab/tab.fluent.scss | Add forced-colors focus styling for Fluent tabs. |
| src/components/tabs/themes/shared/tab/tab.bootstrap.scss | Add forced-colors borders/outlines for Bootstrap tab states. |
| src/components/stepper/themes/step/step.base.scss | Add forced-colors outlines for hover/focus and indicator border. |
| src/components/splitter/themes/splitter.base.scss | Add forced-colors borders for splitter bar and handle. |
| src/components/snackbar/themes/snackbar.base.scss | Add forced-colors border for snackbar base. |
| src/components/slider/themes/slider.base.scss | Add forced-colors borders and focused/disabled styling for slider parts. |
| src/components/slider/themes/shared/slider.material.scss | Add forced-colors adjustments for Material slider thumb styling. |
| src/components/select/themes/shared/select.material.scss | Minor formatting-only change. |
| src/components/select/themes/shared/select.bootstrap.scss | Add forced-colors borders/disabled styling for Bootstrap select input. |
| src/components/select/themes/select.base.scss | Add forced-colors borders and disabled text/validator styling for select. |
| src/components/resize-container/themes/resize-container.base.scss | New base styles including forced-colors treatment for resize triggers. |
| src/components/radio/themes/shared/radio.indigo.scss | Add forced-colors checked indicator sizing tweak for Indigo radio. |
| src/components/radio/themes/shared/radio.bootstrap.scss | Add forced-colors checked indicator sizing tweak for Bootstrap radio. |
| src/components/radio/themes/radio.base.scss | Add forced-colors checked/focus/disabled styling for radio. |
| src/components/progress/themes/linear/themes.ts | Include new shared Bootstrap styles in both light/dark bootstrap themes. |
| src/components/progress/themes/linear/shared/linear.progress.bootstrap.scss | New shared Bootstrap forced-colors tweak for linear progress. |
| src/components/progress/themes/linear/linear.progress.base.scss | Add forced-colors track/fill outline/border for linear progress. |
| src/components/nav-drawer/themes/item.base.scss | Add forced-colors outline and active color tokens for nav-drawer items. |
| src/components/list/themes/item.base.scss | Add forced-colors selected outline for list items. |
| src/components/input/themes/shared/input.material.scss | Add forced-colors outline and notch adjustments for Material input. |
| src/components/input/themes/shared/input.indigo.scss | Add forced-colors ::after removal for Indigo input container. |
| src/components/file-input/themes/shared/file-input.bootstrap.scss | Add forced-colors padding tweak for Bootstrap file selector button. |
| src/components/file-input/themes/file-input.base.scss | Add forced-colors padding tweak for file selector button. |
| src/components/dropdown/themes/dropdown.base.scss | Add forced-colors border for dropdown surface. |
| src/components/dropdown/themes/dropdown-item.base.scss | Add forced-colors hover/selected/disabled/active styling for dropdown items. |
| src/components/divider/themes/divider.base.scss | Add forced-colors thicker divider borders and dashed variants. |
| src/components/date-range-picker/predefined-ranges-area.base.scss | Add forced-colors border styling for ranges area and chips. |
| src/components/date-range-picker/date-range-picker.base.scss | Add forced-colors borders for calendar/actions within the focus trap. |
| src/components/date-picker/themes/date-picker.base.scss | Add forced-colors borders for calendar/actions within the focus trap. |
| src/components/combo/themes/shared/combo.bootstrap.scss | Add forced-colors border/disabled styling for Bootstrap combo input. |
| src/components/combo/themes/combo.base.scss | Add forced-colors borders/outlines and disabled styling for combo list/input. |
| src/components/combo/themes/combo-item.base.scss | Add forced-colors checkbox control border color in combo items. |
| src/components/color-picker/themes/color-picker.base.scss | Add forced-colors adjustments for anchor/canvas/track rendering. |
| src/components/checkbox/themes/switch.base.scss | Add forced-colors focus/hover/disabled styling for switch. |
| src/components/checkbox/themes/shared/switch/switch.material.scss | Add forced-colors thumb border/hover sizing for Material switch. |
| src/components/checkbox/themes/shared/switch/switch.indigo.scss | Add forced-colors thumb border and focus outline width for Indigo switch. |
| src/components/checkbox/themes/shared/switch/switch.fluent.scss | Add forced-colors thumb border for Fluent switch. |
| src/components/checkbox/themes/shared/switch/switch.bootstrap.scss | Add forced-colors thumb border and focus outline width for Bootstrap switch. |
| src/components/checkbox/themes/shared/checkbox/checkbox.fluent.scss | Add forced-colors transparent fills + border/focus behavior for Fluent checkbox. |
| src/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.scss | Add forced-colors transparent fills + border/focus behavior for Bootstrap checkbox. |
| src/components/checkbox/themes/checkbox.base.scss | Add forced-colors tick/disabled/focus/hover styling for checkbox base. |
| src/components/chat/themes/message.base.scss | Add forced-colors border for chat message container. |
| src/components/chat/themes/chat.base.scss | Add forced-colors header separator styling for chat. |
| src/components/carousel/themes/shared/carousel.indigo.scss | Add forced-colors dot border styling for Indigo carousel indicators. |
| src/components/carousel/themes/carousel.base.scss | Add forced-colors dot active/hover styling for carousel indicators. |
| src/components/card/themes/container.base.scss | Add forced-colors border for elevated cards. |
| src/components/calendar/themes/year-month-view.base.scss | Add forced-colors outlines for hover/current/selected in year-month view. |
| src/components/calendar/themes/shared/material/days-view.material.scss | Add forced-colors tweaks for special/week-number/range selection in Material days view. |
| src/components/calendar/themes/shared/indigo/days-view.indigo.scss | Add forced-colors week-number border adjustments for Indigo days view. |
| src/components/calendar/themes/shared/indigo/calendar.indigo.scss | Add forced-colors content/navigation borders for Indigo calendar. |
| src/components/calendar/themes/shared/fluent/days-view.fluent.scss | Add forced-colors range/current/preview border adjustments for Fluent days view. |
| src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss | Add forced-colors range/preview border adjustments for Bootstrap days view. |
| src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss | Add forced-colors content/header/navigation borders for Bootstrap calendar. |
| src/components/calendar/themes/days-view.base.scss | Add forced-colors token overrides for current/selected/disabled/range states. |
| src/components/calendar/themes/calendar.base.scss | Add forced-colors header border styling for calendar. |
| src/components/banner/themes/shared/banner.indigo.scss | Add forced-colors border for Indigo banner spacer. |
| src/components/banner/themes/banner.base.scss | Add forced-colors border separator for banner spacer. |
| src/components/badge/themes/badge.base.scss | Add forced-colors border for badge base. |
| src/components/avatar/themes/avatar.base.scss | Add forced-colors border for avatar base. |
Review details
- Files reviewed: 74/75 changed files
- Comments generated: 6
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
…o-element Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
simeonoff
approved these changes
Sep 8, 2026
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.
Closes: #2248