From 74790de6d55ea8d8de7005f0844ba37229de1ea4 Mon Sep 17 00:00:00 2001
From: bitQ2019 <mengqiang.q@gmail.com>
Date: Wed, 18 Nov 2020 15:01:06 -0500
Subject: [PATCH] add fonts to Theme (#151)

---
 .../web-server/src/styletron-react/styled.tsx |  3 +--
 .../src/styletron-react/theme-provider.tsx    | 22 +++++++++++++++++++
 .../src/styletron-react/theme-types.ts        |  8 +++++++
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/packages/web-server/src/styletron-react/styled.tsx b/packages/web-server/src/styletron-react/styled.tsx
index 6fb308a8..94cbdecd 100644
--- a/packages/web-server/src/styletron-react/styled.tsx
+++ b/packages/web-server/src/styletron-react/styled.tsx
@@ -21,8 +21,7 @@ const wrapper: StyletronWrapper = (StyledComponent) =>
 export interface StyledFn {
   <
     C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    P extends object
+    P extends Record<string, unknown>
   >(
     component: C,
     style: (props: P & { $theme: Theme }) => StyleObject
diff --git a/packages/web-server/src/styletron-react/theme-provider.tsx b/packages/web-server/src/styletron-react/theme-provider.tsx
index 9199b046..9d25e9d5 100644
--- a/packages/web-server/src/styletron-react/theme-provider.tsx
+++ b/packages/web-server/src/styletron-react/theme-provider.tsx
@@ -33,6 +33,28 @@ export const THEME = {
     nav03: "var(--nav03)",
   },
   sizing: ["2px", "6px", "10px", "16px", "24px", "32px"],
+  fonts: [
+    {
+      fontSize: "12px",
+      lineHeight: "20px",
+    },
+    {
+      fontSize: "14px",
+      lineHeight: "22px",
+    },
+    {
+      fontSize: "16px",
+      lineHeight: "24px",
+    },
+    {
+      fontSize: "20px",
+      lineHeight: "28px",
+    },
+    {
+      fontSize: "24px",
+      lineHeight: "32px",
+    },
+  ],
 };
 
 const { Provider, Consumer } = React.createContext<Theme>(THEME);
diff --git a/packages/web-server/src/styletron-react/theme-types.ts b/packages/web-server/src/styletron-react/theme-types.ts
index 0f9fcd8e..a51c3d64 100644
--- a/packages/web-server/src/styletron-react/theme-types.ts
+++ b/packages/web-server/src/styletron-react/theme-types.ts
@@ -1,3 +1,10 @@
+type Font = {
+  fontSize: string | number;
+  lineHeight: string | number;
+  fontFamily?: string;
+  letterSpacing?: string | number;
+};
+
 export type Theme = {
   colors: {
     primary: string;
@@ -26,4 +33,5 @@ export type Theme = {
     nav03: string; //	Global footer
   };
   sizing: Array<string>;
+  fonts: Array<Font>;
 };