Skip to content

Commit d40da8a

Browse files
MohammadPChMohammadPCh
authored
Merge pull request #68 from Giveth/changing_all_font_size_units_to_rem
changing all font size units to rem
2 parents 879a527 + fb95d82 commit d40da8a

20 files changed

+88
-54
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@giveth/ui-design-system",
3-
"version": "1.8.23",
3+
"version": "1.8.25",
44
"files": [
55
"/lib"
66
],

‎src/components/typography/ButtonText.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,20 @@ export interface IButtonTextProps {
55
}
66

77
export const ButtonText = styled.a<IButtonTextProps>`
8-
font-family: Red Hat Text;
8+
font-family: Red Hat Text, sans-serif;
99
font-style: normal;
1010
text-transform: uppercase;
1111
font-weight: 700;
1212
${props => {
1313
switch (props.size) {
1414
case 'small':
15-
return 'font-size: 12px;line-height: 16px;';
15+
return 'font-size: 0.75rem;line-height: 133%;';
1616
case 'medium':
17-
return 'font-size: 14px;line-height: 18px;';
17+
return 'font-size: 0.875rem;line-height: 129%;';
1818
case 'large':
19-
return 'font-size: 16px;line-height: 18px;';
19+
return 'font-size: 1rem;line-height: 113%;';
2020
default:
21-
return 'font-size: 14px;line-height: 18px;';
21+
return 'font-size: 0.875rem;line-height: 129%;';
2222
}
2323
}}
2424
`;

