inl-ui 0.0.3 → 0.0.4

package/conf/cp.js

@@ -0,0 +1,51 @@
+// cp 文件
+const fs = require("fs");
+const path = require("path");
+
+const gitPath = (p = "./") => {
+  return path.resolve(__dirname, p);
+};
+
+const cpFiles = (file1, file2) => {
+  fs.readFile(file1, "utf8", (err, res) => {
+    if (!err) {
+      fs.writeFile(file2, res, (err, rr) => {
+        if (err) {
+          throw Error("写入文件失败.");
+        }
+      });
+    } else {
+      throw Error("读取主题文件失败.");
+    }
+  });
+};
+
+const readDir = () => {
+  const pp = gitPath("../../../site/src/theme");
+  const pp2 = gitPath("../dist/theme");
+  fs.readdir(pp, (err, res) => {
+    if (!err) {
+      for (let i of res) {
+        const ll = i.split(".");
+
+        if (ll.length > 1) {
+          const item = {
+            file1: `${pp}/${ll[0]}.less`,
+            file2: `${pp2}/${ll[0]}.less`,
+          };
+          cpFiles(item.file1, item.file2);
+        }
+      }
+    }
+  });
+};
+const createDir = () => {
+  const path = gitPath("../dist/theme");
+  fs.stat(path, (err, res) => {
+    if (err) {
+      fs.mkdirSync(path);
+    }
+    readDir();
+  });
+};
+createDir();

package/dist/index.js

@@ -1,11 +1,64 @@
 import { defineComponent, ref, reactive, createVNode, createTextVNode } from 'vue';
 import { Popconfirm, Button, Card } from 'ant-design-vue';
-import utils from 'inl-util';
 
-var version = "0.0.1";
+var version = "0.0.3";
 
 var components = [];
 
