Adds typography sizes

theme/typography.ts

@@ -1,5 +1,9 @@
 import { ColorStates } from "./constants";
 
+interface Measurements {
+  [key: string]: string;
+}
+
 interface TextPalette extends ColorStates {
   primary: string;
   secondary: string;
@@ -9,20 +13,47 @@ interface TextPalette extends ColorStates {
 
 interface Typography {
   palette: TextPalette;
+  lineHeights: Measurements;
+  sizes: Measurements;
 }
 
+const FONT_SIZES = [12, 14, 16, 20, 24, 30, 36, 48, 60];
 const PRIMARY_TEXT_COLOR = "";
 const SECODARY_TEXT_COLOR = "";
 const PRESSED_TEXT_COLOR = "";
 const DISABLED_TEXT_COLOR = "";
 
+const palette: TextPalette = {
+  primary: PRIMARY_TEXT_COLOR,
+  secondary: SECODARY_TEXT_COLOR,
+  disabled: DISABLED_TEXT_COLOR,
+  pressed: PRESSED_TEXT_COLOR
+};
+
+const lineHeights: Measurements = {
+  xs: "19px",
+  sm: "23px",
+  rg: "26px",
+  md: "32px",
+  lg: "39px",
+  xl: "49px"
+};
+const sizes: Measurements = {
+  xs: `${FONT_SIZES[0]}px`,
+  sm: `${FONT_SIZES[1]}px`,
+  rg: `${FONT_SIZES[2]}px`,
+  md: `${FONT_SIZES[3]}px`,
+  lg: `${FONT_SIZES[4]}px`,
+  xl: `${FONT_SIZES[5]}px`,
+  subheader2: `${FONT_SIZES[6]}px`,
+  subheader: `${FONT_SIZES[7]}px`,
+  header: `${FONT_SIZES[8]}px`
+};
+
 const typography: Typography = {
-  palette: {
-    primary: PRIMARY_TEXT_COLOR,
-    secondary: SECODARY_TEXT_COLOR,
-    disabled: DISABLED_TEXT_COLOR,
-    pressed: PRESSED_TEXT_COLOR
-  }
+  palette,
+  lineHeights,
+  sizes
 };
 
 export { Typography, typography };