chore: upgrading to design tokens v5.0.0 (#13157)

## **Description** This PR upgrades the design tokens package to version [5.0.0](https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-tokens/CHANGELOG.md#500), which includes a [darker dark mode](https://consensys.slack.com/archives/C0354T27M5M/p1733773788467689) and fixes type definitions unintentionally broken in version `4.2.0`. - Ensures compatibility with the latest design tokens and aligns colors with the [extension](MetaMask/metamask-extension#29117) and [portfolio](consensys-vertical-apps/metamask-portfolio#1434). - Updates snapshots to reflect new color changes and somewhat unfortunately just case changing of the hex values to uppercase. - Simplifies type imports, replacing deep linking with a cleaner format. ## **Related issues** Fixes: #13107 ## **Manual testing steps** This pull request updates a lot of snapshots so an effective way to review is to filter out snapshots from *Files changed* view and: 1. Ensure correct design tokens version 5.0.0 has been updated in the `package.json` and `yarn.lock` 2. Ensure all types have been updated to be imported `from '@metamask/design-tokens'` To review color updates 1. Pull the branch and install dependencies. 2. Navigate around the app in both light and especially dark mode 3. Check UI doesn't have any color abnormalities ## **Screenshots/Recordings**  ### **Before** https://github.com/user-attachments/assets/0bcd3dee-cac8-4fea-9dfc-d5e28eda854c ### **After** https://github.com/user-attachments/assets/5e63fc35-4c63-4a12-9c9f-a6df730d1290 Checking no deep linked type imports remain by searching `from '@metamask/design-tokens/` to ensure all imports are correct ![Screenshot 2025-01-23 at 1 20 09 PM](https://github.com/user-attachments/assets/5e047756-a407-4139-8710-03a2a682225a) ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability. - [x] I’ve included tests if applicable. - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable. - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g., pulled and built branch, ran the app, tested the code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and/or screenshots.
MetaMask · Jan 24, 2025 · 6b5e23f · 6b5e23f
1 parent 6e2d9cf
commit 6b5e23f
Show file tree

Hide file tree

Showing 189 changed files with 722 additions and 717 deletions.
diff --git a/app/component-library/base-components/TagBase/__snapshots__/TagBase.test.tsx.snap b/app/component-library/base-components/TagBase/__snapshots__/TagBase.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`TagBase should render TagBase 1`] = `
     {
       "alignSelf": "flex-start",
       "backgroundColor": "#ffffff",
-      "borderColor": "#bbc0c5",
+      "borderColor": "#848c96",
       "borderRadius": 999,
       "borderWidth": 0,
       "color": "#141618",

diff --git a/...library/components-temp/CellSelectWithMenu/__snapshots__/CellSelectWithMenu.test.tsx.snap b/...library/components-temp/CellSelectWithMenu/__snapshots__/CellSelectWithMenu.test.tsx.snap
@@ -284,7 +284,7 @@ exports[`CellSelectWithMenu should render with default settings correctly 1`] =
               style={
                 {
                   "backgroundColor": "#ffffff",
-                  "borderColor": "#bbc0c5",
+                  "borderColor": "#848c96",
                   "borderRadius": 10,
                   "borderWidth": 1,
                   "height": 24,

diff --git a/...ry/components/Badges/Badge/variants/BadgeNetwork/__snapshots__/BadgeNetwork.test.tsx.snap b/...ry/components/Badges/Badge/variants/BadgeNetwork/__snapshots__/BadgeNetwork.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`BadgeNetwork should render BadgeNetwork 1`] = `
         "height": 32,
         "justifyContent": "center",
         "overflow": "hidden",
