Support for font family definitions

Testing initial PR from Shopify#233

Author: thinkclay

.vscode/settings.json

@@ -21,7 +21,7 @@
     "**/*.js": true
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.formatOnSave": true,
   "[typescriptreact]": {

CHANGELOG.md

@@ -7,6 +7,9 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## Next
 
+## 2.5.0
+- 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.3 - 2023-04-18
 
 - Fixed: clean up the project configuration for RN0.71, aligning some packages to the right version [#271](https://github.com/Shopify/restyle/pull/271) by [kelset](https://github.com/kelset) & [tido64](https://github.com/tido64)

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, includeFontPadding, fontVariant, letterSpacing, lineHeight, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, textTransform, verticalAlign, writingDirection                                                                                                                          | _none_      |
+| typography       | fontSize, fontStyle, fontWeight, includeFontPadding, fontVariant, letterSpacing, lineHeight, textAlign, textAlignVertical, textDecorationColor, textDecorationLine, textDecorationStyle, textTransform, verticalAlign, writingDirection                                                                                                                                      | _none_      |
+| typography       | fontFamily                                                                                                                                                                                                                                                                                                                                                                   | fonts       |
 
 ## Custom Restyle functions
 

documentation/docs/guides/dark-mode.md

@@ -38,6 +38,8 @@ const theme = createTheme({
     secondaryCardText: palette.black,
   },
   textVariants: {
+    breakpoints: {},
+    fonts: {},
     defaults: {},
     body: {
       fontSize: 16,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/restyle",
-  "version": "2.4.3",
+  "version": "2.5.0",
   "license": "MIT",
   "description": "A system for building constraint-based UI components",
   "main": "dist/index.js",

src/restyleFunctions.ts

@@ -53,7 +53,6 @@ const spacingPropertiesShorthand = {
 };
 
 const typographyProperties = {
-  fontFamily: true,
   fontSize: true,
   fontStyle: true,
   fontWeight: true,
@@ -199,11 +198,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({
@@ -327,6 +332,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> = {

src/types.ts

@@ -44,6 +44,9 @@ export interface KnownBaseTheme {
   zIndices?: {
     [key: string]: number;
   };
+  fonts?: {
+    [key: string]: string;
+  };
   borderRadii?: {
     [key: string]: number;
   };