pouncejs/dist/esm/components/IconButton/useIconButtonStyles.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import { addOpacity, lightenDarkenColor } from '../../utils/helpers';
import useTheme from '../../utils/useTheme';
export var getUnstyledButtonStyles = function getUnstyledButtonStyles(theme) {
  return {
    _focus: {
      backgroundColor: addOpacity(theme.colors.white, 0.1)
    }
  };
};

var getOutlineButtonStyles = function getOutlineButtonStyles(theme, variantColor) {
  var themeColor = theme.colors[variantColor];
  var hoverColor = lightenDarkenColor(themeColor, 8);
  var activeColor = lightenDarkenColor(themeColor, -25);
  var focusBorderColor = lightenDarkenColor(themeColor, 85);
  return {
    transition: 'border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, background-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
    // prettier-ignore
    border: '1px solid',
    borderColor: themeColor,
    backgroundColor: 'transparent',
    _hover: {
      backgroundColor: hoverColor,
      borderColor: hoverColor
    },
    _focus: {
      backgroundColor: hoverColor,
      borderColor: focusBorderColor
    },
    _active: {
      backgroundColor: activeColor,
      borderColor: activeColor
    }
  };
};

export var getGhostButtonStyles = function getGhostButtonStyles(theme, variantColor) {
  var themeColor = theme.colors[variantColor];
  return {
    transition: 'background-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
    border: '1px solid',
    borderColor: 'transparent',
    backgroundColor: 'transparent',
    _hover: {
      backgroundColor: addOpacity(themeColor, 0.3)
    },
    _focus: {
      backgroundColor: addOpacity(themeColor, 0.3)
    },
    _active: {
      backgroundColor: themeColor
    }
  };
};
export var getSolidButtonStyles = function getSolidButtonStyles(theme, variantColor) {
  var themeColor = theme.colors[variantColor];
  var hoverColor = lightenDarkenColor(themeColor, 10);
  var activeColor = lightenDarkenColor(themeColor, -10);
  var focusBorderColor = lightenDarkenColor(themeColor, 85);
  return {
    transition: 'border-color 100ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, background-color 100ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
    // prettier-ignore
    border: '1px solid',
    borderColor: themeColor,
    backgroundColor: themeColor,
    _hover: {
      backgroundColor: hoverColor,
      borderColor: hoverColor
    },
    _focus: {
      backgroundColor: hoverColor,
      borderColor: focusBorderColor
    },
    _active: {
      backgroundColor: activeColor,
      borderColor: activeColor
    }
  };
};

var getSizeButtonStyles = function getSizeButtonStyles(size) {
  switch (size) {
    case 'small':
      return {
        height: 24,
        width: 24
      };

    case 'medium':
      return {
        height: 32,
        width: 32
      };

    case 'large':
    default:
      return {
        height: 46,
        width: 46
      };
  }
};

var getBorderStyles = function getBorderStyles(variantBorderStyle) {
  switch (variantBorderStyle) {
    case 'circle':
      return {
        borderRadius: 'circle'
      };

    case 'square':
    default:
      {
        return {
          borderRadius: 'medium'
        };
      }
  }
};

var useIconButtonStyles = function useIconButtonStyles(_ref) {
  var variantColor = _ref.variantColor,
      variantBorderStyle = _ref.variantBorderStyle,
      variant = _ref.variant,
      size = _ref.size;
  var theme = useTheme();
  var variantStyles = React.useMemo(function () {
    switch (variant) {
      case 'ghost':
        return getGhostButtonStyles(theme, variantColor);

      case 'unstyled':
        return getUnstyledButtonStyles(theme);

      case 'outline':
        return getOutlineButtonStyles(theme, variantColor);

      case 'solid':
      default:
        return getSolidButtonStyles(theme, variantColor);
    }
  }, [variantColor, variant]);
  var sizeStyles = getSizeButtonStyles(size);
  var borderStyles = getBorderStyles(variantBorderStyle);
  return _extends({
    outline: 'none',
    lineHeight: 'none'
  }, borderStyles, sizeStyles, variantStyles);
};

export default useIconButtonStyles;