From d16e71ae1ef8c69f57c353db45b46d1b1f2bea96 Mon Sep 17 00:00:00 2001
From: Ramin <r.ramazanpour@aut.ac.ir>
Date: Sun, 4 Sep 2022 15:51:01 +0430
Subject: [PATCH 1/2] fix: changing all font size units to rem

---
 src/components/typography/ButtonText.tsx     | 10 +++++-----
 src/components/typography/GLink.tsx          | 12 ++++++------
 src/components/typography/Overline.tsx       | 11 ++++++-----
 src/components/typography/QuoteText.tsx      | 11 ++++++-----
 src/components/typography/body/Caption.tsx   |  4 ++--
 src/components/typography/body/Lead.tsx      |  6 +++---
 src/components/typography/body/P.tsx         |  4 ++--
 src/components/typography/body/SemiTitle.tsx |  4 ++--
 src/components/typography/body/Subline.tsx   |  4 ++--
 src/components/typography/body/Title.tsx     |  6 +++---
 src/components/typography/displays/D1.tsx    |  8 ++++++--
 src/components/typography/displays/D2.tsx    |  8 ++++++--
 src/components/typography/displays/D3.tsx    |  8 ++++++--
 src/components/typography/headlines/H1.tsx   |  8 ++++++--
 src/components/typography/headlines/H2.tsx   |  8 ++++++--
 src/components/typography/headlines/H3.tsx   |  8 ++++++--
 src/components/typography/headlines/H4.tsx   |  8 ++++++--
 src/components/typography/headlines/H5.tsx   |  8 ++++++--
 src/components/typography/headlines/H6.tsx   |  4 ++--
 19 files changed, 87 insertions(+), 53 deletions(-)

diff --git a/src/components/typography/ButtonText.tsx b/src/components/typography/ButtonText.tsx
index d845b1e..7c79fdd 100644
--- a/src/components/typography/ButtonText.tsx
+++ b/src/components/typography/ButtonText.tsx
@@ -5,20 +5,20 @@ export interface IButtonTextProps {
 }
 
 export const ButtonText = styled.a<IButtonTextProps>`
-	font-family: Red Hat Text;
+	font-family: Red Hat Text, sans-serif;
 	font-style: normal;
 	text-transform: uppercase;
 	font-weight: 700;
 	${props => {
 		switch (props.size) {
 			case 'small':
-				return 'font-size: 12px;line-height: 16px;';
+				return 'font-size: 0.75rem;line-height: 133%;';
 			case 'medium':
-				return 'font-size: 14px;line-height: 18px;';
+				return 'font-size: 0.875rem;line-height: 129%;';
 			case 'large':
-				return 'font-size: 16px;line-height: 18px;';
+				return 'font-size: 1rem;line-height: 113%;';
 			default:
-				return 'font-size: 14px;line-height: 18px;';
+				return 'font-size: 0.875rem;line-height: 129%;';
 		}
 	}}
 `;
