add fonts to Theme (#151)

stargately · Nov 18, 2020 · 74790de · 74790de
1 parent 8fbf53d
commit 74790de
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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>;
 };