@canlooks/can-ui 0.0.20 → 0.0.22

package/dist/cjs/components/button/button.style.b.js

@@ -0,0 +1,285 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classes = void 0;
+exports.useStyle = useStyle;
+const tslib_1 = require("tslib");
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const color_1 = tslib_1.__importDefault(require("color"));
+exports.classes = (0, utils_1.defineClasses)('button', [
+    'prefix',
+    'suffix',
+    'content'
+]);
+function useStyle({ color }) {
+    const colorValue = (0, utils_1.useColor)(color);
+    return (0, utils_1.useCss)(({ borderRadius, easing, text, gray }) => {
+        const c = (0, color_1.default)(colorValue);
+        const lighter = c.lighten(.1).hex();
+        const lightest = c.lighten(.2).hex();
+        const outlineColor = c.alpha(.4).string();
+        const darkerC = c.darken(.1);
+        const darker = darkerC.hex();
+        return (0, react_1.css) `
+            line-height: inherit;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 4px;
+            vertical-align: top;
+            font-size: 1em;
+            user-select: none;
+            appearance: none;
+            -webkit-tap-highlight-color: transparent;
+            position: relative;
+            border: none;
+            background-color: transparent;
+            color: ${colorValue};
+            border-radius: ${borderRadius}px;
+            outline-offset: 1px;
+            outline: 0 solid ${outlineColor};
+            transition-property: outline-width, filter, border-color, background-color, color;
+            transition-duration: .2s;
+            transition-timing-function: ${easing.easeOut};
+
+            &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                cursor: pointer;
+            }
+
+            &:focus-visible {
+                transition-timing-function: ${easing.swing}, ${easing.easeOut};
+                outline-width: 3px;
+            }
+
+            &:active {
+                transition: all 0s;
+            }
+
+            &[data-variant=filled], &[data-variant=text], &[data-variant=ghost] {
+                padding: 6px 16px;
+
+                &[data-size=small] {
+                    padding: 2px 8px;
+                }
+
+                &[data-size=large] {
+                    padding: 10px 20px;
+                }
+            }
+
+            &[data-variant=outlined], &[data-variant=dashed] {
+                padding: 5px 15px;
+                
+                &[data-size=small] {
+                    padding: 1px 7px;
+                }
+                
+                &[data-size=large] {
+                    padding: 9px 19px;
+                }
+            }
+
+            &[data-orientation=vertical] {
+                flex-direction: column;
+                padding-top: 9px;
+                padding-bottom: 9px;
+            }
+            
+            &[data-variant=filled] {
+                color: #ffffff;
+                background-image: linear-gradient(0deg, ${lighter}, ${darker});
+
+                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                    &:hover {
+                        filter: brightness(1.2);
+                    }
+
+                    &:active {
+                        background-image: linear-gradient(0deg, ${darker}, ${lighter});
+                        filter: brightness(1);
+                    }
+                }
+            }
+
+            &[data-variant=outlined], &[data-variant=dashed] {
+                border: 1px solid ${colorValue};
+
+                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                    &:hover {
+                        border-color: ${lightest};
+                        color: ${lightest};
+                    }
+
+                    &:active {
+                        border-color: ${darker};
+                        color: ${darker};
+                    }
+                }
+            }
+
+            &[data-variant=dashed] {
+                border-style: dashed;
+            }
+
+            &[data-variant=ghost] {
+                background-color: ${c.alpha(.05).rgb().string()};
+
+                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                    &:hover {
+                        background-color: ${c.alpha(.1).rgb().string()};
+                    }
+
+                    &:active {
+                        background-color: ${c.alpha(.15).rgb().string()};
+                    }
+                }
+            }
+
+            &[data-variant=text] {
+                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                    &:hover {
+                        background-color: ${c.alpha(.05).rgb().string()};
+                    }
+
+                    &:active {
+                        background-color: ${darkerC.alpha(.1).rgb().string()};
+                    }
+                }
+            }
+
+            &[data-variant=plain] {
+                padding: 0;
+
+                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                    &:hover {
+                        color: ${lightest};
+                    }
+
+                    &:active {
+                        color: ${darker};
+                    }
+                }
+            }
+
+            &[data-loading=true] {
+                transition: all 0s;
+
+                &[data-variant=filled] {
+                    background-image: none;
+                    background-color: ${lightest};
+                }
+
+                &[data-variant=outlined], &[data-variant=dashed] {
+                    color: ${lightest};
+                    border-color: ${lightest};
+                }
+
+                &[data-variant=text], &[data-variant=plain] {
+                    color: ${lightest};
+                }
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+                color: ${text.disabled};
+                border-color: ${text.disabled};
+
+                &:not([data-variant=text]):not([data-variant=plain]) {
+                    background-image: none;
+                    background-color: ${gray(.1)};
+                 }
+            }
+
+            &[data-shape=rounded] {
+                border-radius: 1000em;
+            }
+
+            &[data-shape=circular] {
+                border-radius: 50%;
+                padding: 0;
+                width: 32px;
+                height: 32px;
+
+                &[data-size=small] {
+                    width: 24px;
+                    height: 24px;
+                }
+
+                &[data-size=large] {
+                    width: 40px;
+                    height: 40px;
+                }
+            }
+
+            &[data-compact=row] {
+                &[data-variant=filled]:not(:disabled) {
+                    background-image: linear-gradient(180deg, ${lighter}, ${darker});
+                    
+                    &:before, &:after {
+                        content: '';
+                        width: 1px;
+                        height: 100%;
+                        position: absolute;
+                        top: 0;
+                        display: none;
+                    }
+
+                    &:before {
+                        background-color: ${lighter};
+                        left: 0;
+                    }
+
+                    &:after {
+                        background-color: ${colorValue};
+                        right: 0;
+                    }
+                }
+
+                &:not([data-last=true]) {
+                    border-top-right-radius: 0;
+                    border-bottom-right-radius: 0;
+                    
+                    &:after {
+                        display: block;
+                    }
+                }
+        
+                &:not([data-first=true]) {
+                    border-top-left-radius: 0;
+                    border-bottom-left-radius: 0;
+
+                    &:before {
+                        display: block;
+                    }
+
+                    &[data-variant=outlined] {
+                        border-left-color: transparent;
+                    }
+                }
+            }
+    
+            &[data-compact=column] {
+                &[data-variant=filled] {
+                    background-image: linear-gradient(90deg, ${lighter}, ${darker});
+                    border-top-color: ${lighter};
+                }
+
+                &:not([data-last=true]) {
+                    border-bottom-left-radius: 0;
+                    border-bottom-right-radius: 0;
+                    border-bottom-width: 1px;
+                }
+        
+                &:not([data-first=true]) {
+                    border-top-left-radius: 0;
+                    border-top-right-radius: 0;
+                    border-top-width: 1px;
+                    
+                    &[data-variant=outlined] {
+                        margin-top: -1px;
+                    }
+                }
+            }
+        `;
+    }, [colorValue]);
+}

package/dist/cjs/components/button/button.style.d.ts

@@ -8,4 +8,4 @@ export declare const classes: {
 };
 export declare function useStyle({ color }: {
     color: ColorPropsValue;
-}): import("@emotion/react").SerializedStyles;
+}): import("@emotion/react").SerializedStyles[];