feat(theme): component style && common theme

packages/common/component/ConfigItem.vue

@@ -600,7 +600,7 @@ export default {
 
   .prop-description {
     margin-top: 8px;
-    color: var(--ti-lowcode-common-text-desc-color);
+    color: var(--te-common-text-weaken);
   }
   .label-tip {
     padding: 2px 0;

packages/common/component/MetaCodeEditor.vue

@@ -294,7 +294,7 @@ export default {
   }
 
   &.empty-color {
-    color: var(--ti-lowcode-common-text-desc-color);
+    color: var(--te-common-text-weaken);
   }
 
   .edit-icon {
@@ -328,7 +328,7 @@ export default {
     color: var(--ti-lowcode-meta-code-editor-header-tips-container-color);
 
     .header-tips-title {
-      color: var(--ti-lowcode-base-text-color-3);
+      color: var();
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
@@ -357,7 +357,7 @@ export default {
 
       code {
         font-family: Microsoft YaHei, Microsoft YaHei-Normal;
-        color: var(--ti-lowcode-base-text-color-3);
+        color: var();
       }
     }
   }

packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue

@@ -234,11 +234,11 @@ export default {
   position: relative;
   width: 60px;
   height: 20px;
-  border: 1px solid var(--ti-lowcode-base-bg);
+  border: 1px solid var(--te-common-bg-container);
   outline: 0;
   border-radius: 10px;
   box-sizing: border-box;
-  background: var(--ti-lowcode-base-bg);
+  background: var(--te-common-bg-container);
   transition: border-color 0.3s, background-color 0.3s;
   vertical-align: middle;
 }

packages/configurator/src/slot-configurator/SlotConfigurator.vue

@@ -171,11 +171,11 @@ export default {
   position: relative;
   width: 40px;
   height: 20px;
-  border: 1px solid var(--ti-lowcode-base-bg);
+  border: 1px solid var(--te-common-bg-container);
   outline: 0;
   border-radius: 10px;
   box-sizing: border-box;
-  background: var(--ti-lowcode-base-bg);
+  background: var(--te-common-bg-container);
   transition: border-color 0.3s, background-color 0.3s;
   vertical-align: middle;
 }

packages/layout/src/DesignSettings.vue

@@ -57,38 +57,36 @@ export default {
     flex-direction: column;
     .tiny-tabs__nav-scroll {
       margin-left: 12px;
-      .tiny-tabs__nav {
-        display: inline-flex;
-        justify-content: center;
-        float: none;
-      }
       .tiny-tabs__active-bar {
-        width: 40px !important;
-        height: 2px;
+        height: 3px;
         background-color: var(--ti-lowcode-setting-panel-tabs-item-title-active-color);
       }
-      .tiny-tabs__item__title {
-        margin-left: 6px;
-      }
-    }
-    .tiny-tabs__header {
-      padding-bottom: 12px;
     }
+
     .tiny-tabs__content {
       flex: 1;
       overflow-y: auto;
       padding: 0;
       margin: 0;
     }
     .tiny-tabs__item {
-      margin-right: 26px;
+      flex: 1;
+      background-color: var(--ti-lowcode-setting-panel-bg-color);
       color: var(--ti-lowcode-setting-panel-tabs-item-title-color);
       &:hover {
         color: var(--ti-lowcode-setting-panel-tabs-item-title-hover-color);
       }
       &.is-active {
         color: var(--ti-lowcode-setting-panel-tabs-item-title-active-color);
       }
+
+      .tiny-tabs__item__title {
+        padding-bottom: 2px;
+      }
+    }
+
+    .tiny-tabs__nav-wrap-not-separator::after {
+      z-index: 2;
     }
   }
 

packages/plugins/block/src/BlockEventList.vue

@@ -83,7 +83,7 @@ export default {
   }
   .icon-plus {
     margin-right: 6px;
-    stroke: var(--ti-lowcode-base-text-color-3);
+    stroke: var(--te-common-text-weaken);
   }
 }
 </style>

packages/plugins/block/src/BlockPropertyList.vue

@@ -104,7 +104,7 @@ export default {
   }
   .icon-plus {
     margin-right: 6px;
-    stroke: var(--ti-lowcode-base-text-color-3);
+    stroke: var(--te-common-text-weaken);
   }
 }
 </style>

packages/plugins/datasource/src/DataSourceRemoteDataResult.vue

@@ -105,7 +105,7 @@ export default {
     z-index: 9999;
     .tiny-button {
       border-radius: 4px;
-      border-color: var(--ti-lowcode-button-default-border-color);
+      border-color: var(--te-common-border-default);
     }
   }
 

packages/plugins/materials/src/meta/block/src/BlockGroup.vue

@@ -408,23 +408,6 @@ export default {
     width: calc(100% - 36px);
   }
 
-  .blocks-header-icon {
-    width: 28px;
-    height: 28px;
-    font-size: 16px;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
-    background: var(--ti-lowcode-canvas-wrap-bg);
-    border: 1px solid var(--ti-lowcode-toolbar-border-color);
-    border-radius: 2px;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    &:hover {
-      color: var(--ti-lowcode-toolbar-icon-color);
-      background: var(--ti-lowcode-button-hover-bg);
-    }
-  }
   .add-group-btn {
     font-size: 16px;
     width: 32px;

packages/settings/styles/src/components/background/BackgroundImageSetting.vue

@@ -169,13 +169,13 @@ export default {
     .row-content {
       flex: auto;
       display: flex;
-      border: 1px solid var(--ti-lowcode-tabs-border-color);
-
+      border: 1px solid var(--te-common-border-default);
+      color: var(--te-common-text-primary);
       .row-content-item {
         flex: 1;
         padding: 4px 0;
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
-        background: var(--ti-lowcode-canvas-wrap-bg);
+        color: var(--te-common-text-secondary);
+        background: var(--te-common-bg-container);
         position: relative;
         display: flex;
         justify-content: center;
@@ -194,13 +194,13 @@ export default {
         }
 
         &:hover {
-          color: var(--ti-lowcode-toolbar-icon-color);
-          background-color: var(--ti-lowcode-button-hover-bg);
+          color: var(--te-common-text-primary);
+          background-color: var(--te-common-bg-container);
         }
 
         &.selected {
-          color: var(--ti-lowcode-toolbar-icon-color);
-          background-color: var(--ti-lowcode-radio-button-active-bg);
+          color: var(--te-common-text-primary);
+          background-color: var(--te-common-bg-prompt);
         }
 
         .overflow-svg {

packages/settings/styles/src/components/background/LinearGradient.vue

@@ -79,16 +79,20 @@ const updateStyle = (property) => {
   emit('updateStyle', property)
 }
 
-const inputAngle = (val) => {
-  state.angle = Number(val)
-  rotateAngle()
+const angleChange = () => {
+  updateStyle({ [BACKGROUND_PROPERTY.BackgroundImage]: `linear-gradient(${state.angle}deg, black, white)` })
 }
 
 const rotateAngle = () => {
   rotateSvg.value.style.transform = `rotate(${state.angle % DAUBLE_PI_DEG}deg)`
   angleChange()
 }
 
+const inputAngle = (val) => {
+  state.angle = Number(val)
+  rotateAngle()
+}
+
 const counterclockwiseRotate = () => {
   state.angle = state.angle % DAUBLE_PI_DEG
   state.angle -= QUARTER_PI_DEG
@@ -126,10 +130,6 @@ const handleClickAngle = (e) => {
   rotateAngle()
 }
 
-const angleChange = () => {
-  updateStyle({ [BACKGROUND_PROPERTY.BackgroundImage]: `linear-gradient(${state.angle}deg, black, white)` })
-}
-
 const updateGradient = ({ repeat }) => {
   updateStyle({ [BACKGROUND_PROPERTY.BackgroundRepeat]: repeat ?? '' })
 }
@@ -142,7 +142,7 @@ onMounted(() => {
   state.angle = angleMatch ? Number(angleMatch[1]) : ONE_PI_DEG
   rotateAngle()
 
-  const rColor = /\#(?:[a-f0-9]{6}|[a-f0-9]{3})/ // #fff | #fff
+  const rColor = /#(?:[a-f0-9]{6}|[a-f0-9]{3})/ // #fff | #fff
   const rLengthPercentage = /(?:[+-]?\d*\.?\d+)(?:%|[a-z]+)?/ // .5 5px 50%
   const rLinearColorStop = new RegExp(`${rColor.source}(?:\\s+${rLengthPercentage.source})?`)
   const rComma = /\s*,\s*/

packages/settings/styles/src/components/spacing/SpacingGroup.vue

@@ -583,10 +583,6 @@ export default {
     .reference-wrapper {
       & > div {
         padding: 2px;
-
-        &.active {
-          background: var(--ti-lowcode-button-hover-bg);
-        }
       }
     }
   }

packages/settings/styles/src/components/typography/TypographyMore.vue

@@ -199,7 +199,6 @@ export default {
 
           &:hover {
             color: var(--ti-lowcode-toolbar-icon-color);
-            background-color: var(--ti-lowcode-button-hover-bg);
           }
 
           &:not(:last-child)::after {

packages/theme/base/src/common.less

@@ -27,7 +27,7 @@
   --te-common-border-disabled: var(--te-base-dark-5); // 线条-禁用色  #dbdbdb
   --te-common-border-secondary: var(--te-base-gray-31); // 线条-次要按钮描边色  #595959
   --te-common-border-prompt: var(--te-base-gray-13); // 线条-三级按钮默认色/表单内按钮 #dbdbdb
-  --te-common-border-hover: var(--te-base-gray-18); // 线条-按钮边框悬浮色 #c2c2c2
+  --te-common-border-hover: var(--te-base-gray-18); // 线条-按钮边框悬浮色/复选框/单选框，欧仁边框色 #c2c2c2
   --te-common-border-divider: var(--te-base-gray-11); //线条-白色背景分割线颜色 #ebebeb
   --te-common-border-bg-divider: var(--te-base-gray-13); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #dbdbdb
   --te-common-border-checked: var(--te-base-blue-6); // 线条 选中色 #1476ff
@@ -45,7 +45,7 @@
   --te-common-bg-tag: var(--te-base-green-14); // tag标签-背景色 #e6f2d5
   --te-common-bg-default: var(--te-base-gray-1); // 白色背景-输入框背景/面板背景色 #fff
   --te-common-bg-component: var(--te-base-gray-1); // 白色背景-输入框等组件默认背景/面板背景色 #fff
-  --te-common-bg-disabled: var(--te-base-gray-6); // 禁用/标签 背景色 #f0f0f0
+  --te-common-bg-disabled: var(--te-base-gray-6); // 禁用/标签/下拉框多选标签 背景色 #f0f0f0
 }
 
 :root[data-theme='dark'] {
@@ -92,5 +92,5 @@
   --te-common-bg-tag: var(--te-base-dark-28); // tag标签-背景色 #1d312a
   --te-common-bg-default: var(--te-base-dark-27); // 深色背景-输入框背景/面板背景色 #212329
   --te-common-bg-component: var(--te-base-gray-1); // 深色背景-输入框等组件默认背景/面板背景色 #212329
-  --te-common-bg-disabled: var(--te-base-dark-29); // tag标签-背景色 #2a2c31
+  --te-common-bg-disabled: var(--te-base-dark-29); // 禁用/标签/下拉框多选标签 背景色 #2a2c31
 }

packages/theme/base/src/component-common.less

@@ -1,5 +1,3 @@
-@import './var-component.less';
-
 // 1、select 下拉框组件
 .tiny-select {
   .tiny-input {
@@ -184,6 +182,7 @@
   .tiny-tabs__header {
     .tiny-tabs__item__title {
       padding: 0 12px;
+      line-height: 2;
     }
     .tiny-tabs__nav {
       display: flex;
@@ -194,11 +193,9 @@
     .tiny-tabs__item {
       flex-grow: 1;
       font-size: var(--te-base-font-size-base);
-      height: 24px;
-      line-height: 24px;
       color: var(--te-common-text-secondary);
       background-color: var(--te-common-bg-container);
-      // min-width: 120px;
+      height: auto;
       text-align: center;
       &.is-active {
         color: var(--te-common-text-primary);
@@ -464,7 +461,7 @@
 .tiny-radio {
   margin-right: 20px;
   .tiny-radio__inner {
-    border: 1px solid var(--te-common-border-hover); // 单选待确认
+    border: 1px solid var(--te-common-border-hover);
   }
   .tiny-radio__label {
     font-size: var(--te-base-font-size-base);
@@ -485,7 +482,7 @@
     }
     .tiny-radio-button__orig-radio:checked {
       & + .tiny-radio-button__inner {
-        background-color: var(--te-common-bg-primary-checked); // 待确认,原来： --te-common-bg-primary
+        background-color: var(--te-common-bg-primary-checked);
         border-color: var(--te-common-border-secondary);
         &:hover {
           box-shadow: none;
@@ -509,7 +506,7 @@
     }
     .tiny-checkbox__inner {
       border-radius: var(--te-base-border-radius-1);
-      border: 1px solid var(--te-common-border-hover); // 待确认
+      border: 1px solid var(--te-common-border-hover);
       line-height: 24px;
     }
   }
@@ -590,7 +587,7 @@
       &[x-placement^='top'] {
         .popper__arrow {
           &.popper__arrow::after {
-            border-top-color: var(--te-common-text-inverse); // 等待确认
+            border-top-color: var(--te-common-text-inverse);
           }
         }
       }
@@ -726,19 +723,17 @@
 
 // 21、progress进度条
 .tiny-progress.tiny-progress--line.progress-first {
-  .component-css-vars-progress();
   &.tiny-progress-bar__outer {
-    background-color: var(--te-common-border-divider); // 待确认
+    background-color: var(--te-common-border-divider);
   }
   .tiny-progress__text {
     margin-left: 12px;
-    color: var(--te-common-text-primary); // 待确认
+    color: var(--te-common-text-primary);
   }
 }
 
 // 22、开关
 .tiny-switch {
-  .component-css-vars-switch();
   background-color: var(--te-common-bg-disabled); // 待确认是用背景色 还是线条色
   &.tiny-switch-checked {
     background-color: var(--te-common-bg-primary-checked);

packages/theme/base/src/page/base-config-page.less

@@ -121,7 +121,7 @@ td {
 }
 
 .global-desc-info {
-  color: var(--ti-lowcode-common-text-desc-color);
+  color: #808080;
 }
 
 .text-ellipsis-multiple {