‎src/components/typography/GLink.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,21 @@ export interface IGLinkProps {
66

77
export const GLink = styled.a<IGLinkProps>`
88
/* Link/Tiny */
9-
font-family: Red Hat Text;
9+
font-family: Red Hat Text, sans-serif;
1010
font-style: normal;
1111
font-weight: normal;
1212
${props => {
1313
switch (props.size) {
1414
case 'Tiny':
15-
return 'font-size: 10px;line-height: normal;';
15+
return 'font-size: 0.625rem;line-height: 132%;';
1616
case 'Small':
17-
return 'font-size: 12px;line-height: normal;';
17+
return 'font-size: 0.75rem;line-height: 132%;';
1818
case 'Medium':
19-
return 'font-size: 14px;line-height: 160%;';
19+
return 'font-size: 0.875rem;line-height: 157%;';
2020
case 'Big':
21-
return 'font-size: 16px;line-height: normal;';
21+
return 'font-size: 1rem;line-height: 132%;';
2222
default:
23-
return 'font-size: 14px;line-height: 160%;';
23+
return 'font-size: 0.875rem;line-height: 157%;';
2424
}
2525
}}
2626
`;

‎src/components/typography/Overline.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,18 @@ export interface IOverlineProps {
66

77
export const Overline = styled.a<IOverlineProps>`
88
/* Overline */
9-
font-family: Red Hat Text;
9+
font-family: Red Hat Text, sans-serif;
10+
line-height: 132%;
1011
${props => {
1112
switch (props.styleType) {
1213
case 'Small':
13-
return 'font-size: 10px;line-height: normal;font-style: normal;font-weight: 500;';
14+
return 'font-size: 0.625rem;font-style: normal;font-weight: 500;';
1415
case 'Regular':
15-
return 'font-size: 14px;line-height: normal;font-style: normal;font-weight: 500;';
16+
return 'font-size: 0.875rem;font-style: normal;font-weight: 500;';
1617
case 'Italic':
17-
return 'font-size: 14px;line-height: normal;font-style: italic;font-weight: normal;';
18+
return 'font-size: 0.875rem;font-style: italic;font-weight: normal;';
1819
default:
19-
return 'font-size: 14px;line-height: normal;font-style: normal;font-weight: 500;';
20+
return 'font-size: 0.875rem;font-style: normal;font-weight: 500;';
2021
}
2122
}}
2223
`;

‎src/components/typography/QuoteText.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,20 @@ export interface IQuoteTextProps {
66

77
export const QuoteText = styled.div<IQuoteTextProps>`
88
/* QuoteText */
9-
font-family: Red Hat Text;
9+
font-family: Red Hat Text, sans-serif;
1010
font-weight: normal;
1111
font-style: normal;
12+
line-height: 134%;
1213
${props => {
1314
switch (props.size) {
1415
case 'small':
15-
return 'font-size: 24px;line-height: normal;';
16+
return 'font-size: 1.5rem;';
1617
case 'medium':
17-
return 'font-size: 28px;line-height: 134%;';
18+
return 'font-size: 1.75rem;';
1819
case 'large':
19-
return 'font-size: 32px;line-height: 134%;';
20+
return 'font-size: 2rem;';
2021
default:
21-
return 'font-size: 28px;line-height: 134%;';
22+
return 'font-size: 1.75rem;';
2223
}
2324
}}
2425
`;

‎src/components/typography/body/Caption.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ export interface ICaptionProps {
66

77
export const Caption = styled.div<ICaptionProps>`
88
/* Body/Caption */
9-
font-family: Red Hat Text;
9+
font-family: Red Hat Text, sans-serif;
1010
font-style: normal;
1111
font-weight: ${props => (props.medium ? 500 : 400)};
12-
font-size: 14px;
12+
font-size: 0.875rem;
1313
line-height: 150%;
1414
`;

‎src/components/typography/body/Lead.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ export interface ILeadProps {
55
}
66

77
const fontSize = {
8-
medium: '20px',
9-
large: '24px',
8+
medium: '1.25rem',
9+
large: '1.5rem',
1010
};
1111

1212
export const Lead = styled.div<ILeadProps>`
1313
/* Body/Lead */
14-
font-family: Red Hat Text;
14+
font-family: Red Hat Text, sans-serif;
1515
font-style: normal;
1616
font-weight: normal;
1717
line-height: 150%;

‎src/components/typography/body/P.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import styled from 'styled-components';
22

33
export const P = styled.div`
44
/* Body/P */
5-
font-family: Red Hat Text;
5+
font-family: Red Hat Text, sans-serif;
66
font-style: normal;
77
font-weight: normal;
8-
font-size: 16px;
8+
font-size: 1rem;
99
line-height: 150%;
1010
`;

‎src/components/typography/body/SemiTitle.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import styled from 'styled-components';
22

33
export const SemiTitle = styled.div`
44
/* Body/SEMI-TITLE */
5-
font-family: Red Hat Text;
5+
font-family: Red Hat Text, sans-serif;
66
font-style: normal;
77
font-weight: normal;
8-
font-size: 16px;
8+
font-size: 1rem;
99
line-height: 150%;
1010
text-transform: uppercase;
1111
`;

‎src/components/typography/body/Subline.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import styled from 'styled-components';
22

33
export const Subline = styled.div`
44
/* Body/Subline */
5-
font-family: Red Hat Text;
5+
font-family: Red Hat Text, sans-serif;
66
font-style: normal;
77
font-weight: normal;
8-
font-size: 12px;
8+
font-size: 0.75rem;
99
line-height: 150%;
1010
`;

‎src/components/typography/body/Title.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import styled from 'styled-components';
22

33
export const Title = styled.div`
44
/* Body/Title */
5-
font-family: 'Red Hat Display';
5+
font-family: 'Red Hat Display', sans-serif;
66
font-style: normal;
77
font-weight: 700;
8-
font-size: 32px;
9-
line-height: normal;
8+
font-size: 2rem;
9+
line-height: 132%;
1010
letter-spacing: -0.01em;
1111
`;

‎src/components/typography/displays/D1.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import styled from 'styled-components';
2+
import { mediaQueries } from '../../../common/deviceSize';
23

34
export const D1 = styled.div`
45
/* Display/D1 */
5-
font-family: TeX Gyre Adventor;
6+
font-family: TeX Gyre Adventor, sans-serif;
67
font-style: normal;
78
font-weight: 700;
8-
font-size: 6.69rem;
9+
font-size: 5rem;
910
line-height: 130%;
1011
letter-spacing: -0.04em;
12+
${mediaQueries.tablet} {
13+
font-size: 6.69rem;
14+
}
1115
`;

‎src/components/typography/displays/D2.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import styled from 'styled-components';
2+
import { mediaQueries } from '../../../common/deviceSize';
23

34
export const D2 = styled.div`
45
/* Display/D2 */
5-
font-family: TeX Gyre Adventor;
6+
font-family: TeX Gyre Adventor, sans-serif;
67
font-style: normal;
78
font-weight: 700;
8-
font-size: 6.06rem;
9+
font-size: 4.625rem;
910
line-height: 130%;
1011
letter-spacing: -0.04em;
12+
${mediaQueries.tablet} {
13+
font-size: 6.06rem;
14+
}
1115
`;

‎src/components/typography/displays/D3.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import styled from 'styled-components';
2+
import { mediaQueries } from '../../../common/deviceSize';
23

34
export const D3 = styled.div`
45
/* Display/D3 */
5-
font-family: TeX Gyre Adventor;
6+
font-family: TeX Gyre Adventor, sans-serif;
67
font-style: normal;
78
font-weight: 700;
8-
font-size: 5.5rem;
9+
font-size: 4.25rem;
910
line-height: 120%;
1011
letter-spacing: -0.04em;
12+
${mediaQueries.tablet} {
13+
font-size: 5.5rem;
14+
}
1115
`;

‎src/components/typography/headlines/H1.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import styled from 'styled-components';
22
import { IHeadingProps } from './common';
3+
import { mediaQueries } from '../../../common/deviceSize';
34

45
export const H1 = styled.h1<IHeadingProps>`
56
/* Heading/H1 | 500 */
6-
font-family: TeX Gyre Adventor;
7+
font-family: TeX Gyre Adventor, sans-serif;
78
font-style: normal;
89
font-weight: ${props => props.weight || 500};
9-
font-size: 4.13rem;
10+
font-size: 2.5rem;
1011
line-height: 130%;
1112
letter-spacing: -0.03em;
1213
margin-top: 0;
1314
margin-bottom: 0;
15+
${mediaQueries.tablet} {
16+
font-size: 4.125rem;
17+
}
1418
`;

‎src/components/typography/headlines/H2.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import styled from 'styled-components';
22
import { IHeadingProps } from './common';
3+
import { mediaQueries } from '../../../common/deviceSize';
34

45
export const H2 = styled.h2<IHeadingProps>`
56
/* Heading/H2 | 500 */
6-
font-family: TeX Gyre Adventor;
7+
font-family: TeX Gyre Adventor, sans-serif;
78
font-style: normal;
89
font-weight: ${props => props.weight || 500};
9-
font-size: 3.25rem;
10+
font-size: 2.25rem;
1011
line-height: 130%;
1112
letter-spacing: -0.02em;
1213
margin-top: 0;
1314
margin-bottom: 0;
15+
${mediaQueries.tablet} {
16+
font-size: 3.25rem;
17+
}
1418
`;

‎src/components/typography/headlines/H3.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import styled from 'styled-components';
22
import { IHeadingProps } from './common';
3+
import { mediaQueries } from '../../../common/deviceSize';
34

45
export const H3 = styled.h3<IHeadingProps>`
56
/* Heading/H3 | 500 */
6-
font-family: TeX Gyre Adventor;
7+
font-family: TeX Gyre Adventor, sans-serif;
78
font-style: normal;
89
font-weight: ${props => props.weight || 500};
9-
font-size: 2.56rem;
10+
font-size: 2rem;
1011
line-height: 130%;
1112
margin-top: 0;
1213
margin-bottom: 0;
14+
${mediaQueries.tablet} {
15+
font-size: 2.56rem;
16+
}
1317
`;

‎src/components/typography/headlines/H4.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import styled from 'styled-components';
22
import { IHeadingProps } from './common';
3+
import { mediaQueries } from '../../../common/deviceSize';
34

45
export const H4 = styled.h4<IHeadingProps>`
56
/* Heading/H4 | 500 */
6-
font-family: TeX Gyre Adventor;
7+
font-family: TeX Gyre Adventor, sans-serif;
78
font-style: normal;
89
font-weight: ${props => props.weight || 500};
9-
font-size: 2rem;
10+
font-size: 1.75rem;
1011
line-height: normal;
1112
letter-spacing: -0.01em;
1213
margin-top: 0;
1314
margin-bottom: 0;
15+
${mediaQueries.tablet} {
16+
font-size: 2rem;
17+
}
1418
`;

‎src/components/typography/headlines/H5.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import styled from 'styled-components';
22
import { IHeadingProps } from './common';
3+
import { mediaQueries } from '../../../common/deviceSize';
34

45
export const H5 = styled.h5<IHeadingProps>`
56
/* Heading/H5 | 500 */
6-
font-family: TeX Gyre Adventor;
7+
font-family: TeX Gyre Adventor, sans-serif;
78
font-style: normal;
89
font-weight: ${props => props.weight || 500};
9-
font-size: 1.56rem;
10+
font-size: 1.44rem;
1011
line-height: normal;
1112
letter-spacing: -0.005em;
1213
margin-top: 0;
1314
margin-bottom: 0;
15+
${mediaQueries.tablet} {
16+
font-size: 1.56rem;
17+
}
1418
`;

‎src/components/typography/headlines/H6.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { IHeadingProps } from './common';
33

44
export const H6 = styled.h6<IHeadingProps>`
55
/* Heading/H6 | 500 */
6-
font-family: TeX Gyre Adventor;
6+
font-family: TeX Gyre Adventor, sans-serif;
77
font-style: normal;
88
font-weight: ${props => props.weight || 500};
9-
font-size: 1.13rem;
9+
font-size: 1.125rem;
1010
line-height: normal;
1111
letter-spacing: -0.005em;
1212
margin-top: 0;

0 commit comments

Comments
 (0)