Merge pull request #90 from etn-ccis/fix/android-text-variant

Fix - Text variants not working correctly on Android
etn-ccis · Apr 1, 2024 · bca457e · bca457e
2 parents 9cda1ff + ba1becb
commit bca457e
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 27 deletions.
diff --git 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
@@ -55,7 +55,6 @@ import * as BLUIThemes from '@brightlayer-ui/react-native-themes';
 </ThemeProvider>
 ```
 
-
 ### 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();
 </Button>
 ```
 
+## 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
+<Text variant={'headlineLarge'} style={{ fontFamily: 'OpenSans-Bold' }}>
+    headlineLarge
+</Text>
+```
+
 ### 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)
--->
+-->
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
     "name": "@brightlayer-ui/react-native-themes",
     "author": "Brightlayer UI <[email protected]>",
     "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
@@ -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,