feat: implemented typography hook

Author: computools-anastasiia-nahaiska

src/index.tsx

@@ -28,5 +28,10 @@ export {
   type SurfaceContainerThemeBlock,
 } from './theme/theme.types';
 export {useTheme} from './theme/useTheme.hook';
-export {buildThemesFromColors} from './theme/theme';
-export {LightTheme, DarkTheme, ThemeContainer, defaultThemeColors, type ThemeContainerProps} from './theme/Theme.context';
+export {LightTheme, DarkTheme, defaultThemeColors, buildThemesFromColors} from './theme/build-theme';
+
+export {materialTypography} from './typography/typography.styles';
+export {useTypography} from './typography/useTypography.component';
+export {type MaterialTypography} from './typography/typography.types';
+
+export {type MaterialComponentsProviderProps, MaterialComponentsProvider} from './provider/MaterialComponents.context';

src/typography/typography.styles.ts

@@ -0,0 +1,60 @@
+import {StyleSheet} from 'react-native';
+
+import {type MaterialTypography} from './typography.types';
+
+export const materialTypography = StyleSheet.create<MaterialTypography>({
+  displayLarge: {
+    fontSize: 57,
+    letterSpacing: -0.25,
+  },
+  displayMedium: {
+    fontSize: 45,
+  },
+  displaySmall: {
+    fontSize: 36,
+  },
+  headlineLarge: {
+    fontSize: 32,
+  },
+  headlineMedium: {
+    fontSize: 28,
+  },
+  headlineSmall: {
+    fontSize: 24,
+  },
+  titleLarge: {
+    fontSize: 22,
+  },
+  titleMedium: {
+    fontSize: 16,
+    letterSpacing: 0.15,
+  },
+  titleSmall: {
+    fontSize: 14,
+    letterSpacing: 0.1,
+  },
+  labelLarge: {
+    fontSize: 14,
+    letterSpacing: 0.1,
+  },
+  labelMedium: {
+    fontSize: 12,
+    letterSpacing: 0.5,
+  },
+  labelSmall: {
+    fontSize: 11,
+    letterSpacing: 0.5,
+  },
+  bodyLarge: {
+    fontSize: 16,
+    letterSpacing: 0.5,
+  },
+  bodyMedium: {
+    fontSize: 14,
+    letterSpacing: 0.25,
+  },
+  bodySmall: {
+    fontSize: 12,
+    letterSpacing: 0.4,
+  },
+});

src/typography/typography.types.ts

@@ -0,0 +1,19 @@
+import type {TextStyle} from 'react-native';
+
+export interface MaterialTypography {
+  displayLarge: TextStyle;
+  displayMedium: TextStyle;
+  displaySmall: TextStyle;
+  headlineLarge: TextStyle;
+  headlineMedium: TextStyle;
+  headlineSmall: TextStyle;
+  titleLarge: TextStyle;
+  titleMedium: TextStyle;
+  titleSmall: TextStyle;
+  labelLarge: TextStyle;
+  labelMedium: TextStyle;
+  labelSmall: TextStyle;
+  bodyLarge: TextStyle;
+  bodyMedium: TextStyle;
+  bodySmall: TextStyle;
+}

src/typography/useTypography.component.tsx

@@ -0,0 +1,9 @@
+import {useContext} from 'react';
+
+import {MaterialComponentsContext} from '../provider/MaterialComponents.context';
+
+export const useTypography = () => {
+  const {typography} = useContext(MaterialComponentsContext);
+
+  return typography;
+};