Fix button styles.

Fix tooltip mouseLeave event on touching self.

Author: novykh

src/components/button/button.js

@@ -18,14 +18,14 @@ export const Button = forwardRef(
       iconSize,
       iconWidth,
       iconHeight,
+      children = label,
       ...rest
     },
     ref
   ) => (
     <StyledButton
       flavour={flavour}
       textTransform={textTransform}
-      hasLabel={!!label}
       hasIcon={!!icon || isLoading}
       onClick={isLoading ? undefined : onClick}
       ref={ref}
@@ -46,7 +46,7 @@ export const Button = forwardRef(
         </Flex>
       )}
 
-      {label && <span>{(isLoading && loadingLabel) || label}</span>}
+      {!!children && <span>{(isLoading && loadingLabel) || children}</span>}
     </StyledButton>
   )
 )

src/components/button/styled.js

@@ -1,4 +1,5 @@
 import styled, { css } from "styled-components"
+import { lighten, darken } from "polished"
 import { getColor, getSizeBy, DefaultTheme, DarkTheme } from "src/theme"
 import margin from "src/mixins/margin"
 import padding from "src/mixins/padding"
@@ -28,25 +29,29 @@ const withTheme = props => {
 }
 
 const getPrimaryColor = props =>
-  props.neutral ? getColor("text")(props) : getColor("primary")(props)
+  props.neutral
+    ? getColor(props.flavour === HOLLOW ? "textFocus" : "text")(props)
+    : getColor("primary")(props)
 
 const getBorderColor = props =>
-  props.neutral ? getColor("border")(props) : getColor("primary")(props)
-const getTextColor = getColor("bright")
+  props.neutral ? getColor("textFocus")(props) : getColor("primary")(props)
+const getTextColor = props => getColor("mainBackground")(props)
 const getHoverColor = props =>
   props.neutral ? getColor("textFocus")(props) : getColor("accent")(props)
 const getAccentColor = props =>
-  props.neutral ? getColor("textFocus")(props) : getColor("successLite")(props)
-const getMain = props =>
-  props.neutral
-    ? getColor(props.disabled ? "disabled" : "mainBackground")(props)
-    : getColor("mainBackground")(props)
+  props.neutral ? lighten(0.2, getColor("textFocus")(props)) : getColor("successLite")(props)
 const getTransparent = getColor(["transparent", "full"])
 
 const colorsByFlavour = ({ flavour = DEFAULT, danger, warning, iconColor }) => {
   const getErrorColor = danger ? getColor("error") : undefined
   const getWarningColor = warning ? getColor("warning") : undefined
   const getSpecialColor = getErrorColor || getWarningColor
+  const getSpecialColorHover = getSpecialColor
+    ? props => lighten(0.2, getSpecialColor(props))
+    : undefined
+  const getSpecialColorActive = getSpecialColor
+    ? props => darken(0.2, getSpecialColor(props))
+    : undefined
   const specialIconColor = iconColor ? getColor(iconColor) : undefined
 
   const flavours = {
@@ -55,44 +60,44 @@ const colorsByFlavour = ({ flavour = DEFAULT, danger, warning, iconColor }) => {
       colorHover: getTextColor,
       colorActive: getTextColor,
       bg: getSpecialColor || getPrimaryColor,
-      bgHover: getSpecialColor || getHoverColor,
-      bgActive: getSpecialColor || getAccentColor,
+      bgHover: getSpecialColorHover || getHoverColor,
+      bgActive: getSpecialColorActive || getAccentColor,
       border: getSpecialColor || getPrimaryColor,
-      borderHover: getSpecialColor || getHoverColor,
-      borderActive: getSpecialColor || getAccentColor,
+      borderHover: getSpecialColorHover || getHoverColor,
+      borderActive: getSpecialColorActive || getAccentColor,
       iconColor: specialIconColor || getTextColor,
     },
     [HOLLOW]: {
       color: getSpecialColor || getPrimaryColor,
-      colorHover: getSpecialColor || getAccentColor,
-      colorActive: getSpecialColor || getAccentColor,
+      colorHover: getSpecialColorHover || getAccentColor,
+      colorActive: getSpecialColorActive || getAccentColor,
       bg: getTransparent,
       bgHover: getTransparent,
-      bgActive: getSpecialColor || getMain,
+      bgActive: getTransparent,
       border: getSpecialColor || getBorderColor,
-      borderHover: getSpecialColor || getHoverColor,
-      borderActive: getSpecialColor || getAccentColor,
-      iconColor: specialIconColor || getTextColor,
+      borderHover: getSpecialColorHover || getAccentColor,
+      borderActive: getSpecialColorActive || getAccentColor,
+      iconColor: specialIconColor || getSpecialColor || getPrimaryColor,
     },
     [BORDER_LESS]: {
       color: getSpecialColor || getPrimaryColor,
-      colorHover: getSpecialColor || getAccentColor,
-      colorActive: getSpecialColor || getAccentColor,
+      colorHover: getSpecialColorHover || getAccentColor,
+      colorActive: getSpecialColorActive || getAccentColor,
       bg: getTransparent,
       bgHover: getTransparent,
       bgActive: getTransparent,
       border: getTransparent,
       borderHover: getTransparent,
       borderActive: getTransparent,
-      iconColor: specialIconColor || getTextColor,
+      iconColor: specialIconColor || getSpecialColor || getPrimaryColor,
     },
   }
 
   return flavours[flavour] || flavours[DEFAULT]
 }
 
 export const StyledButton = styled.button.attrs(props => ({
-  padding: props.padding || [2],
+  padding: props.padding || props.tiny ? [0.5] : props.small ? [1] : [2],
   colors: colorsByFlavour(props),
   ...withTheme(props),
 }))`
@@ -103,15 +108,6 @@ export const StyledButton = styled.button.attrs(props => ({
     position: relative;
     ${alignSelf};
 
-    width: ${props =>
-      props.width
-        ? props.width
-        : getSizeBy(props.tiny ? 2 : props.small ? 3 : props.hasLabel ? 16 : 4)};
-    height: ${props =>
-      props.height
-        ? props.height
-        : getSizeBy(props.tiny ? 2 : props.small ? 3 : props.hasLabel ? 5 : 4)};
-
     font-weight: ${({ strong }) => (strong ? 700 : 500)};
     font-size: ${({ small, tiny }) => (tiny ? "10px" : small ? "12px" : "14px")};
     line-height: ${getSizeBy(2)};

src/components/drops/drop/container.js

@@ -27,6 +27,7 @@ const Container = styled(Flex).attrs(({ zIndex = 60, ...rest }) => ({
 
   ${({ animation }) => animation && styledAnimation}
   ${({ hideShadow }) => !hideShadow && "box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);"}
+  ${({ noEvents }) => !!noEvents && "pointer-events: none;"}
 
   backface-visibility: hidden;
   perspective: 1000;

src/components/drops/tooltip/index.js

@@ -61,6 +61,7 @@ const Tooltip = forwardRef(
         {targetElement}
         {isOpen && ref.current && !disabled && (
           <Drop
+            noEvents={!allowHoverOnTooltip}
             align={dropProps?.align || dropAlignMap[align]}
             hideShadow
             id={id}