@blockstack/ui/dist/button/styles.esm.js

Blockstack UI components built using React and styled-components with styled-system.

import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
import { shadows } from '../theme/theme.esm.js';

var baseProps = {
  display: 'inline-flex',
  appearance: 'none',
  alignItems: 'center',
  justifyContent: 'center',
  transition: 'all 250ms',
  userSelect: 'none',
  position: 'relative',
  whiteSpace: 'nowrap',
  verticalAlign: 'middle',
  lineHeight: 'shorter',
  outline: 'none',
  border: '1px solid',
  borderColor: 'transparent'
};
var sizes = {
  lg: {
    minHeight: 12,
    minWidth: 9 * 14,
    fontSize: '14px !important',
    px: 5
  },
  md: {
    minHeight: 10,
    minWidth: 10,
    fontSize: '14px !important',
    px: 4
  },
  sm: {
    minHeight: 6,
    minWidth: 10,
    fontSize: '11px !important',
    px: 3
  }
};
var unstyledStyle = {
  userSelect: 'inherit',
  bg: 'none',
  border: 0,
  color: 'inherit',
  display: 'inline',
  font: 'inherit',
  lineHeight: 'inherit',
  m: 0,
  p: 0,
  textAlign: 'inherit'
};

var linkVariantProps = function linkVariantProps() {
  return {
    p: 0,
    height: 'unset',
    lineHeight: 'normal',
    color: 'blue',
    minWidth: 'unset',
    _hover: {
      color: 'blue.hover',
      textDecoration: 'underline'
    },
    _active: {
      textDecoration: 'underline'
    },
    _focus: {
      textDecoration: 'underline'
    },
    _disabled: {
      color: '#A7A7AD'
    }
  };
};

var solidVariantProps = function solidVariantProps(_ref) {
  var mode = _ref.mode,
      customStyles = _ref.customStyles;
  var style = {
    primary: {
      bg: 'blue',
      color: 'white',
      _hover: {
        cursor: 'pointer'
      },
      _focus: {
        borderColor: 'blue.300',
        boxShadow: shadows.focus
      },
      _disabled: {
        bg: 'blue.200',
        cursor: 'not-allowed'
      }
    },
    secondary: {
      bg: 'blue.100',
      color: 'blue',
      border: '1px solid',
      borderColor: 'blue.300',
      boxShadow: null,
      _hover: {
        cursor: 'pointer',
        bg: 'blue.200'
      },
      _focus: {
        borderColor: 'blue.300',
        boxShadow: shadows.focus
      },
      _disabled: {
        bg: 'blue.200',
        cursor: 'not-allowed',
        color: 'white',
        border: 'none'
      }
    },
    tertiary: {
      bg: 'white',
      color: 'blue',
      boxShadow: shadows['button.secondary'],
      _hover: {
        cursor: 'pointer',
        bg: 'white',
        boxShadow: shadows['button.secondary']
      },
      _focus: {
        borderColor: 'blue.300',
        boxShadow: shadows.focus
      },
      _disabled: {
        bg: 'white',
        pointerEvents: 'none',
        cursor: 'not-allowed',
        color: 'blue.300'
      }
    }
  };

  if (customStyles) {
    return customStyles[mode];
  }

  return style[mode];
};

var sizeProps = function sizeProps(_ref2) {
  var size = _ref2.size;
  return sizes[size];
};

var variantProps = function variantProps(props) {
  switch (props.variant) {
    case 'solid':
      return solidVariantProps(props);

    case 'link':
      return linkVariantProps();

    case 'unstyled':
      return unstyledStyle;

    default:
      return {};
  }
};

var useButtonStyle = function useButtonStyle(props) {
  return _objectSpread2({}, baseProps, {}, variantProps(props), {}, sizeProps(props));
};

export { useButtonStyle };
//# sourceMappingURL=styles.esm.js.map