@canlooks/can-ui 0.0.98 → 0.0.99

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

@@ -9,121 +9,123 @@ export const classes = defineInnerClasses('accordion', [
     'content'
 ]);
 export const style = defineCss(({ divider, borderRadius, background, spacing, text, gray, easing }) => css `
-    border: 1px solid ${divider};
-    border-radius: ${borderRadius}px;
-    background-color: ${background.content};
-    transition: margin .25s ${easing.easeOut};
-
-    .${classes.titleRow} {
-        display: flex;
-        align-items: center;
-        gap: ${spacing[2]}px;
-        padding: 9px ${spacing[5]}px;
-        transition: padding .25s ${easing.easeOut};
-
-        .${classes.expandIcon} {
-            color: ${text.disabled};
-            transition: transform .25s ${easing.easeOut};
-        }
-
-        .${classes.title} {
-            flex: 1;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
-
-        .${classes.prefix},
-        .${classes.suffix} {
-            color: ${text.secondary};
-        }
-    }
+    @layer reset {
+        border: 1px solid ${divider};
+        border-radius: ${borderRadius}px;
+        background-color: ${background.content};
+        transition: margin .25s ${easing.easeOut};
 
-    &:not([data-read-only=true]):not([data-disabled=true]) {
         .${classes.titleRow} {
-            cursor: pointer;
-        }
-    }
-
-    &[data-disabled=true] {
-        background-color: ${gray(.1)};
+            display: flex;
+            align-items: center;
+            gap: ${spacing[2]}px;
+            padding: 9px ${spacing[5]}px;
+            transition: padding .25s ${easing.easeOut};
+
+            .${classes.expandIcon} {
+                color: ${text.disabled};
+                transition: transform .25s ${easing.easeOut};
+            }
 
-        .${classes.titleRow} {
-            cursor: not-allowed;
-        }
-    }
+            .${classes.title} {
+                flex: 1;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
 
-    &[data-expanded=true] {
-        .${classes.titleRow} {
-            padding: 15px ${spacing[5]}px;
+            .${classes.prefix},
+            .${classes.suffix} {
+                color: ${text.secondary};
+            }
         }
 
-        .${classes.expandIcon} {
-            transform: rotate(90deg);
+        &:not([data-read-only=true]):not([data-disabled=true]) {
+            .${classes.titleRow} {
+                cursor: pointer;
+            }
         }
-    }
 
-    .${classes.content} {
-        padding: 0 ${spacing[5]}px ${spacing[5]}px;
-    }
+        &[data-disabled=true] {
+            background-color: ${gray(.1)};
 
-    &[data-size=small] {
-        .${classes.titleRow} {
-            padding: 6px ${spacing[5]}px;
+            .${classes.titleRow} {
+                cursor: not-allowed;
+            }
         }
 
         &[data-expanded=true] {
             .${classes.titleRow} {
-                padding: 11px ${spacing[5]}px;
+                padding: 15px ${spacing[5]}px;
+            }
+
+            .${classes.expandIcon} {
+                transform: rotate(90deg);
             }
         }
-    }
 
-    &[data-size=large] {
-        .${classes.titleRow} {
-            padding: 12px ${spacing[5]}px;
+        .${classes.content} {
+            padding: 0 ${spacing[5]}px ${spacing[5]}px;
         }
 
-        &[data-expanded=true] {
+        &[data-size=small] {
             .${classes.titleRow} {
-                padding: 17px ${spacing[5]}px;
+                padding: 6px ${spacing[5]}px;
             }
-        }
-    }
 
-    &[data-compact=column] {
-        &:not([data-first=true]) {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-            margin-top: -1px;
+            &[data-expanded=true] {
+                .${classes.titleRow} {
+                    padding: 11px ${spacing[5]}px;
+                }
+            }
         }
-    
-        &:not([data-last=true]) {
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
+
+        &[data-size=large] {
+            .${classes.titleRow} {
+                padding: 12px ${spacing[5]}px;
+            }
+
+            &[data-expanded=true] {
+                .${classes.titleRow} {
+                    padding: 17px ${spacing[5]}px;
+                }
+            }
         }
-        
-        &[data-expanded=true] {
+
+        &[data-compact=column] {
             &:not([data-first=true]) {
-                margin-top: ${spacing[3]}px;
+                border-top-left-radius: 0;
+                border-top-right-radius: 0;
+                margin-top: -1px;
             }
 
-            &:not([data-last=true]):not(:has(+ [data-expanded=true])) {
-                margin-bottom: ${spacing[3]}px
+            &:not([data-last=true]) {
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
             }
-        }
-    }
 
-    &[data-compact=row] {
-        &:not([data-first=true]) {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-            margin-left: -1px;
+            &[data-expanded=true] {
+                &:not([data-first=true]) {
+                    margin-top: ${spacing[3]}px;
+                }
+
+                &:not([data-last=true]):not(:has(+ [data-expanded=true])) {
+                    margin-bottom: ${spacing[3]}px
+                }
+            }
         }
-    
-        &:not([data-last=true]) {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
+
+        &[data-compact=row] {
+            &:not([data-first=true]) {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+                margin-left: -1px;
+            }
+
+            &:not([data-last=true]) {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+            }
         }
     }
 `);

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

