From d4f837e8f535f36100797e1c2072f65057b65596 Mon Sep 17 00:00:00 2001
From: Tavares Hansen <tavares.hansen321@gmail.com>
Date: Sun, 2 Aug 2020 20:45:15 -0700
Subject: [PATCH] [misc][x]: add custom font sizes

---
 components/home/Nav.tsx |  2 +-
 pages/_app.tsx          |  2 +-
 tailwind.config.js      | 10 +++++++++-
 themes/base.ts          |  5 +++++
 themes/utils.ts         |  3 +++
 5 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/components/home/Nav.tsx b/components/home/Nav.tsx
index 89f0b44a..7d8cb864 100644
--- a/components/home/Nav.tsx
+++ b/components/home/Nav.tsx
@@ -49,7 +49,7 @@ export default function Nav() {
         </a>
         <a
           href="https://github.com/datopian/portal"
-          className="inline-block text-sm px-4 py-2 leading-none border rounded text-primary bg-primary-background border-black hover:border-gray-700 hover:text-gray-700 hover:bg-white mt-4 lg:mt-0"
+          className="inline-block text-tiny px-4 py-2 leading-none border rounded text-primary bg-primary-background border-black hover:border-gray-700 hover:text-gray-700 hover:bg-white mt-4 lg:mt-0"
           target="_blank"
         >
           GitHub
diff --git a/pages/_app.tsx b/pages/_app.tsx
index dc888566..fe2dc3b1 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -4,7 +4,7 @@ import { useApollo } from '../lib/apolloClient';
 import { DEFAULT_THEME } from '../themes';
 import { applyTheme } from '../themes/utils';
 
-import './App.css';
+import '../styles/app.css';
 
 export default function MyApp({ Component, pageProps }) {
   const apolloClient = useApollo(pageProps.initialApolloState);
diff --git a/tailwind.config.js b/tailwind.config.js
index ae04177f..7e33261c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,10 @@
 module.exports = {
   theme: {
+    fontSize: {
+      tiny: 'var(--font-size-small)',
+      md: 'var(--font-size-medium)',
+      lg: 'var(--font-size-large)',
+    },
     extend: {
       colors: {
         primary: 'var(--color-primary)',
@@ -18,5 +23,8 @@ module.exports = {
   variants: {
     backgroundColor: ['active'],
   },
-  plugins: [],
+  plugins: ['font-size'],
+  corePlugins: {
+    fontSize: true,
+  },
 };
diff --git a/themes/base.ts b/themes/base.ts
index a05ba885..8fdfbe3e 100644
--- a/themes/base.ts
+++ b/themes/base.ts
@@ -5,4 +5,9 @@ export default {
   positive: '#0C0C0C',
   textPrimary: '#896A00',
   backgroundPrimary: '#FAEEC5',
+
+  // Define font size variables
+  fontSmall: '18px',
+  fontMedium: '30px',
+  fontLarge: '45px',
 };
diff --git a/themes/utils.ts b/themes/utils.ts
index 944ac5bb..d6cb1d53 100644
--- a/themes/utils.ts
+++ b/themes/utils.ts
@@ -21,6 +21,9 @@ export const mapTheme = (variables: ITheme): IMappedTheme => {
     '--color-text-primary': variables.textPrimary || '',
     '--background-primary': variables.backgroundPrimary || '',
     '--background-sec': variables.backgroundSecondary || '',
+    '--font-size-small': variables.fontSmall || '18px',
+    '--font-size-medium': variables.fontMedium || '30px',
+    '--font-size-large': variables.fontLarge || '45px',
   };
 };