antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.bc248f5c7

package/cjs/components/toast/methods.js

@@ -7,100 +7,59 @@ exports.clear = clear;
 exports.config = config;
 exports.show = show;
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _getContainer = require("../../utils/get-container");
+var _react = _interopRequireDefault(require("react"));
 
 var _toast = require("./toast");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
-var _render = require("../../utils/render");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _renderImperatively = require("../../utils/render-imperatively");
 
-const containers = [];
-
-function unmount(container) {
-  const unmountResult = (0, _render.unmount)(container);
-
-  if (unmountResult && container.parentNode) {
-    container.parentNode.removeChild(container);
-  }
-}
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+let currentHandler = null;
+let currentTimeout = null;
 const defaultProps = {
   duration: 2000,
   position: 'center',
   maskClickable: true
 };
 
+const ToastInner = props => _react.default.createElement(_toast.InternalToast, Object.assign({}, props));
+
 function show(p) {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, typeof p === 'string' ? {
     content: p
   } : p);
-  let timer = 0;
-  const {
-    getContainer = () => document.body
-  } = props;
-  const container = document.createElement('div');
-  const bodyContainer = (0, _getContainer.resolveContainer)(getContainer);
-  bodyContainer.appendChild(container);
-  clear();
-  containers.push(container);
-  const TempToast = (0, _react.forwardRef)((_, ref) => {
-    const [visible, setVisible] = (0, _react.useState)(true);
-    (0, _react.useEffect)(() => {
-      return () => {
-        var _a;
-
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-      };
-    }, []);
-    (0, _react.useEffect)(() => {
-      if (props.duration === 0) {
-        return;
-      }
-
-      timer = window.setTimeout(() => {
-        setVisible(false);
-      }, props.duration);
-      return () => {
-        window.clearTimeout(timer);
-      };
-    }, []);
-    (0, _react.useImperativeHandle)(ref, () => ({
-      close: () => setVisible(false)
-    }));
-    return _react.default.createElement(_toast.InternalToast, Object.assign({}, props, {
-      getContainer: () => container,
-      visible: visible,
-      afterClose: () => {
-        unmount(container);
-      }
-    }));
-  });
-  const ref = (0, _react.createRef)();
-  (0, _render.render)(_react.default.createElement(TempToast, {
-    ref: ref
-  }), container);
-  return {
-    close: () => {
-      var _a;
-
-      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
+
+  const element = _react.default.createElement(ToastInner, Object.assign({}, props, {
+    onClose: () => {
+      currentHandler = null;
     }
-  };
+  }));
+
+  if (currentHandler) {
+    currentHandler.replace(element);
+  } else {
+    currentHandler = (0, _renderImperatively.renderImperatively)(element);
+  }
+
+  if (currentTimeout) {
+    window.clearTimeout(currentTimeout);
+  }
+
+  if (props.duration !== 0) {
+    currentTimeout = window.setTimeout(() => {
+      clear();
+    }, props.duration);
+  }
+
+  return currentHandler;
 }
 
 function clear() {
-  while (true) {
-    const container = containers.pop();
-    if (!container) break;
-    unmount(container);
-  }
+  currentHandler === null || currentHandler === void 0 ? void 0 : currentHandler.close();
+  currentHandler = null;
 }
 
 function config(val) {

package/cjs/components/toast/toast.css

@@ -13,7 +13,7 @@
   transform: translate(-50%, -50%);
   width: auto;
   min-width: 96px;
-  max-width: 70%;
+  max-width: 200px;
   max-height: 70%;
   overflow: auto;
   color: white;
@@ -21,7 +21,7 @@
   background-color: rgba(0, 0, 0, 0.7);
   border-radius: 8px;
   pointer-events: all;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.5;
   box-sizing: border-box;
 }

package/cjs/components/toast/toast.d.ts

@@ -1,9 +1,10 @@
 import React, { ReactNode } from 'react';
