diff --git a/package.json b/package.json index 62614f6..f4b42d7 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.1-alpha.1", + "version": "7.0.1-alpha.2", "description": "React Native themes for Brightlayer UI applications", "main": "./dist/index.js", "scripts": { diff --git a/src/index.ts b/src/index.ts index 165fbb5..6a7873d 100644 --- a/src/index.ts +++ b/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'; diff --git a/src/shared.ts b/src/shared.ts index 1bf7345..e9ee187 100644 --- a/src/shared.ts +++ b/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 & { export const useExtendedTheme = (overrides?: $DeepPartial): ExtendedTheme => useTheme(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}`); + } +};