@canlooks/can-ui 0.0.1

package/dist/cjs/components/anchor/anchor.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.anchorContext = void 0;
+exports.useAnchorContext = useAnchorContext;
+exports.AnchorContext = AnchorContext;
+exports.useAnchorLinkProps = useAnchorLinkProps;
+exports.useAnchorTargetRef = useAnchorTargetRef;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+exports.anchorContext = (0, react_1.createContext)({
+    targets: new Map(),
+    activeId: null
+});
+function useAnchorContext() {
+    return (0, react_1.useContext)(exports.anchorContext);
+}
+function AnchorContext({ thesholds, container, children, ...props }) {
+    const targets = (0, react_1.useRef)(new Map());
+    const [activeId, setActiveId] = (0, react_1.useState)(null);
+    const syncThresholds = (0, utils_1.useSync)(thesholds);
+    (0, react_1.useEffect)(() => {
+        const containerEl = typeof container === 'function' ? container() : container;
+        const scroll = () => {
+            let enter = syncThresholds.current?.[0];
+            if (typeof enter === 'undefined') {
+                const containerHeight = containerEl?.offsetHeight ?? window.innerHeight;
+                enter = containerHeight / 2;
+            }
+            const leave = syncThresholds.current?.[1] || 0;
+            let found = false;
+            for (const [id, el] of targets.current) {
+                if (el) {
+                    const { y, height } = el.getBoundingClientRect();
+                    if (y <= enter && y + height >= leave) {
+                        setActiveId(id);
+                        found = true;
+                        break;
+                    }
+                }
+            }
+            !found && setActiveId(null);
+        };
+        scroll();
+        if (containerEl) {
+            containerEl.addEventListener('scroll', scroll);
+        }
+        else {
+            addEventListener('scroll', scroll);
+            document.body.addEventListener('scroll', scroll);
+        }
+        return () => {
+            if (containerEl) {
+                containerEl.removeEventListener('scroll', scroll);
+            }
+            else {
+                removeEventListener('scroll', scroll);
+                document.body.removeEventListener('scroll', scroll);
+            }
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(exports.anchorContext.Provider, { value: (0, react_1.useMemo)(() => ({
+            ...props,
+            targets: targets.current,
+            activeId
+        }), [activeId]), children: children }));
+}
+/**
+ * 在链接按钮组件内使用
+ * @param id
+ */
+function useAnchorLinkProps(id) {
+    const { activeId, targets, scrollIntoViewOptions } = useAnchorContext();
+    const onClick = (0, react_1.useCallback)(() => {
+        targets.get(id)?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+            ...scrollIntoViewOptions
+        });
+    }, [id]);
+    return {
+        active: activeId === id,
+        onClick
+    };
+}
+/**
+ * 在需要滚动到的目标元素上使用
+ * @param id
+ */
+function useAnchorTargetRef(id) {
+    const { targets } = useAnchorContext();
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        targets.set(id, ref.current);
+        return () => {
+            targets.delete(id);
+        };
+    });
+    return ref;
+}

package/dist/cjs/components/anchor/index.d.ts

@@ -0,0 +1 @@
+export * from './anchor';

package/dist/cjs/components/anchor/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./anchor"), exports);

package/dist/cjs/components/app/app.d.ts

@@ -0,0 +1,29 @@
+import { ReactElement, ReactNode } from 'react';
+import { DIVProps } from '../../../types';
+import { PartialTheme } from './theme';
+import { AppDialogMethods } from './appDialog';
+import { AppMessageMethods } from './appMessage';
+import { AppNotificationMethods } from './appNotification';
+import { AppActionSheetMethods } from './appActionSheet';
+export interface AppProps extends DIVProps {
+    component?: any;
+    theme?: PartialTheme;
+    children?: ReactNode;
+    /** 尺寸是否占满父节点，@default true */
+    fullSize?: boolean;
+    /** 若页面受zoom样式影响，需要传入zoom值 */
+    zoom?: number;
+}
+export declare function useAppContext(): {
+    dialog: AppDialogMethods;
+    message: AppMessageMethods<import("../snackbarBase").SnackbarBaseProps>;
+    notification: AppNotificationMethods<import("./appNotification").AppNotificationProps>;
+    zoom: number;
+};
+export declare const App: {
+    (props: AppProps): ReactElement;
+    dialog: AppDialogMethods;
+    message: AppMessageMethods;
+    notification: AppNotificationMethods;
+    actionSheet: AppActionSheetMethods;
+};