+import type { MaskProps } from '../mask';
 import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { GetContainer } from '../../utils/render-to-container';
 export interface ToastProps {
     afterClose?: () => void;
-    maskStyle?: React.CSSProperties;
+    maskStyle?: MaskProps['style'];
     maskClassName?: string;
     maskClickable?: boolean;
     content?: ReactNode;

package/cjs/components/toast/toast.js

@@ -44,10 +44,14 @@ const InternalToast = p => {
 
     switch (icon) {
       case 'success':
-        return _react.default.createElement(_antdMobileIcons.CheckOutline, null);
+        return _react.default.createElement(_antdMobileIcons.CheckOutline, {
+          className: `${classPrefix}-icon-success`
+        });
 
       case 'fail':
-        return _react.default.createElement(_antdMobileIcons.CloseOutline, null);
+        return _react.default.createElement(_antdMobileIcons.CloseOutline, {
+          className: `${classPrefix}-icon-fail`
+        });
 
       case 'loading':
         return _react.default.createElement(_spinLoading.default, {

package/cjs/components/toast/toast.patch.css

@@ -0,0 +1,11 @@
+.adm-toast-mask .adm-toast-main {
+  font-size: 15px;
+}
+.adm-toast-loading.adm-toast-loading {
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 8px;
+}
+.adm-toast-loading.adm-toast-loading .adm-spin-loading-fill {
+  stroke: #ffffff;
+}

package/cjs/components/tree-select/tree-select.css

@@ -13,7 +13,7 @@
 }
 .adm-tree-select-column:first-child,
 .adm-tree-select-multiple-column:first-child {
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 .adm-tree-select-column:nth-child(2),
 .adm-tree-select-multiple-column:nth-child(2) {

package/cjs/components/virtual-input/virtual-input.css

@@ -1,5 +1,5 @@
 .adm-virtual-input {
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
   --disabled-color: var(--adm-color-weak);
@@ -94,5 +94,5 @@
 }
 .adm-virtual-input-clear .antd-mobile-icon {
   display: block;
-  font-size: 14px;
+  font-size: var(--adm-font-size-6);
 }

package/cjs/components/virtual-input/virtual-input.d.ts

@@ -21,4 +21,8 @@ export declare const VirtualInput: React.ForwardRefExoticComponent<{
     keyboard?: React.ReactElement<NumberKeyboardProps, string | React.JSXElementConstructor<any>> | undefined;
     clearable?: boolean | undefined;
     onClear?: (() => void) | undefined;
-} & Pick<InputProps, "value" | "onChange" | "disabled" | "placeholder"> & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color"> & React.RefAttributes<VirtualInputRef>>;
+} & Pick<InputProps, "value" | "onChange" | "disabled" | "placeholder"> & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--color" | "--font-size" | "--placeholder-color" | "--text-align" | "--disabled-color" | "--caret-width" | "--caret-color", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<VirtualInputRef>>;

package/cjs/components/water-mark/water-mark.js

@@ -62,13 +62,14 @@ const WaterMark = p => {
         const img = new Image();
         img.crossOrigin = 'anonymous';
         img.referrerPolicy = 'no-referrer';
-        img.src = image;
 
         img.onload = () => {
           ctx.drawImage(img, -imageWidth * ratio / 2, -imageHeight * ratio / 2, imageWidth * ratio, imageHeight * ratio);
           ctx.restore();
           setBase64Url(canvas.toDataURL());
         };
+
+        img.src = image;
       } else if (content) {
         ctx.textBaseline = 'middle';
         ctx.textAlign = 'center'; // 文字绕中间旋转
@@ -83,7 +84,7 @@ const WaterMark = p => {
         setBase64Url(canvas.toDataURL());
       }
     } else {
-      throw new Error('当前环境不支持Canvas');
+      throw new Error('Canvas is not supported in the current environment');
     }
   }, [gapX, gapY, rotate, fontStyle, fontWeight, width, height, fontFamily, fontColor, image, content, fontSize]);
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {

package/cjs/global/css-vars-patch.css

@@ -0,0 +1,312 @@
+@supports not (color: var(--adm-color-text)) {
+  .adm-button {
+    color: #333333;
+    background-color: #ffffff;
+    font-size: 17px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #eeeeee;
+    border-radius: 4px;
+  }
+  .adm-button::before {
+    transform: translate(-1px, -1px);
+    border: 1px solid #000;
+    border-radius: 4px;
+  }
+  .adm-button-default.adm-button-fill-outline {
+    background-color: transparent;
+    border-color: #333333;
+  }
+  .adm-button-default.adm-button-fill-none {
+    background-color: transparent;
+    border-width: 0;
+  }
+  .adm-button:not(.adm-button-default) {
+    color: #ffffff;
+  }
+  .adm-button:not(.adm-button-default).adm-button-fill-outline {
+    background-color: transparent;
+  }
+  .adm-button:not(.adm-button-default).adm-button-fill-none {
+    background-color: transparent;
+    border-width: 0;
+  }
+  .adm-button-primary {
+    background-color: #1677ff;
+    border-color: #1677ff;
+  }
+  .adm-button-primary.adm-button-fill-outline,
+  .adm-button-primary.adm-button-fill-none {
+    color: #1677ff;
+  }
+  .adm-button-success {
+    background-color: #00b578;
+    border-color: #00b578;
+  }
+  .adm-button-success.adm-button-fill-outline,
+  .adm-button-success.adm-button-fill-none {
+    color: #00b578;
+  }
+  .adm-button-danger {
+    background-color: #00b578;
+    border-color: #00b578;
+  }
+  .adm-button-danger.adm-button-fill-outline,
+  .adm-button-danger.adm-button-fill-none {
+    color: #00b578;
+  }
+  .adm-button-warning {
+    background-color: #ff8f1f;
+    border-color: #ff8f1f;
+  }
+  .adm-button-warning.adm-button-fill-outline,
+  .adm-button-warning.adm-button-fill-none {
+    color: #ff8f1f;
+  }
+  .adm-button.adm-button-mini {
+    font-size: 13px;
+  }
+  .adm-button.adm-button-small {
+    padding-top: 3px;
+    padding-bottom: 3px;
+    font-size: 15px;
+  }
+  .adm-button.adm-button-large {
+    padding-top: 11px;
+    padding-bottom: 11px;
+    font-size: 18px;
+  }
+  .adm-button.adm-button-shape-rounded {
+    border-radius: 1000px;
+  }
+  .adm-button.adm-button-shape-rounded::before {
+    border-radius: 1000px;
+  }
+  .adm-button.adm-button-shape-rectangular {
+    border-radius: 0;
+  }
+  .adm-center-popup {
+    z-index: 1000;
+  }
+  .adm-center-popup-wrap {
+    min-width: 280px;
+    max-width: 75vw;
+  }
+  .adm-center-popup-body {
+    background-color: #ffffff;
+    border-radius: 8px;
+  }
+  .adm-error-block-image {
+    height: 100px;
+    width: auto;
+  }
+  .adm-error-block-description {
+    font-size: var(--adm-font-size-4);
+  }
+  .adm-error-block-description-title {
+    font-size: var(--adm-font-size-7);
+  }
+  .adm-error-block-full-page {
+    padding-top: calc(50vh - 200px);
+  }
+  .adm-error-block-full-page .adm-error-block-image {
+    height: 200px;
+    width: auto;
+  }
+  .adm-error-block-full-page .adm-error-block-description {
+    font-size: var(--adm-font-size-main);
+  }
+  .adm-error-block-full-page .adm-error-block-description-title {
+    color: #333333;
+  }
+  .adm-image {
+    width: auto;
+    height: auto;
+  }
+  .adm-image-tip {
+    background-color: #f5f5f5;
+  }
+  .adm-image-tip > svg {
+    color: #999999;
+  }
+  .adm-mask {
+    z-index: 1000;
+  }
+  .adm-modal-body {
+    font-size: 14px;
+  }
+  .adm-modal-title {
+    font-size: 18px;
+  }
+  .adm-modal-content {
+    font-size: 15px;
+    color: #333333;
+  }
+  .adm-modal-close {
+    color: #999999;
+    font-size: 18px;
+  }
+  .adm-modal-footer.adm-space.adm-space-vertical > .adm-space-item.adm-space-item {
+    margin-bottom: 20px;
+  }
+  .adm-modal-footer.adm-space.adm-space-vertical > .adm-space-item.adm-space-item:last-child {
+    margin-bottom: 0;
+  }
+  .adm-modal-footer .adm-modal-button {
+    font-size: 18px;
+  }
+  .adm-page-indicator-dot {
+    width: 3px;
+    height: 3px;
+    border-radius: 1px;
+    background: rgba(0, 0, 0, 0.2);
+  }
+  .adm-page-indicator-dot-active {
+    border-radius: 1px;
+    background: #1677ff;
+  }
+  .adm-page-indicator-color-white .adm-page-indicator-dot-active.adm-page-indicator-dot-active {
+    background: #ffffff;
+  }
+  .adm-page-indicator-horizontal .adm-page-indicator-dot {
+    margin-right: 3px;
+  }
+  .adm-page-indicator-horizontal .adm-page-indicator-dot-active {
+    width: 13px;
+  }
+  .adm-page-indicator-vertical .adm-page-indicator-dot {
+    margin-bottom: 3px;
+  }
+  .adm-page-indicator-vertical .adm-page-indicator-dot-active {
+    height: 13px;
+  }
+  .adm-popover-menu.adm-popover .adm-popover-inner-content {
+    padding: 0 !important;
+  }
+  .adm-popover-menu-item-text {
+    border-top: solid 1px #eeeeee;
+  }
+  .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled) {
+    background-color: #eeeeee;
+  }
+  .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled)::after {
+    border-bottom: solid 1px #eeeeee;
+  }
+  .adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-menu-item-text {
+    border-color: #333333;
+  }
+  .adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled) {
+    background-color: #333333;
+  }
+  .adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled)::after {
+    border-color: #333333;
+  }
+  .adm-popover.adm-popover-dark.adm-popover-menu.adm-popover-menu .adm-popover-inner.adm-popover-inner.adm-popover-inner {
+    background-color: rgba(0, 0, 0, 0.9);
+  }
+  .adm-popover {
+    z-index: 1030;
+  }
+  .adm-popover.adm-popover-dark {
+    color: #ffffff;
+  }
+  .adm-popover.adm-popover-dark .adm-popover-inner {
+    background-color: rgba(0, 0, 0, 0.75);
+  }
+  .adm-popover-inner {
+    background-color: #ffffff;
+    font-size: 15px;
+  }
+  .adm-popover-inner-content {
+    padding: 8px 12px;
+  }
+  .adm-popover-arrow {
+    display: none !important;
+  }
+  .adm-scroll-mask-left {
+    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
+  }
+  .adm-scroll-mask-right {
+    background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
+  }
+  .adm-space-vertical > .adm-space-item {
+    margin-bottom: 8px;
+  }
+  .adm-space-horizontal > .adm-space-item {
+    margin-right: 8px;
+  }
+  .adm-space-horizontal.adm-space-wrap {
+    flex-wrap: wrap;
+    margin-bottom: -8px;
+  }
+  .adm-space-horizontal.adm-space-wrap > .adm-space-item {
+    padding-bottom: 8px;
+  }
+  .adm-spin-loading {
+    width: 32px;
+    height: 32px;
+  }
+  .adm-spin-loading-svg {
+    width: 100%;
+    height: 100%;
+    animation: adm-spin-loading-rotate 0.8s infinite linear;
+  }
+  .adm-spin-loading-svg > .adm-spin-loading-fill {
+    stroke: #999999;
+  }
+  .adm-swiper {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: 0;
+  }
+  .adm-swiper-track {
+    padding: 0;
+  }
+  .adm-swiper-horizontal .adm-swiper-track {
+    transform: translateX(0%);
+  }
+  .adm-swiper-horizontal .adm-swiper-track-inner {
+    width: 100%;
+  }
+  .adm-swiper-vertical .adm-swiper-track {
+    transform: translateY(0%);
+  }
+  .adm-swiper-vertical .adm-swiper-track-inner {
+    height: 100%;
+  }
+  .adm-tabs-header {
+    border-bottom: solid 1px #eeeeee;
+  }
+  .adm-tabs-tab {
+    font-size: 17px;
+  }
+  .adm-tabs-tab-active {
+    color: #1677ff;
+  }
+  .adm-tabs-tab-line {
+    height: 2px;
+    background: #1677ff;
+    border-radius: 2px;
+  }
+  .adm-tabs-content {
+    padding: 12px;
+  }
+  .adm-tabs-header-mask-left {
+    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
+  }
+  .adm-tabs-header-mask-right {
+    background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
+  }
+  .adm-toast-mask .adm-toast-main {
+    font-size: 15px;
+  }
+  .adm-toast-loading.adm-toast-loading {
+    width: 48px;
+    height: 48px;
+    margin: 0 auto 8px;
+  }
+  .adm-toast-loading.adm-toast-loading .adm-spin-loading-fill {
+    stroke: #ffffff;
+  }
+}

