From d9571437c3981f3fe9ad8ba02c4ea41b019be5d1 Mon Sep 17 00:00:00 2001 From: wenmine Date: Mon, 13 Jan 2025 21:46:44 +0800 Subject: [PATCH 01/11] feat(theme): pageManage css variables change --- packages/plugins/page/src/PageGeneral.vue | 13 ++----- packages/plugins/page/src/PageHome.vue | 4 +- packages/plugins/page/src/PageInputOutput.vue | 2 +- packages/plugins/page/src/PageSetting.vue | 6 --- packages/theme/dark/pageManage.less | 37 +++++-------------- packages/theme/light/pageManage.less | 32 ++++------------ 6 files changed, 24 insertions(+), 70 deletions(-) diff --git a/packages/plugins/page/src/PageGeneral.vue b/packages/plugins/page/src/PageGeneral.vue index bbe4f87c5c..cea808d7fa 100644 --- a/packages/plugins/page/src/PageGeneral.vue +++ b/packages/plugins/page/src/PageGeneral.vue @@ -236,9 +236,8 @@ export default { :deep(.tiny-form-item) { margin-bottom: 16px; .tiny-input-group__prepend { - border: 1px solid var(--ti-lowcode-page-manage-input-group-border-color); - background: var(--ti-lowcode-page-manage-input-group-color); - border-right: 1px solid var(--ti-lowcode-page-manage-input-group-border-right-color); + border: 1px solid var(--te-common-border-default); + background: var(--te-common-bg-default); } .page-type-radio { color: var(--ti-lowcode-page-manage-title-background-text-color); @@ -252,18 +251,15 @@ export default { } } .tip { - color: var(--ti-lowcode-page-manage-tip-border-color); + color: var(--ti-lowcode-page-manage-tip-text-color); font-size: 12px; border-radius: 3px; display: flex; align-items: center; height: 16px; margin-top: 4px; - .icon { - color: var(--ti-lowcode-page-manage-icon-text-color); - } .text { - color: var(--ti-lowcode-page-manage-btn-text-color); + color: var(--te-common-text-weaken); } .text-dim { color: var(--ti-lowcode-plugin-panel-title-color); @@ -275,7 +271,6 @@ export default { .tiny-select-dropdown.parent-fold-select-dropdown { .tiny-tree { background-color: var(--ti-lowcode-page-manage-tree-text-background-color); - .tiny-tree-node { &.is-current { .tiny-tree-node__content { diff --git a/packages/plugins/page/src/PageHome.vue b/packages/plugins/page/src/PageHome.vue index e431e54ec3..6f439a13aa 100644 --- a/packages/plugins/page/src/PageHome.vue +++ b/packages/plugins/page/src/PageHome.vue @@ -106,13 +106,13 @@ export default { } .tip { - color: var(--ti-lowcode-page-manage-btn-text-color); + color: var(--te-common-text-weaken); margin-top: 4px; margin-bottom: 12px; font-size: 11px; line-height: 16px; span { - color: var(--ti-lowcode-page-manage-btn-text-color); + color: var(--te-common-text-weaken); } .home-page { display: inline-block; diff --git a/packages/plugins/page/src/PageInputOutput.vue b/packages/plugins/page/src/PageInputOutput.vue index 83663c81b7..608a21672a 100644 --- a/packages/plugins/page/src/PageInputOutput.vue +++ b/packages/plugins/page/src/PageInputOutput.vue @@ -101,7 +101,7 @@ export default { diff --git a/packages/theme/dark/plugin-js.less b/packages/theme/dark/plugin-js.less index c07a1a2c30..bb25ca60d2 100644 --- a/packages/theme/dark/plugin-js.less +++ b/packages/theme/dark/plugin-js.less @@ -1,7 +1,5 @@ // 页面JS 插件面板 .plugin-page-js-container { - --ti-lowcode-plugin-js-bg: var(--ti-lowcode-common-component-bg); - --ti-lowcode-plugin-js-head-border-bottom-color: var(--ti-lowcode-common-bg-4); - --ti-lowcode-code-edit-content-border-color: var(--ti-lowcode-base-gray-60); - --ti-lowcode-plugin-js-help-link-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-plugin-js-bg: var(--te-common-bg-default); + --ti-lowcode-plugin-js-help-link-color: var(--te-common-text-link); } diff --git a/packages/theme/dark/toolbar.less b/packages/theme/dark/toolbar.less index a85dffb018..251b77d1e0 100644 --- a/packages/theme/dark/toolbar.less +++ b/packages/theme/dark/toolbar.less @@ -1,16 +1,12 @@ .tiny-engine-toolbar { // 头部工具栏 - --ti-lowcode-toolbar-border-bottom-color: transparent; - --ti-lowcode-toolbar-media-bg: var(--ti-lowcode-common-bg-6); - --ti-lowcode-toolbar-media-setting-border-color: var(--ti-lowcode-common-border-color-2); - --ti-lowcode-toolbar-title-color: #e6e6e6; - --ti-lowcode-toolbar-sub-title-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-toolbar-hover-color: var(--ti-lowcode-common-component-hover-bg); - --ti-lowcode-toolbar-view-active-bg: #2f2f2f; - --ti-lowcode-toolbar-left-icon-bg-hover: rgb(240, 240, 240); - --ti-lowcode-toolbar-popover-bg: var(--ti-lowcode-base-gray-0); - --ti-lowcode-toolbar-active-color: #808080; - --ti-lowcode-toolbar-user-img-border-color: var(--ti-lowcode-base-gray-20); - --ti-lowcode-toolbar-dot-color: var(--ti-lowcode-common-danger-color); - --ti-lowcode-toolbar-right-line: #ebebeb; + --ti-lowcode-toolbar-border-bottom-color: var(--te-common-border-divider); + --ti-lowcode-toolbar-title-color: var(--te-common-text-primary); + --ti-lowcode-toolbar-hover-color: var(--te-common-bg-container); + --ti-lowcode-toolbar-view-active-bg: var(--te-common-bg-prompt); + --ti-lowcode-toolbar-left-icon-bg-hover: var(--te-common-icon-primary); + --ti-lowcode-toolbar-active-color: var(--te-common-text-secondary); + --ti-lowcode-toolbar-user-img-border-color: var(--te-common-border-divider); + --ti-lowcode-toolbar-dot-color: var(--te-common-color-error); + --ti-lowcode-toolbar-right-line: var(--te-common-bg-prompt); } diff --git a/packages/theme/dark/tree.less b/packages/theme/dark/tree.less index b2d7556b02..5f870f2068 100644 --- a/packages/theme/dark/tree.less +++ b/packages/theme/dark/tree.less @@ -1,7 +1,4 @@ .outlinebox { - --ti-lowcode-tree-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-tree-icon-color: rgba(138, 142, 153, 0.99); - --ti-lowcode-tree-icon-hover-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-tree-selected-color: var(--ti-lowcode-common-text-color-3); - --ti-lowcode-tree-selected-bg: var(--ti-lowcode-common-primary-color); + --ti-lowcode-tree-icon-hover-color: var(--te-common-icon-hover); + --ti-lowcode-tree-border-color: transparent; // 亮色主题特有 } diff --git a/packages/theme/light/plugin-js.less b/packages/theme/light/plugin-js.less index ad512cd922..bb25ca60d2 100644 --- a/packages/theme/light/plugin-js.less +++ b/packages/theme/light/plugin-js.less @@ -1,7 +1,5 @@ // 页面JS 插件面板 .plugin-page-js-container { - --ti-lowcode-plugin-js-bg: var(--ti-lowcode-base-gray-0); - --ti-lowcode-plugin-js-head-border-bottom-color: var(--ti-lowcode-base-split-color-1); - --ti-lowcode-code-edit-content-border-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-plugin-js-help-link-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-plugin-js-bg: var(--te-common-bg-default); + --ti-lowcode-plugin-js-help-link-color: var(--te-common-text-link); } diff --git a/packages/theme/light/toolbar.less b/packages/theme/light/toolbar.less index 057378c2a5..2e8dabe872 100644 --- a/packages/theme/light/toolbar.less +++ b/packages/theme/light/toolbar.less @@ -1,17 +1,12 @@ .tiny-engine-toolbar { // 头部工具栏 - --ti-lowcode-toolbar-border-bottom-color: var(--ti-lowcode-common-border-color-4); - --ti-lowcode-toolbar-media-bg: var(--ti-lowcode-common-component-bg); - --ti-lowcode-toolbar-media-setting-border-color: var(--ti-lowcode-common-border-color-1); - --ti-lowcode-toolbar-title-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-toolbar-sub-title-color: var(--ti-lowcode-base-gray-60); + --ti-lowcode-toolbar-border-bottom-color: var(--te-common-border-divider); + --ti-lowcode-toolbar-title-color: var(--te-common-text-primary); --ti-lowcode-toolbar-hover-color: var(--te-common-bg-container); - --ti-lowcode-toolbar-view-active-bg: rgb(235, 235, 235); // 相当于 规范中定义的 #191919 透明度5% - --ti-lowcode-toolbar-left-icon-bg-hover: rgb(240, 240, 240); - --ti-lowcode-toolbar-popover-bg: var(--ti-lowcode-base-gray-0); - --ti-lowcode-toolbar-active-color: var(--ti-lowcode-base-gray-60); - --ti-lowcode-toolbar-user-img-border-color: var(--ti-lowcode-base-gray-20); - --ti-lowcode-toolbar-dot-color: var(--ti-lowcode-base-brand-color); - --ti-lowcode-toolbar-collapsed-toolbar-bg: #f5f5f5; - --ti-lowcode-toolbar-right-line: #ebebeb; + --ti-lowcode-toolbar-view-active-bg: var(--te-common-bg-prompt); // 相当于 规范中定义的 #191919 透明度5% + --ti-lowcode-toolbar-left-icon-bg-hover: var(--te-common-icon-primary); + --ti-lowcode-toolbar-active-color: var(--te-common-text-secondary); + --ti-lowcode-toolbar-user-img-border-color: var(--te-common-border-divider); + --ti-lowcode-toolbar-dot-color: var(--te-common-color-error); + --ti-lowcode-toolbar-right-line: var(--te-common-bg-prompt); } diff --git a/packages/theme/light/tree.less b/packages/theme/light/tree.less index aa0c30b1a0..5330c185a8 100644 --- a/packages/theme/light/tree.less +++ b/packages/theme/light/tree.less @@ -1,8 +1,4 @@ .outlinebox { - --ti-lowcode-tree-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-tree-icon-color: var(--ti-lowcode-base-primary-color-1); - --ti-lowcode-tree-icon-hover-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-tree-selected-color: rgb(110, 81, 224); - --ti-lowcode-tree-selected-bg: rgb(240, 237, 252); - --ti-lowcode-tree-border-color: #ebebeb; + --ti-lowcode-tree-icon-hover-color: var(--te-common-icon-hover); + --ti-lowcode-tree-border-color: var(--te-common-border-default); // 亮色主题特有 } From acd2fa9b111a8f87cf1a30bad9846728cf16278d Mon Sep 17 00:00:00 2001 From: wenmine Date: Tue, 14 Jan 2025 10:26:12 +0800 Subject: [PATCH 09/11] feat(theme): metaComponent&tutorial css variables change --- packages/theme/dark/metaComponent.less | 61 +++++++------------------ packages/theme/dark/tutorial.less | 4 +- packages/theme/light/metaComponent.less | 60 ++++++------------------ packages/theme/light/tutorial.less | 4 +- 4 files changed, 35 insertions(+), 94 deletions(-) diff --git a/packages/theme/dark/metaComponent.less b/packages/theme/dark/metaComponent.less index b185a2e417..924d20666f 100644 --- a/packages/theme/dark/metaComponent.less +++ b/packages/theme/dark/metaComponent.less @@ -1,65 +1,36 @@ :root { // MetaListItem - --ti-lowcode-meta-list-item-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-meta-list-item-border-color: transparent; + --ti-lowcode-meta-list-item-bg-color: var(--te-common-bg-default); + --ti-lowcode-meta-list-item-border-color: var(--te-common-border-default); - --ti-lowcode-meta-list-top-color: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-meta-list-top-color: var(--te-common-text-secondary); // MetaJsSlot - --lowcode-meta-js-slot-color: var(--ti-lowcode-base-text-color-1); + --lowcode-meta-js-slot-color: var(--te-common-text-secondary); // MetaCodeEditor - --ti-lowcode-meta-codeEditor-color: #d9d9d9; + --ti-lowcode-meta-codeEditor-color: var(--te-common-text-primary); + --ti-lowcode-meta-codeEditor-hover-color: var(--te-common-text-primary); --ti-lowcode-meta-codeEditor-border-color: var(--te-common-border-default); - --ti-lowcode-meta-codeEditor-hover-color: #fff; - --ti-lowcode-meta-codeEditor-border-hover-color: #6b6b6b; + --ti-lowcode-meta-codeEditor-border-hover-color: var(--te-common-border-active); + --ti-lowcode-meta-codeEditor-icon-color: var(--te-common-text-weaken); } // config-item label popover tips .prop-label-tips-container { - --ti-lowcode-meta-config-item-label-tips-desc-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-meta-config-item-label-tips-title-color: #fff; + --ti-lowcode-meta-config-item-label-tips-desc-color: var(--te-common-text-secondary); + --ti-lowcode-meta-config-item-label-tips-title-color: var(--te-common-text-primary); } // configItem .properties-item { - --ti-lowcode-meta-config-item-error-tips-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-meta-config-item-label-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-meta-config-item-bind-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-common-primary-color); - --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-common-primary-color); - --ti-lowcode-meta-config-item-active-bg: #fff; - --ti-lowcode-meta-config-item-link-color: var(--ti-lowcode-description-color); -} - -// MetaBindVariable -.meta-bind-variable-dialog-box { - --ti-lowcode-meta-bind-variable-icon-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-icon-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-content-left-title-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-content-right-title-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-list-wrap-border-color: var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-meta-bind-variable-content-left-list-border-right-color: var( - --ti-lowcode-base-default-button-border-color - ); - --ti-lowcode-meta-bind-variable-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-item-selected-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-bottom-border-color: var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-meta-bind-variable-top-border-color: var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-meta-bind-variable-bottom-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-meta-bind-variable-content-left-list-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-item-text-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-header-alert-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-meta-bind-variable-top-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-meta-config-item-error-tips-color: var(--te-common-color-error); + --ti-lowcode-meta-config-item-bind-color: var(--te-common-text-dark-inverse); + --ti-lowcode-meta-config-item-bind-bg: var(--te-common-bg-primary-checked); + --ti-lowcode-meta-config-item-active-bg: var(--te-common-bg-container); } // MetaCodeEditor .meta-code-editor-dialog-box { - --ti-lowcode-meta-code-editor-header-tips-container-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-meta-code-editor-header-collapse-icon-hover-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-meta-code-editor-header-tips-demo-bg-color: var(--ti-lowcode-base-gray-5); - --ti-lowcode-meta-code-editor-header-tips-demo-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-code-editor-source-code-content-border-color: transparent; - --ti-lowcode-meta-code-editor-err-msg-color: var(--ti-lowcode-base-error-color); + --ti-lowcode-meta-code-editor-header-tips-container-color: var(--te-common-text-primary); + --ti-lowcode-meta-code-editor-err-msg-color: var(--te-common-color-error); } diff --git a/packages/theme/dark/tutorial.less b/packages/theme/dark/tutorial.less index f872e57f78..4e963d5d35 100644 --- a/packages/theme/dark/tutorial.less +++ b/packages/theme/dark/tutorial.less @@ -1,5 +1,5 @@ #tiny-engine-left-panel { - --ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-base-bg-2); + --ti-lowcode-tutorial-primary-text-color: var(--te-common-text-secondary); + --ti-lowcode-tutorial-primary-bg-color: var(--te-common-bg-default); --ti-lowcode-tutorial-hover-bg-color: var(--te-common-bg-container); } diff --git a/packages/theme/light/metaComponent.less b/packages/theme/light/metaComponent.less index 9fe592bd26..50a234785f 100644 --- a/packages/theme/light/metaComponent.less +++ b/packages/theme/light/metaComponent.less @@ -1,66 +1,36 @@ :root { // MetaListItem - --ti-lowcode-meta-list-item-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-meta-list-item-border-color: rgba(0, 0, 0, 0.08); + --ti-lowcode-meta-list-item-bg-color: var(--te-common-bg-default); + --ti-lowcode-meta-list-item-border-color: var(--te-common-border-default); // - --ti-lowcode-meta-list-top-color: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-meta-list-top-color: var(--te-common-text-secondary); // MetaJsSlot - --lowcode-meta-js-slot-color: var(--ti-lowcode-base-text-color-1); + --lowcode-meta-js-slot-color: var(--te-common-text-secondary); // MetaCodeEditor - --ti-lowcode-meta-codeEditor-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-codeEditor-hover-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-meta-codeEditor-color: var(--te-common-text-primary); + --ti-lowcode-meta-codeEditor-hover-color: var(--te-common-text-primary); --ti-lowcode-meta-codeEditor-border-color: var(--te-common-border-default); - --ti-lowcode-meta-codeEditor-border-hover-color: var(--ti-lowcode-base-default-button-border-hover-color); + --ti-lowcode-meta-codeEditor-border-hover-color: var(--te-common-border-active); --ti-lowcode-meta-codeEditor-icon-color: var(--te-common-text-weaken); } // config-item label popover tips .prop-label-tips-container { - --ti-lowcode-meta-config-item-label-tips-desc-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-meta-config-item-label-tips-title-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-meta-config-item-label-tips-desc-color: var(--te-common-text-secondary); + --ti-lowcode-meta-config-item-label-tips-title-color: var(--te-common-text-primary); } // configItem .properties-item { - --ti-lowcode-meta-config-item-error-tips-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-meta-config-item-label-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-config-item-bind-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-base-primary-color-2); - - --ti-lowcode-meta-config-item-active-bg: var(--ti-lowcode-common-hover-bg-1); - --ti-lowcode-meta-config-item-link-color: var(--ti-lowcode-base-text-color-2); -} - -// MetaBindVariable -.meta-bind-variable-dialog-box { - --ti-lowcode-meta-bind-variable-icon-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-icon-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-content-left-title-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-content-right-title-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-list-wrap-border-color: var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-meta-bind-variable-content-left-list-border-right-color: var( - --ti-lowcode-base-default-button-border-color - ); - --ti-lowcode-meta-bind-variable-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-item-selected-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-bottom-border-color: var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-meta-bind-variable-top-border-color: var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-meta-bind-variable-bottom-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-meta-bind-variable-content-left-list-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-item-text-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-header-alert-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-top-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-meta-config-item-error-tips-color: var(--te-common-color-error); + --ti-lowcode-meta-config-item-bind-color: var(--te-common-text-dark-inverse); + --ti-lowcode-meta-config-item-bind-bg: var(--te-common-bg-primary-checked); + --ti-lowcode-meta-config-item-active-bg: var(--te-common-bg-container); } // MetaCodeEditor .meta-code-editor-dialog-box { - --ti-lowcode-meta-code-editor-header-tips-container-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-meta-code-editor-header-collapse-icon-hover-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-meta-code-editor-header-tips-demo-bg-color: var(--ti-lowcode-base-gray-5); - --ti-lowcode-meta-code-editor-header-tips-demo-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-code-editor-source-code-content-border-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-meta-code-editor-err-msg-color: var(--ti-lowcode-base-error-color); + --ti-lowcode-meta-code-editor-header-tips-container-color: var(--te-common-text-primary); + --ti-lowcode-meta-code-editor-err-msg-color: var(--te-common-color-error); } diff --git a/packages/theme/light/tutorial.less b/packages/theme/light/tutorial.less index 39f0d5dbc2..4e963d5d35 100644 --- a/packages/theme/light/tutorial.less +++ b/packages/theme/light/tutorial.less @@ -1,5 +1,5 @@ #tiny-engine-left-panel { - --ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-base-bg-5); + --ti-lowcode-tutorial-primary-text-color: var(--te-common-text-secondary); + --ti-lowcode-tutorial-primary-bg-color: var(--te-common-bg-default); --ti-lowcode-tutorial-hover-bg-color: var(--te-common-bg-container); } From a839fb4be59f944d6c108eb82cbf130b627232bf Mon Sep 17 00:00:00 2001 From: wenmine Date: Thu, 16 Jan 2025 20:30:41 +0800 Subject: [PATCH 10/11] feat(refactor/theme): delete theme/base.less, change variable.less --- .../src/components/CanvasDivider.vue | 4 +- packages/common/component/PluginBlockList.vue | 2 +- packages/plugins/schema/src/Main.vue | 2 +- packages/plugins/script/src/Main.vue | 2 +- packages/settings/design/src/App.vue | 1 - .../design/src/components/PropertyCanvas.vue | 2 +- .../design/src/components/PropertyList.vue | 2 +- packages/theme/dark/base.less | 273 ----------------- packages/theme/dark/index.less | 1 - packages/theme/dark/variable.less | 253 +++------------- packages/theme/light/base.less | 275 ------------------ packages/theme/light/index.less | 1 - packages/theme/light/variable.less | 247 +++------------- 13 files changed, 91 insertions(+), 974 deletions(-) delete mode 100644 packages/theme/dark/base.less delete mode 100644 packages/theme/light/base.less diff --git a/packages/canvas/container/src/components/CanvasDivider.vue b/packages/canvas/container/src/components/CanvasDivider.vue index 0b333fcd1c..1fb5f11307 100644 --- a/packages/canvas/container/src/components/CanvasDivider.vue +++ b/packages/canvas/container/src/components/CanvasDivider.vue @@ -201,7 +201,7 @@ export default { width: 24px; height: 24px; border-radius: 50%; - background-color: var(--ti-lowcode-common-text-color-3); + background-color: var(--te-common-bg-default); cursor: pointer; z-index: 3; &.divider-vertical { @@ -223,7 +223,7 @@ export default { .divider { width: 12px; height: 12px; - color: var(--ti-lowcode-common-text-color-3); + color: var(--te-base-gray-0); background-size: contain; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACO0lEQVRIDa2Uy6tNURzHN7cwMUAmHncot0QeV5QiBgZKmWEgzDDx+ANu5soMcUkxIY+iEFIKEZnIyMC9GZAMrke6hXt9Pvus1VnntPbZ53B/9dnrt36P7zpr7bVPUTRtD+5j+Arv4QwshDpbTIG1o2CvGmq12CVmk/ADnsGnMHccgCpbRiLWjuA/BTXUUrM0VzNwD+aVkcbjIMNveJnEUrePyWuYgP1JYi6+WmqWO3FLrpqKMy3tHE8LtzemLc99ITfcEm1MXERNtYsxcGs520nQBV61JWcyHw253W25OFVzbDqPj1D1MheF6tWM24LvcAD6w7yqdwF5tYvT4K90y6m5zQ/wE37BC9Bmw2f4Ah6DNdamFo/vlEHP3pvwB87CLjgGNrrwEbgY/K2MQ8E/zHg0+NbaY68aaqmpdmlLeT4HBSPf8RXQloA3ylvzDTx/34OmsLWxz9Hdqtlivo/l4NXy1syB1C4ziSK547THXjXU6tk20uECnn1fz91dNJynJu5gUxf1PZV4nr6DdzABj2BK7Rpq/votcDX4GxinxNagovjDoOZLdBcPwvy/h/souMDaROlGiK1PYv/kbg5C19u6V4b43bZ4z1M/GF/uQKbzFjF3NpjJdRXaEQQuVFQr7AK3K/Idw36Jb2Ec+jtU3iHnIqs61GRTe4naeDKbbQbXhbqbzVC9N4OSEfAPbD7UmbfMa7uirjDmD+H464/HQM3oB2f9lVxd7l9vFoVv4ESuIRN7QkzxaZlc8RcdnI7tMHZBlAAAAABJRU5ErkJggg==); diff --git a/packages/common/component/PluginBlockList.vue b/packages/common/component/PluginBlockList.vue index c930725dc8..dbdd381796 100644 --- a/packages/common/component/PluginBlockList.vue +++ b/packages/common/component/PluginBlockList.vue @@ -741,7 +741,7 @@ export default { box-sizing: border-box; cursor: pointer; &:hover { - color: var(--ti-lowcode-common-primary-text-color); + color: var(--te-common-text-primary); } .list-item-icon { font-size: 14px; diff --git a/packages/plugins/schema/src/Main.vue b/packages/plugins/schema/src/Main.vue index 71dd540b88..58509678dd 100644 --- a/packages/plugins/schema/src/Main.vue +++ b/packages/plugins/schema/src/Main.vue @@ -205,7 +205,7 @@ export default { width: 6px; height: 6px; border-radius: 50%; - background-color: var(--ti-lowcode-common-error-color); + background-color: var(--te-common-color-error); display: block; z-index: 100; position: absolute; diff --git a/packages/plugins/script/src/Main.vue b/packages/plugins/script/src/Main.vue index 22099bba6f..a5e2ec140b 100644 --- a/packages/plugins/script/src/Main.vue +++ b/packages/plugins/script/src/Main.vue @@ -158,7 +158,7 @@ export default { .dots { width: 6px; height: 6px; - background: var(--ti-lowcode-common-error-color); + background: var(--te-common-color-error); border-radius: 50%; position: absolute; top: 9px; diff --git a/packages/settings/design/src/App.vue b/packages/settings/design/src/App.vue index 1e3c55f175..ecde2bf79b 100644 --- a/packages/settings/design/src/App.vue +++ b/packages/settings/design/src/App.vue @@ -98,7 +98,6 @@ export default {