package/dist/cjs/components/app/app.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.App = void 0;
+exports.useAppContext = useAppContext;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const app_style_1 = require("./app.style");
+const appDialog_1 = require("./appDialog");
+const appMessage_1 = require("./appMessage");
+const appNotification_1 = require("./appNotification");
+const appActionSheet_1 = require("./appActionSheet");
+const themeContext_1 = require("./themeContext");
+const react_2 = require("@emotion/react");
+const appContext = (0, react_1.createContext)({
+    dialog: new appDialog_1.AppDialogMethods(),
+    message: new appMessage_1.AppMessageMethods(),
+    notification: new appNotification_1.AppNotificationMethods(),
+    zoom: 1
+});
+function useAppContext() {
+    return (0, react_1.useContext)(appContext);
+}
+exports.App = (0, react_1.forwardRef)(({ component: Component = 'div', theme, children, fullSize = true, zoom = 1, ...props }, ref) => {
+    const themeValue = (0, themeContext_1.useThemeProvider)(theme);
+    const { _isTop } = themeValue;
+    (0, react_1.useEffect)(() => {
+        if (_isTop) {
+            document.documentElement.style.colorScheme = themeValue.mode;
+        }
+    }, [_isTop]);
+    themeValue._isTop = false;
+    const appValue = (0, react_1.useMemo)(() => ({
+        dialog: exports.App.dialog = new appDialog_1.AppDialogMethods(),
+        message: exports.App.message = new appMessage_1.AppMessageMethods(),
+        notification: exports.App.notification = new appNotification_1.AppNotificationMethods(),
+        actionSheet: exports.App.actionSheet = new appActionSheet_1.AppActionSheetMethods(),
+        zoom
+    }), [zoom]);
+    return ((0, jsx_runtime_1.jsx)(themeContext_1.themeContext.Provider, { value: themeValue, children: (0, jsx_runtime_1.jsxs)(appContext.Provider, { value: appValue, children: [Component
+                    ? (0, jsx_runtime_1.jsx)(Component, { ...props, ref: ref, css: [
+                            app_style_1.style,
+                            (0, react_2.css) `
+                                font-size: ${themeValue.fontSize}px;
+                                color: ${themeValue.text.primary};
+                                background-color: ${themeValue.background.body};
+                            `,
+                            fullSize && (0, react_2.css) `
+                                width: 100%;
+                                height: 100%;
+                                flex: 1;   
+                            `
+                        ], className: (0, utils_1.classnames)(app_style_1.classes.root, props.className), children: children })
+                    : children, (0, jsx_runtime_1.jsx)(appDialog_1.AppDialog, { methods: appValue.dialog }), (0, jsx_runtime_1.jsx)(appMessage_1.AppMessage, { methods: appValue.message }), (0, jsx_runtime_1.jsx)(appNotification_1.AppNotification, { methods: appValue.notification }), (0, jsx_runtime_1.jsx)(appActionSheet_1.AppActionSheet, { methods: appValue.actionSheet })] }) }));
+});

package/dist/cjs/components/app/app.style.d.ts

@@ -0,0 +1,4 @@
+export declare const classes: {
+    root: string;
+};
+export declare const style: import("@emotion/react").SerializedStyles;

package/dist/cjs/components/app/app.style.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('app');
+exports.style = (0, react_1.css) `
+    line-height: ${20 / 14};
+    box-sizing: border-box;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji', 'Microsoft YaHei UI', sans-serif;
+
+    * {
+        box-sizing: border-box;
+    }
+
+    svg.MuiSvgIcon-root {
+        font-size: 1em;
+        transform: scale(1.2);
+    }
+
+    .anticon {
+        line-height: 1;
+        display: inline-flex;
+    }
+`;

