@helpscout/hsds-react/components/HSDS/GlobalStyle.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.default = exports.BASE_FONT_SIZE = exports.FONT_FAMILY_MONO = exports.FONT_FAMILY_SYSTEM = exports.FONT_FAMILY = void 0;

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

var _styledComponents = require("styled-components");

var _templateObject;

var FONT_FAMILY = '"Aktiv Grotesk", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
exports.FONT_FAMILY = FONT_FAMILY;
var FONT_FAMILY_SYSTEM = '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
exports.FONT_FAMILY_SYSTEM = FONT_FAMILY_SYSTEM;
var FONT_FAMILY_MONO = '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace';
exports.FONT_FAMILY_MONO = FONT_FAMILY_MONO;
var BASE_FONT_SIZE = 13;
exports.BASE_FONT_SIZE = BASE_FONT_SIZE;
var hsAppResetCSS = (0, _styledComponents.css)(["a,abbr,address,blockquote,body,button,code,dd,dl,dt,form,figure,fieldset,input,h1,h2,h3,h4,h5,h6,label,legend,li,ol,pre,table,textarea,ul{margin:initial;padding:initial;height:initial;width:initial;line-height:initial;border:0;}"]);

var _default = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n  :root{\n    --HSDSGlobalFontFamily: ", ";\n    --HSDSGlobalFontFamilySystem: ", ";\n    --HSDSGlobalFontFamilyMono: ", ";\n    --HSDSGlobalFontSize: ", "px;\n  }\n\n  ", " {\n    box-sizing: border-box;\n    font-family: var(--HSDSGlobalFontFamily);\n    font-size: var(--HSDSGlobalFontSize);\n\n    *, *::before, *::after {\n      box-sizing: border-box;\n    }\n  }\n\n  ", ";\n"])), function (props) {
  return props.fontFamily ? props.fontFamily : FONT_FAMILY;
}, function (props) {
  return props.fontFamilySystem ? props.fontFamilySystem : FONT_FAMILY_SYSTEM;
}, function (props) {
  return props.fontFamilyMono ? props.fontFamilyMono : FONT_FAMILY_MONO;
}, function (props) {
  return props.fontSize ? props.fontSize : BASE_FONT_SIZE;
}, function (props) {
  return props.scope ? props.scope : '.hsds-react';
}, function (props) {
  return props.cssReset ? hsAppResetCSS : null;
});

exports.default = _default;