diff --git a/src/components/typography/GLink.tsx b/src/components/typography/GLink.tsx
index 91c9eb8..e9124d4 100644
--- a/src/components/typography/GLink.tsx
+++ b/src/components/typography/GLink.tsx
@@ -6,21 +6,21 @@ export interface IGLinkProps {
 
 export const GLink = styled.a<IGLinkProps>`
 	/* Link/Tiny */
-	font-family: Red Hat Text;
+	font-family: Red Hat Text, sans-serif;
 	font-style: normal;
 	font-weight: normal;
 	${props => {
 		switch (props.size) {
 			case 'Tiny':
-				return 'font-size: 10px;line-height: normal;';
+				return 'font-size: 0.625rem;line-height: 132%;';
 			case 'Small':
-				return 'font-size: 12px;line-height: normal;';
+				return 'font-size: 0.75rem;line-height: 132%;';
 			case 'Medium':
-				return 'font-size: 14px;line-height: 160%;';
+				return 'font-size: 0.875rem;line-height: 157%;';
 			case 'Big':
-				return 'font-size: 16px;line-height: normal;';
+				return 'font-size: 1rem;line-height: 132%;';
 			default:
-				return 'font-size: 14px;line-height: 160%;';
+				return 'font-size: 0.875rem;line-height: 157%;';
 		}
 	}}
 `;
diff --git a/src/components/typography/Overline.tsx b/src/components/typography/Overline.tsx
index e28b890..394264c 100644
--- a/src/components/typography/Overline.tsx
+++ b/src/components/typography/Overline.tsx
@@ -6,17 +6,18 @@ export interface IOverlineProps {
 
 export const Overline = styled.a<IOverlineProps>`
 	/* Overline */
-	font-family: Red Hat Text;
+	font-family: Red Hat Text, sans-serif;
+	line-height: 132%;
 	${props => {
 		switch (props.styleType) {
 			case 'Small':
-				return 'font-size: 10px;line-height: normal;font-style: normal;font-weight: 500;';
+				return 'font-size: 0.625rem;font-style: normal;font-weight: 500;';
 			case 'Regular':
-				return 'font-size: 14px;line-height: normal;font-style: normal;font-weight: 500;';
+				return 'font-size: 0.875rem;font-style: normal;font-weight: 500;';
 			case 'Italic':
-				return 'font-size: 14px;line-height: normal;font-style: italic;font-weight: normal;';
+				return 'font-size: 0.875rem;font-style: italic;font-weight: normal;';
 			default:
-				return 'font-size: 14px;line-height: normal;font-style: normal;font-weight: 500;';
+				return 'font-size: 0.875rem;font-style: normal;font-weight: 500;';
 		}
 	}}
 `;
diff --git a/src/components/typography/QuoteText.tsx b/src/components/typography/QuoteText.tsx
index 28e77c9..710f9f5 100644
--- a/src/components/typography/QuoteText.tsx
+++ b/src/components/typography/QuoteText.tsx
@@ -6,19 +6,20 @@ export interface IQuoteTextProps {
 
 export const QuoteText = styled.div<IQuoteTextProps>`
 	/* QuoteText */
-	font-family: Red Hat Text;
+	font-family: Red Hat Text, sans-serif;
 	font-weight: normal;
 	font-style: normal;
+	line-height: 134%;
 	${props => {
 		switch (props.size) {
 			case 'small':
-				return 'font-size: 24px;line-height: normal;';
+				return 'font-size: 1.5rem;';
 			case 'medium':
-				return 'font-size: 28px;line-height: 134%;';
+				return 'font-size: 1.75rem;';
 			case 'large':
-				return 'font-size: 32px;line-height: 134%;';
+				return 'font-size: 2rem;';
 			default:
-				return 'font-size: 28px;line-height: 134%;';
+				return 'font-size: 1.75rem;';
 		}
 	}}
 `;
diff --git a/src/components/typography/body/Caption.tsx b/src/components/typography/body/Caption.tsx
index e64faac..be46bcf 100644
--- a/src/components/typography/body/Caption.tsx
+++ b/src/components/typography/body/Caption.tsx
@@ -6,9 +6,9 @@ export interface ICaptionProps {
 
 export const Caption = styled.div<ICaptionProps>`
 	/* Body/Caption */
-	font-family: Red Hat Text;
+	font-family: Red Hat Text, sans-serif;
 	font-style: normal;
 	font-weight: ${props => (props.medium ? 500 : 400)};
-	font-size: 14px;
+	font-size: 0.875rem;
 	line-height: 150%;
 `;
diff --git a/src/components/typography/body/Lead.tsx b/src/components/typography/body/Lead.tsx
index 7469c58..c8aa35f 100644
--- a/src/components/typography/body/Lead.tsx
+++ b/src/components/typography/body/Lead.tsx
@@ -5,13 +5,13 @@ export interface ILeadProps {
 }
 
 const fontSize = {
-	medium: '20px',
-	large: '24px',
+	medium: '1.25rem',
+	large: '1.5rem',
 };
 
 export const Lead = styled.div<ILeadProps>`
 	/* Body/Lead */
-	font-family: Red Hat Text;
+	font-family: Red Hat Text, sans-serif;
 	font-style: normal;
 	font-weight: normal;
 	line-height: 150%;
diff --git a/src/components/typography/body/P.tsx b/src/components/typography/body/P.tsx
index 8bb9fa6..c5fe393 100644
--- a/src/components/typography/body/P.tsx
+++ b/src/components/typography/body/P.tsx
@@ -2,9 +2,9 @@ import styled from 'styled-components';
 
 export const P = styled.div`
 	/* Body/P */
-	font-family: Red Hat Text;
+	font-family: Red Hat Text, sans-serif;
 	font-style: normal;
 	font-weight: normal;
-	font-size: 16px;
+	font-size: 1rem;
 	line-height: 150%;
 `;
diff --git a/src/components/typography/body/SemiTitle.tsx b/src/components/typography/body/SemiTitle.tsx
index dbb69dd..0618f21 100644
--- a/src/components/typography/body/SemiTitle.tsx
+++ b/src/components/typography/body/SemiTitle.tsx
@@ -2,10 +2,10 @@ import styled from 'styled-components';
 
 export const SemiTitle = styled.div`
 	/* Body/SEMI-TITLE */
-	font-family: Red Hat Text;
+	font-family: Red Hat Text, sans-serif;
 	font-style: normal;
 	font-weight: normal;
-	font-size: 16px;
+	font-size: 1rem;
 	line-height: 150%;
 	text-transform: uppercase;
 `;
diff --git a/src/components/typography/body/Subline.tsx b/src/components/typography/body/Subline.tsx
index 079e7d2..fe65ef3 100644
--- a/src/components/typography/body/Subline.tsx
+++ b/src/components/typography/body/Subline.tsx
@@ -2,9 +2,9 @@ import styled from 'styled-components';
 
 export const Subline = styled.div`
 	/* Body/Subline */
-	font-family: Red Hat Text;
+	font-family: Red Hat Text, sans-serif;
 	font-style: normal;
 	font-weight: normal;
-	font-size: 12px;
+	font-size: 0.75rem;
 	line-height: 150%;
 `;
diff --git a/src/components/typography/body/Title.tsx b/src/components/typography/body/Title.tsx
index 6512ae8..8e75dd9 100644
--- a/src/components/typography/body/Title.tsx
+++ b/src/components/typography/body/Title.tsx
@@ -2,10 +2,10 @@ import styled from 'styled-components';
 
 export const Title = styled.div`
 	/* Body/Title */
-	font-family: 'Red Hat Display';
+	font-family: 'Red Hat Display', sans-serif;
 	font-style: normal;
 	font-weight: 700;
-	font-size: 32px;
-	line-height: normal;
+	font-size: 2rem;
+	line-height: 132%;
 	letter-spacing: -0.01em;
 `;
diff --git a/src/components/typography/displays/D1.tsx b/src/components/typography/displays/D1.tsx
index 1ba140f..e8202f1 100644
--- a/src/components/typography/displays/D1.tsx
+++ b/src/components/typography/displays/D1.tsx
@@ -1,11 +1,15 @@
 import styled from 'styled-components';
+import { mediaQueries } from '../../../common/deviceSize';
 
 export const D1 = styled.div`
 	/* Display/D1 */
-	font-family: TeX Gyre Adventor;
+	font-family: TeX Gyre Adventor, sans-serif;
 	font-style: normal;
 	font-weight: 700;
-	font-size: 6.69rem;
+	font-size: 5rem;
 	line-height: 130%;
 	letter-spacing: -0.04em;
+	${mediaQueries.tablet} {
+		font-size: 6.69rem;
+	}
 `;
diff --git a/src/components/typography/displays/D2.tsx b/src/components/typography/displays/D2.tsx
index d28a35d..2661dbd 100644
--- a/src/components/typography/displays/D2.tsx
+++ b/src/components/typography/displays/D2.tsx
@@ -1,11 +1,15 @@
 import styled from 'styled-components';
+import { mediaQueries } from '../../../common/deviceSize';
 
 export const D2 = styled.div`
 	/* Display/D2 */
-	font-family: TeX Gyre Adventor;
+	font-family: TeX Gyre Adventor, sans-serif;
 	font-style: normal;
 	font-weight: 700;
-	font-size: 6.06rem;
+	font-size: 4.625rem;
 	line-height: 130%;
 	letter-spacing: -0.04em;
+	${mediaQueries.tablet} {
+		font-size: 6.06rem;
+	}
 `;
diff --git a/src/components/typography/displays/D3.tsx b/src/components/typography/displays/D3.tsx
index 630ab50..de89c93 100644
--- a/src/components/typography/displays/D3.tsx
+++ b/src/components/typography/displays/D3.tsx
@@ -1,11 +1,15 @@
 import styled from 'styled-components';
+import { mediaQueries } from '../../../common/deviceSize';
 
 export const D3 = styled.div`
 	/* Display/D3 */
-	font-family: TeX Gyre Adventor;
+	font-family: TeX Gyre Adventor, sans-serif;
 	font-style: normal;
 	font-weight: 700;
-	font-size: 5.5rem;
+	font-size: 4.25rem;
 	line-height: 120%;
 	letter-spacing: -0.04em;
+	${mediaQueries.tablet} {
+		font-size: 5.5rem;
+	}
 `;
diff --git a/src/components/typography/headlines/H1.tsx b/src/components/typography/headlines/H1.tsx
index 3e20952..ced6adf 100644
--- a/src/components/typography/headlines/H1.tsx
+++ b/src/components/typography/headlines/H1.tsx
@@ -1,14 +1,18 @@
 import styled from 'styled-components';
 import { IHeadingProps } from './common';
+import { mediaQueries } from '../../../common/deviceSize';
 
 export const H1 = styled.h1<IHeadingProps>`
 	/* Heading/H1 | 500 */
-	font-family: TeX Gyre Adventor;
+	font-family: TeX Gyre Adventor, sans-serif;
 	font-style: normal;
 	font-weight: ${props => props.weight || 500};
-	font-size: 4.13rem;
+	font-size: 2.5rem;
 	line-height: 130%;
 	letter-spacing: -0.03em;
 	margin-top: 0;
 	margin-bottom: 0;
+	${mediaQueries.tablet} {
+		font-size: 4.125rem;
+	}
 `;
diff --git a/src/components/typography/headlines/H2.tsx b/src/components/typography/headlines/H2.tsx
index a6d97be..0c257ac 100644
--- a/src/components/typography/headlines/H2.tsx
+++ b/src/components/typography/headlines/H2.tsx
@@ -1,14 +1,18 @@
 import styled from 'styled-components';
 import { IHeadingProps } from './common';
+import { mediaQueries } from '../../../common/deviceSize';
 
 export const H2 = styled.h2<IHeadingProps>`
 	/* Heading/H2 | 500 */
-	font-family: TeX Gyre Adventor;
+	font-family: TeX Gyre Adventor, sans-serif;
 	font-style: normal;
 	font-weight: ${props => props.weight || 500};
-	font-size: 3.25rem;
+	font-size: 2.25rem;
 	line-height: 130%;
 	letter-spacing: -0.02em;
 	margin-top: 0;
 	margin-bottom: 0;
+	${mediaQueries.tablet} {
+		font-size: 3.25rem;
+	}
 `;
diff --git a/src/components/typography/headlines/H3.tsx b/src/components/typography/headlines/H3.tsx
index ccb0894..fa2cd7b 100644
--- a/src/components/typography/headlines/H3.tsx
+++ b/src/components/typography/headlines/H3.tsx
@@ -1,13 +1,17 @@
 import styled from 'styled-components';
 import { IHeadingProps } from './common';
+import { mediaQueries } from '../../../common/deviceSize';
 
 export const H3 = styled.h3<IHeadingProps>`
 	/* Heading/H3 | 500 */
-	font-family: TeX Gyre Adventor;
+	font-family: TeX Gyre Adventor, sans-serif;
 	font-style: normal;
 	font-weight: ${props => props.weight || 500};
-	font-size: 2.56rem;
+	font-size: 2rem;
 	line-height: 130%;
 	margin-top: 0;
 	margin-bottom: 0;
+	${mediaQueries.tablet} {
+		font-size: 2.56rem;
+	}
 `;
diff --git a/src/components/typography/headlines/H4.tsx b/src/components/typography/headlines/H4.tsx
index 3f060ea..7d7e10f 100644
--- a/src/components/typography/headlines/H4.tsx
+++ b/src/components/typography/headlines/H4.tsx
@@ -1,14 +1,18 @@
 import styled from 'styled-components';
 import { IHeadingProps } from './common';
+import { mediaQueries } from '../../../common/deviceSize';
 
 export const H4 = styled.h4<IHeadingProps>`
 	/* Heading/H4 | 500 */
-	font-family: TeX Gyre Adventor;
+	font-family: TeX Gyre Adventor, sans-serif;
 	font-style: normal;
 	font-weight: ${props => props.weight || 500};
-	font-size: 2rem;
+	font-size: 1.75rem;
 	line-height: normal;
 	letter-spacing: -0.01em;
 	margin-top: 0;
 	margin-bottom: 0;
+	${mediaQueries.tablet} {
+		font-size: 2rem;
+	}
 `;
diff --git a/src/components/typography/headlines/H5.tsx b/src/components/typography/headlines/H5.tsx
index f7d6a3a..434ae46 100644
--- a/src/components/typography/headlines/H5.tsx
+++ b/src/components/typography/headlines/H5.tsx
@@ -1,14 +1,18 @@
 import styled from 'styled-components';
 import { IHeadingProps } from './common';
+import { mediaQueries } from '../../../common/deviceSize';
 
 export const H5 = styled.h5<IHeadingProps>`
 	/* Heading/H5 | 500 */
-	font-family: TeX Gyre Adventor;
+	font-family: TeX Gyre Adventor, sans-serif;
 	font-style: normal;
 	font-weight: ${props => props.weight || 500};
-	font-size: 1.56rem;
+	font-size: 1.44rem;
 	line-height: normal;
 	letter-spacing: -0.005em;
 	margin-top: 0;
 	margin-bottom: 0;
+	${mediaQueries.tablet} {
+		font-size: 1.56rem;
+	}
 `;
diff --git a/src/components/typography/headlines/H6.tsx b/src/components/typography/headlines/H6.tsx
index 4dee8b2..5f8e292 100644
--- a/src/components/typography/headlines/H6.tsx
+++ b/src/components/typography/headlines/H6.tsx
@@ -3,10 +3,10 @@ import { IHeadingProps } from './common';
 
 export const H6 = styled.h6<IHeadingProps>`
 	/* Heading/H6 | 500 */
-	font-family: TeX Gyre Adventor;
+	font-family: TeX Gyre Adventor, sans-serif;
 	font-style: normal;
 	font-weight: ${props => props.weight || 500};
-	font-size: 1.13rem;
+	font-size: 1.125rem;
 	line-height: normal;
 	letter-spacing: -0.005em;
 	margin-top: 0;

From 71377026105e9c04a43fff37492466cf806a4ecf Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 12 Sep 2022 18:45:23 +0430
Subject: [PATCH 2/2] fix: update version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7343886..511ad9c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@giveth/ui-design-system",
-	"version": "1.8.22",
+	"version": "1.8.25",
 	"files": [
 		"/lib"
 	],