package/dist/cjs/components/app/appActionSheet.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { ActionSheetProps } from '../actionSheet';
+import { MenuItemProps } from '../menuItem';
+import { Obj } from '../../../types';
+export interface AppActionSheetProps<A extends MenuItemProps & Obj> extends Omit<ActionSheetProps<A>, 'onAction' | 'onConfirm'> {
+    onAction?(action: A, ...args: any[]): any;
+    onConfirm?(...args: any[]): any;
+}
+export declare class AppActionSheetMethods {
+    confirm(title?: ReactNode, ...args: any[]): Promise<void>;
+    confirm(props?: AppActionSheetProps<MenuItemProps>, ...args: any[]): Promise<void>;
+    open<A extends MenuItemProps & Obj>(props: AppActionSheetProps<A>, ...args: any[]): Promise<A>;
+}
+export declare const AppActionSheet: import("react").MemoExoticComponent<({ methods }: {
+    methods: AppActionSheetMethods;
+}) => import("@emotion/react/jsx-runtime").JSX.Element[]>;

package/dist/cjs/components/app/appActionSheet.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppActionSheet = exports.AppActionSheetMethods = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const actionSheet_1 = require("../actionSheet");
+class AppActionSheetMethods {
+    async confirm() { }
+    async open(props, ...args) { }
+}
+exports.AppActionSheetMethods = AppActionSheetMethods;
+exports.AppActionSheet = (0, react_1.memo)(({ methods }) => {
+    const [stacks, setStacks] = (0, react_1.useState)([]);
+    const defineMethods = (type) => (params, ...args) => new Promise((resolve, reject) => {
+        const props = typeof params !== 'object' || (0, react_1.isValidElement)(params)
+            ? { title: params }
+            : params;
+        setStacks(o => [
+            ...o,
+            {
+                ...props,
+                type,
+                onAction(action) {
+                    props?.onAction?.(action, ...args);
+                    resolve(action);
+                },
+                onConfirm() {
+                    props?.onConfirm?.(...args);
+                    resolve(void 0);
+                },
+                onCancel(e) {
+                    props?.onCancel?.(e);
+                    reject();
+                },
+                onClosed() {
+                    props?.onClosed?.();
+                    setStacks(_o => {
+                        _o.splice(o.length, 1);
+                        return [..._o];
+                    });
+                }
+            }
+        ]);
+    });
+    methods.confirm = defineMethods('confirm');
+    methods.open = defineMethods('open');
+    return stacks.map((p, i) => (0, jsx_runtime_1.jsx)(AppActionSheetStack, { ...p }, i));
+});
+const AppActionSheetStack = (0, react_1.memo)(({ type, ...props }) => {
+    const [open, setOpen] = (0, react_1.useState)(true);
+    return ((0, jsx_runtime_1.jsx)(actionSheet_1.ActionSheet, { showConfirm: type === 'confirm', ...props, open: open, onClose: reason => {
+            props.onClose?.(reason);
+            setOpen(false);
+        } }));
+});

package/dist/cjs/components/app/appDialog.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { DialogProps } from '../dialog';
+export interface AppDialogProps extends Omit<DialogProps, 'content' | 'onConfirm'> {
+    content?: ReactNode;
+    onConfirm?(...args: any[]): any;
+}
+export declare class AppDialogMethods {
+    info(props: AppDialogProps, ...args: any[]): Promise<void>;
+    success(props: AppDialogProps, ...args: any[]): Promise<void>;
+    warning(props: AppDialogProps, ...args: any[]): Promise<void>;
+    error(props: AppDialogProps, ...args: any[]): Promise<void>;
+    confirm(props: AppDialogProps, ...args: any[]): Promise<void>;
+}
+export declare const AppDialog: import("react").MemoExoticComponent<({ methods }: {
+    methods: AppDialogMethods;
+}) => import("@emotion/react/jsx-runtime").JSX.Element[]>;

