@canlooks/can-ui 0.0.98 → 0.0.100

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

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

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

@@ -4,16 +4,18 @@ export const classes = defineInnerClasses('modal', [
     'modal',
 ]);
 export const style = css `
-    .${classes.modal} {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        pointer-events: none;
+    @layer reset {
+        .${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/esm/components/optionsBase/optionsBase.style.js

@@ -4,15 +4,17 @@ export const classes = defineInnerClasses('options-base', [
     'optionsList'
 ]);
 export const style = css `
-    .${classes.optionsList} {
-        width: 100%;
-        height: 100%;
-        flex: 1;
-        overflow: hidden;
-        max-height: ${32 * 8}px;
+    @layer reset {
+        .${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/esm/components/overlayBase/overlayBase.style.js

@@ -9,22 +9,24 @@ export const style = defineCss(theme => {
     return [
         appStyleCallback(theme),
         css `
-            position: fixed;
-            inset: 0;
-            z-index: ${zIndex.overlay};
+            @layer reset {
+                position: fixed;
+                inset: 0;
+                z-index: ${zIndex.overlay};
 
-            &[data-custom-container=true] {
-                position: absolute;
-            }
+                &[data-custom-container=true] {
+                    position: absolute;
+                }
 
-            .${classes.mask} {
-                background-color: rgba(0, 0, 0, .5);
-                position: absolute;
-                inset: 0;
-            }
+                .${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/esm/components/pagination/pagination.style.js

@@ -10,43 +10,45 @@ export const classes = defineInnerClasses('pagination', [
     'counter'
 ]);
 export const style = defineCss(({ spacing }) => css `
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-end;
-    gap: ${spacing[3]}px;
-
-    .${classes.pager} {
+    @layer reset {
         display: flex;
-    }
-
-    .${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;
+        .${classes.pager} {
+            display: flex;
         }
 
-        &[data-size=medium] {
-            min-width: 32px;
-        }
+        .${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;
+            }
         }
-    }
 
-    .${classes.jumper} {
-        display: flex;
-        align-items: center;
-        gap: ${spacing[3]}px;
-        
-        .${classes.input} {
-            width: 45px;
+        .${classes.jumper} {
+            display: flex;
+            align-items: center;
+            gap: ${spacing[3]}px;
+
+            .${classes.input} {
+                width: 45px;
 
-            .${inputClasses.input} {
-                text-align: center;
+                .${inputClasses.input} {
+                    text-align: center;
+                }
             }
         }
     }

package/dist/esm/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/esm/components/palette/palette.style.js

@@ -18,144 +18,146 @@ export const classes = defineInnerClasses('palette', [
     'input',
     'inputItemLabel'
 ]);
-export const getTranparentBackground = (a, b) => `background-image: conic-gradient(${a} 0 25%, ${b} 25% 50%, ${a} 50% 75%, ${b} 75% 100%);`;
+export const getTransparentBackground = (a, b) => `background-image: conic-gradient(${a} 0 25%, ${b} 25% 50%, ${a} 50% 75%, ${b} 75% 100%);`;
 export const style = defineCss(({ spacing, borderRadius, background, divider, text }) => css `
-    width: 240px;
-    display: flex;
-    flex-direction: column;
-    gap: ${spacing[3]}px;
-    user-select: none;
-    
-    .${classes.main} {
-        aspect-ratio: 3 / 2;
-        border-radius: ${borderRadius}px;
-        /* overflow: hidden; */
-        position: relative;
-        touch-action: none;
-    
-        .${classes.mask} {
-            background-image: linear-gradient(0deg, #000, transparent);
-            border-radius: inherit;
-            position: absolute;
-            inset: 0;
-            pointer-events: none;
-        }
-    
-        .${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%);
-        }
-    }
-    
-    .${classes.slidersRow} {
+    @layer reset {
+        width: 240px;
         display: flex;
+        flex-direction: column;
         gap: ${spacing[3]}px;
-    
-        .${classes.sliders} {
-            flex: 1;
+        user-select: none;
+
+        .${classes.main} {
+            aspect-ratio: 3 / 2;
+            border-radius: ${borderRadius}px;
+            /* overflow: hidden; */
+            position: relative;
+            touch-action: none;
+
+            .${classes.mask} {
+                background-image: linear-gradient(0deg, #000, transparent);
+                border-radius: inherit;
+                position: absolute;
+                inset: 0;
+                pointer-events: none;
+            }
+
+            .${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%);
+            }
+        }
+
+        .${classes.slidersRow} {
             display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-    
-            .${sliderClasses.root} {
-                min-height: 0;
-    
-                .${sliderClasses.handle} {
-                    background-color: transparent;
-                    border-color: #ffffff;
-                    box-shadow: 0 0 2px #000000, inset 0 0 1px #000000;
+            gap: ${spacing[3]}px;
+
+            .${classes.sliders} {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+
+                .${sliderClasses.root} {
+                    min-height: 0;
+
+                    .${sliderClasses.handle} {
+                        background-color: transparent;
+                        border-color: #ffffff;
+                        box-shadow: 0 0 2px #000000, inset 0 0 1px #000000;
+                    }
                 }
-            }
-    
-            .${classes.hue} {
-                .${sliderClasses.rail} {
-                    background-image: linear-gradient(90deg,
+
+                .${classes.hue} {
+                    .${sliderClasses.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%
-                    );
-                }
-            }
-    
-            .${classes.alpha} {
-                .${sliderClasses.rail} {
-                    position: relative;
-                    background-color: transparent;
-    
-                    &:before,
-                    .${classes.alphaMask} {
-                        border-radius: inherit;
-                        position: absolute;
-                        inset: 0;
+                        );
                     }
-    
-                    &:before {
-                        content: '';
-                        ${getTranparentBackground(background.body, background.content)}
-                        background-size: 9px;
+                }
+
+                .${classes.alpha} {
+                    .${sliderClasses.rail} {
+                        position: relative;
+                        background-color: transparent;
+
+                        &::before,
+                        .${classes.alphaMask} {
+                            border-radius: inherit;
+                            position: absolute;
+                            inset: 0;
+                        }
+
+                        &::before {
+                            content: '';
+                            ${getTransparentBackground(background.body, background.content)}
+                            background-size: 9px;
+                        }
                     }
                 }
             }
-        }
-    
-        .${classes.preview} {
-            width: 30px;
-            height: 30px;
-            border-radius: ${borderRadius}px;
-            border: 1px solid ${divider};
-            overflow: hidden;
-            ${getTranparentBackground(background.body, background.content)}
-            background-size: 50% 50%;
-            position: relative;
-    
-            .${classes.previewColor} {
-                position: absolute;
-                inset: 0;
+
+            .${classes.preview} {
+                width: 30px;
+                height: 30px;
+                border-radius: ${borderRadius}px;
+                border: 1px solid ${divider};
+                overflow: hidden;
+                ${getTransparentBackground(background.body, background.content)}
+                background-size: 50% 50%;
+                position: relative;
+
+                .${classes.previewColor} {
+                    position: absolute;
+                    inset: 0;
+                }
             }
         }
-    }
 
-    .${classes.inputRow} {
-        display: flex;
-        gap: 12px;
-        font-size: ${13 / 14}em;
-
-        .${classes.inputsWrap} {
-            flex: 1;
+        .${classes.inputRow} {
             display: flex;
-            gap: ${spacing[1]}px;
+            gap: 12px;
+            font-size: ${13 / 14}em;
 
-            .${classes.inputItem} {
+            .${classes.inputsWrap} {
                 flex: 1;
                 display: flex;
-                flex-direction: column;
+                gap: ${spacing[1]}px;
 
-                &[data-wide=true] {
-                    flex: 3;
-                }
+                .${classes.inputItem} {
+                    flex: 1;
+                    display: flex;
+                    flex-direction: column;
 
-                .${classes.input} {
-                    padding: 0 ${spacing[1]}px;
-                }
+                    &[data-wide=true] {
+                        flex: 3;
+                    }
 
-                &:not([data-wide=true]) {
-                    .${classes.input} input {
-                        text-align: center;
+                    .${classes.input} {
+                        padding: 0 ${spacing[1]}px;
+                    }
+
+                    &:not([data-wide=true]) {
+                        .${classes.input} input {
+                            text-align: center;
+                        }
                     }
-                }
 
-                .${classes.inputItemLabel} {
-                    text-align: center;
-                    color: ${text.placeholder};
+                    .${classes.inputItemLabel} {
+                        text-align: center;
+                        color: ${text.placeholder};
+                    }
                 }
             }
         }