Updating design-tokens package and updating typography to use theming

MetaMask · Jun 21, 2022 · 6ca6fc2 · 6ca6fc2
1 parent 20d6ae5
commit 6ca6fc2
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/app/util/theme/index.ts b/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 => {

diff --git a/package.json b/package.json
@@ -110,9 +110,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",

diff --git a/yarn.lock b/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"