Global Styles

import '@gabrielajardimaquino/global-styles/Fonts/metropolis.css';
import '@gabrielajardimaquino/global-styles/theme.scss';
# or for just tags and classes
import '@gabrielajardimaquino/global-styles/theme.css';

Colors

The colors and their Sass variable names are provided below.

Colors

• #F0F1F4: $color-blue
• #F3DCE6: $color-pink-light
• #EB0C8F: $color-pink
• #F58720: $color-orange
• #ECB904: $color-yellow
• #008300: $color-green

Greys

• #ffffff: $color-white
• #F8F8F8: $color-grey-1
• #E8E8E8: $color-grey-2
• #D8D8D8: $color-grey-3
• #C8C8C8: $color-grey-4
• #ADADAD: $color-grey-5
• #7D7D7D: $color-grey-6
• #595959: $color-grey-7
• #35383A: $color-grey-8
• #191C1F: $color-black

The padding/margin also can be usd by the classes

# border
className="border-color-white"
className="border-color-grey-1"
className="border-color-grey-2"
className="border-color-grey-3"
className="border-color-grey-4"
className="border-color-grey-5"
className="border-color-grey-6"
className="border-color-grey-7"
className="border-color-grey-8"
className="border-color-black"
className="border-color-blue"
className="border-color-pink"
className="border-color-pink-light"
className="border-color-yellow"
className="border-color-orange"
className="border-color-green"

# background
className="background-color-white"
className="background-color-grey-1"
className="background-color-grey-2"
className="background-color-grey-3"
className="background-color-grey-4"
className="background-color-grey-5"
className="background-color-grey-6"
className="background-color-grey-7"
className="background-color-grey-8"
className="background-color-black"
className="background-color-blue"
className="background-color-pink"
className="background-color-pink-light"
className="background-color-yellow"
className="background-color-orange"
className="background-color-green"

# text
className="text-color-white"
className="text-color-grey-1"
className="text-color-grey-2"
className="text-color-grey-3"
className="text-color-grey-4"
className="text-color-grey-5"
className="text-color-grey-6"
className="text-color-grey-7"
className="text-color-grey-8"
className="text-color-black"
className="text-color-blue"
className="text-color-pink"
className="text-color-pink-light"
className="text-color-yellow"
className="text-color-orange"
className="text-color-green"

Padding/Magin

The padding/margin and their Sass variable names are provided below.

• $padding-xxs: 0.25rem
• $padding-xs: 0.5rem
• $padding-sm: 1rem
• $padding-md: 1.5rem
• $padding-lg: 2rem
• $padding-xl: 3rem
• $padding-xxl: 4rem
• $padding-max: 6rem

The padding/margin also can be usd by the classes

# padding
className="padding-xxs"
className="padding-xs"
className="padding-sm"
className="padding-md"
className="padding-lg"
className="padding-xl"
className="padding-xxl"
className="padding-max"

# padding-left
className="padding-left-xxs"
className="padding-left-xs"
className="padding-left-sm"
className="padding-left-md"
className="padding-left-lg"
className="padding-left-xl"
className="padding-left-xxl"
className="padding-left-max"

# padding-right
className="padding-right-xxs"
className="padding-right-xs"
className="padding-right-sm"
className="padding-right-md"
className="padding-right-lg"
className="padding-right-xl"
className="padding-right-xxl"
className="padding-right-max"

# padding-top
className="padding-top-xxs"
className="padding-top-xs"
className="padding-top-sm"
className="padding-top-md"
className="padding-top-lg"
className="padding-top-xl"
className="padding-top-xxl"
className="padding-top-max"

# padding-bottom
className="padding-bottom-xxs"
className="padding-bottom-xs"
className="padding-bottom-sm"
className="padding-bottom-md"
className="padding-bottom-lg"
className="padding-bottom-xl"
className="padding-bottom-xxl"
className="padding-bottom-max"

# margin
className="margin-xxs"
className="margin-xs"
className="margin-sm"
className="margin-md"
className="margin-lg"
className="margin-xl"
className="margin-xxl"
className="margin-max"

