@axeptio/design-system/src/GlobalStyle.jsx

Design System for Axeptio

import { createGlobalStyle } from 'styled-components';
import styledNormalize from 'styled-normalize';
import { axeptio } from './Presets';

const GlobalStyle = createGlobalStyle`
  ${styledNormalize};

  *, *:before, *:after {
    box-sizing: border-box;

    &:focus {
      outline: 2px solid rgba(0 0 0 / 10%);
      outline-offset: 3px;
    }
  }

  * {
    -webkit-font-smoothing: antialiased;
  }

  ::selection {
    background: rgb(255 198 34 / 25%);
  }
  ::-moz-selection {
    background: rgb(255 198 34 / 25%);
  }

  html {
    height: 100%;
  }

  body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.5;
    font-family: ${axeptio.fonts.text};
    -webkit-text-size-adjust: 100%;
    color: #212121;
    overflow-x: hidden;
    overflow-y: auto;
  }

  pre {
    display: inline-block;
    white-space: pre-wrap;
  }

  img {
    max-width: 100%;
  }

  button {
    all: unset;
  }

  a {
    color: #212121;
    font-weight: 400;
    text-decoration: none;

    &:hover {
      color: #000000;
    }
  }


  h1, h2, h3, h4, h5, h6 {
    margin: 0 0 4px;
    font-family: ${axeptio.fonts.text};
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: ${axeptio.colors.secondary};

    & + & {
      margin: 0;
    }
  }

  h1 {
    font-size: ${axeptio.fontSizes.h1};
  }

  h2 {
    font-size: ${axeptio.fontSizes.h2};
  }

  h3 {
    font-size: ${axeptio.fontSizes.h3};
  }

  h4 {
    font-size: ${axeptio.fontSizes.h4};
  }

  h5 {
    font-size: ${axeptio.fontSizes.h5};
  }

  h6 {
    font-size: ${axeptio.fontSizes.h6};
  }

  p {
    margin: 0 0 20px;
    font-size: ${axeptio.fontSizes.paragraph};
    font-weight: 400;
    line-height: 1.5;
    color: ${axeptio.colors.secondary};
  }

  strong {
    font-weight: 700;
  }

  ol,
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      margin: 0;
    }
  }

  img {
    margin: auto;
    display: block;
  }

  textarea {
    resize: vertical;
  }
`;

export default GlobalStyle;