@procore/core-react/dist/Button/Button.styles.js

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { defaultSpinnerSize, Spinner } from '../Spinner/Spinner';
import { spinnerDimensions } from '../Spinner/Spinner.styles';
import { getTypographyIntent, typographyWeights } from '../Typography';
import { borderRadius } from '../_styles/borderRadius';
import { colors } from '../_styles/colors';
import { mediaIE11Hack } from '../_styles/media';
import { focusable } from '../_styles/mixins';
import { spacing } from '../_styles/spacing';
var heights = {
  sm: 24,
  md: 36,
  lg: 48
};
var paddingX = {
  sm: spacing.xs,
  md: 6,
  // TODO one-off
  lg: spacing.md
};
var typographySizes = {
  sm: 'small',
  md: 'body',
  lg: 'h3'
};
var buttonTextColors = {
  primary: {
    main: colors.white,
    disabled: colors.white
  },
  secondary: {
    main: colors.gray15,
    disabled: colors.gray70
  },
  tertiary: {
    main: colors.gray15,
    disabled: colors.gray70
  },
  tertiaryContrast: {
    main: colors.blue45,
    disabled: colors.blue45
  },
  UNSAFE_helixNav: {
    main: colors.white,
    disabled: colors.gray40
  }
};
var buttonBGColors = {
  primary: {
    main: colors.orange50,
    hover: colors.orange45,
    disabled: colors.orange85
  },
  secondary: {
    main: colors.gray90,
    hover: colors.gray85,
    disabled: colors.gray94
  },
  tertiary: {
    main: 'transparent',
    hover: colors.gray90,
    disabled: 'transparent'
  },
  tertiaryContrast: {
    main: 'transparent',
    hover: 'white',
    disabled: 'transparent'
  },
  UNSAFE_helixNav: {
    main: 'transparent',
    hover: colors.gray50,
    disabled: 'transparent'
  }
};
export function getBGColor(variant) {
  var colors = buttonBGColors[variant];
  if (!colors) {
    console.error("@procore/core-react: Using invalid Button variant ".concat(variant, ". Please update, falling back to primary."));
    return buttonBGColors.primary;
  }
  return colors;
}
export function getTextColor(variant) {
  var colors = buttonTextColors[variant];
  if (!colors) {
    console.error("@procore/core-react: Using invalid Button variant ".concat(variant, ". Please update, falling back to primary."));
    return buttonTextColors.primary;
  }
  return colors;
}
function getColors(loading, variant) {
  return css(["background:", ";color:", ";&.active,&:active,&.focus,&:focus,&.hover,&:hover{background:", ";color:", ";}&:disabled,&[aria-disabled='true']{background:", ";color:", ";}"], loading ? getBGColor(variant).hover : getBGColor(variant).main, getTextColor(variant).main, getBGColor(variant).hover, getTextColor(variant).main, loading ? getBGColor(variant).hover : getBGColor(variant).disabled, getTextColor(variant).disabled);
}
export var StyledContent = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledContent",
  componentId: "core-12_44_0__sc-c5bhwh-0"
})(["align-items:center;display:flex;overflow:hidden;"]);
export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
  displayName: "StyledSpinner",
  componentId: "core-12_44_0__sc-c5bhwh-1"
})(["box-sizing:border-box;display:none;position:absolute;transform:translateZ(0);@media ", "{left:50%;top:50%;", "}"], mediaIE11Hack, function (_ref) {
  var size = _ref.size;
  var margin = -1 * (spinnerDimensions[size !== null && size !== void 0 ? size : defaultSpinnerSize] / 2);
  return css(["margin-left:", "px;margin-top:", "px;"], margin, margin);
});
export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledLabel",
  componentId: "core-12_44_0__sc-c5bhwh-2"
})(["overflow:hidden;padding:0 6px;text-overflow:ellipsis;white-space:nowrap;& + span{padding-left:0;}"]);
export function getButtonStyles(block, disabled, loading, size, variant) {
  return css(["", " ", " ", " ", " align-items:center;border-radius:", "px;border:0;box-sizing:border-box;cursor:pointer;display:inline-flex;flex-direction:row;flex-shrink:0;font-family:inherit;font-weight:", ";height:", "px;justify-content:center;margin:0;overflow:hidden;padding:0 ", "px;position:relative;pointer-events:", ";text-overflow:ellipsis;user-select:", ";vertical-align:middle;white-space:nowrap;width:", ";[data-icon-prop='true']{pointer-events:none;height:", "px;width:", "px;}", ""], getTypographyIntent(typographySizes[size]), focusable, variant === 'UNSAFE_helixNav' && css(["&.focus,&:focus{outline:none;box-shadow:0 0 0 2px ", ";}"], colors.blue70), getColors(loading, variant), borderRadius.md, typographyWeights.semibold, heights[size], paddingX[size], disabled || loading ? 'none' : 'inherit', disabled || loading ? 'none' : 'inherit', block && '100%', size === 'sm' ? 16 : 24, size === 'sm' ? 16 : 24, loading && css(["", "{pointer-events:none;visibility:hidden;}", "{display:block;}"], StyledContent, StyledSpinner));
}
export var StyledButton = /*#__PURE__*/styled.button.withConfig({
  displayName: "StyledButton",
  componentId: "core-12_44_0__sc-c5bhwh-3"
})(["", ""], function (_ref2) {
  var $block = _ref2.$block,
    disabled = _ref2.disabled,
    $loading = _ref2.$loading,
    $size = _ref2.$size,
    $variant = _ref2.$variant;
  return getButtonStyles($block, disabled, $loading, $size, $variant);
});
export var StyledLinkButton = /*#__PURE__*/styled.a.withConfig({
  displayName: "StyledLinkButton",
  componentId: "core-12_44_0__sc-c5bhwh-4"
})(["&,&:hover{text-decoration:none;}", ""], function (_ref3) {
  var $block = _ref3.$block,
    $disabled = _ref3.$disabled,
    $size = _ref3.$size,
    $variant = _ref3.$variant;
  return getButtonStyles($block, $disabled, false, $size, $variant);
});
//# sourceMappingURL=Button.styles.js.map