Typo definitions

src/components/AdaptProvider.tsx

@@ -2,7 +2,8 @@ import React, { FC } from 'react'
 import { ThemeProvider, DefaultTheme } from 'styled-components'
 
 import { theme } from '../config'
-import { GlobalStyle } from './GlobalStyle'
+import GlobalStyle from './GlobalStyle'
+import Typo from './Typo'
 
 interface Props {
   theme?: DefaultTheme
@@ -17,6 +18,7 @@ const AdaptProvider: FC<Props> = ({ theme, children }) => {
     <ThemeProvider theme={theme!}>
       <>
         <GlobalStyle />
+        <Typo />
         {children}
       </>
     </ThemeProvider>

src/components/GlobalStyle.tsx

@@ -1,34 +1,23 @@
 import { createGlobalStyle } from 'styled-components'
 
-export const GlobalStyle = createGlobalStyle`
-  @import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,700&display=swap');
+const GlobalStyle = createGlobalStyle`
   
   *,
   *::before,
   *::after {
     box-sizing: inherit;
   }
 
-  h1, h2, h3, h4, h5, h6, p, button, input { 
-    font-family: 'Work Sans', sans-serif;
-    line-height: 1.15; 
-  }
-
   html {
-    line-height: 1.15; 
-    -webkit-text-size-adjust: 100%;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
 
   body {
-    font-family: 'Work Sans', sans-serif;
     overflow-x: hidden;
-    text-rendering: optimizeLegibility;
     background-color: rgb(16, 16, 28) ;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    font-variant-ligatures: no-common-ligatures;
     padding: 0;
     margin: 0;
   }
@@ -43,41 +32,16 @@ export const GlobalStyle = createGlobalStyle`
     overflow: visible; 
   }
 
-  pre {
-    font-family: monospace, monospace; 
-    font-size: 1em; 
-  }
-
   a {
     background-color: transparent;
   }
 
   abbr[title] {
     border-bottom: none;
-    text-decoration: underline; 
-    text-decoration: underline dotted; 
-  }
-
-  b,
-  strong {
-    font-weight: bolder;
-  }
-
-  code,
-  kbd,
-  samp {
-    font-family: monospace, monospace;
-    font-size: 1em; 
-  }
-
-  small {
-    font-size: 80%;
   }
 
   sub,
   sup {
-    font-size: 75%;
-    line-height: 0;
     position: relative;
     vertical-align: baseline;
   }
@@ -99,9 +63,6 @@ export const GlobalStyle = createGlobalStyle`
   optgroup,
   select,
   textarea {
-    font-family: inherit; 
-    font-size: 100%; 
-    line-height: 1.15; 
     margin: 0; 
   }
 
@@ -110,11 +71,6 @@ export const GlobalStyle = createGlobalStyle`
     overflow: visible;
   }
 
-  button,
-  select {
-    text-transform: none;
-  }
-
   button,
   [type="button"],
   [type="reset"],
@@ -180,7 +136,6 @@ export const GlobalStyle = createGlobalStyle`
 
   ::-webkit-file-upload-button {
     -webkit-appearance: button; 
-    font: inherit; 
   }
 
   details {
@@ -200,3 +155,5 @@ export const GlobalStyle = createGlobalStyle`
     display: none;
   }
 `
+
+export default GlobalStyle

src/components/Typo.tsx

@@ -0,0 +1,74 @@
+import { createGlobalStyle } from 'styled-components'
+
+const Typo = createGlobalStyle`
+  @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:500|Source+Sans+Pro:400,600,700|Work+Sans:400,500,700&display=swap');
+
+  h1, h2, h3, h4, h5, h6 { 
+    font-family: 'Work Sans', sans-serif;
+    line-height: 1.15; 
+  }
+
+  html {
+    line-height: 1.15; 
+    -webkit-text-size-adjust: 100%;
+  }
+
+  body, p, button, input, a  {
+    font-family: 'Source Sans Pro', sans-serif;
+    text-rendering: optimizeLegibility;
+  }
+
+  pre {
+    font-family: 'Source Code Pro', monospace; 
+    font-size: 1em; 
+  }
+
+  abbr[title] {
+    text-decoration: underline; 
+    text-decoration: underline dotted; 
+  }
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  code,
+  kbd,
+  samp {
+    font-family: 'Source Code Pro', monospace;
+    font-size: 1em; 
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+  }
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; 
+    font-size: 100%; 
+    line-height: 1.15; 
+  }
+
+  ::-webkit-file-upload-button {
+    font: inherit; 
+  }
+
+`
+
+export default Typo

src/components/index.ts

@@ -5,6 +5,8 @@ import Scrollable from './core/Scrollable'
 
 import AdaptProvider from './AdaptProvider'
 
+import Typo from './Typo'
+
 import { Button } from './Button'
 import { Loader } from './Loader'
 import { Tabs } from './Tabs/Tabs'
@@ -23,6 +25,7 @@ export {
   Flexible,
   Scrollable,
   AdaptProvider,
+  Typo,
   Button,
   Loader,
   Tab,

src/config.ts

@@ -1,6 +1,11 @@
 import { DefaultTheme } from 'styled-components'
 
 export const theme: DefaultTheme = {
+  fonts: {
+    heading: "'Work Sans', sans-serif",
+    body: "'Source Sans Pro', sans-serif",
+    code: "'Source Code Pro', monospace",
+  },
   button: {
     sizes: {
       sm: {

src/typings/styled.d.ts

@@ -9,6 +9,11 @@ interface Sizes {
 
 declare module 'styled-components' {
   export interface DefaultTheme {
+    fonts: {
+      heading?: string,
+      body?: string,
+      code?: string
+    }
     button: {
       sizes: Sizes
     }