@canlooks/can-ui 0.0.36 → 0.0.38

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

@@ -26,10 +26,11 @@ const Button = ({ component: Component = 'button', color = 'primary', shape = 's
     };
     const actualPrefix = prefix ?? icon;
     const actualChildren = label ?? props.children;
+    const reverseTextColor = variant === 'filled' || variant === 'flatted' ? '#ffffff' : color;
     return ((0, jsx_runtime_1.jsxs)(Component, { ...props, css: (0, button_style_1.useStyle)({ color: color || 'primary' }), className: (0, utils_2.clsx)(button_style_1.classes.root, props.className), onPointerUp: onPointerUp, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-shape": shape, "data-size": size, "data-loading": loading, "data-read-only": readOnly, children: [loading
                 ? actualPrefix
-                    ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, { color: variant === 'filled' ? '#ffffff' : color })
-                    : (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { orientation: "horizontal", in: true, children: (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, { color: variant === 'filled' ? '#ffffff' : color }) })
+                    ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, { color: reverseTextColor })
+                    : (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { orientation: "horizontal", in: true, children: (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, { color: reverseTextColor }) })
                 : actualPrefix, !!actualChildren &&
                 (0, jsx_runtime_1.jsx)("div", { className: button_style_1.classes.content, children: actualChildren }), !!suffix &&
                 (0, jsx_runtime_1.jsx)("div", { className: button_style_1.classes.suffix, children: suffix })] }));

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

@@ -16,9 +16,17 @@ function useStyle({ color }) {
     return (0, utils_1.useCss)(({ borderRadius, easing, spacing, text, gray }) => {
         const c = (0, color_1.default)(colorValue);
         const outlineColor = c.alpha(.4).string();
-        const light = c.lighten(.1).hex();
-        const lighter = c.lighten(.15).hex();
-        const lightest = c.lighten(.2).hex();
+        let light, lighter, lightest;
+        if (c.hue()) {
+            light = c.lighten(.1).hex();
+            lighter = c.lighten(.15).hex();
+            lightest = c.lighten(.2).hex();
+        }
+        else {
+            light = c.lightness(20).hex();
+            lighter = c.lightness(30).hex();
+            lightest = c.lightness(60).hex();
+        }
         const darkC = c.darken(.1);
         const dark = darkC.hex();
         const defaultStyle = (0, react_1.css) `

package/dist/cjs/components/toggleButton/toggleButton.js

@@ -46,5 +46,5 @@ exports.ToggleButton = (({ variant = 'filled', size, color = 'primary', disabled
             return c;
         });
     };
-    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { compact: true, ...props, className: (0, utils_1.clsx)(toggleButton_style_1.classes.root, props.className), children: renderItems() }));
+    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { compact: true, ...props, css: toggleButton_style_1.style, className: (0, utils_1.clsx)(toggleButton_style_1.classes.root, props.className), children: renderItems() }));
 });

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

@@ -1,3 +1,4 @@
 export declare const classes: {
     root: string;
 };
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/toggleButton/toggleButton.style.js

@@ -1,5 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.classes = void 0;
+exports.style = exports.classes = void 0;
 const utils_1 = require("../../utils");
+const react_1 = require("@emotion/react");
+const button_style_1 = require("../button/button.style");
 exports.classes = (0, utils_1.defineInnerClasses)('buttonGroup');
+exports.style = (0, utils_1.defineCss)(({ divider }) => (0, react_1.css) `
+    .${button_style_1.classes.root}[data-variant=outlined] {
+        border-color: ${divider};
+
+        &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+            &:hover {
+                color: inherit;
+            }
+        }
+    }
+`);

package/dist/esm/components/button/button.js

@@ -23,10 +23,11 @@ export const Button = ({ component: Component = 'button', color = 'primary', sha
     };
     const actualPrefix = prefix ?? icon;
     const actualChildren = label ?? props.children;
+    const reverseTextColor = variant === 'filled' || variant === 'flatted' ? '#ffffff' : color;
     return (_jsxs(Component, { ...props, css: useStyle({ color: color || 'primary' }), className: clsx(classes.root, props.className), onPointerUp: onPointerUp, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-shape": shape, "data-size": size, "data-loading": loading, "data-read-only": readOnly, children: [loading
                 ? actualPrefix
-                    ? _jsx(LoadingIndicator, { color: variant === 'filled' ? '#ffffff' : color })
-                    : _jsx(Collapse, { orientation: "horizontal", in: true, children: _jsx(LoadingIndicator, { color: variant === 'filled' ? '#ffffff' : color }) })
+                    ? _jsx(LoadingIndicator, { color: reverseTextColor })
+                    : _jsx(Collapse, { orientation: "horizontal", in: true, children: _jsx(LoadingIndicator, { color: reverseTextColor }) })
                 : actualPrefix, !!actualChildren &&
                 _jsx("div", { className: classes.content, children: actualChildren }), !!suffix &&
                 _jsx("div", { className: classes.suffix, children: suffix })] }));

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

@@ -11,9 +11,17 @@ export function useStyle({ color }) {
     return useCss(({ borderRadius, easing, spacing, text, gray }) => {
         const c = Color(colorValue);
         const outlineColor = c.alpha(.4).string();
-        const light = c.lighten(.1).hex();
-        const lighter = c.lighten(.15).hex();
-        const lightest = c.lighten(.2).hex();
+        let light, lighter, lightest;
+        if (c.hue()) {
+            light = c.lighten(.1).hex();
+            lighter = c.lighten(.15).hex();
+            lightest = c.lighten(.2).hex();
+        }
+        else {
+            light = c.lightness(20).hex();
+            lighter = c.lightness(30).hex();
+            lightest = c.lightness(60).hex();
+        }
         const darkC = c.darken(.1);
         const dark = darkC.hex();
         const defaultStyle = css `

package/dist/esm/components/toggleButton/toggleButton.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Children, cloneElement, isValidElement } from 'react';
 import { Flex } from '../flex';
 import { clsx, isSelected } from '../../utils';
-import { classes } from './toggleButton.style';
+import { classes, style } from './toggleButton.style';
 import { Button } from '../button';
 import { useShallowSelection } from '../selectionContext';
 export const ToggleButton = (({ variant = 'filled', size, color = 'primary', disabled, readOnly, items, primaryKey = 'value', multiple, defaultValue, value, onChange, ...props }) => {
@@ -43,5 +43,5 @@ export const ToggleButton = (({ variant = 'filled', size, color = 'primary', dis
             return c;
         });
     };
-    return (_jsx(Flex, { compact: true, ...props, className: clsx(classes.root, props.className), children: renderItems() }));
+    return (_jsx(Flex, { compact: true, ...props, css: style, className: clsx(classes.root, props.className), children: renderItems() }));
 });

package/dist/esm/components/toggleButton/toggleButton.style.d.ts

@@ -1,3 +1,4 @@
 export declare const classes: {
     root: string;
 };
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -1,2 +1,15 @@
-import { defineInnerClasses } from '../../utils';
+import { defineCss, defineInnerClasses } from '../../utils';
+import { css } from '@emotion/react';
+import { classes as buttonClasses } from '../button/button.style';
 export const classes = defineInnerClasses('buttonGroup');
+export const style = defineCss(({ divider }) => css `
+    .${buttonClasses.root}[data-variant=outlined] {
+        border-color: ${divider};
+
+        &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+            &:hover {
+                color: inherit;
+            }
+        }
+    }
+`);