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

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.getSolidButtonStyles = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireDefault(require("react"));

var _helpers = require("../../utils/helpers");

var _useTheme = _interopRequireDefault(require("../../utils/useTheme"));

var getSolidButtonStyles = function getSolidButtonStyles(theme, variantColor) {
  var themeColor = theme.colors[variantColor];
  var hoverColor = (0, _helpers.lightenDarkenColor)(themeColor, 10);
  var activeColor = (0, _helpers.lightenDarkenColor)(themeColor, -10);
  var focusBorderColor = (0, _helpers.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
    }
  };
};

exports.getSolidButtonStyles = getSolidButtonStyles;

var getOutlineButtonStyles = function getOutlineButtonStyles(theme, variantColor) {
  var themeColor = theme.colors[variantColor];
  var hoverColor = (0, _helpers.lightenDarkenColor)(themeColor, 8);
  var activeColor = (0, _helpers.lightenDarkenColor)(themeColor, -25);
  var focusBorderColor = (0, _helpers.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 = (0, _useTheme.default)();

  var variantStyles = _react.default.useMemo(function () {
    switch (variant) {
      case 'outline':
        return getOutlineButtonStyles(theme, variantColor);

      case 'solid':
      default:
        return getSolidButtonStyles(theme, variantColor);
    }
  }, [variantColor, variant]);

  var sizeStyles = getSizeButtonStyles(size);
  return (0, _extends2.default)({
    outline: 'none'
  }, sizeStyles, variantStyles);
};

var _default = useButtonStyles;
exports.default = _default;