-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtypographies.ts
More file actions
87 lines (76 loc) · 2.24 KB
/
typographies.ts
File metadata and controls
87 lines (76 loc) · 2.24 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
'use client';
import styled from "styled-components";
import { Montserrat, Poppins } from "next/font/google";
import { fonts } from "./fonts";
const poppins = Poppins({ weight: ['400'], style: ['normal'], subsets: ['latin'], display: 'swap' });
const montserrat = Montserrat({ weight: ['700'], style: ['normal'], subsets: ['latin'], display: 'swap' });
interface StyledComponentProps {
fontFamily: string;
fontWeight: string | number;
fontSize: string;
lineHeight: string;
}
export const createStyledHeading = (
tag: keyof JSX.IntrinsicElements,
{ fontFamily, fontWeight, fontSize, lineHeight }: StyledComponentProps
) => styled(tag)`
font-family: ${fontFamily}, sans-serif;
font-weight: ${fontWeight};
font-size: ${fontSize};
line-height: ${lineHeight};
letter-spacing: 0;
text-decoration: none;
margin-top: 0;
margin-bottom: 0;
text-transform: none;
`;
export const createStyledParagraph = (
tag: keyof JSX.IntrinsicElements,
{ fontFamily, fontWeight, fontSize, lineHeight }: StyledComponentProps
) => styled(tag)`
font-family: ${fontFamily}, sans-serif;
font-weight: ${fontWeight};
font-size: ${fontSize};
line-height: ${lineHeight};
letter-spacing: 0;
text-decoration: none;
margin-top: 0;
margin-bottom: 0;
text-transform: none;
`;
export const Header1 = createStyledHeading('h1', {
fontFamily: 'Montserrat',
fontWeight: fonts.bold,
fontSize: '3rem',
lineHeight: '125%'
});
export const Subtitle = createStyledHeading('h2', {
fontFamily: montserrat.style.fontFamily,
fontWeight: fonts.bold,
fontSize: '1.5rem',
lineHeight: '125%'
});
export const Header32 = createStyledHeading('h3', {
fontFamily: montserrat.style.fontFamily,
fontWeight: fonts.bold,
fontSize: '2rem',
lineHeight: '125%'
});
export const Header24 = createStyledHeading('h4', {
fontFamily: montserrat.style.fontFamily,
fontWeight: fonts.bold,
fontSize: '1.5rem',
lineHeight: '125%'
});
export const Paragraph1 = createStyledParagraph('p', {
fontFamily: poppins.style.fontFamily,
fontWeight: fonts.normal,
fontSize: '1rem',
lineHeight: '125%'
});
export const Paragraph2 = createStyledParagraph('p', {
fontFamily: poppins.style.fontFamily,
fontWeight: fonts.medium,
fontSize: '1.25rem',
lineHeight: '125%'
});