Updating colors and typography to use theme objects

app/util/theme/index.ts

@@ -2,17 +2,17 @@ import React, { useContext } from 'react';
 import { useColorScheme, StatusBar, ColorSchemeName } from 'react-native';
 import { Colors, AppThemeKey, Theme } from './models';
 import { useSelector } from 'react-redux';
-import { colors as colorTheme, typography } from '@metamask/design-tokens';
+import { lightTheme, darkTheme } from '@metamask/design-tokens';
 import Device from '../device';
 
 /**
  * This is needed to make our unit tests pass since Enzyme doesn't support contextType
  * TODO: Convert classes into functional components and remove contextType
  */
 export const mockTheme = {
-  colors: colorTheme.light,
+  colors: lightTheme.colors,
   themeAppearance: 'light',
-  typography,
+  typography: lightTheme.typography,
 };
 
 export const ThemeContext = React.createContext<any>(undefined);
@@ -65,47 +65,47 @@ export const useAppTheme = (): Theme => {
   const setDarkStatusBar = () => {
     StatusBar.setBarStyle('light-content', true);
     Device.isAndroid() &&
-      StatusBar.setBackgroundColor(colorTheme.dark.background.default);
+      StatusBar.setBackgroundColor(darkTheme.colors.background.default);
   };
 
   const setLightStatusBar = () => {
     StatusBar.setBarStyle('dark-content', true);
     Device.isAndroid() &&
-      StatusBar.setBackgroundColor(colorTheme.light.background.default);
+      StatusBar.setBackgroundColor(lightTheme.colors.background.default);
   };
 
   switch (appTheme) {
     /* eslint-disable no-fallthrough */
     case AppThemeKey.os: {
       if (osThemeName === AppThemeKey.light) {
-        colors = colorTheme.light;
+        colors = lightTheme.colors;
         setLightStatusBar();
         break;
       } else if (osThemeName === AppThemeKey.dark) {
-        colors = colorTheme.dark;
+        colors = darkTheme.colors;
         setDarkStatusBar();
         break;
       } else {
         // Cover cases where OS returns undefined
-        colors = colorTheme.light;
+        colors = lightTheme.colors;
         setLightStatusBar();
       }
     }
     case AppThemeKey.light:
-      colors = colorTheme.light;
+      colors = lightTheme.colors;
       setLightStatusBar();
       break;
     case AppThemeKey.dark:
-      colors = colorTheme.dark;
+      colors = darkTheme.colors;
       setDarkStatusBar();
       break;
     default:
       // Default uses light theme
-      colors = colorTheme.light;
+      colors = lightTheme.colors;
       setLightStatusBar();
   }
 
-  return { colors, themeAppearance, typography };
+  return { colors, themeAppearance, typography: lightTheme.typography };
 };
 
 export const useAppThemeFromContext = (): Theme => {

app/util/theme/models.ts

@@ -1,15 +1,10 @@
-import { ThemeTypography } from '@metamask/design-tokens/dist/js/typography/types';
-
-// TODO: This should probably be defined from @metamask/design-token library
-export type Colors = any;
+import { Theme as DesignTokenTheme } from '@metamask/design-tokens';
 
 export enum AppThemeKey {
   os = 'os',
   light = 'light',
   dark = 'dark',
 }
-export interface Theme {
-  colors: Colors;
-  typography: ThemeTypography;
+export interface Theme extends DesignTokenTheme {
   themeAppearance: AppThemeKey.light | AppThemeKey.dark;
 }