Global Styles

bash
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 #F0F1F4:

$color-blue


- !#F3DCE6 #F3DCE6:

$color-pink-light


- !#EB0C8F #EB0C8F:

$color-pink


- !#F58720 #F58720:

$color-orange


- !#ECB904 #ECB904:

$color-yellow


- !#008300 #008300:

$color-green


Greys

- !#ffffff #ffffff:

$color-white


- !#F8F8F8 #F8F8F8:

$color-grey-1


- !#E8E8E8 #E8E8E8:

$color-grey-2


- !#D8D8D8 #D8D8D8:

$color-grey-3


- !#C8C8C8 #C8C8C8:

$color-grey-4


- !#ADADAD #ADADAD:

$color-grey-5


- !#7D7D7D #7D7D7D:

$color-grey-6


- !#595959 #595959:

$color-grey-7


- !#35383A #35383A:

$color-grey-8


- !#191C1F #191C1F:

$color-black

The padding/margin also can be usd by the classes`bash

`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.
- !#FF0099

$padding-xxs

: 0.25rem
- !#FF0099

$padding-xs

: 0.5rem
- !#FF0099

$padding-sm

: 1rem
- !#FF0099

$padding-md

: 1.5rem
- !#FF0099

$padding-lg

: 2rem
- !#FF0099

$padding-xl

: 3rem
- !#FF0099

$padding-xxl

: 4rem
- !#FF0099

$padding-max: 6rem

The padding/margin also can be usd by the classes`bash

`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

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


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

TSX
import React from 'react';
const Test = () => {
  return (
    <>
      
Your content

    
  );
};

export default Test;`

`Font`


Import the font at the top of the app file

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

Use the font by family:`bash font-family: 'Metropolis'`

or use a preset Mixin:`bash

`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;

$3

bash
className="h1-largest" #responsive
or

@include h1-largest;

bash
 #responsive
@include h1; #responsive
#or
@include h1-desktop;

bash
 #responsive
@include h2; #responsive
or

@include h2-desktop;
@include h1-mobile;
same values

bash
 #responsive
@include h3; #responsive
or

@include h3-desktop;
@include h2-mobile;
same values

bash
 #responsive
@include h4; #responsive
or

@include h4-desktop;
@include h3-mobile;
same values

bash
 #responsive
@include h5; #responsive
or

@include h5-desktop;
@include h4-mobile;
same values

bash
 #responsive
@include h6; #responsive
or

@include h6-desktop;
@include h5-mobile;
same values

bash
className="h6-smallest"
or

@include h6-mobile;

$3

bash
className="body-xxl"
or

@include body-xxl;

bash
className="body-xl"
or

@include body-xl;

bash
className="body-lg"
or

@include body-lg;

bash
className="body-md"
or

@include body-md;

bash
className="body-sm"
or

@include body-sm;

bash
className="body-xs"
or

@include body-xs;


$3

Inline links can be used just by the a tag

Inline Link

 and in block links can be use by the classes:

bash
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:

TSX
import React from 'react';
import { Icon } from "@gabrielajardimaquino/component-library";
const LinkWithIcon = () => {
  return (
    <>
      
        Your link

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

bash
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"

`TSX import React from 'react';

const Test = () => { return (


      
        content

        content

        content


  );
};

export default Test;`

Also avaliable with screen sensitive classes:`TSX import React from 'react';

const Test = () => { return (


      
        content

        content

        content


  );
};

export default Test;`- col-xs`bash 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`bash 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`bash 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`bash 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".

TSX
import React from 'react';
import { Icon } from "@gabrielajardimaquino/component-library";
const Tooltip = () => {
  return (
    <>
      

        Your content
        

          
            
          
          
            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.
          
        

      

    
  );
};

export default Tooltip;`Tooltip on click can be used by passing the classes className="tooltip", className="tooltiptext" and className="tooltip-active"`TSX 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 ( <>

Your content

className={tooltip ${active ? 'tooltip-active' : ''}

}
          onClick={handleOnClick}
          onKeyPress={handleOnClick}
          tabIndex={0}
          role="button"
          aria-label="tooltip">
          
            
          
          
            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.

export default Tooltip;``

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