basantech89/awesome-ui

import { css, Global } from '@emotion/react'
import React from 'react'

import { color, typography } from './styles'

const GlobalStyles = () => (
  <Global
    styles={theme => css`
      body {
        font-family: ${theme.typography.fontFamily};
        font-size: ${typography.size.s3}px;
        color: ${color.darkest};

        margin: 0;
        overflow-y: auto;
        overflow-x: hidden;

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-tap-highlight-color: transparent;
        -webkit-overflow-scrolling: touch;
      }

      * {
        box-sizing: border-box;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-weight: ${typography.weight.regular};
        margin: 0;
        padding: 0;
      }

      button,
      input,
      textarea,
      select {
        font-family: ${theme.typography.fontFamily};
      }

      sub,
      sup {
        font-size: 0.8em;
      }

      sub {
        bottom: -0.2em;
      }

      sup {
        top: -0.2em;
      }

      b,
      em {
        font-weight: ${typography.weight.bold};
      }

      hr {
        border: none;
        border-top: 1px solid ${color.border};
        clear: both;
        margin-bottom: 1.25rem;
      }

      code,
      pre {
        font-family: ${typography.type.code};
        font-size: ${typography.size.s2 - 1}px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      code {
        display: inline-block;
        padding-left: 2px;
        padding-right: 2px;
        vertical-align: baseline;
        color: ${color.secondary};
      }

      pre {
        line-height: 18px;
        padding: 11px 1rem;
        white-space: pre-wrap;
        background: rgba(0, 0, 0, 0.05);
        color: ${color.darkest};
        border-radius: 3px;
        margin: 1rem 0;
      }

      &.ReactModal__Body--open {
        overflow: hidden;
        &.hide-intercom #intercom-container {
          display: none;
        }
      }

      .ReactModalPortal > div {
        opacity: 0;
      }

      .ReactModalPortal .ReactModal__Overlay {
        transition: all 200ms ease-in;

        &--after-open {
          opacity: 1;
        }
        &--before-close {
          opacity: 0;
        }
      }

      :focus:not(:focus-visible) {
        outline: none;
      }
    `}
  />
)

export default GlobalStyles