@canlooks/can-ui 0.0.98 → 0.0.99

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

@@ -15,148 +15,150 @@ export function useStyle({ color }) {
     return useCss(({ mode, easing, gray, text }) => {
         const lighter = Color(colorValue).lighten(.2).hex();
         return css `
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-            cursor: pointer;
-            position: relative;
-            -webkit-tap-highlight-color: transparent;
-    
-            .${classes.checkbox} {
-                min-width: 16px;
-                min-height: 16px;
-                display: flex;
+            @layer reset {
+                display: inline-flex;
                 align-items: center;
-                justify-content: center;
-                border: 1px solid ${gray(.7)};
-                border-radius: 4px;
-                transition: border-color .25s ${easing.easeOut};
+                gap: 6px;
+                cursor: pointer;
                 position: relative;
-    
-                .${classes.icon} {
-                    font-size: .9em;
-                    color: #ffffff;
-                    animation: ${iconAnim} .25s ${easing.swing};
-                    position: absolute;
-                }
-    
-                .${classes.indeterminate} {
-                    width: 60%;
-                    height: 4px;
-                    background-color: ${colorValue};
-                    animation: ${iconAnim} .25s ${easing.swing};
-                    position: absolute;
-                }
-    
-                > * {
-                    pointer-events: none;
-                }
-            }
-    
-            .${classes.radio} {
-                border-radius: 50%;
-    
-                .${classes.radioChecked} {
-                    border-radius: inherit;
-                    background-color: ${colorValue};
-                    animation: ${iconAnim} .25s ${easing.swing};
-                    position: absolute;
-                    inset: 3px;
-                }
-            }
-    
-            .${classes.label} {
-                transition: color .25s ${easing.easeOut};
-            }
-    
-            &[data-size=small] {
+                -webkit-tap-highlight-color: transparent;
+
                 .${classes.checkbox} {
-                    min-width: 13px;
-                    min-height: 13px;
-    
+                    min-width: 16px;
+                    min-height: 16px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border: 1px solid ${gray(.7)};
+                    border-radius: 4px;
+                    transition: border-color .25s ${easing.easeOut};
+                    position: relative;
+
                     .${classes.icon} {
-                        font-size: .8em;
+                        font-size: .9em;
+                        color: #ffffff;
+                        animation: ${iconAnim} .25s ${easing.swing};
+                        position: absolute;
                     }
-                }
-            }
-    
-            &[data-size=large] {
-                .${classes.checkbox} {
-                    min-width: 20px;
-                    min-height: 20px;
-    
-                    .${classes.icon} {
-                        font-size: 1em;
+
+                    .${classes.indeterminate} {
+                        width: 60%;
+                        height: 4px;
+                        background-color: ${colorValue};
+                        animation: ${iconAnim} .25s ${easing.swing};
+                        position: absolute;
+                    }
+
+                    > * {
+                        pointer-events: none;
                     }
                 }
-            }
-    
-            &:not([data-disabled=true]):hover {
-                .${classes.checkbox} {
-                    border-color: ${gray(mode === 'light' ? .4 : .6)};
+
+                .${classes.radio} {
+                    border-radius: 50%;
+
+                    .${classes.radioChecked} {
+                        border-radius: inherit;
+                        background-color: ${colorValue};
+                        animation: ${iconAnim} .25s ${easing.swing};
+                        position: absolute;
+                        inset: 3px;
+                    }
                 }
-    
+
                 .${classes.label} {
-                    opacity: ${mode === 'light' ? .7 : .8};
+                    transition: color .25s ${easing.easeOut};
                 }
-            }
-    
-            &:not([data-disabled=true]):active {
-                .${classes.checkbox} {
-                    transition: border-color 0s;
-                    border-color: ${gray(.9)};
+
+                &[data-size=small] {
+                    .${classes.checkbox} {
+                        min-width: 13px;
+                        min-height: 13px;
+
+                        .${classes.icon} {
+                            font-size: .8em;
+                        }
+                    }
                 }
-    
-                .${classes.label} {
-                    transition: color 0s;
-                    opacity: 1;
+
+                &[data-size=large] {
+                    .${classes.checkbox} {
+                        min-width: 20px;
+                        min-height: 20px;
+
+                        .${classes.icon} {
+                            font-size: 1em;
+                        }
+                    }
                 }
-            }
-    
-            &[data-checked=true] {
-                .${classes.checkbox} {
-                    transition: border-color 0s;
+
+                &:not([data-disabled=true]):hover {
+                    .${classes.checkbox} {
+                        border-color: ${gray(mode === 'light' ? .4 : .6)};
+                    }
+
+                    .${classes.label} {
+                        opacity: ${mode === 'light' ? .7 : .8};
+                    }
                 }
-    
-                &:not([data-disabled=true]) {
+
+                &:not([data-disabled=true]):active {
                     .${classes.checkbox} {
-                        background-color: ${colorValue};
-                        border-color: ${colorValue};
+                        transition: border-color 0s;
+                        border-color: ${gray(.9)};
                     }
 
-                    .${classes.radio} {
-                        background-color: transparent;
+                    .${classes.label} {
+                        transition: color 0s;
+                        opacity: 1;
                     }
                 }
-            }
-    
-            &[data-disabled=true] {
-                cursor: not-allowed;
-                
-                .${classes.checkbox} {
-                    background-color: ${gray(.1)};
+
+                &[data-checked=true] {
+                    .${classes.checkbox} {
+                        transition: border-color 0s;
+                    }
+
+                    &:not([data-disabled=true]) {
+                        .${classes.checkbox} {
+                            background-color: ${colorValue};
+                            border-color: ${colorValue};
+                        }
+
+                        .${classes.radio} {
+                            background-color: transparent;
+                        }
+                    }
                 }
-    
-                .${classes.icon} {
-                    color: ${text.disabled};
+
+                &[data-disabled=true] {
+                    cursor: not-allowed;
+
+                    .${classes.checkbox} {
+                        background-color: ${gray(.1)};
+                    }
+
+                    .${classes.icon} {
+                        color: ${text.disabled};
+                    }
+
+                    .${classes.indeterminate},
+                    .${classes.radioChecked} {
+                        background-color: ${text.disabled};
+                    }
                 }
-    
-                .${classes.indeterminate},
-                .${classes.radioChecked} {
-                    background-color: ${text.disabled};
+
+                .${classes.input} {
+                    position: absolute;
+                    opacity: 0;
+                    pointer-events: none;
                 }
-            }
 
-            .${classes.input} {
-                position: absolute;
-                opacity: 0;
-                pointer-events: none;
-            }
-    
-            &:has(.${classes.input}:focus) {
-                .${classes.checkbox} {
-                    outline: 3px solid ${lighter};
-                    outline-offset: 1px;;
+                &:has(.${classes.input}:focus) {
+                    .${classes.checkbox} {
+                        outline: 3px solid ${lighter};
+                        outline-offset: 1px;;
+                    }
                 }
             }
         `;

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { defineInnerClasses, defineCss } from '../../utils';
 import { classes as inputBaseClasses } from '../inputBase/inputBase.style';
-import { getTranparentBackground } from '../palette/palette.style';
+import { getTransparentBackground } from '../palette/palette.style';
 import { popperStyleCallback } from '../popper/popper.style';
 export const classes = defineInnerClasses('color-picker', [
     'inputBase',
@@ -10,91 +10,95 @@ export const classes = defineInnerClasses('color-picker', [
     'label',
 ]);
 export const style = defineCss(({ spacing, borderRadius, divider, background }) => css `
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    user-select: none;
+    @layer reset {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        user-select: none;
 
-    .${classes.inputBase} {
-        cursor: pointer;
-        padding: ${spacing[1]}px !important;
-    
-        .${inputBaseClasses.content} {
-            display: flex;
-            align-items: center;
-        }
-    
-        .${classes.label} {
-            line-height: 1;
-            margin: 0 ${spacing[2]}px;
-        }
-    }
+        .${classes.inputBase} {
+            cursor: pointer;
+            padding: ${spacing[1]}px !important;
 
-    .${classes.block} {
-        width: 24px;
-        height: 24px;
-        border-radius: ${borderRadius}px;
-        overflow: hidden;
-        cursor: pointer;
-        position: relative;
-        ${getTranparentBackground(background.body, background.content)}
-        background-size: 50% 50%;
+            .${inputBaseClasses.content} {
+                display: flex;
+                align-items: center;
+            }
 
-        .${classes.blockColor} {
-            position: absolute;
-            inset: 0;
+            .${classes.label} {
+                line-height: 1;
+                margin: 0 ${spacing[2]}px;
+            }
         }
 
-        &[data-selected=true] {
-            &:after {
-                content: '';
+        .${classes.block} {
+            width: 24px;
+            height: 24px;
+            border-radius: ${borderRadius}px;
+            overflow: hidden;
+            cursor: pointer;
+            position: relative;
+            ${getTransparentBackground(background.body, background.content)}
+            background-size: 50% 50%;
+
+            .${classes.blockColor} {
                 position: absolute;
-                inset: 4px;
-                border-radius: inherit;
-                border: 2px solid #ffffff;
+                inset: 0;
+            }
+
+            &[data-selected=true] {
+                &::after {
+                    content: '';
+                    position: absolute;
+                    inset: 4px;
+                    border-radius: inherit;
+                    border: 2px solid #ffffff;
+                }
             }
-        }
 
-        &[data-light=true] {
-            border: 1px solid ${divider};
+            &[data-light=true] {
+                border: 1px solid ${divider};
 
-            &:after {
-                border-color: #aaa;
+                &::after {
+                    border-color: #aaa;
+                }
             }
         }
-    }
-    
-    &[data-size=small] {
-        .${classes.block} {
-            width: 16px;
-            height: 16px;
 
-            &:after {
-                inset: 2px;
+        &[data-size=small] {
+            .${classes.block} {
+                width: 16px;
+                height: 16px;
+
+                &::after {
+                    inset: 2px;
+                }
             }
         }
-    }
-    
-    &[data-size=large] {
-        .${classes.inputBase} {
-            padding: ${spacing[2]}px !important;
-        }
-    
-        .${classes.block} {
-            width: 26px;
-            height: 26px;
+
+        &[data-size=large] {
+            .${classes.inputBase} {
+                padding: ${spacing[2]}px !important;
+            }
+
+            .${classes.block} {
+                width: 26px;
+                height: 26px;
+            }
         }
-    }
 
-    &[data-shape=circular] {
-        .${classes.block} {
-            border-radius: 50%;
+        &[data-shape=circular] {
+            .${classes.block} {
+                border-radius: 50%;
+            }
         }
     }
 `);
 export const colorPickerPopperStyle = defineCss(theme => [
     popperStyleCallback(theme),
     css `
-        padding: ${theme.spacing[3]}px;
+        @layer reset {
+            padding: ${theme.spacing[3]}px;
+        }
     `
 ]);

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

@@ -6,29 +6,31 @@ export const classes = defineInnerClasses('counter', [
     'input'
 ]);
 export const style = defineCss(({ divider }) => css `
-    display: inline-flex;
+    @layer reset {
+        display: inline-flex;
 
-    .${buttonClasses.root} {
-        z-index: 1;
+        .${buttonClasses.root} {
+            z-index: 1;
 
-        &[data-variant=outlined], &[data-variant=dashed] {
-            border-color: ${divider};
+            &[data-variant=outlined], &[data-variant=dashed] {
+                border-color: ${divider};
+            }
         }
-    }
 
-    .${classes.input} {
-        input {
-            text-align: center;
-            
-            &::-webkit-inner-spin-button,
-            &::-webkit-outer-spin-button {
-                display: none;
+        .${classes.input} {
+            input {
+                text-align: center;
+
+                &::-webkit-inner-spin-button,
+                &::-webkit-outer-spin-button {
+                    display: none;
+                }
             }
-        }
 
-        .${inputClasses.adaptable} {
-            display: flex;
-            min-width: 60px;
+            .${inputClasses.adaptable} {
+                display: flex;
+                min-width: 60px;
+            }
         }
     }
 `);

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

@@ -21,95 +21,99 @@ export const classes = defineInnerClasses('curd', [
     'copyButton'
 ]);
 export const style = defineCss(({ spacing, text, background, borderRadius }) => css `
-    flex: 1;
-    width: 100%;
-    height: 100%;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-
-    .${classes.filter} {
+    @layer reset {
+        flex: 1;
+        width: 100%;
+        height: 100%;
+        min-height: 0;
         display: flex;
-        gap: ${spacing[6]}px;
+        flex-direction: column;
 
-        .${classes.filterGrid}, .${classes.filterGridContainer} {
-            flex: 1;
-            opacity: 1;
-            justify-content: flex-end;
-        }
-
-        .${classes.filterControl} {
-            align-self: flex-end;
-            margin-bottom: ${spacing[6]}px;
-        }
-    }
+        .${classes.filter} {
+            display: flex;
+            gap: ${spacing[6]}px;
 
-    .${classes.filtered} {
-        display: flex;
-        align-items: center;
-        margin-bottom: ${spacing[6]}px;
+            .${classes.filterGrid}, .${classes.filterGridContainer} {
+                flex: 1;
+                opacity: 1;
+                justify-content: flex-end;
+            }
 
-        .${classes.filteredTitle} {
-            color: ${text.secondary};
-            font-size: ${13 / 14}em;
+            .${classes.filterControl} {
+                align-self: flex-end;
+                margin-bottom: ${spacing[6]}px;
+            }
         }
-        
-        .${classes.filteredContent} {
-            flex: 1;
+
+        .${classes.filtered} {
             display: flex;
-            flex-wrap: wrap;
-            gap: ${spacing[2]}px;
-        }
-    }
+            align-items: center;
+            margin-bottom: ${spacing[6]}px;
 
-    .${classes.toolbar} {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: ${spacing[4]}px;
+            .${classes.filteredTitle} {
+                color: ${text.secondary};
+                font-size: ${13 / 14}em;
+            }
 
-        .${classes.toolbarLeft} {
-            display: flex;
-            gap: ${spacing[2]}px;
+            .${classes.filteredContent} {
+                flex: 1;
+                display: flex;
+                flex-wrap: wrap;
+                gap: ${spacing[2]}px;
+            }
         }
 
-        .${classes.toolbarRight} {
+        .${classes.toolbar} {
             display: flex;
+            justify-content: space-between;
+            margin-bottom: ${spacing[4]}px;
 
-            .${classes.divider} {
-                padding: 8px 0;
+            .${classes.toolbarLeft} {
+                display: flex;
+                gap: ${spacing[2]}px;
             }
-        }
-    }
 
-    .${classes.card} {
-        min-height: 0;
-        border-radius: ${borderRadius}px;
+            .${classes.toolbarRight} {
+                display: flex;
 
-        .${loadingClasses.root} {
-            height: 100%;
+                .${classes.divider} {
+                    padding: 8px 0;
+                }
+            }
         }
-    }
 
-    &[data-variant=standard] {
         .${classes.card} {
-            background-color: ${background.content};
-            padding: ${spacing[8]}px;
+            min-height: 0;
+            border-radius: ${borderRadius}px;
+
+            .${loadingClasses.root} {
+                height: 100%;
+            }
         }
-    }
 
-    .${classes.control} {
-        display: flex;
-        gap: ${spacing[5]}px;
+        &[data-variant=standard] {
+            .${classes.card} {
+                background-color: ${background.content};
+                padding: ${spacing[8]}px;
+            }
+        }
+
+        .${classes.control} {
+            display: flex;
+            gap: ${spacing[5]}px;
+        }
     }
 `);
 export const dialogStyle = defineCss(({ spacing }) => css `
-    .${classes.dialogTitle} {
-        display: flex;
-        align-items: center;
-        gap: ${spacing[8]}px;
-        
-        .${buttonClasses.root} {
-            font-size: 1rem;
+    @layer reset {
+        .${classes.dialogTitle} {
+            display: flex;
+            align-items: center;
+            gap: ${spacing[8]}px;
+
+            .${buttonClasses.root} {
+                font-size: 1rem;
+            }
         }
     }
 `);