@jetlinks-web/components 3.3.12 → 3.3.13

package/lib/ProLayout/SiderMenu/style.js

@@ -8,10 +8,19 @@ exports.genSiderMenuStyle = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _antDesignVue = require("ant-design-vue");
 var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(config) {
-  var _$concat9;
+  var _$concat0;
   var token = config.token;
   var proLayoutSiderMenuCls = "".concat(token.antCls, "-pro-sider");
   var proLayoutHeaderHeight = '48px';
+  var isAntdvDarkTheme = ['#000', '#000000'].includes(String(token.colorBgLayout).toLowerCase());
+  var darkMenuBg = isAntdvDarkTheme ? token.colorBgLayout : '#001529';
+  var darkMenuSubBg = isAntdvDarkTheme ? token.colorBgContainer : '#000c17';
+  var darkMenuPopupBg = isAntdvDarkTheme ? token.colorBgElevated : '#001529';
+  var darkMenuHoverBg = isAntdvDarkTheme ? token.colorFillTertiary : 'rgba(255, 255, 255, 0.08)';
+  var darkMenuActiveBg = isAntdvDarkTheme ? token.colorFillSecondary : 'rgba(255, 255, 255, 0.12)';
+  var darkMenuTextColor = isAntdvDarkTheme ? token.colorText : 'rgba(255, 255, 255, 0.85)';
+  var darkMenuTextSecondaryColor = isAntdvDarkTheme ? token.colorTextSecondary : 'rgba(255, 255, 255, 0.65)';
+  var darkMenuTextHoverColor = isAntdvDarkTheme ? token.colorTextHeading : '#fff';
   var proLayoutTitleHideKeyframes = new _antDesignVue.Keyframes('pro-layout-title-hide', {
     '0%': {
       display: 'none',
@@ -26,14 +35,46 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
       opacity: 1
     }
   });
-  return ["\n      ".concat(proLayoutSiderMenuCls, " > ").concat(token.antCls, "-layout-sider-children {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n    "), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(proLayoutSiderMenuCls), (_$concat9 = {
+  return ["\n      ".concat(proLayoutSiderMenuCls, " > ").concat(token.antCls, "-layout-sider-children {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n    "), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(proLayoutSiderMenuCls), (_$concat0 = {
     position: 'relative',
-    backgroundColor: '#001529',
+    background: darkMenuBg,
     borderRight: 0,
     // FIXME: 临时修正(可能不会做兼容)
     zIndex: 20
-  }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat9, "".concat(token.antCls, "-menu"), {
+  }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat0, "".concat(token.antCls, "-menu"), {
     background: 'transparent'
+  }), "&".concat(proLayoutSiderMenuCls, "-dark, &").concat(token.antCls, "-layout-sider-dark"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
+    background: darkMenuBg
+  }, "".concat(token.antCls, "-layout-sider-children"), {
+    background: darkMenuBg
+  }), "".concat(token.antCls, "-menu-dark"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+    color: darkMenuTextColor,
+    background: 'transparent'
+  }, "".concat(token.antCls, "-menu-sub"), {
+    background: darkMenuSubBg
+  }), "".concat(token.antCls, "-menu-item, ").concat(token.antCls, "-menu-submenu-title"), {
+    color: darkMenuTextColor
+  }), "".concat(token.antCls, "-menu-item a, ").concat(token.antCls, "-menu-submenu-title a"), {
+    color: 'inherit'
+  }), "".concat(token.antCls, "-menu-item .anticon, ").concat(token.antCls, "-menu-submenu-title .anticon, ").concat(token.antCls, "-menu-submenu-arrow"), {
+    color: darkMenuTextSecondaryColor
+  }), "".concat(token.antCls, "-menu-item:hover, ").concat(token.antCls, "-menu-submenu-title:hover"), {
+    color: darkMenuTextHoverColor,
+    backgroundColor: darkMenuHoverBg
+  }), "".concat(token.antCls, "-menu-item:hover .anticon, ").concat(token.antCls, "-menu-submenu-title:hover .anticon, ").concat(token.antCls, "-menu-submenu-title:hover ").concat(token.antCls, "-menu-submenu-arrow"), {
+    color: darkMenuTextHoverColor
+  }), "".concat(token.antCls, "-menu-submenu-open > ").concat(token.antCls, "-menu-submenu-title"), {
+    color: darkMenuTextHoverColor,
+    backgroundColor: darkMenuActiveBg
+  }), "".concat(token.antCls, "-menu-item-selected"), {
+    color: token.colorTextLightSolid,
+    backgroundColor: token.colorPrimary
+  }), "".concat(token.antCls, "-menu-item-selected a, ").concat(token.antCls, "-menu-item-selected .anticon"), {
+    color: token.colorTextLightSolid
+  }))), "&".concat(proLayoutSiderMenuCls, "-dark").concat(token.antCls, "-layout-sider-dark"), {
+    background: darkMenuBg
+  }), "&".concat(proLayoutSiderMenuCls, "-dark ").concat(token.antCls, "-menu-dark").concat(token.antCls, "-menu-inline ").concat(token.antCls, "-menu-sub").concat(token.antCls, "-menu-inline"), {
+    background: darkMenuSubBg
   }), "&".concat(token.antCls, "-layout-sider-light"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu-item a"), {
     color: token.colorTextHeading
   }), "".concat(token.antCls, "-menu-item-selected a, ").concat(token.antCls, "-menu-item a:hover"), {
@@ -51,12 +92,12 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
       justifyContent: 'center',
       minHeight: 32
     },
