Updating design-tokens package and updating typography to use theming

app/util/theme/index.ts

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { useColorScheme, StatusBar, ColorSchemeName } from 'react-native';
-import { Colors, AppThemeKey, Theme } from './models';
+import { AppThemeKey, Theme } from './models';
 import { useSelector } from 'react-redux';
 import { lightTheme, darkTheme } from '@metamask/design-tokens';
 import Device from '../device';
@@ -60,7 +60,8 @@ export const useAppTheme = (): Theme => {
     AppThemeKey.light,
     AppThemeKey.dark,
   );
-  let colors: Colors;
+  let colors: Theme['colors'];
+  let typography: Theme['typography'];
 
   const setDarkStatusBar = () => {
     StatusBar.setBarStyle('light-content', true);
@@ -79,33 +80,39 @@ export const useAppTheme = (): Theme => {
     case AppThemeKey.os: {
       if (osThemeName === AppThemeKey.light) {
         colors = lightTheme.colors;
+        typography = lightTheme.typography;
         setLightStatusBar();
         break;
       } else if (osThemeName === AppThemeKey.dark) {
         colors = darkTheme.colors;
+        typography = darkTheme.typography;
         setDarkStatusBar();
         break;
       } else {
         // Cover cases where OS returns undefined
         colors = lightTheme.colors;
+        typography = lightTheme.typography;
         setLightStatusBar();
       }
     }
     case AppThemeKey.light:
       colors = lightTheme.colors;
+      typography = lightTheme.typography;
       setLightStatusBar();
       break;
     case AppThemeKey.dark:
       colors = darkTheme.colors;
+      typography = darkTheme.typography;
       setDarkStatusBar();
       break;
     default:
       // Default uses light theme
       colors = lightTheme.colors;
+      typography = lightTheme.typography;
       setLightStatusBar();
   }
 
-  return { colors, themeAppearance, typography: lightTheme.typography };
+  return { colors, themeAppearance, typography };
 };
 
 export const useAppThemeFromContext = (): Theme => {

package.json

@@ -109,9 +109,9 @@
     "@keystonehq/bc-ur-registry-eth": "^0.7.7",
     "@keystonehq/metamask-airgapped-keyring": "^0.3.0",
     "@keystonehq/ur-decoder": "^0.3.0",
-    "@metamask/controllers": "29.0.1",
     "@metamask/contract-metadata": "^1.35.0",
-    "@metamask/design-tokens": "^1.6.5",
+    "@metamask/controllers": "29.0.1",
+    "@metamask/design-tokens": "^1.7.0",
     "@metamask/etherscan-link": "^2.0.0",
     "@metamask/swaps-controller": "^6.6.0",
     "@ngraveio/bc-ur": "^1.1.6",