diff --git a/CHANGELOG.md b/CHANGELOG.md index 311111a..b297537 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## v7.0.1 (Unreleased) + +### Fixed + +- Text variants not working correctly on Android [89](https://github.com/etn-ccis/blui-react-native-themes/issues/89). + ## v7.0.0 (January 12, 2024) ### Changed diff --git a/README.md b/README.md index a146a53..40c89b3 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,6 @@ import * as BLUIThemes from '@brightlayer-ui/react-native-themes'; ``` - ### React Native Paper Components Style Override This Document contains a set of style overrides in components around various [React Native Paper](https://callstack.github.io/react-native-paper/index.html) components. @@ -77,6 +76,20 @@ const theme = useExtendedTheme(); ``` +## Changing fontWeight of a Text Element + +When you need to change the `fontWeight` of a `Text` element in your application, it's important to note that it should be done through the `fontFamily` property rather than the `fontWeight` property. + +The `fontFamily` property allows you to specify the font and its weight. By using the appropriate font family that supports the desired weight, you can achieve the desired fontWeight effect. + +For example, if you want to set the fontWeight to "bold", you can use a font family that includes a bold variant, such as: + +```tsx + + headlineLarge + +``` + ### Upgrading from version 6 -> 7 In the version 7, the library has been updated to use [React Native Paper](https://callstack.github.io/react-native-paper/) v5, which is adopting [Material Design 3](https://m3.material.io/). The themes have now been updated to use Material Design 3 Themes. @@ -85,4 +98,4 @@ In the version 7, the library has been updated to use [React Native Paper](https ## Demo [Check it out](https://github.com/etn-ccis/blui-react-native-showcase-demo/tree/master) ---> \ No newline at end of file +--> diff --git a/package.json b/package.json index 8cee170..6e14b4c 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@brightlayer-ui/react-native-themes", "author": "Brightlayer UI ", "license": "BSD-3-Clause", - "version": "7.0.0", + "version": "7.0.1", "description": "React Native themes for Brightlayer UI applications", "main": "./dist/index.js", "scripts": { diff --git a/src/shared.ts b/src/shared.ts index 91a556c..1bf7345 100644 --- a/src/shared.ts +++ b/src/shared.ts @@ -1,103 +1,87 @@ import { Platform } from 'react-native'; import { MD3Theme, useTheme } from 'react-native-paper'; -import { MD3Type, MD3Typescale } from 'react-native-paper/lib/typescript/types'; import { $DeepPartial } from '@callstack/react-theme-provider'; export const fontConfig = { displaySmall: { fontFamily: 'OpenSans-Regular', - fontWeight: '400' as const, fontSize: 36, - lineHeight: 45, + lineHeight: 48, }, displayMedium: { fontFamily: 'OpenSans-Regular', - fontWeight: '400' as const, fontSize: 45, lineHeight: 56, }, displayLarge: { fontFamily: 'OpenSans-Regular', - fontWeight: '400' as const, - fontSize: 54, - lineHeight: 68, - letterSpacing: 1, + fontSize: 57, + lineHeight: 72, + letterSpacing: -0.25, }, headlineSmall: { fontFamily: 'OpenSans-Regular', - fontWeight: '500' as const, fontSize: 24, lineHeight: 32, }, headlineMedium: { fontFamily: 'OpenSans-Regular', - fontWeight: '500' as const, - fontSize: 27, - lineHeight: 40, + fontSize: 28, + lineHeight: 36, }, headlineLarge: { fontFamily: 'OpenSans-Regular', - fontWeight: '500' as const, fontSize: 32, lineHeight: 40, }, titleSmall: { - fontFamily: 'OpenSans-Regular', - fontWeight: '600' as const, + fontFamily: 'OpenSans-SemiBold', fontSize: 14, lineHeight: 20, letterSpacing: 0.1, }, titleMedium: { - fontFamily: 'OpenSans-Regular', - fontWeight: '600' as const, + fontFamily: 'OpenSans-SemiBold', fontSize: 16, lineHeight: 24, letterSpacing: 0.15, }, titleLarge: { fontFamily: 'OpenSans-Regular', - fontWeight: '400' as const, fontSize: 22, lineHeight: 28, }, labelSmall: { fontFamily: 'OpenSans-SemiBold', - fontWeight: '600' as const, fontSize: 11, lineHeight: 16, letterSpacing: 0.5, }, labelMedium: { fontFamily: 'OpenSans-SemiBold', - fontWeight: '600' as const, fontSize: 12, lineHeight: 16, letterSpacing: 0.2, }, labelLarge: { fontFamily: 'OpenSans-SemiBold', - fontWeight: '600' as const, fontSize: 14, lineHeight: 20, letterSpacing: 0.1, }, bodySmall: { fontFamily: 'OpenSans-Regular', - fontWeight: '400' as const, fontSize: 12, lineHeight: 16, }, bodyMedium: { fontFamily: 'OpenSans-Regular', - fontWeight: '400' as const, fontSize: 14, lineHeight: 20, }, bodyLarge: { fontFamily: 'OpenSans-Regular', - fontWeight: '400' as const, fontSize: 16, lineHeight: 24, letterSpacing: 0.15,