styles: add typography

Author: jamaljsr

app/src/components/common/base.tsx

@@ -1,11 +1,15 @@
 import Chevrons from 'assets/icons/chevrons.svg';
 import { styled } from 'components/theme';
 
+//
+// Misc
+//
+
 export const Background = styled.div`
   min-height: 100vh;
   color: ${props => props.theme.colors.white};
   background-color: ${props => props.theme.colors.blue};
-  font-family: ${props => props.theme.fonts.regular};
+  font-family: ${props => props.theme.fonts.open.regular};
   font-size: ${props => props.theme.sizes.m};
 `;
 
@@ -20,6 +24,10 @@ export const Pill = styled.span`
   border-radius: 40px;
 `;
 
+//
+// Button
+//
+
 interface ButtonProps {
   primary?: boolean;
   ghost?: boolean;
@@ -53,6 +61,10 @@ export const Button = styled.button<ButtonProps>`
   }
 `;
 
+//
+// Radio Button
+//
+
 interface RadioButtonProps {
   checked?: boolean;
 }
@@ -70,6 +82,10 @@ export const RadioButton = styled.span<RadioButtonProps>`
   }
 `;
 
+//
+// List
+//
+
 /**
  * the react-virtualized list doesn't play nice with the bootstrap row -15px
  * margin. We need to manually offset the container and remove the
@@ -87,6 +103,10 @@ export const ListContainer = styled.div`
   }
 `;
 
+//
+// Range
+//
+
 /**
  * the input[type=range] element. Vendor-specific rules for pseudo
  * elements cannot be mixed. As such, there are no shared styles for focus or

app/src/components/common/text.tsx

@@ -4,9 +4,46 @@ interface BlockProps {
   block?: boolean;
 }
 
+export const HeaderOne = styled.h1`
+  font-family: ${props => props.theme.fonts.work.medium};
+  font-size: ${props => props.theme.sizes.xxl};
+  line-height: 52px;
+`;
+
+export const HeaderTwo = styled.h2`
+  font-family: ${props => props.theme.fonts.open.regular};
+  font-size: ${props => props.theme.sizes.m};
+  line-height: 26px;
+`;
+
+export const HeaderThree = styled.h3`
+  font-family: ${props => props.theme.fonts.open.regular};
+  font-size: ${props => props.theme.sizes.l};
+  line-height: 30px;
+  letter-spacing: 2.7px;
+  text-transform: uppercase;
+`;
+
+export const HeaderFour = styled.h4`
+  font-family: ${props => props.theme.fonts.open.semiBold};
+  font-size: ${props => props.theme.sizes.s};
+  line-height: 20px;
+  text-transform: uppercase;
+`;
+
+export const Small = styled.p`
+  font-size: ${props => props.theme.sizes.s};
+  line-height: 19px;
+`;
+
+export const Jumbo = styled.span`
+  font-size: ${props => props.theme.sizes.xl};
+  line-height: 38px;
+`;
+
 export const Title = styled.div`
   font-size: ${props => props.theme.sizes.s};
-  font-family: ${props => props.theme.fonts.semiBold};
+  font-family: ${props => props.theme.fonts.open.semiBold};
   text-transform: uppercase;
   letter-spacing: 0;
   line-height: 19px;
@@ -32,7 +69,7 @@ export const XLargeText = styled.span<BlockProps>`
 `;
 
 export const PageTitle = styled.h2`
-  font-family: ${props => props.theme.fonts.light};
+  font-family: ${props => props.theme.fonts.open.light};
   font-size: ${props => props.theme.sizes.l};
   text-align: center;
   text-transform: uppercase;
@@ -41,6 +78,6 @@ export const PageTitle = styled.h2`
 `;
 
 export const H3Text = styled.h3`
-  font-family: ${props => props.theme.fonts.bold};
+  font-family: ${props => props.theme.fonts.open.bold};
   font-size: ${props => props.theme.sizes.m};
 `;

app/src/components/theme.tsx

@@ -1,21 +1,28 @@
 import React from 'react';
-
 import emotionStyled, { CreateStyled } from '@emotion/styled/macro';
 import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
 
 export interface Theme {
   fonts: {
-    light: string;
-    regular: string;
-    semiBold: string;
-    bold: string;
-    extraBold: string;
+    open: {
+      light: string;
+      regular: string;
+      semiBold: string;
+      bold: string;
+      extraBold: string;
+    };
+    work: {
+      light: string;
+      medium: string;
+      semiBold: string;
+    };
   };
   sizes: {
     s: string;
     m: string;
     l: string;
     xl: string;
+    xxl: string;
   };
   colors: {
     blue: string;
@@ -35,17 +42,25 @@ export interface Theme {
 
 const theme: Theme = {
   fonts: {
-    light: "'OpenSans Light'",
-    regular: "'OpenSans Regular'",
-    semiBold: "'OpenSans SemiBold'",
-    bold: "'OpenSans Bold'",
-    extraBold: "'OpenSans ExtraBold'",
+    open: {
+      light: "'OpenSans Light'",
+      regular: "'OpenSans Regular'",
+      semiBold: "'OpenSans SemiBold'",
+      bold: "'OpenSans Bold'",
+      extraBold: "'OpenSans ExtraBold'",
+    },
+    work: {
+      light: "'WorkSans Light'",
+      medium: "'WorkSans Medium'",
+      semiBold: "'WorkSans SemiBold'",
+    },
   },
   sizes: {
     s: '14px',
     m: '18px',
     l: '22px',
     xl: '27px',
+    xxl: '45px',
   },
   colors: {
     blue: '#252f4a',