@cube-dev/ui-kit 0.0.0-canary-378ade6 → 0.0.0-canary-25338a3

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-378ade6
+ * @cube-dev/ui-kit v0.0.0-canary-25338a3
  * Released under the MIT license.
  */
 
@@ -19,10 +19,6 @@ export const DEFAULT_BUTTON_STYLES = {
     position: 'relative',
     margin: 0,
     boxSizing: 'border-box',
-    outline: {
-        '': '#purple-03.0',
-        focused: '#purple-03',
-    },
     cursor: 'pointer',
     gap: {
         '': '.75x',
@@ -63,7 +59,7 @@ export const DEFAULT_BUTTON_STYLES = {
         '[data-type="link"] & !focused': 0,
     },
 };
-// DEFAULT THEME STYLES (6 types)
+// ---------- DEFAULT THEME ----------
 export const DEFAULT_PRIMARY_STYLES = {
     outline: {
         '': '0 #purple-text.0',
@@ -73,101 +69,91 @@ export const DEFAULT_PRIMARY_STYLES = {
         '': '#clear',
         pressed: '#purple-text',
         focused: '#purple-text',
+        '[disabled] | disabled': '#border',
     },
     fill: {
         '': '#purple',
         hovered: '#purple-text',
         pressed: '#purple',
+        '[disabled] | disabled': '#dark.04',
     },
     color: {
         '': '#white',
-        '[disabled]': '#dark.30',
+        '[disabled] | disabled': '#dark.30',
     },
 };
 export const DEFAULT_SECONDARY_STYLES = {
-    outline: {
-        '': '0 #purple-text.0',
-        focused: '1bw #purple-text',
-    },
     border: {
         '': '#purple.15',
         pressed: '#purple.3',
         focused: '#purple-text',
+        '[disabled] | disabled': '#border',
     },
     fill: {
         '': '#purple.10',
         hovered: '#purple.16',
         pressed: '#purple-text.10',
-        '[disabled]': '#dark.04',
+        '[disabled] | disabled': '#dark.04',
     },
     color: {
         '': '#purple',
-        '[disabled]': '#dark.30',
+        '[disabled] | disabled': '#dark.30',
     },
 };
 export const DEFAULT_OUTLINE_STYLES = {
-    outline: {
-        '': '0 #purple-text.0',
-        focused: '1bw #purple-text',
-    },
     border: {
         '': '#dark.12',
         focused: '#purple-text',
+        '[disabled] | disabled': '#border',
     },
     fill: {
         '': '#dark.0',
         hovered: '#dark.03',
         'pressed | selected': '#dark.06',
-        '[disabled]': '#dark.04',
+        '[disabled] | disabled': '#dark.04',
     },
     color: {
         '': '#dark-02',
         hovered: '#dark-02',
-        pressed: '#dark',
-        '[disabled]': '#dark.30',
+        'pressed | selected': '#dark',
+        '[disabled] | disabled': '#dark.30',
     },
 };
 export const DEFAULT_NEUTRAL_STYLES = {
-    outline: {
-        '': '0 #purple-text.0',
-        focused: '1bw #purple-text',
-    },
     border: {
         '': '#clear',
         focused: '#purple-text',
+        '[disabled] | disabled': '#border',
     },
     fill: {
         '': '#dark.0',
         hovered: '#dark.03',
         'pressed | selected': '#dark.06',
-        '[disabled]': '#dark.04',
+        '[disabled] | disabled': '#dark.04',
     },
     color: {
         '': '#dark-02',
         hovered: '#dark-02',
         pressed: '#dark',
-        '[disabled]': '#dark.30',
+        '[disabled] | disabled': '#dark.30',
     },
 };
 export const DEFAULT_CLEAR_STYLES = {
-    outline: {
-        '': '0 #purple-text.0',
-        focused: '1bw #purple-text',
-    },
     border: {
         '': '#clear',
         pressed: '#purple-text.10',
         focused: '#purple-text',
+        '[disabled] | disabled': '#border',
     },
     fill: {
         '': '#purple.0',
         hovered: '#purple.16',
-        pressed: '#purple.10',
-        '[disabled]': '#purple.0',
+        'pressed | selected': '#purple.10',
+        '[disabled] | disabled': '#dark.04',
     },
     color: {
         '': '#purple-text',
-        '[disabled]': '#dark.30',
+        '[disabled] | disabled': '#dark.30',
     },
 };
 export const DEFAULT_LINK_STYLES = {
@@ -175,20 +161,17 @@ export const DEFAULT_LINK_STYLES = {
         '': '0 #purple-text.0',
         focused: '1bw #purple-text',
     },
-    border: {
-        '': '0',
-        focused: '#purple-text',
-    },
+    border: '0',
     fill: {
         '': '#clear',
     },
     color: {
         '': '#purple-text',
-        pressed: '#purple',
-        '[disabled]': '#dark.30',
+        'hovered & !pressed': '#purple',
+        '[disabled] | disabled': '#dark.30',
     },
 };
-// DANGER THEME STYLES (6 types)
+// ---------- DANGER THEME ----------
 export const DANGER_PRIMARY_STYLES = {
     outline: {
         '': '0 #danger-text.0',
@@ -196,100 +179,88 @@ export const DANGER_PRIMARY_STYLES = {
     },
     border: {
         '': '#clear',
-        pressed: '#danger-text',
-        focused: '#danger-text',
+        'pressed | focused': '#danger-text',
+        '[disabled] | disabled': '#border',
     },
     fill: {
         '': '#danger',
-        hovered: '#danger-text',
-        pressed: '#danger',
-        '[disabled]': '#dark.04',
+        'hovered & !pressed': '#danger-text',
+        '[disabled] | disabled': '#dark.04',
     },
     color: {
         '': '#white',
-        '[disabled]': '#dark.30',
+        '[disabled] | disabled': '#dark.30',
     },
 };
 export const DANGER_SECONDARY_STYLES = {
-    outline: {
-        '': '0 #danger-text.0',
-        focused: '1bw #danger-text',
-    },
     border: {
         '': '#danger.15',
         pressed: '#danger.3',
         focused: '#danger-text',
+        '[disabled] | disabled': '#border',
     },
     fill: {
         '': '#danger.05',
-        hovered: '#danger.1',
-        pressed: '#danger.05',
-        '[disabled]': '#dark.04',
+        'hovered & !pressed': '#danger.1',
+        '[disabled] | disabled': '#dark.04',
     },
     color: {
-        '': '#white',
-        '[disabled]': '#dark.30',
+        '': '#danger',
+        '[disabled] | disabled': '#dark.30',
     },
 };
 export const DANGER_OUTLINE_STYLES = {
-    outline: {
-        '': '0 #danger-text.0',
-        focused: '1bw #danger-text',
-    },
     border: {
         '': '#danger.15',
         pressed: '#danger.3',
         focused: '#danger-text',
+        '[disabled] | disabled': '#border',
     },
     fill: {
         '': '#danger.0',
         hovered: '#danger.1',
-        pressed: '#danger.05',
-        '[disabled]': '#danger.0',
+        'pressed | selected': '#danger.05',
+        '[disabled] | disabled': '#dark.04',
     },
     color: {
-        '': '#white',
-        '[disabled]': '#dark.30',
+        '': '#danger-text',
+        '[disabled] | disabled': '#dark.30',
     },
 };
 export const DANGER_NEUTRAL_STYLES = {
-    outline: {
-        '': '0 #danger-text.0',
-        focused: '1bw #danger-text',
-    },
     border: {
         '': '#clear',
         focused: '#danger-text',
+        '[disabled] | disabled': '#border',
     },
     fill: {
         '': '#dark.0',
         hovered: '#dark.04',
-        pressed: '#dark.05',
-        '[disabled]': '#dark.04',
+        'pressed | selected': '#dark.05',
+        '[disabled] | disabled': '#dark.04',
     },
     color: {
-        '': '#white',
-        '[disabled]': '#dark.30',
+        '': '#dark-02',
+        'pressed | selected': '#danger-text',
+        '[disabled] | disabled': '#dark.30',
     },
 };
 export const DANGER_CLEAR_STYLES = {
-    outline: {
-        '': '0 #danger-text.0',
-        focused: '1bw #danger-text',
-    },
     border: {
         '': '#clear',
+        pressed: '#danger.05',
         focused: '#danger-text',
+        '[disabled] | disabled': '#border',
     },
     fill: {
         '': '#danger.0',
         hovered: '#danger.1',
-        pressed: '#danger.05',
-        '[disabled]': '#danger.0',
+        'pressed | selected': '#danger.05',
+        '[disabled] | disabled': '#dark.04',
     },
     color: {
-        '': '#white',
-        '[disabled]': '#dark.30',
+        '': '#danger-text',
+        '[disabled] | disabled': '#dark.30',
     },
 };
 export const DANGER_LINK_STYLES = {
@@ -297,20 +268,17 @@ export const DANGER_LINK_STYLES = {
         '': '0 #danger-text.0',
         focused: '1bw #danger-text',
     },
-    border: {
-        '': '#clear',
-        focused: '#danger-text',
-    },
+    border: 0,
     fill: {
         '': '#clear',
-        '[disabled]': '#dark.04',
     },
     color: {
-        '': '#white',
-        '[disabled]': '#dark.30',
+        '': '#danger-text',
+        'hovered & !pressed': '#danger',
+        '[disabled] | disabled': '#dark.30',
     },
 };
-// SUCCESS THEME STYLES (6 types)
+// ---------- SUCCESS THEME ----------
 export const SUCCESS_PRIMARY_STYLES = {
     outline: {
         '': '0 #success-text.0',
@@ -318,102 +286,88 @@ export const SUCCESS_PRIMARY_STYLES = {
     },
     border: {
         '': '#clear',
-        pressed: '#success-text',
-        focused: '#success-text',
+        'pressed | focused': '#success-text',
+        '[disabled] | disabled': '#border',
     },
     fill: {
         '': '#success',
-        hovered: '#success-text',
-        pressed: '#success',
-        '[disabled]': '#dark.04',
+        'hovered & !pressed': '#success-text',
+        '[disabled] | disabled': '#dark.04',
     },
     color: {
         '': '#white',
-        '[disabled]': '#dark.30',
+        '[disabled] | disabled': '#dark.30',
     },
 };
 export const SUCCESS_SECONDARY_STYLES = {
-    outline: {
-        '': '0 #success-text.0',
-        focused: '1bw #success-text',
-    },
     border: {
         '': '#success.15',
         pressed: '#success.3',
         focused: '#success-text',
+        '[disabled] | disabled': '#border',
     },
     fill: {
         '': '#success.05',
-        hovered: '#success.1',
-        pressed: '#success.05',
-        '[disabled]': '#dark.04',
+        'hovered & !pressed': '#success.1',
+        '[disabled] | disabled': '#dark.04',
     },
     color: {
         '': '#success',
-        '[disabled]': '#dark.30',
+        '[disabled] | disabled': '#dark.30',
     },
 };
 export const SUCCESS_OUTLINE_STYLES = {
-    outline: {
-        '': '0 #success-text.0',
-        focused: '1bw #success-text',
-    },
     border: {
         '': '#success.15',
         pressed: '#success.3',
         focused: '#success-text',
+        '[disabled] | disabled': '#border',
     },
     fill: {
         '': '#success.0',
         hovered: '#success.1',
-        pressed: '#success.05',
-        '[disabled]': '#success.0',
+        'pressed | selected': '#success.05',
+        '[disabled] | disabled': '#dark.04',
     },
     color: {
         '': '#success-text',
-        '[disabled]': '#dark.30',
+        '[disabled] | disabled': '#dark.30',
     },
 };
 export const SUCCESS_NEUTRAL_STYLES = {
-    outline: {
-        '': '0 #success-text.0',
-        focused: '1bw #success-text',
-    },
     border: {
         '': '#clear',
         focused: '#success-text',
+        '[disabled] | disabled': '#border',
     },
     fill: {
         '': '#dark.0',
         hovered: '#dark.04',
-        pressed: '#dark.05',
-        '[disabled]': '#dark.04',
+        'pressed | selected': '#dark.05',
+        '[disabled] | disabled': '#dark.04',
     },
     color: {
         '': '#dark-02',
-        hovered: '#dark-02',
-        pressed: '#success',
-        '[disabled]': '#dark.30',
+        'pressed | selected': '#success-text',
+        '[disabled] | disabled': '#dark.30',
     },
 };
 export const SUCCESS_CLEAR_STYLES = {
-    outline: {
-        '': '0 #success-text.0',
-        focused: '1bw #success-text',
-    },
     border: {
         '': '#clear',
+        pressed: '#success.05',
         focused: '#success-text',
+        '[disabled] | disabled': '#border',
     },
     fill: {
         '': '#success.0',
         hovered: '#success.1',
-        pressed: '#success.05',
-        '[disabled]': '#success.0',
+        'pressed | selected': '#success.05',
+        '[disabled] | disabled': '#dark.04',
     },
     color: {
         '': '#success-text',
-        '[disabled]': '#dark.30',
+        '[disabled] | disabled': '#dark.30',
     },
 };
 export const SUCCESS_LINK_STYLES = {
@@ -421,21 +375,17 @@ export const SUCCESS_LINK_STYLES = {
         '': '0 #success-text.0',
         focused: '1bw #success-text',
     },
-    border: {
-        '': '#clear',
-        focused: '#success-text',
-    },
+    border: '0',
     fill: {
         '': '#clear',
-        '[disabled]': '#dark.04',
     },
     color: {
         '': '#success-text',
-        pressed: '#success',
-        '[disabled]': '#dark.30',
+        'hovered & !pressed': '#success',
+        '[disabled] | disabled': '#dark.30',
     },
 };
-// SPECIAL THEME STYLES (6 types)
+// ---------- SPECIAL THEME ----------
 export const SPECIAL_PRIMARY_STYLES = {
     outline: {
         '': '0 #white.0',
@@ -444,23 +394,19 @@ export const SPECIAL_PRIMARY_STYLES = {
     border: {
         '': '#clear',
         pressed: '#purple-03',
+        '[disabled] | disabled': '#white.3',
     },
     fill: {
         '': '#purple',
-        pressed: '#purple',
-        hovered: '#purple-text',
-        '[disabled]': '#white.12',
+        'hovered & !pressed': '#purple-text',
+        '[disabled] | disabled': '#white.12',
     },
     color: {
         '': '#white',
-        '[disabled]': '#white.30',
+        '[disabled] | disabled': '#white.30',
     },
 };
 export const SPECIAL_SECONDARY_STYLES = {
-    outline: {
-        '': '0 #white.0',
-        focused: '1bw #white',
-    },
     border: {
         '': '#white.3',
         pressed: '#white.4',
@@ -468,78 +414,67 @@ export const SPECIAL_SECONDARY_STYLES = {
     },
     fill: {
         '': '#white.12',
-        hovered: '#white.18',
-        pressed: '#white.12',
-        '[disabled]': '#white.12',
+        'hovered & !pressed': '#white.18',
+        '[disabled] | disabled': '#white.12',
     },
     color: {
         '': '#white',
-        '[disabled]': '#white.30',
+        '[disabled] | disabled': '#white.30',
     },
 };
 export const SPECIAL_OUTLINE_STYLES = {
-    outline: {
-        '': '0 #white.0',
-        focused: '1bw #white',
-    },
     border: {
         '': '#white.3',
-        '!pressed': '#white.3',
+        pressed: '#white.12',
         focused: '#white',
-        '[disabled]': '#white.3',
     },
     fill: {
         '': '#white.0',
         hovered: '#white.18',
-        pressed: '#white.12',
-        '[disabled]': '#white.0',
+        'pressed | selected': '#white.12',
+        '[disabled] | disabled': '#white.12',
     },
     color: {
         '': '#white',
-        '[disabled]': '#white.30',
+        '[disabled] | disabled': '#white.30',
     },
 };
 export const SPECIAL_NEUTRAL_STYLES = {
-    outline: {
-        '': '0 #white.0',
-        focused: '1bw #white',
-    },
     border: {
-        '': '#clear',
-        '!pressed': 0,
+        '': 0,
         focused: '#white',
-        '[disabled]': '#white.3',
+        '[disabled] | disabled': '#white.3',
     },
     fill: {
         '': '#white.0',
-        hovered: '#white.18',
-        pressed: '#white.12',
-        '[disabled]': '#white.12',
+        hovered: '#white.12',
+        'pressed | selected': '#white.18',
+        '[disabled] | disabled': 'white.12',
     },
     color: {
         '': '#white',
-        '[disabled]': '#white.30',
+        '[disabled] | disabled': '#white.30',
     },
 };
 export const SPECIAL_CLEAR_STYLES = {
     outline: {
-        '': '0 #white.0',
         focused: '1bw #white',
     },
     border: {
         '': '#clear',
-        focused: '#white',
-        '[disabled]': '#white.3',
+        'pressed | focused': '#white',
+        '[disabled] | disabled': '#white.3',
     },
     fill: {
         '': '#white',
-        hovered: '#white.94',
-        pressed: '#white',
-        '[disabled]': '#white.0',
+        'hovered & !pressed': '#white.94',
+        '[disabled] | disabled': '#white.12',
     },
     color: {
-        '': '#purple',
-        '[disabled]': '#white.30',
+        '': '#purple-text',
+        hovered: '#purple',
+        'pressed & hovered': '#purple-text',
+        '[disabled] | disabled': '#white.30',
     },
 };
 export const SPECIAL_LINK_STYLES = {
@@ -547,42 +482,42 @@ export const SPECIAL_LINK_STYLES = {
         '': '0 #white.0',
         focused: '1bw #white',
     },
-    border: {
-        '': 0,
-        focused: '#white',
-        '[disabled]': '#white.3',
-    },
+    border: '0',
     fill: {
         '': '#clear',
-        '[disabled]': '#white.12',
     },
     color: {
         '': '#white',
-        '[disabled]': '#white.30',
+        'hovered & !pressed': '#white.9',
+        '[disabled] | disabled': '#white.30',
     },
 };
 const ButtonElement = tasty({
     qa: 'Button',
     styles: DEFAULT_BUTTON_STYLES,
     variants: {
+        // 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,
@@ -592,7 +527,7 @@ const ButtonElement = tasty({
     },
 });
 export const Button = forwardRef(function Button(allProps, ref) {
-    let { type = 'outline', size, label, children, theme = 'default', icon, rightIcon, mods, download, ...props } = allProps;
+    let { type, size, label, children, theme = 'default', icon, rightIcon, mods, download, ...props } = allProps;
     const isDisabled = props.isDisabled || props.isLoading;
     const isLoading = props.isLoading;
     const isSelected = props.isSelected;
@@ -635,8 +570,7 @@ export const Button = forwardRef(function Button(allProps, ref) {
     const styles = extractStyles(props, STYLE_PROPS);
     const isDisabledElement = actionProps.isDisabled;
     delete actionProps.isDisabled;
-    const variantName = `${theme}.${type}`;
-    return (_jsxs(ButtonElement, { download: download, ...actionProps, disabled: isDisabledElement, variant: variantName, "data-theme": theme, "data-type": type, "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] }));
 });
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-378ade6
+ * @cube-dev/ui-kit v0.0.0-canary-25338a3
  * Released under the MIT license.
  */