-    'img': {
+    img: {
       display: 'inline-block',
       height: 32,
       verticalAlign: 'middle'
     },
-    'h1': {
+    h1: {
       display: 'inline-block',
       height: '32px',
       margin: '0 0 0 12px',
@@ -89,7 +130,7 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
       width: '6px',
       height: '6px'
     },
-    '::webkit-scrollbar-track': {
+    '::-webkit-scrollbar-track': {
       background: 'rgba(255, 255, 255, 0.15)',
       borderRadius: '3px',
       boxShadow: 'inset 0 0 5px rgba(37, 37, 37, 0.05)'
@@ -102,9 +143,24 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
     }
   }, "".concat(proLayoutSiderMenuCls, "-logo"), {
     h1: {
-      color: '#333'
+      color: darkMenuTextHoverColor
+    }
+  })), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat0, "".concat(proLayoutSiderMenuCls, "-body"), {
+    scrollbarWidth: 'thin',
+    scrollbarColor: 'rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.15)',
+    '::-webkit-scrollbar': {
+      width: '6px',
+      height: '6px'
+    },
+    '::-webkit-scrollbar-track': {
+      background: 'rgba(255, 255, 255, 0.15)',
+      borderRadius: '3px'
+    },
+    '::-webkit-scrollbar-thumb': {
+      background: 'rgba(255, 255, 255, 0.2)',
+      borderRadius: '3px'
     }
-  })), "&".concat(token.antCls, "-layout-sider-collapsed"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu-inline-collapsed"), {
+  }), "&".concat(token.antCls, "-layout-sider-collapsed"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu-inline-collapsed"), {
     width: '48px'
   }), "".concat(proLayoutSiderMenuCls), (0, _defineProperty2.default)({}, "".concat(proLayoutSiderMenuCls, "-logo"), {
     padding: '16px 24px'
@@ -120,30 +176,37 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
   }, "> ".concat(token.antCls, "-menu-root"), (0, _defineProperty2.default)({}, ":not".concat(proLayoutSiderMenuCls, "-link-menu"), {
     height: "calc(100vh - ".concat(proLayoutHeaderHeight, ")"),
     overflowY: 'auto'
-  }))), "&".concat(proLayoutSiderMenuCls, "-light"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+  }))), "&".concat(proLayoutSiderMenuCls, "-light"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
     backgroundColor: token.colorBgContainer,
     boxShadow: '2px 0 8px 0 rgba(29, 35, 41, 0.05)'
   }, "".concat(token.antCls, "-layout-sider-children"), {
-    '::webkit-scrollbar-track': {
+    '::-webkit-scrollbar-track': {
       background: 'rgba(0, 0, 0, 0.06)',
       borderRadius: '3px',
-      boxShadow: 'inset 0 0 5px rgba(0, 21, 41, 0.05)',
-      /* 滚动条滑块 */
-      '::-webkit-scrollbar-thumb': {
-        background: 'rgba(0, 0, 0, 0.12)',
-        borderRadius: '3px',
-        boxShadow: 'inset 0 0 5px rgba(0, 21, 41, 0.05)'
-      }
+      boxShadow: 'inset 0 0 5px rgba(0, 21, 41, 0.05)'
+    },
+    '::-webkit-scrollbar-thumb': {
+      background: 'rgba(0, 0, 0, 0.12)',
+      borderRadius: '3px',
+      boxShadow: 'inset 0 0 5px rgba(0, 21, 41, 0.05)'
+    }
+  }), "".concat(proLayoutSiderMenuCls, "-body"), {
+    scrollbarColor: 'rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.06)',
+    '::-webkit-scrollbar-track': {
+      background: 'rgba(0, 0, 0, 0.06)'
+    },
+    '::-webkit-scrollbar-thumb': {
+      background: 'rgba(0, 0, 0, 0.12)'
     }
   }), "".concat(proLayoutSiderMenuCls, "-logo"), {
-    'h1': {
+    h1: {
       color: token.colorPrimary
     }
   }), "".concat(token.antCls, "-menu-light"), {
     borderRightColor: 'transparent'
   }), "".concat(proLayoutSiderMenuCls, "-collapsed-button"), {
     borderTop: "".concat(token.lineWidth, " solid ").concat(token.colorSplit)
-  })), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat9, "".concat(proLayoutSiderMenuCls, "-icon"), {
+  })), "".concat(proLayoutSiderMenuCls, "-icon"), {
     width: '14px',
     verticalAlign: 'baseline'
   }), "".concat(proLayoutSiderMenuCls, "-links"), (0, _defineProperty2.default)({
@@ -159,19 +222,35 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
     height: '100%',
     lineHeight: 1
   }), '.drawer .drawer-content', {
-    background: "#001529"
-  }))), "".concat(token.antCls, "-pro-menu-item"), (0, _defineProperty2.default)({}, ".anticon".concat(token.antCls, "-pro-menu-item-title"), {
+    background: darkMenuBg
+  }))), "".concat(token.antCls, "-pro-menu-popup"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu, ").concat(token.antCls, "-menu-dark"), {
+    background: darkMenuPopupBg,
+    color: darkMenuTextColor
+  }), "".concat(token.antCls, "-menu-item, ").concat(token.antCls, "-menu-submenu-title"), {
+    color: darkMenuTextColor
+  }), "".concat(token.antCls, "-menu-item a"), {
+    color: 'inherit'
+  }), "".concat(token.antCls, "-menu-item:hover, ").concat(token.antCls, "-menu-submenu-title:hover"), {
+    color: darkMenuTextHoverColor,
+    backgroundColor: darkMenuHoverBg
+  }), "".concat(token.antCls, "-menu-item-selected"), {
+    color: token.colorTextLightSolid,
+    backgroundColor: token.colorPrimary
+  })), "".concat(token.antCls, "-menu-submenu-popup").concat(token.antCls, "-menu-dark").concat(token.antCls, "-pro-menu-popup ").concat(token.antCls, "-menu"), {
+    background: darkMenuPopupBg,
+    color: darkMenuTextColor
+  }), "".concat(token.antCls, "-pro-menu-item"), (0, _defineProperty2.default)({}, ".anticon".concat(token.antCls, "-pro-menu-item-title"), {
     marginLeft: '10px'
   })), '.sider-app-menus', {
     width: '100px',
-    backgroundColor: '#fff',
+    backgroundColor: token.colorBgContainer,
     cursor: 'pointer',
     padding: '6px',
     transition: 'all .3s',
     borderRadius: '4px',
-    color: '#333',
+    color: token.colorText,
     '&:hover': {
-      backgroundColor: '#efefef'
+      backgroundColor: token.colorFillQuaternary
     }
   })];
 };

