fix:[input,steps,loading]fix the style of dark themes #3238
Conversation
WalkthroughThis pull request applies styling enhancements across several theme components. The input component’s SVG icons now have a pointer cursor, defined fill colors via CSS variables, and a hover state that adjusts the icon color. The steps component sees updates to element dimensions, CSS variable adjustments, and the introduction of a new variable for larger icon sizes. Additionally, an obsolete text description style in the upload-list component has been removed. No changes were made to exported or public entities. Changes
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (4)
💤 Files with no reviewable changes (1)
🚧 Files skipped from review as they are similar to previous changes (3)
🪧 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 PR addresses style adjustments for dark themes across multiple components including input, steps, and loading. It introduces changes to CSS variables and styles to ensure proper visual consistency in dark mode. Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| align-items: center; | ||
|
|
||
| svg { | ||
| cursor: pointer; |
There was a problem hiding this comment.
Ensure that the pointer cursor is appropriate for all interactive elements to enhance user experience.
| .icon { | ||
| width: var(--tv-Steps-node-circle-size); | ||
| height: var(--tv-Steps-node-circle-size); | ||
| width: var(--tv-Steps-node-circle-size-lg); |
There was a problem hiding this comment.
Ensure that the new size variables are correctly applied throughout the component to maintain consistency.
| // 节点圆圈尺寸-中 | ||
| --tv-Steps-node-circle-size: var(--tv-size-height-md, 32px); | ||
| // 节点圆圈尺寸-large | ||
| --tv-Steps-node-circle-size-lg: var(--tv-size-height-lg, 40px); |
There was a problem hiding this comment.
Verify that the new large size variable is used consistently across all relevant components.
![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/input/index.less (1)
305-314: Enhanced SVG Icon Interactivity
The new styles for the SVG inside the input mask now add acursor: pointer, explicitly set the icon’s default fill color usingvar(--tv-Input-icon-color), and define a hover state withvar(--tv-Input-icon-color-hover). These changes improve interactivity and visual feedback for users.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
packages/theme/src/input/index.less(1 hunks)packages/theme/src/steps/index.less(4 hunks)packages/theme/src/steps/vars.less(1 hunks)packages/theme/src/upload-list/index.less(0 hunks)
💤 Files with no reviewable changes (1)
- packages/theme/src/upload-list/index.less
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (5)
packages/theme/src/steps/vars.less (1)
24-27: Updated Node Circle Size Variables
The comment for--tv-Steps-node-circle-sizewas updated to clarify that it represents the medium size, and a new variable--tv-Steps-node-circle-size-lghas been introduced (with a fallback value of 40px). This addition provides more granular control for sizing in different step scenarios.packages/theme/src/steps/index.less (4)
382-386: Using New CSS Variable for Large Step Icons
Within the.largeblock, the inner.iconelement’s width and height are now set to usevar(--tv-Steps-node-circle-size-lg)instead of hardcoded values. This update ensures that the icon sizes adhere to the new large size design specification consistently.
482-486: Align Main Container Height with Large Icon Size
The main container (.@{steps-prefix-cls}-main) now usesheight: var(--tv-Steps-node-circle-size-lg);. This change aligns the container’s height with the updated large icon dimensions, ensuring visual consistency.
701-705: Improved Title Readability with Line-Height Adjustment
Aline-height: 1.5has been added to the step title within the.titleclass. This adjustment should enhance text readability and vertical spacing. Please verify that it renders well across different viewports.
825-827: Revised Dimension Parameters for the Large Variant
The.block-size-mixininvocation for the large variant has been updated with new parameters(40px, 16px, 26px, 16px, 40px, 12px). These revised values better reflect the design updates for larger step elements. Ensure that this sizing works harmoniously with the overall layout.
2 participants
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