@taikai/rocket-kit 3.0.0-beta.4 → 3.0.0-beta.5

package/dist/rocket-kit.esm.js

@@ -259,11 +259,11 @@ const ButtonWrapper = /*#__PURE__*/_styled.button.withConfig({
   var _props$color;
   return useColor((_props$color = props.color) != null ? _props$color : 'black').color;
 }, props => {
-  var _props$txtColor;
-  return useColor((_props$txtColor = props.txtColor) != null ? _props$txtColor : 'black').color;
+  var _props$color2, _props$txtColor;
+  return props.variant === 'outline' && !props.txtColor ? useColor((_props$color2 = props.color) != null ? _props$color2 : 'black').color : useColor((_props$txtColor = props.txtColor) != null ? _props$txtColor : 'white').color;
 }, props => {
-  var _props$color2;
-  return props.color === 'white' ? colors.grey100 : props.color === 'black' ? colors.grey900 : useColor((_props$color2 = props.color) != null ? _props$color2 : 'black').hover;
+  var _props$color3;
+  return props.color === 'white' ? colors.grey100 : props.color === 'black' ? colors.grey900 : useColor((_props$color3 = props.color) != null ? _props$color3 : 'black').hover;
 }, props => props.variant === 'outline' ? button.borderWidth : 0, props => props.variant === 'text' ? 0 : props.rounded ? '999px' : button.borderRadius, props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.value ? rem('80px') : rem('42px'), button.height, props => props.value ? `0 ${button.padding}` : 0, misc.transitionDuration, props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.iconPosition === 'right' ? button.iconSpacing : 0, props => props.iconPosition === 'left' ? button.iconSpacing : 0, props => props.variant === 'solid' ? '' : 'var(--button)', /*#__PURE__*/rem(typography.defaultSize), typography.medium, /*#__PURE__*/rem(typography.defaultSize), props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration, props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, button.iconSize, button.iconSize, props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration);
 
 const Button = props => {
@@ -271,7 +271,7 @@ const Button = props => {
     variant = 'solid',
     rounded = false,
     color = 'purple500',
-    txtColor = 'white',
+    txtColor,
     type,
     className = 'button',
     style,
@@ -417,11 +417,11 @@ const ButtonLinkStyle = /*#__PURE__*/_styled.a.withConfig({
   var _props$color;
   return useColor((_props$color = props.color) != null ? _props$color : 'black').color;
 }, props => {
-  var _props$txtColor;
-  return useColor((_props$txtColor = props.txtColor) != null ? _props$txtColor : 'black').color;
+  var _props$color2, _props$txtColor;
+  return props.variant === 'outline' && !props.txtColor ? useColor((_props$color2 = props.color) != null ? _props$color2 : 'black').color : useColor((_props$txtColor = props.txtColor) != null ? _props$txtColor : 'white').color;
 }, props => {
-  var _props$color2;
-  return props.color === 'white' ? colors.grey100 : props.color === 'black' ? colors.grey900 : useColor((_props$color2 = props.color) != null ? _props$color2 : 'black').hover;
+  var _props$color3;
+  return props.color === 'white' ? colors.grey100 : props.color === 'black' ? colors.grey900 : useColor((_props$color3 = props.color) != null ? _props$color3 : 'black').hover;
 }, props => props.variant === 'outline' ? button.borderWidth : 0, props => props.variant === 'text' ? 0 : props.rounded ? '999px' : button.borderRadius, props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.value ? rem('80px') : rem('42px'), button.height, props => props.value ? `0 ${button.padding}` : 0, misc.transitionDuration, props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.iconPosition === 'right' ? button.iconSpacing : 0, props => props.iconPosition === 'left' ? button.iconSpacing : 0, /*#__PURE__*/rem(typography.defaultSize), typography.medium, /*#__PURE__*/rem(typography.defaultSize), props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration, props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, button.iconSize, button.iconSize, props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration);
 
 const ButtonLink = props => {
@@ -429,7 +429,7 @@ const ButtonLink = props => {
     variant = 'solid',
     rounded = false,
     color = 'purple500',
-    txtColor = 'white',
+    txtColor,
     className = 'button-link',
     style,
     action = () => {},
@@ -2544,7 +2544,7 @@ const ModalFooter = props => {
     style: style
   }, /*#__PURE__*/React.createElement(Button, {
     variant: "outline",
-    color: "grey",
+    color: "grey300",
     action: closeAction,
     value: closeValue
   }), children);
@@ -5831,7 +5831,7 @@ const Modal = props => {
     className: "modal"
   }, /*#__PURE__*/React.createElement(ModalHeader, null, title && /*#__PURE__*/React.createElement("h2", null, title), /*#__PURE__*/React.createElement(Button, {
     color: "white",
-    txtColor: "grey200",
+    txtColor: "grey300",
     icon: "cross",
     ariaLabel: "Close",
     action: hide,
@@ -5895,6 +5895,9 @@ const ModalDrawer = props => {
     } else {
       document.documentElement.style.overflow = '';
     }
+    return () => {
+      document.documentElement.style.overflow = '';
+    };
   }, [isShowing]);
   useEffect(() => {
     const fixViewport = () => {