Update BitCss implementations (#11878)

[msynk]

closes #11878

Summary by CodeRabbit

Release Notes

• New Features
  • Expanded color variants with additional dark and light options across primary, secondary, and tertiary color groups.
  • Added comprehensive shadow utility options for enhanced visual depth and UI styling.
  • Introduced typography styling tokens covering headings (H1–H6), subtitles, body text, buttons, captions, and overline styles.
  • Added spacing scaling factor token for consistent design scaling.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Two files updated: SCSS stylesheet receives BOM removal and introduces extensive new color variants with dark/light/hover/active states, plus comprehensive shadow utility classes. C# BitCss utility class expands public API with corresponding color, shadow, and zindex tokens, and introduces two new nested classes—Spacing and Typography—containing detailed typographic token definitions.

Changes

Cohort / File(s)	Summary
SCSS styling system expansion src/BlazorUI/Bit.BlazorUI/Styles/bit-css.scss	Removed BOM from import statement. Expanded tertiary, foreground, background, and border color groups with dark/light variants. Added hover and active state rules across color categories. Introduced shadow utilities: cal2, sm, nm, md, lg, xl, 2xl, inner.
BitCss C# API expansion src/BlazorUI/Bit.BlazorUI/Utils/BitCss.cs	Extended Color.Foreground, Color.Background, Color.Border classes with PrimaryDark, PrimaryLight, SecondaryDark, SecondaryLight, TertiaryDark, TertiaryLight variants and nested Hover/Active groups. Added Spacing class with ScalingFactor token. Added Typography class with global tokens and nested H1–H6, Subtitle1/2, Body1/2, Button, Caption1/2, Overline, Inherit classes. Extended Shadow with Callout2, Sm, Nm, Md, Lg, Xl, Xxl, Inner. Added ZIndex.Base. Mirrored expansions in Var API for CSS variables.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20–25 minutes

• Naming consistency: Verify dark/light/hover/active variant naming aligns across all color categories and their CSS variable counterparts
• Token mapping: Confirm SCSS class names match C# constant token definitions (e.g., cal2 ↔ Callout2)
• Typography structure: Validate nested Typography classes and their token definitions (Margin, FontWeight, FontSize, LineHeight, LetterSpacing) are complete and consistent
• CSS variable correspondence: Ensure new Var.Color.*, Var.Shadow.*, and Var.ZIndex.Base definitions correctly map to SCSS variables
• Duplicate or collision risk: Check for potential naming conflicts in the expanded public API surface

Poem

🐰 The design tokens bloom in every hue,
Dark, light, and states both old and new!
From shadow cal to typography's grace,
Spacing and zindex find their place. ✨
BitCss now sings in harmonies fine,
A rainbow of constants, perfectly aligned!

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'Update BitCss implementations' is generic and vague, referring to the code context without conveying specific details about what was updated or why.	Make the title more specific by describing the main changes, such as 'Add color variants and shadow utilities to BitCss' or 'Fix mismatched CSS class names and add missing classes in BitCss'.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	The PR addresses the two main coding objectives from issue #11878: fixing mismatched CSS class names and adding missing new classes through expanded color variants, shadow utilities, and typography tokens.
Out of Scope Changes check	✅ Passed	All changes are within scope: removal of BOM from SCSS, addition of color/shadow/typography tokens in BitCss.cs, and SCSS style updates align with fixing mismatches and adding missing classes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

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

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}