feat(refactor/theme): change incorrect css variables to the common va…

…riables and delete theme/base.less (#1049)
opentiny · Jan 21, 2025 · ceb8bae · ceb8bae
1 parent 4e4b18e
commit ceb8bae
Show file tree

Hide file tree

Showing 46 changed files with 356 additions and 1,488 deletions.
diff --git 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
@@ -358,7 +358,7 @@ export default {
   padding: 12px;
   background: var(--ti-lowcode-component-block-list-shortcut-bg);
   border-radius: 5px;
-  border: 1px solid var(--ti-lowcode-common-border-color-4);
+  border: 1px solid var(--te-common-border-default);
   top: v-bind('state.top');
   .block-shortcut-title {
     color: var(--ti-lowcode-component-block-list-shortcut-title-color);
@@ -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/page/src/PageGeneral.vue b/packages/plugins/page/src/PageGeneral.vue
@@ -252,9 +252,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);
@@ -268,18 +267,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);
@@ -290,7 +286,6 @@ export default {
 <style lang="less">
 .tiny-select-dropdown.parent-fold-select-dropdown {
   padding: 8px 0;
-
   .tiny-tree {
     .tiny-tree-node {
       .tiny-tree-node__content {

diff --git 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
@@ -101,7 +101,7 @@ export default {
 
 <style lang="less" scoped>
 .input-or-output {
-  color: var(--ti-lowcode-page-manage-icon-text-color);
+  color: var(--te-common-text-secondary);
   .life-cycle-alert {
     color: var(--ti-lowcode-life-cycle-alert-color);
     height: 28px;

diff --git 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
@@ -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
@@ -98,7 +98,6 @@ export default {
 <style lang="less">
 :root {
   --ti-lowcode-common-secondary-text-color: #adb0b8;
-  --ti-lowcode-common-border-color: #dfe1e6;
   --ti-lowcode-common-hover-bg-color: #f2f5fc;
   --ti-lowcode-mask-bg: #fafafa;
   --max-height: calc(65vh - 70px);

diff --git a/packages/settings/design/src/components/PropertyCanvas.vue b/packages/settings/design/src/components/PropertyCanvas.vue
@@ -236,7 +236,7 @@ export default {
     .tiny-collapse-item {
       &.is-active {
         .tiny-collapse-item__header {
-          border-bottom: 1px solid var(--ti-lowcode-common-border-color);
+          border-bottom: 1px solid var(--te-common-border-divider);
           height: 36px;
         }
       }

diff --git a/packages/settings/design/src/components/PropertyList.vue b/packages/settings/design/src/components/PropertyList.vue
@@ -113,7 +113,7 @@ export default {
   color: var(--te-common-text-primary);
   padding: 7px 7px;
   list-style: none;
-  border: 1px solid var(--ti-lowcode-common-border-color);
+  border: 1px solid var(--te-common-border-divider);
 
   &:hover {
     background: var(--ti-lowcode-common-hover-bg-color);

diff --git a/packages/settings/styles/src/components/background/ImageSetting.vue b/packages/settings/styles/src/components/background/ImageSetting.vue
@@ -268,33 +268,6 @@ onMounted(() => {
     }
   }
 }
-.text-wrap {
-  display: flex;
-  flex-direction: column;
-  font-size: 12px;
-  color: var(--te-common-text-secondary);
-  margin-left: 8px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  & > span {
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    &:first-child {
-      margin-bottom: 4px;
-    }
-    &:last-child {
-      display: flex;
-      align-items: center;
-      margin-top: 2px;
-    }
-  }
-  .size {
-    color: var(--te-common-text-secondary);
-  }
-}
 .choose-image {
   border-color: var(--te-common-border-default);
   outline: 0px;

diff --git a/packages/settings/styles/src/components/background/RadialGradient.vue b/packages/settings/styles/src/components/background/RadialGradient.vue
@@ -130,33 +130,6 @@ onMounted(() => {
   background-repeat: no-repeat;
   background-position: 50% 50%;
 }
-.text-wrap {
-  display: flex;
-  flex-direction: column;
-  font-size: 12px;
-  color: var(--te-common-text-secondary);
-  margin-left: 8px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  & > span {
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    &:first-child {
-      margin-bottom: 4px;
-    }
-    &:last-child {
-      display: flex;
-      align-items: center;
-      margin-top: 2px;
-    }
-  }
-  .size {
-    color: var(--ti-lowcode-common-third-text-color);
-  }
-}
 .choose-image {
   border-color: rgb(54, 54, 54);
   outline: 0px;