diff --git a/CHANGELOG.md b/CHANGELOG.md index 3aeb8d85..df65d18a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ 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) - 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) ## 2.4.2 - 2023-03-30 @@ -27,6 +28,7 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). - Renamed gap shorthands to be lowercase [#218](https://github.com/Shopify/restyle/pull/218) by [mlecoq](https://github.com/mlecoq) - Better TypeScript type support [#216](https://github.com/Shopify/restyle/pull/216) by [FranzMoreno](https://github.com/FranzMoreno) & [fortmarek](https://github.com/fortmarek) + ## 2.2.0 - 2023-01-24 - Upgrade React Native to 0.71 in [#207](https://github.com/Shopify/restyle/pull/207) by [mattfrances](https://github.com/mattfrances) diff --git a/documentation/docs/fundamentals/restyle-functions.md b/documentation/docs/fundamentals/restyle-functions.md index 0e0a71e3..a3aa322f 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, 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 diff --git a/documentation/docs/guides/dark-mode.md b/documentation/docs/guides/dark-mode.md index a1a0f02c..09b72c45 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: { defaults: {}, body: { diff --git a/src/restyleFunctions.ts b/src/restyleFunctions.ts index 0f698fee..bc0a5b24 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, @@ -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 = { TextStyle[Key], Theme['breakpoints'] >; +} & { + fontFamily?: ResponsiveValue< + Theme['fonts'] extends object ? keyof Theme['fonts'] : string, + Theme['breakpoints'] + >; }; export type LayoutProps = { 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; };