Merge branch 'next' of https://gitee.com/layui/layui-vue into next

2022-04-26 01:50:37 +08:00 · 2022-04-26 01:50:37 +08:00 · 622ba49cf4
commit 622ba49cf4
parent d51b0cd8cb d2bf609624
62 changed files with 285 additions and 502 deletions
--- a/.cz-config.js
+++ b/.cz-config.js
@ -1,15 +1,15 @@
 "use strict";
 module.exports = {
  types: [
-    { value: "✨特性", name: "特性:    一个新的特性" },
-    { value: "🐛修复", name: "修复:    修复一个Bug" },
-    { value: "📝文档", name: "文档:    变更的只有文档" },
-    { value: "💄格式", name: "格式:    空格, 分号等格式修复" },
-    { value: "♻️重构", name: "重构:    代码重构，注意和特性、修复区分开" },
-    { value: "⚡️性能", name: "性能:    提升性能" },
-    { value: "✅测试", name: "测试:    添加一个测试" },
-    { value: "🔧工具", name: "工具:    开发工具变动(构建、脚手架工具等)" },
-    { value: "⏪回滚", name: "回滚:    代码回退" },
+    { value: "✨", name: "特性:    一个新的特性" },
+    { value: "🐛", name: "修复:    修复一个Bug" },
+    { value: "📝", name: "文档:    变更的只有文档" },
+    { value: "💄", name: "格式:    空格, 分号等格式修复" },
+    { value: "♻️", name: "重构:    代码重构，注意和特性、修复区分开" },
+    { value: "⚡️", name: "性能:    提升性能" },
+    { value: "✅", name: "测试:    添加一个测试" },
+    { value: "🔧", name: "工具:    开发工具变动(构建、脚手架工具等)" },
+    { value: "⏪", name: "回滚:    代码回退" },
  ],
  scopes: [
    { name: "component" },
--- a/package/component/package.json
+++ b/package/component/package.json
@ -1,6 +1,6 @@
 {
  "name": "@layui/layui-vue",
-  "version": "1.0.5-dev.5",
+  "version": "1.0.5-dev.8",
  "author": "就眠儀式",
  "license": "MIT",
  "description": "a component library for Vue 3 base on layui-vue",
--- a/package/component/script/build.es.ts
+++ b/package/component/script/build.es.ts
@ -89,7 +89,6 @@ export default (): UserConfigExport => {
            }
          },
          chunkFileNames: ({ name }) => {
-            console.log(name);
            return name === "index" ? "index.js" : "[name]/index.js";
          },
          entryFileNames: ({ name }) => {
--- a/package/component/src/component/avatar/index.less
+++ b/package/component/src/component/avatar/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-avatar {
  box-sizing: border-box;
  margin: 0;
@ -22,7 +19,7 @@
  width: 32px;
  height: 32px;
  line-height: 32px;
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
 }

 .layui-avatar.layui-avatar-radius {
--- a/package/component/src/component/avatarList/index.less
+++ b/package/component/src/component/avatarList/index.less
@ -1,2 +0,0 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
--- a/package/component/src/component/backTop/index.less
+++ b/package/component/src/component/backTop/index.less
@ -1,7 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
-/** backtop **/
@width: 50px;
@height: @width;

@ -18,7 +14,7 @@
  font-size: 40px;
  background-color: #9f9f9f;
  color: #ffffff;
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
  opacity: 0.95;
  z-index: 999999;
  :hover {
--- a/package/component/src/component/badge/index.less
+++ b/package/component/src/component/badge/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-badge,
 .layui-badge-dot,
 .layui-badge-rim {
@ -11,7 +8,7 @@
  text-align: center;
  background-color: #ff5722;
  color: #fff;
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
 }

 .layui-badge {
@ -32,7 +29,7 @@
  border-width: 1px;
  border-style: solid;
  background-color: #fff;
-  border-color: @global-neutral-color-3;
+  border-color: var(--global-neutral-color-3);
  color: #666;
 }

--- a/package/component/src/component/body/index.less
+++ b/package/component/src/component/body/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-body {
  display: block;
  flex: 1;
--- a/package/component/src/component/breadcrumb/index.less
+++ b/package/component/src/component/breadcrumb/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-breadcrumb {
  font-size: 0;
 }
@ -14,7 +11,7 @@
 }

 .layui-breadcrumb a:hover {
-  color: @global-checked-color !important;
+  color: var(--global-checked-color) !important;
 }

 .layui-breadcrumb a:nth-last-child(2) {
@ -28,5 +25,5 @@

 .layui-breadcrumb span[lay-separator] {
  margin: 0 10px;
-  color: @global-neutral-color-7;
+  color: var(--global-neutral-color-7);
 }
--- a/package/component/src/component/button/index.less
+++ b/package/component/src/component/button/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 :root {
  --button-primary-text-color: #fff;
  --button-primary-background-color: var(--global-primary-color);
--- a/package/component/src/component/buttonContainer/index.less
+++ b/package/component/src/component/buttonContainer/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-btn-container {
  font-size: 0;
 }
--- a/package/component/src/component/buttonGroup/index.less
+++ b/package/component/src/component/buttonGroup/index.less
@ -1,8 +1,7 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
-@button-primary-color: @global-primary-color;
-@button-border-radius: @global-border-radius;
+:root {
+  --button-primary-color: var(--global-primary-color);
+  --button-border-radius: var(--global-border-radius);
+}

 .layui-btn-group {
  vertical-align: middle;
@ -20,11 +19,11 @@
 }

 .layui-btn-group .layui-btn:first-child {
-  border-radius: @button-border-radius 0 0 @button-border-radius;
+  border-radius: var(--button-border-radius) 0 0 var(--button-border-radius);
 }

 .layui-btn-group .layui-btn:last-child {
-  border-radius: 0 @button-border-radius @button-border-radius 0;
+  border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
 }

 .layui-btn-group .layui-btn + .layui-btn {
--- a/package/component/src/component/card/index.less
+++ b/package/component/src/component/card/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 :root {
  --card-border-radius: var(--global-border-radius);
 }
--- a/package/component/src/component/carousel/index.less
+++ b/package/component/src/component/carousel/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-carousel {
  position: relative;
  left: 0;
@ -24,7 +21,7 @@
  line-height: 20px;
  margin: -10px 0 0 -50px;
  text-align: center;
-  color: @global-neutral-color-8;
+  color: var(--global-neutral-color-8);
  font-family: layui-icon !important;
  font-size: 30px;
  font-style: normal;
@ -139,7 +136,7 @@
  height: 10px;
  margin: 0 3px;
  font-size: 14px;
-  background-color: @global-neutral-color-3;
+  background-color: var(--global-neutral-color-3);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
--- a/package/component/src/component/checkbox/index.less
+++ b/package/component/src/component/checkbox/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-form-checkbox {
  position: relative;
  height: 30px;
@ -19,13 +16,13 @@
  height: 100%;
  font-size: 14px;
  border-radius: 2px 0 0 2px;
-  background-color: @global-neutral-color-6;
+  background-color: var(--global-neutral-color-6);
  color: #fff;
  overflow: hidden;
 }

 .layui-form-checkbox:hover span {
-  background-color: @global-neutral-color-8;
+  background-color: var(--global-neutral-color-8);
 }

 .layui-form-checkbox i {
@ -34,7 +31,7 @@
  width: 29px;
  height: 28px;
  position: absolute;
-  border: 1px solid @global-neutral-color-6;
+  border: 1px solid var(--global-neutral-color-6);
  border-radius: 0 2px 2px 0;
  color: #fff;
  font-size: 20px;
@ -42,8 +39,8 @@
 }

 .layui-form-checkbox:hover i {
-  border-color: @global-neutral-color-8;
-  color: @global-neutral-color-8;
+  border-color: var(--global-neutral-color-8);
+  color: var(--global-neutral-color-8);
 }

 .layui-form-checkbox[lay-skin="primary"] {
@ -72,7 +69,7 @@
  width: 16px;
  height: 16px;
  line-height: 16px;
-  border: 1px solid @global-neutral-color-6;
+  border: 1px solid var(--global-neutral-color-6);
  font-size: 12px;
  border-radius: 2px;
  background-color: #fff;
@ -81,28 +78,28 @@
 }

 .layui-form-checkbox[lay-skin="primary"]:hover i {
-  border-color: @global-checked-color;
+  border-color: var(--global-checked-color);
  color: #fff;
 }

 .layui-form-checked,
 .layui-form-checked:hover {
-  border-color: @global-checked-color;
+  border-color: var(--global-checked-color);
 }

 .layui-form-checked i,
 .layui-form-checked:hover i {
-  color: @global-checked-color;
+  color: var(--global-checked-color);
 }

 .layui-form-checked span,
 .layui-form-checked:hover span {
-  background-color: @global-checked-color;
+  background-color: var(--global-checked-color);
 }

 .layui-form-checked[lay-skin="primary"] i {
-  border-color: @global-checked-color !important;
-  background-color: @global-checked-color;
+  border-color: var(--global-checked-color) !important;
+  background-color: var(--global-checked-color);
  color: #fff;
 }

@ -112,24 +109,24 @@

 .layui-checkbox-disabled[lay-skin="primary"] span {
  background: 0 0 !important;
-  color: @global-neutral-color-8 !important;
+  color: var(--global-neutral-color-8) !important;
 }

 .layui-checkbox-disabled[lay-skin="primary"]:hover i {
-  border-color: @global-neutral-color-6;
+  border-color: var(--global-neutral-color-6);
 }

 .layui-checkbox-disabled,
 .layui-checkbox-disabled i {
-  border-color: @global-neutral-color-3 !important;
+  border-color: var(--global-neutral-color-3) !important;
 }

 .layui-checkbox-disabled span {
-  background-color: @global-neutral-color-3 !important;
+  background-color: var(--global-neutral-color-3) !important;
 }

 .layui-checkbox-disabled em {
-  color: @global-neutral-color-6 !important;
+  color: var(--global-neutral-color-6) !important;
 }

 .layui-checkbox-disabled:hover i {
--- a/package/component/src/component/collapse/index.less
+++ b/package/component/src/component/collapse/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-collapse {
  border-width: 1px;
  border-style: solid;
@ -23,7 +20,7 @@
  line-height: 42px;
  padding: 0 15px 0 35px;
  color: #333;
-  background-color: @global-neutral-color-1;
+  background-color: var(--global-neutral-color-1);
  cursor: pointer;
  font-size: 14px;
  overflow: hidden;
--- a/package/component/src/component/colorPicker/index.less
+++ b/package/component/src/component/colorPicker/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-color-picker {
  position: relative;
  user-select: none;
@ -109,7 +106,7 @@
  width: 26px;
  height: 26px;
  display: block;
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==");
  background-size: 10px 10px;
 }
@ -180,9 +177,9 @@
 }

 .layui-colorpicker {
-  border: 1px solid @global-neutral-color-3;
+  border: 1px solid var(--global-neutral-color-3);
  padding: 5px;
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
  line-height: 24px;
  display: inline-block;
  cursor: pointer;
@ -191,7 +188,7 @@
 }

 .layui-colorpicker:hover {
-  border-color: @global-neutral-color-6;
+  border-color: var(--global-neutral-color-6);
 }

 .layui-colorpicker.layui-colorpicker-lg {
@ -223,7 +220,7 @@
  height: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
  text-align: center;
 }

@ -246,7 +243,7 @@
  margin: 5px 0;
  padding: 7px;
  background: #fff;
-  border: 1px solid @global-neutral-color-6;
+  border: 1px solid var(--global-neutral-color-6);
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
 }
--- a/package/component/src/component/container/index.less
+++ b/package/component/src/component/container/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-container {
  position: relative;
  margin: 0 auto;
--- a/package/component/src/component/datePicker/index.less
+++ b/package/component/src/component/datePicker/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
@font-face {
  font-family: "laydate-icon";
  src: url("./font/iconfont.eot");
--- a/package/component/src/component/dropdown/index.less
+++ b/package/component/src/component/dropdown/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-dropdown {
  position: relative;
  display: inline-block;
@ -22,7 +19,7 @@
 }

 .layui-dropdown dl > .layui-dropdown-menu {
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
 }

 .layui-dropdown-up > dl {
--- a/package/component/src/component/empty/index.less
+++ b/package/component/src/component/empty/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-empty {
  margin: 0 8px;
  font-size: 14px;
--- a/package/component/src/component/exception/index.less
+++ b/package/component/src/component/exception/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-exception {
  .layui-exception-image {
    width: 50%;
--- a/package/component/src/component/field/index.less
+++ b/package/component/src/component/field/index.less
@ -1,19 +1,13 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
-@field-border-color: var(--field-border-color);
-@field-border-radius: var(--field-border-radius);
-
 :root {
-  --field-border-color: @global-neutral-color-3;
-  --field-border-radius: @global-border-radius;
+  --field-border-color: var(--global-neutral-color-3);
+  --field-border-radius: var(--global-border-radius);
 }

 .layui-field {
  margin-bottom: 10px;
  padding: 0;
  border-width: 1px;
-  border-color: @field-border-color;
+  border-color: var(--field-border-color);
  border-style: solid;
 }

--- a/package/component/src/component/footer/index.less
+++ b/package/component/src/component/footer/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-footer {
  box-sizing: border-box;
 }
--- a/package/component/src/component/form/index.less
+++ b/package/component/src/component/form/index.less
@ -1,21 +1,18 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-form-item {
  margin-bottom: 20px;
  clear: both;
  *zoom: 1;
-  }
+}

-  .layui-form-item:after {
+.layui-form-item:after {
  content: "\20";
  clear: both;
  *zoom: 1;
  display: block;
  height: 0;
-  }
+}

-  .layui-form-label {
+.layui-form-label {
  float: left;
  display: block;
  padding: 9px 15px;
@ -23,69 +20,69 @@
  font-weight: 400;
  line-height: 20px;
  text-align: right;
-  }
+}

-  .layui-form-label-col {
+.layui-form-label-col {
  display: block;
  float: none;
  padding: 9px 0;
  line-height: 20px;
  text-align: left;
-  }
+}

-  .layui-form-item .layui-inline {
+.layui-form-item .layui-inline {
  margin-bottom: 5px;
  margin-right: 10px;
-  }
+}

-  .layui-input-block {
+.layui-input-block {
  margin-left: 110px;
  min-height: 36px;
-  }
+}

-  .layui-input-inline {
+.layui-input-inline {
  display: inline-block;
  vertical-align: middle;
-  }
+}

-  .layui-form-item .layui-input-inline {
+.layui-form-item .layui-input-inline {
  float: left;
  width: 190px;
  margin-right: 10px;
-  }
+}

-  .layui-form-text .layui-input-inline {
+.layui-form-text .layui-input-inline {
  width: auto;
-  }
+}

-  .layui-form-mid {
+.layui-form-mid {
  float: left;
  display: block;
  padding: 9px 0 !important;
  line-height: 20px;
  margin-right: 10px;
-  }
+}

-  .layui-form-danger + .layui-form-select .layui-input,
-  .layui-form-danger:focus {
+.layui-form-danger + .layui-form-select .layui-input,
+.layui-form-danger:focus {
  border-color: #ff5722 !important;
-  }
+}

-  .layui-form-item .layui-form-checkbox {
+.layui-form-item .layui-form-checkbox {
  margin-top: 4px;
-  }
+}

-  .layui-form-item .layui-form-checkbox[lay-skin="primary"] {
+.layui-form-item .layui-form-checkbox[lay-skin="primary"] {
  margin-top: 10px;
-  }
+}

-  .layui-required {
+.layui-required {
  color: #ff5722;
  font-size: 12px;
  line-height: 1;
-  }
+}

-  .layui-form .layui-form-item {
+.layui-form .layui-form-item {
  .layui-input-block,
  .layui-input-inline {
    .layui-form-danger {
@ -95,9 +92,9 @@
      }
    }
  }
-  }
+}

-  .layui-error-message {
+.layui-error-message {
  color: #ff5722;
  font-size: 12px;
  line-height: 1;
@ -105,17 +102,17 @@
  position: absolute;
  top: 100%;
  left: 0;
-  }
+}

-  .layui-error-message-anim {
+.layui-error-message-anim {
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-animation: layui-top-show-anim 0.3s ease 1;
  animation: layui-top-show-anim 0.3s ease 1;
-  }
+}

-  @keyframes layui-top-show-anim {
+@keyframes layui-top-show-anim {
  0% {
    opacity: 0.3;
    transform: rotateX(45deg);
@ -125,5 +122,4 @@
    opacity: 1;
    transform: rotateX(0);
  }
-  }
-  
+}
--- a/package/component/src/component/fullscreen/index.less
+++ b/package/component/src/component/fullscreen/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-fullscreen {
  position: fixed;
  top: 0;
--- a/package/component/src/component/header/index.less
+++ b/package/component/src/component/header/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-header {
  box-sizing: border-box;
  height: 60px;
--- a/package/component/src/component/icon/index.less
+++ b/package/component/src/component/icon/index.less
@ -1,2 +0,0 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
--- a/package/component/src/component/iconPicker/index.less
+++ b/package/component/src/component/iconPicker/index.less
@ -1,12 +1,6 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
-@icon-picker-border-radius: var(--icon-picker-border-radius);
-@icon-picker-checked-color: var(--icon-picker-checked-color);
-
 :root {
-    --icon-picker-border-radius: @global-border-radius;
-    --icon-picker-checked-color: @global-checked-color;
+    --icon-picker-border-radius: var(--global-border-radius);
+    --icon-picker-checked-color: var(--global-checked-color);
 }

 .layui-iconpicker {
@ -15,7 +9,7 @@
  line-height: 38px;
  border-width: 1px;
  border-style: solid;
-  border-radius: @icon-picker-border-radius;
+  border-radius: var(--icon-picker-border-radius);
  cursor: pointer;
 }

@ -95,13 +89,13 @@
 }

 .layui-iconpicker-list li:hover {
-  background-color: @global-neutral-color-1;
+  background-color: var(--global-neutral-color-1);
  color: rgba(0, 0, 0, 0.5);
 }

 .layui-iconpicker-list li.layui-this {
-  border-color: @icon-picker-checked-color;
-  color: @icon-picker-checked-color;
+  border-color: var(--icon-picker-checked-color);
+  color: var(--icon-picker-checked-color);
 }

 .layui-iconpicker-list li .layui-icon {
--- a/package/component/src/component/input/index.less
+++ b/package/component/src/component/input/index.less
@ -1,12 +1,6 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
-@input-border-radius: var(--input-border-radius);
-@input-border-color: var(--input-border-color);
-
 :root {
-  --input-border-radius: @global-border-radius;
-  --input-border-color: @global-neutral-color-3;
+  --input-border-radius: var(--global-border-radius);
+  --input-border-color: var(--global-neutral-color-3);
 }

 .layui-input {
@ -27,8 +21,8 @@
  border-width: 1px;
  border-style: solid;
  display: inline-flex;
-  border-color: @input-border-color;
-  border-radius:  @input-border-radius;
+  border-color: var(--input-border-color);
+  border-radius:  var(--input-border-radius);
 }

 .layui-input-prefix {
--- a/package/component/src/component/inputNumber/index.less
+++ b/package/component/src/component/inputNumber/index.less
@ -1,8 +1,5 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
@border-color: #eee;
-@hover-border-color: @global-primary-color;
+@hover-border-color: var(--global-primary-color);
@lg: 40px;
@lg-wdith: 200px;
@lg-right: 20px;
@ -51,7 +48,7 @@
  box-sizing: border-box;
  border: 1px solid @border-color;
  border-color: @border-color;
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
  overflow: hidden;
  .set-size(@lg-wdith, @lg, @lg-right);
  margin-left: 5px;
--- a/package/component/src/component/layout/index.less
+++ b/package/component/src/component/layout/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-layout {
  flex: 1;
  display: flex;
--- a/package/component/src/component/line/index.less
+++ b/package/component/src/component/line/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-line {
  &-horizontal {
    position: relative;
@ -9,7 +6,7 @@
    min-width: 100%;
    max-width: 100%;
    margin: 10px 0;
-    border-bottom: var(--layui-line-border-width) var(--layui-line-border-style) @global-neutral-color-5;
+    border-bottom: var(--layui-line-border-width) var(--layui-line-border-style) var(--global-neutral-color-5);
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
@ -26,7 +23,7 @@
    height: 1em;
    margin: 0 8px;
    vertical-align: middle;
-    border-left: var(--layui-line-border-width) var(--layui-line-border-style) @global-neutral-color-5;
+    border-left: var(--layui-line-border-width) var(--layui-line-border-style) var(--global-neutral-color-5);
    border-top-style: none;
    border-bottom-style: none;
    border-right-style: none;
--- a/package/component/src/component/logo/index.less
+++ b/package/component/src/component/logo/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-logo {
  left: 0;
  top: 0;
@ -8,6 +5,6 @@
  height: 60px;
  line-height: 60px;
  text-align: center;
-  color: @global-primary-color;
+  color: var(--global-primary-color);
  font-size: 16px;
 }
--- a/package/component/src/component/menu/index.less
+++ b/package/component/src/component/menu/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-nav .layui-show.layui-anim-upbit .layui-show.layui-anim-upbit {
  top: 0px;
  left: calc(100% + 5px);
@ -62,7 +59,7 @@
  top: 0;
  width: 0;
  height: 3px;
-  background-color: @global-checked-color;
+  background-color: var(--global-checked-color);
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  pointer-events: none;
@ -211,13 +208,13 @@
 .layui-nav-tree .layui-nav-bar {
  width: 5px;
  height: 0;
-  background-color: @global-primary-color;
+  background-color: var(--global-primary-color);
 }

 .layui-nav-tree .layui-this,
 .layui-nav-tree .layui-nav-child dd.layui-this,
 .layui-nav-tree .layui-this > a:hover {
-  background-color: @global-primary-color;
+  background-color: var(--global-primary-color);
  color: #fff;
 }

@ -293,14 +290,14 @@

 .layui-nav-tree.inverted .layui-this,
 .layui-nav-tree.inverted .layui-this:hover {
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
  margin: 0px 6px;
  width: auto;
 }

 .layui-nav-tree.inverted .layui-this > a,
 .layui-nav-tree.inverted .layui-this:hover > a {
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
 }

 .layui-nav-tree.inverted .layui-this > a {
--- a/package/component/src/component/page/index.less
+++ b/package/component/src/component/page/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-laypage {
  display: inline-block;
  *display: inline;
@ -33,7 +30,7 @@
 .layui-laypage input,
 .layui-laypage select,
 .layui-laypage span {
-  border: 1px solid @global-neutral-color-3;
+  border: 1px solid var(--global-neutral-color-3);
 }

 .layui-laypage a,
@ -52,7 +49,7 @@
 }

 .layui-laypage a:hover {
-  color: @global-primary-color;
+  color: var(--global-primary-color);
 }

 .layui-laypage em {
@ -84,7 +81,7 @@
  padding: 1px;
  width: 100%;
  height: 100%;
-  background-color: @global-primary-color;
+  background-color: var(--global-primary-color);
 }

 .layui-laypage-em {
@ -154,7 +151,7 @@

 .layui-laypage input:focus,
 .layui-laypage select:focus {
-  border-color: @global-primary-color !important;
+  border-color: var(--global-primary-color) !important;
 }

 .layui-laypage button {
--- a/package/component/src/component/panel/index.less
+++ b/package/component/src/component/panel/index.less
@ -1,19 +1,13 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
-@panel-border-color: var(--panel-border-color);
-@panel-border-radius: var(--panel-border-radius);
-
 :root {
-  --panel-border-color: @global-neutral-color-3;
-  --panel-border-radius: @global-border-radius;
+  --panel-border-color: var(--global-neutral-color-3);
+  --panel-border-radius: var(--global-border-radius);
 }

 .layui-panel {
  border-width: 1px;
  border-style: solid;
-  border-radius: @panel-border-radius;
-  border-color: @panel-border-color;
+  border-radius: var(--panel-border-radius);
+  border-color: var(--panel-border-color);
  background-color: #fff;
 }

--- a/package/component/src/component/popper/index.less
+++ b/package/component/src/component/popper/index.less
@ -1,5 +1,3 @@
-@import (reference) "../../theme/variable.less";
-
 // 主题颜色
 // 浅色 --> 默认使用
@ligh-background: #FFF;
--- a/package/component/src/component/progress/index.less
+++ b/package/component/src/component/progress/index.less
@ -1,11 +1,8 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-progress {
  position: relative;
  height: 6px;
  border-radius: 20px;
-  background-color: @global-neutral-color-3;
+  background-color: var(--global-neutral-color-3);
 }

 .layui-progress-bar {
@ -17,7 +14,7 @@
  height: 6px;
  border-radius: 20px;
  text-align: right;
-  background-color: @global-checked-color;
+  background-color: var(--global-checked-color);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
 }
--- a/package/component/src/component/quote/index.less
+++ b/package/component/src/component/quote/index.less
@ -1,21 +1,15 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
-@block-default-color: var(--block-default-color);
-@block-border-radius: var(--block-border-radius);
-
 :root {
-  --block-default-color: @global-checked-color;
-  --block-border-radius: @global-border-radius;
+  --block-default-color: var(--global-checked-color);
+  --block-border-radius: var(--global-border-radius);
 }

 .layui-quote {
  padding: 15px;
  line-height: 1.6;
  margin-bottom: 10px;
-  border-left: 5px solid @block-default-color;
-  border-radius: @block-border-radius;
-  background-color: @global-neutral-color-1;
+  border-left: 5px solid var(--block-default-color);
+  border-radius: var(--block-border-radius);
+  background-color: var(--global-neutral-color-1);
 }

 .layui-quote-nm {
--- a/package/component/src/component/radio/index.less
+++ b/package/component/src/component/radio/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-form-radio,
 .layui-form-radio * {
  display: inline-block;
@ -22,19 +19,19 @@
 .layui-form-radio > i {
  margin-right: 8px;
  font-size: 22px;
-  color: @global-neutral-color-8;
+  color: var(--global-neutral-color-8);
 }

 .layui-form-radio:hover *,
 .layui-form-radioed,
 .layui-form-radioed > i {
-  color: @global-checked-color;
+  color: var(--global-checked-color);
 }

 .layui-radio-disabled > i {
-  color: @global-neutral-color-3 !important;
+  color: var(--global-neutral-color-3) !important;
 }

 .layui-radio-disabled * {
-  color: @global-neutral-color-8 !important;
+  color: var(--global-neutral-color-8) !important;
 }
--- a/package/component/src/component/rate/index.less
+++ b/package/component/src/component/rate/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-rate,
 .layui-rate * {
  display: inline-block;
--- a/package/component/src/component/result/index.less
+++ b/package/component/src/component/result/index.less
@ -1,28 +1,30 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .result {
  text-align: center;
 }
+
 .result .success svg {
  color: #32c682;
  text-align: center;
  margin-top: 40px;
 }
+
 .result .failure svg {
  color: #f56c6c;
  text-align: center;
  margin-top: 40px;
 }
+
 .result .title {
  margin-top: 25px;
 }
+
 .result .desc {
  margin-top: 25px;
  width: 60%;
  margin-left: 20%;
  color: rgba(0, 0, 0, 0.45);
 }
+
 .result .content {
  margin-top: 20px;
  width: 80%;
@ -30,6 +32,7 @@
  background-color: white;
  margin-left: 10%;
 }
+
 .result .extra {
  padding-top: 10px;
  border-top: 1px whitesmoke solid;
--- a/package/component/src/component/ripple/index.less
+++ b/package/component/src/component/ripple/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-water-ripples-container {
  position: relative;
  display: inline-block;
--- a/package/component/src/component/row/index.less
+++ b/package/component/src/component/row/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-row:after,
 .layui-row:before {
  content: "";
--- a/package/component/src/component/scroll/index.less
+++ b/package/component/src/component/scroll/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .scrollbar-box {
  height: 100%;
  overflow: hidden !important;
--- a/package/component/src/component/select/index.less
+++ b/package/component/src/component/select/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 dl.layui-anim-upbit > dd input[type="checkbox"] {
  display: none;
 }
@ -80,7 +77,7 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
  margin-top: -3px;
  cursor: pointer;
  border-width: 6px;
-  border-top-color: @global-neutral-color-8;
+  border-top-color: var(--global-neutral-color-8);
  border-top-style: solid;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
@ -94,11 +91,11 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
  padding: 5px 0;
  z-index: 899;
  min-width: 100%;
-  border: 1px solid @global-neutral-color-3;
+  border: 1px solid var(--global-neutral-color-3);
  max-height: 300px;
  overflow-y: auto;
  background-color: #fff;
-  border-radius: @global-border-radius;
+  border-radius: var(--global-border-radius);
  box-sizing: border-box;
  box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
 }
@ -122,7 +119,7 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
 }

 .layui-form-select dl dd:hover {
-  background-color: @global-neutral-color-2;
+  background-color: var(--global-neutral-color-2);
  -webkit-transition: 0.5s all;
  transition: 0.5s all;
 }
@ -137,8 +134,8 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
 }

 .layui-form-select dl dd.layui-this {
-  background-color: @global-neutral-color-2;
-  color: @global-checked-color;
+  background-color: var(--global-neutral-color-2);
+  color: var(--global-checked-color);
  font-weight: 700;
 }

--- a/package/component/src/component/side/index.less
+++ b/package/component/src/component/side/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-side {
  overflow: auto;
  overflow-x: hidden;
--- a/package/component/src/component/skeleton/index.less
+++ b/package/component/src/component/skeleton/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .lay-skeleton {
  .lay-skeleton-item {
    height: 16px;
--- a/package/component/src/component/slider/index.less
+++ b/package/component/src/component/slider/index.less
@ -1,7 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
-// 横向样式
 .layui-slider-v {
  width: 100%;
  height: 18px;
@ -19,9 +15,9 @@
 .layui-slider-btn-v {
  width: 12px;
  height: 12px;
-  background-color: @global-back-color;
+  background-color: var(--global-back-color);
  position: absolute;
-  border: 2px solid @global-primary-color;
+  border: 2px solid var(--global-primary-color);
  border-radius: 50%;
  cursor: pointer;
  left: 0%;
@ -34,7 +30,7 @@
  position: absolute;
  top: 6px;
  left: 0;
-  background-color: @global-primary-color;
+  background-color: var(--global-primary-color);
  z-index: 1;
 }

@ -57,7 +53,7 @@
 }

 .layui-slider-disabled-rate {
-  background-color: @global-primary-color !important;
+  background-color: var(--global-primary-color) !important;
 }

 // 纵向样式
@ -75,9 +71,9 @@
 .layui-slider-vertical-btn {
  width: 12px;
  height: 12px;
-  background-color: @global-back-color;
+  background-color: var(--global-back-color);
  position: absolute;
-  border: 2px solid @global-primary-color;
+  border: 2px solid var(--global-primary-color);
  border-radius: 50%;
  cursor: pointer;
  bottom: 0%;
@ -91,7 +87,7 @@
  position: absolute;
  bottom: 0;
  left: 7px;
-  background-color: @global-primary-color;
+  background-color: var(--global-primary-color);
  z-index: 1;
 }

--- a/package/component/src/component/splitPanel/index.less
+++ b/package/component/src/component/splitPanel/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .lay-split-panel {
  height: 100%;
  display: flex;
@ -19,7 +16,7 @@
    height: 100%;
    width: 3px;
    border: 1px #eeeeee solid;
-    background-color: @global-neutral-color-1;
+    background-color: var(--global-neutral-color-1);
    border-left: none;
    border-right: none;
    cursor: col-resize;
@ -51,7 +48,7 @@
    height: 3px;
    cursor: row-resize;
    border: 1px #eeeeee solid;
-    background-color: @global-neutral-color-1;
+    background-color: var(--global-neutral-color-1);
    border-top: none;
    border-bottom: none;
    &:before {
--- a/package/component/src/component/step/index.less
+++ b/package/component/src/component/step/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
@width-height-pace: 24px;
@step-color: @step-success-color;
@step-fail-color: #ff5722;
--- a/package/component/src/component/switch/index.less
+++ b/package/component/src/component/switch/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-form-switch {
  position: relative;
  height: 22px;
@ -9,7 +6,7 @@
  padding: 0 4px;
  border-radius: 20px;
  cursor: pointer;
-  background-color: @global-neutral-color-6;
+  background-color: var(--global-neutral-color-6);
  -webkit-transition: 0.1s linear;
  transition: 0.1s linear;
 }
@ -44,8 +41,8 @@
 }

 .layui-form-onswitch {
-  border-color: @global-checked-color;
-  background-color: @global-checked-color;
+  border-color: var(--global-checked-color);
+  background-color: var(--global-checked-color);
 }

 .layui-form-onswitch span {
@ -62,24 +59,24 @@

 .layui-switch-disabled[lay-skin="primary"] span {
  background: 0 0 !important;
-  color: @global-neutral-color-8 !important;
+  color: var(--global-neutral-color-8) !important;
 }

 .layui-switch-disabled[lay-skin="primary"]:hover i {
-  border-color: @global-neutral-color-6;
+  border-color: var(--global-neutral-color-6);
 }

 .layui-switch-disabled,
 .layui-switch-disabled i {
-  border-color: @global-neutral-color-3 !important;
+  border-color: var(--global-neutral-color-3) !important;
 }

 .layui-switch-disabled span {
-  background-color: @global-neutral-color-3 !important;
+  background-color: var(--global-neutral-color-3) !important;
 }

 .layui-switch-disabled em {
-  color: @global-neutral-color-6 !important;
+  color: var(--global-neutral-color-6) !important;
 }

 .layui-switch-disabled:hover i {
--- a/package/component/src/component/tab/index.less
+++ b/package/component/src/component/tab/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-tab {
  margin: 10px 0;
  text-align: left !important;
@ -26,7 +23,7 @@
 }

 .layui-tab-card .layui-tab-head {
-  background-color: @global-neutral-color-1;
+  background-color: var(--global-neutral-color-1);
 }

 .layui-tab-title {
@ -89,11 +86,11 @@


 .layui-tab-title.is-right {
-  border-left: 1px solid @global-neutral-color-3;
+  border-left: 1px solid var(--global-neutral-color-3);
 }

 .layui-tab-title.is-left {
-  border-right: 1px solid @global-neutral-color-3;
+  border-right: 1px solid var(--global-neutral-color-3);
 }

 .layui-tab-title.is-right .layui-this {
@ -125,12 +122,12 @@
 }

 .layui-tab-title.is-left .layui-this:after {
-  border: 1px solid @global-neutral-color-3;
+  border: 1px solid var(--global-neutral-color-3);
  border-right-color: #FFF;
 }

 .layui-tab-title.is-right .layui-this:after {
-  border: 1px solid @global-neutral-color-3;
+  border: 1px solid var(--global-neutral-color-3);
  border-left-color: #FFF;
 }

@ -139,21 +136,21 @@
 }

 .layui-tab-brief>.layui-tab-head>.layui-tab-title .layui-this {
-  color: @global-primary-color;
+  color: var(--global-primary-color);
 }

 .layui-tab-brief>.layui-tab-head>.layui-tab-more li.layui-this:after,
 .layui-tab-brief>.layui-tab-head>.layui-tab-title .layui-this:after {
  border: none;
  border-radius: 0;
-  border-bottom: 2px solid @global-checked-color;
+  border-bottom: 2px solid var(--global-checked-color);
 }

 .layui-tab-brief>.layui-tab-head.is-right>.layui-tab-title{
-  border-left: 1px solid @global-neutral-color-3;
+  border-left: 1px solid var(--global-neutral-color-3);
 }
 .layui-tab-brief>.layui-tab-head.is-left>.layui-tab-title {
-  border-right: 1px solid @global-neutral-color-3;
+  border-right: 1px solid var(--global-neutral-color-3);
 }

 .layui-tab-brief[overflow]>.layui-tab-head>.layui-tab-title .layui-this:after {
@ -164,7 +161,7 @@
 .layui-tab-brief > .layui-tab-head.is-left > .layui-tab-title .layui-this:after {
  border: none;
  border-radius: 0;
-  border-right: 2px solid @global-checked-color;
+  border-right: 2px solid var(--global-checked-color);
  margin-left: 1px;
 }

@ -172,7 +169,7 @@
 .layui-tab-brief > .layui-tab-head.is-right > .layui-tab-title .layui-this:after {
  border: none;
  border-radius: 0;
-  border-left: 2px solid @global-checked-color;
+  border-left: 2px solid var(--global-checked-color);
  margin-right: 1px;
 }

@ -195,22 +192,22 @@
 }

 .layui-tab-card>.layui-tab-head>.layui-tab-title.is-top .layui-this:after {
-  border: 1px solid @global-neutral-color-3;
+  border: 1px solid var(--global-neutral-color-3);
  border-bottom-color: #fff;
 }

 .layui-tab-card>.layui-tab-head>.layui-tab-title.is-bottom .layui-this:after {
-  border: 1px solid @global-neutral-color-3;
+  border: 1px solid var(--global-neutral-color-3);
  border-top-color: #fff;
 }

 .layui-tab-card>.layui-tab-head>.layui-tab-title.is-left .layui-this:after {
-  border: 1px solid @global-neutral-color-3;
+  border: 1px solid var(--global-neutral-color-3);
  border-right-color: #fff;
 }

 .layui-tab-card>.layui-tab-head>.layui-tab-title.is-right .layui-this:after {
-  border: 1px solid @global-neutral-color-3;
+  border: 1px solid var(--global-neutral-color-3);
  border-left-color: #fff;
 }

@ -224,7 +221,7 @@

 .layui-tab-card>.layui-tab-more .layui-this {
  background: 0 0;
-  color: @global-checked-color;
+  color: var(--global-checked-color);
 }

 .layui-tab-card>.layui-tab-more .layui-this:after {
@ -266,7 +263,7 @@
 }

 .layui-tab-more li.layui-this:after {
-  border-bottom-color: @global-neutral-color-3;
+  border-bottom-color: var(--global-neutral-color-3);
  border-radius: 2px;
 }

@ -291,7 +288,7 @@
  top: 1px;
  text-align: center;
  font-size: 14px;
-  color: @global-neutral-color-8;
+  color: var(--global-neutral-color-8);
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
 }
--- a/package/component/src/component/table/index.less
+++ b/package/component/src/component/table/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-table-col-special {
  width: 34px;
 }
@ -31,7 +28,7 @@
 .layui-table-total,
 .layui-table-total tr,
 .layui-table[lay-even] tr:nth-child(even) {
-  background-color: @global-neutral-color-1;
+  background-color: var(--global-neutral-color-1);
 }

 .layui-table td,
--- a/package/component/src/component/textarea/index.less
+++ b/package/component/src/component/textarea/index.less
@ -1,12 +1,6 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
-@textarea-border-radius: var(--textarea-border-radius);
-@textarea-border-color: var(--textarea-border-color);
-
 :root {
-  --textarea-border-radius: @global-border-radius;
-  --textarea-border-color: @global-neutral-color-3;
+  --textarea-border-radius: var(--global-border-radius);
+  --textarea-border-color: var(--global-neutral-color-3);
 }

 .layui-textarea {
@ -14,8 +8,8 @@
  border-style: solid;
  background-color: #fff;
  color: rgba(0, 0, 0, 0.85);
-  border-radius: @textarea-border-radius;
-  border-color: @textarea-border-color;
+  border-radius: var(--textarea-border-radius);
+  border-color: var(--textarea-border-color);
  display: block;
  width: 100%;
  height: auto;
--- a/package/component/src/component/timeline/index.less
+++ b/package/component/src/component/timeline/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-timeline {
  padding-left: 5px;
 }
@ -19,7 +16,7 @@
  height: 20px;
  line-height: 20px;
  background-color: #fff;
-  color: @global-checked-color;
+  color: var(--global-checked-color);
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
--- a/package/component/src/component/transfer/index.less
+++ b/package/component/src/component/transfer/index.less
@ -1,10 +1,5 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
-@transfer-box-border-radius: var(--transfer-box-border-radius);
-
 :root {
-  --transfer-box-border-radius: @global-border-radius;
+  --transfer-box-border-radius: var(--global-border-radius);
 }

 .layui-transfer .layui-btn + .layui-btn {
@ -24,7 +19,7 @@
  border-width: 1px;
  width: 200px;
  height: 360px;
-  border-radius: @transfer-box-border-radius;
+  border-radius: var(--transfer-box-border-radius);
  background-color: #fff;
 }

--- a/package/component/src/component/tree/index.less
+++ b/package/component/src/component/tree/index.less
@ -1,6 +1,3 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
-
 .layui-tree {
  line-height: 22px;
 }
--- a/package/component/src/component/upload/index.less
+++ b/package/component/src/component/upload/index.less
@ -1,17 +1,13 @@
-@import (reference) "../../theme/variable.less";
-@import (reference) "../../theme/public.less";
@import "./cropper.min.css";

 .layui-upload-file {
-  // display: none !important;
  opacity: 0.01;
  position: relative;
  filter: Alpha(opacity=1);
  cursor: pointer;
-  
 }
-.layui-upload-btn-box{
-  position:relative;
+.layui-upload-btn-box {
+  position: relative;
  overflow: hidden;
 }
 .layui-upload-drag,
@ -37,7 +33,7 @@
 .layui-upload-drag {
  position: relative;
  padding: 30px;
-  border: 1px dashed @global-neutral-color-4;
+  border: 1px dashed var(--global-neutral-color-4);
  background-color: #fff;
  text-align: center;
  cursor: pointer;
@ -46,14 +42,14 @@

 .layui-upload-drag .layui-icon {
  font-size: 50px;
-  color: @global-primary-color;
+  color: var(--global-primary-color);
 }

 .layui-upload-drag[lay-over] {
-  border-color: @global-primary-color;
+  border-color: var(--global-primary-color);
 }
-.layui-upload-drag-draging{
-  border-color: @global-primary-color;
+.layui-upload-drag-draging {
+  border-color: var(--global-primary-color);
 }

 .layui-upload-iframe {
@ -82,27 +78,27 @@
  opacity: 0.01;
  filter: Alpha(opacity=1);
 }
-.layui-upload-file-disabled{
-  cursor:not-allowed !important;
+.layui-upload-file-disabled {
+  cursor: not-allowed !important;
 }
 .layui-btn-container .layui-upload-choose {
  padding-left: 0;
 }

-.layui-upload-drag-disable{
-  opacity:0.8;
-  z-index:1;
+.layui-upload-drag-disable {
+  opacity: 0.8;
+  z-index: 1;
  cursor: not-allowed;
 }

-._lay_upload_img{
+._lay_upload_img {
  display: block;
  max-width: 100%;
 }
-.layui-upload-list-disabled{
-  width:auto;
-  height:auto;
+.layui-upload-list-disabled {
+  width: auto;
+  height: auto;
  pointer-events: none !important;
-  background-color: #fbfbfb!important;
+  background-color: #fbfbfb !important;
  filter: opacity(0.9);
 }
--- a/package/component/src/theme/public.less
+++ b/package/component/src/theme/public.less
@ -129,7 +129,7 @@ a:hover {

 .layui-disabled,
 .layui-disabled:hover {
-  color: @global-neutral-color-6 !important;
+  color: var(--global-neutral-color-6) !important;
  cursor: not-allowed !important;
 }

@ -170,7 +170,7 @@ a:hover {
 .layui-tab-card,
 .layui-tab-title,
 .layui-tab-title .layui-this:after {
-  border-color: @global-neutral-color-3;
+  border-color: var(--global-neutral-color-3);
 }

 .layui-form input[type="checkbox"],
--- a/package/component/src/theme/variable.less
+++ b/package/component/src/theme/variable.less
@ -1,35 +1,3 @@
-@global-primary-color: var(--global-primary-color);
-
-@global-normal-color: var(--global-normal-color);
-
-@global-warm-color: var(--global-warm-color);
-
-@global-danger-color: var(--global-danger-color);
-
-@global-checked-color: var(--global-checked-color);
-
-@global-border-radius: var(--global-border-radius);
-
-@global-fore-color: var(--global-fore-color);
-
-@global-back-color: var(--global-back-color);
-
-@global-neutral-color-1: var(--global-neutral-color-1);
-
-@global-neutral-color-2: var(--global-neutral-color-2);
-
-@global-neutral-color-3: var(--global-neutral-color-3);
-
-@global-neutral-color-4: var(--global-neutral-color-4);
-
-@global-neutral-color-5: var(--global-neutral-color-5);
-
-@global-neutral-color-6: var(--global-neutral-color-6);
-
-@global-neutral-color-7: var(--global-neutral-color-7);
-
-@global-neutral-color-8: var(--global-neutral-color-8);
-
 :root {

  --global-primary-color: #009688;