Use new dark bg, fg, and brd colors in BitToggleButton (#11210)#11220
Conversation
WalkthroughThis change updates the BitToggleButton component's SCSS file to reference the correct dark color variables for background, foreground, and border properties. Additionally, it modifies the demo page to change the identifier of a specific example from "example7" to "example9". No logic or control flow changes are present. Changes
Sequence Diagram(s)Not applicable: No new features or control flow changes introduced. Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss (1)
202-290: Consider DRY-ing repeated color mapsEach color group now duplicates the same six custom-property definitions (
clr-dark,clr-dark-hover, …). A small mixin or Sass map iterating over the variants would cut ~70 duplicated lines and make future additions less error-prone.Example sketch:
@mixin tgb-color($prefix) { @each $state in ('' '', '-hover', '-active') { --bit-tgb-clr#{$state}: #{map-get($prefix, clr#{$state})}; --bit-tgb-clr-dark#{$state}: #{map-get($prefix, clr-dark#{$state})}; } }Not blocking, but worth considering for maintainability.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Knowledge Base: Disabled due to Reviews > Disable Knowledge Base setting
📒 Files selected for processing (2)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor(1 hunks)
🔇 Additional comments (2)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss (1)
202-210: Dark-theme tokens hooked up correctly 👍All new
--bit-tgb-clr-dark*variables now point to the dedicated*-dark*SCSS tokens, fixing the previous mismatch and ensuring the toggle button renders the right colors in dark mode.
Nothing else to flag here.Also applies to: 212-220, 222-230, 232-240, 242-250, 252-260, 262-270, 272-280, 282-290
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor (1)
170-170: Verify code-behind constant renaming
RazorCode="@example9RazorCode"assumes the backing field was likewise renamed fromexample7RazorCodetoexample9RazorCode.
Please double-check the .razor.cs (or@code {}) section; a stale name will break the build.
1 participant
closes #11210
Summary by CodeRabbit
Style
Chores