package/lib/ProLayout/TopHeader/style.js

@@ -10,6 +10,13 @@ var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(c
   var token = config.token;
   var topNavHeaderCls = "".concat(token.antCls, "-pro-top-nav-header");
   var proLayoutGlobalHeaderCls = "".concat(token.antCls, "-pro-global-header");
+  var isAntdvDarkTheme = ['#000', '#000000'].includes(String(token.colorBgLayout).toLowerCase());
+  var darkHeaderBg = isAntdvDarkTheme ? token.colorBgLayout : '#001529';
+  var darkHeaderPopupBg = isAntdvDarkTheme ? token.colorBgElevated : '#001529';
+  var darkHeaderHoverBg = isAntdvDarkTheme ? token.colorFillTertiary : 'rgba(255, 255, 255, 0.08)';
+  var darkHeaderTextColor = isAntdvDarkTheme ? token.colorText : 'rgba(255, 255, 255, 0.85)';
+  var darkHeaderTextSecondaryColor = isAntdvDarkTheme ? token.colorTextSecondary : 'rgba(255, 255, 255, 0.65)';
+  var darkHeaderTextHoverColor = isAntdvDarkTheme ? token.colorTextHeading : '#fff';
   var proLayoutHeaderBg = token.colorBgContainer;
   var proLayoutHeaderHoverBg = token.colorBgContainer;
   var proLayoutHeaderBoxShadow = '0 1px 4px rgba(0, 21, 41, 0.08)';
@@ -30,13 +37,13 @@ var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(c
     marginLeft: '16px',
     fontSize: '20px'
   }), "".concat(proLayoutGlobalHeaderCls, "-layout"), (0, _defineProperty2.default)({}, "".concat(proLayoutGlobalHeaderCls, "-layout-mix"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
-    backgroundColor: '#001529'
+    backgroundColor: darkHeaderBg
   }, "".concat(proLayoutGlobalHeaderCls, "-logo"), {
-    'h1': {
-      color: '#fff'
+    h1: {
+      color: darkHeaderTextHoverColor
     }
   }), '.anticon', {
-    color: '#fff'
+    color: darkHeaderTextHoverColor
   }))), "".concat(proLayoutGlobalHeaderCls, "-logo"), {
     position: 'relative',
     overflow: 'hidden',
@@ -65,17 +72,17 @@ var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(c
   })), '.dark', {
     height: '48px',
     '.action': (0, _defineProperty2.default)({
-      color: 'rgba(255, 255, 255, 0.85)',
+      color: darkHeaderTextColor,
       '> i': {
-        color: 'rgba(255, 255, 255, 0.85)'
+        color: darkHeaderTextColor
       },
       '&:hover,&.opend': {
         background: token.colorPrimary
       }
     }, "".concat(token.antCls, "-badge"), {
-      color: 'rgba(255, 255, 255, 0.85)'
+      color: darkHeaderTextColor
     })
-  })), topNavHeaderCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+  })), topNavHeaderCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
     position: 'relative',
     width: '100%',
     height: '100%',