# margin-left
className="margin-left-xxs"
className="margin-left-xs"
className="margin-left-sm"
className="margin-left-md"
className="margin-left-lg"
className="margin-left-xl"
className="margin-left-xxl"
className="margin-left-max"

# margin-right
className="margin-right-xxs"
className="margin-right-xs"
className="margin-right-sm"
className="margin-right-md"
className="margin-right-lg"
className="margin-right-xl"
className="margin-right-xxl"
className="margin-right-max"

# margin-top
className="margin-top-xxs"
className="margin-top-xs"
className="margin-top-sm"
className="margin-top-md"
className="margin-top-lg"
className="margin-top-xl"
className="margin-top-xxl"
className="margin-top-max"

# margin-bottom
className="margin-bottom-xxs"
className="margin-bottom-xs"
className="margin-bottom-sm"
className="margin-bottom-md"
className="margin-bottom-lg"
className="margin-bottom-xl"
className="margin-bottom-xxl"
className="margin-bottom-max"

Breakpoint

The breakpoint Sass variable names are provided below:

• $media-breakpoint-xs: 576px;
• $media-breakpoint-sm: 768px;
• $media-breakpoint-md: 992px;
• $media-breakpoint-lg: 1200px;
• $media-breakpoint-xl: 1599px;

Typography

• Tags:

You can use the styles by applying tag, h1 to h6 tags are pre defined as well as the htm, body and a tags.

• Mixin:

You can use the styles include a mixin to yous Sass files. Rememenber to import the theme at the top of the file

@import '~@gabrielajardimaquino/global-styles/theme.scss';

• Classes: you also can use one of thepreset class names to style any tag

import React from 'react';

const Test = () => {
  return (
    <>
      <h1 className="h1-lastest">Your content</h1>
    </>
  );
};

export default Test;

Font

Import the font at the top of the app file

import '@gabrielajardimaquino/global-styles/Fonts/metropolis.css';

Use the font by family:

font-family: 'Metropolis'

or use a preset Mixin:

# Semi Bold (weight: 600)
@include MetropolisSemiBold;
@include MetropolisSemiBoldItalic;

# Medium (weight: 500)
@include MetropolisMedium;
@include MetropolisMediumItalic;

# Normal (weight: 400)
@include Metropolis;
@include MetropolisItalic;

# Light (weight: 200)
@include MetropolisLight;
@include MetropolisLightItalic;

Header

className="h1-largest" #responsive
# or
@include h1-largest;

<h1></h1> #responsive
@include h1; #responsive
#or
@include h1-desktop;

<h2></h2> #responsive
@include h2; #responsive
# or
@include h2-desktop;
@include h1-mobile;
# same values

<h3></h3> #responsive
@include h3; #responsive
# or
@include h3-desktop;
@include h2-mobile;
# same values

<h4></h4> #responsive
@include h4; #responsive
# or
@include h4-desktop;
@include h3-mobile;
# same values

<h5></h5> #responsive
@include h5; #responsive
# or
@include h5-desktop;
@include h4-mobile;
# same values

<h6></h6> #responsive
@include h6; #responsive
# or
@include h6-desktop;
@include h5-mobile;
# same values

className="h6-smallest"
# or
@include h6-mobile;

Body

className="body-xxl"
# or
@include body-xxl;

className="body-xl"
# or
@include body-xl;

className="body-lg"
# or
@include body-lg;

className="body-md"
# or
@include body-md;

className="body-sm"
# or
@include body-sm;

className="body-xs"
# or
@include body-xs;

Link

Inline links can be used just by the a tag <a>Inline Link</a> and in block links can be use by the classes:

className="h1-largest-link"
className="h1-link"
className="h2-link"
className="h3-link"
className="h4-link"
className="h5-link"
className="h6-link"
className="h6-smallest-link"
# or
className="standalone-link"

For standalone link with icon use className="standalone-link", className="tooltip" and className="tooltip-icon" as example below:

import React from 'react';
import { Icon } from "@gabrielajardimaquino/component-library";

