feat(floatbar): [floatbar] Adapt to dark themes #3012
Conversation
WalkthroughThe changes update the CSS variable naming for the Floatbar component by removing the redundant Changes
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
WalkthroughThis pull request updates the floatbar component to adapt to dark themes by modifying CSS variables. It replaces existing variables with new ones that are more suitable for dark theme compatibility, ensuring consistent styling across different themes. Changes
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/theme/src/floatbar/index.less (1)
44-44: Property Termination ConsistencyThe hover background property now uses
var(--tv-Floatbar-list-bg-color). For consistency and to avoid potential parsing issues, consider appending a semicolon at the end of the declaration.packages/theme/src/floatbar/vars.less (1)
15-27: Updated CSS Variables & Dark Theme IntegrationThe removal of the redundant
-barsegment in the variable names (e.g., changing--tv-Floatbar-bar-border-radiusto--tv-Floatbar-border-radius) is correctly applied. This update improves semantic clarity and consistency with the rest of the theme.Additionally, since this PR targets adaptations for dark themes, please verify that the referenced tokens (such as
--tv-color-bg-2and--tv-color-bg-hover) are defined appropriately in your dark theme overrides. One minor note:--tv-Floatbar-list-hover-text-coloris set to the same value as--tv-Floatbar-list-text-color; if a distinct hover effect is desired, this value might need adjustment.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/theme/src/floatbar/index.less(1 hunks)packages/theme/src/floatbar/vars.less(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (3)
packages/theme/src/floatbar/index.less (3)
27-29: CSS Variable Naming ConsistencyThe updated properties for
border-radiusandbackgroundnow correctly reference the new variable names (--tv-Floatbar-border-radiusand--tv-Floatbar-bg-color). This update removes the redundant-barsuffix and aligns with the naming convention changes invars.less.
34-36: List Item Styling Update Aligned with New VariablesThe changes to list item styling now use the updated variable names (
--tv-Floatbar-list-text-color,--tv-Floatbar-font-size, and--tv-Floatbar-list-margin-v). This modification ensures consistency across the component and adheres to the new design tokens.Also applies to: 40-40
50-56: Anchor Styling AdjustmentsUpdating the anchor text color and its hover/focus state to the new variables (
--tv-Floatbar-list-text-colorand--tv-Floatbar-list-hover-text-color) is well executed. This ensures that the floatbar component reflects the desired style consistency.
feat(floatbar): [floatbar] Adapt to dark themes
Summary by CodeRabbit
Style
Refactor