From 7e324bff3b56de3124428deabb24a345a11e4377 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Mon, 29 Jul 2019 14:07:01 -0400
Subject: [PATCH] refact: extract typography constants

---
 src/components/Markdown/styles.tsx | 12 +++++++-----
 src/design/typography.ts           | 13 +++++++++++++
 src/globalStyles.tsx               | 11 ++++++++---
 3 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 src/design/typography.ts

diff --git a/src/components/Markdown/styles.tsx b/src/components/Markdown/styles.tsx
index bf6e89e..7a62343 100644
--- a/src/components/Markdown/styles.tsx
+++ b/src/components/Markdown/styles.tsx
@@ -1,8 +1,10 @@
 import styled, { css } from "styled-components"
-
-const BASE_FONT_SIZE = 18
-const BASE_LINE_HEIGHT = 26
-const MODULAR_SCALE = 1.1487
+import {
+  BASE_FONT_SIZE,
+  BASE_LINE_HEIGHT,
+  MODULAR_SCALE,
+  fontFamily,
+} from "../../design/typography"
 
 function modularFontSize(power: number) {
   return BASE_FONT_SIZE * Math.pow(MODULAR_SCALE, power)
@@ -36,7 +38,7 @@ export const MarkdownWrapper = styled.div`
   h4,
   h5,
   h6 {
-    font-family: "Montserrat";
+    font-family: ${fontFamily.header};
     letter-spacing: -1.75px;
     margin-top: ${BASE_LINE_HEIGHT * 2}px;
     margin-bottom: ${BASE_LINE_HEIGHT}px;
diff --git a/src/design/typography.ts b/src/design/typography.ts
new file mode 100644
index 0000000..f91a1d6
--- /dev/null
+++ b/src/design/typography.ts
@@ -0,0 +1,13 @@
+const FONT_OXYGEN = "Oxygen, sans-serif"
+const FONT_MONTSERRAT = "Montserrat, sans-serif"
+
+export const BASE_FONT_SIZE = 18
+export const BASE_LINE_HEIGHT = 25
+export const MODULAR_SCALE = 1.1487
+
+export const fontFamily = {
+  header: FONT_MONTSERRAT,
+  body: FONT_OXYGEN,
+}
+
+export default fontFamily
diff --git a/src/globalStyles.tsx b/src/globalStyles.tsx
index 6470b2f..8cf7c9b 100644
--- a/src/globalStyles.tsx
+++ b/src/globalStyles.tsx
@@ -1,12 +1,17 @@
 import { createGlobalStyle } from "styled-components"
+import {
+  BASE_FONT_SIZE,
+  BASE_LINE_HEIGHT,
+  fontFamily,
+} from "./design/typography"
 
 export const GlobalStyles = createGlobalStyle`
   html {
-    font-family: Oxygen;
+    font-family: ${fontFamily.body};
   }
 
   body {
-    font-size: 18px;
-    line-height: 25px;
+    font-size: ${BASE_FONT_SIZE}px;
+    line-height: ${BASE_LINE_HEIGHT}px;
   }
 `