BlazorUI theme improvements ii (#12320)#12369
Open
msynk wants to merge 33 commits into
Open
Conversation
msynk
requested review from
Cyrus-Sushiant,
Copilot,
mhrastegari,
yasmoradi and
zahra-yousefi
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughRefactors theming end-to-end: adds focus-ring and underline mixins plus tokens; introduces per-variant disabled CSS variables; updates client and SSR theme runtime APIs; rewires component focus/disabled styles; expands demos, docs, and tests. ChangesTheme infrastructure and component adoption
Component styles
Demos, docs, and validation
Sequence Diagram(s)sequenceDiagram
participant BitThemeManager
participant BitThemeJsNotifierReceiver
participant BitThemeNotifications
participant BitThemeProvider
BitThemeManager->>BitThemeJsNotifierReceiver: register JS notifier and invoke theme methods
BitThemeJsNotifierReceiver->>BitThemeNotifications: forward theme change event
BitThemeProvider->>BitThemeManager: consume merged theme cascade
Estimated code review effort🎯 5 (Critical) | ⏱️ ~120 minutes Poem
✨ Finishing Touches🧪 Generate unit tests (beta)
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR advances the BlazorUI theming system (phase II) by expanding theme tokens (motion/layout/breakpoints), improving accessibility (focus ring tokens + forced-colors), adding runtime system-theme subscription with .NET-side notifications, and updating multiple components/demos to better reflect disabled-state theming.
Changes:
- Add theme change notification pipeline (JS → .NET) and new theme utilities (contrast helpers, density presets, breakpoint defaults, SSR cookie convention, external stylesheet loader).
- Extend theme token surface area (motion + layout + breakpoints) and wire them into CSS variable mapping + Fluent stylesheets (including forced-colors and semantic tokens).
- Update component styling for focus-visible ring consistency and per-role disabled colors; expand demo pages and samples accordingly.
Reviewed changes
Copilot reviewed 111 out of 111 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cs | Adds unit tests for WCAG contrast helper. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razor | Documents/advertises new advanced theming APIs. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cs | Adds disabled-state samples for BitLink. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor | Shows disabled-state rendering for BitLink. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs | Expands color samples (incl. background/foreground/border roles). |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor | Visual demo updates for additional icon color roles. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs | Adds disabled-state samples for BitTag. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor | Shows disabled-state rendering for BitTag. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cs | Adds disabled-state samples across colors/variants for BitBadge. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor | Shows disabled-state rendering for BitBadge. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cs | Adds disabled-state samples for BitPagination. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor | Shows disabled-state rendering for BitPagination. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cs | Adds disabled-state samples for BitTimeline item demo. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor | Shows disabled-state rendering for BitTimeline item demo. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cs | Adds disabled-state samples for BitTimeline custom demo. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor | Shows disabled-state rendering for BitTimeline custom demo. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs | Expands SearchBox samples across colors + disabled states. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor | Shows expanded SearchBox color/disabled examples. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs | Adds disabled-state samples for ChoiceGroup (item). |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor | Shows disabled-state rendering for ChoiceGroup (item). |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs | Adds disabled-state samples for ChoiceGroup (custom). |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor | Shows disabled-state rendering for ChoiceGroup (custom). |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cs | Adds disabled-state samples for Checkbox across roles. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor | Shows disabled-state rendering for Checkbox. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cs | Adds disabled-state samples for ToggleButton. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor | Shows disabled-state rendering for ToggleButton. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scss | Adds layout helper class for demo arrangement. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cs | Adds disabled-state samples for ButtonGroup (items). |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cs | Adds disabled-state samples for ButtonGroup (custom). |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cs | Adds disabled-state samples for Button across roles/variants. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor | Shows disabled-state rendering for Button. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cs | Adds disabled-state samples for ActionButton. |
| src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor | Shows disabled-state rendering for ActionButton. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cs | Adds .NET theme-change event source. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cs | Maps/merges new motion/layout/breakpoint tokens to CSS vars. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cs | Adds notifier registration, override clearing, and async disposal. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cs | Adds JS-invokable receiver for theme-change notifications. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cs | Adds JS interop calls for clear/register/unregister notifier. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cs | Adds compact density preset overlay helper. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cs | Documents SSR cookie name convention for theme preference. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cs | Adds optional WCAG-AA text adjustment when deriving colors. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cs | Adds WCAG contrast ratio utilities. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cs | Adds event args for theme-change notifications. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cs | Adds default breakpoint constants for theme layout. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cs | Adds theme motion token container. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cs | Adds theme layout token container (dir/density/breakpoints). |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cs | Adds breakpoint token container. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cs | Extends theme model with Motion and Layout. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cs | Adds .NET helper to attach/detach external theme stylesheets. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cs | Adds JS interop calls for external theme link manipulation. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cs | Adds sample accent color presets for branding. |
| src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts | Adds OS theme subscription + .NET notifications + overrides clearing + external theme loader JS. |
| src/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scss | Adds SCSS vars for disabled/focus tokens and focus-ring shape/shadow tokens. |
| src/BlazorUI/Bit.BlazorUI/Styles/functions.scss | Adds focus ring mixins and imports theme variables. |
| src/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scss | Defines focus-ring CSS variables and focus shadow token. |
| src/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scss | Adds semantic token aliases. |
| src/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scss | Adds motion tokens + reduced-motion overrides. |
| src/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scss | Adds forced-colors + prefers-contrast overrides. |
| src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scss | Imports new Fluent token files. |
| src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scss | Imports new Fluent token files (light). |
| src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scss | Imports new Fluent token files (dark). |
| src/BlazorUI/Bit.BlazorUI/Styles/bit-css.scss | Switches to importing functions (which imports theme variables) and adds focus utilities. |
| src/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cs | Registers new theming services in DI. |
| src/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scss | Adds focus ring + role-based disabled colors. |
| src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scss | Adds role-based disabled colors and fixes border-role mapping. |
| src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss | Adds role-based disabled colors across variants. |
| src/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scss | Adds role-based disabled colors across variants. |
| src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss | Adds focus ring + role-based disabled colors. |
| src/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scss | Adds role-based disabled colors. |
| src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scss | Adds role-based disabled colors. |
| src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss | Adds focus ring styling. |
| src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scss | Adds focus ring styling. |
| src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scss | Adds role-based disabled colors. |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scss | Adds focus ring styling. |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scss | Refactors focus visuals to shared focus-ring mixins (+ error focus). |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss | Refactors focus visuals to shared focus-ring/underline mixins (+ error focus). |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scss | Refactors focus visuals to shared focus-ring mixin (+ error focus). |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scss | Adds consistent thumb focus ring styling. |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scss | Adds focus-visible ring styling (+ error focus). |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scss | Refactors focus visuals to shared focus-ring mixin (+ error focus). |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss | Refactors focus visuals to shared focus-ring mixin (+ error focus). |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss | Refactors focus visuals to shared focus-ring/underline mixins (+ error focus). |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scss | Refactors focus visuals to shared focus-ring/underline mixins (+ error focus). |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scss | Refactors focus visuals to shared focus-ring/underline mixins (+ error focus). |
| src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss | Refactors underlined focus visuals to shared mixin. |
| src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss | Adds focus ring + role-based disabled colors across variants. |
| src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scss | Refactors focus ring + role-based disabled colors. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 17
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss (1)
49-56:⚠️ Potential issue | 🟠 Major | ⚡ Quick winFix invalid-state selector mismatch (
.bit-dtrp-icpvs.bit-dtrp-icn).Line 50 targets
.bit-dtrp-icp, but the rest of this component’s icon-container styling uses.bit-dtrp-icn(including Line 54). This can break invalid border-color styling.🔧 Proposed fix
- .bit-dtrp-icp { + .bit-dtrp-icn { border-color: $clr-err; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss` around lines 49 - 56, The selector for the invalid state uses the wrong class name: replace the `.bit-dtrp-icp` reference with `.bit-dtrp-icn` so the invalid border-color rule targets the actual icon container used elsewhere; update the rule inside the `&.bit-inv` block (the same block that contains `&.bit-dtrp-foc .bit-dtrp-icn`) so `.bit-dtrp-icn` receives `border-color: $clr-err` consistently with the rest of the DateRangePicker styling.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scss`:
- Around line 29-30: The SCSS inside BitActionButton.scss violates stylelint
rule declaration-empty-line-before because there is no blank line before the
border-radius declaration in the :focus-visible block; open the :focus-visible
block (where `@include` focus-ring(var(--bit-acb-clr-hover)) is used) and insert a
single empty line before the border-radius: $shp-border-radius; declaration so
the sequence has a blank line separating declarations and satisfies the linter.
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scss`:
- Line 10: The CSS custom properties use Sass interpolation syntax (e.g.
--bit-chb-ico-clr: #{var(--bit-chb-clr-txt-sec)};) which trips stylelint;
replace all occurrences of "#{var(...)}" with plain "var(...)" for the checkbox
variables (start with --bit-chb-ico-clr and the group referenced in lines 42-53)
so each assignment reads like --bit-chb-ico-clr: var(--bit-chb-clr-txt-sec); and
similarly for the other custom properties to satisfy
custom-property-no-missing-var-function.
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scss`:
- Around line 21-22: The two invalid comment tokens in BitSlider.scss (the empty
comment "/**/" and the "/*webkit*/" token) break stylelint; replace them with
valid, non-empty comment syntax or remove them entirely—e.g., delete the empty
"/**/" and change "/*webkit*/" to a proper spaced comment like "/* webkit */" or
add the intended vendor-prefixed rule (e.g., "-webkit-..." with a proper
comment), ensuring no empty comments remain so stylelint passes.
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scss`:
- Around line 27-30: The stylelint violation is caused by missing blank lines
before declaration blocks; update the SCSS so there is an empty line before the
declarations in the selectors &.bit-tgi-fcs .bit-tgi-cnt and the other block
around lines 50-51 (the second selector that triggers the same rule), i.e.,
insert a single blank line immediately before the first property/declaration
inside those selector blocks so they satisfy declaration-empty-line-before.
In `@src/BlazorUI/Bit.BlazorUI/Styles/bit-css.scss`:
- Line 1: In src/BlazorUI/Bit.BlazorUI/Styles/bit-css.scss the import statement
`@import` "functions.scss"; violates scss/load-partial-extension; remove the .scss
extension so the import reads `@import` "functions"; to reference the partial
correctly and satisfy the stylelint rule.
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scss`:
- Around line 13-17: In bit.blazorui.fluent-dark.scss the three `@import` lines
reference partials with the .scss extension ("motion.fluent.scss",
"forced-colors.fluent.scss", "semantic-tokens.fluent.scss"); remove the ".scss"
extension from each import so they become `@import` "motion.fluent", `@import`
"forced-colors.fluent", and `@import` "semantic-tokens.fluent" to satisfy the
scss/load-partial-extension rule and avoid stylelint failures.
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scss`:
- Around line 13-17: Imports in bit.blazorui.fluent-light.scss include the .scss
extension which violates scss/load-partial-extension; update the three `@import`
statements referencing "motion.fluent.scss", "forced-colors.fluent.scss", and
"semantic-tokens.fluent.scss" to omit the .scss extension (e.g. `@import`
"motion.fluent"; `@import` "forced-colors.fluent"; `@import`
"semantic-tokens.fluent";) so they load as SCSS partials and satisfy stylelint.
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scss`:
- Around line 17-21: The three `@import` statements referencing partials include
the .scss extension which violates scss/load-partial-extension; update the
imports in bit.blazorui.fluent.scss by removing the “.scss” suffix from
"motion.fluent.scss", "forced-colors.fluent.scss", and
"semantic-tokens.fluent.scss" so they become `@import` "motion.fluent", `@import`
"forced-colors.fluent", and `@import` "semantic-tokens.fluent" respectively.
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scss`:
- Around line 214-218: Add the required blank lines before the comment blocks
around the "req" and "focus (a11y)" comments to satisfy the
scss/double-slash-comment-empty-line-before rule: insert an empty line
immediately before the "//req" comment (the section defining --bit-clr-req) and
before the "//focus (a11y) — color of the focus indicator per role." comment so
the comment blocks preceding the --bit-clr-req variable and the focus
explanation are separated by a blank line.
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scss`:
- Around line 216-220: The two single-line comments before the variable
declaration violate scss/double-slash-comment-empty-line-before; insert one
blank line immediately above each comment marker (//req and //focus) so there is
an empty line before those comments, keeping the existing comment text and the
--bit-clr-req variable declaration unchanged.
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scss`:
- Line 24: Add a single blank line above the comment "// Focus must remain
visible in High Contrast — use system Highlight color and a single solid ring."
inside the forced-colors Fluent SCSS block in forced-colors.fluent.scss so it
satisfies the scss/double-slash-comment-empty-line-before rule; locate the
comment text and insert one empty line immediately before it.
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scss`:
- Around line 19-24: Add a blank line immediately before the comment block that
begins with "//focus ring (a11y) — width is the visible thickness, offset is the
gap between the element and the ring." so the double-slash comment has an empty
line above it (fixes scss/double-slash-comment-empty-line-before); keep the rest
of the block intact including the variable declarations
(--bit-shp-focus-ring-width, --bit-shp-focus-ring-offset, --bit-shd-focus-ring)
and surrounding comments.
In `@src/BlazorUI/Bit.BlazorUI/Styles/functions.scss`:
- Around line 44-49: The focus-ring mixin currently hardcodes a two-layer
box-shadow which ignores the global forced-colors override; update the mixin
(focus-ring) to use the global focus shadow token (CSS variable
--bit-shd-focus-ring) instead of the literal two-layer value so forced-colors
can override it, providing the existing composed value as a fallback (construct
the var(...) with a fallback that uses the current #{$offset},
#{$clr-bg-pri-focus} and #{$color} composition) and keep outline: none
unchanged.
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts`:
- Around line 183-185: BitTheme currently registers BitTheme._onSchemeChange
with both addEventListener and the legacy addListener on
BitTheme._schemeMediaQuery which can cause duplicate callbacks; change the
registration to feature-detect and call only one API (use addEventListener if
present, otherwise fall back to addListener) when attaching the handler, and
mirror that logic for removal (use removeEventListener if available, otherwise
removeListener) so BitTheme._schemeMediaQuery and BitTheme._onSchemeChange are
only registered once.
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cs`:
- Around line 30-36: The current logic in BitThemeColorDerivation.cs (inside the
block that checks adjustTextForWcagAa and variants.Main/Text) simply toggles
variants.Text to black or white based on whether it equals "`#000000`", which can
still fail WCAG on dark backgrounds; instead compute contrast ratios for both
candidate colors ("`#000000`" and "`#FFFFFF`") against variants.Main using
BitThemeColorContrast.GetContrastRatio and choose the candidate with the higher
ratio (and assign it to variants.Text), optionally verifying the chosen color
satisfies BitThemeColorContrast.MeetsWcagAaNormalText and falling back to the
better of the two if only one meets the threshold.
In
`@src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cs`:
- Around line 11-13: Replace the loose threshold assertion for black/white
contrast with a deterministic equality check: call
BitThemeColorContrast.GetContrastRatio("`#000000`", "`#FFFFFF`"), assert the
returned ratio is approximately 21.0 within a small tolerance (e.g., 0.01), and
then use BitThemeColorContrast.MeetsWcagAaNormalText(ratio) to assert
compliance; this makes the test deterministic while still verifying the
MeetsWcagAaNormalText behavior.
---
Outside diff comments:
In
`@src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss`:
- Around line 49-56: The selector for the invalid state uses the wrong class
name: replace the `.bit-dtrp-icp` reference with `.bit-dtrp-icn` so the invalid
border-color rule targets the actual icon container used elsewhere; update the
rule inside the `&.bit-inv` block (the same block that contains `&.bit-dtrp-foc
.bit-dtrp-icn`) so `.bit-dtrp-icn` receives `border-color: $clr-err`
consistently with the rest of the DateRangePicker styling.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: a88c7bf4-5e35-4d3e-acc1-ec9b20c444db
📒 Files selected for processing (111)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scsssrc/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scsssrc/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/bit-css.scsssrc/BlazorUI/Bit.BlazorUI/Styles/functions.scsssrc/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scsssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.tssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scsssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razorsrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cs
Member
Author
|
@coderabbitai re-review |
|
✅ Actions performedFull review triggered. |
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 114 out of 114 changed files in this pull request and generated 3 comments.
Comments suppressed due to low confidence (1)
src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts:219
invokeMethodAsyncis fired without handling failures. In Blazor Server (or after a circuit disconnect), the stored .NET reference can become invalid and this will surface as an unhandled promise rejection in the browser console on theme changes (including OS-driven changes). Consider wrappinginvokeMethodAsyncwith a.catch(() => { ... })(and possibly clearing_dotnetNotifier) to avoid noisy errors and improve resilience.
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (2)
src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cs (2)
16-18: ⚡ Quick winAdd parameter validation for linkElementId and href.
The method accepts string parameters but doesn't validate them. Adding null/empty checks would provide better error messages and prevent unexpected JS errors. The XML documentation already warns about trusted URLs, so validation here reinforces that guidance.
🛡️ Suggested validation
public ValueTask AttachStylesheetAsync(string linkElementId, string href) { + if (string.IsNullOrWhiteSpace(linkElementId)) + throw new ArgumentException("Link element ID cannot be null or empty.", nameof(linkElementId)); + if (string.IsNullOrWhiteSpace(href)) + throw new ArgumentException("Href cannot be null or empty.", nameof(href)); + return _js.BitExternalThemeAttach(linkElementId, href); }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cs` around lines 16 - 18, AttachStylesheetAsync currently forwards linkElementId and href to _js.BitExternalThemeAttach without validation; add input checks at the start of BitExternalThemeLoader.AttachStylesheetAsync to throw ArgumentNullException when linkElementId or href is null and ArgumentException (or ArgumentException with nameof()) when either is empty or whitespace, so callers get clear .NET exceptions instead of JS errors, then return the existing _js.BitExternalThemeAttach(linkElementId, href) as before.
21-23: ⚡ Quick winAdd parameter validation for linkElementId.
🛡️ Suggested validation
public ValueTask DetachStylesheetAsync(string linkElementId) { + if (string.IsNullOrWhiteSpace(linkElementId)) + throw new ArgumentException("Link element ID cannot be null or empty.", nameof(linkElementId)); + return _js.BitExternalThemeDetach(linkElementId); }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cs` around lines 21 - 23, DetachStylesheetAsync currently forwards linkElementId to _js.BitExternalThemeDetach without validation; add parameter validation in DetachStylesheetAsync to throw ArgumentNullException or ArgumentException when linkElementId is null, empty, or whitespace before calling _js.BitExternalThemeDetach, so callers receive a clear exception instead of passing invalid input into the JS interop call.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss`:
- Around line 100-102: The .bit-drp-nbd rule currently removes the focus ring in
the &:focus selector which eliminates a visible keyboard focus cue; update the
.bit-drp-nbd &:focus block to provide a clear, accessible focus treatment
instead of box-shadow: none (for example restore a subtle visible outline or a
2px focus ring using theme focus color and sufficient contrast), ensuring the
selector is `.bit-drp-nbd` and the modified state is `&:focus`, and keep the
styling keyboard-only-friendly (non-invasive) and high-contrast for
accessibility.
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scss`:
- Around line 22-36: Replace the hardcoded thumb focus box-shadow used in the
input:focus-visible::-webkit-slider-thumb / input:focus::-webkit-slider-thumb
and input:focus-visible::-moz-range-thumb / input:focus::-moz-range-thumb rules
with the global focus-ring shadow token so forced-colors/global theme overrides
apply; specifically remove the manual box-shadow construction and reference the
CSS custom property (e.g. --bit-shd-focus-ring or the project's focus-ring
token) for the thumb focus shadow, preserving the border-color change to
$clr-pri-focus and keeping existing selectors intact.
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scss`:
- Line 231: The border-focus token --bit-clr-brd-pri-focus is incorrectly
aliased to the primary role --bit-clr-pri; update the alias so the focus token
references the border role instead by changing --bit-clr-brd-pri-focus to use
var(--bit-clr-brd-pri) (so components using border-role focus get the correct
border color). Ensure you update the declaration of --bit-clr-brd-pri-focus in
colors.fluent-dark.scss accordingly.
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts`:
- Around line 165-170: The shouldFollowSystem() logic allows an explicitly
persisted theme to be overridden by the presence of the bit-theme-system
attribute; change the checks so a persisted explicit theme blocks
system-following: in BitTheme.shouldFollowSystem() first return false if
BitTheme._persist && BitTheme.getPersisted() !== BitTheme.SYSTEM_THEME (i.e., an
explicit persisted theme exists), then keep the existing checks for
BitTheme._stopFollowingSystem and
document.documentElement.hasAttribute('bit-theme-system'); ensure you still
return true only when persisted value equals BitTheme.SYSTEM_THEME or the
attribute is set and no explicit persisted theme prevents it.
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cs`:
- Around line 8-12: The BitThemeChangedEventArgs constructor currently assigns
possibly-null parameters to non-nullable properties NewTheme and OldTheme; add
input guards in the BitThemeChangedEventArgs constructor to validate newTheme
and oldTheme and throw ArgumentNullException (or ArgumentException) for null
values before assigning to the NewTheme and OldTheme properties so the
non-nullable contract is preserved.
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cs`:
- Around line 30-49: The code currently overwrites variants.Text during the WCAG
adjustment even when the caller explicitly provided a non-null text color;
change the logic so adjustments only happen for auto-suggested text (i.e., when
variants.Text was null/unspecified). Concretely, capture the original
variants.Text before the if (adjustTextForWcagAa ...) block (or check at the top
of that block) and only run the contrast calculations/assignments that set
variants.Text when the original variants.Text is null; leave variants.Text
untouched if it was non-null. This touches the adjustTextForWcagAa check and the
assignments to variants.Text (and still uses
BitThemeColorContrast.GetContrastRatio/MeetsWcagAaNormalText with
variants.Main).
---
Nitpick comments:
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cs`:
- Around line 16-18: AttachStylesheetAsync currently forwards linkElementId and
href to _js.BitExternalThemeAttach without validation; add input checks at the
start of BitExternalThemeLoader.AttachStylesheetAsync to throw
ArgumentNullException when linkElementId or href is null and ArgumentException
(or ArgumentException with nameof()) when either is empty or whitespace, so
callers get clear .NET exceptions instead of JS errors, then return the existing
_js.BitExternalThemeAttach(linkElementId, href) as before.
- Around line 21-23: DetachStylesheetAsync currently forwards linkElementId to
_js.BitExternalThemeDetach without validation; add parameter validation in
DetachStylesheetAsync to throw ArgumentNullException or ArgumentException when
linkElementId is null, empty, or whitespace before calling
_js.BitExternalThemeDetach, so callers receive a clear exception instead of
passing invalid input into the JS interop call.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 2ad50f34-04f2-4426-a620-fe354e18d8ee
📒 Files selected for processing (114)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scsssrc/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scsssrc/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/bit-css.scsssrc/BlazorUI/Bit.BlazorUI/Styles/functions.scsssrc/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scsssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBoxShadows.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeColors.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeShapes.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.tssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scsssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razorsrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cs
Member
Author
|
@coderabbitai re-review |
|
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts (1)
59-75:⚠️ Potential issue | 🟠 Major | ⚡ Quick winPersisting resolved light/dark on init breaks system-follow when
persistis enabled.When
systemmode is active with no stored value,initcurrently resolves to a concrete theme (light/dark) and persists it. That makesshouldFollowSystem()immediately stop following OS changes because persisted value is no longer"system".Proposed fix
- if (BitTheme._initOptions.system) { - theme = BitTheme.isSystemDark() ? BitTheme._darkTheme : BitTheme._lightTheme; - } + if (BitTheme._initOptions.system) { + // Persist intent as "system"; set(...) will still apply resolved light/dark to the attribute. + theme = BitTheme.SYSTEM_THEME; + }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts` around lines 59 - 75, The init currently resolves a concrete theme when BitTheme._initOptions.system is true and no persisted value exists, then sets BitTheme._persist and writes that resolved theme which makes BitTheme._stopFollowingSystem true; instead, when system mode is enabled and BitTheme.getPersisted() returns null, do not mark _persist true or overwrite persisted state — call BitTheme.set with the resolved theme only for initial display but avoid toggling BitTheme._persist or writing a persisted value (so leave BitTheme._stopFollowingSystem unchanged and keep SYSTEM_THEME as the effective persisted indicator until the user explicitly picks a theme).
🧹 Nitpick comments (1)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs (1)
528-533: ⚡ Quick winMake the disabled primary sample explicit.
Line 528 currently relies on default color resolution. For role-color coverage, set primary explicitly so this sample won’t drift if defaults change.
Proposed tweak
-<BitChoiceGroup IsEnabled="false" Label="Primary (default)" DefaultValue="@("A")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal> +<BitChoiceGroup IsEnabled="false" Color="BitColor.Primary" Label="Primary" DefaultValue="@("A")" TItem="BitChoiceGroupOption<string>" TValue="string" Horizontal>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs` around lines 528 - 533, The sample BitChoiceGroup is relying on implicit/default color resolution; update the BitChoiceGroup markup (the component named BitChoiceGroup in this sample) to explicitly set the primary color by adding a Color="Primary" attribute (so the disabled primary sample remains explicit) while keeping IsEnabled="false" and DefaultValue="@("A")" and the existing BitChoiceGroupOption children unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss`:
- Around line 363-366: The .bit-srb-cnt rule is removing box-shadow
unconditionally which suppresses the focus-ring; update the CSS so the no-border
variant does not clear box-shadow on focus (or focus-visible) — e.g., remove the
global "box-shadow: none" from .bit-srb-cnt and instead only neutralize
box-shadow for non-focused states, ensuring the existing focus-ring mixin (used
for :focus / :focus-visible) can still apply; locate the .bit-srb-cnt selector
and adjust its declarations to preserve the focus state styling.
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scss`:
- Around line 25-26: Add a blank line immediately before the inline double-slash
comment that begins "Reference the global focus-ring shadow token..." in
BitSlider.scss so it satisfies the Stylelint rule
scss/double-slash-comment-empty-line-before; ensure you keep the same
indentation and do not alter the comment text or surrounding rules/selectors in
the BitSlider.scss file.
In `@src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scss`:
- Around line 12-13: Replace bare uses of the CSS variable --bit-nbr-clr-dis
with a fallback value so disabled text won't inherit unpredictably; update
occurrences of color: var(--bit-nbr-clr-dis) in BitNavBar.scss to something like
color: var(--bit-nbr-clr-dis, var(--bit-nbr-clr, currentColor)) or a concrete
fallback (e.g., rgba(...) ) so the disabled color resolves even when the color
class is missing, and apply the same change to the other occurrence of
var(--bit-nbr-clr-dis).
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scss`:
- Line 233: Replace the incorrect alias mapping so the border-focus token uses
the border role token instead of the primary palette: update the declaration of
--bit-clr-brd-pri-focus (currently var(--bit-clr-pri)) to reference the border
role token (e.g., var(--bit-clr-brd)) so border-specific focus styling can be
customized independently of --bit-clr-pri.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cs`:
- Around line 187-189: Update the disabled "Primary" sample to explicitly set
the color: for the three BitCheckbox usages (the elements with IsEnabled,
Label="Primary", and variations Indeterminate/Value) add
Color="BitColor.Primary" so the disabled color triplet no longer relies on the
default and matches the other color-role samples; target the BitCheckbox
components and the Color property (use BitColor.Primary).
---
Outside diff comments:
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts`:
- Around line 59-75: The init currently resolves a concrete theme when
BitTheme._initOptions.system is true and no persisted value exists, then sets
BitTheme._persist and writes that resolved theme which makes
BitTheme._stopFollowingSystem true; instead, when system mode is enabled and
BitTheme.getPersisted() returns null, do not mark _persist true or overwrite
persisted state — call BitTheme.set with the resolved theme only for initial
display but avoid toggling BitTheme._persist or writing a persisted value (so
leave BitTheme._stopFollowingSystem unchanged and keep SYSTEM_THEME as the
effective persisted indicator until the user explicitly picks a theme).
---
Nitpick comments:
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs`:
- Around line 528-533: The sample BitChoiceGroup is relying on implicit/default
color resolution; update the BitChoiceGroup markup (the component named
BitChoiceGroup in this sample) to explicitly set the primary color by adding a
Color="Primary" attribute (so the disabled primary sample remains explicit)
while keeping IsEnabled="false" and DefaultValue="@("A")" and the existing
BitChoiceGroupOption children unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: adf23b9c-ffbd-4cf6-b580-cf1476b6b7f2
📒 Files selected for processing (114)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scsssrc/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scsssrc/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/bit-css.scsssrc/BlazorUI/Bit.BlazorUI/Styles/functions.scsssrc/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scsssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBoxShadows.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeColors.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeShapes.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.tssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scsssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razorsrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cs
|
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
Actionable comments posted: 5
♻️ Duplicate comments (1)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss (1)
49-60:⚠️ Potential issue | 🟠 Major | ⚡ Quick winKeep the error underline visible for invalid underlined pickers.
In underline mode,
.bit-dtrp-icnhasborder: nonelater in the file, so Line 50'sborder-color: $clr-errnever renders for the unfocused invalid state. Right now the red invalid indicator only appears once the control is focused.💡 Minimal fix
&.bit-inv { .bit-dtrp-icn { border-color: $clr-err; } + + &.bit-dtrp-und .bit-dtrp-wrp { + border-bottom-color: $clr-err; + } &.bit-dtrp-foc:not(.bit-dtrp-und) .bit-dtrp-icn { `@include` focus-ring($clr-err-focus); }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss` around lines 49 - 60, The invalid-but-unfocused underline isn't visible because `.bit-dtrp-icn` gets `border: none` later, so setting `border-color` in `.bit-inv` doesn't show; update the `.bit-inv` rules to explicitly style the underline mode by targeting the `.bit-dtrp-und` state (e.g. selector involving `.bit-inv.bit-dtrp-und .bit-dtrp-icn`) and apply a visible underline style such as `border-bottom` or a 0 1px box-shadow using `$clr-err` so the red indicator appears when invalid and unfocused; keep the existing focus rules (`&.bit-dtrp-foc:not(.bit-dtrp-und)`, `&.bit-dtrp-und.bit-dtrp-foc`) unchanged.
🧹 Nitpick comments (1)
src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperMergeDriftTests.cs (1)
102-112: 💤 Low value
Activator.CreateInstance(pt)can throw, not just return null.The
val is nullguard only covers the nullable-overload returning null; for a reference type lacking a public parameterless constructor,Activator.CreateInstance(pt)throwsMissingMethodException. The current theme graph is all simple POCOs so this is fine today, but a future model type without a default ctor would crash this drift test instead of degrading gracefully.♻️ Optional hardening
- var val = prop.GetValue(obj); - if (val is null) - { - val = Activator.CreateInstance(pt); - if (val is null) continue; - prop.SetValue(obj, val); - } + var val = prop.GetValue(obj); + if (val is null) + { + try + { + val = Activator.CreateInstance(pt); + } + catch (MissingMethodException) + { + continue; + } + if (val is null) continue; + prop.SetValue(obj, val); + }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperMergeDriftTests.cs` around lines 102 - 112, The code calls Activator.CreateInstance(pt) inside the Walk method without guarding against exceptions; for types without a public parameterless ctor this will throw (e.g., MissingMethodException) and crash the test. Wrap the Activator.CreateInstance(pt) call in a try/catch (catch Exception) and treat any exception the same as a null return — skip setting the property and continue walking — so replace the direct call with a guarded attempt that on exception continues without mutating the object (affecting the prop.SetValue(obj, val) and subsequent Walk(val, visited, ref counter) paths).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss`:
- Around line 22-24: BitButton.scss currently calls
focus-ring(var(--bit-btn-clr)) which ignores the new per-role focus tokens
published by BitThemeMapper; change the focus-ring call to use the matching
per-variant focus CSS variable (the new *-focus vars) instead of --bit-btn-clr
(e.g., replace usages in BitButton.scss where focus-ring(var(--bit-btn-clr))
appears with focus-ring(var(--bit-btn-<role>-focus)) for the default and for
each color variant), and replicate that pattern across the other color variant
blocks (lines ~189-356) so each variant uses its own --bit-btn-<variant>-focus
token.
In `@src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss`:
- Around line 16-19: The focus ring in the MenuButton SCSS currently uses the
role-specific CSS variable --bit-mnb-clr inside the &:focus-visible,
&:focus-within block with `@include` focus-ring(var(--bit-mnb-clr)); change this
to use the dedicated theme focus token (the same focus-token mapping pattern
used for other components) by replacing var(--bit-mnb-clr) with the new token
variable (e.g., var(--bit-<component>-focus) or the project's focus token name)
wherever `@include` focus-ring is invoked for the MenuButton; apply the same
mapping update to all other color-specific classes in this file (see other
`@include` focus-ring occurrences in the 239-390 region) so the component follows
the theme's focus-token override path.
In
`@src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss`:
- Around line 20-22: The focus-ring currently uses the legacy token
var(--bit-tgb-clr) in BitToggleButton.scss (&:focus-visible) so theme mapper
Color.*.Focus values are ignored; change the focus-ring to use the new focus
palette token (e.g., replace var(--bit-tgb-clr) with the corresponding focus
token like var(--bit-<variant>-focus) or the component-level focus token your
theme emits) and update each variant block to define and use its own
--bit-*-focus token (mirror this change for all variant blocks in the file,
including the ranges noted) so the focus style reads from the new Color.*.Focus
tokens.
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scss`:
- Around line 220-233: Add the missing focus-token aliases for secondary and
tertiary semantic colors so theme-level focus surfaces are available for those
roles: create --bit-clr-fg-sec-focus, --bit-clr-bg-sec-focus,
--bit-clr-brd-sec-focus and their tertiary counterparts --bit-clr-fg-ter-focus,
--bit-clr-bg-ter-focus, --bit-clr-brd-ter-focus (following the existing pattern
used for primary: e.g. --bit-clr-fg-pri-focus, --bit-clr-bg-pri-focus,
--bit-clr-brd-pri-focus) and initialize them to their respective base tokens
(e.g. var(--bit-clr-fg-sec), var(--bit-clr-bg-sec), var(--bit-clr-brd-sec),
etc.) so SecondaryBackground/TertiaryBackground,
SecondaryForeground/TertiaryForeground, and SecondaryBorder/TertiaryBorder can
bind to dedicated focus tokens.
In `@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.ts`:
- Around line 46-47: The dark-theme detection is too broad because
name.includes('dark') treats any theme containing the substring as dark; update
the logic in app.ts (variables newTheme, name, isDark) to detect dark only when
name === 'dark' or it ends with '-dark' (or matches a pattern like /^.+-dark$/)
and remove the generic includes('dark') check so only explicit "dark" or
explicit "-dark" suffixed theme names flip the body classes and meta
theme-color.
---
Duplicate comments:
In
`@src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss`:
- Around line 49-60: The invalid-but-unfocused underline isn't visible because
`.bit-dtrp-icn` gets `border: none` later, so setting `border-color` in
`.bit-inv` doesn't show; update the `.bit-inv` rules to explicitly style the
underline mode by targeting the `.bit-dtrp-und` state (e.g. selector involving
`.bit-inv.bit-dtrp-und .bit-dtrp-icn`) and apply a visible underline style such
as `border-bottom` or a 0 1px box-shadow using `$clr-err` so the red indicator
appears when invalid and unfocused; keep the existing focus rules
(`&.bit-dtrp-foc:not(.bit-dtrp-und)`, `&.bit-dtrp-und.bit-dtrp-foc`) unchanged.
---
Nitpick comments:
In
`@src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperMergeDriftTests.cs`:
- Around line 102-112: The code calls Activator.CreateInstance(pt) inside the
Walk method without guarding against exceptions; for types without a public
parameterless ctor this will throw (e.g., MissingMethodException) and crash the
test. Wrap the Activator.CreateInstance(pt) call in a try/catch (catch
Exception) and treat any exception the same as a null return — skip setting the
property and continue walking — so replace the direct call with a guarded
attempt that on exception continues without mutating the object (affecting the
prop.SetValue(obj, val) and subsequent Walk(val, visited, ref counter) paths).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 28fbd9ca-de79-4f21-b749-601cc9189a60
📒 Files selected for processing (130)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scsssrc/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.scsssrc/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scsssrc/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/bit-css.scsssrc/BlazorUI/Bit.BlazorUI/Styles/functions.scsssrc/BlazorUI/Bit.BlazorUI/Styles/media-queries.scsssrc/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scsssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme.tssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBoxShadows.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeColors.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeShapes.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeAttributeNames.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeName.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeProvider.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSerialization.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSsr.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeUtilities.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.tssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scsssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.tssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorDerivationTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperMergeDriftTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderHtmlAttributesTest.razorsrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeSsrTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/ThemeProbeConsumer.cs
💤 Files with no reviewable changes (1)
- src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts
Member
Author
|
@coderabbitai re-review |
|
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (6)
src/BlazorUI/Bit.BlazorUI/Styles/bit-css.scss (1)
1-1:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winDrop
.scssextension in the import path.The import violates
scss/load-partial-extension.Suggested fix
-@import "theme-variables.scss"; +@import "theme-variables";🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Styles/bit-css.scss` at line 1, The SCSS import currently uses a file extension in the import string ("`@import` \"theme-variables.scss\";") which violates scss/load-partial-extension; update the import in bit-css.scss to drop the .scss extension so it reads "`@import` \"theme-variables\";" (keep the same quoted name so the partial _theme-variables.scss will be resolved).src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss (1)
16-19:⚠️ Potential issue | 🟠 Major | ⚡ Quick winBind the MenuButton focus ring to a dedicated focus token.
The focus ring at line 18 still uses
var(--bit-mnb-clr), so role-level*-focustheme overrides cannot affect MenuButton. Add a dedicated--bit-mnb-clr-focusvariable and map it in each color class (lines 239-390) following the same pattern used for--bit-mnb-clr-disand--bit-mnb-clr-dis-text.🔧 Proposed fix
&:focus-visible, &:focus-within { - `@include` focus-ring(var(--bit-mnb-clr)); + `@include` focus-ring(var(--bit-mnb-clr-focus)); }Then add the focus token to each color class. For example, in
.bit-mnb-pri:.bit-mnb-pri { --bit-mnb-clr: #{$clr-pri}; --bit-mnb-clr-txt: #{$clr-pri-text}; --bit-mnb-clr-hover: #{$clr-pri-hover}; --bit-mnb-clr-active: #{$clr-pri-active}; + --bit-mnb-clr-focus: #{$clr-pri-focus}; --bit-mnb-clr-dis: #{$clr-pri-dis}; --bit-mnb-clr-dis-text: #{$clr-pri-dis-text}; }Apply the same mapping to all color classes (
.bit-mnb-sec,.bit-mnb-ter,.bit-mnb-inf,.bit-mnb-suc,.bit-mnb-wrn,.bit-mnb-swr,.bit-mnb-err,.bit-mnb-pbg,.bit-mnb-sbg,.bit-mnb-tbg,.bit-mnb-pfg,.bit-mnb-sfg,.bit-mnb-tfg,.bit-mnb-pbr,.bit-mnb-sbr,.bit-mnb-tbr).🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss` around lines 16 - 19, The focus-ring include in BitMenuButton.scss currently hardcodes var(--bit-mnb-clr); change it to use a dedicated focus token --bit-mnb-clr-focus (i.e. `@include` focus-ring(var(--bit-mnb-clr-focus))); then add mapping for --bit-mnb-clr-focus inside every MenuButton color class (e.g. .bit-mnb-pri, .bit-mnb-sec, .bit-mnb-ter, .bit-mnb-inf, .bit-mnb-suc, .bit-mnb-wrn, .bit-mnb-swr, .bit-mnb-err, .bit-mnb-pbg, .bit-mnb-sbg, .bit-mnb-tbg, .bit-mnb-pfg, .bit-mnb-sfg, .bit-mnb-tfg, .bit-mnb-pbr, .bit-mnb-sbr, .bit-mnb-tbr) following the same pattern used for --bit-mnb-clr-dis and --bit-mnb-clr-dis-text so role-level *-focus overrides can control the MenuButton focus color.src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss (1)
22-24: 🛠️ Refactor suggestion | 🟠 Major | 🏗️ Heavy liftFocus ring should use the new per-role focus tokens.
The
:focus-visiblerule usesvar(--bit-btn-clr)butBitThemeMappernow publishes per-role*-focustokens. Define and reference--bit-btn-clr-focus(or a fallbackvar(--bit-btn-clr-focus, var(--bit-btn-clr))) so theme overrides for focus colors take effect.🔧 Suggested approach
- Update the focus-visible rule:
&:focus-visible { - `@include` focus-ring(var(--bit-btn-clr)); + `@include` focus-ring(var(--bit-btn-clr-focus, var(--bit-btn-clr))); }
- Define
--bit-btn-clr-focusfor each color variant (lines 189-357), e.g.:.bit-btn-pri { --bit-btn-clr: #{$clr-pri}; + --bit-btn-clr-focus: #{$clr-pri-focus}; --bit-btn-clr-txt: #{$clr-pri-text}; ... }Repeat for all variants (sec, ter, inf, suc, wrn, swr, err, pbg, sbg, tbg, pfg, sfg, tfg, pbr, sbr, tbr).
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss` around lines 22 - 24, The :focus-visible rule in BitButton.scss currently calls `@include` focus-ring(var(--bit-btn-clr)) and must be updated to use the new per-role focus token; change the argument to use --bit-btn-clr-focus with a fallback (e.g. var(--bit-btn-clr-focus, var(--bit-btn-clr))) so theme overrides apply, and then add definitions for --bit-btn-clr-focus for each color variant (primary/secondary/tertiary/info/success/warn/swear/error and the p/s/t background/foreground/border variants) alongside the existing --bit-btn-clr declarations so BitThemeMapper’s per-role focus tokens are honored by BitButton.src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss (1)
20-22:⚠️ Potential issue | 🟠 Major | ⚡ Quick winWire ToggleButton focus ring to focus tokens, not base color token.
Current focus style still uses
var(--bit-tgb-clr), soColor.*.Focusvalues won’t affectBitToggleButton. Add a dedicated--bit-tgb-clr-focusper variant and consume it with fallback.Suggested minimal change
.bit-tgb { &:focus-visible { - `@include` focus-ring(var(--bit-tgb-clr)); + `@include` focus-ring(var(--bit-tgb-clr-focus, var(--bit-tgb-clr))); } } .bit-tgb-pri { + --bit-tgb-clr-focus: #{$clr-pri-focus}; --bit-tgb-clr-txt: #{$clr-pri-text}; --bit-tgb-clr: #{$clr-pri}; ... }(Apply similarly to other variant blocks.)
Also applies to: 134-336
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss` around lines 20 - 22, The focus-ring currently uses var(--bit-tgb-clr) so Color.*.Focus tokens are ignored; update BitToggleButton styles to introduce and use a per-variant focus token (e.g., add a --bit-tgb-clr-focus fallback for each variant block) and change the &:focus-visible rule to call `@include` focus-ring(var(--bit-tgb-clr-focus, var(--bit-tgb-clr))); apply the same change to all variant blocks where --bit-tgb-clr is defined so the focus color honors Color.*.Focus.src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scss (1)
220-234:⚠️ Potential issue | 🟠 Major | ⚡ Quick winAdd missing secondary and tertiary focus tokens for foreground, background, and border roles.
Components using
SecondaryBackground,TertiaryBackground,SecondaryForeground,TertiaryForeground,SecondaryBorder, orTertiaryBordercannot bind to dedicated focus tokens because only primary variants exist (--bit-clr-fg-pri-focus,--bit-clr-bg-pri-focus,--bit-clr-brd-pri-focus). This forces secondary/tertiary components to fall back to their base role colors instead of dedicated focus colors, breaking the theming contract.🔧 Proposed fix
--bit-clr-fg-pri-focus: var(--bit-clr-fg-pri); + --bit-clr-fg-sec-focus: var(--bit-clr-fg-sec); + --bit-clr-fg-ter-focus: var(--bit-clr-fg-ter); --bit-clr-bg-pri-focus: var(--bit-clr-bg-pri); + --bit-clr-bg-sec-focus: var(--bit-clr-bg-sec); + --bit-clr-bg-ter-focus: var(--bit-clr-bg-ter); --bit-clr-brd-pri-focus: var(--bit-clr-brd-pri); + --bit-clr-brd-sec-focus: var(--bit-clr-brd-sec); + --bit-clr-brd-ter-focus: var(--bit-clr-brd-ter);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scss` around lines 220 - 234, The focus token set is incomplete: only primary foreground/background/border focus tokens exist (--bit-clr-fg-pri-focus, --bit-clr-bg-pri-focus, --bit-clr-brd-pri-focus), so secondary/tertiary components cannot use dedicated focus values; add the missing focus tokens --bit-clr-fg-sec-focus, --bit-clr-fg-ter-focus, --bit-clr-bg-sec-focus, --bit-clr-bg-ter-focus, --bit-clr-brd-sec-focus, and --bit-clr-brd-ter-focus and initialize each to the corresponding base role (e.g. --bit-clr-fg-sec-focus: var(--bit-clr-fg-sec), --bit-clr-bg-ter-focus: var(--bit-clr-bg-ter), etc.), placing them alongside the existing primary focus declarations so Secondary/TertiaryForeground, Secondary/TertiaryBackground, and Secondary/TertiaryBorder can bind to dedicated focus tokens.src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scss (1)
218-232:⚠️ Potential issue | 🟠 Major | ⚡ Quick winAdd missing secondary and tertiary focus tokens for foreground, background, and border roles.
Components using
SecondaryBackground,TertiaryBackground,SecondaryForeground,TertiaryForeground,SecondaryBorder, orTertiaryBordercannot bind to dedicated focus tokens because only primary variants exist. This creates an incomplete theming surface for secondary/tertiary component variants.🔧 Proposed fix
--bit-clr-fg-pri-focus: var(--bit-clr-fg-pri); + --bit-clr-fg-sec-focus: var(--bit-clr-fg-sec); + --bit-clr-fg-ter-focus: var(--bit-clr-fg-ter); --bit-clr-bg-pri-focus: var(--bit-clr-bg-pri); + --bit-clr-bg-sec-focus: var(--bit-clr-bg-sec); + --bit-clr-bg-ter-focus: var(--bit-clr-bg-ter); --bit-clr-brd-pri-focus: var(--bit-clr-brd-pri); + --bit-clr-brd-sec-focus: var(--bit-clr-brd-sec); + --bit-clr-brd-ter-focus: var(--bit-clr-brd-ter);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scss` around lines 218 - 232, Missing focus tokens for secondary and tertiary roles: add focus CSS custom properties for foreground, background, and border by declaring --bit-clr-fg-sec-focus, --bit-clr-bg-sec-focus, --bit-clr-brd-sec-focus and --bit-clr-fg-ter-focus, --bit-clr-bg-ter-focus, --bit-clr-brd-ter-focus and alias them to their corresponding base tokens (e.g. set --bit-clr-fg-sec-focus: var(--bit-clr-fg-sec); --bit-clr-bg-ter-focus: var(--bit-clr-bg-ter); etc.) alongside the existing primary focus tokens so components like SecondaryForeground/SecondaryBackground/SecondaryBorder and Tertiary* can bind to dedicated focus tokens.
🧹 Nitpick comments (2)
src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSsr.cs (1)
18-18: ⚡ Quick winNote:
consttostatic readonlyis a minor breaking change.The field was changed from
consttostatic readonlyto support dynamic initialization. This prevents compile-time constant usage, though such usage for a script body is unlikely. The change improves maintainability by centralizing attribute names.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSsr.cs` at line 18, The public field InlineHeadScriptBody in BitThemeSsr was changed from a compile-time const to static readonly (declared as public static readonly string InlineHeadScriptBody = BuildInlineScriptBody()), which is a breaking change for any consumers relying on a const; either revert it back to a public const string InlineHeadScriptBody with a literal value if dynamic initialization is not strictly required, or if dynamic initialization is required keep the static readonly but restore a compile-time constant by adding a new public const string InlineHeadScriptBodyConst with the literal value and leave public static readonly string InlineHeadScriptBody = BuildInlineScriptBody(); also add XML docs on BitThemeSsr/InlineHeadScriptBody documenting the change so callers know to migrate.src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss (1)
171-173: ⚡ Quick winUse dedicated focus tokens for Pivot focus-ring.
focus-ring(var(--bit-pvt-clr))ignores the new role-specific*.Focustheme contract and keeps focus color coupled to base color. Add a--bit-pvt-clr-focustoken per variant and use it with fallback.Suggested minimal change
.bit-pvti { &:focus-visible { - `@include` focus-ring(var(--bit-pvt-clr)); + `@include` focus-ring(var(--bit-pvt-clr-focus, var(--bit-pvt-clr))); } } .bit-pvti-sel { &:focus-visible { - `@include` focus-ring(var(--bit-pvt-clr)); + `@include` focus-ring(var(--bit-pvt-clr-focus, var(--bit-pvt-clr))); } } .bit-pvt-pri { + --bit-pvt-clr-focus: #{$clr-pri-focus}; --bit-pvt-clr: #{$clr-pri}; ... }Also applies to: 214-216, 257-392
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss` around lines 171 - 173, Replace uses of focus-ring(var(--bit-pvt-clr)) with a role-specific focus token that falls back to the base color: change calls to focus-ring(var(--bit-pvt-clr-focus, var(--bit-pvt-clr))). Add corresponding --bit-pvt-clr-focus CSS variables for each pivot variant where --bit-pvt-clr is defined (so the new token can be themed independently), and update every occurrence (e.g., the &:focus-visible blocks and the other ranges noted) to use the new fallback pattern to preserve current color if a focused token isn’t provided.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/BlazorUI/Bit.BlazorUI/Styles/media-queries.scss`:
- Around line 3-21: The breakpoint boundary is inconsistent: update the
media-query logic in BitMediaQuery (class/file BitMediaQuery.razor.cs) and
BitScreenQuery (class/file BitScreenQuery.cs) to match the SCSS variables (xs
max = 599px, sm min = 600px) by changing any hardcoded "(max-width: 600px)" to
"(max-width: 599px)" and any "(min-width: 601px)" to "(min-width: 600px)" (or
equivalent constants used there), then update the tests in BitMediaQueryTests
(src/.../BitMediaQueryTests.cs) to expect "(max-width: 599px)" and "(min-width:
600px)" accordingly; treat this as a breaking change for downstream consumers.
---
Duplicate comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss`:
- Around line 22-24: The :focus-visible rule in BitButton.scss currently calls
`@include` focus-ring(var(--bit-btn-clr)) and must be updated to use the new
per-role focus token; change the argument to use --bit-btn-clr-focus with a
fallback (e.g. var(--bit-btn-clr-focus, var(--bit-btn-clr))) so theme overrides
apply, and then add definitions for --bit-btn-clr-focus for each color variant
(primary/secondary/tertiary/info/success/warn/swear/error and the p/s/t
background/foreground/border variants) alongside the existing --bit-btn-clr
declarations so BitThemeMapper’s per-role focus tokens are honored by BitButton.
In `@src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss`:
- Around line 16-19: The focus-ring include in BitMenuButton.scss currently
hardcodes var(--bit-mnb-clr); change it to use a dedicated focus token
--bit-mnb-clr-focus (i.e. `@include` focus-ring(var(--bit-mnb-clr-focus))); then
add mapping for --bit-mnb-clr-focus inside every MenuButton color class (e.g.
.bit-mnb-pri, .bit-mnb-sec, .bit-mnb-ter, .bit-mnb-inf, .bit-mnb-suc,
.bit-mnb-wrn, .bit-mnb-swr, .bit-mnb-err, .bit-mnb-pbg, .bit-mnb-sbg,
.bit-mnb-tbg, .bit-mnb-pfg, .bit-mnb-sfg, .bit-mnb-tfg, .bit-mnb-pbr,
.bit-mnb-sbr, .bit-mnb-tbr) following the same pattern used for
--bit-mnb-clr-dis and --bit-mnb-clr-dis-text so role-level *-focus overrides can
control the MenuButton focus color.
In
`@src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss`:
- Around line 20-22: The focus-ring currently uses var(--bit-tgb-clr) so
Color.*.Focus tokens are ignored; update BitToggleButton styles to introduce and
use a per-variant focus token (e.g., add a --bit-tgb-clr-focus fallback for each
variant block) and change the &:focus-visible rule to call `@include`
focus-ring(var(--bit-tgb-clr-focus, var(--bit-tgb-clr))); apply the same change
to all variant blocks where --bit-tgb-clr is defined so the focus color honors
Color.*.Focus.
In `@src/BlazorUI/Bit.BlazorUI/Styles/bit-css.scss`:
- Line 1: The SCSS import currently uses a file extension in the import string
("`@import` \"theme-variables.scss\";") which violates
scss/load-partial-extension; update the import in bit-css.scss to drop the .scss
extension so it reads "`@import` \"theme-variables\";" (keep the same quoted name
so the partial _theme-variables.scss will be resolved).
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scss`:
- Around line 218-232: Missing focus tokens for secondary and tertiary roles:
add focus CSS custom properties for foreground, background, and border by
declaring --bit-clr-fg-sec-focus, --bit-clr-bg-sec-focus,
--bit-clr-brd-sec-focus and --bit-clr-fg-ter-focus, --bit-clr-bg-ter-focus,
--bit-clr-brd-ter-focus and alias them to their corresponding base tokens (e.g.
set --bit-clr-fg-sec-focus: var(--bit-clr-fg-sec); --bit-clr-bg-ter-focus:
var(--bit-clr-bg-ter); etc.) alongside the existing primary focus tokens so
components like SecondaryForeground/SecondaryBackground/SecondaryBorder and
Tertiary* can bind to dedicated focus tokens.
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scss`:
- Around line 220-234: The focus token set is incomplete: only primary
foreground/background/border focus tokens exist (--bit-clr-fg-pri-focus,
--bit-clr-bg-pri-focus, --bit-clr-brd-pri-focus), so secondary/tertiary
components cannot use dedicated focus values; add the missing focus tokens
--bit-clr-fg-sec-focus, --bit-clr-fg-ter-focus, --bit-clr-bg-sec-focus,
--bit-clr-bg-ter-focus, --bit-clr-brd-sec-focus, and --bit-clr-brd-ter-focus and
initialize each to the corresponding base role (e.g. --bit-clr-fg-sec-focus:
var(--bit-clr-fg-sec), --bit-clr-bg-ter-focus: var(--bit-clr-bg-ter), etc.),
placing them alongside the existing primary focus declarations so
Secondary/TertiaryForeground, Secondary/TertiaryBackground, and
Secondary/TertiaryBorder can bind to dedicated focus tokens.
---
Nitpick comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss`:
- Around line 171-173: Replace uses of focus-ring(var(--bit-pvt-clr)) with a
role-specific focus token that falls back to the base color: change calls to
focus-ring(var(--bit-pvt-clr-focus, var(--bit-pvt-clr))). Add corresponding
--bit-pvt-clr-focus CSS variables for each pivot variant where --bit-pvt-clr is
defined (so the new token can be themed independently), and update every
occurrence (e.g., the &:focus-visible blocks and the other ranges noted) to use
the new fallback pattern to preserve current color if a focused token isn’t
provided.
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSsr.cs`:
- Line 18: The public field InlineHeadScriptBody in BitThemeSsr was changed from
a compile-time const to static readonly (declared as public static readonly
string InlineHeadScriptBody = BuildInlineScriptBody()), which is a breaking
change for any consumers relying on a const; either revert it back to a public
const string InlineHeadScriptBody with a literal value if dynamic initialization
is not strictly required, or if dynamic initialization is required keep the
static readonly but restore a compile-time constant by adding a new public const
string InlineHeadScriptBodyConst with the literal value and leave public static
readonly string InlineHeadScriptBody = BuildInlineScriptBody(); also add XML
docs on BitThemeSsr/InlineHeadScriptBody documenting the change so callers know
to migrate.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 78c90892-e14b-473f-a62e-7f753a0a6f64
📒 Files selected for processing (130)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scsssrc/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.scsssrc/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scsssrc/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/bit-css.scsssrc/BlazorUI/Bit.BlazorUI/Styles/functions.scsssrc/BlazorUI/Bit.BlazorUI/Styles/media-queries.scsssrc/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scsssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme.tssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBoxShadows.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeColors.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeShapes.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeAttributeNames.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeName.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeProvider.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSerialization.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSsr.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeUtilities.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.tssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scsssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.tssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorDerivationTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperMergeDriftTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderHtmlAttributesTest.razorsrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeSsrTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/ThemeProbeConsumer.cs
💤 Files with no reviewable changes (1)
- src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts
Member
Author
|
@coderabbitai re-review |
|
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (3)
src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cs (1)
12-12: ⚡ Quick winConsider tightening the tolerance for consistency.
The tolerance of
0.01allows the ratio to vary between 20.99 and 21.01. The same-color test at line 20 uses a tighter tolerance of0.001. For an exact mathematical constant like the black-on-white contrast ratio (21:1), using the same tighter tolerance would improve the test's ability to detect calculation errors.🔧 Proposed consistency improvement
- Assert.AreEqual(21.0, ratio, 0.01); + Assert.AreEqual(21.0, ratio, 0.001);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cs` at line 12, The test assertion for the black-on-white contrast uses Assert.AreEqual(21.0, ratio, 0.01) with a 0.01 tolerance; tighten this to 0.001 to match the same-color test's precision and better catch calculation errors—locate the assertion in BitThemeColorContrastTests.cs (the Assert.AreEqual call comparing 21.0 and ratio) and change the tolerance argument from 0.01 to 0.001 while keeping the expected value 21.0.src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs (1)
317-326: ⚡ Quick winSet foreground color in disabled background wrapper for consistent contrast.
The disabled
*Backgroundexamples are wrapped in a<div style="background:var(--bit-clr-fg-sec);padding:1rem">, but unlike theChoiceGroupdemo (which sets bothbackgroundandcolor), this wrapper omits thecolorproperty. Addingcolor:var(--bit-clr-bg-sec)would ensure proper text contrast and align with the pattern established in other component demos.♻️ Suggested fix
-<div style="background:var(--bit-clr-fg-sec);padding:1rem"> +<div style=""background:var(--bit-clr-fg-sec);color:var(--bit-clr-bg-sec);padding:1rem"">🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs` around lines 317 - 326, The wrapper DIV around the disabled BitSearchBox examples lacks a foreground color, causing contrast inconsistencies; update the DIV's inline style (the element containing the BitSearchBox samples) to include color:var(--bit-clr-bg-sec) in addition to the existing background:var(--bit-clr-fg-sec);padding:1rem so the BitSearchBox examples (components named BitSearchBox with Placeholder values like "PrimaryBackground"/"SecondaryBackground"/"TertiaryBackground") render with the same text/background contrast pattern used in other demos.src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scss (1)
218-231: ⚡ Quick winAdd secondary/tertiary focus aliases for the surface roles.
Only the primary
fg/bg/brdfocus aliases were added here.SecondaryForeground,TertiaryForeground,SecondaryBackground,TertiaryBackground,SecondaryBorder, andTertiaryBorderstill have no dedicated*-focustokens, so those variants can't be themed independently for focus states.💡 Suggested direction
--bit-clr-fg-pri-focus: var(--bit-clr-fg-pri); + --bit-clr-fg-sec-focus: var(--bit-clr-fg-sec); + --bit-clr-fg-ter-focus: var(--bit-clr-fg-ter); --bit-clr-bg-pri-focus: var(--bit-clr-bg-pri); + --bit-clr-bg-sec-focus: var(--bit-clr-bg-sec); + --bit-clr-bg-ter-focus: var(--bit-clr-bg-ter); --bit-clr-brd-pri-focus: var(--bit-clr-brd-pri); + --bit-clr-brd-sec-focus: var(--bit-clr-brd-sec); + --bit-clr-brd-ter-focus: var(--bit-clr-brd-ter);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scss` around lines 218 - 231, The file defines focus aliases only for primary surface roles (e.g., --bit-clr-fg-pri-focus, --bit-clr-bg-pri-focus, --bit-clr-brd-pri-focus) but missing secondary/tertiary equivalents; add focus aliases for SecondaryForeground, TertiaryForeground, SecondaryBackground, TertiaryBackground, SecondaryBorder, and TertiaryBorder by declaring tokens like --bit-clr-fg-sec-focus, --bit-clr-fg-ter-focus, --bit-clr-bg-sec-focus, --bit-clr-bg-ter-focus, --bit-clr-brd-sec-focus, and --bit-clr-brd-ter-focus and point each to the corresponding base token (e.g., var(--bit-clr-fg-sec), var(--bit-clr-bg-ter), var(--bit-clr-brd-sec)) so those surface roles can be themed independently for focus states.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scss`:
- Around line 22-24: The :focus-visible block in BitLink.scss calls `@include`
focus-ring(var(--bit-lnk-clr)) but BitButton now uses per-variant focus tokens;
update BitLink to define --bit-lnk-clr-focus inside each variant block (e.g.,
.bit-lnk-pri, .bit-lnk-sec, .bit-lnk-ter and any other variants currently
defined) and change the mixin invocation in the &:focus-visible rule to `@include`
focus-ring(var(--bit-lnk-clr-focus)); ensure each variant block sets an
appropriate focus color value for --bit-lnk-clr-focus.
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scss`:
- Around line 9-15: The current reduced-motion rule sets --bit-mot-duration,
--bit-mot-duration-short, and --bit-mot-duration-long to 0.01ms which is
effectively a hack; update the `@media` (prefers-reduced-motion: reduce) :root
block so those CSS custom properties are set to 0ms (or set
animations/transitions to none where used) to fully honor the user's preference;
specifically change the values for --bit-mot-duration, --bit-mot-duration-short,
and --bit-mot-duration-long used by your motion/animation code paths (and ensure
any code reading these vars treats "0ms" as disabled).
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme.ts`:
- Around line 78-82: The current logic always overrides any explicit
Theme._initOptions.theme or Theme._initOptions.default when
Theme._initOptions.system is true; change it so OS resolution (using
Theme.isSystemDark() to set Theme._darkTheme or Theme._lightTheme) only runs
when the chosen value is explicitly 'system' or when neither theme nor default
were supplied (i.e., Theme._initOptions.theme === 'system' OR
(!Theme._initOptions.theme && !Theme._initOptions.default &&
Theme._initOptions.system)); otherwise leave the initially selected theme (from
Theme._initOptions.theme or Theme._initOptions.default) intact.
- Around line 312-327: The attach method currently writes any href into the DOM;
update BitTheme.attach to validate href before creating/updating the <link>:
parse the href with new URL(href, document.baseURI), ensure url.protocol is
'http:' or 'https:' and url.origin === location.origin (mirroring the C#
loader’s same‑origin + http(s) rules), and if validation fails do not set
link.href (log/throw as appropriate). Apply this validation at the start of
public static attach(linkId: string, href: string) before creating or assigning
to the link element so both create and update paths are protected.
- Around line 192-198: applyTheme currently unions historic CSS variable keys
(Theme._appliedVarKeys) and never removes keys that are omitted in a later
theme, leaving stale vars on the element; change applyTheme (the method in
BitTheme/Theme) to compute removed keys as those in prev but not in keys, call
el.style.removeProperty for each removed key, then set the new keys (and update
Theme._appliedVarKeys for the element to exactly the current keys) so applyTheme
behaves as a replace operation whether element is the provided HTMLElement or
document.body.
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cs`:
- Around line 8-18: Update the XML example in
BitThemeDensityPresets.CreateCompactOverlay's doc comment to clarify the
ThemeManager identifier: explicitly reference a BitThemeManager instance (e.g.,
name the variable bitThemeManager or state it is injected/created) and call its
ApplyBitThemeAsync(theme) method so the example matches the actual API signature
(BitThemeManager.ApplyBitThemeAsync(BitTheme? bitTheme, ElementReference?
element = null)); keep the rest of the example unchanged.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cs`:
- Around line 1394-1490: The disabled Primary/Secondary/Tertiary background
BitMenuButton examples (the BitMenuButton elements with
Text="PrimaryBackground"/"SecondaryBackground"/"TertiaryBackground" and
IsEnabled="false") are missing the contrast container used elsewhere, so they
render against the default page background; wrap each group of these disabled
samples (including both Split and non-Split variants) in the same contrast
container/component used by other background demos in this PR so they display
the correct disabled appearance.
---
Nitpick comments:
In `@src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scss`:
- Around line 218-231: The file defines focus aliases only for primary surface
roles (e.g., --bit-clr-fg-pri-focus, --bit-clr-bg-pri-focus,
--bit-clr-brd-pri-focus) but missing secondary/tertiary equivalents; add focus
aliases for SecondaryForeground, TertiaryForeground, SecondaryBackground,
TertiaryBackground, SecondaryBorder, and TertiaryBorder by declaring tokens like
--bit-clr-fg-sec-focus, --bit-clr-fg-ter-focus, --bit-clr-bg-sec-focus,
--bit-clr-bg-ter-focus, --bit-clr-brd-sec-focus, and --bit-clr-brd-ter-focus and
point each to the corresponding base token (e.g., var(--bit-clr-fg-sec),
var(--bit-clr-bg-ter), var(--bit-clr-brd-sec)) so those surface roles can be
themed independently for focus states.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs`:
- Around line 317-326: The wrapper DIV around the disabled BitSearchBox examples
lacks a foreground color, causing contrast inconsistencies; update the DIV's
inline style (the element containing the BitSearchBox samples) to include
color:var(--bit-clr-bg-sec) in addition to the existing
background:var(--bit-clr-fg-sec);padding:1rem so the BitSearchBox examples
(components named BitSearchBox with Placeholder values like
"PrimaryBackground"/"SecondaryBackground"/"TertiaryBackground") render with the
same text/background contrast pattern used in other demos.
In
`@src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cs`:
- Line 12: The test assertion for the black-on-white contrast uses
Assert.AreEqual(21.0, ratio, 0.01) with a 0.01 tolerance; tighten this to 0.001
to match the same-color test's precision and better catch calculation
errors—locate the assertion in BitThemeColorContrastTests.cs (the
Assert.AreEqual call comparing 21.0 and ratio) and change the tolerance argument
from 0.01 to 0.001 while keeping the expected value 21.0.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: b98d8739-bc76-4791-ba94-9306a09b764a
📒 Files selected for processing (131)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scsssrc/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.scsssrc/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/MediaQuery/BitMediaQuery.razor.cssrc/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/bit-css.scsssrc/BlazorUI/Bit.BlazorUI/Styles/functions.scsssrc/BlazorUI/Bit.BlazorUI/Styles/media-queries.scsssrc/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scsssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme.tssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBoxShadows.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeColors.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeShapes.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeAttributeNames.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeName.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeProvider.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSerialization.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSsr.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeUtilities.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.tssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scsssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.tssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorDerivationTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperMergeDriftTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderHtmlAttributesTest.razorsrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeSsrTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/ThemeProbeConsumer.cs
💤 Files with no reviewable changes (1)
- src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts
Member
Author
|
@coderabbitai re-review |
|
✅ Action performedFull review finished. |
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (2)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss (1)
256-257:⚠️ Potential issue | 🟠 Major | ⚡ Quick winUse focus-role tokens for all ToggleButton variant mappings.
Line [256], Line [269], Line [295], Line [308], Line [334], and Line [347] bind
--bit-tgb-clr-focusto base role tokens, which prevents dedicatedColor.*.Focusoverrides from applying to these variants.💡 Minimal fix
.bit-tgb-sbg { - --bit-tgb-clr-focus: #{$clr-bg-sec}; + --bit-tgb-clr-focus: var(--bit-clr-bg-sec-focus); } .bit-tgb-tbg { - --bit-tgb-clr-focus: #{$clr-bg-ter}; + --bit-tgb-clr-focus: var(--bit-clr-bg-ter-focus); } .bit-tgb-sfg { - --bit-tgb-clr-focus: #{$clr-fg-sec}; + --bit-tgb-clr-focus: var(--bit-clr-fg-sec-focus); } .bit-tgb-tfg { - --bit-tgb-clr-focus: #{$clr-fg-ter}; + --bit-tgb-clr-focus: var(--bit-clr-fg-ter-focus); } .bit-tgb-sbr { - --bit-tgb-clr-focus: #{$clr-brd-sec}; + --bit-tgb-clr-focus: var(--bit-clr-brd-sec-focus); } .bit-tgb-tbr { - --bit-tgb-clr-focus: #{$clr-brd-ter}; + --bit-tgb-clr-focus: var(--bit-clr-brd-ter-focus); }Also applies to: 269-270, 295-296, 308-309, 334-335, 347-348
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss` around lines 256 - 257, Replace direct bindings of the focus CSS variable so ToggleButton variants use the dedicated focus-role tokens: anywhere in BitToggleButton.scss where you set --bit-tgb-clr-focus to a base role token (e.g., --bit-tgb-clr-focus: #{$clr-bg-sec}; found in the blocks that also set --bit-tgb-clr-dark and similar for other variants), change the value to the corresponding focus token (use the Color.*.Focus / $*-focus role tokens for that variant) so Color.*.Focus overrides apply; update all occurrences of --bit-tgb-clr-focus (the instances at the variant mappings mentioned) to reference the variant-specific focus token instead of the base bg token.src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss (1)
334-336:⚠️ Potential issue | 🟠 Major | ⚡ Quick winMap all MenuButton focus variants to focus tokens, not base tokens.
Line [334], Line [344], Line [364], Line [374], Line [394], and Line [404] currently bind
--bit-mnb-clr-focusto non-focus role tokens, soColor.*.Focusoverrides won’t affect these variants.💡 Minimal fix
.bit-mnb-sbg { - --bit-mnb-clr-focus: #{$clr-bg-sec}; + --bit-mnb-clr-focus: var(--bit-clr-bg-sec-focus); } .bit-mnb-tbg { - --bit-mnb-clr-focus: #{$clr-bg-ter}; + --bit-mnb-clr-focus: var(--bit-clr-bg-ter-focus); } .bit-mnb-sfg { - --bit-mnb-clr-focus: #{$clr-fg-sec}; + --bit-mnb-clr-focus: var(--bit-clr-fg-sec-focus); } .bit-mnb-tfg { - --bit-mnb-clr-focus: #{$clr-fg-ter}; + --bit-mnb-clr-focus: var(--bit-clr-fg-ter-focus); } .bit-mnb-sbr { - --bit-mnb-clr-focus: #{$clr-brd-sec}; + --bit-mnb-clr-focus: var(--bit-clr-brd-sec-focus); } .bit-mnb-tbr { - --bit-mnb-clr-focus: #{$clr-brd-ter}; + --bit-mnb-clr-focus: var(--bit-clr-brd-ter-focus); }Also applies to: 344-346, 364-366, 374-376, 394-396, 404-406
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss` around lines 334 - 336, The focus color variable --bit-mnb-clr-focus is currently mapped to base (non-focus) role tokens (e.g., $clr-bg-sec, $clr-bg-sec-dis, $clr-bg-sec-dis-text) so Color.*.Focus overrides are ignored; update every assignment of --bit-mnb-clr-focus (the occurrences at the MenuButton variant blocks) to use the corresponding focus role tokens (e.g., replace $clr-bg-sec with its focus variant like $clr-bg-sec-focus, and similarly use the focus variants for text/disabled tokens) so the focus token overrides are honored across all variants.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss`:
- Around line 293-304: The CSS custom property --bit-btn-clr-focus is currently
being set to non-focus base tokens in several button variant blocks (e.g., the
.bit-btn-tbg block and the other variant blocks where --bit-btn-clr-focus
appears); update each occurrence so that --bit-btn-clr-focus uses the matching
focus design token (for example use $clr-bg-ter-focus for the ter variant,
$clr-bg-sec-focus for the sec variant, etc.) rather than the base color token,
ensuring each variant’s focus variable maps to its proper $clr-*-focus token.
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme.ts`:
- Around line 319-324: The JS validateHref routine in BitTheme.ts currently only
checks for leading '//' and '\\\\' protocol-relative URLs; update the same
function (validateHref or the block inside BitTheme.validateHref) to also detect
mixed-slash protocol-relative patterns such as '/\\' and '\\/' by using a check
that treats any combination of two leading slashes (forward/back) as
protocol-relative and throws the same Error('Stylesheet href must not be a
protocol-relative URL.'); ensure the new check mirrors the C# ValidateHref
behavior so mixed slash patterns are rejected.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cs`:
- Around line 295-296: The sample snippet for BitActionButton is missing the
explicit Color attribute for the disabled Primary example; update the first
BitActionButton in BitActionButtonDemo.razor.samples.cs to include
Color="BitColor.Primary" (matching the demo markup) while keeping
IsEnabled="false" and IconName="`@BitIconName.AddFriend`" so the sample output
aligns exactly with the rendered demo.
---
Duplicate comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss`:
- Around line 334-336: The focus color variable --bit-mnb-clr-focus is currently
mapped to base (non-focus) role tokens (e.g., $clr-bg-sec, $clr-bg-sec-dis,
$clr-bg-sec-dis-text) so Color.*.Focus overrides are ignored; update every
assignment of --bit-mnb-clr-focus (the occurrences at the MenuButton variant
blocks) to use the corresponding focus role tokens (e.g., replace $clr-bg-sec
with its focus variant like $clr-bg-sec-focus, and similarly use the focus
variants for text/disabled tokens) so the focus token overrides are honored
across all variants.
In
`@src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss`:
- Around line 256-257: Replace direct bindings of the focus CSS variable so
ToggleButton variants use the dedicated focus-role tokens: anywhere in
BitToggleButton.scss where you set --bit-tgb-clr-focus to a base role token
(e.g., --bit-tgb-clr-focus: #{$clr-bg-sec}; found in the blocks that also set
--bit-tgb-clr-dark and similar for other variants), change the value to the
corresponding focus token (use the Color.*.Focus / $*-focus role tokens for that
variant) so Color.*.Focus overrides apply; update all occurrences of
--bit-tgb-clr-focus (the instances at the variant mappings mentioned) to
reference the variant-specific focus token instead of the base bg token.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: bea8c4db-b459-4d29-a54c-3a65786bb6be
📒 Files selected for processing (131)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scsssrc/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.scsssrc/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/MediaQuery/BitMediaQuery.razor.cssrc/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/bit-css.scsssrc/BlazorUI/Bit.BlazorUI/Styles/functions.scsssrc/BlazorUI/Bit.BlazorUI/Styles/media-queries.scsssrc/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scsssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme.tssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBoxShadows.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeColors.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeShapes.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeAttributeNames.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeName.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeProvider.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSerialization.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSsr.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeUtilities.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.tssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scsssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.tssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorDerivationTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperMergeDriftTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderHtmlAttributesTest.razorsrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeSsrTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/ThemeProbeConsumer.cs
💤 Files with no reviewable changes (1)
- src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts
Member
Author
|
@coderabbitai re-review |
|
✅ Action performedFull review finished. |
There was a problem hiding this comment.
Actionable comments posted: 9
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cs (1)
416-574:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winSample code missing disabled examples shown in the demo.
The
example14RazorCodesample does not include the disabled color variant examples that were added to the Color demo in_BitMenuButtonItemDemo.razor(lines 512-719). Users viewing the demo will see disabled examples for all color variants but won't find the corresponding code in the sample snippets.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cs` around lines 416 - 574, The example14RazorCode sample string is missing disabled color variant examples that are shown in the actual Color demo. Update the example14RazorCode variable to include BitMenuButton components with the Disabled attribute set to true for each color and variant combination (Primary, Secondary, Tertiary, Info, Success, Warning, SevereWarning, Error, PrimaryBackground, SecondaryBackground, TertiaryBackground, PrimaryForeground, SecondaryForeground, TertiaryForeground, PrimaryBorder, SecondaryBorder, and TertiaryBorder). For each color group, add disabled versions of all three variants (Fill, Outline, Text) and their Split counterparts, matching the structure already present in the non-disabled examples.src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor (1)
592-596:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winSection label and configured color are inconsistent.
Line 592 says
Warning:, but Line 595 configuresColor="BitColor.Success". Rename one side so the demo label matches behavior.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor` around lines 592 - 596, The demo section label "Warning:" on line 592 does not match the configured Color="BitColor.Success" on the BitPivot component on line 595. Update the section label text in the div element to match the BitColor.Success configuration, changing "Warning:" to "Success:" or another label that accurately describes the color being demonstrated.
♻️ Duplicate comments (2)
src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme.ts (1)
388-390:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winJS validator still misses mixed-slash protocol-relative patterns.
The C#
ValidateHrefblocks/\and\/variants (lines 64-65 in BitExternalThemeLoader.cs), but the JSvalidateHrefonly checks//and\\. Browsers may normalize these mixed-slash patterns to protocol-relative URLs.Suggested fix
public static validateHref(href: string) { const trimmed = href?.trimStart(); if (!trimmed) { throw new Error('Stylesheet href is required.'); } - if (trimmed.startsWith('//') || trimmed.startsWith('\\\\')) { + if (trimmed.startsWith('//') || trimmed.startsWith('\\\\') || + trimmed.startsWith('/\\') || trimmed.startsWith('\\/')) { throw new Error('Stylesheet href must not be a protocol-relative URL.'); }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme.ts` around lines 388 - 390, The JS validateHref function in BitTheme.ts only validates against `//` and `\\` patterns but misses the mixed-slash protocol-relative variants `/\` and `\/` that the C# ValidateHref method in BitExternalThemeLoader.cs correctly blocks (lines 64-65). Browsers may normalize these mixed-slash patterns to protocol-relative URLs, so you need to add additional validation checks in the validateHref function alongside the existing checks for `//` and `\\` to also detect and reject the `/\` and `\/` patterns using startsWith checks similar to the existing ones.src/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.scss (1)
1-1:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winRemove the
.scssextension from the import.The import includes the
.scssextension, which violates thescss/load-partial-extensionstylelint rule. Remove the extension to satisfy the linter.✂️ Proposed fix
-@import "../../../Styles/functions.scss"; +@import "../../../Styles/functions";🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.scss` at line 1, In the BitGrid.scss file, remove the `.scss` extension from the import statement on the first line. Change the import path from "../../../Styles/functions.scss" to "../../../Styles/functions" to comply with the scss/load-partial-extension stylelint rule.
🧹 Nitpick comments (2)
src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderTests.cs (1)
204-227: ⚡ Quick winConsider asserting that non-conflicting parent values are preserved during merge.
The test sets
parent.Color.Secondary.Main = ParentSecondarybut only asserts thatinner.Color.Primary.Mainwins. It does not verify that the parent'sSecondaryvalue is inherited when the inner theme does not override it. While the test correctly validates the override behavior stated in its name, adding an assertion forSecondarywould provide more complete coverage of the merge semantics (inner values override, parent values fill gaps).Optional enhancement
Extend
ThemeProbeConsumerto expose adata-secondaryattribute, or add a direct assertion:var probe = component.Find("span"); // Inner Theme's Primary.Main should win. Assert.AreEqual(InnerPrimary, probe.GetAttribute("data-primary")); + // Parent's Secondary should be inherited (inner didn't override it). + // (requires ThemeProbeConsumer to expose data-secondary or a similar test assertion)🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderTests.cs` around lines 204 - 227, The InnerThemeMergesOverParentTheme test validates that inner theme values override parent values, but it does not verify that parent values are preserved when the inner theme does not override them. Extend the test to add an assertion that the parent's Color.Secondary.Main value (ParentSecondary) is correctly inherited and applied when the inner theme does not set a Secondary color. This requires either extending the BitThemeProviderTestHost component or its probe consumer to expose a data-secondary attribute on the rendered element, or adding a direct assertion on the computed style for the secondary color to confirm the merge semantics work correctly in both directions.src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeModelCoverageTests.cs (1)
118-122: 💤 Low valueConsider fail-fast when
Activator.CreateInstancereturns null.
Activator.CreateInstancereturnsnullwhen the type lacks a parameterless constructor. The current code silently skips such branches withcontinue, which could mask a model structure defect (e.g., a theme branch type missing its constructor). Consider logging a warning or failing fast to surface the issue during test authoring.Optional enhancement
var child = prop.GetValue(obj); if (child is null) { child = Activator.CreateInstance(pt); - if (child is null) continue; + if (child is null) + { + throw new InvalidOperationException( + $"Cannot instantiate branch type {pt.FullName}; ensure it has a public parameterless constructor."); + } prop.SetValue(obj, child); }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeModelCoverageTests.cs` around lines 118 - 122, The code silently continues when Activator.CreateInstance(pt) returns null (indicating a missing parameterless constructor), which can hide model structure defects. Instead of using continue when child is null after the Activator.CreateInstance call, add a warning log or throw an exception to surface the issue during test authoring. This fail-fast approach will help identify theme branch types that are missing their required constructors.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss`:
- Line 640: In BitSearchBox.scss, fix the inconsistent focus token mappings
where the --bit-srb-clr-focus property in the secondary and tertiary color
variants is incorrectly mapped to base color tokens instead of their -focus
variants. For the six class selectors (.bit-srb-sbg, .bit-srb-tbg, .bit-srb-sfg,
.bit-srb-tfg, .bit-srb-sbr, .bit-srb-tbr), replace the base color token
variables with their corresponding -focus variants: change $clr-bg-sec to
$clr-bg-sec-focus, $clr-bg-ter to $clr-bg-ter-focus, $clr-fg-sec to
$clr-fg-sec-focus, $clr-fg-ter to $clr-fg-ter-focus, $clr-brd-sec to
$clr-brd-sec-focus, and $clr-brd-ter to $clr-brd-ter-focus. This ensures
consistency with primary variants and enables proper theme-level focus
customization for these color options.
In `@src/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scss`:
- Around line 11-12: The CSS custom properties `--bit-pgn-clr-dis` and
`--bit-pgn-clr-txt-dis` reference variant-provided variables without fallback
values, causing unpredictable resolution when a pagination component lacks a
color variant class. Add fallback values to both variable assignments using the
CSS custom property fallback syntax: for `--bit-pgn-clr-dis`, provide a fallback
after `--bit-pgn-clr-dis-bg`, and for `--bit-pgn-clr-txt-dis`, provide a
fallback after `--bit-pgn-clr-dis-text`. The fallbacks should be reasonable
default disabled color values (such as a standard gray or neutral color) that
ensure predictable styling even in the absence of a variant class.
In `@src/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scss`:
- Line 8: The CSS custom property `--bit-bdg-cnt-clr-txt` is using
`var(--bit-bdg-clr-dis-text)` without a fallback value, which causes
unpredictable color resolution if the disabled text color variable is not
defined in a color variant class. Add a fallback value to the var() function by
providing a second parameter with an appropriate default color (e.g., a standard
text color or inherited value) so that `--bit-bdg-cnt-clr-txt` resolves
predictably even when a badge lacks a color variant class.
In `@src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss`:
- Line 47: The disabled text color variable var(--bit-tag-clr-dis-text) is used
in three variant style selectors (.bit-tag-fil, .bit-tag-otl, .bit-tag-txt) at
lines 47, 59, and 71 without providing fallback values. This causes
unpredictable color resolution when a tag has a variant style but lacks a
corresponding color variant class. Add a fallback color value to each
var(--bit-tag-clr-dis-text) reference using the CSS variable fallback syntax
(second parameter in the var() function) at all three locations to ensure
consistent disabled text color rendering across variant combinations.
In `@src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scss`:
- Line 10: The disabled color CSS variables var(--bit-ico-clr-dis-text) and
var(--bit-ico-clr-dis) in the BitIcon.scss file lack fallback values, which
causes unpredictable rendering when these variables are not defined. Add
appropriate fallback values to all var() declarations at each affected location:
at line 10 for var(--bit-ico-clr-dis-text), at lines 21-23 for disabled state
colors, at lines 33-35 for another disabled color variant, and at line 47 for
the final disabled color reference. Each var() call should include a fallback
value after a comma to ensure predictable disabled state styling even when the
custom property is undefined.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cs`:
- Around line 489-517: The nine disabled BitButtonGroup examples with
PrimaryBackground, SecondaryBackground, and TertiaryBackground colors in
example11RazorCode are not wrapped with the dark background container that is
used in the live demo rendered in _BitButtonGroupOptionDemo.razor. Identify the
dark background container wrapper used in the actual demo for these Background
color examples and wrap all nine of these BitButtonGroup components with the
same container in the example11RazorCode snippet to ensure the code display
matches the rendered demo appearance.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs`:
- Around line 616-635: The sample code snippets in these three files are missing
the wrapper container styling that provides proper visual context in their
corresponding live `.razor` demos, causing copied samples to lack the intended
contrast and layout. In
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs
at lines 616-635, wrap the disabled BitChoiceGroup examples with
PrimaryBackground, SecondaryBackground, and TertiaryBackground colors in the
same styled div container used by the live demo. In
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs
at lines 584-603, add the same disabled-background wrapper markup from the
corresponding live demo around those examples. In
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs
at lines 317-324, wrap the disabled *Background search box samples with the
container styling from the live demo. Reference the corresponding `.razor` files
to identify the exact wrapper styling needed at each location.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cs`:
- Around line 181-183: The sample code snippet for the Disabled example contains
raw text "Disabled:" that doesn't match the formatted heading used in the actual
demo component rendering. Update the snippet to replace the raw "Disabled:" text
with the same formatted heading structure (likely a heading tag or styled
component) that is used in the corresponding demo component section to ensure
consistency between the source snippet and the rendered documentation output.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cs`:
- Around line 62-64: Replace the HTML comment `<!-- Disabled: -->` in the
BitPaginationDemo.razor.samples.cs file with a visible heading element (such as
an h3 or similar heading tag) that matches the heading pattern used in the
corresponding .razor demo file. This will ensure the sample displays
consistently with the rendered demo structure and improves readability when
scanning the samples.
---
Outside diff comments:
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cs`:
- Around line 416-574: The example14RazorCode sample string is missing disabled
color variant examples that are shown in the actual Color demo. Update the
example14RazorCode variable to include BitMenuButton components with the
Disabled attribute set to true for each color and variant combination (Primary,
Secondary, Tertiary, Info, Success, Warning, SevereWarning, Error,
PrimaryBackground, SecondaryBackground, TertiaryBackground, PrimaryForeground,
SecondaryForeground, TertiaryForeground, PrimaryBorder, SecondaryBorder, and
TertiaryBorder). For each color group, add disabled versions of all three
variants (Fill, Outline, Text) and their Split counterparts, matching the
structure already present in the non-disabled examples.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor`:
- Around line 592-596: The demo section label "Warning:" on line 592 does not
match the configured Color="BitColor.Success" on the BitPivot component on line
595. Update the section label text in the div element to match the
BitColor.Success configuration, changing "Warning:" to "Success:" or another
label that accurately describes the color being demonstrated.
---
Duplicate comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.scss`:
- Line 1: In the BitGrid.scss file, remove the `.scss` extension from the import
statement on the first line. Change the import path from
"../../../Styles/functions.scss" to "../../../Styles/functions" to comply with
the scss/load-partial-extension stylelint rule.
In `@src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme.ts`:
- Around line 388-390: The JS validateHref function in BitTheme.ts only
validates against `//` and `\\` patterns but misses the mixed-slash
protocol-relative variants `/\` and `\/` that the C# ValidateHref method in
BitExternalThemeLoader.cs correctly blocks (lines 64-65). Browsers may normalize
these mixed-slash patterns to protocol-relative URLs, so you need to add
additional validation checks in the validateHref function alongside the existing
checks for `//` and `\\` to also detect and reject the `/\` and `\/` patterns
using startsWith checks similar to the existing ones.
---
Nitpick comments:
In
`@src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeModelCoverageTests.cs`:
- Around line 118-122: The code silently continues when
Activator.CreateInstance(pt) returns null (indicating a missing parameterless
constructor), which can hide model structure defects. Instead of using continue
when child is null after the Activator.CreateInstance call, add a warning log or
throw an exception to surface the issue during test authoring. This fail-fast
approach will help identify theme branch types that are missing their required
constructors.
In `@src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderTests.cs`:
- Around line 204-227: The InnerThemeMergesOverParentTheme test validates that
inner theme values override parent values, but it does not verify that parent
values are preserved when the inner theme does not override them. Extend the
test to add an assertion that the parent's Color.Secondary.Main value
(ParentSecondary) is correctly inherited and applied when the inner theme does
not set a Secondary color. This requires either extending the
BitThemeProviderTestHost component or its probe consumer to expose a
data-secondary attribute on the rendered element, or adding a direct assertion
on the computed style for the secondary color to confirm the merge semantics
work correctly in both directions.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 3d64f3a4-00b0-4ea0-88d5-cb04f3c9f564
📒 Files selected for processing (136)
src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scsssrc/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scsssrc/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.scsssrc/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scsssrc/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scsssrc/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scsssrc/BlazorUI/Bit.BlazorUI/Components/Utilities/MediaQuery/BitMediaQuery.razor.cssrc/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cssrc/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/IJSRuntimeExtensions.cssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scsssrc/BlazorUI/Bit.BlazorUI/Styles/bit-css.scsssrc/BlazorUI/Bit.BlazorUI/Styles/functions.scsssrc/BlazorUI/Bit.BlazorUI/Styles/media-queries.scsssrc/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scsssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme.tssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBoxShadows.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeColors.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeShapes.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeTypography.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeAttributeNames.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeName.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeProvider.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSerialization.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSsr.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeUtilities.cssrc/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.tssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scsssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cssrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razorsrc/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.tssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorDerivationTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeManagerTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperContractTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperMergeDriftTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeModelCoverageTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderHtmlAttributesTest.razorsrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeSsrTests.cssrc/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/ThemeProbeConsumer.cs
💤 Files with no reviewable changes (1)
- src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts
| --bit-srb-clr-txt: #{$clr-fg-pri}; | ||
| --bit-srb-clr-hover: #{$clr-bg-sec-hover}; | ||
| --bit-srb-clr-active: #{$clr-bg-sec-active}; | ||
| --bit-srb-clr-focus: #{$clr-bg-sec}; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Check if secondary/tertiary focus tokens are defined in the theme system.
# Search for the missing focus token definitions in theme files
echo "Searching for secondary/tertiary focus token definitions..."
rg -n '\$clr-(bg|fg|brd)-(sec|ter)-focus' --type scss
# Also check if they're defined as CSS custom properties
echo -e "\nSearching for CSS custom property definitions..."
rg -n '--clr-(bg|fg|brd)-(sec|ter)-focus' --type scssRepository: bitfoundation/bitplatform
Length of output: 662
🏁 Script executed:
#!/bin/bash
# Find and inspect BitSearchBox.scss file
echo "=== Locating BitSearchBox.scss ==="
fd BitSearchBox.scss
echo -e "\n=== Searching for -focus token definitions (scss files) ==="
rg '\$clr-(bg|fg|brd)-(sec|ter)-focus' 2>/dev/null | head -20
echo -e "\n=== Searching for CSS custom property focus definitions ==="
rg -- '--clr-(bg|fg|brd)-(sec|ter)-focus' 2>/dev/null | head -20
echo -e "\n=== Searching for where -focus variants ARE used ==="
rg '\$clr-(bg|fg|brd)-(pri|inf|suc|wrn|err)-focus' 2>/dev/null | head -20Repository: bitfoundation/bitplatform
Length of output: 3998
🏁 Script executed:
#!/bin/bash
# Inspect the BitSearchBox.scss file at the mentioned lines
echo "=== Reading BitSearchBox.scss around lines 640, 650, 670, 680, 700, 710 ==="
SEARCHBOX_FILE=$(fd BitSearchBox.scss)
if [ -n "$SEARCHBOX_FILE" ]; then
echo "File found: $SEARCHBOX_FILE"
echo -e "\n--- Lines 630-640 ---"
sed -n '630,640p' "$SEARCHBOX_FILE" | cat -n
echo -e "\n--- Lines 645-655 ---"
sed -n '645,655p' "$SEARCHBOX_FILE" | cat -n
echo -e "\n--- Lines 665-675 ---"
sed -n '665,675p' "$SEARCHBOX_FILE" | cat -n
echo -e "\n--- Lines 695-710 ---"
sed -n '695,710p' "$SEARCHBOX_FILE" | cat -n
else
echo "BitSearchBox.scss not found"
fiRepository: bitfoundation/bitplatform
Length of output: 2277
🏁 Script executed:
#!/bin/bash
# Search for where secondary/tertiary base tokens are defined
echo "=== Searching for secondary/tertiary base token definitions ==="
rg '\$clr-(bg|fg|brd)-(sec|ter)[^-]' 2>/dev/null | grep -v 'focus' | head -30Repository: bitfoundation/bitplatform
Length of output: 3003
🏁 Script executed:
#!/bin/bash
# Check theme files for all color token definitions
echo "=== Looking for theme configuration files ==="
fd -e scss -e css | xargs grep -l 'clr-bg-sec\|clr-fg-sec\|clr-brd-sec' 2>/dev/null | head -10Repository: bitfoundation/bitplatform
Length of output: 874
🏁 Script executed:
#!/bin/bash
# Verify line 680 and check full context around tfg class
echo "=== Reading lines 675-685 for tfg class ==="
sed -n '675,685p' src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss | cat -nRepository: bitfoundation/bitplatform
Length of output: 530
🏁 Script executed:
#!/bin/bash
# Compare with BitLink.scss to confirm the correct pattern
echo "=== BitLink.scss showing correct -focus token usage ==="
grep -n 'clr-.*-focus' src/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scss | head -15Repository: bitfoundation/bitplatform
Length of output: 864
Fix inconsistent focus token mapping in SearchBox color variants.
The secondary and tertiary color variants in BitSearchBox.scss incorrectly map --bit-srb-clr-focus to base color tokens instead of their -focus variants. All required focus tokens are defined in the theme system and are used correctly in other components (BitLink.scss). Update these six lines:
- Line 640 (
.bit-srb-sbg): change#{$clr-bg-sec}to#{$clr-bg-sec-focus} - Line 650 (
.bit-srb-tbg): change#{$clr-bg-ter}to#{$clr-bg-ter-focus} - Line 670 (
.bit-srb-sfg): change#{$clr-fg-sec}to#{$clr-fg-sec-focus} - Line 680 (
.bit-srb-tfg): change#{$clr-fg-ter}to#{$clr-fg-ter-focus} - Line 700 (
.bit-srb-sbr): change#{$clr-brd-sec}to#{$clr-brd-sec-focus} - Line 710 (
.bit-srb-tbr): change#{$clr-brd-ter}to#{$clr-brd-ter-focus}
This breaks consistency with primary variants and prevents proper theme-level focus customization for these color options.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss` at
line 640, In BitSearchBox.scss, fix the inconsistent focus token mappings where
the --bit-srb-clr-focus property in the secondary and tertiary color variants is
incorrectly mapped to base color tokens instead of their -focus variants. For
the six class selectors (.bit-srb-sbg, .bit-srb-tbg, .bit-srb-sfg, .bit-srb-tfg,
.bit-srb-sbr, .bit-srb-tbr), replace the base color token variables with their
corresponding -focus variants: change $clr-bg-sec to $clr-bg-sec-focus,
$clr-bg-ter to $clr-bg-ter-focus, $clr-fg-sec to $clr-fg-sec-focus, $clr-fg-ter
to $clr-fg-ter-focus, $clr-brd-sec to $clr-brd-sec-focus, and $clr-brd-ter to
$clr-brd-ter-focus. This ensures consistency with primary variants and enables
proper theme-level focus customization for these color options.
Comment on lines
+11
to
+12
| --bit-pgn-clr-dis: var(--bit-pgn-clr-dis-bg); | ||
| --bit-pgn-clr-txt-dis: var(--bit-pgn-clr-dis-text); |
There was a problem hiding this comment.
Add fallbacks for derived disabled color variables.
--bit-pgn-clr-dis and --bit-pgn-clr-txt-dis derive from variant-provided --bit-pgn-clr-dis-bg and --bit-pgn-clr-dis-text without fallbacks. If a pagination instance lacks a color variant class, disabled colors resolve unpredictably via inheritance.
🎯 Proposed fix
- --bit-pgn-clr-dis: var(--bit-pgn-clr-dis-bg);
- --bit-pgn-clr-txt-dis: var(--bit-pgn-clr-dis-text);
+ --bit-pgn-clr-dis: var(--bit-pgn-clr-dis-bg, #{$clr-fg-dis});
+ --bit-pgn-clr-txt-dis: var(--bit-pgn-clr-dis-text, #{$clr-fg-dis});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| --bit-pgn-clr-dis: var(--bit-pgn-clr-dis-bg); | |
| --bit-pgn-clr-txt-dis: var(--bit-pgn-clr-dis-text); | |
| --bit-pgn-clr-dis: var(--bit-pgn-clr-dis-bg, #{$clr-fg-dis}); | |
| --bit-pgn-clr-txt-dis: var(--bit-pgn-clr-dis-text, #{$clr-fg-dis}); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scss`
around lines 11 - 12, The CSS custom properties `--bit-pgn-clr-dis` and
`--bit-pgn-clr-txt-dis` reference variant-provided variables without fallback
values, causing unpredictable resolution when a pagination component lacks a
color variant class. Add fallback values to both variable assignments using the
CSS custom property fallback syntax: for `--bit-pgn-clr-dis`, provide a fallback
after `--bit-pgn-clr-dis-bg`, and for `--bit-pgn-clr-txt-dis`, provide a
fallback after `--bit-pgn-clr-dis-text`. The fallbacks should be reasonable
default disabled color values (such as a standard gray or neutral color) that
ensure predictable styling even in the absence of a variant class.
|
|
||
| &.bit-dis { | ||
| --bit-bdg-cnt-clr-txt: #{$clr-fg-dis}; | ||
| --bit-bdg-cnt-clr-txt: var(--bit-bdg-clr-dis-text); |
There was a problem hiding this comment.
Add fallback for disabled text color variable.
--bit-bdg-cnt-clr-txt on line 8 uses var(--bit-bdg-clr-dis-text) without a fallback. If a badge lacks a color variant class, disabled text color resolves unpredictably via inheritance.
🎯 Proposed fix
&.bit-dis {
- --bit-bdg-cnt-clr-txt: var(--bit-bdg-clr-dis-text);
+ --bit-bdg-cnt-clr-txt: var(--bit-bdg-clr-dis-text, #{$clr-fg-dis});
--bit-bdg-cnt-clr-bg: var(--bit-bdg-clr-bg-dis);
--bit-bdg-cnt-clr-brd: var(--bit-bdg-clr-brd-dis);
}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scss` at
line 8, The CSS custom property `--bit-bdg-cnt-clr-txt` is using
`var(--bit-bdg-clr-dis-text)` without a fallback value, which causes
unpredictable color resolution if the disabled text color variable is not
defined in a color variant class. Add a fallback value to the var() function by
providing a second parameter with an appropriate default color (e.g., a standard
text color or inherited value) so that `--bit-bdg-cnt-clr-txt` resolves
predictably even when a badge lacks a color variant class.
| &.bit-dis { | ||
| border-color: $clr-brd-dis; | ||
| background-color: $clr-bg-dis; | ||
| color: var(--bit-tag-clr-dis-text); |
There was a problem hiding this comment.
Add fallbacks for disabled color variables in variant styles.
Lines 47, 59, and 71 use var(--bit-tag-clr-dis-text) without fallbacks. If a tag has a variant style (.bit-tag-fil, .bit-tag-otl, or .bit-tag-txt) but lacks a color variant class, disabled text color resolves unpredictably.
🎯 Proposed fix
.bit-tag-fil {
color: var(--bit-tag-clr-txt);
border-color: var(--bit-tag-clr);
background-color: var(--bit-tag-clr);
&.bit-dis {
- color: var(--bit-tag-clr-dis-text);
- border-color: var(--bit-tag-clr-dis);
- background-color: var(--bit-tag-clr-dis);
+ color: var(--bit-tag-clr-dis-text, #{$clr-fg-dis});
+ border-color: var(--bit-tag-clr-dis, #{$clr-fg-dis});
+ background-color: var(--bit-tag-clr-dis, #{$clr-fg-dis});
}
}
.bit-tag-otl {
color: var(--bit-tag-clr);
border-color: var(--bit-tag-clr);
background-color: transparent;
&.bit-dis {
- color: var(--bit-tag-clr-dis-text);
- border-color: var(--bit-tag-clr-dis);
+ color: var(--bit-tag-clr-dis-text, #{$clr-fg-dis});
+ border-color: var(--bit-tag-clr-dis, #{$clr-fg-dis});
background-color: transparent;
}
}
.bit-tag-txt {
color: var(--bit-tag-clr);
border-color: transparent;
background-color: transparent;
&.bit-dis {
- color: var(--bit-tag-clr-dis-text);
+ color: var(--bit-tag-clr-dis-text, #{$clr-fg-dis});
border-color: transparent;
background-color: transparent;
}
}Also applies to: 59-59, 71-71
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss` at line
47, The disabled text color variable var(--bit-tag-clr-dis-text) is used in
three variant style selectors (.bit-tag-fil, .bit-tag-otl, .bit-tag-txt) at
lines 47, 59, and 71 without providing fallback values. This causes
unpredictable color resolution when a tag has a variant style but lacks a
corresponding color variant class. Add a fallback color value to each
var(--bit-tag-clr-dis-text) reference using the CSS variable fallback syntax
(second parameter in the var() function) at all three locations to ensure
consistent disabled text color rendering across variant combinations.
|
|
||
| &.bit-dis { | ||
| color: $clr-fg-dis; | ||
| color: var(--bit-ico-clr-dis-text); |
There was a problem hiding this comment.
Add fallbacks for disabled color variables.
Lines 10, 21, 33, and 47 use var(--bit-ico-clr-dis-text) and var(--bit-ico-clr-dis) without fallbacks. If an icon lacks a color variant class, disabled colors resolve unpredictably.
🎯 Proposed fix
.bit-ico {
padding: spacing(0.5);
border-radius: $shp-border-radius;
border-style: $shp-border-style;
border-width: $shp-border-width;
&.bit-dis {
- color: var(--bit-ico-clr-dis-text);
+ color: var(--bit-ico-clr-dis-text, #{$clr-fg-dis});
}
}
.bit-ico-fil {
color: var(--bit-ico-clr-txt);
border-color: var(--bit-ico-clr);
background-color: var(--bit-ico-clr);
&.bit-dis {
- color: var(--bit-ico-clr-dis-text);
- border-color: var(--bit-ico-clr-dis);
- background-color: var(--bit-ico-clr-dis);
+ color: var(--bit-ico-clr-dis-text, #{$clr-fg-dis});
+ border-color: var(--bit-ico-clr-dis, #{$clr-fg-dis});
+ background-color: var(--bit-ico-clr-dis, #{$clr-fg-dis});
}
}
.bit-ico-out {
color: var(--bit-ico-clr);
border-color: var(--bit-ico-clr);
background-color: transparent;
&.bit-dis {
- color: var(--bit-ico-clr-dis-text);
- border-color: var(--bit-ico-clr-dis);
+ color: var(--bit-ico-clr-dis-text, #{$clr-fg-dis});
+ border-color: var(--bit-ico-clr-dis, #{$clr-fg-dis});
background-color: transparent;
}
}
.bit-ico-txt {
color: var(--bit-ico-clr);
border-color: transparent;
background-color: transparent;
border: none;
padding: 0;
&.bit-dis {
- color: var(--bit-ico-clr-dis-text);
+ color: var(--bit-ico-clr-dis-text, #{$clr-fg-dis});
}
}Also applies to: 21-23, 33-35, 47-47
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scss` at line 10,
The disabled color CSS variables var(--bit-ico-clr-dis-text) and
var(--bit-ico-clr-dis) in the BitIcon.scss file lack fallback values, which
causes unpredictable rendering when these variables are not defined. Add
appropriate fallback values to all var() declarations at each affected location:
at line 10 for var(--bit-ico-clr-dis-text), at lines 21-23 for disabled state
colors, at lines 33-35 for another disabled color variant, and at line 47 for
the final disabled color reference. Each var() call should include a fallback
value after a comma to ensure predictable disabled state styling even when the
custom property is undefined.
Comment on lines
+489
to
+517
| <BitButtonGroup IsEnabled=""false"" Color=""BitColor.PrimaryBackground"" Variant=""BitVariant.Fill"" TItem=""BitButtonGroupOption""> | ||
| <BitButtonGroupOption Text=""Add"" /><BitButtonGroupOption Text=""Edit"" /><BitButtonGroupOption Text=""Delete"" /> | ||
| </BitButtonGroup> | ||
| <BitButtonGroup IsEnabled=""false"" Color=""BitColor.PrimaryBackground"" Variant=""BitVariant.Outline"" TItem=""BitButtonGroupOption""> | ||
| <BitButtonGroupOption Text=""Add"" /><BitButtonGroupOption Text=""Edit"" /><BitButtonGroupOption Text=""Delete"" /> | ||
| </BitButtonGroup> | ||
| <BitButtonGroup IsEnabled=""false"" Color=""BitColor.PrimaryBackground"" Variant=""BitVariant.Text"" TItem=""BitButtonGroupOption""> | ||
| <BitButtonGroupOption Text=""Add"" /><BitButtonGroupOption Text=""Edit"" /><BitButtonGroupOption Text=""Delete"" /> | ||
| </BitButtonGroup> | ||
|
|
||
| <BitButtonGroup IsEnabled=""false"" Color=""BitColor.SecondaryBackground"" Variant=""BitVariant.Fill"" TItem=""BitButtonGroupOption""> | ||
| <BitButtonGroupOption Text=""Add"" /><BitButtonGroupOption Text=""Edit"" /><BitButtonGroupOption Text=""Delete"" /> | ||
| </BitButtonGroup> | ||
| <BitButtonGroup IsEnabled=""false"" Color=""BitColor.SecondaryBackground"" Variant=""BitVariant.Outline"" TItem=""BitButtonGroupOption""> | ||
| <BitButtonGroupOption Text=""Add"" /><BitButtonGroupOption Text=""Edit"" /><BitButtonGroupOption Text=""Delete"" /> | ||
| </BitButtonGroup> | ||
| <BitButtonGroup IsEnabled=""false"" Color=""BitColor.SecondaryBackground"" Variant=""BitVariant.Text"" TItem=""BitButtonGroupOption""> | ||
| <BitButtonGroupOption Text=""Add"" /><BitButtonGroupOption Text=""Edit"" /><BitButtonGroupOption Text=""Delete"" /> | ||
| </BitButtonGroup> | ||
|
|
||
| <BitButtonGroup IsEnabled=""false"" Color=""BitColor.TertiaryBackground"" Variant=""BitVariant.Fill"" TItem=""BitButtonGroupOption""> | ||
| <BitButtonGroupOption Text=""Add"" /><BitButtonGroupOption Text=""Edit"" /><BitButtonGroupOption Text=""Delete"" /> | ||
| </BitButtonGroup> | ||
| <BitButtonGroup IsEnabled=""false"" Color=""BitColor.TertiaryBackground"" Variant=""BitVariant.Outline"" TItem=""BitButtonGroupOption""> | ||
| <BitButtonGroupOption Text=""Add"" /><BitButtonGroupOption Text=""Edit"" /><BitButtonGroupOption Text=""Delete"" /> | ||
| </BitButtonGroup> | ||
| <BitButtonGroup IsEnabled=""false"" Color=""BitColor.TertiaryBackground"" Variant=""BitVariant.Text"" TItem=""BitButtonGroupOption""> | ||
| <BitButtonGroupOption Text=""Add"" /><BitButtonGroupOption Text=""Edit"" /><BitButtonGroupOption Text=""Delete"" /> | ||
| </BitButtonGroup> |
There was a problem hiding this comment.
Keep example11RazorCode aligned with the live demo background context.
In Line 489–Line 517, the added disabled *Background examples are not wrapped with the dark background container used in _BitButtonGroupOptionDemo.razor (the live demo). This makes the shown snippet diverge from the rendered example.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cs`
around lines 489 - 517, The nine disabled BitButtonGroup examples with
PrimaryBackground, SecondaryBackground, and TertiaryBackground colors in
example11RazorCode are not wrapped with the dark background container that is
used in the live demo rendered in _BitButtonGroupOptionDemo.razor. Identify the
dark background container wrapper used in the actual demo for these Background
color examples and wrap all nine of these BitButtonGroup components with the
same container in the example11RazorCode snippet to ensure the code display
matches the rendered demo appearance.
Comment on lines
+616
to
+635
| <BitChoiceGroup IsEnabled=""false"" | ||
| Color=""BitColor.PrimaryBackground"" | ||
| Label=""PrimaryBackground"" | ||
| Horizontal | ||
| Items=""basicItems"" | ||
| DefaultValue=""basicItems[0].Value"" /> | ||
|
|
||
| <BitChoiceGroup IsEnabled=""false"" | ||
| Color=""BitColor.SecondaryBackground"" | ||
| Label=""SecondaryBackground"" | ||
| Horizontal | ||
| Items=""basicItems"" | ||
| DefaultValue=""basicItems[0].Value"" /> | ||
|
|
||
| <BitChoiceGroup IsEnabled=""false"" | ||
| Color=""BitColor.TertiaryBackground"" | ||
| Label=""TertiaryBackground"" | ||
| Horizontal | ||
| Items=""basicItems"" | ||
| DefaultValue=""basicItems[0].Value"" /> |
There was a problem hiding this comment.
Sample snippets drift from their rendered disabled-background demo contexts. These sites all miss the wrapper/container styling used in their corresponding .razor demos, so copied snippets won’t reproduce the same contrast and layout.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs#L616-L635: wrap disabledPrimaryBackground/SecondaryBackground/TertiaryBackgroundexamples in the same styled<div>used by the live demo.src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs#L584-L603: add the same disabled-background wrapper markup used in the live demo.src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs#L317-L324: add the disabled-background wrapper around*Backgroundsearch box samples to match the rendered page.
📍 Affects 3 files
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs#L616-L635(this comment)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs#L584-L603src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs#L317-L324
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs`
around lines 616 - 635, The sample code snippets in these three files are
missing the wrapper container styling that provides proper visual context in
their corresponding live `.razor` demos, causing copied samples to lack the
intended contrast and layout. In
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs
at lines 616-635, wrap the disabled BitChoiceGroup examples with
PrimaryBackground, SecondaryBackground, and TertiaryBackground colors in the
same styled div container used by the live demo. In
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs
at lines 584-603, add the same disabled-background wrapper markup from the
corresponding live demo around those examples. In
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs
at lines 317-324, wrap the disabled *Background search box samples with the
container styling from the live demo. Reference the corresponding `.razor` files
to identify the exact wrapper styling needed at each location.
Comment on lines
+181
to
+183
| Disabled: | ||
|
|
||
| <BitTimeline IsEnabled=""false"" Horizontal Color=""BitColor.Primary"" Items=""iconItems"" /> |
There was a problem hiding this comment.
Keep sample snippet aligned with rendered demo heading.
The snippet uses raw Disabled: text, while the demo uses a formatted heading. Sync these to avoid source-preview drift in docs.
Suggested fix
-Disabled:
+<div><b>Disabled</b>:</div>
+<br />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cs`
around lines 181 - 183, The sample code snippet for the Disabled example
contains raw text "Disabled:" that doesn't match the formatted heading used in
the actual demo component rendering. Update the snippet to replace the raw
"Disabled:" text with the same formatted heading structure (likely a heading tag
or styled component) that is used in the corresponding demo component section to
ensure consistency between the source snippet and the rendered documentation
output.
Comment on lines
+62
to
+64
| <!-- Disabled: --> | ||
|
|
||
| <BitPagination IsEnabled=""false"" Count=""5"" Color=""BitColor.Primary"" /> |
There was a problem hiding this comment.
Use a visible heading in the snippet instead of a comment marker.
<!-- Disabled: --> won’t match the rendered demo structure and makes the sample harder to scan. Use the same visible heading pattern as the .razor demo.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cs`
around lines 62 - 64, Replace the HTML comment `<!-- Disabled: -->` in the
BitPaginationDemo.razor.samples.cs file with a visible heading element (such as
an h3 or similar heading tag) that matches the heading pattern used in the
corresponding .razor demo file. This will ensure the sample displays
consistently with the rendered demo structure and improves readability when
scanning the samples.
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 #12320
Summary by CodeRabbit