const LinkWithIcon = () => {
  return (
    <>
      <a className="standalone-link">
        Your link
        <div className="tooltip">
          <span className="tooltip-icon">
            <Icon name="fa-icon-info-circle-solid" size="xs" />
          </span>
      </a>
    </>
  );
};

export default LinkWithIcon;

Grid

The grid is build in 12 column. To use the className="container", className="row" and one off the column classes with max sum of 12:

• column classes

className="col-12"
className="col-11"
className="col-10"
className="col-9"
className="col-8"
className="col-7"
className="col-6"
className="col-5"
className="col-4"
className="col-3"
className="col-2"
className="col-1"

import React from 'react';

const Test = () => {
  return (
    <div className="container">
      <div className="row">
        <div className="col-1">content</div>
        <div className="col-8">content</div>
        <div className="col-3">content</div>
      </div>
    </div>
  );
};

export default Test;

Also avaliable with screen sensitive classes:

import React from 'react';

const Test = () => {
  return (
    <div className="container">
      <div className="row">
        <div className="col-lg-1 col-md-2 col-sm-4 col-xs-12">content</div>
        <div className="col-lg-8 col-md-6 col-sm-4 col-xs-12">content</div>
        <div className="col-lg-3 col-md-4 col-sm-4 col-xs-12">content</div>
      </div>
    </div>
  );
};

export default Test;

• col-xs

className="col-xs-12"
className="col-xs-11"
className="col-xs-10"
className="col-xs-9"
className="col-xs-8"
className="col-xs-7"
className="col-xs-6"
className="col-xs-5"
className="col-xs-4"
className="col-xs-3"
className="col-xs-2"
className="col-xs-1"

• col-sm

className="col-sm-12"
className="col-sm-11"
className="col-sm-10"
className="col-sm-9"
className="col-sm-8"
className="col-sm-7"
className="col-sm-6"
className="col-sm-5"
className="col-sm-4"
className="col-sm-3"
className="col-sm-2"
className="col-sm-1"

• col-md

className="col-md-12"
className="col-md-11"
className="col-md-10"
className="col-md-9"
className="col-md-8"
className="col-md-7"
className="col-md-6"
className="col-md-5"
className="col-md-4"
className="col-md-3"
className="col-md-2"
className="col-md-1"

• col-lg

className="col-lg-12"
className="col-lg-11"
className="col-lg-10"
className="col-lg-9"
className="col-lg-8"
className="col-lg-7"
className="col-lg-6"
className="col-lg-5"
className="col-lg-4"
className="col-lg-3"
className="col-lg-2"
className="col-lg-1"

Tooltip

Tooltip on hover can be used by passing the classes className="tooltip-label", className="tooltip", className="tooltip-icon" and className="tooltip-text".

import React from 'react';
import { Icon } from "@gabrielajardimaquino/component-library";

const Tooltip = () => {
  return (
    <>
      <p className="tooltip-label">
        Your content
        <div className="tooltip">
          <span className="tooltip-icon">
            <Icon name="fa-icon-info-circle-solid" size="xs" />
          </span>
          <span className="tooltip-text">
            This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed please use a modal instead.
          </span>
        </div>
      </p>
    </>
  );
};

export default Tooltip;

Tooltip on click can be used by passing the classes className="tooltip", className="tooltiptext" and className="tooltip-active"

import React, { useState } from 'react';
import { Icon } from "@gabrielajardimaquino/component-library";

const Tooltip = () => {
  const [active, setActive] = useState(false);
  const handleOnClick = () => {
    if (active) {
      setActive(false);
    } else {
      setActive(true);
    }
  };
  return (
    <>
      <p className="tooltip-label">
        Your content
        <div 
          className={`tooltip ${active ? 'tooltip-active' : ''}`}
          onClick={handleOnClick}
          onKeyPress={handleOnClick}
          tabIndex={0}
          role="button"
          aria-label="tooltip">
          <span className="tooltip-icon">
            <Icon name="fa-icon-info-circle-solid" size="xs" />
          </span>
          <span className="tooltip-text">
            This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed please use a modal instead.
          </span>
        </div>
      </p>
    </>
  );
};

export default Tooltip;

( png, svg and favicon.ico icons are also avaliable in folders )