package/cjs/global/global.css

@@ -1,18 +1,48 @@
 :root {
+  --adm-radius-s: 4px;
+  --adm-radius-m: 8px;
+  --adm-radius-l: 12px;
+  --adm-font-size-1: 9px;
+  --adm-font-size-2: 10px;
+  --adm-font-size-3: 11px;
+  --adm-font-size-4: 12px;
+  --adm-font-size-5: 13px;
+  --adm-font-size-6: 14px;
+  --adm-font-size-7: 15px;
+  --adm-font-size-8: 16px;
+  --adm-font-size-9: 17px;
+  --adm-font-size-10: 18px;
   --adm-color-primary: #1677ff;
   --adm-color-success: #00b578;
   --adm-color-warning: #ff8f1f;
   --adm-color-danger: #ff3141;
   --adm-color-white: #ffffff;
+  --adm-color-text: #333333;
+  --adm-color-text-secondary: #666666;
   --adm-color-weak: #999999;
   --adm-color-light: #cccccc;
-  --adm-border-color: #eeeeee;
-  --adm-font-size-main: 13px;
-  --adm-color-text: #333333;
-  --adm-hd: 1;
+  --adm-color-border: #eeeeee;
+  --adm-color-box: #f5f5f5;
+  --adm-color-background: #ffffff;
+  --adm-font-size-main: var(--adm-font-size-5);
   --adm-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
     helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',
     'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+  --adm-border-color: var(--adm-color-border);
+}
+html[data-prefers-color-scheme='dark'] {
+  --adm-color-primary: #3086ff;
+  --adm-color-success: #34b368;
+  --adm-color-warning: #ffa930;
+  --adm-color-danger: #ff4a58;
+  --adm-color-text: #e6e6e6;
+  --adm-color-text-secondary: #b3b3b3;
+  --adm-color-weak: #808080;
+  --adm-color-light: #4d4d4d;
+  --adm-color-border: #2b2b2b;
+  --adm-color-box: #0a0a0a;
+  --adm-color-background: #1a1a1a;
+  --adm-border-color: var(--adm-color-border);
 }
 :root {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -50,6 +80,7 @@ div.adm-px-tester {
   position: fixed;
   right: -100vw;
   bottom: -100vh;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
   pointer-events: none;
 }

package/cjs/global/index.js

@@ -8,4 +8,5 @@ if (_canUseDom.canUseDom) {
   // Make sure the `:active` CSS selector of `button` and `a` take effect
   // See: https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari
   document.addEventListener('touchstart', () => {}, true);
-}
+} // Only for debugging. Must COMMENT this line before commit:
+// import './css-vars-patch.less'

