CSS: Improve browser compatibility by replacing from ... r g b syntax#11939
Merged
danielchalmers merged 4 commits intoMudBlazor:devfrom Oct 7, 2025
Merged
CSS: Improve browser compatibility by replacing from ... r g b syntax#11939danielchalmers merged 4 commits intoMudBlazor:devfrom
from ... r g b syntax#11939danielchalmers merged 4 commits intoMudBlazor:devfrom
Conversation
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR fixes browser compatibility issues by replacing the CSS rgb(from var(...) r g b / alpha) syntax with the more widely supported rgba() syntax, addressing issue #11936.
Key changes:
- Replace all
rgb(from var(--color) r g b / opacity)withrgba(var(--color-rgb), opacity) - Add corresponding
-rgbCSS custom properties to the theme provider for color values in RGB format - Update test files to reflect the new CSS custom properties
Reviewed Changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
_togglegroup.scss |
Updated border-color properties to use rgba syntax |
_chip.scss |
Updated border property to use rgba syntax |
_buttongroup.scss |
Updated multiple border properties to use rgba syntax |
_button.scss |
Updated border properties in outlined button styles to use rgba syntax |
_avatar.scss |
Updated border properties in outlined avatar styles to use rgba syntax |
_alert.scss |
Updated border properties in outlined alert styles to use rgba syntax |
MudThemeProvider.razor.cs |
Added generation of RGB format CSS custom properties for text and divider colors |
ThemeProviderTests.cs |
Updated test assertions to include new RGB format CSS properties |
| Test razor files | Updated background-color properties in test components to use rgba syntax |
| Dialog example | Updated background properties to use rgba syntax |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request is a good initiative to improve browser compatibility by replacing the rgb(from ...) CSS syntax with the more widely supported rgba(...) syntax. This is achieved by introducing new CSS variables with an -rgb suffix. The changes are applied consistently across the codebase.
I've found one critical issue where a new CSS variable is used but not generated, which will break styling in one of the examples. I've also noticed a minor file encoding issue in two test files where a BOM character was introduced. My review includes suggestions to fix these points.
src/MudBlazor.Docs/Pages/Components/Dialog/Examples/DialogStylingExample_Dialog.razor
Show resolved
Hide resolved
...sts.Viewer/TestComponents/DataGrid/DataGridVirtualizeServerDataLoadingLargeDataSetTest.razor
Show resolved
Hide resolved
...Tests.Viewer/TestComponents/DataGrid/DataGridVirtualizeServerDataLoadingWithSearchTest.razor
Show resolved
Hide resolved
danielchalmers
changed the title
from r g b syntaxfrom ... r g b syntax
danielchalmers
changed the title
from ... r g b syntaxfrom ... r g b syntax on border colors
danielchalmers
changed the title
from ... r g b syntax on border colors
danielchalmers
changed the title
from ... r g b syntax
danielchalmers
changed the title
from ... r g b syntaxfrom ... r g b syntax
danielchalmers
added
bug
This was referenced Nov 5, 2025
Closed
This was referenced Dec 22, 2025
This was referenced Jan 3, 2026
This was referenced Jan 11, 2026
Closed
This was referenced Feb 5, 2026
Closed
This was referenced Feb 16, 2026
This was referenced Feb 23, 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.
CSS: Use pre-computed values instead of
from ... r g bsyntax on border colorsFixes #11936 by using an older syntax that is more widely supported.
Checklist:
dev).