Skip to content

Fix border and disabled public css var issues in BlazorUI (#13655) - #13777

Open
msynk wants to merge 1 commit into
developfrom
msynk/13655-blazorui-button-public-css-vars-issues
Open

msynk wants to merge 1 commit into
developfrom
msynk/13655-blazorui-button-public-css-vars-issues

Conversation

@msynk

@msynk msynk commented Oct 11, 2026 •

Copy link
Copy Markdown
Member

closes #13655

Summary by CodeRabbit

  • New Features
    • Added variant-specific color customization options across buttons, inputs, layouts, navigation, lists, and notifications. Fill, Outline, and Text styles can now be themed independently across applicable states, with shared color settings retained as fallbacks.
    • Updated component guidance to explain the new color options and how they interact with existing color settings.

@msynk
msynk requested a review from yasmoradi as a code owner October 11, 2026 14:55
@coderabbitai

coderabbitai Bot commented Oct 11, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Repository UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 2016be40-daaa-44e1-9906-9810da9c3ac8


📥 Commits

Reviewing files that changed from the base of the PR and between e09d4d2 and 41e07ec.



📒 Files selected for processing (56)
  • src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Layouts/Footer/BitFooter.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Layouts/Header/BitHeader.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Notifications/Message/BitMessage.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Notifications/SnackBar/BitSnackBar.scss
  • src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss
  • src/BlazorUI/CLAUDE.md
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/BitMenuButtonDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/BitChoiceGroupDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/OtpInput/BitOtpInputDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TagsInput/BitTagsInputDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Footer/BitFooterDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Layouts/Header/BitHeaderDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/BitTimelineDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Message/BitMessageDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/SnackBar/BitSnackBarDemo.razor.cs
  • src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/Button/BitButtonStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/ButtonGroup/BitButtonGroupStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/MenuButton/BitMenuButtonStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Buttons/ToggleButton/BitToggleButtonStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/ChoiceGroup/BitChoiceGroupStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/OtpInput/BitOtpInputStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/TagsInput/BitTagsInputStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Layouts/Footer/BitFooterStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Layouts/Header/BitHeaderStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Lists/Timeline/BitTimelineStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/DropMenu/BitDropMenuStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Navs/Pagination/BitPaginationStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Notifications/Badge/BitBadgeStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Notifications/Message/BitMessageStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Notifications/SnackBar/BitSnackBarStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Notifications/Tag/BitTagStylesheetTests.cs
  • src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentVariantVariablesContractTests.cs


Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 2 remain after this review.




Walkthrough

The pull request adds Fill-, Outline-, and Text-specific public color variables across BlazorUI components. Stylesheets resolve variant values before shared values, and demo metadata and stylesheet tests describe and check the precedence.

Changes

Variant-specific theming

Layer / File(s) Summary
Button variants and states
src/BlazorUI/Bit.BlazorUI/Components/Buttons/*, src/BlazorUI/Demo/Client/.../Components/Buttons/*, src/BlazorUI/Tests/.../Components/Buttons/*
Button, ButtonGroup, MenuButton, and ToggleButton styles resolve variant-specific colors before shared values across applicable states. Demo metadata and tests cover the variable tiers and precedence.
Input surfaces and states
src/BlazorUI/Bit.BlazorUI/Components/Inputs/*, src/BlazorUI/Demo/Client/.../Components/Inputs/*, src/BlazorUI/Tests/.../Components/Inputs/*
ChoiceGroup, FileInput, FileUpload, OtpInput, and TagsInput styles add variant-specific surface, border, state, and focus values. Demo metadata and tests cover their fallbacks.
Navigation, layout, and timeline styles
src/BlazorUI/Bit.BlazorUI/Components/Layouts/*, src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/*, src/BlazorUI/Bit.BlazorUI/Components/Navs/*, matching demo and test paths
Footer, Header, Timeline, DropMenu, and Pagination styles resolve variant-specific colors before shared variables. Demo metadata and tests describe and check the precedence.
Notification styles
src/BlazorUI/Bit.BlazorUI/Components/Notifications/*, matching demo and test paths
Badge, Message, SnackBar, and Tag styles use variant-specific color and border variables before shared fallbacks. Demo metadata and tests cover the new tiers.
Variable contract checks
src/BlazorUI/CLAUDE.md, src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentVariantVariablesContractTests.cs
Repository guidance documents the variant-variable contract. New contract tests scan stylesheets for variant twins, fallback chains, and reads outside the matching variant rules.

Priority: ➖ Normal

Estimated code review effort: 4 (Complex) | ~60 minutes

Change: Feature · Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to 41e07

The variant-specific theme-variable changes appear mergeable after normal checks; no actionable defect is established.

Pre-merge checks | Passed 3 | Failed 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Out of Scope Changes check Warning The PR intent is the BitButton fix for issue #13655, but the PR also changes unrelated component styles, demo metadata, and tests across ButtonGroup, MenuButton, ToggleButton, ChoiceGroup, FileInput, … Keep the BitButton stylesheet, BitButton demo metadata, and BitButton stylesheet tests needed for issue #13655. Move the unrelated component, demo, and test changes to separate linked issues or separate pull requests, or remove them from th…
Docstring Coverage Warning Docstring coverage is 5.71% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 70 functions across 37 files. (19 skipped:… Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (3 passed)
Check name Status Explanation
Linked Issues check Passed Issue #13655 is open and directly linked. BitButton.scss documents Fill, Outline, and Text variables for rest, hover, active, and disabled color, background, and border states. The stylesheet resolv…
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed The title accurately identifies the BlazorUI public CSS variable fixes for border and disabled-state behavior. These changes are central to the pull request, although the implementation also adds vari…

Full details: Out of Scope Changes check

Explanation

The PR intent is the BitButton fix for issue #13655, but the PR also changes unrelated component styles, demo metadata, and tests across ButtonGroup, MenuButton, ToggleButton, ChoiceGroup, FileInput, FileUpload, OtpInput, TagsInput, Footer, Header, Timeline, DropMenu, Pagination, Badge, Message, SnackBar, and Tag. These changes add or change public variant-variable behavior outside BitButton. The contract test and CLAUDE.md changes do not make those component behavior changes necessary for issue #13655.

Resolution

Keep the BitButton stylesheet, BitButton demo metadata, and BitButton stylesheet tests needed for issue #13655. Move the unrelated component, demo, and test changes to separate linked issues or separate pull requests, or remove them from this pull request.


Full details: Docstring Coverage

Explanation

Docstring coverage is 5.71% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 70 functions across 37 files. (19 skipped: 19 unsupported.)


  • Fix all pre-merge checks with AI
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Commit to this branch
  • Create a new PR



🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR



  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

A rabbit checked each color tier,
Then hopped through states from far to near.
Fill, Outline, and Text now shine,
With shared fallbacks in the line.
The stylesheet tests keep watch with cheer.

Comment @coderabbitai help to get the list of available commands.

@msynk msynk changed the title Fix border and disabled public css var issues in BitButton (#13655) Fix border and disabled public css var issues in BlazorUI (#13655) Oct 11, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

BitButton: --bit-Button-border-color and --bit-Button-disabled-background apply to every variant, so outline buttons can't be themed on their own

1 participant