-        "shadowColor": "#0000001a",
+        "shadowColor": "#0000001A",
         "shadowOffset": {
           "height": 2,
           "width": 0,

diff --git a/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap b/app/component-library/components/Banners/Banner/__snapshots__/Banner.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Banner should render correctly 1`] = `
 <View
   style={
     {
-      "backgroundColor": "#d738471a",
+      "backgroundColor": "#D738471A",
       "borderColor": "#d73847",
       "borderLeftWidth": 4,
       "borderRadius": 4,
@@ -81,7 +81,7 @@ exports[`Banner should render correctly with a close button 1`] = `
 <View
   style={
     {
-      "backgroundColor": "#d738471a",
+      "backgroundColor": "#D738471A",
       "borderColor": "#d73847",
       "borderLeftWidth": 4,
       "borderRadius": 4,
@@ -236,7 +236,7 @@ exports[`Banner should render correctly with a start accessory 1`] = `
 <View
   style={
     {
-      "backgroundColor": "#d738471a",
+      "backgroundColor": "#D738471A",
       "borderColor": "#d73847",
       "borderLeftWidth": 4,
       "borderRadius": 4,
@@ -316,7 +316,7 @@ exports[`Banner should render correctly with an action button 1`] = `
 <View
   style={
     {
-      "backgroundColor": "#d738471a",
+      "backgroundColor": "#D738471A",
       "borderColor": "#d73847",
       "borderLeftWidth": 4,
       "borderRadius": 4,

diff --git a/...ry/components/Banners/Banner/variants/BannerAlert/__snapshots__/BannerAlert.test.tsx.snap b/...ry/components/Banners/Banner/variants/BannerAlert/__snapshots__/BannerAlert.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`BannerAlert should render BannerAlert 1`] = `
 <View
   style={
     {
-      "backgroundColor": "#0376c91a",
+      "backgroundColor": "#0376C91A",
       "borderColor": "#0376c9",
       "borderLeftWidth": 4,
       "borderRadius": 4,

diff --git a/...ibrary/components/Banners/Banner/variants/BannerTip/__snapshots__/BannerTip.test.tsx.snap b/...ibrary/components/Banners/Banner/variants/BannerTip/__snapshots__/BannerTip.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`BannerTip should render default settings correctly 1`] = `
   style={
     {
       "backgroundColor": "#ffffff",
-      "borderColor": "#bbc0c5",
+      "borderColor": "#848c96",
       "borderRadius": 4,
       "borderWidth": 1,
       "flexDirection": "row",

diff --git a/...ts/BottomSheet/foundation/BottomSheetDialog/__snapshots__/BottomSheetDialog.test.tsx.snap b/...ts/BottomSheet/foundation/BottomSheetDialog/__snapshots__/BottomSheetDialog.test.tsx.snap
@@ -26,14 +26,14 @@ exports[`BottomSheetDialog should render correctly 1`] = `
       [
         {
           "backgroundColor": "#ffffff",
-          "borderColor": "#bbc0c566",
+          "borderColor": "#BBC0C566",
           "borderTopLeftRadius": 8,
           "borderTopRightRadius": 8,
           "borderWidth": 1,
           "maxHeight": 1333,
           "overflow": "hidden",
           "paddingBottom": 3,
-          "shadowColor": "#0000001a",
+          "shadowColor": "#0000001A",
           "shadowOffset": {
             "height": 2,
             "width": 0,
@@ -63,7 +63,7 @@ exports[`BottomSheetDialog should render correctly 1`] = `
       <View
         style={
           {
-            "backgroundColor": "#bbc0c566",
+            "backgroundColor": "#BBC0C566",
             "borderRadius": 2,
             "height": 4,
             "width": 40,

diff --git a/app/component-library/components/Cards/Card/__snapshots__/Card.test.tsx.snap b/app/component-library/components/Cards/Card/__snapshots__/Card.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Card - Snapshot should render correctly 1`] = `
   style={
     {
       "backgroundColor": "#ffffff",
-      "borderColor": "#bbc0c5",
+      "borderColor": "#848c96",
       "borderRadius": 4,
       "borderWidth": 1,
       "padding": 16,

diff --git a/app/component-library/components/Cells/Cell/__snapshots__/Cell.test.tsx.snap b/app/component-library/components/Cells/Cell/__snapshots__/Cell.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`Cell should render CellDisplay given the type Display 1`] = `
   style={
     {
       "backgroundColor": "#ffffff",
-      "borderColor": "#bbc0c5",
+      "borderColor": "#848c96",
       "borderRadius": 4,
       "borderWidth": 1,
       "padding": 16,
@@ -234,7 +234,7 @@ exports[`Cell should render CellDisplay given the type Display 1`] = `
         style={
           {
             "backgroundColor": "#ffffff",
-            "borderColor": "#bbc0c5",
+            "borderColor": "#848c96",
             "borderRadius": 10,
             "borderWidth": 1,
             "height": 24,
@@ -543,7 +543,7 @@ exports[`Cell should render CellMultiSelect given the type MultiSelect 1`] = `
             style={
               {
                 "backgroundColor": "#ffffff",
-                "borderColor": "#bbc0c5",
+                "borderColor": "#848c96",
                 "borderRadius": 10,
                 "borderWidth": 1,
                 "height": 24,
@@ -816,7 +816,7 @@ exports[`Cell should render CellSelect given the type Select 1`] = `
             style={
               {
                 "backgroundColor": "#ffffff",
-                "borderColor": "#bbc0c5",
+                "borderColor": "#848c96",
                 "borderRadius": 10,
                 "borderWidth": 1,
                 "height": 24,

diff --git a/...nt-library/components/Cells/Cell/foundation/CellBase/__snapshots__/CellBase.test.tsx.snap b/...nt-library/components/Cells/Cell/foundation/CellBase/__snapshots__/CellBase.test.tsx.snap
@@ -211,7 +211,7 @@ exports[`CellBase should render default settings correctly 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderColor": "#bbc0c5",
+          "borderColor": "#848c96",
           "borderRadius": 10,
           "borderWidth": 1,
           "height": 24,

diff --git a/...ibrary/components/Cells/Cell/variants/CellDisplay/__snapshots__/CellDisplay.test.tsx.snap b/...ibrary/components/Cells/Cell/variants/CellDisplay/__snapshots__/CellDisplay.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`CellDisplay should render default settings correctly 1`] = `
   style={
     {
       "backgroundColor": "#ffffff",
-      "borderColor": "#bbc0c5",
+      "borderColor": "#848c96",
       "borderRadius": 4,
       "borderWidth": 1,
       "padding": 16,
@@ -234,7 +234,7 @@ exports[`CellDisplay should render default settings correctly 1`] = `
         style={
           {
             "backgroundColor": "#ffffff",
-            "borderColor": "#bbc0c5",
+            "borderColor": "#848c96",
             "borderRadius": 10,
             "borderWidth": 1,
             "height": 24,

diff --git a/...omponents/Cells/Cell/variants/CellMultiSelect/__snapshots__/CellMultiSelect.test.tsx.snap b/...omponents/Cells/Cell/variants/CellMultiSelect/__snapshots__/CellMultiSelect.test.tsx.snap
@@ -278,7 +278,7 @@ exports[`CellMultiSelect should render default settings correctly 1`] = `
             style={
               {
                 "backgroundColor": "#ffffff",
-                "borderColor": "#bbc0c5",
+                "borderColor": "#848c96",
                 "borderRadius": 10,
                 "borderWidth": 1,
                 "height": 24,

diff --git a/...-library/components/Cells/Cell/variants/CellSelect/__snapshots__/CellSelect.test.tsx.snap b/...-library/components/Cells/Cell/variants/CellSelect/__snapshots__/CellSelect.test.tsx.snap
@@ -240,7 +240,7 @@ exports[`CellSelect should render default settings correctly 1`] = `
             style={
               {
                 "backgroundColor": "#ffffff",
-                "borderColor": "#bbc0c5",
+                "borderColor": "#848c96",
                 "borderRadius": 10,
                 "borderWidth": 1,
                 "height": 24,

diff --git a/app/component-library/components/Form/TextField/__snapshots__/TextField.test.tsx.snap b/app/component-library/components/Form/TextField/__snapshots__/TextField.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`TextField should render default settings correctly 1`] = `
     {
       "alignItems": "center",
       "backgroundColor": "#ffffff",
-      "borderColor": "#bbc0c5",
+      "borderColor": "#848c96",
       "borderRadius": 8,
       "borderWidth": 1,
       "flexDirection": "row",

diff --git a/...library/components/Modals/ModalConfirmation/__snapshots__/ModalConfirmation.test.tsx.snap b/...library/components/Modals/ModalConfirmation/__snapshots__/ModalConfirmation.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`ModalConfirmation should render correctly 1`] = `
     <View
       style={
         {
-          "backgroundColor": "#bbc0c566",
+          "backgroundColor": "#BBC0C566",
           "height": 1,
         }
       }

diff --git a/...ponent-library/components/Pickers/PickerAccount/__snapshots__/PickerAccount.test.tsx.snap b/...ponent-library/components/Pickers/PickerAccount/__snapshots__/PickerAccount.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`PickerAccount should render correctly 1`] = `
       {
         "alignItems": "center",
         "backgroundColor": "#ffffff",
-        "borderColor": "#bbc0c5",
+        "borderColor": "#848c96",
         "borderRadius": 4,
         "borderWidth": 0,
         "flexDirection": "row",

diff --git a/app/component-library/components/Pickers/PickerBase/__snapshots__/PickerBase.test.tsx.snap b/app/component-library/components/Pickers/PickerBase/__snapshots__/PickerBase.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`PickerBase should render correctly 1`] = `
     {
       "alignItems": "center",
       "backgroundColor": "#ffffff",
-      "borderColor": "#bbc0c5",
+      "borderColor": "#848c96",
       "borderRadius": 4,
       "borderWidth": 1,
       "flexDirection": "row",

diff --git a/app/component-library/components/RadioButton/__snapshots__/RadioButton.test.tsx.snap b/app/component-library/components/RadioButton/__snapshots__/RadioButton.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`RadioButton should render correctly 1`] = `
       {
         "alignItems": "center",
         "backgroundColor": "#ffffff",
-        "borderColor": "#bbc0c5",
+        "borderColor": "#848c96",
         "borderRadius": 99,
         "borderWidth": 2,
         "height": 20,

diff --git a/...component-library/components/Select/SelectButton/__snapshots__/SelectButton.test.tsx.snap b/...component-library/components/Select/SelectButton/__snapshots__/SelectButton.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`SelectButton should render snapshot correctly 1`] = `
     {
       "alignItems": "center",
       "backgroundColor": "#ffffff",
-      "borderColor": "#bbc0c5",
+      "borderColor": "#848c96",
       "borderRadius": 8,
       "borderWidth": 1,
       "flexDirection": "row",

diff --git a/app/component-library/components/Sheet/SheetBottom/__snapshots__/SheetBottom.test.tsx.snap b/app/component-library/components/Sheet/SheetBottom/__snapshots__/SheetBottom.test.tsx.snap
@@ -72,7 +72,7 @@ exports[`SheetBottom should render correctly on android: android 1`] = `
         style={
           {
             "alignSelf": "center",
-            "backgroundColor": "#bbc0c566",
+            "backgroundColor": "#BBC0C566",
             "borderRadius": 2,
             "height": 4,
             "marginTop": 4,
@@ -158,7 +158,7 @@ exports[`SheetBottom should render correctly on ios: ios 1`] = `
         style={
           {
             "alignSelf": "center",
-            "backgroundColor": "#bbc0c566",
+            "backgroundColor": "#BBC0C566",
             "borderRadius": 2,
             "height": 4,
             "marginTop": 4,

diff --git a/app/component-library/components/Tags/Tag/__snapshots__/Tag.test.tsx.snap b/app/component-library/components/Tags/Tag/__snapshots__/Tag.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Tag should render correctly 1`] = `
   style={
     {
       "backgroundColor": "#ffffff",
-      "borderColor": "#bbc0c5",
+      "borderColor": "#848c96",
       "borderRadius": 10,
       "borderWidth": 1,
       "height": 24,

diff --git a/app/component-library/components/Tags/TagUrl/__snapshots__/TagUrl.test.tsx.snap b/app/component-library/components/Tags/TagUrl/__snapshots__/TagUrl.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`TagUrl should render correctly 1`] = `
       "alignItems": "center",
       "alignSelf": "center",
       "backgroundColor": "#ffffff",
-      "borderColor": "#bbc0c5",
+      "borderColor": "#848c96",
       "borderRadius": 99,
       "borderWidth": 1,
       "flexDirection": "row",

diff --git a/app/components/Base/ScreenView.tsx b/app/components/Base/ScreenView.tsx
@@ -1,4 +1,4 @@
-import type { ThemeColors } from '@metamask/design-tokens/dist/types/js/themes/types';
+import type { ThemeColors } from '@metamask/design-tokens';
 import React from 'react';
 import { SafeAreaView, StyleSheet, ScrollView } from 'react-native';
 import { useTheme } from '../../util/theme';

diff --git a/app/components/UI/AccountApproval/__snapshots__/index.test.tsx.snap b/app/components/UI/AccountApproval/__snapshots__/index.test.tsx.snap
@@ -222,7 +222,7 @@ exports[`AccountApproval should render correctly 1`] = `
       style={
         {
           "alignItems": "center",
-          "borderColor": "#bbc0c5",
+          "borderColor": "#848c96",
           "borderRadius": 10,
           "borderWidth": 1,
           "flexDirection": "row",

diff --git a/app/components/UI/AccountApproval/styles.ts b/app/components/UI/AccountApproval/styles.ts
@@ -1,7 +1,6 @@
 import { StyleSheet } from 'react-native';
 import Device from '../../../util/device';
-import type { ThemeColors } from '@metamask/design-tokens/dist/types/js/themes/types';
-import type { ThemeTypography } from '@metamask/design-tokens/dist/types/js/typography';
+import type { ThemeColors, ThemeTypography } from '@metamask/design-tokens';
 
 const createStyles = (colors: ThemeColors, typography: ThemeTypography) =>
   StyleSheet.create({

diff --git a/app/components/UI/AccountFromToInfoCard/__snapshots__/AccountFromToInfoCard.test.tsx.snap b/app/components/UI/AccountFromToInfoCard/__snapshots__/AccountFromToInfoCard.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`AccountFromToInfoCard should match snapshot 1`] = `
       style={
         {
           "backgroundColor": "#ffffff",
-          "borderColor": "#bbc0c5",
+          "borderColor": "#848c96",
           "borderRadius": 4,
           "borderWidth": 1,
           "flexDirection": "row",
@@ -269,7 +269,7 @@ exports[`AccountFromToInfoCard should match snapshot 1`] = `
                       "height": 32,
                       "justifyContent": "center",
                       "overflow": "hidden",
-                      "shadowColor": "#0000001a",
+                      "shadowColor": "#0000001A",
                       "shadowOffset": {
                         "height": 2,
                         "width": 0,
@@ -433,7 +433,7 @@ exports[`AccountFromToInfoCard should match snapshot 1`] = `
             "paddingHorizontal": 10,
           },
           {
-            "borderColor": "#bbc0c5",
+            "borderColor": "#848c96",
           },
         ]
       }

diff --git a/app/components/UI/AccountInfoCard/__snapshots__/index.test.tsx.snap b/app/components/UI/AccountInfoCard/__snapshots__/index.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`AccountInfoCard should match snapshot 1`] = `
   style={
     {
       "alignItems": "center",
-      "borderColor": "#bbc0c5",
+      "borderColor": "#848c96",
       "borderRadius": 10,
       "borderWidth": 1,
       "flexDirection": "row",

diff --git a/app/components/UI/AccountOverview/__snapshots__/index.test.tsx.snap b/app/components/UI/AccountOverview/__snapshots__/index.test.tsx.snap
@@ -160,7 +160,7 @@ exports[`AccountOverview should render correctly 1`] = `
           onPress={[Function]}
           style={
             {
-              "backgroundColor": "#0376c91a",
+              "backgroundColor": "#0376C91A",
               "borderRadius": 40,
               "marginBottom": 20,
               "marginTop": 20,

diff --git a/app/components/UI/AccountRightButton/__snapshots__/index.test.tsx.snap b/app/components/UI/AccountRightButton/__snapshots__/index.test.tsx.snap
@@ -524,7 +524,7 @@ exports[`AccountRightButton should render correctly 1`] = `
                                   "height": 32,
                                   "justifyContent": "center",
                                   "overflow": "hidden",
-                                  "shadowColor": "#0000001a",
+                                  "shadowColor": "#0000001A",
                                   "shadowOffset": {
                                     "height": 2,
                                     "width": 0,
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,7 +44,7 @@ exports[`ModalConfirmation should render correctly 1`] = ` @@
         <View
           style={
             {
-              "backgroundColor": "#bbc0c566",
+              "backgroundColor": "#BBC0C566",
               "height": 1,
             }
           }
@@ Expand Down @@