+const config = {
+  prefix: "inl"
+};
+
+const {
+  prefix: prefix$1
+} = config;
+var className = (classNames => {
+  const ty = typeof classNames;
+
+  if (ty === "object") {
+    return classNames.map(item => {
+      if (item === "") return "";
+      return `${prefix$1}-${item}`;
+    });
+  }
+
+  return `${prefix$1}-${classNames}`;
+});
+
+const {
+  prefix
+} = config;
+var installComponent = ((component, name) => {
+  component.install = app => {
+    app.component(`${prefix}-${name}`, component);
+  };
+
+  return component;
+});
+
+var getSlots = (_context => {
+  const slots = _context.slots;
+  const useSlots = {};
+
+  for (let i in slots) {
+    useSlots[i] = slots[i];
+  }
+
+  if (!useSlots.default) {
+    useSlots.default = () => {
+      return "";
+    };
+  }
+
+  return useSlots;
+});
+
+const utils = {
+  className,
+  installComponent,
+  getSlots
+};
+
 const About = defineComponent({
   setup(prop, context) {
     ref(false);

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/components/index.ts","../../src/pageComponent/views/systemManager/about.tsx","../../src/pageComponent/index.ts","../../src/index.ts"],"sourcesContent":[null,null,null,null],"names":["About","defineComponent","setup","prop","context","ref","reactive","showContent","loading","confirm","e","console","log","cancel","utils","installComponent","comps","pageComponents","components","install","app","i","use","version"],"mappings":";;;;;;AAAA,iBAAe,EAAf;;ACMA,MAAMA,KAAK,GAAGC,eAAe,CAAC;AAC5BC,EAAAA,KAAK,CAACC,IAAD,EAAOC,OAAP;AACH,IAAgBC,GAAG,CAAC,KAAD;AAEnB,IAAcC,QAAQ,CAAC;AACrBC,MAAAA,WAAW,EAAE,KADQ;AAErBC,MAAAA,OAAO,EAAE;AAFY,KAAD;;AAKtB,UAAMC,OAAO,GAAIC,CAAD;AACdC,MAAAA,OAAO,CAACC,GAAR,CAAYF,CAAZ;AAED,KAHD;;AAKA,UAAMG,MAAM,GAAIH,CAAD;AACbC,MAAAA,OAAO,CAACC,GAAR,CAAYF,CAAZ;AAED,KAHD;;AAUA,WAAO;AAAA,eACM,OADN;AAAA,YACiB;AADjB;AAAA,eAEQ;AAFR;AAAA,eAMO,mBANP;AAAA,iBAOS,IAPT;AAAA,qBAQa,IARb;AAAA,mBASW,aATX;AAAA,mBAUYD,OAVZ;AAAA,kBAWWI;AAXX;AAAA;AAAA,gBAcQ,SAdR;AAAA,mBAeY;AAER;AAjBJ;AAAA;AAAA;AAAA;AAAA,eAuEQ;AAvER;AAAA,eAwEU;AAxEV;AAAA,eA0ES;AA1ET;AAAA;AAAA;AAAA,eA4EQ;AA5ER;AAAA,eA6EU;AA7EV;AAAA,eA+EQ;AA/ER;AAAA,eAgFS;AAhFT;AAAA;AAAA;AAAA,eAiFQ;AAjFR;AAAA,eAkFS;AAlFT;AAAA;AAAA;AAAA,eAmFQ;AAnFR;AAAA,eAoFS;AApFT;AAAA;AAAA;AAAA,eAsFQ;AAtFR;AAAA,eAuFU;AAvFV;AAAA,eAyFM;AAzFN,+FAyFyB,IAzFzB,IAAP;AA6FD;;AArH2B,CAAD,CAA7B;AAwHA,cAAeC,KAAK,CAACC,gBAAN,CAAuBf,KAAvB,EAA8B,OAA9B,CAAf;;AC5HA,qBAAe,CAACA,OAAD,CAAf;;ACKA,MAAMgB,KAAK,GAAG,CAAC,GAAGC,cAAJ,EAAoB,GAAGC,UAAvB,CAAd;AAEA,YAAe;AACbC,EAAAA,OAAO,CAACC,GAAD;AACL,SAAK,IAAIC,CAAT,IAAcL,KAAd,EAAqB;AACnBI,MAAAA,GAAG,CAACE,GAAJ,CAAQD,CAAR;AACD;AACF,GALY;;AAMbE,EAAAA;AANa,CAAf;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/components/index.ts","../../src/utils/config.ts","../../src/utils/className.ts","../../src/utils/installComponent.ts","../../src/utils/getSlots.ts","../../src/utils/index.ts","../../src/pageComponent/views/systemManager/about.tsx","../../src/pageComponent/index.ts","../../src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null],"names":["config","prefix","conf","classNames","ty","map","item","component","name","install","app","_context","slots","useSlots","i","default","utils","className","installComponent","getSlots","About","defineComponent","setup","prop","context","ref","reactive","showContent","loading","confirm","e","console","log","cancel","comps","pageComponents","components","use","version"],"mappings":";;;;;AAAA,iBAAe,EAAf;;ACAO,MAAMA,MAAM,GAAG;AACpBC,EAAAA,MAAM,EAAE;AADY,CAAf;;ACEP,MAAM;AAAEA,UAAAA;AAAF,IAAaC,MAAnB;AAEA,iBAAgBC,UAAD;AACb,QAAMC,EAAE,GAAG,OAAOD,UAAlB;;AAEA,MAAIC,EAAE,KAAK,QAAX,EAAqB;AACnB,WAAQD,UAA4B,CAACE,GAA7B,CAAkCC,IAAD;AACvC,UAAIA,IAAI,KAAK,EAAb,EAAiB,OAAO,EAAP;AACjB,gBAAUL,YAAUK,MAApB;AACD,KAHO,CAAR;AAID;;AAED,YAAUL,YAAUE,YAApB;AACD,CAXD;;ACAA,MAAM;AAAEF,EAAAA;AAAF,IAAaC,MAAnB;AAEA,wBAAe,CAACK,SAAD,EAAmCC,IAAnC;AACbD,EAAAA,SAAS,CAACE,OAAV,GAAqBC,GAAD;AAClBA,IAAAA,GAAG,CAACH,SAAJ,IAAiBN,UAAUO,MAA3B,EAAmCD,SAAnC;AACD,GAFD;;AAGA,SAAOA,SAAP;AACD,CALD;;ACJA,gBAAgBI,QAAD;AACb,QAAMC,KAAK,GAAGD,QAAQ,CAACC,KAAvB;AACA,QAAMC,QAAQ,GAAwC,EAAtD;;AAEA,OAAK,IAAIC,CAAT,IAAcF,KAAd,EAAqB;AACnBC,IAAAA,QAAQ,CAACC,CAAD,CAAR,GAAcF,KAAK,CAACE,CAAD,CAAnB;AACD;;AAED,MAAI,CAACD,QAAQ,CAACE,OAAd,EAAuB;AACrBF,IAAAA,QAAQ,CAACE,OAAT,GAAmB;AACjB,aAAO,EAAP;AACD,KAFD;AAGD;;AAED,SAAOF,QAAP;AACD,CAfD;;ACEA,MAAMG,KAAK,GAAG;AAAEC,EAAAA,SAAF;AAAaC,EAAAA,gBAAb;AAA+BC,EAAAA;AAA/B,CAAd;;ACEA,MAAMC,KAAK,GAAGC,eAAe,CAAC;AAC5BC,EAAAA,KAAK,CAACC,IAAD,EAAOC,OAAP;AACH,IAAgBC,GAAG,CAAC,KAAD;AAEnB,IAAcC,QAAQ,CAAC;AACrBC,MAAAA,WAAW,EAAE,KADQ;AAErBC,MAAAA,OAAO,EAAE;AAFY,KAAD;;AAKtB,UAAMC,OAAO,GAAIC,CAAD;AACdC,MAAAA,OAAO,CAACC,GAAR,CAAYF,CAAZ;AAED,KAHD;;AAKA,UAAMG,MAAM,GAAIH,CAAD;AACbC,MAAAA,OAAO,CAACC,GAAR,CAAYF,CAAZ;AAED,KAHD;;AAUA,WAAO;AAAA,eACM,OADN;AAAA,YACiB;AADjB;AAAA,eAEQ;AAFR;AAAA,eAMO,mBANP;AAAA,iBAOS,IAPT;AAAA,qBAQa,IARb;AAAA,mBASW,aATX;AAAA,mBAUYD,OAVZ;AAAA,kBAWWI;AAXX;AAAA;AAAA,gBAcQ,SAdR;AAAA,mBAeY;AAER;AAjBJ;AAAA;AAAA;AAAA;AAAA,eAuEQ;AAvER;AAAA,eAwEU;AAxEV;AAAA,eA0ES;AA1ET;AAAA;AAAA;AAAA,eA4EQ;AA5ER;AAAA,eA6EU;AA7EV;AAAA,eA+EQ;AA/ER;AAAA,eAgFS;AAhFT;AAAA;AAAA;AAAA,eAiFQ;AAjFR;AAAA,eAkFS;AAlFT;AAAA;AAAA;AAAA,eAmFQ;AAnFR;AAAA,eAoFS;AApFT;AAAA;AAAA;AAAA,eAsFQ;AAtFR;AAAA,eAuFU;AAvFV;AAAA,eAyFM;AAzFN,+FAyFyB,IAzFzB,IAAP;AA6FD;;AArH2B,CAAD,CAA7B;AAwHA,cAAejB,KAAK,CAACE,gBAAN,CAAuBE,KAAvB,EAA8B,OAA9B,CAAf;;AC5HA,qBAAe,CAACA,OAAD,CAAf;;ACKA,MAAMc,KAAK,GAAG,CAAC,GAAGC,cAAJ,EAAoB,GAAGC,UAAvB,CAAd;AAEA,YAAe;AACb3B,EAAAA,OAAO,CAACC,GAAD;AACL,SAAK,IAAII,CAAT,IAAcoB,KAAd,EAAqB;AACnBxB,MAAAA,GAAG,CAAC2B,GAAJ,CAAQvB,CAAR;AACD;AACF,GALY;;AAMbwB,EAAAA;AANa,CAAf;;;;"}

package/dist/style.css

@@ -1,2 +1 @@
-
 html{overflow:auto}#app{height:100vh;width:100vw}.flex{display:flex}.flex-center{align-items:center;display:flex}.flex-colume{flex-direction:column}.layout .LayoutHeader{background:#fff;display:flex;height:55px;line-height:55px}.layout .LayoutHeader.blue{background:linear-gradient(90deg,#3297ff,#286be6)}.layout .LayoutHeader.blue .logo{color:#fff;font-size:20px;font-weight:900}.layout .LayoutHeader.blue .ant-menu{color:hsla(0,0%,100%,.6)}.layout .LayoutHeader.blue .ant-menu .ant-menu-item-active,.layout .LayoutHeader.blue .ant-menu .ant-menu-item-open,.layout .LayoutHeader.blue .ant-menu .ant-menu-item-selected,.layout .LayoutHeader.blue .ant-menu .ant-menu-item:hover,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu-active,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu-open,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu-selected,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu:hover{color:#fff}.layout .LayoutHeader.blue .ant-menu .ant-menu-item-active:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-item-open:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-item-selected:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-item:hover:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu-active:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu-open:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu-selected:after,.layout .LayoutHeader.blue .ant-menu .ant-menu-submenu:hover:after{border-bottom:0}.layout .LayoutHeader.blue .ant-menu .ant-menu-item.ant-menu-item-selected{background:hsla(0,0%,100%,.1)}.layout .LayoutHeader.blue .avatarBox .username{color:#fff;font-size:16px}.layout .LayoutHeader .logo{width:200px}.layout .LayoutHeader ul.topMenu{background:transparent;border-bottom:0;flex:1;line-height:60px}.layout .LayoutHeader ul.topMenu li{border-bottom:0}.layout .LayoutHeader .avatarBox .ant-dropdown-trigger{font-size:22px;height:100%}.layout .LayoutHeader .avatarBox .ant-dropdown-trigger .username{height:30px;line-height:30px}.layout .LayoutHeader .avatarBox .ant-dropdown-trigger .anticon{font-size:20px}.layout .LayoutHeader .avatarBox .avatar{margin-left:10px}.layout .LayoutContent{padding:14px}.ant-menu-root.ant-menu-inline{border-right:0;overflow-x:hidden}.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover{border-bottom:none}.ant-menu-item .anticon,.ant-menu-submenu-title .anticon{margin-right:0}.ant-menu-root>li>.ant-menu-submenu-title,.ant-menu-root>li>.ant-menu-title-content{font-weight:600}.ant-tabs-bottom>.ant-tabs-nav:before,.ant-tabs-bottom>div>.ant-tabs-nav:before,.ant-tabs-top>.ant-tabs-nav:before,.ant-tabs-top>div>.ant-tabs-nav:before{display:block}.ant-tabs-nav .ant-tabs-tab{margin:0}.ant-table .ant-table-thead>tr>th{font-weight:600}.login_box{background-color:#fff;box-shadow:1px 1px 20px rgba(0,0,0,.3);display:flex;flex-direction:column;height:29rem;overflow:hidden;width:25rem}.login_box .ant-form{padding:0 1rem}.login_box .ant-form-item{margin-bottom:.5rem}.login_box .ant-form-item .ant-btn,.login_box .ant-form-item input{border-radius:.5rem;height:40px}.login_box h3{font-weight:400;padding:2rem 0;text-align:center}.login_box .login_tab{display:flex;height:3rem}.login_box .login_tab .item{background:#ebf8ff;cursor:pointer;flex:1;line-height:2.8rem;opacity:.5;text-align:center;transition:all .3s ease}.login_box .login_tab .item.active,.login_box .login_tab .item:hover{background:linear-gradient(90deg,#2eb2ff,#6d71ff);color:#fff;opacity:.8}.login{display:flex;flex-direction:column;height:100vh}.login .title{align-items:center;display:flex;height:4.3rem;padding:0 5rem}.login .title img{width:42px}.login .title span{font-size:1.57rem;font-weight:400;padding-left:1rem}@media screen{.login .content_login{align-items:center;background-image:url(../img/loginBackground.png);background-position:center 0;background-size:cover;display:flex;flex:1;position:relative}.login .content_login .login_box{position:absolute;right:10rem}}@media screen and (max-width:768px){.login .content_login{justify-content:center}.login .content_login .login_box{position:static;right:0}}.login .copyright-information{color:#666;font-size:14px;height:30px;line-height:30px;margin:0 10px;padding:0;text-align:center}.login .copyright-information a{color:#666;text-decoration:none}.menu-manager{display:flex;gap:32px;height:100%}.menu-manager .tree{width:300px}.menu-manager .tree .menu-select-tree .utils-container{display:flex;gap:8px;justify-content:flex-end}.menu-manager .tree .menu-select-tree .tree-container{padding:8px}.menu-manager .tree .menu-select-tree .tree-container .ant-tree-show-line .ant-tree-indent-unit:before{border-right:1px dashed #d9d9d9}.menu-manager .right-detail{flex:auto}.menu-manager .right-detail .menu-detail .header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.menu-manager .right-detail .menu-detail .header .header-text{font-size:16px;font-weight:700}.menu-manager .right-detail .menu-detail .form{max-width:500px}.tree-cotextmenu .context-utils{display:flex;gap:8px}.util-item{border:1px solid #ccc;border-radius:50%;color:#ccc;cursor:pointer;line-height:1;margin:8px 0;padding:4px}.param-manager .tab-item .operation{text-align:right}.param-manager .tab-item .operation>.ant-space{position:absolute;right:0;top:0}.param-manager .tab-item .group-container .group-item-title{font-size:14px;font-weight:600}.param-manager .tab-item .group-container .collapse-container{margin:16px 0}.param-manager .tab-item .group-container .collapse-container .header{align-items:center;display:flex;line-height:1;padding-left:16px;position:relative}.param-manager .tab-item .group-container .collapse-container .header .container-title{font-size:14px;font-weight:600}.param-manager .tab-item .group-container .collapse-container .header:before{background-color:#4b7ff7;bottom:0;content:" ";left:0;position:absolute;top:0;width:2px}.systemManager{height:100%;width:100%}.systemManager .LayoutSider{background:#fff;margin-right:14px;overflow:auto}.depManager,.logManager,.personalSetting,.postManager,.role-manager,.userManager{display:flex;flex-direction:column}.depManager .control,.logManager .control,.personalSetting .control,.postManager .control,.role-manager .control,.userManager .control{margin-bottom:16px}.depManager .titleLine,.logManager .titleLine,.personalSetting .titleLine,.postManager .titleLine,.role-manager .titleLine,.userManager .titleLine{display:flex;justify-content:space-between;margin-bottom:10px}.depManager .titleLine .title,.logManager .titleLine .title,.personalSetting .titleLine .title,.postManager .titleLine .title,.role-manager .titleLine .title,.userManager .titleLine .title{font-weight:bolder}.depManager .searchLine,.logManager .searchLine,.personalSetting .searchLine,.postManager .searchLine,.role-manager .searchLine,.userManager .searchLine{justify-content:space-between;margin-bottom:10px}.logModal .col{display:flex;margin-bottom:10px}.logModal .col .label{color:gray;min-width:140px;padding:0 10px;text-align:right}.depManager{flex-direction:row}.depManager .left{margin-right:20px;width:300px}.depManager .right{flex:1}.depManager .right .basic-info .basic-info-header{display:flex;font-weight:600;justify-content:space-between}.depManager .right .basic-info .basic-info-header .basic-info-title,.depManager .right .employee-container .title{color:#31363c;font-size:18px;font-weight:600}.depManager .right .employee-container .operation{display:flex;justify-content:space-between;margin-bottom:16px}.about{display:flex;flex-direction:column;padding:40px}.about .logoLine{justify-content:space-between}.about .logoLine .logo{margin-bottom:40px;width:600px}.about .titleLine{display:flex;justify-content:space-between;margin-bottom:10px}.about .titleLine .title{font-weight:bolder}.about .titleLine .title:before{border-left:2px solid #37f;content:"";height:10px;margin-right:12px}.about .card{background:#f8f7fc;color:rgba(0,0,0,.45);margin:0 0 20px 16px}.about .litTitle{margin:0 0 4px 20px}.about .down{margin:10px 0 20px 16px}.about .info{width:800px}.about .infoBtn{margin:10px 0}.about .update{position:absolute;right:65px;top:220px}.tp_box{display:flex;flex-direction:column;height:100vh;width:100vw}.tp_box #tp{flex:1}

package/dist/theme/dark copy.less

@@ -0,0 +1,448 @@
+@import './default.less';
+@theme: dark;
+// color palettes
+@blue-1: mix(color(~`colorPalette('@{blue-base}', 8) `), @component-background, 15%);
+@blue-2: mix(color(~`colorPalette('@{blue-base}', 7) `), @component-background, 25%);
+@blue-3: mix(@blue-base, @component-background, 30%);
+@blue-4: mix(@blue-base, @component-background, 45%);
+@blue-5: mix(@blue-base, @component-background, 65%);
+@blue-6: mix(@blue-base, @component-background, 85%);
+@blue-7: mix(color(~`colorPalette('@{blue-base}', 5) `), @component-background, 90%);
+@blue-8: mix(color(~`colorPalette('@{blue-base}', 4) `), @component-background, 95%);
+@blue-9: mix(color(~`colorPalette('@{blue-base}', 3) `), @component-background, 97%);
+@blue-10: mix(color(~`colorPalette('@{blue-base}', 2) `), @component-background, 98%);
+
+@purple-1: mix(color(~`colorPalette('@{purple-base}', 8) `), @component-background, 15%);
+@purple-2: mix(color(~`colorPalette('@{purple-base}', 7) `), @component-background, 25%);
+@purple-3: mix(@purple-base, @component-background, 30%);
+@purple-4: mix(@purple-base, @component-background, 45%);
+@purple-5: mix(@purple-base, @component-background, 65%);
+@purple-6: mix(@purple-base, @component-background, 85%);
+@purple-7: mix(color(~`colorPalette('@{purple-base}', 5) `), @component-background, 90%);
+@purple-8: mix(color(~`colorPalette('@{purple-base}', 4) `), @component-background, 95%);
+@purple-9: mix(color(~`colorPalette('@{purple-base}', 3) `), @component-background, 97%);
+@purple-10: mix(color(~`colorPalette('@{purple-base}', 2) `), @component-background, 98%);
+
+@cyan-1: mix(color(~`colorPalette('@{cyan-base}', 8) `), @component-background, 15%);
+@cyan-2: mix(color(~`colorPalette('@{cyan-base}', 7) `), @component-background, 25%);
+@cyan-3: mix(@cyan-base, @component-background, 30%);
+@cyan-4: mix(@cyan-base, @component-background, 45%);
+@cyan-5: mix(@cyan-base, @component-background, 65%);
+@cyan-6: mix(@cyan-base, @component-background, 85%);
+@cyan-7: mix(color(~`colorPalette('@{cyan-base}', 5) `), @component-background, 90%);
+@cyan-8: mix(color(~`colorPalette('@{cyan-base}', 4) `), @component-background, 95%);
+@cyan-9: mix(color(~`colorPalette('@{cyan-base}', 3) `), @component-background, 97%);
+@cyan-10: mix(color(~`colorPalette('@{cyan-base}', 2) `), @component-background, 98%);
+
+@green-1: mix(color(~`colorPalette('@{green-base}', 8) `), @component-background, 15%);
+@green-2: mix(color(~`colorPalette('@{green-base}', 7) `), @component-background, 25%);
+@green-3: mix(@green-base, @component-background, 30%);
+@green-4: mix(@green-base, @component-background, 45%);
+@green-5: mix(@green-base, @component-background, 65%);
+@green-6: mix(@green-base, @component-background, 85%);
+@green-7: mix(color(~`colorPalette('@{green-base}', 5) `), @component-background, 90%);
+@green-8: mix(color(~`colorPalette('@{green-base}', 4) `), @component-background, 95%);
+@green-9: mix(color(~`colorPalette('@{green-base}', 3) `), @component-background, 97%);
+@green-10: mix(color(~`colorPalette('@{green-base}', 2) `), @component-background, 98%);
+
+@magenta-1: mix(color(~`colorPalette('@{magenta-base}', 8) `), @component-background, 15%);
+@magenta-2: mix(color(~`colorPalette('@{magenta-base}', 7) `), @component-background, 25%);
+@magenta-3: mix(@magenta-base, @component-background, 30%);
+@magenta-4: mix(@magenta-base, @component-background, 45%);
+@magenta-5: mix(@magenta-base, @component-background, 65%);
+@magenta-6: mix(@magenta-base, @component-background, 85%);
+@magenta-7: mix(color(~`colorPalette('@{magenta-base}', 5) `), @component-background, 90%);
+@magenta-8: mix(color(~`colorPalette('@{magenta-base}', 4) `), @component-background, 95%);
+@magenta-9: mix(color(~`colorPalette('@{magenta-base}', 3) `), @component-background, 97%);
+@magenta-10: mix(color(~`colorPalette('@{magenta-base}', 2) `), @component-background, 98%);
+
+@pink-1: mix(color(~`colorPalette('@{pink-base}', 8) `), @component-background, 15%);
+@pink-2: mix(color(~`colorPalette('@{pink-base}', 7) `), @component-background, 25%);
+@pink-3: mix(@pink-base, @component-background, 30%);
+@pink-4: mix(@pink-base, @component-background, 45%);
+@pink-5: mix(@pink-base, @component-background, 65%);
+@pink-6: mix(@pink-base, @component-background, 85%);
+@pink-7: mix(color(~`colorPalette('@{pink-base}', 5) `), @component-background, 90%);
+@pink-8: mix(color(~`colorPalette('@{pink-base}', 4) `), @component-background, 95%);
+@pink-9: mix(color(~`colorPalette('@{pink-base}', 3) `), @component-background, 97%);
+@pink-10: mix(color(~`colorPalette('@{pink-base}', 2) `), @component-background, 98%);
+
+@red-1: mix(color(~`colorPalette('@{red-base}', 8) `), @component-background, 15%);
+@red-2: mix(color(~`colorPalette('@{red-base}', 7) `), @component-background, 25%);
+@red-3: mix(@red-base, @component-background, 30%);
+@red-4: mix(@red-base, @component-background, 45%);
+@red-5: mix(@red-base, @component-background, 65%);
+@red-6: mix(@red-base, @component-background, 85%);
+@red-7: mix(color(~`colorPalette('@{red-base}', 5) `), @component-background, 90%);
+@red-8: mix(color(~`colorPalette('@{red-base}', 4) `), @component-background, 95%);
+@red-9: mix(color(~`colorPalette('@{red-base}', 3) `), @component-background, 97%);
+@red-10: mix(color(~`colorPalette('@{red-base}', 2) `), @component-background, 98%);
+
+@orange-1: mix(color(~`colorPalette('@{orange-base}', 8) `), @component-background, 15%);
+@orange-2: mix(color(~`colorPalette('@{orange-base}', 7) `), @component-background, 25%);
+@orange-3: mix(@orange-base, @component-background, 30%);
+@orange-4: mix(@orange-base, @component-background, 45%);
+@orange-5: mix(@orange-base, @component-background, 65%);
+@orange-6: mix(@orange-base, @component-background, 85%);
+@orange-7: mix(color(~`colorPalette('@{orange-base}', 5) `), @component-background, 90%);
+@orange-8: mix(color(~`colorPalette('@{orange-base}', 4) `), @component-background, 95%);
+@orange-9: mix(color(~`colorPalette('@{orange-base}', 3) `), @component-background, 97%);
+@orange-10: mix(color(~`colorPalette('@{orange-base}', 2) `), @component-background, 98%);
+
+@yellow-1: mix(color(~`colorPalette('@{yellow-base}', 8) `), @component-background, 15%);
+@yellow-2: mix(color(~`colorPalette('@{yellow-base}', 7) `), @component-background, 25%);
+@yellow-3: mix(@yellow-base, @component-background, 30%);
+@yellow-4: mix(@yellow-base, @component-background, 45%);
+@yellow-5: mix(@yellow-base, @component-background, 65%);
+@yellow-6: mix(@yellow-base, @component-background, 85%);
+@yellow-7: mix(color(~`colorPalette('@{yellow-base}', 5) `), @component-background, 90%);
+@yellow-8: mix(color(~`colorPalette('@{yellow-base}', 4) `), @component-background, 95%);
+@yellow-9: mix(color(~`colorPalette('@{yellow-base}', 3) `), @component-background, 97%);
+@yellow-10: mix(color(~`colorPalette('@{yellow-base}', 2) `), @component-background, 98%);
+
+@volcano-1: mix(color(~`colorPalette('@{volcano-base}', 8) `), @component-background, 15%);
+@volcano-2: mix(color(~`colorPalette('@{volcano-base}', 7) `), @component-background, 25%);
+@volcano-3: mix(@volcano-base, @component-background, 30%);
+@volcano-4: mix(@volcano-base, @component-background, 45%);
+@volcano-5: mix(@volcano-base, @component-background, 65%);
+@volcano-6: mix(@volcano-base, @component-background, 85%);
+@volcano-7: mix(color(~`colorPalette('@{volcano-base}', 5) `), @component-background, 90%);
+@volcano-8: mix(color(~`colorPalette('@{volcano-base}', 4) `), @component-background, 95%);
+@volcano-9: mix(color(~`colorPalette('@{volcano-base}', 3) `), @component-background, 97%);
+@volcano-10: mix(color(~`colorPalette('@{volcano-base}', 2) `), @component-background, 98%);
+
+@geekblue-1: mix(color(~`colorPalette('@{geekblue-base}', 8) `), @component-background, 15%);
+@geekblue-2: mix(color(~`colorPalette('@{geekblue-base}', 7) `), @component-background, 25%);
+@geekblue-3: mix(@geekblue-base, @component-background, 30%);
+@geekblue-4: mix(@geekblue-base, @component-background, 45%);
+@geekblue-5: mix(@geekblue-base, @component-background, 65%);
+@geekblue-6: mix(@geekblue-base, @component-background, 85%);
+@geekblue-7: mix(color(~`colorPalette('@{geekblue-base}', 5) `), @component-background, 90%);
+@geekblue-8: mix(color(~`colorPalette('@{geekblue-base}', 4) `), @component-background, 95%);
+@geekblue-9: mix(color(~`colorPalette('@{geekblue-base}', 3) `), @component-background, 97%);
+@geekblue-10: mix(color(~`colorPalette('@{geekblue-base}', 2) `), @component-background, 98%);
+
+@lime-1: mix(color(~`colorPalette('@{lime-base}', 8) `), @component-background, 15%);
+@lime-2: mix(color(~`colorPalette('@{lime-base}', 7) `), @component-background, 25%);
+@lime-3: mix(@lime-base, @component-background, 30%);
+@lime-4: mix(@lime-base, @component-background, 45%);
+@lime-5: mix(@lime-base, @component-background, 65%);
+@lime-6: mix(@lime-base, @component-background, 85%);
+@lime-7: mix(color(~`colorPalette('@{lime-base}', 5) `), @component-background, 90%);
+@lime-8: mix(color(~`colorPalette('@{lime-base}', 4) `), @component-background, 95%);
+@lime-9: mix(color(~`colorPalette('@{lime-base}', 3) `), @component-background, 97%);
+@lime-10: mix(color(~`colorPalette('@{lime-base}', 2) `), @component-background, 98%);
+
+@gold-1: mix(color(~`colorPalette('@{gold-base}', 8) `), @component-background, 15%);
+@gold-2: mix(color(~`colorPalette('@{gold-base}', 7) `), @component-background, 25%);
+@gold-3: mix(@gold-base, @component-background, 30%);
+@gold-4: mix(@gold-base, @component-background, 45%);
+@gold-5: mix(@gold-base, @component-background, 65%);
+@gold-6: mix(@gold-base, @component-background, 85%);
+@gold-7: mix(color(~`colorPalette('@{gold-base}', 5) `), @component-background, 90%);
+@gold-8: mix(color(~`colorPalette('@{gold-base}', 4) `), @component-background, 95%);
+@gold-9: mix(color(~`colorPalette('@{gold-base}', 3) `), @component-background, 97%);
+@gold-10: mix(color(~`colorPalette('@{gold-base}', 2) `), @component-background, 98%);
+
+// Color used by default to control hover and active backgrounds and for
+// alert info backgrounds.
+@primary-1: mix(color(~`colorPalette('@{primary-color}', 8) `), @component-background, 15%);
+@primary-2: mix(color(~`colorPalette('@{primary-color}', 7) `), @component-background, 25%);
+@primary-3: mix(@primary-color, @component-background, 30%);
+@primary-4: mix(@primary-color, @component-background, 45%);
+@primary-5: mix(@primary-color, @component-background, 65%);
+@primary-6: @primary-color;
+@primary-7: mix(color(~`colorPalette('@{primary-color}', 5) `), @component-background, 90%);
+@primary-8: mix(color(~`colorPalette('@{primary-color}', 4) `), @component-background, 95%);
+@primary-9: mix(color(~`colorPalette('@{primary-color}', 3) `), @component-background, 97%);
+@primary-10: mix(color(~`colorPalette('@{primary-color}', 2) `), @component-background, 98%);
+
+// Layer background
+@popover-background: #1f1f1f;
+@popover-customize-border-color: #3a3a3a;
+@body-background: @black;
+@component-background: #141414;
+
+@text-color: fade(@white, 85%);
+@text-color-secondary: fade(@white, 45%);
+@text-color-inverse: @white;
+@icon-color-hover: fade(@white, 75%);
+@heading-color: fade(@white, 85%);
+
+// The background colors for active and hover states for things like
+// list items or table cells.
+@item-active-bg: @primary-1;
+@item-hover-bg: fade(@white, 8%);
+
+// Border color
+@border-color-base: #434343; // base border outline a component
+@border-color-split: #303030; // split border inside a component
+
+@background-color-light: fade(@white, 4%); // background of header and selected item
+@background-color-base: fade(@white, 8%); // Default grey background color
+
+// Disabled states
+@disabled-color: fade(@white, 30%);
+@disabled-bg: @background-color-base;
+@disabled-color-dark: fade(@white, 30%);
+
+// Tree
+// ---
+@tree-bg: transparent;
+
+// List
+// ---
+@list-customize-card-bg: transparent;
+
+// Shadow
+// ---
+@shadow-color: rgba(0, 0, 0, 0.45);
+@shadow-color-inverse: @component-background;
+@box-shadow-base: @shadow-2;
+@shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.32), 0 -9px 28px 0 rgba(0, 0, 0, 0.2),
+  0 -12px 48px 16px rgba(0, 0, 0, 0.12);
+@shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.32), 0 9px 28px 0 rgba(0, 0, 0, 0.2),
+  0 12px 48px 16px rgba(0, 0, 0, 0.12);
+@shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.32), 9px 0 28px 0 rgba(0, 0, 0, 0.2),
+  12px 0 48px 16px rgba(0, 0, 0, 0.12);
+@shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32),
+  0 9px 28px 8px rgba(0, 0, 0, 0.2);
+
+// Buttons
+// ---
+@btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+@btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+@btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+
+@btn-default-bg: transparent;
+
+@btn-default-ghost-color: @text-color;
+@btn-default-ghost-border: fade(@white, 25%);
+
+@btn-text-hover-bg: rgba(255, 255, 255, 0.03);
+
+// Checkbox
+// ---
+@checkbox-check-bg: transparent;
+
+// Descriptions
+// ---
+@descriptions-bg: @background-color-light;
+
+// Divider
+// ---
+@divider-color: rgba(255, 255, 255, 12%);
+
+// Modal
+// ---
+@modal-header-bg: @popover-background;
+@modal-header-border-color-split: @border-color-split;
+@modal-content-bg: @popover-background;
+@modal-footer-border-color-split: @border-color-split;
+
+// Radio
+// ---
+@radio-solid-checked-color: @white;
+@radio-dot-disabled-color: fade(@white, 20%);
+
+// Radio buttons
+// ---
+@radio-disabled-button-checked-bg: fade(@white, 20%);
+@radio-disabled-button-checked-color: @disabled-color;
+
+// Layout
+// ---
+@layout-body-background: @body-background;
+@layout-header-background: @popover-background;
+@layout-trigger-background: #262626;
+
+// Input
+// ---
+@input-bg: transparent;
+@input-placeholder-color: fade(@white, 30%);
+@input-icon-color: fade(@white, 30%);
+@input-number-handler-active-bg: @item-hover-bg;
+@input-icon-hover-color: fade(@white, 85%);
+
+// Select
+// ---
+@select-background: transparent;
+@select-dropdown-bg: @popover-background;
+@select-clear-background: @component-background;
+@select-selection-item-bg: fade(@white, 8);
+@select-selection-item-border-color: @border-color-split;
+@select-multiple-disabled-background: @component-background;
+@select-multiple-item-disabled-color: #595959;
+@select-multiple-item-disabled-border-color: @popover-background;
+
+// Cascader
+// ---
+@cascader-bg: transparent;
+@cascader-menu-bg: @popover-background;
+@cascader-menu-border-color-split: @border-color-split;
+
+// Tooltip
+// ---
+// Tooltip background color
+@tooltip-bg: #434343;
+
+// Menu
+// ---
+// dark theme
+@menu-dark-inline-submenu-bg: @component-background;
+@menu-dark-bg: @popover-background;
+@menu-popup-bg: @popover-background;
+
+// Message
+// ---
+@message-notice-content-bg: @popover-background;
+
+// Notification
+@notification-bg: @popover-background;
+
+// LINK
+@link-hover-color: @primary-5;
+@link-active-color: @primary-7;
+
+// Table
+// --
+@table-header-bg: #1d1d1d;
+@table-body-sort-bg: fade(@white, 1%);
+@table-row-hover-bg: #262626;
+@table-header-cell-split-color: fade(@white, 8%);
+@table-header-sort-bg: #262626;
+@table-header-filter-active-bg: #434343;
+@table-header-sort-active-bg: #303030;
+@table-fixed-header-sort-active-bg: #222;
+@table-filter-btns-bg: @popover-background;
+@table-expanded-row-bg: @table-header-bg;
+@table-filter-dropdown-bg: @popover-background;
+@table-expand-icon-bg: transparent;
+
+// Tag
+// ---
+@info-color-deprecated-bg: @primary-1;
+@info-color-deprecated-border: @primary-3;
+@success-color-deprecated-bg: @green-1;
+@success-color-deprecated-border: @green-3;
+@warning-color-deprecated-bg: @orange-1;
+@warning-color-deprecated-border: @orange-3;
+@error-color-deprecated-bg: @red-1;
+@error-color-deprecated-border: @red-3;
+
+// TimePicker
+// ---
+@picker-basic-cell-hover-with-range-color: darken(@primary-color, 35%);
+@picker-basic-cell-disabled-bg: #303030;
+@picker-border-color: @border-color-split;
+@picker-bg: transparent;
+@picker-date-hover-range-border-color: darken(@primary-color, 20%);
+
+// Dropdown
+// ---
+@dropdown-menu-bg: @popover-background;
+@dropdown-menu-submenu-disabled-bg: transparent;
+
+// Steps
+// ---
+@steps-nav-arrow-color: fade(@white, 20%);
+@steps-background: transparent;
+
+// Avatar
+// ---
+@avatar-bg: fade(@white, 30%);
+
+// Progress
+// ---
+@progress-steps-item-bg: fade(@white, 8%);
+
+// Calendar
+// ---
+@calendar-bg: @popover-background;
+@calendar-input-bg: @calendar-bg;
+@calendar-border-color: transparent;
+@calendar-full-bg: @component-background;
+
+// Badge
+// ---
+@badge-text-color: @white;
+
+// Popover
+@popover-bg: @popover-background;
+
+// Drawer
+@drawer-bg: @popover-background;
+
+// Card
+// ---
+@card-actions-background: @component-background;
+@card-skeleton-bg: #303030;
+@card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.64), 0 3px 6px 0 rgba(0, 0, 0, 0.48),
+  0 5px 12px 4px rgba(0, 0, 0, 0.36);
+
+// Transfer
+// ---
+@transfer-item-hover-bg: #262626;
+
+// Comment
+// ---
+@comment-bg: transparent;
+@comment-author-time-color: fade(@white, 30%);
+@comment-action-hover-color: fade(@white, 65%);
+
+// Rate
+// ---
+@rate-star-bg: fade(@white, 12%);
+
+// Switch
+// ---
+@switch-bg: @white;
+
+// Pagination
+// ---
+@pagination-item-bg: transparent;
+@pagination-item-bg-active: transparent;
+@pagination-item-link-bg: transparent;
+@pagination-item-disabled-bg-active: fade(@white, 25%);
+@pagination-item-disabled-color-active: @black;
+@pagination-item-input-bg: @pagination-item-bg;
+
+// PageHeader
+// ---
+@page-header-back-color: @icon-color;
+@page-header-ghost-bg: transparent;
+
+// Slider
+// ---
+@slider-rail-background-color: #262626;
+@slider-rail-background-color-hover: @border-color-base;
+@slider-dot-border-color: @border-color-split;
+@slider-dot-border-color-active: @primary-4;
+
+// Skeleton
+// ---
+@skeleton-to-color: fade(@white, 16%);
+
+// Alert
+// ---
+@alert-success-border-color: @green-3;
+@alert-success-bg-color: @green-1;
+@alert-success-icon-color: @success-color;
+@alert-info-border-color: @primary-3;
+@alert-info-bg-color: @primary-1;
+@alert-info-icon-color: @info-color;
+@alert-warning-border-color: @gold-3;
+@alert-warning-bg-color: @gold-1;
+@alert-warning-icon-color: @warning-color;
+@alert-error-border-color: @red-3;
+@alert-error-bg-color: @red-1;
+@alert-error-icon-color: @error-color;
+
+// Timeline
+// ---
+@timeline-color: @border-color-split;
+@timeline-dot-color: @primary-color;
+
+// Mentions
+// ---
+@mentions-dropdown-bg: @popover-background;