From ac3d0f030e83a0f4c786fbb40fa04d62106990fb Mon Sep 17 00:00:00 2001 From: "Clayton (McIlrath) Unicorn" Date: Fri, 10 May 2024 04:45:14 -0400 Subject: [PATCH] Support for font family definitions Testing initial PR from https://github.com/Shopify/restyle/pull/233 --- .vscode/settings.json | 2 +- CHANGELOG.md | 3 +++ .../docs/fundamentals/restyle-functions.md | 3 ++- documentation/docs/guides/dark-mode.md | 2 ++ package.json | 2 +- src/restyleFunctions.ts | 22 ++++++++++++++----- src/types.ts | 3 +++ 7 files changed, 28 insertions(+), 9 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 82e8897c..048d5cf8 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -21,7 +21,7 @@ "**/*.js": true }, "editor.codeActionsOnSave": { - "source.fixAll.eslint": true + "source.fixAll.eslint": "explicit" }, "editor.formatOnSave": true, "[typescriptreact]": { diff --git a/CHANGELOG.md b/CHANGELOG.md index 8ebf5c13..f6dc0f0a 100644 --- a/CHANGELOG.md +++ b/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) 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..375e31a3 100644 --- a/documentation/docs/guides/dark-mode.md +++ b/documentation/docs/guides/dark-mode.md @@ -38,6 +38,8 @@ const theme = createTheme({ secondaryCardText: palette.black, }, textVariants: { + breakpoints: {}, + fonts: {}, defaults: {}, body: { fontSize: 16, diff --git a/package.json b/package.json index 769c508a..3d287f29 100644 --- a/package.json +++ b/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", 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; };