@@ -83,7 +90,31 @@ var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(c
     transition: 'background 0.3s, width 0.2s'
   }, "".concat(token.antCls, "-menu"), {
     backgroundColor: 'transparent'
-  }), '&.light', (0, _defineProperty2.default)((0, _defineProperty2.default)({
+  }), '&.dark', (0, _defineProperty2.default)((0, _defineProperty2.default)({
+    backgroundColor: darkHeaderBg,
+    color: darkHeaderTextColor
+  }, "".concat(topNavHeaderCls, "-logo"), {
+    h1: {
+      color: token.colorPrimary
+    }
+  }), "".concat(token.antCls, "-menu-dark"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+    color: darkHeaderTextColor,
+    backgroundColor: 'transparent'
+  }, "".concat(token.antCls, "-menu-item, ").concat(token.antCls, "-menu-submenu-title"), {
+    color: darkHeaderTextColor
+  }), "".concat(token.antCls, "-menu-item a"), {
+    color: 'inherit'
+  }), "".concat(token.antCls, "-menu-item .anticon, ").concat(token.antCls, "-menu-submenu-title .anticon, ").concat(token.antCls, "-menu-submenu-arrow"), {
+    color: darkHeaderTextSecondaryColor
+  }), "".concat(token.antCls, "-menu-item:hover, ").concat(token.antCls, "-menu-submenu-title:hover"), {
+    color: darkHeaderTextHoverColor,
+    backgroundColor: darkHeaderHoverBg
+  }), "".concat(token.antCls, "-menu-item-selected"), {
+    color: token.colorTextLightSolid,
+    backgroundColor: token.colorPrimary
+  }), "".concat(token.antCls, "-menu-item-selected a, ").concat(token.antCls, "-menu-item-selected .anticon"), {
+    color: token.colorTextLightSolid
+  }))), '&.light', (0, _defineProperty2.default)((0, _defineProperty2.default)({
     backgroundColor: token.colorBgContainer
   }, "".concat(topNavHeaderCls, "-logo"), {
     h1: {
@@ -103,7 +134,7 @@ var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(c
     alignItems: 'center',
     marginInlineEnd: '16px'
   })), '.anticon', {
-    color: '#fff'
+    color: darkHeaderTextColor
   }), "".concat(topNavHeaderCls, "-logo"), {
     position: 'relative',
     minWidth: '165px',
@@ -131,7 +162,20 @@ var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(c
     height: '100%'
   }, "".concat(token.antCls, "-badge"), {
     color: 'unset'
-  }))))), "".concat(token.antCls, "-pro-menu-popup"), (0, _defineProperty2.default)({}, "".concat(token.antCls, "-badge"), {
+  }))))), "".concat(token.antCls, "-pro-menu-popup"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu, ").concat(token.antCls, "-menu-dark"), {
+    background: darkHeaderPopupBg,
+    color: darkHeaderTextColor
+  }), "".concat(token.antCls, "-menu-item, ").concat(token.antCls, "-menu-submenu-title"), {
+    color: darkHeaderTextColor
+  }), "".concat(token.antCls, "-menu-item a"), {
+    color: 'inherit'
+  }), "".concat(token.antCls, "-menu-item:hover, ").concat(token.antCls, "-menu-submenu-title:hover"), {
+    color: darkHeaderTextHoverColor,
+    backgroundColor: darkHeaderHoverBg
+  }), "".concat(token.antCls, "-menu-item-selected"), {
+    color: token.colorTextLightSolid,
+    backgroundColor: token.colorPrimary
+  }), "".concat(token.antCls, "-badge"), {
     color: 'unset'
   }));
 };

