feat(theme): change incorrect css variables and delete the ‘less’ file #1120
Conversation
|
Warning Rate limit exceeded@xuanlid has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 5 minutes and 42 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (3)
WalkthroughThis PR updates various CSS styling rules across Vue components and theme files. It modifies CSS variable references and direct styling properties in files like Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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 (
|
![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 (49)
packages/layout/src/Main.vue(1 hunks)packages/plugins/tree/src/styles/vars.less(1 hunks)packages/settings/design/src/App.vue(3 hunks)packages/settings/design/src/components/ArrayConfigItemForm.vue(1 hunks)packages/settings/design/src/components/PropertyCanvas.vue(1 hunks)packages/settings/design/src/components/PropertyList.vue(2 hunks)packages/settings/design/src/components/SettingPanel.vue(0 hunks)packages/settings/styles/src/components/inputs/ModalMask.vue(1 hunks)packages/theme/base/src/base.less(1 hunks)packages/theme/dark/block.less(0 hunks)packages/theme/dark/bridge.less(0 hunks)packages/theme/dark/canvas.less(0 hunks)packages/theme/dark/datasource.less(0 hunks)packages/theme/dark/events.less(0 hunks)packages/theme/dark/gpt-dialog.less(0 hunks)packages/theme/dark/help.less(0 hunks)packages/theme/dark/i18n.less(0 hunks)packages/theme/dark/index.less(0 hunks)packages/theme/dark/life-cycles.less(0 hunks)packages/theme/dark/materials.less(0 hunks)packages/theme/dark/metaComponent.less(0 hunks)packages/theme/dark/pageManage.less(0 hunks)packages/theme/dark/plugin-js.less(0 hunks)packages/theme/dark/setting-style.less(0 hunks)packages/theme/dark/settings.less(0 hunks)packages/theme/dark/toolbar.less(0 hunks)packages/theme/dark/tree.less(0 hunks)packages/theme/dark/tutorial.less(0 hunks)packages/theme/dark/variable.less(0 hunks)packages/theme/light/block.less(0 hunks)packages/theme/light/bridge.less(0 hunks)packages/theme/light/canvas.less(0 hunks)packages/theme/light/datasource.less(0 hunks)packages/theme/light/events.less(0 hunks)packages/theme/light/gpt-dialog.less(0 hunks)packages/theme/light/help.less(0 hunks)packages/theme/light/i18n.less(0 hunks)packages/theme/light/index.less(0 hunks)packages/theme/light/life-cycles.less(0 hunks)packages/theme/light/materials.less(0 hunks)packages/theme/light/metaComponent.less(0 hunks)packages/theme/light/pageManage.less(0 hunks)packages/theme/light/plugin-js.less(0 hunks)packages/theme/light/setting-style.less(0 hunks)packages/theme/light/settings.less(0 hunks)packages/theme/light/toolbar.less(0 hunks)packages/theme/light/tree.less(0 hunks)packages/theme/light/tutorial.less(0 hunks)packages/theme/light/variable.less(0 hunks)
💤 Files with no reviewable changes (41)
- packages/theme/light/plugin-js.less
- packages/theme/light/block.less
- packages/theme/light/bridge.less
- packages/theme/dark/bridge.less
- packages/theme/light/help.less
- packages/theme/light/tree.less
- packages/theme/dark/plugin-js.less
- packages/theme/dark/tree.less
- packages/theme/dark/datasource.less
- packages/theme/light/settings.less
- packages/theme/light/canvas.less
- packages/theme/light/tutorial.less
- packages/settings/design/src/components/SettingPanel.vue
- packages/theme/light/metaComponent.less
- packages/theme/light/datasource.less
- packages/theme/light/toolbar.less
- packages/theme/dark/events.less
- packages/theme/dark/canvas.less
- packages/theme/dark/pageManage.less
- packages/theme/dark/help.less
- packages/theme/light/life-cycles.less
- packages/theme/dark/i18n.less
- packages/theme/dark/tutorial.less
- packages/theme/light/gpt-dialog.less
- packages/theme/light/events.less
- packages/theme/light/pageManage.less
- packages/theme/dark/settings.less
- packages/theme/dark/metaComponent.less
- packages/theme/light/variable.less
- packages/theme/dark/life-cycles.less
- packages/theme/light/materials.less
- packages/theme/light/setting-style.less
- packages/theme/dark/setting-style.less
- packages/theme/dark/materials.less
- packages/theme/dark/toolbar.less
- packages/theme/dark/block.less
- packages/theme/dark/index.less
- packages/theme/light/i18n.less
- packages/theme/dark/gpt-dialog.less
- packages/theme/light/index.less
- packages/theme/dark/variable.less
✅ Files skipped from review due to trivial changes (4)
- packages/settings/design/src/components/ArrayConfigItemForm.vue
- packages/plugins/tree/src/styles/vars.less
- packages/settings/design/src/components/PropertyCanvas.vue
- packages/settings/design/src/App.vue
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: push-check
🔇 Additional comments (3)
packages/layout/src/Main.vue (1)
81-81: LGTM! CSS variable update follows naming convention.The change from
--base-min-widthto--te-base-min-widthaligns with the project's CSS variable naming convention using the 'te-' prefix.packages/settings/design/src/components/PropertyList.vue (1)
97-97: LGTM! CSS variables updated to follow component-specific naming.The changes improve variable naming by:
- Using the standardized 'te-' prefix
- Making the scope more specific to the settings/design context
Also applies to: 119-119
packages/theme/base/src/base.less (1)
321-324: LGTM! Well-structured addition of base configuration.The new section and variable are:
- Well-documented with clear comments
- Following the standardized naming convention
- Using a common breakpoint value
| @@ -107,13 +107,11 @@ export default { | |||
| box-sizing: border-box; | |||
| } | |||
| .modal-padding { | |||
| padding: var(--ti-modal-padding-y, 14px) var(--ti-modal-padding-x, 20px); | |||
| padding: 14px 20px; | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Avoid hardcoding style values.
The changes replace CSS variables with hardcoded values, which reduces maintainability and theme flexibility. Consider keeping these as CSS variables for better maintainability and theme support.
Apply this diff to restore CSS variables with standardized names:
- padding: 14px 20px;
+ padding: var(--te-modal-padding-y, 14px) var(--te-modal-padding-x, 20px);
- right: 280px;
- left: calc(100% - 287px - 280px - 16px);
+ right: var(--te-modal-right-offset, 280px);
+ left: calc(
+ 100% - var(--te-modal-right-offset, 287px) - var(--te-modal-right-offset, 280px) - var(--te-modal-spacing, 16px)
+ );Also applies to: 113-114
xuanlid
force-pushed
the
feat/commonVars
branch
from
fa87a45 to
1fcc0a8
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/settings/styles/src/styles/vars.less (1)
71-76: Add a section comment for modal mask variables.For consistency with other sections in the file, add a comment to group the modal mask variables.
Add this comment before the new variables:
--te-styles-typography-bg-color-hover: var(--te-common-bg-gray-hover); + // 样式面板-模态遮罩 --te-styles-modal-mask-padding-y: var(--te-base-modal-padding-y);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/settings/styles/src/components/inputs/ModalMask.vue(1 hunks)packages/settings/styles/src/styles/vars.less(1 hunks)packages/theme/base/src/base.less(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/theme/base/src/base.less
- packages/settings/styles/src/components/inputs/ModalMask.vue
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: push-check
🔇 Additional comments (1)
packages/settings/styles/src/styles/vars.less (1)
72-76:✅ Verification successful
Verify the existence of base theme variables.
The new modal mask variables reference base theme variables that need to be verified.
Let's verify that the referenced base variables exist in the theme files:
🏁 Script executed:
#!/bin/bash # Description: Check if the referenced base variables exist in theme files # Search for the base variables in theme files echo "Searching for base modal variables..." rg --type less "te-base-(modal-padding|modal-offset|space-16)"Length of output: 1056
Base Theme Variables Verified
The base modal variables referenced in
packages/settings/styles/src/styles/vars.lesshave been verified to exist inpackages/theme/base/src/base.less:
--te-base-modal-padding-yand--te-base-modal-padding-xare defined.--te-base-modal-offset-1and--te-base-modal-offset-2are defined.--te-base-space-16is defined.Everything is in order, and no further changes are required.
xuanlid
force-pushed
the
feat/commonVars
branch
from
1fcc0a8 to
52f330b
Compare
xuanlid
force-pushed
the
feat/commonVars
branch
from
52f330b to
ceed4d9
Compare
English | 简体中文
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Background and solution
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
Style
Chores