fix:[steps,date-picker,tabs,search]Dark Theme Adaptation #3231
Conversation
WalkthroughThis pull request applies multiple UI and styling updates across several components. The changes update background colors for the date picker, adjust button styling in the date range component, and refine styling for search inputs, steps, and tabs by introducing new CSS variables and modifying layout properties. Additionally, minor logic adjustments are made in the tab navigation component for padding determination and in the upload list component for consistent error icon usage. Changes
Sequence Diagram(s)sequenceDiagram
participant TabNav as TabNav Component
participant MoreEl as More Element ($refs.more)
TabNav->>MoreEl: Check if more element exists
alt When more element exists
MoreEl-->>TabNav: Return width value
TabNav->>TabNav: Set paddingRight based on width
else When more element does not exist
TabNav->>TabNav: Set paddingRight to '0'
end
Possibly related PRs
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
examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. examples/sites/demos/pc/app/tabs/custom-more-icon.spec.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (12)
🚧 Files skipped from review as they are similar to previous changes (11)
🔇 Additional comments (1)
✨ Finishing Touches
🪧 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 focuses on adapting various components such as steps, date-picker, tabs, and search for a dark theme. The changes involve updating background colors, border colors, and other style properties to ensure compatibility with the dark theme. 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 (10)
packages/theme/src/tabs/index.less (4)
61-70: New Tab Button Spacing Adjustment
The.@{tabs-prefix-cls}__new-tabblock now sets a left padding of 12px (line 64), which appears to reduce the gap compared to previous styling. Please verify that this new spacing aligns with the dark theme design guidelines and does not lead to cramped content.
74-78: Icon Size and Padding Update in New Tab
Within the new tab block, thesvgelements now use a font size defined byvar(--tv-Tabs-more-icon-size)and a padding of 4px (lines 76–77). This adjustment should help improve icon legibility and balance in dark mode. Please double-check that the new values are consistent with the overall theme’s visual hierarchy.
310-317: More-Container Spacing and Positioning Revision
The&__more-containerblock now specifiesright: 0(line 312) and addspadding-top: 5px(line 316). These changes likely aim to improve vertical alignment and spacing in dark theme contexts. Confirm that this adjustment provides consistent alignment with other components and that the removal of any units (from "0px" to "0") does not affect rendering across browsers.
239-248: Icon-Close Hover State Update
In the.@{tabs-prefix-cls}__icon-closesection, the hover state now setsbackground-color: transparent(line 243), effectively removing the previous background-color. This cleaner look can aid dark theme adaptation but please verify that the removal does not reduce the visual affordance for the icon’s interactivity.packages/theme/src/steps/vars.less (1)
187-191: Vertical Dot Variables Update for Dark Theme
Several CSS custom properties for the vertical dot scenario have been updated/added:
--tv-Steps-dot-vertical-current-bg-colornow usesvar(--tv-color-border-active, #191919)- New undo state variables (
--tv-Steps-dot-vertical-undo-border-color,--tv-Steps-dot-vertical-undo-dot-color, and--tv-Steps-dot-title-undo-text-color) have been introduced.These changes enhance the styling for “undo” or inactive states in dark mode. Please confirm that these variables provide sufficient contrast and match the overall color palette of the dark theme.
packages/theme/src/steps/index.less (5)
698-704: Title Padding Adjustment for Enhanced Readability
In the.titleclass, a newpadding-top: 2px;has been added (line 702). This subtle change is intended to better position the text vertically. Please confirm that this update improves readability without affecting content truncation or alignment in various layout contexts.
1027-1033: Fault State Color Variables in Vertical Dot Mode
Within the.@{steps-dot-prefix-cls}section, the fault state styling now assigns CSS variables for the left dot border and the title text:
- The left dot’s border-color is now set to
var(--tv-Steps-error-icon-color)(line 1028)- The title-vertical color is now
var(--tv-Steps-error-text-color)(line 1032)These changes remove hardcoded color values to better support theme variability. Please verify that the new colors provide enough emphasis for error states in a dark theme.
1036-1057: Vertical Dot Block Layout Refinement
The layout of the vertical dot blocks has been adjusted:
- In the
.block-leftsection, margins have been modified (margin-top: 6.5px; margin-right: 12px) (lines 1040–1042).- The nested
.left-dotnow specifies a fixed size of 10px with a border using the undo dot color (lines 1044–1048).- The associated
.left-linealso has updated margins and height calculations (lines 1052–1055).These adjustments aim to deliver a more precise and harmonious layout for vertical dots in dark mode. Please ensure these spacing changes integrate well with adjacent UI elements.
1104-1118: Disabled State Styling in Vertical Dot Mode
In the disabled state within the vertical dot block, the styling now uses theme variables:
- The
.left-dotbackground and border colors are set tovar(--tv-Steps-disabled-icon-bg-color)andvar(--tv-Steps-disabled-border-color), respectively.- The text colors for
.title-verticaland.descriptionin the right block now usevar(--tv-Steps-disabled-text-color)(lines 1104–1118).This refactor ensures disabled elements are visually distinct in dark mode. Verify that the contrast and cursor ("not-allowed") behavior meet accessibility standards.
645-653: Review of .doing vs .done State Border Lines
While not marked with new diff tokens, note that within the.@{steps-prefix-cls}-blockthe.doingstate references only the.left-line(lines 648–651), whereas both.left-lineand.right-lineare used in the.donestate (lines 675–682). This differentiation appears intentional per dark theme adaptation guidelines. Please double-check that the removal of the right-line in the “doing” state is a deliberate design decision and does not adversely affect the visual continuity of the steps component.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue(1 hunks)examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue(1 hunks)packages/renderless/src/date-range/vue.ts(1 hunks)packages/theme/src/search/index.less(1 hunks)packages/theme/src/search/vars.less(1 hunks)packages/theme/src/steps/index.less(5 hunks)packages/theme/src/steps/vars.less(1 hunks)packages/theme/src/tabs/index.less(4 hunks)packages/theme/src/tabs/vars.less(1 hunks)packages/vue/src/tabs/src/tab-nav/pc.vue(1 hunks)packages/vue/src/upload-list/src/pc.vue(2 hunks)
🔇 Additional comments (8)
examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue (1)
22-22: Good implementation of theme-aware styling.The background color change from
var(--tv-color-bg-active-emphasize)tovar(--tv-color-bg-2)properly adapts the date picker for dark theme compatibility. This CSS variable will automatically adjust based on the active theme.examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue (1)
30-30: Good implementation of theme-aware styling with consistent approach.The background color change from
var(--tv-color-bg-active-emphasize)tovar(--tv-color-bg-2)properly adapts the date picker for dark theme compatibility. This matches the change made in the composition API version, ensuring consistent styling across different implementation approaches.packages/renderless/src/date-range/vue.ts (1)
134-134: Improved button styling for better visibility.Changing
plain: truetoplain: falsefor the confirmation button enhances its visibility by using a filled style instead of an outlined style. This provides better contrast, especially in dark mode where outlined buttons might be less noticeable.packages/theme/src/search/vars.less (1)
72-73: Good addition of theme-aware variable for search icon divider.Adding the
--tv-Search-border-short-colorvariable with a semantic name and appropriate comment improves theme consistency. Usingvar(--tv-color-border-divider-short)as the value ensures the search component will properly adapt to theme changes.packages/vue/src/tabs/src/tab-nav/pc.vue (1)
254-254: Improved padding behavior when 'more' tabs are not present.This change improves the tabs layout by removing the unnecessary padding (previously 46px) when there are no additional tabs to display. This results in a cleaner appearance that works better in both light and dark themes.
packages/theme/src/search/index.less (1)
113-114: Enhanced theme adaptability for search input divider.The changes replace a hardcoded color with a CSS variable and adjust opacity for better visibility:
- Using
var(--tv-Search-border-short-color)instead of a fixed color enables proper theme adaptation- Changing opacity from partial (8%) to full (1) improves visibility in dark mode
This is a positive improvement for dark theme support.
packages/theme/src/tabs/vars.less (1)
144-144: Increased 'more' icon size for better visibility.Increasing the icon size from 16px to 24px improves usability and visibility in dark mode, where contrast might be lower. This change enhances accessibility and creates a more balanced visual hierarchy.
packages/vue/src/upload-list/src/pc.vue (1)
338-338: Standardized error icon usage.Replacing the custom operation failure icon with the standard error icon creates a more consistent user experience across the application. This standardization is particularly important for establishing clear visual patterns in both dark and light themes.
Also applies to: 377-377
| @@ -131,7 +131,7 @@ const initState = ({ reactive, computed, api, constants, designConfig, props }) | |||
| enableYearArrow: computed(() => api.computerEnableYearArrow()), | |||
| // tiny 新增 | |||
| confirmButtonProps: { | |||
| plain: true, | |||
| plain: false, | |||
PR
fix:暗色主题适配
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