package/dist/cjs/components/app/appDialog.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppDialog = exports.AppDialogMethods = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const dialog_1 = require("../dialog");
+const status_1 = require("../status");
+class AppDialogMethods {
+    async info(props, ...args) { }
+    async success(props, ...args) { }
+    async warning(props, ...args) { }
+    async error(props, ...args) { }
+    async confirm(props, ...args) { }
+}
+exports.AppDialogMethods = AppDialogMethods;
+exports.AppDialog = (0, react_1.memo)(({ methods }) => {
+    const [stacks, setStacks] = (0, react_1.useState)([]);
+    const defineMethod = (type) => (props, ...args) => new Promise((resolve, reject) => {
+        setStacks(o => [
+            ...o,
+            {
+                ...props,
+                type,
+                async onConfirm() {
+                    await props.onConfirm?.(...args);
+                    resolve();
+                },
+                onCancel(e) {
+                    props.onCancel?.(e);
+                    reject();
+                },
+                onClosed() {
+                    props.onClosed?.();
+                    setStacks(_o => {
+                        _o.splice(o.length, 1);
+                        return [..._o];
+                    });
+                }
+            }
+        ]);
+    });
+    methods.info = defineMethod('info');
+    methods.success = defineMethod('success');
+    methods.warning = defineMethod('warning');
+    methods.error = defineMethod('error');
+    methods.confirm = defineMethod('confirm');
+    return stacks.map((p, i) => {
+        return (0, jsx_runtime_1.jsx)(AppDialogStack, { ...p }, i);
+    });
+});
+const AppDialogStack = (0, react_1.memo)(({ type, content, ...props }) => {
+    const [open, setOpen] = (0, react_1.useState)(true);
+    return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog, { width: 360, maskClosable: false, icon: (0, jsx_runtime_1.jsx)(status_1.StatusIcon, { status: type }), showCancel: type === 'confirm', showClose: false, confirmText: type === 'confirm' ? void 0 : '知道了', ...props, open: open, onClose: reason => {
+            props.onClose?.(reason);
+            setOpen(false);
+        }, children: content }));
+});

package/dist/cjs/components/app/appMessage.d.ts

@@ -0,0 +1,7 @@
+import { SnackbarBaseProps } from '../snackbarBase';
+import { SnackbarBaseMethods } from '../snackbarBase';
+export declare class AppMessageMethods<P extends SnackbarBaseProps = SnackbarBaseProps> extends SnackbarBaseMethods<P> {
+}
+export declare const AppMessage: import("react").MemoExoticComponent<({ methods }: {
+    methods: AppMessageMethods;
+}) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/app/appMessage.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppMessage = exports.AppMessageMethods = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const snackbarBase_1 = require("../snackbarBase");
+const snackbarBase_2 = require("../snackbarBase");
+class AppMessageMethods extends snackbarBase_2.SnackbarBaseMethods {
+}
+exports.AppMessageMethods = AppMessageMethods;
+exports.AppMessage = (0, react_1.memo)(({ methods }) => {
+    return ((0, jsx_runtime_1.jsx)(snackbarBase_1.SnackbarBase, { methods: methods, useTo: "message" }));
+});

package/dist/cjs/components/app/appNotification.d.ts

@@ -0,0 +1,11 @@
+import { SnackbarBaseProps } from '../snackbarBase';
+import { SnackbarBaseMethods } from '../snackbarBase';
+import { CornerPlacement } from '../../../types';
+export interface AppNotificationProps extends Omit<SnackbarBaseProps, 'placement'> {
+    placement?: CornerPlacement;
+}
+export declare class AppNotificationMethods<P extends AppNotificationProps = AppNotificationProps> extends SnackbarBaseMethods<P> {
+}
+export declare const AppNotification: import("react").MemoExoticComponent<({ methods }: {
+    methods: AppNotificationMethods;
+}) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/app/appNotification.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppNotification = exports.AppNotificationMethods = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const snackbarBase_1 = require("../snackbarBase");
+const snackbarBase_2 = require("../snackbarBase");
+class AppNotificationMethods extends snackbarBase_2.SnackbarBaseMethods {
+}
+exports.AppNotificationMethods = AppNotificationMethods;
+exports.AppNotification = (0, react_1.memo)(({ methods }) => {
+    return ((0, jsx_runtime_1.jsx)(snackbarBase_1.SnackbarBase, { methods: methods, useTo: "notification" }));
+});

package/dist/cjs/components/app/index.d.ts

@@ -0,0 +1,3 @@
+export * from './app';
+export * from './theme';
+export * from './themeContext';

