fix(grid): [grid] add dark theme #3040
Conversation
WalkthroughThis pull request updates the styling of grid and Vue components by replacing hardcoded color values with CSS variables. In two Vue component files, the background color for the Changes
Possibly related PRs
Suggested reviewers
Poem
🪧 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 (
|
github-actions
bot
added
bug
WalkthroughThis PR introduces a dark theme to the grid component by updating the CSS variables to use theme-based colors. It replaces hardcoded color values with CSS variables to ensure consistency and easy theme management. Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/theme/src/grid/checkbox.less (1)
95-97: Clarify Indeterminate State Styling
In the indeterminate state, the first SVG path’s fill is explicitly set to usevar(--tv-Grid-checkbox-icon-color-selected). Verify that using the same “selected” color for both checked and indeterminate states is intentional from a design perspective. If a distinct visual representation is needed for indeterminate checkboxes, consider introducing a separate variable.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/theme/src/grid/checkbox.less(2 hunks)packages/theme/src/grid/radio.less(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (5)
packages/theme/src/grid/checkbox.less (1)
76-83: Consistent Unchecked State Styling
The new block for unchecked checkboxes correctly ensures that the first child of the SVG path is set to transparent. This aligns with the dark theme’s visual requirements and prevents unwanted icon fill. Please confirm that this behavior is desired across all themes.packages/theme/src/grid/radio.less (4)
15-15: Verify Radio Prefix Interpolation
The use of the tilde operator for@grid-radio-prefix-cls(i.e.~'@{css-prefix}grid-radio') is consistent with techniques seen elsewhere in the codebase. Please double-check that the resulting string correctly resolves in all theme contexts.
56-57: Ensure Transparent Background for Checked State
The addition ofbackground: transparent;in the checked state of the radio icon is appropriate to prevent background conflicts with the dark theme. Ensure this style does not unintentionally override other intended background properties.
78-82: Set Transparent Fill for SVG in Checked State
The newly added rule to setfill: transparent;for the last child path within the SVG ensures that unwanted icon parts do not display in the checked state. This change supports the dark theme’s aesthetics.
88-95: Consistent Styling for Unchecked State
The added block for the unchecked radio state ensures that the last SVG path has a transparent fill. This creates consistency with the checked state styling and likely helps maintain visual uniformity across themes.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/theme/src/grid/menu.less (1)
43-43: Update Variable Reference for Border StyleThe updated variable from the old "divider" to "border-color-divider" is consistent with similar changes across related files. Please verify that the custom property
--tv-Grid-border-color-divideris correctly defined within the dark theme settings so that it reflects the intended appearance.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
packages/theme/src/grid/filter.less(2 hunks)packages/theme/src/grid/input.less(1 hunks)packages/theme/src/grid/menu.less(1 hunks)packages/theme/src/grid/table.less(10 hunks)packages/theme/src/grid/vars.less(3 hunks)
✅ Files skipped from review due to trivial changes (2)
- packages/theme/src/grid/input.less
- packages/theme/src/grid/filter.less
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/theme/src/grid/vars.less
- packages/theme/src/grid/table.less
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit