@cube-dev/ui-kit 0.59.14 → 0.60.1

package/es/components/actions/Button/Button.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.1
  * Released under the MIT license.
  */
 
@@ -18,12 +18,12 @@ export const DEFAULT_BUTTON_STYLES = {
     placeContent: 'center',
     position: 'relative',
     margin: 0,
-    outline: {
-        '': '#purple-03.0',
-        focused: '#purple-03',
-    },
+    boxSizing: 'border-box',
     cursor: 'pointer',
-    gap: '.75x',
+    gap: {
+        '': '.75x',
+        '[data-size="small"]': '.5x',
+    },
     flow: 'column',
     preset: {
         '': 't3m',
@@ -32,11 +32,12 @@ export const DEFAULT_BUTTON_STYLES = {
     textDecoration: 'none',
     transition: 'theme',
     reset: 'button',
+    outlineOffset: 1,
     padding: {
-        '': '(1.25x - 1bw) (2x - 1bw)',
-        '[data-size="small"]': '(.75x - 1bw) (1.25x - 1bw)',
-        '[data-size="medium"]': '(1.25x - 1bw) (1.75x - 1bw)',
-        '[data-size="large"]': '1.5x (2.25x - 1bw)',
+        '': '0 (2x - 1bw)',
+        '[data-size="small"]': '0 (1x - 1bw)',
+        '[data-size="medium"]': '0 (1.5x - 1bw)',
+        '[data-size="large"]': '0 (2.25x - 1bw)',
         'single-icon-only | [data-type="link"]': 0,
     },
     width: {
@@ -47,165 +48,482 @@ export const DEFAULT_BUTTON_STYLES = {
     },
     height: {
         '': 'initial',
-        '[data-size="small"] & single-icon-only': '4x 4x',
-        '[data-size="medium"] & single-icon-only': '5x 5x',
-        '[data-size="large"] & single-icon-only': '6x 6x',
+        '[data-size="small"]': '4x 4x',
+        '[data-size="medium"]': '5x 5x',
+        '[data-size="large"]': '6x 6x',
+        '[data-type="link"]': 'auto',
     },
     whiteSpace: 'nowrap',
     radius: {
         '': true,
         '[data-type="link"] & !focused': 0,
     },
-    '& .anticon': {
-        transition: 'display .2s steps(1, start), margin .2s linear, opacity .2s linear',
+};
+// ---------- DEFAULT THEME ----------
+export const DEFAULT_PRIMARY_STYLES = {
+    outline: {
+        '': '0 #purple-text.0',
+        focused: '1bw #purple-text',
+    },
+    border: {
+        '': '#clear',
+        pressed: '#purple-text',
+        focused: '#purple-text',
+        '[disabled] | disabled': '#border',
+    },
+    fill: {
+        '': '#purple',
+        hovered: '#purple-text',
+        pressed: '#purple',
+        '[disabled] | disabled': '#dark.04',
+    },
+    color: {
+        '': '#white',
+        '[disabled] | disabled': '#dark.30',
+    },
+};
+export const DEFAULT_SECONDARY_STYLES = {
+    border: {
+        '': '#purple.15',
+        pressed: '#purple.3',
+        focused: '#purple-text',
+        '[disabled] | disabled': '#border',
+    },
+    fill: {
+        '': '#purple.10',
+        hovered: '#purple.16',
+        pressed: '#purple-text.10',
+        '[disabled] | disabled': '#dark.04',
+    },
+    color: {
+        '': '#purple',
+        '[disabled] | disabled': '#dark.30',
+    },
+};
+export const DEFAULT_OUTLINE_STYLES = {
+    border: {
+        '': '#dark.12',
+        focused: '#purple-text',
+        '[disabled] | disabled': '#border',
+    },
+    fill: {
+        '': '#dark.0',
+        hovered: '#dark.03',
+        'pressed | selected': '#dark.06',
+        '[disabled] | disabled': '#dark.04',
+    },
+    color: {
+        '': '#dark-02',
+        hovered: '#dark-02',
+        'pressed | selected': '#dark',
+        '[disabled] | disabled': '#dark.30',
+    },
+};
+export const DEFAULT_NEUTRAL_STYLES = {
+    border: {
+        '': '#clear',
+        focused: '#purple-text',
+        '[disabled] | disabled': '#border',
+    },
+    fill: {
+        '': '#dark.0',
+        hovered: '#dark.03',
+        'pressed | selected': '#dark.06',
+        '[disabled] | disabled': '#dark.04',
+    },
+    color: {
+        '': '#dark-02',
+        hovered: '#dark-02',
+        pressed: '#dark',
+        '[disabled] | disabled': '#dark.30',
+    },
+};
+export const DEFAULT_CLEAR_STYLES = {
+    border: {
+        '': '#clear',
+        pressed: '#purple-text.10',
+        focused: '#purple-text',
+        '[disabled] | disabled': '#border',
+    },
+    fill: {
+        '': '#purple.0',
+        hovered: '#purple.16',
+        'pressed | selected': '#purple.10',
+        '[disabled] | disabled': '#dark.04',
+    },
+    color: {
+        '': '#purple-text',
+        '[disabled] | disabled': '#dark.30',
+    },
+};
+export const DEFAULT_LINK_STYLES = {
+    outline: {
+        '': '0 #purple-text.0',
+        focused: '1bw #purple-text',
+    },
+    border: '0',
+    fill: {
+        '': '#clear',
+    },
+    color: {
+        '': '#purple-text',
+        'hovered & !pressed': '#purple',
+        '[disabled] | disabled': '#dark.30',
+    },
+};
+// ---------- DANGER THEME ----------
+export const DANGER_PRIMARY_STYLES = {
+    outline: {
+        '': '0 #danger-text.0',
+        focused: '1bw #danger-text',
+    },
+    border: {
+        '': '#clear',
+        'pressed | focused': '#danger-text',
+        '[disabled] | disabled': '#border',
+    },
+    fill: {
+        '': '#danger',
+        'hovered & !pressed': '#danger-text',
+        '[disabled] | disabled': '#dark.04',
+    },
+    color: {
+        '': '#white',
+        '[disabled] | disabled': '#dark.30',
+    },
+};
+export const DANGER_SECONDARY_STYLES = {
+    border: {
+        '': '#danger.15',
+        pressed: '#danger.3',
+        focused: '#danger-text',
+        '[disabled] | disabled': '#border',
+    },
+    fill: {
+        '': '#danger.05',
+        'hovered & !pressed': '#danger.1',
+        '[disabled] | disabled': '#dark.04',
+    },
+    color: {
+        '': '#danger',
+        '[disabled] | disabled': '#dark.30',
+    },
+};
+export const DANGER_OUTLINE_STYLES = {
+    border: {
+        '': '#danger.15',
+        pressed: '#danger.3',
+        focused: '#danger-text',
+        '[disabled] | disabled': '#border',
+    },
+    fill: {
+        '': '#danger.0',
+        hovered: '#danger.1',
+        'pressed | selected': '#danger.05',
+        '[disabled] | disabled': '#dark.04',
+    },
+    color: {
+        '': '#danger-text',
+        '[disabled] | disabled': '#dark.30',
+    },
+};
+export const DANGER_NEUTRAL_STYLES = {
+    border: {
+        '': '#clear',
+        focused: '#danger-text',
+        '[disabled] | disabled': '#border',
+    },
+    fill: {
+        '': '#dark.0',
+        hovered: '#dark.04',
+        'pressed | selected': '#dark.05',
+        '[disabled] | disabled': '#dark.04',
+    },
+    color: {
+        '': '#dark-02',
+        'pressed | selected': '#danger-text',
+        '[disabled] | disabled': '#dark.30',
+    },
+};
+export const DANGER_CLEAR_STYLES = {
+    border: {
+        '': '#clear',
+        pressed: '#danger.05',
+        focused: '#danger-text',
+        '[disabled] | disabled': '#border',
+    },
+    fill: {
+        '': '#danger.0',
+        hovered: '#danger.1',
+        'pressed | selected': '#danger.05',
+        '[disabled] | disabled': '#dark.04',
+    },
+    color: {
+        '': '#danger-text',
+        '[disabled] | disabled': '#dark.30',
+    },
+};
+export const DANGER_LINK_STYLES = {
+    outline: {
+        '': '0 #danger-text.0',
+        focused: '1bw #danger-text',
+    },
+    border: 0,
+    fill: {
+        '': '#clear',
+    },
+    color: {
+        '': '#danger-text',
+        'hovered & !pressed': '#danger',
+        '[disabled] | disabled': '#dark.30',
+    },
+};
+// ---------- SUCCESS THEME ----------
+export const SUCCESS_PRIMARY_STYLES = {
+    outline: {
+        '': '0 #success-text.0',
+        focused: '1bw #success-text',
+    },
+    border: {
+        '': '#clear',
+        'pressed | focused': '#success-text',
+        '[disabled] | disabled': '#border',
+    },
+    fill: {
+        '': '#success',
+        'hovered & !pressed': '#success-text',
+        '[disabled] | disabled': '#dark.04',
+    },
+    color: {
+        '': '#white',
+        '[disabled] | disabled': '#dark.30',
+    },
+};
+export const SUCCESS_SECONDARY_STYLES = {
+    border: {
+        '': '#success.15',
+        pressed: '#success.3',
+        focused: '#success-text',
+        '[disabled] | disabled': '#border',
+    },
+    fill: {
+        '': '#success.05',
+        'hovered & !pressed': '#success.1',
+        '[disabled] | disabled': '#dark.04',
+    },
+    color: {
+        '': '#success',
+        '[disabled] | disabled': '#dark.30',
+    },
+};
+export const SUCCESS_OUTLINE_STYLES = {
+    border: {
+        '': '#success.15',
+        pressed: '#success.3',
+        focused: '#success-text',
+        '[disabled] | disabled': '#border',
+    },
+    fill: {
+        '': '#success.0',
+        hovered: '#success.1',
+        'pressed | selected': '#success.05',
+        '[disabled] | disabled': '#dark.04',
+    },
+    color: {
+        '': '#success-text',
+        '[disabled] | disabled': '#dark.30',
+    },
+};
+export const SUCCESS_NEUTRAL_STYLES = {
+    border: {
+        '': '#clear',
+        focused: '#success-text',
+        '[disabled] | disabled': '#border',
+    },
+    fill: {
+        '': '#dark.0',
+        hovered: '#dark.04',
+        'pressed | selected': '#dark.05',
+        '[disabled] | disabled': '#dark.04',
+    },
+    color: {
+        '': '#dark-02',
+        'pressed | selected': '#success-text',
+        '[disabled] | disabled': '#dark.30',
+    },
+};
+export const SUCCESS_CLEAR_STYLES = {
+    border: {
+        '': '#clear',
+        pressed: '#success.05',
+        focused: '#success-text',
+        '[disabled] | disabled': '#border',
+    },
+    fill: {
+        '': '#success.0',
+        hovered: '#success.1',
+        'pressed | selected': '#success.05',
+        '[disabled] | disabled': '#dark.04',
+    },
+    color: {
+        '': '#success-text',
+        '[disabled] | disabled': '#dark.30',
+    },
+};
+export const SUCCESS_LINK_STYLES = {
+    outline: {
+        '': '0 #success-text.0',
+        focused: '1bw #success-text',
+    },
+    border: '0',
+    fill: {
+        '': '#clear',
+    },
+    color: {
+        '': '#success-text',
+        'hovered & !pressed': '#success',
+        '[disabled] | disabled': '#dark.30',
+    },
+};
+// ---------- SPECIAL THEME ----------
+export const SPECIAL_PRIMARY_STYLES = {
+    outline: {
+        '': '0 #white.0',
+        focused: '1bw #white',
+    },
+    border: {
+        '': '#clear',
+        pressed: '#purple-03',
+        '[disabled] | disabled': '#white.3',
+    },
+    fill: {
+        '': '#purple',
+        'hovered & !pressed': '#purple-text',
+        '[disabled] | disabled': '#white.12',
+    },
+    color: {
+        '': '#white',
+        '[disabled] | disabled': '#white.30',
+    },
+};
+export const SPECIAL_SECONDARY_STYLES = {
+    border: {
+        '': '#white.3',
+        pressed: '#white.4',
+        focused: '#white',
+    },
+    fill: {
+        '': '#white.12',
+        'hovered & !pressed': '#white.18',
+        '[disabled] | disabled': '#white.12',
+    },
+    color: {
+        '': '#white',
+        '[disabled] | disabled': '#white.30',
+    },
+};
+export const SPECIAL_OUTLINE_STYLES = {
+    border: {
+        '': '#white.3',
+        pressed: '#white.12',
+        focused: '#white',
+    },
+    fill: {
+        '': '#white.0',
+        hovered: '#white.18',
+        'pressed | selected': '#white.12',
+        '[disabled] | disabled': '#white.12',
+    },
+    color: {
+        '': '#white',
+        '[disabled] | disabled': '#white.30',
+    },
+};
+export const SPECIAL_NEUTRAL_STYLES = {
+    border: {
+        '': 0,
+        focused: '#white',
+        '[disabled] | disabled': '#white.3',
+    },
+    fill: {
+        '': '#white.0',
+        hovered: '#white.12',
+        'pressed | selected': '#white.18',
+        '[disabled] | disabled': 'white.12',
+    },
+    color: {
+        '': '#white',
+        '[disabled] | disabled': '#white.30',
+    },
+};
+export const SPECIAL_CLEAR_STYLES = {
+    outline: {
+        focused: '1bw #white',
+    },
+    border: {
+        '': '#clear',
+        'pressed | focused': '#white',
+        '[disabled] | disabled': '#white.3',
+    },
+    fill: {
+        '': '#white',
+        'hovered & !pressed': '#white.94',
+        '[disabled] | disabled': '#white.12',
+    },
+    color: {
+        '': '#purple-text',
+        hovered: '#purple',
+        'pressed & hovered': '#purple-text',
+        '[disabled] | disabled': '#white.30',
+    },
+};
+export const SPECIAL_LINK_STYLES = {
+    outline: {
+        '': '0 #white.0',
+        focused: '1bw #white',
+    },
+    border: '0',
+    fill: {
+        '': '#clear',
     },
-    ButtonIcon: {
-        display: 'grid',
-        fontSize: '@icon-size',
+    color: {
+        '': '#white',
+        'hovered & !pressed': '#white.9',
+        '[disabled] | disabled': '#white.30',
     },
 };
 const ButtonElement = tasty({
     qa: 'Button',
     styles: DEFAULT_BUTTON_STYLES,
     variants: {
-        default: {
-            shadow: {
-                '': false,
-                '[data-type="link"]': '0 @border-width 0 0 #purple.20',
-                '[data-type="link"] & (pressed | hovered | [disabled])': '0 0 0 0 #purple.20',
-            },
-            outline: {
-                '': '0 #purple-03.0',
-                focused: '@outline-width #purple-03',
-            },
-            border: {
-                // default
-                '': '#clear',
-                '[data-type="primary"] & pressed': '#purple-text',
-                '[data-type="secondary"] & pressed': '#purple.3',
-                '[data-type="outline"]': '#purple.3',
-                '[data-type="outline"] & [disabled]': '#dark.12',
-                '([data-type="clear"] | [data-type="outline"]) & pressed': '#purple-text.10',
-                '[data-type="link"]': '0',
-            },
-            fill: {
-                '': '#clear',
-                '[data-type="primary"]': '#purple',
-                '[data-type="primary"] & hovered': '#purple-text',
-                '[data-type="primary"] & pressed': '#purple',
-                '[data-type="secondary"]': '#purple.10',
-                '[data-type="secondary"] & hovered': '#purple.16',
-                '[data-type="secondary"] & pressed': '#purple-text.10',
-                '[data-type="neutral"]': '#dark.0',
-                '[data-type="neutral"] & hovered': '#dark.04',
-                '[data-type="neutral"] & pressed': '#dark.05',
-                '[disabled] & ![data-type="link"]': '#dark.04',
-                '([data-type="clear"] | [data-type="outline"])': '#purple.0',
-                '([data-type="clear"] | [data-type="outline"]) & hovered': '#purple.16',
-                '([data-type="clear"] | [data-type="outline"]) & pressed': '#purple.10',
-                '([data-type="clear"] | [data-type="outline"]) & [disabled]': '#purple.0',
-            },
-            color: {
-                // default
-                '': '#white',
-                '[data-type="secondary"]': '#purple',
-                '[data-type="clear"] | [data-type="outline"] | [data-type="link"]': '#purple-text',
-                '[data-type="link"] & pressed': '#purple',
-                '[data-type="neutral"]': '#dark-02',
-                '[data-type="neutral"] & hovered': '#dark-02',
-                '[data-type="neutral"] & pressed': '#purple',
-                // other
-                '[disabled]': '#dark.30',
-            },
-        },
-        danger: {
-            shadow: {
-                '': false,
-                '[data-type="link"]': '0 @border-width 0 0 #danger.20',
-                '[data-type="link"] & (pressed | hovered | [disabled])': '0 0 0 0 #danger.20',
-            },
-            outline: {
-                '': '0 #danger.0',
-                focused: '@outline-width #danger.50',
-            },
-            border: {
-                '': '#clear',
-                '[data-type="primary"] & pressed': '#danger-text',
-                '[data-type="secondary"] & pressed': '#danger.3',
-                '[data-type="outline"]': '#danger-text.3',
-                '([data-type="clear"] | [data-type="outline"]) & pressed': '#danger-text.10',
-                '[data-type="outline"] & pressed': '#danger.3',
-                '[data-type="link"]': '#clear',
-            },
-            fill: {
-                '': '#clear',
-                '[data-type="primary"]': '#danger',
-                '[data-type="primary"] & hovered': '#danger-text',
-                '[data-type="primary"] & pressed': '#danger',
-                '[data-type="secondary"]': '#danger.05',
-                '[data-type="secondary"] & hovered': '#danger.1',
-                '[data-type="secondary"] & pressed': '#danger.05',
-                '[data-type="neutral"]': '#dark.0',
-                '[data-type="neutral"] & hovered': '#dark.04',
-                '[data-type="neutral"] & pressed': '#dark.05',
-                '[disabled] & ![data-type="link"]': '#dark.04',
-                '[data-type="clear"] | [data-type="outline"]': '#danger.0',
-                '([data-type="clear"] | [data-type="outline"]) & hovered': '#danger.1',
-                '([data-type="clear"] | [data-type="outline"]) & pressed': '#danger.05',
-                '([data-type="clear"] | [data-type="outline"]) & [disabled]': '#danger.0',
-            },
-            color: {
-                '': '#white',
-                '[data-type="neutral"]': '#dark-02',
-                '[data-type="neutral"] & hovered': '#dark-02',
-                '[data-type="secondary"]': '#danger',
-                '[data-type="clear"] | [data-type="outline"] | [data-type="link"]': '#danger-text',
-                '[data-type="link"] & pressed': '#danger',
-                '[data-type="neutral"] & pressed': '#danger',
-                '[disabled]': '#dark.30',
-            },
-        },
-        special: {
-            shadow: {
-                '': false,
-                '[data-type="link"]': '0 @border-width 0 0 #white.44',
-                '[data-type="link"] & (pressed | hovered | [disabled])': '0 0 0 0 #white.44',
-            },
-            outline: {
-                '': '0 #white.0',
-                focused: '@outline-width #white.44',
-                '([data-type="primary"] | [data-type="clear"])': '0 #dark-03.80',
-                '([data-type="primary"] | [data-type="clear"]) & focused': '@outline-width #purple-03.80',
-            },
-            border: {
-                '': '#clear',
-                '[data-type="primary"] & pressed': '#purple-03',
-                '[data-type="secondary"] & pressed': '#white.44',
-                '[data-type="outline"] & !pressed': '#white.44',
-            },
-            fill: {
-                '': '#clear',
-                '[data-type="primary"]': '#purple',
-                '[data-type="primary"] & pressed': '#purple',
-                '[data-type="primary"] & hovered': '#purple-text',
-                '[data-type="secondary"]': '#white.12',
-                '[data-type="clear"]': '#white',
-                '[data-type="clear"] & hovered': '#white.94',
-                '[data-type="clear"] & pressed': '#white',
-                '[disabled] & ![data-type="link"]': '#white.12',
-                '([data-type="neutral"] | [data-type="outline"])': '#white.0',
-                '([data-type="neutral"] | [data-type="outline"] | [data-type="secondary"]) & hovered': '#white.18',
-                '([data-type="neutral"] | [data-type="outline"] | [data-type="secondary"]) & pressed': '#white.12',
-                '([data-type="clear"] | [data-type="outline"]) & [disabled]': '#white.0',
-            },
-            color: {
-                // default
-                '': '#white',
-                '[data-type="clear"]': '#purple',
-                // other
-                '[disabled]': '#white.30',
-            },
-        },
+        // Default theme
+        'default.primary': DEFAULT_PRIMARY_STYLES,
+        'default.secondary': DEFAULT_SECONDARY_STYLES,
+        'default.outline': DEFAULT_OUTLINE_STYLES,
+        'default.neutral': DEFAULT_NEUTRAL_STYLES,
+        'default.clear': DEFAULT_CLEAR_STYLES,
+        'default.link': DEFAULT_LINK_STYLES,
+        // Danger theme
+        'danger.primary': DANGER_PRIMARY_STYLES,
+        'danger.secondary': DANGER_SECONDARY_STYLES,
+        'danger.outline': DANGER_OUTLINE_STYLES,
+        'danger.neutral': DANGER_NEUTRAL_STYLES,
+        'danger.clear': DANGER_CLEAR_STYLES,
+        'danger.link': DANGER_LINK_STYLES,
+        // Success theme
+        'success.primary': SUCCESS_PRIMARY_STYLES,
+        'success.secondary': SUCCESS_SECONDARY_STYLES,
+        'success.outline': SUCCESS_OUTLINE_STYLES,
+        'success.neutral': SUCCESS_NEUTRAL_STYLES,
+        'success.clear': SUCCESS_CLEAR_STYLES,
+        'success.link': SUCCESS_LINK_STYLES,
+        // Special theme
+        'special.primary': SPECIAL_PRIMARY_STYLES,
+        'special.secondary': SPECIAL_SECONDARY_STYLES,
+        'special.outline': SPECIAL_OUTLINE_STYLES,
+        'special.neutral': SPECIAL_NEUTRAL_STYLES,
+        'special.clear': SPECIAL_CLEAR_STYLES,
+        'special.link': SPECIAL_LINK_STYLES,
     },
 });
 export const Button = forwardRef(function Button(allProps, ref) {
@@ -244,6 +562,7 @@ export const Button = forwardRef(function Button(allProps, ref) {
     const modifiers = useMemo(() => ({
         loading: isLoading,
         selected: isSelected,
+        'with-icons': !!icon || !!rightIcon,
         'single-icon-only': singleIcon,
         ...mods,
     }), [mods, isDisabled, isLoading, isSelected, singleIcon]);
@@ -251,7 +570,7 @@ export const Button = forwardRef(function Button(allProps, ref) {
     const styles = extractStyles(props, STYLE_PROPS);
     const isDisabledElement = actionProps.isDisabled;
     delete actionProps.isDisabled;
-    return (_jsxs(ButtonElement, { download: download, ...actionProps, disabled: isDisabledElement, variant: theme, "data-theme": theme, "data-type": type ?? 'secondary', "data-size": size ?? 'medium', styles: styles, children: [icon || isLoading ? (!isLoading ? (icon) : (_jsx(LoadingIcon, { "data-element": "ButtonIcon" }))) : null, children, rightIcon] }));
+    return (_jsxs(ButtonElement, { download: download, ...actionProps, disabled: isDisabledElement, variant: `${theme}.${type ?? 'outline'}`, "data-theme": theme, "data-type": type ?? 'outline', "data-size": size ?? 'medium', styles: styles, children: [icon || isLoading ? (!isLoading ? (icon) : (_jsx(LoadingIcon, { "data-element": "ButtonIcon" }))) : null, children, rightIcon] }));
 });