feat: variable convergence( layout，toolbars， common) #1101
Conversation
WalkthroughThis pull request applies extensive CSS updates across multiple Vue components to align them with a new design system. Most changes involve replacing old CSS variable names with new ones and introducing new global custom properties via LESS. Updates span components in common, layout, theme, and toolbars packages. Aside from modifying the styling—such as background colors, borders, and hover effects—no functional or control flow changes were made. Changes
Sequence Diagram(s)Possibly related PRs
Suggested reviewers
Poem
📜 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)
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 (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
packages/layout/src/ToolbarCollapse.vue (1)
51-98: Add scoped attribute to style block.The style block is not scoped, which could lead to unintended style leaks. Consider adding the
scopedattribute to contain styles within this component.-<style lang="less"> +<style lang="less" scoped>
🧹 Nitpick comments (12)
packages/common/component/LifeCycles.vue (1)
262-393: Consider extracting common stylesThe component has several repeated color variables that could be extracted into a shared LESS file to improve maintainability.
Consider creating a shared LESS file with common variables:
// common/styles/variables.less @life-cycle-text-color: var(--te-component-common-color); @life-cycle-border-color: var(--te-component-common-border-color); @life-cycle-hover-bg: var(--te-component-common-hover-bg-color);Then import and use these variables in the component:
<style lang="less" scoped> +@import '../styles/variables.less'; .life-cycle-btn { - color: var(--te-component-common-color); + color: @life-cycle-text-color; // ... }packages/common/component/MetaCodeEditor.vue (2)
271-287: LGTM! Consider consolidating hover and focus states.The CSS variable updates for the edit button align well with the module variable standardization. The naming convention follows the expected pattern.
Consider consolidating the duplicate border-color declarations for hover and focus states:
&:hover, &:focus { border-color: var(--te-component-common-active-border-color); }
352-392: LGTM! Consider using semantic variable names for text colors.The color variables are consistently applied across the source code editor section. The error color uses a semantic name, which is a good practice.
Consider using more semantic variable names for text colors to better reflect their purpose:
-color: var(--te-component-common-weaken-text-color); +color: var(--te-component-common-secondary-text-color);packages/common/component/PluginBlockList.vue (1)
491-492: Consider using a dedicated hover state variable.Instead of using
--te-component-common-hover-bg-colordirectly, consider creating a block-specific hover variable (e.g.,--te-component-block-hover-bg-color) to maintain better modularity and allow for block-specific hover states.- background-color: var(--te-component-common-hover-bg-color); + background-color: var(--te-component-block-hover-bg-color);packages/layout/src/styles/vars.less (1)
1-13: Module Variable Definitions: The new CSS declarations under the :root selector (lines 1–13) are clearly structured and correctly map module-specific variables (e.g., --te-layout-common-border-color, --te-layout-common-bg-color, etc.) to the established common variables. This approach supports a centralized theming strategy that aligns with the PR’s objectives for variable convergence across modules. One minor observation is that both the hover and active text colors (lines 9–10) are set to var(--te-common-text-primary); please ensure this duplication is intentional and aligns with the design spec.packages/toolbars/redoundo/src/Main.vue (1)
70-83: LGTM! CSS variables follow module-specific naming.The changes from generic to module-specific variables (
--te-toolbars-redoundo-*) follow the correct naming convention and state management.Consider adding focus states for keyboard navigation accessibility:
&:not(.disabled):hover { background: var(--te-toolbars-redoundo-active-bg-color); svg { color: var(--te-toolbars-redoundo-hover-icon-color); } } +&:not(.disabled):focus-visible { + background: var(--te-toolbars-redoundo-active-bg-color); + outline: 2px solid var(--te-toolbars-redoundo-color); + outline-offset: 2px; + svg { + color: var(--te-toolbars-redoundo-hover-icon-color); + } +}packages/toolbars/collaboration/src/Main.vue (1)
123-169: LGTM! CSS variables follow module-specific naming with room for UX improvements.The changes to module-specific variables (
--te-toolbars-collaboration-*) are consistent with the naming convention.Consider these UX improvements:
.user-item { padding: 10px 16px; display: flex; align-items: center; + transition: background-color 0.2s ease; &:hover { background: var(--te-toolbars-collaboration-hover-bg-color); + .user-item-name { + color: var(--te-toolbars-collaboration-hover-text-color); + } }packages/toolbars/breadcrumb/src/Main.vue (1)
113-165: LGTM! CSS variables follow module-specific naming with some gaps.The changes to module-specific variables (
--te-toolbars-breadcrumb-*) are consistent, but some improvements needed.
- Update separator color to use module-specific variable:
:deep(.tiny-breadcrumb__separator) { padding: 0; margin: 0 4px 0 0; + color: var(--te-toolbars-breadcrumb-separator-color); }
- Add keyboard navigation support:
.tiny-breadcrumb__item { cursor: inherit; user-select: none; :deep(.tiny-breadcrumb__inner) { color: var(--te-toolbars-breadcrumb-color); text-decoration: none; cursor: pointer; + &:focus-visible { + outline: 2px solid var(--te-toolbars-breadcrumb-color); + outline-offset: 2px; + } }packages/common/component/toolbar-built-in/ToolbarBaseIcon.vue (1)
47-47: Consider using a semantic variable name for dots indicator.The use of
--te-component-common-error-colorfor dots might not be semantically correct. Consider creating a dedicated variable like--te-component-toolbar-dot-colorto avoid potential visual inconsistencies if error colors are updated.- background: var(--te-component-common-error-color); + background: var(--te-component-toolbar-dot-color);packages/common/component/toolbar-built-in/ToolbarBaseButton.vue (2)
36-36: Remove !important flag and fix specificity.Using
!importantflags indicates potential specificity issues. Consider increasing selector specificity or reviewing the cascade instead.- background-color: var(--te-component-toolbar-base-button-bg-color) !important; + background-color: var(--te-component-toolbar-base-button-bg-color);
53-53: Maintain consistency with dot styling.For consistency with ToolbarBaseIcon, consider using the same semantic variable for dots.
- background: var(--te-component-common-error-color); + background: var(--te-component-toolbar-dot-color);packages/common/component/ConfigItem.vue (1)
567-569: Consider grouping error state styles.The error state styles are spread across multiple selectors. Consider grouping them for better maintainability.
&.verify-failed { :deep(.tiny-input .tiny-input__inner) { &, &:focus { border-color: var(--te-component-common-error-color); background-color: var(--te-component-common-error-bg-color); } } - :deep(.tiny-textarea__inner) { - &, - &:focus { - background-color: var(--te-component-common-error-bg-color); - } - } - :deep(.tiny-textarea) { + :deep(.tiny-textarea, .tiny-textarea__inner) { &, &:focus { border-color: var(--te-component-common-error-color); background-color: var(--te-component-common-error-bg-color); } } }Also applies to: 574-575, 580-582
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
packages/design-core/assets/block-add-prop.svgis excluded by!**/*.svgpackages/design-core/assets/block-bind-prop.svgis excluded by!**/*.svg
📒 Files selected for processing (68)
packages/common/component/BlockDescription.vue(1 hunks)packages/common/component/BlockHistoryList.vue(1 hunks)packages/common/component/BlockLinkEvent.vue(3 hunks)packages/common/component/BlockLinkField.vue(2 hunks)packages/common/component/ButtonGroup.vue(1 hunks)packages/common/component/CloseIcon.vue(2 hunks)packages/common/component/ConfigCollapse.vue(1 hunks)packages/common/component/ConfigItem.vue(8 hunks)packages/common/component/EmptyTip.vue(2 hunks)packages/common/component/I18nInput.vue(1 hunks)packages/common/component/LifeCycles.vue(6 hunks)packages/common/component/MaskModal.vue(1 hunks)packages/common/component/MetaChildItem.vue(1 hunks)packages/common/component/MetaCodeEditor.vue(4 hunks)packages/common/component/MetaDescription.vue(1 hunks)packages/common/component/MetaList.vue(2 hunks)packages/common/component/MetaListActions.vue(1 hunks)packages/common/component/MetaListItem.vue(2 hunks)packages/common/component/MetaModal.vue(1 hunks)packages/common/component/MetaModalItem.vue(3 hunks)packages/common/component/MonacoEditor.vue(3 hunks)packages/common/component/MultiTypeSelector.vue(1 hunks)packages/common/component/PluginBlockItemImg.vue(2 hunks)packages/common/component/PluginBlockList.vue(10 hunks)packages/common/component/PluginPanel.vue(2 hunks)packages/common/component/PluginSetting.vue(2 hunks)packages/common/component/SearchEmpty.vue(1 hunks)packages/common/component/SvgButton.vue(1 hunks)packages/common/component/ToolbarBase.vue(1 hunks)packages/common/component/VideoGuide.vue(1 hunks)packages/common/component/toolbar-built-in/ToolbarBaseButton.vue(2 hunks)packages/common/component/toolbar-built-in/ToolbarBaseIcon.vue(1 hunks)packages/common/index.js(1 hunks)packages/common/styles/vars.less(1 hunks)packages/layout/index.js(1 hunks)packages/layout/src/DesignPlugins.vue(4 hunks)packages/layout/src/DesignSettings.vue(4 hunks)packages/layout/src/DesignToolbars.vue(5 hunks)packages/layout/src/ToolbarCollapse.vue(2 hunks)packages/layout/src/styles/vars.less(1 hunks)packages/theme/base/src/base.less(2 hunks)packages/theme/base/src/common.less(4 hunks)packages/toolbars/breadcrumb/index.js(1 hunks)packages/toolbars/breadcrumb/src/Main.vue(3 hunks)packages/toolbars/breadcrumb/src/styles/vars.less(1 hunks)packages/toolbars/collaboration/index.js(1 hunks)packages/toolbars/collaboration/src/Main.vue(4 hunks)packages/toolbars/collaboration/src/styles/vars.less(1 hunks)packages/toolbars/generate-code/index.js(1 hunks)packages/toolbars/generate-code/src/FileSelector.vue(4 hunks)packages/toolbars/generate-code/src/Main.vue(1 hunks)packages/toolbars/generate-code/src/styles/vars.less(1 hunks)packages/toolbars/lang/src/Main.vue(0 hunks)packages/toolbars/logo/index.js(1 hunks)packages/toolbars/logo/src/Main.vue(6 hunks)packages/toolbars/logo/src/styles/vars.less(1 hunks)packages/toolbars/logout/index.js(1 hunks)packages/toolbars/logout/src/Main.vue(1 hunks)packages/toolbars/logout/src/styles/vars.less(1 hunks)packages/toolbars/media/index.js(1 hunks)packages/toolbars/media/src/Main.vue(5 hunks)packages/toolbars/media/src/styles/vars.less(1 hunks)packages/toolbars/redoundo/index.js(1 hunks)packages/toolbars/redoundo/src/Main.vue(1 hunks)packages/toolbars/redoundo/src/styles/vars.less(1 hunks)packages/toolbars/save/index.js(1 hunks)packages/toolbars/save/src/Main.vue(6 hunks)packages/toolbars/save/src/styles/vars.less(1 hunks)
💤 Files with no reviewable changes (1)
- packages/toolbars/lang/src/Main.vue
✅ Files skipped from review due to trivial changes (39)
- packages/toolbars/logout/src/styles/vars.less
- packages/toolbars/breadcrumb/index.js
- packages/toolbars/media/index.js
- packages/toolbars/generate-code/index.js
- packages/toolbars/redoundo/index.js
- packages/layout/index.js
- packages/common/index.js
- packages/common/component/ToolbarBase.vue
- packages/toolbars/logo/index.js
- packages/common/component/MultiTypeSelector.vue
- packages/common/component/MetaList.vue
- packages/toolbars/collaboration/index.js
- packages/toolbars/logout/index.js
- packages/common/component/PluginBlockItemImg.vue
- packages/common/component/MetaListActions.vue
- packages/toolbars/save/index.js
- packages/common/component/CloseIcon.vue
- packages/common/component/MetaModal.vue
- packages/toolbars/redoundo/src/styles/vars.less
- packages/toolbars/logo/src/styles/vars.less
- packages/common/component/MonacoEditor.vue
- packages/toolbars/logo/src/Main.vue
- packages/common/component/SearchEmpty.vue
- packages/toolbars/breadcrumb/src/styles/vars.less
- packages/common/component/I18nInput.vue
- packages/toolbars/generate-code/src/Main.vue
- packages/common/component/MetaListItem.vue
- packages/toolbars/generate-code/src/FileSelector.vue
- packages/toolbars/save/src/Main.vue
- packages/common/component/MetaDescription.vue
- packages/common/component/VideoGuide.vue
- packages/toolbars/media/src/Main.vue
- packages/common/component/EmptyTip.vue
- packages/common/component/BlockHistoryList.vue
- packages/toolbars/save/src/styles/vars.less
- packages/common/component/BlockLinkField.vue
- packages/toolbars/generate-code/src/styles/vars.less
- packages/common/component/SvgButton.vue
- packages/layout/src/DesignSettings.vue
🔇 Additional comments (46)
packages/toolbars/media/src/styles/vars.less (1)
1-6: CSS Variables Definition for Media Toolbar:
The new CSS custom properties are correctly defined under the :root selector. They appropriately map to the corresponding common variables, ensuring consistency with the design system and facilitating future theming updates.packages/toolbars/collaboration/src/styles/vars.less (1)
1-6: CSS Variables Definition for Collaboration Toolbar:
The defined CSS custom properties accurately reference the common styling variables and follow the expected naming conventions. This ensures that the collaboration toolbar will maintain visual consistency across the application while following the new module-specific variable guidelines.packages/common/component/PluginPanel.vue (2)
76-76: LGTM! Background color variable update aligns with design system.The change from
--te-common-bg-defaultto--te-component-common-bg-colorfollows the PR's objective of standardizing module variables.
89-90: LGTM! Text styling variables updated for consistency.The changes align with the design system's variable hierarchy:
- Color:
--ti-lowcode-plugin-panel-title-color→--te-component-common-color- Font weight:
--ti-lowcode-plugin-panel-title-font-weight→--te-base-font-weight-7packages/common/component/LifeCycles.vue (5)
269-274: LGTM: Button styling updates align with design systemThe color variables for the lifecycle button have been updated to use the new
--te-component-commonprefix, maintaining consistency with the new design system.
278-278: LGTM: Text color updates follow new variable schemeThe text colors for tips, alerts, and content items have been standardized using the new component-specific variables.
Also applies to: 287-287, 292-292
307-307: LGTM: Interactive state colors updatedHover background and disabled text colors now use the standardized component variables.
Also applies to: 313-313
342-342: LGTM: Selection state colors follow design systemActive and hover background colors for lifecycle names have been updated to use the new component variables.
Also applies to: 354-354
362-362: LGTM: Border and dialog colors standardizedThe editor border and dialog title colors now use the component-specific variables.
Also applies to: 381-381
packages/common/component/MetaModalItem.vue (3)
117-118: Well-structured variable naming convention!The updated CSS variables follow a clear and consistent naming pattern:
- Common properties use
--te-component-common-*- Component-specific properties use
--te-component-meta-modal-*This aligns well with the PR's objective of standardizing variable usage.
126-126: LGTM!Good use of the common text color variable for standard text styling.
135-135: LGTM!Good use of common component variables for icon colors and hover states, maintaining consistency across the application.
Also applies to: 144-145
packages/common/component/ConfigCollapse.vue (1)
43-43: LGTM! Verify the new CSS variable.The changes correctly standardize the hover state colors using the new component-specific variable. The consistent use of
--te-component-common-primary-icon-colorfor both text and icon follows good practices.Let's verify that this new CSS variable is properly defined:
Also applies to: 46-46
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Search for the definition of the new CSS variable rg --type less "te-component-common-primary-icon-color"Length of output: 163
LGTM! Verified that the new CSS variable exists.
The search output confirms that
--te-component-common-primary-icon-coloris defined inpackages/common/styles/vars.lessas follows:
--te-component-common-primary-icon-color: var(--te-common-icon-primary);This confirms the change aligns with the standardized variable usage objective.
packages/common/component/MetaChildItem.vue (1)
93-93: LGTM! Verify the new CSS variable.The color variable change aligns with the PR objectives of standardizing variable usage across modules.
Let's verify that the new CSS variable is properly defined:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Search for the definition of the new CSS variable rg --type less "te-component-common-color"Length of output: 137
Verification Successful: New CSS Variable Defined Correctly
The CSS variable "--te-component-common-color" is correctly defined in "packages/common/styles/vars.less" as:
--te-component-common-color: var(--te-common-text-primary);
This aligns with the PR objectives and the variable hierarchy requirements.
packages/layout/src/DesignPlugins.vue (3)
203-204: LGTM! Variable standardization aligns with PR objectives.The changes correctly migrate from common variables to layout-specific variables, maintaining consistent styling while improving modularity.
242-242: LGTM! Consistent variable naming pattern.The background and border color variables have been correctly updated to use layout-specific variables, maintaining consistency with the module's variable hierarchy.
Also applies to: 245-245
279-279: LGTM! Comprehensive update of interactive state variables.The changes properly handle all interactive states (hover, active, text) while maintaining the module-specific variable pattern. The updates follow the variable hierarchy path mentioned in the PR objectives: base/common less -> module less -> Vue files.
Also applies to: 288-288, 293-293, 301-301
packages/common/component/MetaCodeEditor.vue (1)
309-329: LGTM! Consistent use of module variables.The color variables for borders, text, and icons follow a consistent naming pattern and are semantically named based on their usage.
packages/layout/src/DesignToolbars.vue (6)
82-82: LGTM! Variable naming follows module convention.The background and border color variables now correctly use the
--te-layout-prefix, aligning with the module-specific variable naming convention.Also applies to: 85-85
112-112: LGTM! Icon color uses module-specific variable.The icon color now uses the module-specific variable
--te-layout-common-color.
120-120: LGTM! Interactive state variables are well-defined.The background colors for both normal and hover states now use appropriate module-specific variables that clearly indicate their purpose.
Also applies to: 125-125
137-137: LGTM! Right toolbar interactive states use consistent variables.The hover and active state colors now use module-specific variables that maintain consistency with the layout module's naming convention.
Also applies to: 140-140
163-163: LGTM! Separator line color maintains visual consistency.The separator line color reuses the same border color variable, maintaining visual consistency throughout the toolbar.
174-174: LGTM! Locale text styling maintains visual hierarchy.The locale text color now uses the module-specific variable while maintaining visual hierarchy through opacity.
packages/common/component/PluginBlockList.vue (2)
359-370: LGTM! CSS variable updates align with the new design system.The changes consistently use the new module-specific variables for colors, which aligns with the PR objectives of standardizing variable usage across modules.
387-408: LGTM! Header styling consistently uses the new CSS variables.The changes appropriately use block-specific variables for the header background and common variables for text and borders.
packages/common/component/MaskModal.vue (1)
37-37: LGTM! Verify the new variable definition.The change from
--ti-lowcode-mask-modal-bgto--te-component-mask-modal-bg-coloraligns with the PR's objective to standardize variable usage across modules.Let's verify that the new variable is properly defined in the base/common less files:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Search for the definition of the new background color variable rg --type less "te-component-mask-modal-bg-color"Length of output: 143
Variable Definition Verified
The new variable is properly defined in "packages/common/styles/vars.less" as follows:
- "--te-component-mask-modal-bg-color: var(--te-common-mask);"
This confirms that the change aligns with the PR's objective for standardized variable usage.
packages/common/component/PluginSetting.vue (4)
131-131: LGTM! Improved variable naming consistency.The border color variables have been standardized to use the
--te-component-common-*family, which aligns with the PR's objective of ensuring proper variable hierarchy and usage.Also applies to: 134-134
132-132: LGTM! Proper variable hierarchy implementation.The background and shadow colors now correctly use component-level variables instead of base-level ones, following the specified variable hierarchy path: base/common -> module -> Vue files.
Also applies to: 136-136
167-167: LGTM! Standardized module variable usage.The changes properly convert module-specific variables (
--ti-lowcode-*) to common component variables, aligning with the PR's objective of reviewing and standardizing module variable usage in Vue files.Also applies to: 169-169
131-169: LGTM! Consistent variable naming pattern.All CSS variables now follow a clear and consistent naming pattern (
--te-component-common-*), which improves maintainability and makes the styling system more intuitive.packages/layout/src/styles/vars.less (1)
15-16: Naming Consistency for Canvas Handle Variable: The variable --te-layout-setting-canvas-handle-hover-bg on line 15 uses a naming convention that differs slightly from the rest of the module variables (which largely use the --te-layout-common- prefix). Verify whether this difference is intentional—perhaps due to its unique role in the layout settings—or if it should be revised for consistency within the module’s variable hierarchy.packages/toolbars/logout/src/Main.vue (1)
25-25: LGTM! CSS variable change aligns with module-specific naming.The change from
--te-common-text-secondaryto--te-toolbars-logout-colorfollows the correct variable hierarchy and module-specific naming convention.packages/common/component/ButtonGroup.vue (2)
1-32: LGTM! Component structure follows Vue.js best practices.The component is well-structured with:
- Clear separation of template and styles
- Proper use of scoped styles
- Efficient use of CSS Grid for button layout
- Correct usage of Vue's
:deep()selector for targeting child components
28-30: LGTM! CSS variable change aligns with the new naming convention.The change from
--te-common-border-secondaryto--te-component-common-button-border-colorfollows the PR's objective of converting common variables to more specific module variables.Let's verify that this new variable is consistently used across other button components:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Search for any remaining instances of the old variable rg --type-add 'vue:*.vue' --type vue 'te-common-border-secondary' # Search for consistent usage of the new variable rg --type-add 'vue:*.vue' --type vue 'te-component-common-button-border-color'Length of output: 469
LGTM on ButtonGroup.vue – New CSS Variable Applied Correctly
The ButtonGroup component now correctly uses the new variable ("--te-component-common-button-border-color"), which aligns with the PR’s objective to convert common variables to module-specific variants. Note that our search did reveal two occurrences of the old variable ("--te-common-border-secondary") in DataSourceRemoteDataResult.vue and EditorI18nTool.vue; however, these files don't appear to be part of the button components module and may not be subject to this specific PR change.
packages/common/component/BlockLinkEvent.vue (2)
2-2: LGTM! UI improvements enhance usability.The changes improve the visual hierarchy and user experience by:
- Removing the popover arrow for a cleaner look
- Adding an icon to the "Add Event" menu item for better visual cues
Also applies to: 8-10
191-191: LGTM! Style changes align with design system.The changes successfully:
- Convert all color values to module variables
- Improve spacing and alignment
- Maintain consistent hover states
Let's verify that all color variables are properly defined:
Also applies to: 206-212, 216-222
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Description: Check if the CSS variables are defined in the module's less files # Look for variable definitions in less files rg --type less "(@|:root.*{)\s*(--te-component-common-(block-add|color|hover-bg|checked)-color\s*:)"Length of output: 279
I'm going to re-run the verification with a simplified regex so we can properly list the CSS variable definitions from the less files. This will help confirm that the required variables (e.g. --te-component-common-block-add-color, etc.) are defined somewhere.
🏁 Script executed:
#!/bin/bash # Description: List all CSS variable definitions in less files that start with '--te-component-common-' rg --type less '--te-component-common-[a-z-]+:'Length of output: 482
Let's try re-running the command using "--" to explicitly signal the end of options for rg:
🏁 Script executed:
#!/bin/bash # Re-run search with the correct command syntax to match CSS variable definitions in less files. rg --type less -- '--te-component-common-[a-z-]+:'Length of output: 2680
LGTM! Verified the CSS variable definitions.
After re-running the scripts, we confirmed that the variable "--te-component-common-block-add-color" (along with other common variables) is defined in packages/common/styles/vars.less. The style changes use the module variables as intended, keeping consistency across the components.
packages/common/component/BlockDescription.vue (1)
49-50: LGTM! Variable naming follows the new convention.The changes correctly implement the new variable naming scheme and maintain proper scoping.
Also applies to: 57-59
packages/layout/src/ToolbarCollapse.vue (1)
61-62: LGTM! Variable naming follows the new convention.The changes correctly implement the new variable naming scheme with proper layout scoping.
Also applies to: 76-77, 83-83, 88-88
packages/theme/base/src/base.less (2)
23-24: LGTM! New gray variables with alpha values.The new gray variables follow the existing naming pattern and provide needed transparency levels.
195-198: Verify the impact of indigo color changes.The value of
--te-base-indigo-120has been changed from#716accto#302e47. This could affect existing components using this color.Run this script to check for usages:
✅ Verification successful
🏁 Script executed:
#!/bin/bash # Description: Find components using the modified indigo color. rg --type=less --type=vue "var\(--te-base-indigo-120\)"Length of output: 85
🏁 Script executed:
#!/bin/bash # Revised search: Find components using the modified indigo color variable in .less and .vue files. rg -g "*.less" -g "*.vue" "var(--te-base-indigo-120)"Length of output: 55
No direct usage of --te-base-indigo-120 found in .less/.vue files
Our revised searches using ripgrep across .less and .vue files did not return any references invoking var(--te-base-indigo-120) apart from its declaration in the base file. This suggests that, as it stands, no component directly uses that CSS variable and the change is unlikely to impact existing components.
If the variable might be referenced dynamically (or via other file types), please perform a manual verification; however, based on our findings, the change appears isolated.
packages/common/styles/vars.less (1)
1-61: Well-structured component variable definitions.The component variables are:
- Well organized by type (text, icon, bg, etc.)
- Follow consistent naming patterns
- Properly documented with comments
- Correctly reference common variables
packages/theme/base/src/common.less (1)
20-21: LGTM! Consistent color variables across themes.The new color variables are:
- Added consistently in both light and dark themes
- Use appropriate base color values
- Follow existing naming patterns
Also applies to: 58-60, 83-84, 120-122
packages/common/component/ConfigItem.vue (3)
526-526: LGTM! Proper use of new component variables.The CSS variables are correctly updated to use the new component-level variables.
Also applies to: 530-531, 552-554
613-613: LGTM! Consistent text color usage.The text colors are consistently updated using appropriate component variables.
Also applies to: 682-682, 696-696, 717-717, 721-721
638-639: LGTM! Border color update.The border colors are correctly updated to use the new transparent border variable.
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
主要修改：公共组件，顶部操作栏，工具栏
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
Summary by CodeRabbit