Updating colors and typography to use theme objects (#4481)

* Updating colors and typography to use theme objects

* Updating design-tokens package and updating typography to use theming

app/util/theme/index.ts

@@ -1,18 +1,18 @@
 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 { 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);
@@ -60,48 +60,55 @@ 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);
     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;
+        typography = lightTheme.typography;
         setLightStatusBar();
         break;
       } else if (osThemeName === AppThemeKey.dark) {
-        colors = colorTheme.dark;
+        colors = darkTheme.colors;
+        typography = darkTheme.typography;
         setDarkStatusBar();
         break;
       } else {
         // Cover cases where OS returns undefined
-        colors = colorTheme.light;
+        colors = lightTheme.colors;
+        typography = lightTheme.typography;
         setLightStatusBar();
       }
     }
     case AppThemeKey.light:
-      colors = colorTheme.light;
+      colors = lightTheme.colors;
+      typography = lightTheme.typography;
       setLightStatusBar();
       break;
     case AppThemeKey.dark:
-      colors = colorTheme.dark;
+      colors = darkTheme.colors;
+      typography = darkTheme.typography;
       setDarkStatusBar();
       break;
     default:
       // Default uses light theme
-      colors = colorTheme.light;
+      colors = lightTheme.colors;
+      typography = lightTheme.typography;
       setLightStatusBar();
   }
 

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;
 }

package.json

@@ -112,9 +112,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",

yarn.lock

@@ -2395,10 +2395,10 @@
     web3 "^0.20.7"
     web3-provider-engine "^16.0.3"
 
-"@metamask/design-tokens@^1.6.5":
-  version "1.6.5"
-  resolved "https://registry.yarnpkg.com/@metamask/design-tokens/-/design-tokens-1.6.5.tgz#e585b67f73ce301e0218d98ba89e079f7e81c412"
-  integrity sha512-5eCrUHXrIivXX1xx6kwNtM9s/ejhrPYSATSniFc7YKS9z+TkCK4/n52owOBnDIbrL8W3XxQIiaaqQAM+NQad4w==
+"@metamask/design-tokens@^1.7.0":
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/@metamask/design-tokens/-/design-tokens-1.7.0.tgz#fab069c0101da9e25d35ae051df2ff6bb5ff7a38"
+  integrity sha512-ejakgcsnTlLQmMrKb8XixXgExsYuMjlv71lkqJXeT0wa2oe4skVhB2dZul7Y9W4vYvQzTkwsW2NLfaj273eeEw==
 
 "@metamask/eslint-config-typescript@^7.0.0":
   version "7.0.1"