@canlooks/can-ui 0.0.98 → 0.0.100

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

@@ -14,172 +14,174 @@ export const treeDndClasses = defineInnerClasses('tree-dnd', [
 ]);
 export function useStyle({ indent }) {
     return useCss(({ mode, spacing, gray, colors }) => css `
-        .${classes.node} {
-            position: relative;
-            
-            &[data-dragging=true] {
-                background-color: ${Color(colors.primary.main).alpha(mode === 'light' ? .13 : .23).string()} !important;
-            }
-            
-            &[data-active=true] {
-                outline: 2px solid ${colors.primary.main};
-            }
-        }
+        @layer reset {
+            .${classes.node} {
+                position: relative;
 
-        .${treeDndClasses.dragHandle} {
-            width: 20px;
-            margin-right: ${spacing[3]}px;
-            text-align: center;
-            color: ${gray(.12)};
-            cursor: grab;
-        }
+                &[data-dragging=true] {
+                    background-color: ${Color(colors.primary.main).alpha(mode === 'light' ? .13 : .23).string()} !important;
+                }
 
-        .${treeDndClasses.mask} {
-            display: flex;
-            position: absolute;
-            inset: 0;
-            z-index: 1;
+                &[data-active=true] {
+                    outline: 2px solid ${colors.primary.main};
+                }
+            }
 
-            .${classes.indent}:after {
-                display: none;
+            .${treeDndClasses.dragHandle} {
+                width: 20px;
+                margin-right: ${spacing[3]}px;
+                text-align: center;
+                color: ${gray(.12)};
+                cursor: grab;
             }
 
-            .${treeDndClasses.predecessor} {
-                width: ${indent}px;
-                position: relative;
-                
-                &:has(+ .${treeDndClasses.sibling}) {
-                    width: 29px;
+            .${treeDndClasses.mask} {
+                display: flex;
+                position: absolute;
+                inset: 0;
+                z-index: 1;
+
+                .${classes.indent}::after {
+                    display: none;
                 }
-                
-                &[data-active=true] {
-                    &:before, &:after {
-                        content: '';
-                        position: absolute;
-                    }
 
-                    &:before {
-                        width: 8px;
-                        height: 8px;
-                        border-radius: 50%;
-                        border: 2px solid ${colors.primary.main};
-                        left: 0;
-                        bottom: -4px;
-                    }
+                .${treeDndClasses.predecessor} {
+                    width: ${indent}px;
+                    position: relative;
 
-                    &:after {
-                        width: calc(100% - 8px);
-                        height: 2px;
-                        background: ${colors.primary.main};
-                        left: 8px;
-                        bottom: -1px;
+                    &:has(+ .${treeDndClasses.sibling}) {
+                        width: 29px;
                     }
-                    
-                    & ~ * {
-                        &:after {
-                            content: '';
-                            width: 100%;
-                            height: 2px;
-                            background: ${colors.primary.main};
-                            position: absolute;
-                            left: 0;
-                            bottom: -1px;
-                        }
-                    }
-                }
-            }
-            
-            .${treeDndClasses.sibling} {
-                width: ${indent * 2}px;
-                flex: 1;
-                display: flex;
-                flex-direction: column;
-                position: relative;
-                
-                .${treeDndClasses.siblingPrev}, .${treeDndClasses.siblingNext} {
-                    flex: 1;
-                    position: relative;
-                    
+
                     &[data-active=true] {
-                        &:before, &:after {
+                        &::before, &::after {
                             content: '';
                             position: absolute;
                         }
-                        
-                        &:before {
+
+                        &::before {
                             width: 8px;
                             height: 8px;
                             border-radius: 50%;
                             border: 2px solid ${colors.primary.main};
                             left: 0;
+                            bottom: -4px;
                         }
-                        
-                        &:after {
+
+                        &::after {
                             width: calc(100% - 8px);
                             height: 2px;
                             background: ${colors.primary.main};
                             left: 8px;
+                            bottom: -1px;
                         }
-                    }
-                }
 
-                .${treeDndClasses.siblingPrev} {
-                    &:before {
-                        top: -4px
-                    }
-                    
-                    &:after {
-                        top: -1px;
+                        & ~ * {
+                            &::after {
+                                content: '';
+                                width: 100%;
+                                height: 2px;
+                                background: ${colors.primary.main};
+                                position: absolute;
+                                left: 0;
+                                bottom: -1px;
+                            }
+                        }
                     }
                 }
 
-                .${treeDndClasses.siblingNext} {
-                    &:before {
-                        bottom: -4px;
+                .${treeDndClasses.sibling} {
+                    width: ${indent * 2}px;
+                    flex: 1;
+                    display: flex;
+                    flex-direction: column;
+                    position: relative;
+
+                    .${treeDndClasses.siblingPrev}, .${treeDndClasses.siblingNext} {
+                        flex: 1;
+                        position: relative;
+
+                        &[data-active=true] {
+                            &::before, &::after {
+                                content: '';
+                                position: absolute;
+                            }
+
+                            &::before {
+                                width: 8px;
+                                height: 8px;
+                                border-radius: 50%;
+                                border: 2px solid ${colors.primary.main};
+                                left: 0;
+                            }
+
+                            &::after {
+                                width: calc(100% - 8px);
+                                height: 2px;
+                                background: ${colors.primary.main};
+                                left: 8px;
+                            }
+                        }
                     }
-                    
-                    &:after {
-                        bottom: -1px;
+
+                    .${treeDndClasses.siblingPrev} {
+                        &::before {
+                            top: -4px
+                        }
+
+                        &::after {
+                            top: -1px;
+                        }
                     }
-                }
 
-                .${treeDndClasses.child} {
-                    width: calc(100% - ${indent * 2}px);
-                    height: 50%;
-                    position: absolute;
-                    right: 0;
-                    bottom: 0;
-                    
-                    &[data-active=true] {
-                        &:before, &:after {
-                            content: '';
-                            position: absolute;
-                            bottom: -1px;
+                    .${treeDndClasses.siblingNext} {
+                        &::before {
+                            bottom: -4px;
                         }
-                        
-                        &:before {
-                            width: 8px;
-                            height: 8px;
-                            border-left: 2px solid ${colors.primary.main};
-                            border-bottom: 2px solid ${colors.primary.main};
-                            left: 0;
-                            
+
+                        &::after {
+                            bottom: -1px;
                         }
-                        
-                        &:after {
-                            width: calc(100% - 12px);
-                            height: 2px;
-                            background: ${colors.primary.main};
-                            left: 12px;
+                    }
+
+                    .${treeDndClasses.child} {
+                        width: calc(100% - ${indent * 2}px);
+                        height: 50%;
+                        position: absolute;
+                        right: 0;
+                        bottom: 0;
+
+                        &[data-active=true] {
+                            &::before, &::after {
+                                content: '';
+                                position: absolute;
+                                bottom: -1px;
+                            }
+
+                            &::before {
+                                width: 8px;
+                                height: 8px;
+                                border-left: 2px solid ${colors.primary.main};
+                                border-bottom: 2px solid ${colors.primary.main};
+                                left: 0;
+
+                            }
+
+                            &::after {
+                                width: calc(100% - 12px);
+                                height: 2px;
+                                background: ${colors.primary.main};
+                                left: 12px;
+                            }
                         }
                     }
                 }
             }
-        }
-        
-        .${treeDndClasses.levelBlock} {
-            &[data-active=true] {
-                outline: 1px dashed ${colors.primary.main};
+
+            .${treeDndClasses.levelBlock} {
+                &[data-active=true] {
+                    outline: 1px dashed ${colors.primary.main};
+                }
             }
         }
     `, [indent]);

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

@@ -9,48 +9,50 @@ export const classes = defineInnerClasses('tree-select', [
     'arrow'
 ]);
 export const style = defineCss(({ spacing, text, easing }) => css `
-    cursor: pointer;
-    position: relative;
+    @layer reset {
+        cursor: pointer;
+        position: relative;
 
-    .${classes.contentWrap} {
-        display: flex;
-        align-items: center;
-        gap: ${spacing[1]}px;
-    }
-
-    .${classes.placeholder} {
-        flex: 1;
-        color: ${text.placeholder};
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-
-    .${classes.backfill} {
-        flex: 1;
-        min-width: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: ${spacing[1]}px;
-
-        .${tagClasses.root} {
-            min-width: 0;
+        .${classes.contentWrap} {
+            display: flex;
+            align-items: center;
+            gap: ${spacing[1]}px;
         }
 
-        .${tagClasses.content},
-        .${classes.backfillWrap} {
+        .${classes.placeholder} {
+            flex: 1;
+            color: ${text.placeholder};
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
         }
-    }
 
-    .${classes.arrow} {
-        color: ${text.placeholder};
-        transition: transform .25s ${easing.easeOut};
+        .${classes.backfill} {
+            flex: 1;
+            min-width: 0;
+            display: flex;
+            flex-wrap: wrap;
+            gap: ${spacing[1]}px;
+
+            .${tagClasses.root} {
+                min-width: 0;
+            }
+
+            .${tagClasses.content},
+            .${classes.backfillWrap} {
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+        }
+
+        .${classes.arrow} {
+            color: ${text.placeholder};
+            transition: transform .25s ${easing.easeOut};
 
-        &[data-open=true] {
-            transform: rotate(180deg);
+            &[data-open=true] {
+                transform: rotate(180deg);
+            }
         }
     }
 `);

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

@@ -14,129 +14,131 @@ export function useStyle({ color }) {
     const colorValue = useColor(color);
     return useCss(({ mode, colors, gray, borderRadius, easing }) => {
         return css `
-            color: ${colorValue};
+            @layer reset {
+                color: ${colorValue};
 
-            &[data-component=p] {
-                margin: 1em 0;
-            }
+                &[data-component=p] {
+                    margin: 1em 0;
+                }
 
-            &[data-component=h1],
-            &[data-component=h2],
-            &[data-component=h3],
-            &[data-component=h4],
-            &[data-component=h5],
-            &[data-component=h6] {
-                margin-top: 1em;
-                margin-bottom: 0.5em;
-            }
+                &[data-component=h1],
+                &[data-component=h2],
+                &[data-component=h3],
+                &[data-component=h4],
+                &[data-component=h5],
+                &[data-component=h6] {
+                    margin-top: 1em;
+                    margin-bottom: 0.5em;
+                }
 
-            &[data-component=h1] {
-                font-size: ${38 / 14}em;
-            }
+                &[data-component=h1] {
+                    font-size: ${38 / 14}em;
+                }
 
-            &[data-component=h2] {
-                font-size: ${30 / 14}em;
-            }
+                &[data-component=h2] {
+                    font-size: ${30 / 14}em;
+                }
 
-            &[data-component=h3] {
-                font-size: ${24 / 14}em;
-            }
+                &[data-component=h3] {
+                    font-size: ${24 / 14}em;
+                }
 
-            &[data-component=h4] {
-                font-size: ${20 / 14}em;
-            }
+                &[data-component=h4] {
+                    font-size: ${20 / 14}em;
+                }
 
-            &[data-component=h5] {
-                font-size: ${17 / 14}em;
-            }
+                &[data-component=h5] {
+                    font-size: ${17 / 14}em;
+                }
 
-            &[data-component=h6] {
-                font-size: 1em;
-            }
+                &[data-component=h6] {
+                    font-size: 1em;
+                }
 
-            &[data-component=mark] {
-                background-color: ${Color(colors.warning.main).lighten(.5).hex()};
-            }
+                &[data-component=mark] {
+                    background-color: ${Color(colors.warning.main).lighten(.5).hex()};
+                }
 
-            &[data-component=kbd] {
-                background-color: ${gray(mode === 'light' ? .06 : .22)};
-                font-size: ${13 / 14}em;
-                padding: 4px 6px;
-                border-radius: ${borderRadius / 2}px;
-                box-shadow: ${mode === 'light'
+                &[data-component=kbd] {
+                    background-color: ${gray(mode === 'light' ? .06 : .22)};
+                    font-size: ${13 / 14}em;
+                    padding: 4px 6px;
+                    border-radius: ${borderRadius / 2}px;
+                    box-shadow: ${mode === 'light'
             ? '0 1px 2px rgba(0, 0, 0, .4), -1px 2px rgba(255, 255, 255, .4)'
             : '-1px 2px rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .6)'};
-                margin: 0 3px;
-            }
-
-            &[data-component=code] {
-                background-color: ${gray(.06)};
-                font-size: ${13 / 14}em;
-                font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-                padding: 3px 6px;
-                border-radius: .15em;
-                margin: 0 4px;
-                outline: none;
-            }
-
-            &[data-component=a] {
-                color: ${colors.primary.main};
-                transition: color .25s ${easing.easeOut};
-                -webkit-tap-highlight-color: transparent;
-
-                &:hover {
-                    color: ${colors.primary.light};
+                    margin: 0 3px;
                 }
 
-                &:active {
-                    transition: color 0s;
-                    color: ${colors.primary.dark};
+                &[data-component=code] {
+                    background-color: ${gray(.06)};
+                    font-size: ${13 / 14}em;
+                    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+                    padding: 3px 6px;
+                    border-radius: .15em;
+                    margin: 0 4px;
+                    outline: none;
                 }
-            }
-
-            &:not([data-ellipsis-rows="0"]) {
-                display: flex;
-                max-width: 100%;
-                align-items: flex-end;
 
-                &[data-component=mark],
-                &[data-component=kbd],
-                &[data-component=code],
                 &[data-component=a] {
-                    display: inline-flex;
-                }
+                    color: ${colors.primary.main};
+                    transition: color .25s ${easing.easeOut};
+                    -webkit-tap-highlight-color: transparent;
 
-                .${classes.text} {
-                    overflow: hidden;
-                }
+                    &:hover {
+                        color: ${colors.primary.light};
+                    }
 
-                &[data-ellipsis-rows="1"] {
-                    .${classes.text} {
-                        white-space: nowrap;
-                        text-overflow: ellipsis;
+                    &:active {
+                        transition: color 0s;
+                        color: ${colors.primary.dark};
                     }
                 }
 
-                &:not([data-ellipsis-rows="1"]) {
+                &:not([data-ellipsis-rows="0"]) {
+                    display: flex;
+                    max-width: 100%;
+                    align-items: flex-end;
+
+                    &[data-component=mark],
+                    &[data-component=kbd],
+                    &[data-component=code],
+                    &[data-component=a] {
+                        display: inline-flex;
+                    }
+
                     .${classes.text} {
-                        display: -webkit-box;
-                        -webkit-box-orient: vertical;
+                        overflow: hidden;
+                    }
+
+                    &[data-ellipsis-rows="1"] {
+                        .${classes.text} {
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                        }
+                    }
+
+                    &:not([data-ellipsis-rows="1"]) {
+                        .${classes.text} {
+                            display: -webkit-box;
+                            -webkit-box-orient: vertical;
+                        }
                     }
                 }
-            }
 
-            .${classes.action},
-            .${classes.copied} {
-                height: 1.5em;
-                vertical-align: text-bottom;
-                margin-left: .5em;
-                white-space: nowrap;
-            }
+                .${classes.action},
+                .${classes.copied} {
+                    height: 1.5em;
+                    vertical-align: text-bottom;
+                    margin-left: .5em;
+                    white-space: nowrap;
+                }
 
-            .${classes.copied} {
-                align-items: center;
-                color: ${colors.success.main};
-                animation: ${copyCheckAnim} .3s ${easing.swing};
+                .${classes.copied} {
+                    align-items: center;
+                    color: ${colors.success.main};
+                    animation: ${copyCheckAnim} .3s ${easing.swing};
+                }
             }
         `;
     }, [colorValue]);