From 1ec4a08eccb4e6933411ac88850d07759b6ad58c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ergenekon=20Yi=C4=9Fit?= <yigitergenekon@gmail.com>
Date: Tue, 21 Feb 2023 13:40:20 +0300
Subject: [PATCH] add fonts definition to theme

---
 CHANGELOG.md                                  |  2 ++
 .../docs/fundamentals/restyle-functions.md    |  3 ++-
 documentation/docs/guides/dark-mode.md        |  2 ++
 src/restyleFunctions.ts                       | 22 ++++++++++++++-----
 src/types.ts                                  |  3 +++
 5 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3c735b2d..d47f758b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,8 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## Next
 
+- Add support for defining fonts in the theme. [#232](https://github.com/Shopify/restyle/pull/232) by [ergenekonyigit](https://github.com/ergenekonyigit) & [gokselpirnal](https://github.com/gokselpirnal)
+
 ## 2.4.0 - 2023-02-21
 
 - Improve restyle performance [#220](https://github.com/Shopify/restyle/pull/220) by [fortmarek](https://github.com/fortmarek)
diff --git a/documentation/docs/fundamentals/restyle-functions.md b/documentation/docs/fundamentals/restyle-functions.md
index 26d8136a..d25f70c6 100644
--- a/documentation/docs/fundamentals/restyle-functions.md
+++ b/documentation/docs/fundamentals/restyle-functions.md
@@ -26,7 +26,8 @@ The Restyle library comes with a number of predefined Restyle functions for your
 | shadow           | shadowColor                                                                                                                                                                                                                                                                                                                                                                  | colors      |
 | textShadow       | textShadowOffset, textShadowRadius                                                                                                                                                                                                                                                                                                                                           | _none_      |
 | textShadow       | textShadowColor                                                                                                                                                                                                                                                                                                                                                              | colors      |
-| typography       | fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textDecorationLine, textDecorationStyle, textTransform                                                                                                                                                                                                                                    | _none_      |
+| typography       | fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textDecorationLine, textDecorationStyle, textTransform                                                                                                                                                                                                                                                | _none_      |
+| typography       | fontFamily                                                                                                                                                                                                                                                                                                                                                                   | fonts       |
 
 ## Custom Restyle functions
 
diff --git a/documentation/docs/guides/dark-mode.md b/documentation/docs/guides/dark-mode.md
index c7d6c5a1..b2b598d7 100644
--- a/documentation/docs/guides/dark-mode.md
+++ b/documentation/docs/guides/dark-mode.md
@@ -37,6 +37,8 @@ const theme = createTheme({
     primaryCardText: palette.white,
     secondaryCardText: palette.black,
   },
+  breakpoints: {},
+  fonts: {},
   textVariants: {
     body: {
       fontSize: 16,
diff --git a/src/restyleFunctions.ts b/src/restyleFunctions.ts
index f4589e1f..a5a37221 100644
--- a/src/restyleFunctions.ts
+++ b/src/restyleFunctions.ts
@@ -53,7 +53,6 @@ const spacingPropertiesShorthand = {
 };
 
 const typographyProperties = {
-  fontFamily: true,
   fontSize: true,
   fontStyle: true,
   fontWeight: true,
@@ -188,11 +187,17 @@ export const spacingShorthand = getKeys(spacingPropertiesShorthand).map(
   },
 );
 
-export const typography = getKeys(typographyProperties).map(property => {
-  return createRestyleFunction({
-    property,
-  });
-});
+export const typography = [
+  ...getKeys(typographyProperties).map(property => {
+    return createRestyleFunction({
+      property,
+    });
+  }),
+  createRestyleFunction({
+    property: 'fontFamily',
+    themeKey: 'fonts',
+  }),
+];
 
 export const layout = getKeys(layoutProperties).map(property => {
   return createRestyleFunction({
@@ -312,6 +317,11 @@ export type TypographyProps<Theme extends BaseTheme> = {
     TextStyle[Key],
     Theme['breakpoints']
   >;
+} & {
+  fontFamily?: ResponsiveValue<
+    Theme['fonts'] extends object ? keyof Theme['fonts'] : string,
+    Theme['breakpoints']
+  >;
 };
 
 export type LayoutProps<Theme extends BaseTheme> = {
diff --git a/src/types.ts b/src/types.ts
index 2384c9fd..5ec21e48 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -44,6 +44,9 @@ export interface KnownBaseTheme {
   zIndices?: {
     [key: string]: number;
   };
+  fonts?: {
+    [key: string]: string;
+  };
   borderRadii?: {
     [key: string]: number;
   };