@canlooks/can-ui 0.0.97 → 0.0.99

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

@@ -17,12 +17,12 @@ export const classes = defineInnerClasses('tabs', [
 export const indicatorWidth = 2;
 export function useStyle({ color, variant }) {
     const colorValue = useColor(color);
-    return useCss(({ divider, text, easing, background, spacing, borderRadius, gray, colors }) => {
+    return useCss(({ divider, text, easing, background, spacing, borderRadius, gray }) => {
         const commonStyle = css `
             display: flex;
             position: relative;
             overflow: hidden;
-            
+
             .${classes.scroll} {
                 flex: 1;
                 display: flex;
@@ -33,7 +33,7 @@ export function useStyle({ color, variant }) {
                 &::-webkit-scrollbar {
                     display: none;
                 }
-    
+
                 .${classes.scrollWrap} {
                     flex: 1;
                     display: flex;
@@ -110,7 +110,7 @@ export function useStyle({ color, variant }) {
                 }
             }
 
-            &:after {
+            &::after {
                 content: '';
                 background-color: ${divider};
                 position: absolute;
@@ -146,18 +146,18 @@ export function useStyle({ color, variant }) {
 
             &[data-position=top],
             &[data-position=bottom] {
-                &:after {
+                &::after {
                     height: 1px;
                 }
 
                 &[data-position=top] {
-                    &:after {
+                    &::after {
                         inset: auto 0 0 0;
                     }
                 }
 
                 &[data-position=bottom] {
-                    &:after {
+                    &::after {
                         inset: 0 0 auto 0;
                     }
                 }
@@ -169,18 +169,18 @@ export function useStyle({ color, variant }) {
                     flex-direction: column;
                 }
 
-                &:after {
+                &::after {
                     width: 1px;
                 }
 
                 &[data-position=left] {
-                    &:after {
+                    &::after {
                         inset: 0 0 0 auto;
                     }
                 }
 
                 &[data-position=right] {
-                    &:after {
+                    &::after {
                         inset: 0 auto 0 0;
                     }
                 }
@@ -189,18 +189,18 @@ export function useStyle({ color, variant }) {
             &:not([data-read-only=true]):not([data-disabled=true]) {
                 .${classes.tab}:not([data-disabled=true]) {
                     cursor: pointer;
-                    
+
                     &:not([data-active=true]):hover {
                         color: ${gray(.65)};
                     }
-                
+
                     &:not([data-active=true]):active {
                         transition: color 0s;
                         color: ${text.primary};
                     }
                 }
             }
-    
+
             &[data-disabled=true] {
                 .${classes.tab} {
                     cursor: not-allowed;
@@ -209,187 +209,189 @@ export function useStyle({ color, variant }) {
         `;
         return variant === 'line'
             ? css `
-                ${commonStyle}
-
-                .${classes.scrollWrap} {
-                    gap: 0 ${spacing[10]}px;
-                }
-
-                .${classes.tab} {
-                    transition: color .25s ${easing.easeOut};
-                }
-
-                &[data-position=top],
-                &[data-position=bottom] {
-                    .${classes.tab} {
-                        padding: 10px 0;
-                    }
-
-                    &[data-size=small] {
-                        .${classes.tab} {
-                            padding: 6px 0;
+                    @layer reset {
+                        ${commonStyle}
+                        .${classes.scrollWrap} {
+                            gap: 0 ${spacing[10]}px;
                         }
-                    }
-            
-                    &[data-size=large] {
+
                         .${classes.tab} {
-                            padding: 14px 0;
+                            transition: color .25s ${easing.easeOut};
                         }
-                    }
-                }
-
-                &[data-position=top] {
-                    .${classes.tab} {
-                        border-bottom: ${indicatorWidth}px solid transparent;
-                    }
-                }
 
-                &[data-position=bottom] {
-                    .${classes.tab} {
-                        border-top: ${indicatorWidth}px solid transparent;
-                    }
-                }
+                        &[data-position=top],
+                        &[data-position=bottom] {
+                            .${classes.tab} {
+                                padding: 10px 0;
+                            }
+
+                            &[data-size=small] {
+                                .${classes.tab} {
+                                    padding: 6px 0;
+                                }
+                            }
+
+                            &[data-size=large] {
+                                .${classes.tab} {
+                                    padding: 14px 0;
+                                }
+                            }
+                        }
 
-                &[data-position=left],
-                &[data-position=right] {
-                    .${classes.tab} {
-                        padding: 10px 18px;
-                    }
+                        &[data-position=top] {
+                            .${classes.tab} {
+                                border-bottom: ${indicatorWidth}px solid transparent;
+                            }
+                        }
 
-                    &[data-size=small] {
-                        .${classes.tab} {
-                            padding: 6px 18px;
+                        &[data-position=bottom] {
+                            .${classes.tab} {
+                                border-top: ${indicatorWidth}px solid transparent;
+                            }
                         }
-                    }
-            
-                    &[data-size=large] {
-                        .${classes.tab} {
-                            padding: 14px 18px;
+
+                        &[data-position=left],
+                        &[data-position=right] {
+                            .${classes.tab} {
+                                padding: 10px 18px;
+                            }
+
+                            &[data-size=small] {
+                                .${classes.tab} {
+                                    padding: 6px 18px;
+                                }
+                            }
+
+                            &[data-size=large] {
+                                .${classes.tab} {
+                                    padding: 14px 18px;
+                                }
+                            }
                         }
-                    }
-                }
 
-                &[data-position=left] {
-                    .${classes.tab} {
-                        border-right: ${indicatorWidth}px solid transparent;
-                    }
-                }
+                        &[data-position=left] {
+                            .${classes.tab} {
+                                border-right: ${indicatorWidth}px solid transparent;
+                            }
+                        }
 
-                &[data-position=right] {
-                    .${classes.tab} {
-                        border-left: ${indicatorWidth}px solid transparent;
-                    }
-                }
+                        &[data-position=right] {
+                            .${classes.tab} {
+                                border-left: ${indicatorWidth}px solid transparent;
+                            }
+                        }
 
-                .${classes.indicator} {
-                    position: absolute;
-                    z-index: 1;
-                    transition-property: width, height, left, top;
-                    transition-duration: .3s;
-                    transition-timing-function: ${easing.bounce};
-                }
+                        .${classes.indicator} {
+                            position: absolute;
+                            z-index: 1;
+                            transition-property: width, height, left, top;
+                            transition-duration: .3s;
+                            transition-timing-function: ${easing.bounce};
+                        }
 
-                &:not([data-animating=true]) {
-                    .${classes.indicator} {
-                        display: none;
+                        &:not([data-animating=true]) {
+                            .${classes.indicator} {
+                                display: none;
+                            }
+                        }
                     }
-                }
             `
             // variant === 'card'
             : css `
-                ${commonStyle}
-
-                .${classes.scrollWrap} {
-                    gap: ${spacing[1]}px;
-                }
-
-                .${classes.tab} {
-                    border: 1px solid ${gray(.1)};
-                    background-color: ${background.body};
-                    transition: color .25s ${easing.easeOut}, background-color .25s ${easing.easeOut};
-
-                    &[data-active=true] {
-                        background-color: ${background.content};
-                    }
-                }
-
-                &[data-position=top],
-                &[data-position=bottom] {
-                    .${classes.tab} {
-                        padding: 10px 15px;
-                    }
-
-                    &[data-size=small] {
-                        .${classes.tab} {
-                            padding: 6px 15px;
+                    @layer reset {
+                        ${commonStyle}
+                        .${classes.scrollWrap} {
+                            gap: ${spacing[1]}px;
                         }
-                    }
-            
-                    &[data-size=large] {
+
                         .${classes.tab} {
-                            padding: 14px 15px;
-                        }
-                    }
-                }
+                            border: 1px solid ${gray(.1)};
+                            background-color: ${background.body};
+                            transition: color .25s ${easing.easeOut}, background-color .25s ${easing.easeOut};
 
-                &[data-position=top] {
-                    .${classes.tab} {
-                        border-radius: ${borderRadius}px ${borderRadius}px 0 0;
+                            &[data-active=true] {
+                                background-color: ${background.content};
+                            }
+                        }
 
-                        &[data-active=true] {
-                            border-bottom-color: ${background.content};
+                        &[data-position=top],
+                        &[data-position=bottom] {
+                            .${classes.tab} {
+                                padding: 10px 15px;
+                            }
+
+                            &[data-size=small] {
+                                .${classes.tab} {
+                                    padding: 6px 15px;
+                                }
+                            }
+
+                            &[data-size=large] {
+                                .${classes.tab} {
+                                    padding: 14px 15px;
+                                }
+                            }
                         }
-                    }
-                }
 
-                &[data-position=bottom] {
-                    .${classes.tab} {
-                        border-radius: 0 0 ${borderRadius}px ${borderRadius}px;
+                        &[data-position=top] {
+                            .${classes.tab} {
+                                border-radius: ${borderRadius}px ${borderRadius}px 0 0;
 
-                        &[data-active=true] {
-                            border-top-color: ${background.content};
+                                &[data-active=true] {
+                                    border-bottom-color: ${background.content};
+                                }
+                            }
                         }
-                    }
-                }
 
-                &[data-position=left],
-                &[data-position=right] {
-                    .${classes.tab} {
-                        padding: 9px 18px;
-                    }
+                        &[data-position=bottom] {
+                            .${classes.tab} {
+                                border-radius: 0 0 ${borderRadius}px ${borderRadius}px;
 
-                    &[data-size=small] {
-                        .${classes.tab} {
-                            padding: 5px 18px;
+                                &[data-active=true] {
+                                    border-top-color: ${background.content};
+                                }
+                            }
                         }
-                    }
-            
-                    &[data-size=large] {
-                        .${classes.tab} {
-                            padding: 13px 18px;
+
+                        &[data-position=left],
+                        &[data-position=right] {
+                            .${classes.tab} {
+                                padding: 9px 18px;
+                            }
+
+                            &[data-size=small] {
+                                .${classes.tab} {
+                                    padding: 5px 18px;
+                                }
+                            }
+
+                            &[data-size=large] {
+                                .${classes.tab} {
+                                    padding: 13px 18px;
+                                }
+                            }
                         }
-                    }
-                }
 
-                &[data-position=left] {
-                    .${classes.tab} {
-                        border-radius: ${borderRadius}px 0 0 ${borderRadius}px;
+                        &[data-position=left] {
+                            .${classes.tab} {
+                                border-radius: ${borderRadius}px 0 0 ${borderRadius}px;
 
-                        &[data-active=true] {
-                            border-right-color: ${background.content};
+                                &[data-active=true] {
+                                    border-right-color: ${background.content};
+                                }
+                            }
                         }
-                    }
-                }
 
-                &[data-position=right] {
-                    .${classes.tab} {
-                        border-radius: 0 ${borderRadius}px ${borderRadius}px 0;
+                        &[data-position=right] {
+                            .${classes.tab} {
+                                border-radius: 0 ${borderRadius}px ${borderRadius}px 0;
 
-                        &[data-active=true] {
-                            border-left-color: ${background.content};
+                                &[data-active=true] {
+                                    border-left-color: ${background.content};
+                                }
+                            }
                         }
                     }
-                }
             `;
     }, [colorValue, variant]);
 }

package/dist/esm/components/tabs/tabsEllipsis.style.js

@@ -5,9 +5,11 @@ import { classes as optionsBaseClasses } from '../optionsBase/optionsBase.style'
 export const tabsEllipsisPopperStyle = defineCss(theme => [
     popperStyleCallback(theme),
     css `
-        .${optionsBaseClasses.root} .${optionsBaseClasses.optionsList} {
-            max-width: 360px;
-            overflow: hidden auto;
+        @layer reset {
+            .${optionsBaseClasses.root} .${optionsBaseClasses.optionsList} {
+                max-width: 360px;
+                overflow: hidden auto;
+            }
         }
     `
 ]);

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

@@ -12,107 +12,109 @@ export function useStyle({ color }) {
     return useCss(({ spacing, borderRadius, divider, gray, easing }) => {
         const c = Color(colorValue);
         return css `
-            line-height: 1;
-            display: inline-flex;
-            align-items: center;
-    
-            .${classes.content} {
-                flex: 1;
-                min-width: 0;
-            }
-    
-            font-size: 1em;
-            gap: ${spacing[1]}px;
-            border-radius: ${borderRadius}px;
-    
-            &[data-size=small] {
-                font-size: ${13 / 14}em;
-                gap: 4px;
-                border-radius: 4px;
-                padding: ${spacing[1]}px ${spacing[2]}px;
-            }
-    
-            &[data-shape=rounded] {
-                border-radius: 1000em;
-                padding: ${spacing[1]}px 8px;
-            }
-    
-            &[data-size=medium] {
-                padding: ${spacing[2]}px ${spacing[3]}px;
-            }
-    
-            &[data-size=large] {
-                padding: 10px ${spacing[4]}px;
-            }
-    
-            border-width: 1px;
-    
-            &[data-variant=pure] {
-                border-width: 0;
-                padding: ${spacing[1] + 1}px ${spacing[2] + 1}px;
-            }
-    
-            border-style: solid;
-            border-color: ${color === 'text' ? divider : c.alpha(.5).string()};
-            
-    
-            &[data-variant=outlined],
-            &[data-variant=pure] {
-                color: ${colorValue};
-                background-color: ${c.alpha(.1).string()};
-            }
-    
-            &[data-variant=filled] {
-                color: #ffffff;
-                background-color: ${colorValue};
-            }
-    
-            &[data-size=small] {
-                .${classes.close} {
+            @layer reset {
+                line-height: 1;
+                display: inline-flex;
+                align-items: center;
+
+                .${classes.content} {
+                    flex: 1;
+                    min-width: 0;
+                }
+
+                font-size: 1em;
+                gap: ${spacing[1]}px;
+                border-radius: ${borderRadius}px;
+
+                &[data-size=small] {
                     font-size: ${13 / 14}em;
+                    gap: 4px;
+                    border-radius: 4px;
+                    padding: ${spacing[1]}px ${spacing[2]}px;
                 }
-            }
-    
-            &[data-variant=filled] {
-                .${classes.close} {
-                    color: ${gray(.1)};
-                    -webkit-tap-highlight-color: transparent;
-                    
+
+                &[data-shape=rounded] {
+                    border-radius: 1000em;
+                    padding: ${spacing[1]}px 8px;
+                }
+
+                &[data-size=medium] {
+                    padding: ${spacing[2]}px ${spacing[3]}px;
+                }
+
+                &[data-size=large] {
+                    padding: 10px ${spacing[4]}px;
+                }
+
+                border-width: 1px;
+
+                &[data-variant=pure] {
+                    border-width: 0;
+                    padding: ${spacing[1] + 1}px ${spacing[2] + 1}px;
+                }
+
+                border-style: solid;
+                border-color: ${color === 'text' ? divider : c.alpha(.5).string()};
+
+
+                &[data-variant=outlined],
+                &[data-variant=pure] {
+                    color: ${colorValue};
+                    background-color: ${c.alpha(.1).string()};
+                }
+
+                &[data-variant=filled] {
+                    color: #ffffff;
+                    background-color: ${colorValue};
+                }
+
+                &[data-size=small] {
+                    .${classes.close} {
+                        font-size: ${13 / 14}em;
+                    }
+                }
+
+                &[data-variant=filled] {
+                    .${classes.close} {
+                        color: ${gray(.1)};
+                        -webkit-tap-highlight-color: transparent;
+
+                        &:hover {
+                            color: ${gray(.2)};
+                        }
+
+                        &:active {
+                            transition: color 0s;
+                            color: ${gray(.3)}
+                        }
+                    }
+                }
+
+                &[data-clickable=true] {
+                    cursor: pointer;
+                    transition: filter .25s ${easing.easeOut};
+
                     &:hover {
-                        color: ${gray(.2)};
+                        filter: brightness(1.2);
                     }
-                
+
                     &:active {
-                        transition: color 0s;
-                        color: ${gray(.3)}
+                        transition: filter 0s;
+                        filter: brightness(.8);
                     }
                 }
-            }
-    
-            &[data-clickable=true] {
-                cursor: pointer;
-                transition: filter .25s ${easing.easeOut};
-    
-                &:hover {
-                    filter: brightness(1.2);
-                }
-    
-                &:active {
-                    transition: filter 0s;
-                    filter: brightness(.8);
-                }
-            }
-    
-            &[data-compact=row] {
-                &:not([data-last=true]) {
-                    border-top-right-radius: 0;
-                    border-bottom-right-radius: 0;
-                }
-    
-                &:not([data-first=true]) {
-                    border-top-left-radius: 0;
-                    border-bottom-left-radius: 0;
-                    margin-left: -1px;
+
+                &[data-compact=row] {
+                    &:not([data-last=true]) {
+                        border-top-right-radius: 0;
+                        border-bottom-right-radius: 0;
+                    }
+
+                    &:not([data-first=true]) {
+                        border-top-left-radius: 0;
+                        border-bottom-left-radius: 0;
+                        margin-left: -1px;
+                    }
                 }
             }
         `;