package/dist/cjs/components/app/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./app"), exports);
+tslib_1.__exportStar(require("./theme"), exports);
+tslib_1.__exportStar(require("./themeContext"), exports);

package/dist/cjs/components/app/theme.d.ts

@@ -0,0 +1,79 @@
+import { Dispatch, SetStateAction } from 'react';
+import { ColorPresets, TextColorPresets, ThemeEasingName, Size, Breakpoints } from '../../../types';
+/**
+ * 获取不同程度的灰色
+ * @param amount 0 至 1，数值越小越靠近背景颜色，数值越大越靠近文字颜色（mode改变后数组会倒转）
+ */
+export declare function gray(amount: number): string;
+export declare function rGray(amount: number): string;
+/**
+ * ---------------------------------------------------------------------
+ * 以3的倍数统一处理间距
+ */
+export declare const spacing: {
+    (amount: number): number;
+    0: number;
+    1: number;
+    2: number;
+    3: number;
+    4: number;
+    5: number;
+    6: number;
+    7: number;
+    8: number;
+    9: number;
+    10: number;
+};
+export declare const zIndex: {
+    overlay: number;
+    popper: number;
+    bubbleConfirm: number;
+    dropdown: number;
+    snackbar: number;
+    tooltip: number;
+};
+export declare const breakpoints: {
+    [P in Breakpoints]: number;
+};
+export type ThemeColor = {
+    [P in ColorPresets]: string;
+};
+export type ThemeTextColor = {
+    [P in TextColorPresets]: string;
+};
+export type ThemeBackgroundColor = {
+    card: string;
+    body: string;
+    fixed: string;
+};
+export type ThemeEasings = {
+    [P in ThemeEasingName]: string;
+};
+export type Theme = {
+    mode: 'light' | 'dark';
+    fontSize: number;
+    size: Size;
+    borderRadius: number;
+    /** 间隙大小，如内边距、外边距等，是控制界面整体紧凑程度的主要参数 */
+    spacing: typeof spacing;
+    gap: number;
+    gray: typeof gray;
+    divider: string;
+    colors: ThemeColor;
+    text: ThemeTextColor;
+    background: ThemeBackgroundColor;
+    boxShadow: string[];
+    easing: ThemeEasings;
+    /** @private 是否为最顶层的主题提供者 */
+    _isTop: boolean;
+    update: Dispatch<SetStateAction<PartialTheme>>;
+};
+/** Theme对象的深度Partial，使所有子属性全部变成可选 */
+export type PartialTheme = Partial<Omit<Theme, 'colors' | 'text' | 'background' | 'easing'>> & {
+    colors?: Partial<ThemeColor>;
+    text?: Partial<ThemeTextColor>;
+    background?: Partial<ThemeBackgroundColor>;
+    easing?: Partial<ThemeEasings>;
+};
+export declare const defaultLightTheme: Theme;
+export declare const defaultDarkTheme: PartialTheme;

