@canlooks/can-ui 0.0.98 → 0.0.100

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

@@ -16,99 +16,101 @@ export function useStyle({ color }) {
         const lighter = c.lighten(.2).hex();
         const outlineColor = c.alpha(.4).string();
         return css `
-            display: inline-flex;
-            align-items: center;
-            position: relative;
-
-            .${classes.input} {
-                position: absolute;
-                opacity: 0;
-                inset: 0;
-                pointer-events: none;
-            }
-
-            .${classes.track} {
+            @layer reset {
                 display: inline-flex;
                 align-items: center;
-                border-radius: 1000em;
                 position: relative;
-                overflow: hidden;
-                outline-offset: 1px;
-                outline: 0 solid ${outlineColor};
-                background-color: ${gray(.1)};
-                transition: background-color .25s ${easing.easeOut};
-            }
 
-            &:has(:focus-visible) {
-                .${classes.track} {
-                    transition: background-color .25s ${easing.easeOut}, outline-width .25s ${easing.swing};
-                    outline-width: 3px;
+                .${classes.input} {
+                    position: absolute;
+                    opacity: 0;
+                    inset: 0;
+                    pointer-events: none;
                 }
-            }
 
-            .${classes.thumb} {
-                aspect-ratio: 1;
-                background-color: #ffffff;
-                border-radius: 50%;
-                box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
-                position: absolute;
-                top: 50%;
-                transform: translateY(-50%);
-                left: 2px;
-                transition: left .25s ${easing.bounce};
-            }
+                .${classes.track} {
+                    display: inline-flex;
+                    align-items: center;
+                    border-radius: 1000em;
+                    position: relative;
+                    overflow: hidden;
+                    outline-offset: 1px;
+                    outline: 0 solid ${outlineColor};
+                    background-color: ${gray(.1)};
+                    transition: background-color .25s ${easing.easeOut};
+                }
 
-            &:not([data-disabled=true]):not([data-read-only=true]) {
-                cursor: pointer;
-                
-                &:hover {
+                &:has(:focus-visible) {
                     .${classes.track} {
-                        background-color: ${gray(.2)};
+                        transition: background-color .25s ${easing.easeOut}, outline-width .25s ${easing.swing};
+                        outline-width: 3px;
                     }
                 }
-            }
 
-            &[data-disabled=true] {
-                cursor: not-allowed;
+                .${classes.thumb} {
+                    aspect-ratio: 1;
+                    background-color: #ffffff;
+                    border-radius: 50%;
+                    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    left: 2px;
+                    transition: left .25s ${easing.bounce};
+                }
 
-                &[data-checked=true] {
-                    .${classes.track} {
-                        background-color: ${outlineColor};
+                &:not([data-disabled=true]):not([data-read-only=true]) {
+                    cursor: pointer;
+
+                    &:hover {
+                        .${classes.track} {
+                            background-color: ${gray(.2)};
+                        }
                     }
                 }
-            }
 
-            &[data-checked=true] {
-                .${classes.track} {
-                    background-color: ${colorValue};
+                &[data-disabled=true] {
+                    cursor: not-allowed;
+
+                    &[data-checked=true] {
+                        .${classes.track} {
+                            background-color: ${outlineColor};
+                        }
+                    }
                 }
 
-                &:not([data-disabled=true]):not([data-read-only=true]):hover {
+                &[data-checked=true] {
                     .${classes.track} {
-                        background-color: ${lighter};
+                        background-color: ${colorValue};
                     }
-                }
-            }
 
-            .${classes.label} {
-                height: 100%;
-                align-self: flex-start;
-                white-space: nowrap;
-                transition: all .25s ${easing.bounce};
-                
-                .${classes.checkedLabel},
-                .${classes.uncheckedLabel} {
-                    text-align: center;
+                    &:not([data-disabled=true]):not([data-read-only=true]):hover {
+                        .${classes.track} {
+                            background-color: ${lighter};
+                        }
+                    }
                 }
 
-                .${classes.checkedLabel} {
-                    color: #ffffff;
-                    padding: 0 6px 0 12px;
-                }
-                
-                .${classes.uncheckedLabel} {
-                    color: ${text.secondary};
-                    padding: 0 12px 0 6px;
+                .${classes.label} {
+                    height: 100%;
+                    align-self: flex-start;
+                    white-space: nowrap;
+                    transition: all .25s ${easing.bounce};
+
+                    .${classes.checkedLabel},
+                    .${classes.uncheckedLabel} {
+                        text-align: center;
+                    }
+
+                    .${classes.checkedLabel} {
+                        color: #ffffff;
+                        padding: 0 6px 0 12px;
+                    }
+
+                    .${classes.uncheckedLabel} {
+                        color: ${text.secondary};
+                        padding: 0 12px 0 6px;
+                    }
                 }
             }
         `;

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

@@ -10,124 +10,126 @@ export const style = defineCss(({ mode, spacing, gray, divider, background, easi
     const stripedBg = gray(mode === 'light' ? .02 : .21);
     const selectedBg = Color(colors.primary.main).alpha(mode === 'light' ? .05 : .1).string();
     return css `
-        width: 100%;
-        border-spacing: 0;
+        @layer reset {
+            width: 100%;
+            border-spacing: 0;
 
-        thead, tfoot {
-            position: sticky;
-            z-index: 3;
+            thead, tfoot {
+                position: sticky;
+                z-index: 3;
 
-            th, td {
-                background-color: ${headerBg};
+                th, td {
+                    background-color: ${headerBg};
+                }
             }
-        }
-
-        thead {
-            top: 0;
-        }
 
-        tfoot {
-            bottom: 0;
-
-            th, td {
-                border-top: 1px solid ${divider};
+            thead {
+                top: 0;
             }
-        }
 
-        tbody tr {
-            &:not(:hover):not([data-selected=true]) {
+            tfoot {
+                bottom: 0;
+
                 th, td {
-                    background-color: ${background.content};
+                    border-top: 1px solid ${divider};
                 }
             }
-        }
-
-        th, td {
-            position: relative;
-            text-align: left;
-            padding: 12px ${spacing[5]}px;
-            border-bottom: 1px solid ${divider};
-            transition: background-color .25s ${easing.easeOut};
-        }
 
-        &[data-size=small] {
-            th, td {
-                padding: 7px ${spacing[4]}px;
+            tbody tr {
+                &:not(:hover):not([data-selected=true]) {
+                    th, td {
+                        background-color: ${background.content};
+                    }
+                }
             }
-        }
 
-        &[data-size=large] {
             th, td {
-                padding: 17px ${spacing[6]}px;
+                position: relative;
+                text-align: left;
+                padding: 12px ${spacing[5]}px;
+                border-bottom: 1px solid ${divider};
+                transition: background-color .25s ${easing.easeOut};
             }
-        }
 
-        &[data-bordered=all], &[data-bordered=true] {
-            th, td {
-                border-right: 1px solid ${divider};
-                
-                &:first-of-type {
-                    border-left: 1px solid ${divider};
+            &[data-size=small] {
+                th, td {
+                    padding: 7px ${spacing[4]}px;
                 }
             }
-            
-            thead tr:first-of-type {
+
+            &[data-size=large] {
                 th, td {
-                    border-top: 1px solid ${divider};
+                    padding: 17px ${spacing[6]}px;
                 }
             }
-        }
 
-        &:not([data-bordered=all], [data-bordered=true]) {
-            thead {
+            &[data-bordered=all], &[data-bordered=true] {
                 th, td {
-                    &:not(:first-of-type) {
-                        &:before {
-                            content: '';
-                            width: 2px;
-                            height: 1em;
-                            background-color: ${divider};
-                            position: absolute;
-                            top: calc(50% - .5em);
-                            left: 0;
-                        }
+                    border-right: 1px solid ${divider};
+
+                    &:first-of-type {
+                        border-left: 1px solid ${divider};
                     }
                 }
-            }
-        }
-
-        &[data-bordered=out] {
-            border-top: 1px solid ${divider};
 
-            th, td {
-                &:first-of-type {
-                    border-left: 1px solid ${divider};
+                thead tr:first-of-type {
+                    th, td {
+                        border-top: 1px solid ${divider};
+                    }
                 }
+            }
 
-                &:last-of-type {
-                    border-right: 1px solid ${divider};
+            &:not([data-bordered=all], [data-bordered=true]) {
+                thead {
+                    th, td {
+                        &:not(:first-of-type) {
+                            &::before {
+                                content: '';
+                                width: 2px;
+                                height: 1em;
+                                background-color: ${divider};
+                                position: absolute;
+                                top: calc(50% - .5em);
+                                left: 0;
+                            }
+                        }
+                    }
                 }
             }
-        }
 
-        tbody tr {
-            &[data-selected=true] {
+            &[data-bordered=out] {
+                border-top: 1px solid ${divider};
+
                 th, td {
-                    background-color: ${selectedBg};
+                    &:first-of-type {
+                        border-left: 1px solid ${divider};
+                    }
+
+                    &:last-of-type {
+                        border-right: 1px solid ${divider};
+                    }
                 }
             }
 
-            &:not([data-selected=true]):hover {
-                th, td {
-                    background-color: ${headerBg};
+            tbody tr {
+                &[data-selected=true] {
+                    th, td {
+                        background-color: ${selectedBg};
+                    }
+                }
+
+                &:not([data-selected=true]):hover {
+                    th, td {
+                        background-color: ${headerBg};
+                    }
                 }
             }
-        }
 
-        &[data-striped=true] {
-            tbody tr:nth-of-type(even):not(:hover):not([data-selected=true]) {
-                th, td {
-                    background-color: ${stripedBg};
+            &[data-striped=true] {
+                tbody tr:nth-of-type(even):not(:hover):not([data-selected=true]) {
+                    th, td {
+                        background-color: ${stripedBg};
+                    }
                 }
             }
         }

package/dist/esm/components/table/tableSticky.style.js

@@ -1,46 +1,48 @@
 import { defineCss } from '../../utils';
 import { css } from '@emotion/react';
-export const style = defineCss(({ background, easing }) => css `
-    overflow: auto;
+export const style = defineCss(({ easing }) => css `
+    @layer reset {
+        overflow: auto;
 
-    th, td {
-        &[data-sticky=left], &[data-sticky=right] {
-            overflow: visible;
-            position: sticky;
-            z-index: 2;
+        th, td {
+            &[data-sticky=left], &[data-sticky=right] {
+                overflow: visible;
+                position: sticky;
+                z-index: 2;
 
-            &:after {
-                content: '';
-                width: 30px;
-                height: 100%;
-                position: absolute;
-                top: 0;
-                transition: all .3s ${easing.easeOut};
-                pointer-events: none;
+                &::after {
+                    content: '';
+                    width: 30px;
+                    height: 100%;
+                    position: absolute;
+                    top: 0;
+                    transition: all .3s ${easing.easeOut};
+                    pointer-events: none;
+                }
             }
-        }
 
-        &[data-sticky=left]:after {
-            left: 100%;
-        }
+            &[data-sticky=left]::after {
+                left: 100%;
+            }
 
-        &[data-sticky=right]:after {
-            right: 100%;
+            &[data-sticky=right]::after {
+                right: 100%;
+            }
         }
-    }
 
-    &[data-scrolled-left=true] {
-        th, td {
-            &[data-sticky=left]:not(:has(+ [data-sticky=left])):after {
-                box-shadow: inset 12px 0 9px -9px rgba(0, 0, 0, .08);
+        &[data-scrolled-left=true] {
+            th, td {
+                &[data-sticky=left]:not(:has(+ [data-sticky=left]))::after {
+                    box-shadow: inset 12px 0 9px -9px rgba(0, 0, 0, .08);
+                }
             }
         }
-    }
 
-    &[data-scrolled-right=true] {
-        th, td {
-            &:not([data-sticky=right]) + [data-sticky=right]:after {
-                box-shadow: inset -12px 0 9px -9px rgba(0, 0, 0, .08);
+        &[data-scrolled-right=true] {
+            th, td {
+                &:not([data-sticky=right]) + [data-sticky=right]::after {
+                    box-shadow: inset -12px 0 9px -9px rgba(0, 0, 0, .08);
+                }
             }
         }
     }