@@ -7,48 +7,50 @@ export const classes = defineInnerClasses('action-sheet', [
     'action'
 ]);
 export const style = defineCss(({ spacing, background, boxShadow, borderRadius, text, divider }) => css `
-    .${classes.sheet} {
-        position: absolute;
-        padding: ${spacing[8]}px;
-    }
-
-    &[data-placement=top] {
+    @layer reset {
         .${classes.sheet} {
-            transform-origin: top;
-            inset: 0 0 auto;
+            position: absolute;
+            padding: ${spacing[8]}px;
         }
-    }
-    
-    &[data-placement=bottom] {
-        .${classes.sheet} {
-            transform-origin: bottom;
-            inset: auto 0 0;
+
+        &[data-placement=top] {
+            .${classes.sheet} {
+                transform-origin: top;
+                inset: 0 0 auto;
+            }
         }
-    }
 
-    .${classes.card} {
-        text-align: center;
-        background-color: ${background.content};
-        box-shadow: ${boxShadow[1]};
-        border-radius: ${borderRadius}px;
-        overflow: hidden;
+        &[data-placement=bottom] {
+            .${classes.sheet} {
+                transform-origin: bottom;
+                inset: auto 0 0;
+            }
+        }
+
+        .${classes.card} {
+            text-align: center;
+            background-color: ${background.content};
+            box-shadow: ${boxShadow[1]};
+            border-radius: ${borderRadius}px;
+            overflow: hidden;
 
-        &:not(:last-of-type) {
-            margin-bottom: ${spacing[8]}px;
+            &:not(:last-of-type) {
+                margin-bottom: ${spacing[8]}px;
+            }
         }
-    }
 
-    .${classes.title} {
-        line-height: 3;
-        color: ${text.secondary};
-        font-size: ${13 / 14}em;
-    }
+        .${classes.title} {
+            line-height: 3;
+            color: ${text.secondary};
+            font-size: ${13 / 14}em;
+        }
 
-    .${classes.action} {
-        border-radius: 0;
+        .${classes.action} {
+            border-radius: 0;
 
-        &:not(:last-of-type) {
-            border-bottom: 1px solid ${divider};
+            &:not(:last-of-type) {
+                border-bottom: 1px solid ${divider};
+            }
         }
     }
 `);

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

