Merge pull request #94 from etn-ccis/feat/5609-add-font-family-hook

Add useFontWeight utility

package.json

@@ -2,7 +2,7 @@
     "name": "@brightlayer-ui/react-native-themes",
     "author": "Brightlayer UI <[email protected]>",
     "license": "BSD-3-Clause",
-    "version": "7.0.1-alpha.1",
+    "version": "7.0.1-alpha.2",
     "description": "React Native themes for Brightlayer UI applications",
     "main": "./dist/index.js",
     "scripts": {

src/index.ts

@@ -7,4 +7,4 @@ This code is licensed under the BSD-3 license found in the LICENSE file in the r
 **/
 export { MD3BluiLightTheme as blue } from './blueTheme';
 export { MD3BluiDarkTheme as blueDark } from './blueDarkTheme';
-export { ExtendedTheme, useExtendedTheme } from './shared';
+export { ExtendedTheme, useExtendedTheme, useFontWeight } from './shared';

src/shared.ts

@@ -6,82 +6,97 @@ import { $DeepPartial } from '@callstack/react-theme-provider';
 export const fontConfig = {
     displaySmall: {
         fontFamily: 'OpenSans-Regular',
+        fontWeight: '400' as const,
         fontSize: 36,
         lineHeight: 48,
     },
     displayMedium: {
         fontFamily: 'OpenSans-Regular',
+        fontWeight: '400' as const,
         fontSize: 45,
         lineHeight: 56,
     },
     displayLarge: {
         fontFamily: 'OpenSans-Regular',
+        fontWeight: '400' as const,
         fontSize: 57,
         lineHeight: 72,
         letterSpacing: -0.25,
     },
     headlineSmall: {
         fontFamily: 'OpenSans-Regular',
+        fontWeight: '400' as const,
         fontSize: 24,
         lineHeight: 32,
     },
     headlineMedium: {
         fontFamily: 'OpenSans-Regular',
+        fontWeight: '400' as const,
         fontSize: 28,
         lineHeight: 36,
     },
     headlineLarge: {
         fontFamily: 'OpenSans-Regular',
+        fontWeight: '400' as const,
         fontSize: 32,
         lineHeight: 40,
     },
     titleSmall: {
         fontFamily: 'OpenSans-SemiBold',
+        fontWeight: '600' as const,
         fontSize: 14,
         lineHeight: 20,
         letterSpacing: 0.1,
     },
     titleMedium: {
         fontFamily: 'OpenSans-SemiBold',
+        fontWeight: '600' as const,
         fontSize: 16,
         lineHeight: 24,
         letterSpacing: 0.15,
     },
     titleLarge: {
         fontFamily: 'OpenSans-Regular',
+        fontWeight: '600' 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,
@@ -213,3 +228,37 @@ export type ExtendedTheme = Omit<MD3Theme, 'colors'> & {
 
 export const useExtendedTheme = (overrides?: $DeepPartial<ExtendedTheme>): ExtendedTheme =>
     useTheme<ExtendedTheme>(overrides);
+
+export type bluiFontWeight = '300' | '400' | '600' | '700' | undefined;
+
+export type FontStyle = {
+    fontFamily: string;
+    fontWeight: bluiFontWeight;
+};
+
+export const useFontWeight = (weight: bluiFontWeight): FontStyle => {
+    switch (weight) {
+        case '300':
+            return {
+                fontFamily: 'OpenSans-light',
+                fontWeight: '300',
+            };
+        case '400':
+            return {
+                fontFamily: 'OpenSans-regular',
+                fontWeight: '400',
+            };
+        case '600':
+            return {
+                fontFamily: 'OpenSans-semiBold',
+                fontWeight: '600',
+            };
+        case '700':
+            return {
+                fontFamily: 'OpenSans-bold',
+                fontWeight: '700',
+            };
+        default:
+            throw new Error(`Invalid font weight: ${weight}`);
+    }
+};