Fashionphile Global Styles from https://www.figma.com/file/XAEBSreZiaP6jLj6l5jNSt/Style-Guide%3A-Base-%2B-Components?node-id=102%3A0
npm install @gabrielajardimaquino/global-stylesbash
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-greenGreys
- !#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-blackThe 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: 6remThe 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";
>
);
};export default Tooltip;
``###### ( png, svg and favicon.ico icons are also avaliable in folders )