/
Title.styles.ts
38 lines (31 loc) · 1.24 KB
/
Title.styles.ts
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
import { createStyles, MantineTheme } from '@mantine/styles';
import type { TitleSize } from './Title';
type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
export interface TitleStylesParams {
element: HeadingElement;
size: TitleSize;
weight: React.CSSProperties['fontWeight'];
inline: boolean;
}
function getFontSize(size: TitleSize, element: HeadingElement, theme: MantineTheme) {
if (typeof size !== 'undefined') {
return size in theme.headings.sizes ? theme.headings.sizes[size].fontSize : size;
}
return theme.headings.sizes[element].fontSize;
}
function getLineHeight(size: TitleSize, element: HeadingElement, theme: MantineTheme) {
if (typeof size !== 'undefined' && size in theme.headings.sizes) {
return theme.headings.sizes[size].lineHeight;
}
return theme.headings.sizes[element].lineHeight;
}
export default createStyles((theme, { element, weight, size, inline }: TitleStylesParams) => ({
root: {
...theme.fn.fontStyles(),
fontFamily: theme.headings.fontFamily,
fontWeight: weight || theme.headings.sizes[element].fontWeight || theme.headings.fontWeight,
fontSize: getFontSize(size, element, theme),
lineHeight: inline ? 1 : getLineHeight(size, element, theme),
margin: 0,
},
}));