fix font family and update readme

etn-ccis · Mar 28, 2024 · e7103d8 · e7103d8
1 parent 9cda1ff
commit e7103d8
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 26 deletions.
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/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,