package/cjs/global/theme-dark.css

@@ -0,0 +1,14 @@
+html[data-prefers-color-scheme='dark'] {
+  --adm-color-primary: #3086ff;
+  --adm-color-success: #34b368;
+  --adm-color-warning: #ffa930;
+  --adm-color-danger: #ff4a58;
+  --adm-color-text: #e6e6e6;
+  --adm-color-text-secondary: #b3b3b3;
+  --adm-color-weak: #808080;
+  --adm-color-light: #4d4d4d;
+  --adm-color-border: #2b2b2b;
+  --adm-color-box: #0a0a0a;
+  --adm-color-background: #1a1a1a;
+  --adm-border-color: var(--adm-color-border);
+}

package/cjs/global/theme-default.css

@@ -0,0 +1,32 @@
+:root {
+  --adm-radius-s: 4px;
+  --adm-radius-m: 8px;
+  --adm-radius-l: 12px;
+  --adm-font-size-1: 9px;
+  --adm-font-size-2: 10px;
+  --adm-font-size-3: 11px;
+  --adm-font-size-4: 12px;
+  --adm-font-size-5: 13px;
+  --adm-font-size-6: 14px;
+  --adm-font-size-7: 15px;
+  --adm-font-size-8: 16px;
+  --adm-font-size-9: 17px;
+  --adm-font-size-10: 18px;
+  --adm-color-primary: #1677ff;
+  --adm-color-success: #00b578;
+  --adm-color-warning: #ff8f1f;
+  --adm-color-danger: #ff3141;
+  --adm-color-white: #ffffff;
+  --adm-color-text: #333333;
+  --adm-color-text-secondary: #666666;
+  --adm-color-weak: #999999;
+  --adm-color-light: #cccccc;
+  --adm-color-border: #eeeeee;
+  --adm-color-box: #f5f5f5;
+  --adm-color-background: #ffffff;
+  --adm-font-size-main: var(--adm-font-size-5);
+  --adm-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
+    helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',
+    'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+  --adm-border-color: var(--adm-color-border);
+}