@canlooks/can-ui 0.0.103 → 0.0.105

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

@@ -4,7 +4,7 @@ export interface CardProps extends FlexProps {
     flexable?: boolean;
     /** 是否显示边框，默认为`false` */
     bordered?: boolean;
-    /** @ 支持0-5，明亮主题表示阴影的程度，默认为`0`; 暗黑主题表示背景色，默认为`2` */
+    /** 支持0-5，明亮主题表示阴影的程度, 暗黑主题表示背景色，默认为`0` */
     elevation?: number;
     /** 默认为{@link Theme.borderRadius} */
     borderRadius?: number;

package/dist/cjs/components/card/card.js

@@ -6,10 +6,9 @@ const card_style_1 = require("./card.style");
 const utils_1 = require("../../utils");
 const theme_1 = require("../theme");
 const flex_1 = require("../flex");
-function Card({ flexable, bordered, elevation, borderRadius, ...props }) {
+function Card({ flexable, bordered, elevation = 0, borderRadius, ...props }) {
     const theme = (0, theme_1.useTheme)();
     borderRadius ??= theme.borderRadius;
-    elevation ??= theme.mode === 'light' ? 0 : 2;
     return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { direction: "column", ...props, css: card_style_1.style, className: (0, utils_1.clsx)(card_style_1.classes.root, props.className), style: {
             display: flexable ? 'flex' : void 0,
             borderRadius,

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

@@ -40,16 +40,20 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, background, divider, bo
                 @layer reset {
                     padding: ${spacing[8]}px;
 
+                    &[data-bordered=true] {
+                        border: 1px solid ${divider};
+                    }
+
                     &[data-elevation="0"] {
-                        background-color: ${gray(.1)};
+                        background-color: ${gray(.14)};
                     }
 
                     &[data-elevation="1"] {
-                        background-color: ${gray(.14)};
+                        background-color: ${gray(.18)};
                     }
 
                     &[data-elevation="2"] {
-                        background-color: ${gray(.2)};
+                        background-color: ${gray(.22)};
                     }
 
                     &[data-elevation="3"] {
@@ -57,11 +61,11 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, background, divider, bo
                     }
 
                     &[data-elevation="4"] {
-                        background-color: ${gray(.34)};
+                        background-color: ${gray(.30)};
                     }
 
                     &[data-elevation="5"] {
-                        background-color: ${gray(.45)};
+                        background-color: ${gray(.34)};
                     }
                 }
         `

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

@@ -27,7 +27,21 @@ export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentP
     /**
      * @enum true 不会弹出气泡框，需配合{@link DataGridBaseProps.onFilterClick}实现筛选逻辑
      * @enum FilterOptionsProps 传递至`OptionsBase`组件
+     * @example FilterOptionsProps
+     * {
+     *     filter: {
+     *         options: [
+     *             {value: '1', label: '选项1‘}
+     *         ]
+     *     }
+     * }
      * @enum FilterControlProps 自定义渲染气泡内容
+     * @example FilterControlProps
+     * {
+     *     filter: {
+     *         control: <Input/>
+     *     }
+     * }
      */
     filter?: boolean | FilterOptionsProps | FilterControlProps;
     /** @private 内部使用，在{@link useDataGridColumns}内赋值 */

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

@@ -62,12 +62,12 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, gray, text, colors, eas
             -webkit-tap-highlight-color: transparent;
 
             &:hover {
-                background-color: ${gray(mode === 'light' ? .05 : .26)};
+                background-color: ${gray(mode === 'light' ? .05 : .2)};
             }
 
             &:active {
                 transition: background-color 0s;
-                background-color: ${gray(mode === 'light' ? .01 : .22)};
+                background-color: ${gray(mode === 'light' ? .09 : .24)};
             }
 
             &[data-ordering=true] {

package/dist/cjs/components/dataGrid/dataGridHead.js

@@ -16,6 +16,8 @@ const button_1 = require("../button");
 const faFilter_1 = require("@fortawesome/free-solid-svg-icons/faFilter");
 const bubble_1 = require("../bubble");
 const filterBubbleContent_1 = require("./filterBubbleContent");
+const form_1 = require("../form");
+const utils_1 = require("../../utils");
 exports.DataGridHead = (0, react_2.memo)(({ allowSelectAll, columnResizable, flattedColumns, completedColumns, rows, primaryKey, orderColumn, orderType, onOrderChange, onFilterClick }) => {
     const { multiple, setValue, selectionStatus } = (0, selectionContext_1.useSelectionContext)();
     const allSelectionStatus = (0, react_2.useMemo)(() => {
@@ -33,6 +35,7 @@ exports.DataGridHead = (0, react_2.memo)(({ allowSelectAll, columnResizable, fla
             ? setValue(rows?.flatMap(r => r[primaryKey] ?? []) || [])
             : setValue([]);
     };
+    const { formValue } = (0, form_1.useFormValueContext)();
     const renderedHead = (0, columnResize_1.useRenderHead)(Column => {
         const columnDefinitions = columnResizable ? flattedColumns : completedColumns;
         if (!columnDefinitions) {
@@ -83,7 +86,8 @@ exports.DataGridHead = (0, react_2.memo)(({ allowSelectAll, columnResizable, fla
                 const sortable = sorter && !children?.length;
                 const isOrderingColumn = orderColumn === _key;
                 const currentOrderType = isOrderingColumn ? orderType : 'descend';
-                const filterButton = ((0, jsx_runtime_1.jsx)(button_1.Button, { className: dataGrid_style_1.classes.filterButton, variant: "plain", color: "text.placeholder", onClick: e => {
+                const isFilteredColumn = !(0, utils_1.isUnset)(formValue?.[_key]);
+                const filterButton = ((0, jsx_runtime_1.jsx)(button_1.Button, { className: dataGrid_style_1.classes.filterButton, variant: "plain", color: isFilteredColumn ? 'primary' : 'text.placeholder', onClick: e => {
                         e.stopPropagation();
                         onFilterClick?.(_key, e);
                     }, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faFilter_1.faFilter }) }));

package/dist/cjs/components/dataGrid/filterBubbleContent.d.ts

@@ -2,7 +2,7 @@ import { MenuOptionType, OptionsBaseProps } from '../optionsBase';
 import { Id } from '../../types';
 import { FormItemChildren } from '../form';
 type FilterSharedProps = {
-    /** 是否显示`重置`与`确定`按钮，默认为`true` */
+    /** 是否显示`重置`按钮，默认为`true` */
     showButton?: boolean;
 };
 export interface FilterOptionsProps extends FilterSharedProps, OptionsBaseProps<MenuOptionType> {

package/dist/cjs/components/dataGrid/filterBubbleContent.js

@@ -22,10 +22,10 @@ exports.FilterBubbleContent = (0, react_1.memo)(({ columnKey, columnFilterProps
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(form_1.FormItem, { field: columnKey, children: 'control' in columnFilterProps
                     ? columnFilterProps.control
                     : (0, jsx_runtime_1.jsx)(FilterOptions, { ...columnFilterProps }) }), columnFilterProps.showButton !== false
-                ? (0, jsx_runtime_1.jsxs)(flex_1.Flex, { gap: 6, justifyContent: "flex-end", marginTop: 6, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", onClick: () => {
-                                formRef.current.setFieldValue(columnKey, null);
-                                setOpen(false);
-                            }, children: "\u91CD\u7F6E" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => setOpen(false), children: "\u786E\u5B9A" })] })
+                ? (0, jsx_runtime_1.jsx)(flex_1.Flex, { gap: 6, justifyContent: "center", marginTop: 6, children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", onClick: () => {
+                            formRef.current.setFieldValue(columnKey, null);
+                            setOpen(false);
+                        }, children: "\u91CD\u7F6E" }) })
                 : (0, jsx_runtime_1.jsx)(TriggerFilterOnChange, {})] }));
 });
 const FilterOptions = (0, react_1.memo)(({ multiple = true, showButton = true, value, onChange, ...props }) => {

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

@@ -1,8 +1,8 @@
 import { ComponentProps, ReactElement, ReactNode, Ref } from 'react';
 import { ColorPropsValue, DivProps, Size } from '../../types';
 export interface InputBaseRef extends HTMLDivElement {
-    select?: HTMLInputElement['select'];
-    setSelectionRange?: HTMLInputElement['setSelectionRange'];
+    select: HTMLInputElement['select'];
+    setSelectionRange: HTMLInputElement['setSelectionRange'];
 }
 export interface InputBaseProps<T extends 'input' | 'textarea'> extends Omit<DivProps, 'ref' | 'prefix' | 'onChange' | 'children'> {
     ref?: Ref<InputBaseRef>;

package/dist/cjs/components/pagination/jumper.d.ts

@@ -1,8 +1,9 @@
 import { Ref } from 'react';
 import { DivProps } from '../../types';
 import { InputProps } from '../input';
+import { InputBaseRef } from '../inputBase';
 export interface PaginationJumperProps extends DivProps {
     InputProps?: InputProps;
-    InputRef?: Ref<HTMLDivElement>;
+    InputRef?: Ref<InputBaseRef>;
 }
 export declare const PaginationJumper: import("react").MemoExoticComponent<({ InputProps, InputRef, ...props }: PaginationJumperProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/serialInput/serialInput.js

@@ -36,14 +36,28 @@ exports.SerialInput = (0, react_2.memo)(({ separator, count = 1, defaultValue, v
                                 onFinish?.(newValue);
                             }
                         }
-                        else if (0 < index && prevLength === 1 && curr.length === 0) {
-                            // 聚焦前一个输入框
-                            inputRefs.current[index - 1].focus();
-                        }
                     },
-                    onKeyDown: ({ key }) => {
-                        if (key === 'Backspace' && innerValue.current[index].length === 0 && 0 < index) {
-                            inputRefs.current[index - 1].focus();
+                    onKeyDown: (e) => {
+                        switch (e.key) {
+                            case 'Backspace':
+                                if (innerValue.current[index].length === 0 && index > 0) {
+                                    const prevInput = inputRefs.current[index - 1];
+                                    prevInput.focus();
+                                    const selectionIndex = innerValue.current[index - 1].length;
+                                    prevInput.setSelectionRange(selectionIndex, selectionIndex);
+                                }
+                                break;
+                            case 'ArrowRight':
+                                if (index < count - 1) {
+                                    e.preventDefault();
+                                    inputRefs.current[index + 1].focus();
+                                }
+                                break;
+                            case 'ArrowLeft':
+                                if (index > 0) {
+                                    e.preventDefault();
+                                    inputRefs.current[index - 1].focus();
+                                }
                         }
                     }
                 });

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

@@ -10,8 +10,8 @@ exports.classes = (0, utils_1.defineInnerClasses)('table', [
     'cell'
 ]);
 exports.style = (0, utils_1.defineCss)(({ mode, spacing, gray, divider, background, easing, colors }) => {
-    const headerBg = gray(mode === 'light' ? .03 : .22);
-    const stripedBg = gray(mode === 'light' ? .02 : .21);
+    const headerBg = gray(mode === 'light' ? .03 : .18);
+    const stripedBg = gray(mode === 'light' ? .02 : .16);
     const selectedBg = (0, color_1.default)(colors.primary.main).alpha(mode === 'light' ? .05 : .1).string();
     return (0, react_1.css) `
         @layer reset {

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

@@ -1,3 +1,5 @@
 export * from './themeContext';
+export * from './themeMethods';
+export * from './themeRegistry';
 export * from './themeTypes';
 export * from './themeVariables';

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

@@ -2,5 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./themeContext"), exports);
+tslib_1.__exportStar(require("./themeMethods"), exports);
+tslib_1.__exportStar(require("./themeRegistry"), exports);
 tslib_1.__exportStar(require("./themeTypes"), exports);
 tslib_1.__exportStar(require("./themeVariables"), exports);

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

@@ -7,24 +7,30 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const themeVariables_1 = require("./themeVariables");
 const utils_1 = require("../../utils");
-exports.ThemeContext = (0, react_1.createContext)((0, themeVariables_1.defineTheme)(themeVariables_1.defaultLightTheme));
+const themeMethods_1 = require("./themeMethods");
+const themeRegistry_1 = require("./themeRegistry");
+exports.ThemeContext = (0, react_1.createContext)((0, themeMethods_1.defineTheme)(themeVariables_1.defaultLightTheme));
 function useTheme() {
     return (0, react_1.useContext)(exports.ThemeContext);
 }
 function ThemeProvider({ theme, children }) {
     const parentTheme = useTheme();
-    const [currentTheme, setCurrentTheme] = (0, utils_1.useDerivedState)(theme);
+    const resolvedThemeDefinition = (0, react_1.useMemo)(() => {
+        return theme?.name
+            ? (0, utils_1.mergeDeep)({}, (0, themeRegistry_1.getTheme)(theme.name), theme)
+            : theme;
+    }, [theme]);
+    const [currentTheme, setCurrentTheme] = (0, utils_1.useDerivedState)(resolvedThemeDefinition);
     const mergedThemeDefinition = (0, react_1.useMemo)(() => {
-        return (0, utils_1.mergeDeep)({}, (0, themeVariables_1.restoreThemeDefinition)(parentTheme), parentTheme.mode === 'light' && currentTheme.current?.mode === 'dark' ? themeVariables_1.defaultDarkTheme : void 0, parentTheme.mode === 'dark' && currentTheme.current?.mode === 'light' ? themeVariables_1.defaultLightTheme : void 0, currentTheme.current);
+        return (0, utils_1.mergeDeep)({}, (0, themeMethods_1.restoreThemeDefinition)(parentTheme), parentTheme.mode === 'light' && currentTheme.current?.mode === 'dark' ? themeVariables_1.defaultDarkTheme : void 0, parentTheme.mode === 'dark' && currentTheme.current?.mode === 'light' ? themeVariables_1.defaultLightTheme : void 0, currentTheme.current);
     }, [currentTheme.current, parentTheme]);
     const themeContextValue = (0, react_1.useMemo)(() => {
-        const value = (0, themeVariables_1.defineTheme)(mergedThemeDefinition);
-        value._sub = true;
+        const value = (0, themeMethods_1.defineTheme)(mergedThemeDefinition);
         value.update = theme => {
-            const newThemeDefinition = typeof theme === 'function' ? theme(value) : theme;
-            setCurrentTheme(prev => {
-                return (0, utils_1.mergeDeep)({ ...prev }, newThemeDefinition);
-            });
+            setCurrentTheme(typeof theme === 'function' ? theme(value) : theme);
+        };
+        value.set = name => {
+            value.update((0, themeRegistry_1.getTheme)(name));
         };
         return value;
     }, [mergedThemeDefinition]);

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

@@ -0,0 +1,11 @@
+import { PartialTheme, ThemeDefinition } from './themeTypes';
+/**
+ * 将主题定义对象转换成使用对象
+ * @param themeDefinition
+ */
+export declare function defineTheme(themeDefinition: ThemeDefinition): PartialTheme;
+/**
+ * 将主题使用对象还原成定义对象
+ * @param theme
+ */
+export declare function restoreThemeDefinition(theme: PartialTheme): ThemeDefinition;

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

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineTheme = defineTheme;
+exports.restoreThemeDefinition = restoreThemeDefinition;
+const tslib_1 = require("tslib");
+const color_1 = tslib_1.__importDefault(require("color"));
+/**
+ * ---------------------------------------------------------------------
+ * 生成单个颜色的其他明亮度配色，0 至 10，数字越小颜色越淡（亮），数字越大颜色越深（暗）
+ */
+function defineColorMembers(color) {
+    const member = Array();
+    member.toString = () => color;
+    const colorObj = (0, color_1.default)(color);
+    for (let i = 0; i <= 4; i++) {
+        Object.defineProperty(member, i, {
+            get: () => colorObj.lighten(1 - (i + 1) / 6).hex()
+        });
+    }
+    member[5] = color;
+    for (let i = 6; i <= 10; i++) {
+        Object.defineProperty(member, i, {
+            get: () => colorObj.darken((i - 5) / 6).hex()
+        });
+    }
+    member.main = member[5];
+    Object.defineProperties(member, {
+        light: {
+            get: () => member[3]
+        },
+        dark: {
+            get: () => member[7]
+        }
+    });
+    return member;
+}
+/**
+ * 将主题定义对象转换成使用对象
+ * @param themeDefinition
+ */
+function defineTheme(themeDefinition) {
+    if (!themeDefinition.colors) {
+        return themeDefinition;
+    }
+    const colors = {};
+    for (const k in themeDefinition.colors) {
+        const color = themeDefinition.colors[k];
+        if (color) {
+            colors[k] = defineColorMembers(color);
+        }
+    }
+    return { ...themeDefinition, colors };
+}
+/**
+ * 将主题使用对象还原成定义对象
+ * @param theme
+ */
+function restoreThemeDefinition(theme) {
+    if (!theme.colors) {
+        return theme;
+    }
+    const colors = {};
+    for (const k in theme.colors) {
+        const colorMembers = theme.colors[k];
+        if (colorMembers) {
+            colors[k] = colorMembers.main;
+        }
+    }
+    return { ...theme, colors };
+}

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

@@ -0,0 +1,5 @@
+import { NamedThemeDefinition, ThemeDefinition } from './themeTypes';
+export declare const themeMap: Map<string, NamedThemeDefinition>;
+export declare function getTheme(name: string): NamedThemeDefinition;
+export declare function registerTheme(name: string, theme: ThemeDefinition): void;
+export declare function registerTheme(theme: NamedThemeDefinition): void;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themeMap = void 0;
+exports.getTheme = getTheme;
+exports.registerTheme = registerTheme;
+const themeVariables_1 = require("./themeVariables");
+exports.themeMap = new Map();
+function getTheme(name) {
+    const registeredTheme = exports.themeMap.get(name);
+    if (!registeredTheme) {
+        throw Error(`Cannot find theme "${name}", call "registerTheme()" first.`);
+    }
+    return registeredTheme;
+}
+function registerTheme(a, b) {
+    const theme = b ? { ...b, name: a } : { ...a };
+    exports.themeMap.set(theme.name, theme);
+}
+registerTheme(themeVariables_1.defaultLightTheme);
+registerTheme(themeVariables_1.defaultDarkTheme);

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

@@ -21,6 +21,7 @@ export type ThemeEasing = {
 };
 /** 主题的使用对象 */
 export type Theme = {
+    name: string;
     mode: ThemeMode;
     fontSize: number;
     fontFamily: string;
@@ -42,10 +43,9 @@ export type Theme = {
     breakpoints: ResponsiveValue;
     zoom: number;
     update: (themeDefinition: ThemeDefinition | ((currentTheme: Theme) => ThemeDefinition)) => void;
-    /** @private */
-    _sub?: boolean;
+    set: (name: string) => void;
 };
-export interface PartialTheme extends Partial<Omit<Theme, 'colors' | 'text' | 'background' | 'easing' | 'breakpoints' | 'update'>> {
+export interface PartialTheme extends Partial<Omit<Theme, 'colors' | 'text' | 'background' | 'easing' | 'breakpoints' | 'update' | 'set'>> {
     colors?: Partial<ThemeColors>;
     text?: Partial<ThemeTextColors>;
     background?: Partial<ThemeBackgroundColor>;
@@ -58,3 +58,6 @@ export interface ThemeDefinition extends Omit<PartialTheme, 'colors'> {
         [P in ColorPresets]?: string;
     };
 }
+export type NamedThemeDefinition = Omit<ThemeDefinition, 'name'> & {
+    name: string;
+};

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

@@ -1,15 +1,5 @@
 import { ResponsiveValue } from '../../types';
-import { PartialTheme, ThemeDefinition } from './themeTypes';
-/**
- * 将主题定义对象转换成使用对象
- * @param themeDefinition
- */
-export declare function defineTheme(themeDefinition: ThemeDefinition): PartialTheme;
-/**
- * 将主题使用对象还原成定义对象
- * @param theme
- */
-export declare function restoreThemeDefinition(theme: PartialTheme): ThemeDefinition;
+import { NamedThemeDefinition } from './themeTypes';
 /**
  * ---------------------------------------------------------------------
  * 统一全局zIndex
@@ -30,9 +20,11 @@ export declare const defaultMonospaceFontFamily = "'Consolas', 'SF Mono', 'Casca
  * ---------------------------------------------------------------------
  * 默认的明亮主题配置
  */
-export declare const defaultLightTheme: ThemeDefinition;
+export declare const DEFAULT_LIGHT: "default-light";
+export declare const defaultLightTheme: NamedThemeDefinition;
 /**
  * ---------------------------------------------------------------------
  * 默认的黑暗主题配置
  */
-export declare const defaultDarkTheme: ThemeDefinition;
+export declare const DEFAULT_DARK: "default-dark";
+export declare const defaultDarkTheme: NamedThemeDefinition;

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

@@ -1,8 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultDarkTheme = exports.defaultLightTheme = exports.defaultMonospaceFontFamily = exports.defaultFontFamily = exports.defaultBreakpoints = exports.zIndex = void 0;
-exports.defineTheme = defineTheme;
-exports.restoreThemeDefinition = restoreThemeDefinition;
+exports.defaultDarkTheme = exports.DEFAULT_DARK = exports.defaultLightTheme = exports.DEFAULT_LIGHT = exports.defaultMonospaceFontFamily = exports.defaultFontFamily = exports.defaultBreakpoints = exports.zIndex = void 0;
 const tslib_1 = require("tslib");
 const color_1 = tslib_1.__importDefault(require("color"));
 /**
@@ -28,70 +26,6 @@ function generateSpacing() {
     }
     return spacing;
 }
-/**
- * ---------------------------------------------------------------------
- * 生成单个颜色的其他明亮度配色，0 至 10，数字越小颜色越淡（亮），数字越大颜色越深（暗）
- */
-function defineColorMembers(color) {
-    const member = Array();
-    member.toString = () => color;
-    const colorObj = (0, color_1.default)(color);
-    for (let i = 0; i <= 4; i++) {
-        Object.defineProperty(member, i, {
-            get: () => colorObj.lighten(1 - (i + 1) / 6).hex()
-        });
-    }
-    member[5] = color;
-    for (let i = 6; i <= 10; i++) {
-        Object.defineProperty(member, i, {
-            get: () => colorObj.darken((i - 5) / 6).hex()
-        });
-    }
-    member.main = member[5];
-    Object.defineProperties(member, {
-        light: {
-            get: () => member[3]
-        },
-        dark: {
-            get: () => member[7]
-        }
-    });
-    return member;
-}
-/**
- * 将主题定义对象转换成使用对象
- * @param themeDefinition
- */
-function defineTheme(themeDefinition) {
-    if (!themeDefinition.colors) {
-        return themeDefinition;
-    }
-    const colors = {};
-    for (const k in themeDefinition.colors) {
-        const color = themeDefinition.colors[k];
-        if (color) {
-            colors[k] = defineColorMembers(color);
-        }
-    }
-    return { ...themeDefinition, colors };
-}
-/**
- * 将主题使用对象还原成定义对象
- * @param theme
- */
-function restoreThemeDefinition(theme) {
-    if (!theme.colors) {
-        return theme;
-    }
-    const colors = {};
-    for (const k in theme.colors) {
-        const colorMembers = theme.colors[k];
-        if (colorMembers) {
-            colors[k] = colorMembers.main;
-        }
-    }
-    return { ...theme, colors };
-}
 /**
  * ---------------------------------------------------------------------
  * 统一全局zIndex
@@ -121,7 +55,9 @@ exports.defaultMonospaceFontFamily = `'Consolas', 'SF Mono', 'Cascadia Code', 'M
  * ---------------------------------------------------------------------
  * 默认的明亮主题配置
  */
+exports.DEFAULT_LIGHT = 'default-light';
 exports.defaultLightTheme = {
+    name: exports.DEFAULT_LIGHT,
     mode: 'light',
     fontSize: 14,
     fontFamily: exports.defaultFontFamily,
@@ -185,7 +121,9 @@ exports.defaultLightTheme = {
  * ---------------------------------------------------------------------
  * 默认的黑暗主题配置
  */
+exports.DEFAULT_DARK = 'default-dark';
 exports.defaultDarkTheme = {
+    name: exports.DEFAULT_DARK,
     mode: 'dark',
     background: {
         /* content: rGray(.14), */

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

@@ -23,8 +23,8 @@ function useStyle({ indent }) {
     return [
         (0, utils_1.useCss)(({ spacing, mode, borderRadius, text, easing, gray, divider, colors }) => {
             const c = (0, color_1.default)(colors.primary.main);
-            const hover = gray(mode === 'light' ? .05 : .2);
-            const active = gray(mode === 'light' ? .1 : .12);
+            const hover = gray(mode === 'light' ? .05 : .18);
+            const active = gray(mode === 'light' ? .1 : .22);
             const selectedBg = c.alpha(mode === 'light' ? .1 : .2).string();
             const selectedHover = c.alpha(mode === 'light' ? .07 : .17).string();
             const selectedActive = c.alpha(mode === 'light' ? .13 : .23).string();
@@ -98,7 +98,6 @@ function useStyle({ indent }) {
                     }
 
                     &:not(:has([data-dragging=true])) {
-                    {
                         .${exports.classes.node} {
                             &[data-selected=true] {
                                 background-color: ${selectedBg};
@@ -123,7 +122,6 @@ function useStyle({ indent }) {
                             }
                         }
                     }
-                    }
 
                     &[data-show-line=true] {
                         .${exports.classes.indent}::after {

package/dist/cjs/components/tree/treeDnd.style.js

@@ -36,7 +36,7 @@ function useStyle({ indent }) {
                 width: 20px;
                 margin-right: ${spacing[3]}px;
                 text-align: center;
-                color: ${gray(.12)};
+                color: ${mode === 'light' ? gray(.16) : gray(.32)};
                 cursor: grab;
             }
 

package/dist/esm/components/card/card.d.ts

@@ -4,7 +4,7 @@ export interface CardProps extends FlexProps {
     flexable?: boolean;
     /** 是否显示边框，默认为`false` */
     bordered?: boolean;
-    /** @ 支持0-5，明亮主题表示阴影的程度，默认为`0`; 暗黑主题表示背景色，默认为`2` */
+    /** 支持0-5，明亮主题表示阴影的程度, 暗黑主题表示背景色，默认为`0` */
     elevation?: number;
     /** 默认为{@link Theme.borderRadius} */
     borderRadius?: number;

package/dist/esm/components/card/card.js

@@ -3,10 +3,9 @@ import { classes, style } from './card.style';
 import { clsx } from '../../utils';
 import { useTheme } from '../theme';
 import { Flex } from '../flex';
-export function Card({ flexable, bordered, elevation, borderRadius, ...props }) {
+export function Card({ flexable, bordered, elevation = 0, borderRadius, ...props }) {
     const theme = useTheme();
     borderRadius ??= theme.borderRadius;
-    elevation ??= theme.mode === 'light' ? 0 : 2;
     return (_jsx(Flex, { direction: "column", ...props, css: style, className: clsx(classes.root, props.className), style: {
             display: flexable ? 'flex' : void 0,
             borderRadius,