fix(grid): [grid] update dark theme #3213
Conversation
WalkthroughThis pull request updates the styling of various Vue and LESS files to improve theme flexibility. Hardcoded color values have been replaced with CSS variables, allowing dynamic theming across grid components. The changes affect title elements, empty data tips, SVG icons in operation columns, and background colors in validation components. Additionally, updates to theme LESS files introduce new styling rules for disabled states and define new CSS variables for expanded rows and input backgrounds. Changes
Possibly related PRs
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it’s a critical failure. 🔧 ESLint
ERR_PNPM_FETCH_404 GET http://10.0.0.28:4873/@volar-plugins%2Fprettier: Not Found - 404 This error happened while installing a direct dependency of /tmp/eslint @volar-plugins/prettier is not in the npm registry, or you have no permission to fetch it. No authorization header was set for the request. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🪧 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 dark theme for the grid component in the Tiny Vue project. The changes primarily involve replacing hardcoded color values with CSS variables to enhance theme customization and consistency across the application. Changes
|
![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
📒 Files selected for processing (12)
examples/sites/demos/pc/app/grid/edit/status-of-editing-composition-api.vue(1 hunks)examples/sites/demos/pc/app/grid/edit/status-of-editing.vue(1 hunks)examples/sites/demos/pc/app/grid/empty/empty-data-tip-composition-api.vue(1 hunks)examples/sites/demos/pc/app/grid/empty/empty-data-tip.vue(1 hunks)examples/sites/demos/pc/app/grid/operation-column/custom-operation-column-composition-api.vue(1 hunks)examples/sites/demos/pc/app/grid/operation-column/custom-operation-column.vue(1 hunks)examples/sites/demos/pc/app/grid/validation/bubbling-composition-api.vue(1 hunks)examples/sites/demos/pc/app/grid/validation/bubbling.vue(1 hunks)packages/theme/src/grid/checkbox.less(1 hunks)packages/theme/src/grid/radio.less(1 hunks)packages/theme/src/grid/table.less(3 hunks)packages/theme/src/grid/vars.less(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (16)
examples/sites/demos/pc/app/grid/empty/empty-data-tip.vue (1)
10-10: LGTM: Improved theme compatibilityRemoving the inline styling from the empty data message allows it to inherit colors from the theme system, enhancing compatibility with both light and dark themes. This change aligns well with the PR objective to update the dark theme support.
examples/sites/demos/pc/app/grid/edit/status-of-editing.vue (1)
108-108: LGTM: Enhanced theming with CSS variablesReplacing the hardcoded color with the CSS variable
--tv-color-text-secondaryimproves theme flexibility. The fallback value ensures backward compatibility while enabling proper dark theme support. This change effectively contributes to the PR's goal of updating the dark theme for grid components.examples/sites/demos/pc/app/grid/validation/bubbling.vue (1)
115-115: LGTM: Better dark theme support for validation componentsReplacing the hardcoded background color with
--tv-color-warn-bg-lightimproves dark theme compatibility for validation bubbling. The fallback color ensures the component looks appropriate even if theme variables aren't available. This change is well-aligned with the PR's objective.examples/sites/demos/pc/app/grid/empty/empty-data-tip-composition-api.vue (1)
10-10: LGTM: Consistent theming across API stylesThis change maintains consistency with the Options API version by removing hardcoded styling. It ensures that empty data messages receive proper theme styling regardless of which Vue API style is used. The change properly contributes to the dark theme update for grid components.
examples/sites/demos/pc/app/grid/edit/status-of-editing-composition-api.vue (1)
99-99: Improved theming support for title elementsThe change from a hardcoded color value to a CSS variable with fallback (
var(--tv-color-text-secondary, #191919)) enhances the component's dark theme compatibility. This modification allows the title color to dynamically adjust based on the active theme while maintaining backward compatibility.packages/theme/src/grid/radio.less (1)
106-108: Enhanced disabled state styling for radio buttonsThis change improves the visual representation of disabled radio buttons by ensuring all SVG paths receive the appropriate disabled styling, not just the last child element. This creates a more consistent appearance in dark theme mode.
examples/sites/demos/pc/app/grid/operation-column/custom-operation-column-composition-api.vue (2)
83-83: Updated icon color to use theme variablesReplacing the hardcoded fill color with a CSS variable (
var(--tv-color-icon)) enhances dark theme compatibility for SVG icons in the operation column.
86-86: Updated hover state to use theme variablesThe hover state now uses a theme variable (
var(--tv-color-icon-hover)) instead of a hardcoded color value, ensuring consistent styling with the dark theme.examples/sites/demos/pc/app/grid/operation-column/custom-operation-column.vue (2)
92-92: Improved theming with CSS variablesReplacing the hard-coded variable
var(--ti-common-color-line-active)withvar(--tv-color-icon)provides better theme consistency across the grid component, especially for dark theme support.
95-95: Enhanced hover state with themeable variableReplacing the hard-coded hex color
#40a9ffwithvar(--tv-color-icon-hover)allows proper styling of icon hover states in different themes, including dark mode.packages/theme/src/grid/checkbox.less (1)
113-115: Improved disabled state visualizationAdding specific styling for the SVG path elements in disabled checkboxes ensures proper visual representation in different themes. This properly applies the disabled state color to all parts of the checkbox icon.
packages/theme/src/grid/vars.less (2)
56-57: Added new variable for expanded row backgroundAdding a dedicated CSS variable for expanded row backgrounds improves theme flexibility. This separation from the generic gray background color allows for more precise theming control in various display modes.
204-204: Updated input background variable referenceChanging the input background color variable to reference
var(--tv-color-bg-secondary)instead ofvar(--tv-color-bg-3)improves semantic clarity while maintaining the same fallback value. This promotes better theming organization.packages/theme/src/grid/table.less (3)
33-33: Updated expanded row background to use new variableUsing the new dedicated variable
var(--tv-Grid-expanded-row-bg-color)for expanded rows provides better theming flexibility and visual consistency, especially important for dark theme support.
486-488: Added consistent icon styling for header columnsAdding specific styling for SVG elements in header columns ensures visual consistency across the grid component. This change standardizes the icon color to match the design system.
840-844: Enhanced tree node icon styling with hover stateUpdated the SVG fill color to use theme variables and added a hover state for better user interaction feedback. This improves visual consistency and user experience in both light and dark themes.
examples/sites/demos/pc/app/grid/validation/bubbling-composition-api.vue
Outdated
Show resolved
Hide resolved
3 participants
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