Improve bit Boilerplate copilot instructions (#11881) #11882
Conversation
WalkthroughThe copilot-instructions.md documentation file was updated to enhance UI component guidance by adding BitGrid and BitStack recommendations, and to replace the theme-color guidance with detailed multi-step instructions for applying colors in C#, Razor, and SCSS with concrete examples. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting
📒 Files selected for processing (1)
src/Templates/Boilerplate/Bit.Boilerplate/.github/copilot-instructions.md(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build Bit.Templates
🔇 Additional comments (2)
src/Templates/Boilerplate/Bit.Boilerplate/.github/copilot-instructions.md (2)
117-117: Strong addition to component guidance.Expanding the component recommendations to include
BitGridandBitStackprovides developers with more structured layout options and reinforces the principle of using the Bit.BlazorUI library consistently. This aligns well with the PR objective to improve copilot instructions.
124-126: Code structure guidance is clear and well-organized.Items 09–11 provide practical direction on separating concerns (code-behind), isolating styles (scoped SCSS), and correctly styling components with the
::deepselector. These are well-established best practices for Blazor development.
| 12. **Use Theme Colors in C# and Razor**: In C# and Razor files, you **MUST** use `BitColor` enum and `BitCss` class to apply theme colors instead of hardcoded colors. Use `BitColor` for component parameters (e.g., `BitColor.Primary`, `BitColor.TertiaryBackground`). Use `BitCss.Class` for CSS classes (e.g., `@BitCss.Class.Color.Background.Primary`, `@BitCss.Class.Color.Foreground.Secondary`). Use `BitCss.Var` for inline styles with CSS variables (e.g., `border-color:var(@BitCss.Var.Color.Border.Primary)`). This ensures automatic dark/light mode support. | ||
| 13. **Use Theme Colors in SCSS**: In SCSS files, you **MUST** use SCSS variables from `_bit-css-variables.scss` instead of hardcoded colors. Import the file and use variables like `$bit-color-primary`, `$bit-color-foreground-primary`, `$bit-color-background-secondary`, etc. These map to CSS custom properties that automatically adapt to dark/light modes. Available variable categories include: primary, secondary, tertiary, info, success, warning, severe-warning, error, foreground, background, border, and neutral colors. |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find _bit-css-variables.scss file and inspect variable definitions
fd -type f -name '*bit-css-variables*' | head -10Repository: bitfoundation/bitplatform
Length of output: 239
🏁 Script executed:
#!/bin/bash
# Search for BitCss class/interface definitions
fd -type f \( -name '*.cs' -o -name '*.ts' -o -name '*.tsx' \) | xargs rg -l 'BitCss' | head -10Repository: bitfoundation/bitplatform
Length of output: 951
🏁 Script executed:
#!/bin/bash
# Look for documentation or examples of BitCss usage in the repository
rg -l 'BitCss\.Class|BitCss\.Var' --type md --type cs | head -10Repository: bitfoundation/bitplatform
Length of output: 51
🏁 Script executed:
#!/bin/bash
# Inspect BitCss.class.cs to verify nested property structure
wc -l src/BlazorUI/Bit.BlazorUI/Utils/BitCss.class.cs
head -100 src/BlazorUI/Bit.BlazorUI/Utils/BitCss.class.csRepository: bitfoundation/bitplatform
Length of output: 4254
🏁 Script executed:
#!/bin/bash
# Inspect BitCss.var.cs to understand variable structure
wc -l src/BlazorUI/Bit.BlazorUI/Utils/BitCss.var.cs
head -100 src/BlazorUI/Bit.BlazorUI/Utils/BitCss.var.csRepository: bitfoundation/bitplatform
Length of output: 4166
🏁 Script executed:
#!/bin/bash
# Find _bit-css-variables.scss file
fd -type f -name '*bit-css-variables*'Repository: bitfoundation/bitplatform
Length of output: 239
🏁 Script executed:
#!/bin/bash
# Read more of BitCss.class.cs to see all color categories
tail -200 src/BlazorUI/Bit.BlazorUI/Utils/BitCss.class.cs | head -100Repository: bitfoundation/bitplatform
Length of output: 4796
🏁 Script executed:
#!/bin/bash
# Search for _bit-css-variables.scss in style directories
find . -type f -name '*bit-css*' -o -name '*theme*' | grep -i scss | head -20Repository: bitfoundation/bitplatform
Length of output: 580
🏁 Script executed:
#!/bin/bash
# Also search for any SCSS files that might contain color variable definitions
fd -e scss | grep -i 'color\|theme\|variable' | head -20Repository: bitfoundation/bitplatform
Length of output: 1156
🏁 Script executed:
#!/bin/bash
# Read the SCSS variables file relevant to the boilerplate template
head -100 src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Styles/abstracts/_bit-css-variables.scssRepository: bitfoundation/bitplatform
Length of output: 4805
🏁 Script executed:
#!/bin/bash
# Read the rest of BitCss.var.cs to see Background, Border, and other categories
sed -n '200,400p' src/BlazorUI/Bit.BlazorUI/Utils/BitCss.var.csRepository: bitfoundation/bitplatform
Length of output: 9209
🏁 Script executed:
#!/bin/bash
# Extract all top-level Color subcategories from BitCss.var.cs
grep 'public static class' src/BlazorUI/Bit.BlazorUI/Utils/BitCss.var.cs | grep -v '//'Repository: bitfoundation/bitplatform
Length of output: 3292
🏁 Script executed:
#!/bin/bash
# Search for actual usage of BitCss.Var in inline styles
rg 'BitCss\.Var' -A 2 -B 2 | head -80Repository: bitfoundation/bitplatform
Length of output: 1231
🏁 Script executed:
#!/bin/bash
# Search for actual usage of BitCss.Class in Razor files
rg 'BitCss\.Class\.Color' src/Templates/Boilerplate/ -A 1 -B 1 | head -60Repository: bitfoundation/bitplatform
Length of output: 956
🏁 Script executed:
#!/bin/bash
# Get the full structure of BitCss.Class.Color.Background class
sed -n '/public static class Background/,/^[[:space:]]*}/p' src/BlazorUI/Bit.BlazorUI/Utils/BitCss.class.cs | head -80Repository: bitfoundation/bitplatform
Length of output: 746
🏁 Script executed:
#!/bin/bash
# Search for implicit operators in BitCss files
rg 'implicit|operator|implicit operator' src/BlazorUI/Bit.BlazorUI/Utils/BitCss*.csRepository: bitfoundation/bitplatform
Length of output: 51
🏁 Script executed:
#!/bin/bash
# Look at more real examples from Boilerplate to understand actual usage
rg 'BitCss\.Class' src/Templates/Boilerplate/ -A 1 -B 1 | head -100Repository: bitfoundation/bitplatform
Length of output: 956
🏁 Script executed:
#!/bin/bash
# Read the actual App.razor file to see the exact BitCss usage
cat src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Components/App.razorRepository: bitfoundation/bitplatform
Length of output: 4944
🏁 Script executed:
#!/bin/bash
# Also check the Accordion.razor file
cat src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Settings/Accordion.razor | grep -A 5 -B 5 'BitCss.Class.Color'Repository: bitfoundation/bitplatform
Length of output: 486
🏁 Script executed:
#!/bin/bash
# Check if there are operator overloads in BitCss files by looking at the full files
tail -100 src/BlazorUI/Bit.BlazorUI/Utils/BitCss.class.cs | head -50Repository: bitfoundation/bitplatform
Length of output: 2634
🏁 Script executed:
#!/bin/bash
# Look for ToString or implicit operators throughout BitCss files
cat src/BlazorUI/Bit.BlazorUI/Utils/BitCss.csRepository: bitfoundation/bitplatform
Length of output: 134
🏁 Script executed:
#!/bin/bash
# Search for any method that might explain how Primary class becomes a string
rg -A 5 'public static class Primary|public static implicit' src/BlazorUI/Bit.BlazorUI/Utils/BitCss.class.cs | head -50Repository: bitfoundation/bitplatform
Length of output: 1245
Verify BitCss property accessor usage in C# and Razor examples.
The theme color guidance is sound, but the C# and Razor code examples are incomplete:
-
BitCss.Class examples (line 127): The example
@BitCss.Class.Color.Background.Primaryshould include the property accessor for clarity:@BitCss.Class.Color.Background.Primary.Main(or.Dark,.Light,.Textdepending on the variant). The BitCss.Class API includes nested color categories (Primary, Secondary, Tertiary, Info, Success, Warning, SevereWarning, Error), plus semantic groupings (Foreground, Background, Border, Neutral), each with variants like Main, Dark, Light, and Text. -
BitCss.Var examples (line 127): Similarly, the example
border-color:var(@BitCss.Var.Color.Border.Primary)should beborder-color: var(@BitCss.Var.Color.Border.Primary.Main). The BitCss.Var API mirrors the Class structure but returns CSS variable names (e.g.,--bit-clr-brd-pri) for use in inline styles. -
SCSS variables (line 128): The variable naming pattern is confirmed correct. Variables follow the format
$bit-color-{category}(e.g.,$bit-color-primary,$bit-color-foreground-primary,$bit-color-background-secondary), with modifiers for state (-hover,-active,-dark,-light). The listed categories are accurate and complete.
🤖 Prompt for AI Agents
In src/Templates/Boilerplate/Bit.Boilerplate/.github/copilot-instructions.md
around lines 127 to 128, the C#/Razor examples for BitCss usage are
incomplete—update the examples to include the property accessor (e.g., `.Main`,
`.Dark`, `.Light`, `.Text`) for BitCss.Class entries and the equivalent `.Main`
(or variant) for BitCss.Var entries so they reflect the actual API (e.g., use
@BitCss.Class.Color.Background.Primary.Main and border-color:
var(@BitCss.Var.Color.Border.Primary.Main)); keep the SCSS variable guidance
as-is but ensure you mention modifier suffixes like -hover, -active, -dark,
-light are available.
1 participant
closes #11881
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.