@canlooks/can-ui 0.0.98 → 0.0.100

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

@@ -32,119 +32,121 @@ function useStyle({ color }) {
         const focusedBg = gray(mode === 'light' ? .05 : .23);
         const disabledOrActive = gray(mode === 'light' ? .1 : .17);
         return (0, react_1.css) `
-            display: flex;
-            align-items: center;
-            gap: ${spacing[3]}px;
-            border-radius: ${borderRadius}px;
-            cursor: pointer;
-            color: ${text.primary};
-            padding: ${exports.paddingHorizontal.medium}px 12px;
-            position: relative;
-            -webkit-tap-highlight-color: transparent;
-            
-            &[data-size=small] {
-                gap: ${spacing[2]}px;
-                padding: ${exports.paddingHorizontal.small}px 6px;
-            }
-        
-            &[data-size=large] {
-                gap: ${spacing[4]}px;
-                padding: ${exports.paddingHorizontal.large}px 15px;
-            }
-        
-            transition: background-color .25s ${easing.easeOut};
-        
-            &:hover, &[data-focused=true] {
-                background-color: ${focusedBg};
-            }
+            @layer reset {
+                display: flex;
+                align-items: center;
+                gap: ${spacing[3]}px;
+                border-radius: ${borderRadius}px;
+                cursor: pointer;
+                color: ${text.primary};
+                padding: ${exports.paddingHorizontal.medium}px 12px;
+                position: relative;
+                -webkit-tap-highlight-color: transparent;
 
-            &[data-emphasized=true] {
-                color: ${colorValue};
-            }
-        
-            &:active {
-                transition: background-color 0s;
-                background-color: ${disabledOrActive};
-            }
-        
-            &[data-selected=true] {
-                background-color: ${selectedBg};
+                &[data-size=small] {
+                    gap: ${spacing[2]}px;
+                    padding: ${exports.paddingHorizontal.small}px 6px;
+                }
+
+                &[data-size=large] {
+                    gap: ${spacing[4]}px;
+                    padding: ${exports.paddingHorizontal.large}px 15px;
+                }
+
+                transition: background-color .25s ${easing.easeOut};
 
                 &:hover, &[data-focused=true] {
-                    background-color: ${selectedAndFocused};
+                    background-color: ${focusedBg};
                 }
 
-                .${exports.classes.content} {
-                    font-weight: bold;
+                &[data-emphasized=true] {
                     color: ${colorValue};
                 }
-                
+
                 &:active {
-                    background-color: ${selectedActive};
+                    transition: background-color 0s;
+                    background-color: ${disabledOrActive};
                 }
-            }
 
-            &[data-disabled=true] {
-                cursor: not-allowed;
-                color: ${text.disabled};
-                background-color: ${disabledOrActive};
-            }
+                &[data-selected=true] {
+                    background-color: ${selectedBg};
 
-            .${exports.classes.checkbox} {
-                display: flex;
-            }
+                    &:hover, &[data-focused=true] {
+                        background-color: ${selectedAndFocused};
+                    }
 
-            .${exports.classes.content} {
-                flex: 1;
-            }
+                    .${exports.classes.content} {
+                        font-weight: bold;
+                        color: ${colorValue};
+                    }
+
+                    &:active {
+                        background-color: ${selectedActive};
+                    }
+                }
+
+                &[data-disabled=true] {
+                    cursor: not-allowed;
+                    color: ${text.disabled};
+                    background-color: ${disabledOrActive};
+                }
+
+                .${exports.classes.checkbox} {
+                    display: flex;
+                }
 
-            &[data-ellipsis=true] {
                 .${exports.classes.content} {
+                    flex: 1;
+                }
+
+                &[data-ellipsis=true] {
+                    .${exports.classes.content} {
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                }
+
+                .${exports.classes.suffix} {
+                    max-width: 70%;
                     white-space: nowrap;
-                    overflow: hidden;
                     text-overflow: ellipsis;
+                    overflow: hidden;
                 }
-            }
 
-            .${exports.classes.suffix} {
-                max-width: 70%;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                overflow: hidden;
-            }
+                .${exports.classes.prefix} {
+                    color: ${text.secondary};
+                }
 
-            .${exports.classes.prefix} {
-                color: ${text.secondary};
-            }
+                &[data-emphasized=true],
+                &[data-selected=true] {
+                    .${exports.classes.prefix} {
+                        color: ${colorValue};
+                    }
+                }
 
-            &[data-emphasized=true],
-            &[data-selected=true] {
-                .${exports.classes.prefix} {
-                    color: ${colorValue};
+                &:has(+ .${exports.classes.children} .${exports.classes.root}[data-selected=true]) {
+                    .${exports.classes.content} {
+                        color: ${colorValue};
+                    }
+
+                    .${exports.classes.prefix},
+                    .${exports.classes.arrow} {
+                        color: ${colorValue};
+                    }
                 }
-            }
 
-            &:has(+ .${exports.classes.children} .${exports.classes.root}[data-selected=true]) {
-                .${exports.classes.content} {
-                    color: ${colorValue};
+                .${exports.classes.suffix} {
+                    color: ${text.disabled};
                 }
 
-                .${exports.classes.prefix},
                 .${exports.classes.arrow} {
-                    color: ${colorValue};
-                }
-            }
-            
-            .${exports.classes.suffix} {
-                color: ${text.disabled};
-            }
+                    color: ${text.placeholder};
+                    transition: transform .25s ${easing.easeOut};
 
-            .${exports.classes.arrow} {
-                color: ${text.placeholder};
-                transition: transform .25s ${easing.easeOut};
-        
-                &[data-open=true] {
-                    transform: rotate(180deg);
+                    &[data-open=true] {
+                        transform: rotate(180deg);
+                    }
                 }
             }
         `;
@@ -152,8 +154,10 @@ function useStyle({ color }) {
 }
 exports.menuListPadding = 4;
 exports.childrenStyle = (0, utils_1.defineCss)(({ background }) => (0, react_1.css) `
-    .${exports.classes.childrenWrap} {
-        padding: ${exports.menuListPadding}px;
-        background-color: ${background.fixed};
+    @layer reset {
+        .${exports.classes.childrenWrap} {
+            padding: ${exports.menuListPadding}px;
+            background-color: ${background.fixed};
+        }
     }
 `);

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

@@ -7,16 +7,18 @@ exports.classes = (0, utils_1.defineInnerClasses)('modal', [
     'modal',
 ]);
 exports.style = (0, react_1.css) `
-    .${exports.classes.modal} {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        pointer-events: none;
+    @layer reset {
+        .${exports.classes.modal} {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            pointer-events: none;
 
-        > * {
-            pointer-events: all;
+            > * {
+                pointer-events: all;
+            }
         }
     }
 `;

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

@@ -7,15 +7,17 @@ exports.classes = (0, utils_1.defineInnerClasses)('options-base', [
     'optionsList'
 ]);
 exports.style = (0, react_1.css) `
-    .${exports.classes.optionsList} {
-        width: 100%;
-        height: 100%;
-        flex: 1;
-        overflow: hidden;
-        max-height: ${32 * 8}px;
+    @layer reset {
+        .${exports.classes.optionsList} {
+            width: 100%;
+            height: 100%;
+            flex: 1;
+            overflow: hidden;
+            max-height: ${32 * 8}px;
 
-        &:hover {
-            overflow: hidden auto;
+            &:hover {
+                overflow: hidden auto;
+            }
         }
     }
 `;

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

@@ -12,22 +12,24 @@ exports.style = (0, utils_1.defineCss)(theme => {
     return [
         (0, app_style_1.appStyleCallback)(theme),
         (0, react_1.css) `
-            position: fixed;
-            inset: 0;
-            z-index: ${theme_1.zIndex.overlay};
+            @layer reset {
+                position: fixed;
+                inset: 0;
+                z-index: ${theme_1.zIndex.overlay};
 
-            &[data-custom-container=true] {
-                position: absolute;
-            }
+                &[data-custom-container=true] {
+                    position: absolute;
+                }
 
-            .${exports.classes.mask} {
-                background-color: rgba(0, 0, 0, .5);
-                position: absolute;
-                inset: 0;
-            }
+                .${exports.classes.mask} {
+                    background-color: rgba(0, 0, 0, .5);
+                    position: absolute;
+                    inset: 0;
+                }
 
-            &:not([data-open=true]) {
-                pointer-events: none;
+                &:not([data-open=true]) {
+                    pointer-events: none;
+                }
             }
         `
     ];

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

@@ -13,43 +13,45 @@ exports.classes = (0, utils_1.defineInnerClasses)('pagination', [
     'counter'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-end;
-    gap: ${spacing[3]}px;
-
-    .${exports.classes.pager} {
+    @layer reset {
         display: flex;
-    }
-
-    .${exports.classes.button} {
-        padding-left: 3px;
-        padding-right: 3px;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: flex-end;
+        gap: ${spacing[3]}px;
 
-        &[data-size=small] {
-            min-width: 24px;
+        .${exports.classes.pager} {
+            display: flex;
         }
 
-        &[data-size=medium] {
-            min-width: 32px;
-        }
+        .${exports.classes.button} {
+            padding-left: 3px;
+            padding-right: 3px;
+
+            &[data-size=small] {
+                min-width: 24px;
+            }
 
-        &[data-size=large] {
-            min-width: 40px;
+            &[data-size=medium] {
+                min-width: 32px;
+            }
+
+            &[data-size=large] {
+                min-width: 40px;
+            }
         }
-    }
 
-    .${exports.classes.jumper} {
-        display: flex;
-        align-items: center;
-        gap: ${spacing[3]}px;
-        
-        .${exports.classes.input} {
-            width: 45px;
+        .${exports.classes.jumper} {
+            display: flex;
+            align-items: center;
+            gap: ${spacing[3]}px;
+
+            .${exports.classes.input} {
+                width: 45px;
 
-            .${input_style_1.classes.input} {
-                text-align: center;
+                .${input_style_1.classes.input} {
+                    text-align: center;
+                }
             }
         }
     }

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

@@ -17,5 +17,5 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const getTranparentBackground: (a: string, b: string) => string;
+export declare const getTransparentBackground: (a: string, b: string) => string;
 export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.style = exports.getTranparentBackground = exports.classes = void 0;
+exports.style = exports.getTransparentBackground = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const slider_style_1 = require("../slider/slider.style");
@@ -21,145 +21,147 @@ exports.classes = (0, utils_1.defineInnerClasses)('palette', [
     'input',
     'inputItemLabel'
 ]);
-const getTranparentBackground = (a, b) => `background-image: conic-gradient(${a} 0 25%, ${b} 25% 50%, ${a} 50% 75%, ${b} 75% 100%);`;
-exports.getTranparentBackground = getTranparentBackground;
+const getTransparentBackground = (a, b) => `background-image: conic-gradient(${a} 0 25%, ${b} 25% 50%, ${a} 50% 75%, ${b} 75% 100%);`;
+exports.getTransparentBackground = getTransparentBackground;
 exports.style = (0, utils_1.defineCss)(({ spacing, borderRadius, background, divider, text }) => (0, react_1.css) `
-    width: 240px;
-    display: flex;
-    flex-direction: column;
-    gap: ${spacing[3]}px;
-    user-select: none;
-    
-    .${exports.classes.main} {
-        aspect-ratio: 3 / 2;
-        border-radius: ${borderRadius}px;
-        /* overflow: hidden; */
-        position: relative;
-        touch-action: none;
-    
-        .${exports.classes.mask} {
-            background-image: linear-gradient(0deg, #000, transparent);
-            border-radius: inherit;
-            position: absolute;
-            inset: 0;
-            pointer-events: none;
-        }
-    
-        .${exports.classes.handle} {
-            cursor: pointer;
-            width: 12px;
-            height: 12px;
-            border: 2px solid #ffffff;
-            border-radius: 50%;
-            box-shadow: 0 0 2px ${text.primary}, inset 0 0 1px ${text.primary};
-            position: absolute;
-            transform: translate(-50%, -50%);
-        }
-    }
-    
-    .${exports.classes.slidersRow} {
+    @layer reset {
+        width: 240px;
         display: flex;
+        flex-direction: column;
         gap: ${spacing[3]}px;
-    
-        .${exports.classes.sliders} {
-            flex: 1;
+        user-select: none;
+
+        .${exports.classes.main} {
+            aspect-ratio: 3 / 2;
+            border-radius: ${borderRadius}px;
+            /* overflow: hidden; */
+            position: relative;
+            touch-action: none;
+
+            .${exports.classes.mask} {
+                background-image: linear-gradient(0deg, #000, transparent);
+                border-radius: inherit;
+                position: absolute;
+                inset: 0;
+                pointer-events: none;
+            }
+
+            .${exports.classes.handle} {
+                cursor: pointer;
+                width: 12px;
+                height: 12px;
+                border: 2px solid #ffffff;
+                border-radius: 50%;
+                box-shadow: 0 0 2px ${text.primary}, inset 0 0 1px ${text.primary};
+                position: absolute;
+                transform: translate(-50%, -50%);
+            }
+        }
+
+        .${exports.classes.slidersRow} {
             display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-    
-            .${slider_style_1.classes.root} {
-                min-height: 0;
-    
-                .${slider_style_1.classes.handle} {
-                    background-color: transparent;
-                    border-color: #ffffff;
-                    box-shadow: 0 0 2px #000000, inset 0 0 1px #000000;
+            gap: ${spacing[3]}px;
+
+            .${exports.classes.sliders} {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+
+                .${slider_style_1.classes.root} {
+                    min-height: 0;
+
+                    .${slider_style_1.classes.handle} {
+                        background-color: transparent;
+                        border-color: #ffffff;
+                        box-shadow: 0 0 2px #000000, inset 0 0 1px #000000;
+                    }
                 }
-            }
-    
-            .${exports.classes.hue} {
-                .${slider_style_1.classes.rail} {
-                    background-image: linear-gradient(90deg,
+
+                .${exports.classes.hue} {
+                    .${slider_style_1.classes.rail} {
+                        background-image: linear-gradient(90deg,
                         #f00 0%,
                         #ff0 ${100 / 6}%,
                         #0f0 ${100 / 6 * 2}%,
                         #0ff 50%, #00f ${100 / 6 * 4}%,
                         #f0f ${100 / 6 * 5}%,
                         #f00 100%
-                    );
-                }
-            }
-    
-            .${exports.classes.alpha} {
-                .${slider_style_1.classes.rail} {
-                    position: relative;
-                    background-color: transparent;
-    
-                    &:before,
-                    .${exports.classes.alphaMask} {
-                        border-radius: inherit;
-                        position: absolute;
-                        inset: 0;
+                        );
                     }
-    
-                    &:before {
-                        content: '';
-                        ${(0, exports.getTranparentBackground)(background.body, background.content)}
-                        background-size: 9px;
+                }
+
+                .${exports.classes.alpha} {
+                    .${slider_style_1.classes.rail} {
+                        position: relative;
+                        background-color: transparent;
+
+                        &::before,
+                        .${exports.classes.alphaMask} {
+                            border-radius: inherit;
+                            position: absolute;
+                            inset: 0;
+                        }
+
+                        &::before {
+                            content: '';
+                            ${(0, exports.getTransparentBackground)(background.body, background.content)}
+                            background-size: 9px;
+                        }
                     }
                 }
             }
-        }
-    
-        .${exports.classes.preview} {
-            width: 30px;
-            height: 30px;
-            border-radius: ${borderRadius}px;
-            border: 1px solid ${divider};
-            overflow: hidden;
-            ${(0, exports.getTranparentBackground)(background.body, background.content)}
-            background-size: 50% 50%;
-            position: relative;
-    
-            .${exports.classes.previewColor} {
-                position: absolute;
-                inset: 0;
+
+            .${exports.classes.preview} {
+                width: 30px;
+                height: 30px;
+                border-radius: ${borderRadius}px;
+                border: 1px solid ${divider};
+                overflow: hidden;
+                ${(0, exports.getTransparentBackground)(background.body, background.content)}
+                background-size: 50% 50%;
+                position: relative;
+
+                .${exports.classes.previewColor} {
+                    position: absolute;
+                    inset: 0;
+                }
             }
         }
-    }
 
-    .${exports.classes.inputRow} {
-        display: flex;
-        gap: 12px;
-        font-size: ${13 / 14}em;
-
-        .${exports.classes.inputsWrap} {
-            flex: 1;
+        .${exports.classes.inputRow} {
             display: flex;
-            gap: ${spacing[1]}px;
+            gap: 12px;
+            font-size: ${13 / 14}em;
 
-            .${exports.classes.inputItem} {
+            .${exports.classes.inputsWrap} {
                 flex: 1;
                 display: flex;
-                flex-direction: column;
+                gap: ${spacing[1]}px;
 
-                &[data-wide=true] {
-                    flex: 3;
-                }
+                .${exports.classes.inputItem} {
+                    flex: 1;
+                    display: flex;
+                    flex-direction: column;
 
-                .${exports.classes.input} {
-                    padding: 0 ${spacing[1]}px;
-                }
+                    &[data-wide=true] {
+                        flex: 3;
+                    }
 
-                &:not([data-wide=true]) {
-                    .${exports.classes.input} input {
-                        text-align: center;
+                    .${exports.classes.input} {
+                        padding: 0 ${spacing[1]}px;
+                    }
+
+                    &:not([data-wide=true]) {
+                        .${exports.classes.input} input {
+                            text-align: center;
+                        }
                     }
-                }
 
-                .${exports.classes.inputItemLabel} {
-                    text-align: center;
-                    color: ${text.placeholder};
+                    .${exports.classes.inputItemLabel} {
+                        text-align: center;
+                        color: ${text.placeholder};
+                    }
                 }
             }
         }