@@ -18,62 +18,64 @@ export function useStyle({ color }) {
         const bg = c.alpha(mode === 'light' ? .1 : .16).string();
         const filledBg = mode === 'light' ? colorValue : c.alpha(.8).string();
         return css `
-            display: flex;
-            align-items: center;
-            gap: ${spacing[3]}px;
-            padding: ${spacing[4]}px ${spacing[5]}px;
-            border-radius: ${borderRadius}px;
+            @layer reset {
+                display: flex;
+                align-items: center;
+                gap: ${spacing[3]}px;
+                padding: ${spacing[4]}px ${spacing[5]}px;
+                border-radius: ${borderRadius}px;
 
-            .${classes.icon} {
-                display: block;
-                color: ${colorValue};
-            }
-
-            &[data-variant=standard],
-            &[data-variant=outlined] {
-                background-color: ${bg};
-            }
+                .${classes.icon} {
+                    display: block;
+                    color: ${colorValue};
+                }
 
-            &[data-variant=outlined] {
-                border: 1px solid ${border};
-            }
+                &[data-variant=standard],
+                &[data-variant=outlined] {
+                    background-color: ${bg};
+                }
 
-            &[data-variant=filled] {
-                background-color: ${filledBg};
-                color: #ffffff;
+                &[data-variant=outlined] {
+                    border: 1px solid ${border};
+                }
 
-                .${classes.icon} {
+                &[data-variant=filled] {
+                    background-color: ${filledBg};
                     color: #ffffff;
+
+                    .${classes.icon} {
+                        color: #ffffff;
+                    }
                 }
-            }
 
-            &:has(.${classes.title}) {
-                .${classes.icon} {
-                    display: flex;
-                    font-size: ${20 / 14}em;
+                &:has(.${classes.title}) {
+                    .${classes.icon} {
+                        display: flex;
+                        font-size: ${20 / 14}em;
+                    }
                 }
-            }
 
-            .${classes.content} {
-                flex: 1;
-                min-width: 0;
-            }
+                .${classes.content} {
+                    flex: 1;
+                    min-width: 0;
+                }
 
-            .${classes.title} {
-                font-weight: bold;
-                font-size: ${15 / 14}em;
+                .${classes.title} {
+                    font-weight: bold;
+                    font-size: ${15 / 14}em;
 
-                & + .${classes.description} {
-                    margin-top: ${spacing[3]}px;
+                    & + .${classes.description} {
+                        margin-top: ${spacing[3]}px;
+                    }
                 }
-            }
 
-            &:not([data-variant=filled]) .${classes.description} {
-                color: ${text.secondary};
-            }
+                &:not([data-variant=filled]) .${classes.description} {
+                    color: ${text.secondary};
+                }
 
-            .${classes.close} {
-                align-self: flex-start;
+                .${classes.close} {
+                    align-self: flex-start;
+                }
             }
         `;
     }, [colorValue]);

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

@@ -5,53 +5,55 @@ export const classes = defineInnerClasses('anchor-list', [
     'indicator'
 ]);
 export const style = defineCss(({ colors, easing }) => css `
-    position: relative;
-
-    .${classes.item} {
-        padding: 5px 0;
-        color: inherit;
-        text-decoration: none;
+    @layer reset {
         position: relative;
-        transition: all .25s ${easing.easeOut};
-        -webkit-tap-highlight-color: transparent;
 
-        &:hover, &[data-active=true] {
-            color: ${colors.primary.main};
+        .${classes.item} {
+            padding: 5px 0;
+            color: inherit;
+            text-decoration: none;
+            position: relative;
+            transition: all .25s ${easing.easeOut};
+            -webkit-tap-highlight-color: transparent;
+
+            &:hover, &[data-active=true] {
+                color: ${colors.primary.main};
+            }
+
+            &:not([data-active=true]):active {
+                transition: all 0s;
+                opacity: .7;
+            }
+
+            &::before {
+                content: '';
+                top: 8px;
+                display: none;
+            }
         }
 
-        &:not([data-active=true]):active {
-            transition: all 0s;
-            opacity: .7;
+        .${classes.item}::before, .${classes.indicator} {
+            width: 2px;
+            height: 1em;
+            background: ${colors.primary.main};
+            position: absolute;
+            left: 0;
         }
-        
-        &:before {
-            content: '';
-            top: 8px;
-            display: none;
+
+        .${classes.indicator} {
+            top: 0;
+            transition: top .3s ${easing.bounce};
         }
-    }
 
-    .${classes.item}:before, .${classes.indicator} {
-        width: 2px;
-        height: 1em;
-        background: ${colors.primary.main};
-        position: absolute;
-        left: 0;
-    }
 
-    .${classes.indicator} {
-        top: 0;
-        transition: top .3s ${easing.bounce};
-    }
-    
-    
-    &:not([data-animating=true]) {
-        .${classes.item}[data-active=true]:before {
-            display: block;
-        }
+        &:not([data-animating=true]) {
+            .${classes.item}[data-active=true]::before {
+                display: block;
+            }
 
-        .${classes.indicator} {
-            display: none;
+            .${classes.indicator} {
+                display: none;
+            }
         }
     }
 `);

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

