@helpscout/hsds-react/components/Button/Button.config.js

React component library for Help Scout's Design System

"use strict";

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

var _color = require("../../styles/utilities/color");

var config = {
  borderRadius: 3,
  fontWeight: 500,
  iconOffset: 4,
  focusOutlineWidth: 2,
  focusOutlineOffset: 3,
  focusOutlineColor: (0, _color.getColor)('blue.500'),
  textColor: 'white',
  theme: {
    blue: {
      mainColor: (0, _color.getColor)('blue.500'),
      hoverColor: (0, _color.getColor)('blue.600'),
      outline: {
        borderColor: (0, _color.getColor)('blue.500'),
        textColor: (0, _color.getColor)('blue.600'),
        textHoverColor: (0, _color.getColor)('blue.700'),
        hoverColor: (0, _color.getColor)('blue.100'),
        hoverColorIconOnly: (0, _color.getColor)('blue.200'),
        textColorSeamlessHover: (0, _color.getColor)('blue.800')
      }
    },
    grey: {
      mainColor: (0, _color.getColor)('charcoal.400'),
      hoverColor: (0, _color.getColor)('charcoal.500'),
      outline: {
        borderColor: (0, _color.getColor)('grey.700'),
        borderHoverColor: (0, _color.getColor)('grey.800'),
        textColor: (0, _color.getColor)('charcoal.400'),
        textHoverColor: (0, _color.getColor)('charcoal.500'),
        hoverColor: (0, _color.getColor)('grey.200'),
        hoverColorIconOnly: (0, _color.getColor)('grey.300'),
        textColorSeamlessHover: (0, _color.getColor)('charcoal.800')
      }
    },
    red: {
      mainColor: (0, _color.getColor)('pink.950'),
      hoverColor: (0, _color.getColor)('pink.1000'),
      outline: {
        borderColor: (0, _color.getColor)('pink.900'),
        textColor: (0, _color.getColor)('pink.950'),
        textHoverColor: (0, _color.getColor)('pink.1000'),
        hoverColorIconOnly: (0, _color.getColor)('pink.200'),
        hoverColor: (0, _color.getColor)('pink.100')
      }
    },
    green: {
      mainColor: (0, _color.getColor)('green.750'),
      hoverColor: (0, _color.getColor)('green.800'),
      outline: {
        borderColor: (0, _color.getColor)('green.500'),
        textColor: (0, _color.getColor)('green.750'),
        textHoverColor: (0, _color.getColor)('green.800'),
        hoverColor: (0, _color.getColor)('green.100'),
        hoverColorIconOnly: (0, _color.getColor)('green.200'),
        textColorSeamlessHover: (0, _color.getColor)('green.900')
      }
    }
  },
  size: {
    xxl: {
      fontSize: 14,
      height: '50px',
      padding: '30px',
      roundedPadding: '20px',
      minWidth: '200px'
    },
    xl: {
      fontSize: 14,
      height: '44px',
      padding: '30px',
      roundedPadding: '20px',
      minWidth: '120px'
    },
    lg: {
      fontSize: 14,
      height: '40px',
      padding: '30px',
      roundedPadding: '20px',
      minWidth: '120px'
    },
    md: {
      fontSize: 14,
      height: '35px',
      padding: '30px',
      roundedPadding: '20px',
      minWidth: '90px'
    },
    sm: {
      fontSize: 13,
      height: '30px',
      padding: '15px',
      minWidth: '90px'
    },
    xs: {
      fontSize: 13,
      height: '24px',
      padding: '15px'
    },
    xxs: {
      fontSize: 11,
      height: '20px',
      padding: '6px'
    }
  }
};
var _default = config;
exports.default = _default;