Widget | feat: add styles

import { css } from 'styled-components';

export const globals = css`

  :root {

    * {

      margin: 0;

      padding: 0;

    }

    h1,

    h2,

    h3 {

      margin: 0;

    }

    ol,

    ul {

      list-style: none;

    }

    img {

      max-width: 100%;

      display: block;

    }

    a {

      text-decoration: none;

      color: inherit;

    }

    table {

      border-collapse: collapse;

      border-spacing: 0;

    }

    button {

      cursor: pointer;

    }

    button,

    input {

      border: none;

      background: none;

      box-shadow: none;

    }

    input[type='text'],

    input[type='search'] {

      -webkit-appearance: none;

      appearance: none;

    }

    fieldset {

      border: none;

      padding: 0;

    }

    --family: Gilroy, sans-serif;

    --family-secondary: Comfortaa, sans-serif;

    --white: #f3f4f0;

    --gray-plus: #bebebe;

    --gray: #959595;

    --black-plus: #383838;

    --black-plus-rgb: 56, 56, 56;

    --black: #242424;

    --brown: #cb9666;

    --pink-plus: #f3b6d1;

    --pink: #f669a2;

    --red-plus: #fe6a69;

    --red: #fa5452;

    --yellow-plus: #ffc633;

    --yellow: #ffb92a;

    --aquamarine-plus: #a5dfdd;

    --aquamarine: #23bcc7;

    --pistachio: #b1d465;

    --green-plus: #5dd1b7;

    --green: #51c7a5;

    --green-minus: #14ad99;

    --violet-plus: #a36ebe;

    --violet: #9e50c7;

    --blue-plus: #01a9d5;

    --blue: #027ec2;

    --sky-blue: #a7c3f8;

  }

`;

export * from './media';

export * from './globals';

export * from './media';

export const devices = {

  mobile: '(max-width: 767px)',

  tablet: '(max-width: 1024px)',

  desktop: '(max-width: 1550px)',

  desktopMd: '(max-width: 1800px)',

  desktopLg: '(max-width: 1910px)',

};