pouncejs/dist/esm/components/Button/useButtonStyles.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import { lightenDarkenColor } from '../../utils/helpers';
import useTheme from '../../utils/useTheme';
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
    borderRadius: 'medium',
    border: '1px solid',
    borderColor: themeColor,
    backgroundColor: themeColor,
    _hover: {
      backgroundColor: hoverColor,
      borderColor: hoverColor
    },
    _focus: {
      backgroundColor: hoverColor,
      borderColor: focusBorderColor
    },
    _active: {
      backgroundColor: activeColor,
      borderColor: activeColor
    }
  };
};

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
    borderRadius: 'small',
    border: '1px solid',
    borderColor: themeColor,
    backgroundColor: 'transparent',
    _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 {
        px: 2,
        height: 24,
        fontSize: 'small'
      };

    case 'medium':
      return {
        px: 3,
        height: 32,
        fontSize: 'small-medium'
      };

    case 'large':
    default:
      return {
        px: 4,
        height: 46,
        fontSize: 'medium-large'
      };
  }
};

var useButtonStyles = function useButtonStyles(_ref) {
  var variantColor = _ref.variantColor,
      variant = _ref.variant,
      size = _ref.size;
  var theme = useTheme();
  var variantStyles = React.useMemo(function () {
    switch (variant) {
      case 'outline':
        return getOutlineButtonStyles(theme, variantColor);

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

export default useButtonStyles;