@canlooks/can-ui 0.0.98 → 0.0.100

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

@@ -8,36 +8,38 @@ exports.classes = (0, utils_1.defineInnerClasses)('textarea', [
     'textarea'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
-    height: auto;
+    @layer reset {
+        height: auto;
 
-    &[data-size] {
-        padding: 1px;
-    }
-
-    .${exports.classes.textarea} {
-        flex: 1;
-        border: none;
-        outline: none;
-        background-color: transparent;
-        font-size: 1em;
-        padding: ${spacing[3]}px;
-        display: block;
-    }
+        &[data-size] {
+            padding: 1px;
+        }
 
-    &[data-full-width=true] {
         .${exports.classes.textarea} {
-            min-width: 100%;
-            max-width: 100%;
+            flex: 1;
+            border: none;
+            outline: none;
+            background-color: transparent;
+            font-size: 1em;
+            padding: ${spacing[3]}px;
+            display: block;
         }
-    }
 
-    &:not([data-full-width=true]) {
-        display: inline-flex;
-    }
+        &[data-full-width=true] {
+            .${exports.classes.textarea} {
+                min-width: 100%;
+                max-width: 100%;
+            }
+        }
 
-    .${inputBase_style_1.classes.clear} {
-        position: absolute;
-        top: ${spacing[2]}px;
-        right: ${spacing[3]}px;
+        &:not([data-full-width=true]) {
+            display: inline-flex;
+        }
+
+        .${inputBase_style_1.classes.clear} {
+            position: absolute;
+            top: ${spacing[2]}px;
+            right: ${spacing[3]}px;
+        }
     }
 `);

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

@@ -25,6 +25,7 @@ export declare const zIndex: {
 };
 export declare const defaultBreakpoints: ResponsiveValue;
 export declare const defaultFontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji',\n    'Segoe UI Symbol', 'Noto Color Emoji', 'Microsoft YaHei UI', sans-serif";
+export declare const defaultMonospaceFontFamily = "'Consolas', 'SF Mono', 'Cascadia Code', 'Menlo',\n    'DejaVu Sans Mono', 'Ubuntu Mono', monospace";
 /**
  * ---------------------------------------------------------------------
  * 默认的明亮主题配置

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultDarkTheme = exports.defaultLightTheme = exports.defaultFontFamily = exports.defaultBreakpoints = exports.zIndex = void 0;
+exports.defaultDarkTheme = exports.defaultLightTheme = exports.defaultMonospaceFontFamily = exports.defaultFontFamily = exports.defaultBreakpoints = exports.zIndex = void 0;
 exports.defineTheme = defineTheme;
 exports.restoreThemeDefinition = restoreThemeDefinition;
 const tslib_1 = require("tslib");
@@ -115,6 +115,8 @@ exports.defaultBreakpoints = {
 exports.defaultFontFamily = `-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`;
+exports.defaultMonospaceFontFamily = `'Consolas', 'SF Mono', 'Cascadia Code', 'Menlo',
+    'DejaVu Sans Mono', 'Ubuntu Mono', monospace`;
 /**
  * ---------------------------------------------------------------------
  * 默认的明亮主题配置

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

@@ -6,59 +6,61 @@ const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 exports.classes = (0, utils_1.defineInnerClasses)('timeline', ['item', 'opposite', 'dotArea', 'dot', 'content']);
 exports.style = (0, utils_1.defineCss)(() => (0, react_1.css) `
-    display: flex;
-    flex-direction: column;
-
-    &[data-orientation=vertical] {
-        &[data-label-position='alternate'],
-        &[data-label-position='alternate-reverse'],
-        &:has(.${exports.classes.opposite}[data-show=true]) {
-            .${exports.classes.opposite} {
-                display: flex;
-            }
-        }
-    
-        &[data-label-position='start'] .${exports.classes.item}, &[data-label-position='alternate'] .${exports.classes.item}:nth-of-type(even),
-        &[data-label-position='alternate-reverse'] .${exports.classes.item}:nth-of-type(odd) {
-            flex-direction: row-reverse;
-    
-            .${exports.classes.content} {
-                align-items: flex-end;
-            }
-    
-            .${exports.classes.opposite} {
-                align-items: stretch;
+    @layer reset {
+        display: flex;
+        flex-direction: column;
+
+        &[data-orientation=vertical] {
+            &[data-label-position='alternate'],
+            &[data-label-position='alternate-reverse'],
+            &:has(.${exports.classes.opposite}[data-show=true]) {
+                .${exports.classes.opposite} {
+                    display: flex;
+                }
             }
-        }
-    }
 
-    &[data-orientation=horizontal] {
-        flex-direction: row;
+            &[data-label-position='start'] .${exports.classes.item}, &[data-label-position='alternate'] .${exports.classes.item}:nth-of-type(even),
+            &[data-label-position='alternate-reverse'] .${exports.classes.item}:nth-of-type(odd) {
+                flex-direction: row-reverse;
 
-        &[data-label-position='alternate'],
-        &[data-label-position='alternate-reverse'],
-        &:has(.${exports.classes.opposite}[data-show=true]) {
-            .${exports.classes.opposite} {
-                display: flex;
+                .${exports.classes.content} {
+                    align-items: flex-end;
+                }
 
-                &:before {
-                    content: '1';
-                    width: 0;
-                    overflow: hidden;
+                .${exports.classes.opposite} {
+                    align-items: stretch;
                 }
             }
         }
-    
-        &[data-label-position='start'] .${exports.classes.item}, &[data-label-position='alternate'] .${exports.classes.item}:nth-of-type(even),
-        &[data-label-position='alternate-reverse'] .${exports.classes.item}:nth-of-type(odd) {
-            flex-direction: column-reverse;
-    
-            .${exports.classes.content} {
-                align-items: flex-end;
+
+        &[data-orientation=horizontal] {
+            flex-direction: row;
+
+            &[data-label-position='alternate'],
+            &[data-label-position='alternate-reverse'],
+            &:has(.${exports.classes.opposite}[data-show=true]) {
+                .${exports.classes.opposite} {
+                    display: flex;
+
+                    &::before {
+                        content: '1';
+                        width: 0;
+                        overflow: hidden;
+                    }
+                }
             }
-    
-            .${exports.classes.opposite} {
-                align-items: stretch;
+
+            &[data-label-position='start'] .${exports.classes.item}, &[data-label-position='alternate'] .${exports.classes.item}:nth-of-type(even),
+            &[data-label-position='alternate-reverse'] .${exports.classes.item}:nth-of-type(odd) {
+                flex-direction: column-reverse;
+
+                .${exports.classes.content} {
+                    align-items: flex-end;
+                }
+
+                .${exports.classes.opposite} {
+                    align-items: stretch;
+                }
             }
         }
     }
@@ -66,89 +68,91 @@ exports.style = (0, utils_1.defineCss)(() => (0, react_1.css) `
 function useTimelineItemStyle({ color }) {
     const colorValue = (0, utils_1.useColor)(color);
     return (0, utils_1.useCss)(({ spacing, divider }) => (0, react_1.css) `
-        display: flex;
-        gap: ${spacing[3]}px ${spacing[5]}px;
-
-        .${exports.classes.dotArea} {
+        @layer reset {
             display: flex;
-            align-items: baseline;
-            position: relative;
+            gap: ${spacing[3]}px ${spacing[5]}px;
 
-            &:before {
-                content: '1';
-                width: 0;
-                overflow: hidden;
-            }
+            .${exports.classes.dotArea} {
+                display: flex;
+                align-items: baseline;
+                position: relative;
 
-            &:after {
-                content: '';
-                background-color: ${divider};
-                position: absolute;
-            }
-        }
+                &::before {
+                    content: '1';
+                    width: 0;
+                    overflow: hidden;
+                }
 
-        .${exports.classes.dot} {
-            width: 9px;
-            height: 9px;
-            border: 2px solid ${colorValue};
-            border-radius: 50%;
-        }
+                &::after {
+                    content: '';
+                    background-color: ${divider};
+                    position: absolute;
+                }
+            }
 
-        &[data-variant='filled'] {
             .${exports.classes.dot} {
-                background-color: ${colorValue};
+                width: 9px;
+                height: 9px;
+                border: 2px solid ${colorValue};
+                border-radius: 50%;
             }
-        }
 
-        .${exports.classes.content}, .${exports.classes.opposite} {
-            flex-direction: column;
-            flex: 1;
-        }
-
-        .${exports.classes.content} {
-            display: flex;
-        }
-
-        .${exports.classes.opposite} {
-            align-items: flex-end;
-            display: none;
-        }
-
-        &:not(:last-of-type) {
-            .${exports.classes.dotArea}:after {
-                width: 1px;
-                height: calc(100% - 1.5em);
-                bottom: 0;
-                left: 4px;
+            &[data-variant='filled'] {
+                .${exports.classes.dot} {
+                    background-color: ${colorValue};
+                }
             }
 
             .${exports.classes.content}, .${exports.classes.opposite} {
-                padding-bottom: ${spacing[6]}px;
+                flex-direction: column;
+                flex: 1;
             }
-        }
 
-        &[data-orientation=horizontal] {
-            flex-direction: column;
+            .${exports.classes.content} {
+                display: flex;
+            }
 
-            .${exports.classes.dotArea} {
-                &:before {
-                    display: none;
-                }
+            .${exports.classes.opposite} {
+                align-items: flex-end;
+                display: none;
             }
 
             &:not(:last-of-type) {
-                .${exports.classes.dotArea}:after {
-                    width: calc(100% - 9px - 8px);
-                    height: 1px;
-                    bottom: 4px;
-                    left: auto;
-                    right: 4px;
+                .${exports.classes.dotArea}::after {
+                    width: 1px;
+                    height: calc(100% - 1.5em);
+                    bottom: 0;
+                    left: 4px;
+                }
+
+                .${exports.classes.content}, .${exports.classes.opposite} {
+                    padding-bottom: ${spacing[6]}px;
                 }
             }
 
-            .${exports.classes.content}, .${exports.classes.opposite} {
-                padding-bottom: 0;
-                padding-right: ${spacing[6]}px;
+            &[data-orientation=horizontal] {
+                flex-direction: column;
+
+                .${exports.classes.dotArea} {
+                    &::before {
+                        display: none;
+                    }
+                }
+
+                &:not(:last-of-type) {
+                    .${exports.classes.dotArea}::after {
+                        width: calc(100% - 9px - 8px);
+                        height: 1px;
+                        bottom: 4px;
+                        left: auto;
+                        right: 4px;
+                    }
+                }
+
+                .${exports.classes.content}, .${exports.classes.opposite} {
+                    padding-bottom: 0;
+                    padding-right: ${spacing[6]}px;
+                }
             }
         }
     `, [colorValue]);

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

@@ -6,12 +6,14 @@ const react_1 = require("@emotion/react");
 const button_style_1 = require("../button/button.style");
 exports.classes = (0, utils_1.defineInnerClasses)('buttonGroup');
 exports.style = (0, utils_1.defineCss)(({ divider }) => (0, react_1.css) `
-    .${button_style_1.classes.root}[data-variant=outlined] {
-        border-color: ${divider};
+    @layer reset {
+        .${button_style_1.classes.root}[data-variant=outlined] {
+            border-color: ${divider};
 
-        &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
-            &:hover {
-                color: inherit;
+            &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                &:hover {
+                    color: inherit;
+                }
             }
         }
     }

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

@@ -15,18 +15,20 @@ function useStyle({ color }) {
     let colorValue = (0, utils_1.useColor)(color);
     colorValue = (0, color_1.default)(colorValue).alpha(.7).string();
     return (0, utils_1.useCss)(({ spacing, borderRadius, boxShadow }) => (0, react_1.css) `
-        pointer-events: none;
-        z-index: ${theme_1.zIndex.tooltip};
+        @layer reset {
+            pointer-events: none;
+            z-index: ${theme_1.zIndex.tooltip};
 
-        .${exports.classes.title} {
-            font-size: ${13 / 14}em;
-            padding: ${spacing[2]}px ${spacing[3]}px;
-            background-color: ${colorValue};
-            color: #ffffff;
-            border-radius: ${borderRadius}px;
-            box-shadow: ${boxShadow[0]};
-        }
+            .${exports.classes.title} {
+                font-size: ${13 / 14}em;
+                padding: ${spacing[2]}px ${spacing[3]}px;
+                background-color: ${colorValue};
+                color: #ffffff;
+                border-radius: ${borderRadius}px;
+                box-shadow: ${boxShadow[0]};
+            }
 
-        ${(0, popper_style_1.popperArrowStyle)(colorValue)}
+            ${(0, popper_style_1.popperArrowStyle)(colorValue)}
+        }
     `, [colorValue]);
 }

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

@@ -13,24 +13,26 @@ exports.classes = (0, utils_1.defineInnerClasses)('touch-ripple-overlay', [
 function useStyle({ color }) {
     const colorValue = (0, utils_1.useColor)(color);
     return (0, utils_1.useCss)(({ easing }) => (0, react_1.css) `
-        position: absolute;
-        inset: 0;
-        z-index: ${theme_1.zIndex.touchRipple};
-        overflow: hidden;
-        pointer-events: none;
-        
-        .${exports.classes.ripple} {
-            aspect-ratio: 1;
-            border-radius: 50%;
-            background-color: ${(0, color_1.default)(colorValue).alpha(.1).string()};
+        @layer reset {
             position: absolute;
-            scale: 0;
-            translate: -50% -50%;
-            animation: ${rippleAnim} .4s ${easing.easeOut} forwards;
-            transition: opacity .4s ${easing.easeIn};
-            
-            &[data-leaving=true] {
-                opacity: 0;
+            inset: 0;
+            z-index: ${theme_1.zIndex.touchRipple};
+            overflow: hidden;
+            pointer-events: none;
+
+            .${exports.classes.ripple} {
+                aspect-ratio: 1;
+                border-radius: 50%;
+                background-color: ${(0, color_1.default)(colorValue).alpha(.1).string()};
+                position: absolute;
+                scale: 0;
+                translate: -50% -50%;
+                animation: ${rippleAnim} .4s ${easing.easeOut} forwards;
+                transition: opacity .4s ${easing.easeIn};
+
+                &[data-leaving=true] {
+                    opacity: 0;
+                }
             }
         }
     `, [colorValue]);

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

@@ -15,60 +15,62 @@ exports.classes = (0, utils_1.defineInnerClasses)('transfer', [
     'buttons',
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing, background, divider, borderRadius, text }) => (0, react_1.css) `
-    display: inline-flex;
-    gap: ${spacing[3]}px;
-
-    .${exports.classes.panel} {
-        width: 180px;
-        background-color: ${background.content};
-        border: 1px solid ${divider};
-        border-radius: ${borderRadius}px;
-        display: flex;
-        flex-direction: column;
+    @layer reset {
+        display: inline-flex;
+        gap: ${spacing[3]}px;
 
-        .${exports.classes.header} {
+        .${exports.classes.panel} {
+            width: 180px;
+            background-color: ${background.content};
+            border: 1px solid ${divider};
+            border-radius: ${borderRadius}px;
             display: flex;
-            gap: ${spacing[2]}px;
-            align-items: center;
-            padding: 10px 16px;
-            border-bottom: 1px solid ${divider};
+            flex-direction: column;
 
-            .${exports.classes.checkbox} {
+            .${exports.classes.header} {
                 display: flex;
-            }
+                gap: ${spacing[2]}px;
+                align-items: center;
+                padding: 10px 16px;
+                border-bottom: 1px solid ${divider};
 
-            .${exports.classes.title} {
-                flex: 1
-            }
+                .${exports.classes.checkbox} {
+                    display: flex;
+                }
+
+                .${exports.classes.title} {
+                    flex: 1
+                }
 
-            .${exports.classes.count} {
-                color: ${text.secondary};
+                .${exports.classes.count} {
+                    color: ${text.secondary};
+                }
             }
-        }
 
-        .${exports.classes.list} {
-            flex: 1;
-            padding: ${menuItem_style_1.menuListPadding}px;
+            .${exports.classes.list} {
+                flex: 1;
+                padding: ${menuItem_style_1.menuListPadding}px;
 
-            > * {
-                width: 100%;
-                height: 100%;
+                > * {
+                    width: 100%;
+                    height: 100%;
+                }
             }
         }
-    }
 
-    &[data-full-width=true] {
-        width: 100%;
+        &[data-full-width=true] {
+            width: 100%;
 
-        .${exports.classes.panel} {
-            flex: 1;
+            .${exports.classes.panel} {
+                flex: 1;
+            }
         }
-    }
 
-    .${exports.classes.buttons} {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        gap: ${spacing[3]}px;
+        .${exports.classes.buttons} {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            gap: ${spacing[3]}px;
+        }
     }
 `);