Skip to content

Commit

Permalink
Support for font family definitions
Browse files Browse the repository at this point in the history
Testing initial PR from Shopify#233
thinkclay committed May 10, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 1795ad2 commit ac3d0f0
Showing 7 changed files with 28 additions and 9 deletions.
2 changes: 1 addition & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -21,7 +21,7 @@
"**/*.js": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
"source.fixAll.eslint": "explicit"
},
"editor.formatOnSave": true,
"[typescriptreact]": {
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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)
3 changes: 2 additions & 1 deletion documentation/docs/fundamentals/restyle-functions.md
Original file line number Diff line number Diff line change
@@ -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

2 changes: 2 additions & 0 deletions documentation/docs/guides/dark-mode.md
Original file line number Diff line number Diff line change
@@ -38,6 +38,8 @@ const theme = createTheme({
secondaryCardText: palette.black,
},
textVariants: {
breakpoints: {},
fonts: {},
defaults: {},
body: {
fontSize: 16,
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
22 changes: 16 additions & 6 deletions src/restyleFunctions.ts
Original file line number Diff line number Diff line change
@@ -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> = {
3 changes: 3 additions & 0 deletions src/types.ts
Original file line number Diff line number Diff line change
@@ -44,6 +44,9 @@ export interface KnownBaseTheme {
zIndices?: {
[key: string]: number;
};
fonts?: {
[key: string]: string;
};
borderRadii?: {
[key: string]: number;
};

0 comments on commit ac3d0f0

Please sign in to comment.