package/dist/cjs/components/app/theme.js

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultDarkTheme = exports.defaultLightTheme = exports.breakpoints = exports.zIndex = exports.spacing = void 0;
+exports.gray = gray;
+exports.rGray = rGray;
+const tslib_1 = require("tslib");
+const color_1 = tslib_1.__importDefault(require("color"));
+/**
+ * 获取不同程度的灰色
+ * @param amount 0 至 1，数值越小越靠近背景颜色，数值越大越靠近文字颜色（mode改变后数组会倒转）
+ */
+function gray(amount) {
+    return rGray(1 - amount);
+}
+function rGray(amount) {
+    return (0, color_1.default)(`hsl(0, 0%, ${amount * 100}%)`, 'hsl').hex();
+}
+/**
+ * ---------------------------------------------------------------------
+ * 以3的倍数统一处理间距
+ */
+const spacing = (amount) => amount * 3;
+exports.spacing = spacing;
+exports.spacing[0] = (0, exports.spacing)(0);
+exports.spacing[1] = (0, exports.spacing)(1);
+exports.spacing[2] = (0, exports.spacing)(2);
+exports.spacing[3] = (0, exports.spacing)(3);
+exports.spacing[4] = (0, exports.spacing)(4);
+exports.spacing[5] = (0, exports.spacing)(5);
+exports.spacing[6] = (0, exports.spacing)(6);
+exports.spacing[7] = (0, exports.spacing)(7);
+exports.spacing[8] = (0, exports.spacing)(8);
+exports.spacing[9] = (0, exports.spacing)(9);
+exports.spacing[10] = (0, exports.spacing)(10);
+exports.zIndex = {
+    overlay: 1000,
+    popper: 1100,
+    bubbleConfirm: 1200,
+    dropdown: 1300,
+    snackbar: 1400,
+    tooltip: 1500
+};
+exports.breakpoints = {
+    xs: 0,
+    sm: 600,
+    md: 900,
+    lg: 1200,
+    xl: 1536
+};
+exports.defaultLightTheme = {
+    mode: 'light',
+    fontSize: 14,
+    size: 'medium',
+    borderRadius: 6,
+    spacing: exports.spacing,
+    gap: exports.spacing[6],
+    get gray() {
+        return gray;
+    },
+    /** divider: gray(.15), */
+    divider: '#d9d9d9',
+    colors: {
+        primary: '#1e71ec',
+        secondary: '#925CC1',
+        success: '#13C13C',
+        warning: '#ED9121',
+        error: '#DD3F3F',
+        info: '#52AEDF'
+    },
+    text: {
+        /* primary: gray(1), */
+        primary: '#000000',
+        /* secondary: gray(.6), */
+        secondary: '#666666',
+        /* disabled: gray(.4), */
+        disabled: '#999999',
+        /* placeholder: gray(.3), */
+        placeholder: '#b3b3b3',
+        /* inverse: gray(0) */
+        inverse: '#ffffff'
+    },
+    background: {
+        card: '#ffffff',
+        /* body: gray(.04), */
+        body: '#f5f5f5',
+        fixed: 'rgba(0, 0, 0, .02)'
+    },
+    boxShadow: [
+        /* 通常用于弹框，气泡等 */
+        '3px 6px 18px rgba(0, 0, 0, .2)',
+        /* 通常用于抽屉等 */
+        '0 0 24px rgba(0, 0, 0, .2)',
+        '1px 2px 3px rgba(0, 0, 0, .2)',
+        '2px 4px 6px rgba(0, 0, 0, .2)',
+        '3px 6px 9px rgba(0, 0, 0, .2)',
+        '3px 6px 18px rgba(0, 0, 0, .2)',
+        '4px 8px 24px rgba(0, 0, 0, .2)'
+    ],
+    easing: {
+        linear: 'linear',
+        ease: 'ease',
+        easeIn: 'cubic-bezier(.3, 0, .6, 0)',
+        easeOut: 'cubic-bezier(.4, 1, .7, 1)',
+        easeInOut: 'ease-in-out',
+        bounce: 'cubic-bezier(.5, 2, .5, .7)',
+        swing: 'cubic-bezier(.5, 3, .5, .1)'
+    },
+    _isTop: true,
+    update: () => { }
+};
+exports.defaultDarkTheme = {
+    mode: 'dark',
+    background: {
+        /* body: rGray(.15), */
+        body: '#252525',
+        /* card: rGray(.2), */
+        card: '#333333',
+        fixed: 'rgba(255, 255, 255, .06)'
+    },
+    get gray() {
+        return rGray;
+    },
+    /* divider: rGray(.36), */
+    divider: '#5c5c5c',
+    colors: {
+        /* primary: Color('#1e71ec').lighten(.1).hex(), */
+        primary: '#3780ee',
+        /* success: Color('#13C13C').lighten(.06).hex(), */
+        success: '#14cd40',
+        /* error: Color('#DD3F3F').lighten(.06).hex(), */
+        error: '#E04D4D'
+    },
+    text: {
+        /* primary: rGray(1), */
+        primary: '#ffffff',
+        /* secondary: rGray(.7), */
+        secondary: '#b3b3b3',
+        /* disabled: rGray(.5), */
+        disabled: '#808080',
+        /* placeholder: rGray(.45), */
+        placeholder: '#737373',
+        /* inverse: rGray(0) */
+        inverse: '#000000'
+    }
+};