@@ -1,27 +1,34 @@
 import { css } from '@emotion/react';
 import { defineInnerClasses, defineCss } from '../../utils';
+import { defaultMonospaceFontFamily } from '../theme';
 export const classes = defineInnerClasses('app');
 export const appStyleCallback = (theme) => css `
-    line-height: ${20 / 14};
-    box-sizing: border-box;
-    font-size: ${theme.fontSize}px;
-    color: ${theme.text.primary};
-    color-scheme: ${theme.mode};
-    zoom: ${theme.zoom};
-
-    *, *:before, *:after {
+    @layer reset {
+        line-height: ${20 / 14};
         box-sizing: border-box;
-        font-family: ${theme.fontFamily};
-    }
+        font-size: ${theme.fontSize}px;
+        color: ${theme.text.primary};
+        color-scheme: ${theme.mode};
+        zoom: ${theme.zoom};
 
-    svg.MuiSvgIcon-root {
-        font-size: 1em;
-        transform: scale(1.2);
-    }
+        :where(*, *::before, *::after) {
+            box-sizing: border-box;
+            font-family: ${theme.fontFamily};
+        }
+
+        :where(svg.MuiSvgIcon-root) {
+            font-size: 1em;
+            transform: scale(1.2);
+        }
 
-    .anticon {
-        line-height: 1;
-        display: inline-flex;
+        :where(.anticon) {
+            line-height: 1;
+            display: inline-flex;
+        }
+        
+        :where(code, pre) {
+            font-family: ${defaultMonospaceFontFamily};
+        }
     }
 `;
 export const style = defineCss(appStyleCallback);

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

@@ -6,30 +6,32 @@ export const classes = defineInnerClasses('avatar', [
 export function useStyle({ color }) {
     const colorValue = useColor(color);
     return useCss(({ borderRadius }) => css `
-        line-height: 1;
-        aspect-ratio: 1;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        color: #ffffff;
-        overflow: hidden;
+        @layer reset {
+            line-height: 1;
+            aspect-ratio: 1;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            color: #ffffff;
+            overflow: hidden;
 
-        &[data-shape=circular] {
-            border-radius: 50%;
-        }
+            &[data-shape=circular] {
+                border-radius: 50%;
+            }
 
-        &[data-shape=square] {
-            border-radius: ${borderRadius}px;
-        }
+            &[data-shape=square] {
+                border-radius: ${borderRadius}px;
+            }
 
-        &:not(:has(.${classes.img})) {
-            background-color: ${colorValue};
-        }
+            &:not(:has(.${classes.img})) {
+                background-color: ${colorValue};
+            }
 
-        .${classes.img} {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
+            .${classes.img} {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
         }
     `, [colorValue]);
 }

package/dist/esm/components/avatar/avatarGroup.style.js

@@ -5,33 +5,35 @@ export const classes = defineInnerClasses('avatar-group', [
     'wrap'
 ]);
 export const style = defineCss(({ mode, easing }) => css `
-    display: flex;
-    justify-content: flex-start;
-    
-    .${classes.wrap} {
+    @layer reset {
         display: flex;
-        flex-direction: row-reverse;
-    }
-    
-    &[data-hoverable=true] {
+        justify-content: flex-start;
+
         .${classes.wrap} {
-            cursor: pointer;
-    
-            &:hover {
-                .${avatarClasses.root} {
-                    margin: 0;
+            display: flex;
+            flex-direction: row-reverse;
+        }
+
+        &[data-hoverable=true] {
+            .${classes.wrap} {
+                cursor: pointer;
+
+                &:hover {
+                    .${avatarClasses.root} {
+                        margin: 0;
+                    }
                 }
             }
         }
-    }
-    
-    .${avatarClasses.root} {
-        position: relative;
-        border: 1px solid ${mode === 'light' ? '#ffffff' : '#999999'};
-    
-        &:not(:last-of-type) {
-            transition: margin .25s ${easing.easeOut};
-            margin-left: -6px;
+
+        .${avatarClasses.root} {
+            position: relative;
+            border: 1px solid ${mode === 'light' ? '#ffffff' : '#999999'};
+
+            &:not(:last-of-type) {
+                transition: margin .25s ${easing.easeOut};
+                margin-left: -6px;
+            }
         }
     }
 `);