package/lib/ProTable/ProTable.js

@@ -315,12 +315,10 @@ const __sfc_main__ = _defineComponent({
         }, { deep: true, immediate: true });
         onMounted(() => {
             windowChange(); // 初始化
-            window.onresize = () => {
-                windowChange();
-            };
+            window.addEventListener('resize', windowChange);
         });
         onUnmounted(() => {
-            window.onresize = null;
+            window.removeEventListener('resize', windowChange);
         });
         __expose({ reload, dataSource: _dataSource });
         return (_ctx, _cache) => {

package/lib/ProTable/style/index.js

@@ -6,14 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _styleRegister = _interopRequireDefault(require("../../style/styleRegister"));
+var _scrollbar = require("../../style/scrollbar");
 var genProTableStyle = function genProTableStyle(config) {
   var token = config.token;
   return {
     '.jtable-body-spin': {
       height: '100%',
       width: '100%',
-      backgroundColor: '#fff',
+      backgroundColor: token.colorBgContainer,
       '.ant-spin-nested-loading': {
         height: '100%',
         '.ant-spin-container': {
@@ -47,7 +49,7 @@ var genProTableStyle = function genProTableStyle(config) {
           width: '62px',
           '.right-button-icon': {
             fontSize: '16px',
-            color: '#d9d9d9'
+            color: token.colorTextDisabled
           },
           '.ant-radio-button-wrapper': {
             padding: '0 8px'
@@ -61,9 +63,10 @@ var genProTableStyle = function genProTableStyle(config) {
     '.jtable-box': {
       flex: 1,
       minHeight: 0,
-      '.jtable-card': (0, _defineProperty2.default)({
+      '.jtable-card': (0, _objectSpread3.default)((0, _objectSpread3.default)({
         height: '100%',
-        overflowY: 'auto',
+        overflowY: 'auto'
+      }, (0, _scrollbar.genTokenScrollbarStyle)(token)), {}, (0, _defineProperty2.default)({
         '.jtable-card-items': {
           display: 'grid',
           gridGap: '18px',
@@ -74,7 +77,7 @@ var genProTableStyle = function genProTableStyle(config) {
         }
       }, "j-table-empty", {
         marginTop: '100px'
-      }),
+      })),
       '.ant-table-wrapper': {
         height: '100%',
         '.ant-table': {
@@ -92,11 +95,11 @@ var genProTableStyle = function genProTableStyle(config) {
           display: 'flex',
           flexDirection: 'column'
         },
-        '.ant-table-body': {
+        '.ant-table-body': (0, _objectSpread3.default)({
           flex: 1,
           minHeight: 0,
           overflowY: 'auto'
-        }
+        }, (0, _scrollbar.genTokenScrollbarStyle)(token))
       }
     },
     '.jtable-alert': {

package/lib/RadioButton/style/index.js

@@ -17,10 +17,11 @@ var genRadioButtonStyle = function genRadioButtonStyle(config) {
         textAlign: 'center',
         height: '100%',
         borderRadius: '2px',
-        backgroundColor: '#f5f5f5',
+        backgroundColor: token.colorFillTertiary,
+        color: token.colorText,
         cursor: 'pointer',
         '&.active': {
-          color: '#fff',
+          color: token.colorTextLightSolid,
           backgroundColor: token.colorPrimary
         }
       }

package/lib/Scrollbar/style/index.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _styleRegister = _interopRequireDefault(require("../../style/styleRegister"));
-var scrollbarBgColor = '#909399';
-var scrollbarHoverBgColor = '#909399';
+var _scrollbar = require("../../style/scrollbar");
 var scrollbarHoverOpacity = 0.5;
 var scrollbarOpacity = 0.3;
 var transitionDuration = '0.3s';
@@ -19,27 +19,27 @@ var genScrollbarStyle = function genScrollbarStyle(config) {
     overflow: 'hidden',
     position: 'relative',
     height: '100%'
-  }, "".concat(componentCls, "__wrap"), (0, _defineProperty2.default)({
+  }, "".concat(componentCls, "__wrap"), (0, _objectSpread3.default)((0, _objectSpread3.default)({
     overflow: 'auto',
     height: '100%'
-  }, "".concat(componentCls, "--hidden-default"), {
+  }, (0, _scrollbar.genTokenScrollbarStyle)(token)), {}, (0, _defineProperty2.default)({}, "".concat(componentCls, "--hidden-default"), {
     scrollbarWidth: 'none',
     '&::-webkit-scrollbar': {
       display: 'none'
     }
-  })), "".concat(componentCls, "__thumb"), {
+  }))), "".concat(componentCls, "__thumb"), {
     position: 'relative',
     display: 'block',
     width: 0,
     height: 0,
     cursor: 'pointer',
     borderRadius: 'inherit',
-    backgroundColor: scrollbarBgColor,
+    backgroundColor: token.colorFillSecondary,
     transition: "".concat(transitionDuration, " background-color"),
     opacity: scrollbarOpacity,
     '&:hover': {
-      backgroundColor: scrollbarHoverBgColor,
-      opacity: scrollbarOpacity
+      backgroundColor: token.colorFill,
+      opacity: scrollbarHoverOpacity
     }
   }), "".concat(componentCls, "__bar"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
     position: 'absolute',

package/lib/Search/style/search.js

@@ -11,7 +11,7 @@ var genSearchStyle = exports.genSearchStyle = function genSearchStyle(config) {
     token = config.token;
   return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(componentCls, "-warp"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
     padding: '24px',
-    backgroundColor: '#fff',
+    backgroundColor: token.colorBgContainer,
     marginBottom: '24px',
     '.pack-up': (0, _defineProperty2.default)({}, "".concat(componentCls, "-items"), {
       flex: '1 1 auto',
@@ -88,7 +88,7 @@ var genSearchStyle = exports.genSearchStyle = function genSearchStyle(config) {
     }))
   }), '.no-radius', {
     borderRadius: 0,
-    borderColor: '#f1f1f1'
+    borderColor: token.colorBorderSecondary
   }), '.search-history-warp', {
     position: 'relative',
     '.search-history-button': {
@@ -100,7 +100,7 @@ var genSearchStyle = exports.genSearchStyle = function genSearchStyle(config) {
       height: '18px',
       right: '6px',
       top: '8px',
-      color: '#fff',
+      color: token.colorTextLightSolid,
       lineHeight: '18px',
       textAlign: 'center',
       fontWeight: 'bold',
@@ -110,7 +110,7 @@ var genSearchStyle = exports.genSearchStyle = function genSearchStyle(config) {
     }
   })), '.search-history-empty', {
     padding: '12px 12px 6px 12px',
-    backgroundColor: '#fff'
+    backgroundColor: token.colorBgElevated
   }), '.search-history-items', {
     width: '120px',
     maxHeight: '300px',
@@ -121,7 +121,7 @@ var genSearchStyle = exports.genSearchStyle = function genSearchStyle(config) {
       alignItems: 'center',
       gap: '4px',
       '&:hover': {
-        backgroundColor: '#f1f1f1'
+        backgroundColor: token.colorFillTertiary
       },
       '.history-item--title': {
         width: 'calc(100% - 30px)',

package/lib/Skeleton/components/Page.js

@@ -4,12 +4,17 @@
   "loading": "props",
   "List": "setup-const",
   "Detail": "setup-const",
-  "props": "setup-reactive-const"
+  "computed": "setup-const",
+  "theme": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "token": "setup-maybe-ref",
+  "pageStyle": "setup-ref"
 } */
-import { renderSlot as _renderSlot, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = { style: { "padding": "24px", "background-color": "#ffffff", "height": "100%" } };
+import { renderSlot as _renderSlot, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, createElementBlock as _createElementBlock } from "vue";
 import List from "./List.js";
 import Detail from "./Detail.js";
+import { computed } from "vue";
+import { theme } from "ant-design-vue";
 const __sfc_main__ = Object.assign({
     name: 'JSkeletonPage'
 }, {
@@ -29,8 +34,16 @@ const __sfc_main__ = Object.assign({
     },
     setup(__props) {
         const props = __props;
+        const { token } = theme.useToken();
+        const pageStyle = computed(() => ({
+            padding: '24px',
+            backgroundColor: token.value.colorBgContainer,
+            height: '100%',
+        }));
         return (_ctx, _cache) => {
-            return (_openBlock(), _createElementBlock("div", _hoisted_1, [
+            return (_openBlock(), _createElementBlock("div", {
+                style: _normalizeStyle(pageStyle.value)
+            }, [
                 (__props.type === 'list')
                     ? (_openBlock(), _createBlock(List, {
                         key: 0,
@@ -55,7 +68,7 @@ const __sfc_main__ = Object.assign({
                         _: 3 /* FORWARDED */
                     }, 8 /* PROPS */, ["loading"]))
                     : _renderSlot(_ctx.$slots, "default", { key: 2 })
-            ]));
+            ], 4 /* STYLE */));
         };
     }
 });

package/lib/Skeleton/style/index.js

@@ -13,9 +13,6 @@ var JSkeletonSizeLg = '36px';
 var JSkeletonSizeSm = '16px';
 var JSkeletonSize = '24px';
 var JSkeletonBorderRadius = '8px';
-var JSkeletonBg = '#f0f2f5';
-var JSkeletonBg1 = '#e6e8eb';
-var JSkeletonBorder = "4px solid ".concat(JSkeletonBg);
 var JSkeletonFlex = {
   display: 'flex',
   gap: '24px',
@@ -34,6 +31,10 @@ var genSkeletonStyle = function genSkeletonStyle(config) {
   var _$concat6;
   var componentCls = config.componentCls,
     token = config.token;
+  var JSkeletonBg = token.colorFillQuaternary;
+  var JSkeletonBg1 = token.colorFillSecondary;
+  var JSkeletonBorder = "".concat(token.lineWidth * 4, "px solid ").concat(JSkeletonBg);
+  var JSkeletonCardBorder = "".concat(token.lineWidth * 2, "px solid ").concat(token.colorBorderSecondary);
   return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(componentCls, "-flex"), JSkeletonFlex), "".concat(componentCls, "-flex-between"), (0, _objectSpread2.default)((0, _objectSpread2.default)({}, JSkeletonFlex), {}, {
     background: JSkeletonBg,
     height: JSkeletonSize,
@@ -41,7 +42,12 @@ var genSkeletonStyle = function genSkeletonStyle(config) {
   })), "".concat(componentCls, "-flex-column"), (0, _objectSpread2.default)((0, _objectSpread2.default)({}, JSkeletonFlex), {}, {
     justifyContent: 'space-between'
   })), "".concat(componentCls), (_$concat6 = {
-    height: '100%'
+    height: '100%',
+    '--j-skeleton-bg': JSkeletonBg,
+    '--j-skeleton-bg-active': JSkeletonBg1,
+    '--j-skeleton-border': JSkeletonBorder,
+    '--j-skeleton-card-border': JSkeletonCardBorder,
+    '--j-skeleton-table-header-bg': token.colorFillTertiary
   }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat6, "".concat(componentCls, "-item"), {
     background: "linear-gradient(90deg, ".concat(JSkeletonBg, " 25%, ").concat(JSkeletonBg1, " 50%, ").concat(JSkeletonBg, " 75%)"),
     backgroundSize: '400% 100%',
@@ -90,7 +96,7 @@ var genSkeletonStyle = function genSkeletonStyle(config) {
     padding: '12px 6px',
     borderRadius: '8px'
   }), "".concat(componentCls, "-table-header"), {
-    backgroundColor: 'lightgrey'
+    backgroundColor: token.colorFillTertiary
   }), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat6, "".concat(componentCls, "-table-action"), {
     width: '200px',
     display: 'grid',
@@ -103,7 +109,7 @@ var genSkeletonStyle = function genSkeletonStyle(config) {
   }), "".concat(componentCls, "-card"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(componentCls, "-card-content"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
     display: 'flex',
     gap: '16px',
-    border: '2px solid #f0f2f5',
+    border: JSkeletonCardBorder,
     borderRadius: '8px',
     padding: '24px',
     marginBottom: '16px'

package/lib/Title/style/index.js

@@ -18,7 +18,7 @@ var genTitleStyle = function genTitleStyle(config) {
   }, "".concat(componentCls, "-content"), {
     position: 'relative',
     paddingLeft: '10px',
-    color: 'rgba(0, 0, 0, 0.8)',
+    color: token.colorTextHeading,
     fontWeight: 600,
     lineHeight: 1,
     '&::before': {
@@ -27,7 +27,7 @@ var genTitleStyle = function genTitleStyle(config) {
       left: 0,
       width: 4,
       height: '100%',
-      background: '#1890ff',
+      background: token.colorPrimary,
       borderRadius: '0 3px 3px 0',
       content: '""'
     }