Skip to content

Commit 69c8a66

Browse files
committed
Adds typography sizes
1 parent ab5d2e6 commit 69c8a66

File tree

1 file changed

+37
-6
lines changed

1 file changed

+37
-6
lines changed

theme/typography.ts

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { ColorStates } from "./constants";
22

3+
interface Measurements {
4+
[key: string]: string;
5+
}
6+
37
interface TextPalette extends ColorStates {
48
primary: string;
59
secondary: string;
@@ -9,20 +13,47 @@ interface TextPalette extends ColorStates {
913

1014
interface Typography {
1115
palette: TextPalette;
16+
lineHeights: Measurements;
17+
sizes: Measurements;
1218
}
1319

20+
const FONT_SIZES = [12, 14, 16, 20, 24, 30, 36, 48, 60];
1421
const PRIMARY_TEXT_COLOR = "";
1522
const SECODARY_TEXT_COLOR = "";
1623
const PRESSED_TEXT_COLOR = "";
1724
const DISABLED_TEXT_COLOR = "";
1825

26+
const palette: TextPalette = {
27+
primary: PRIMARY_TEXT_COLOR,
28+
secondary: SECODARY_TEXT_COLOR,
29+
disabled: DISABLED_TEXT_COLOR,
30+
pressed: PRESSED_TEXT_COLOR
31+
};
32+
33+
const lineHeights: Measurements = {
34+
xs: "19px",
35+
sm: "23px",
36+
rg: "26px",
37+
md: "32px",
38+
lg: "39px",
39+
xl: "49px"
40+
};
41+
const sizes: Measurements = {
42+
xs: `${FONT_SIZES[0]}px`,
43+
sm: `${FONT_SIZES[1]}px`,
44+
rg: `${FONT_SIZES[2]}px`,
45+
md: `${FONT_SIZES[3]}px`,
46+
lg: `${FONT_SIZES[4]}px`,
47+
xl: `${FONT_SIZES[5]}px`,
48+
subheader2: `${FONT_SIZES[6]}px`,
49+
subheader: `${FONT_SIZES[7]}px`,
50+
header: `${FONT_SIZES[8]}px`
51+
};
52+
1953
const typography: Typography = {
20-
palette: {
21-
primary: PRIMARY_TEXT_COLOR,
22-
secondary: SECODARY_TEXT_COLOR,
23-
disabled: DISABLED_TEXT_COLOR,
24-
pressed: PRESSED_TEXT_COLOR
25-
}
54+
palette,
55+
lineHeights,
56+
sizes
2657
};
2758

2859
export { Typography, typography };

0 commit comments

Comments
 (0)