refactor: update brandColors to be imported from design system (#9875)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
This PR updates the brand color usage to be imported from the
design-tokens repo. Additionally, it updates all existing instances of
brand color usage (mainly QR codes and switches) to align with the
schema defined in the design-tokens. This change ensures that the
application consistently uses the brand colors specified by the design
system, improving maintainability and visual coherence across the
application.

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Related issues**

Fixes: #9874 

## **Manual testing steps**

1. Go to settings
2. Check out the switches
3. See white color still works

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

https://github.com/MetaMask/metamask-mobile/assets/14355083/b81a9143-cedc-440b-8dab-7f26bb3e76e2

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask 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
- [ ] 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. pull and build branch, run the
app, test 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.

app/components/UI/BasicFunctionality/BasicFunctionality.tsx

@@ -38,7 +38,7 @@ export default function BasicFunctionalityComponent({
             true: colors.primary.default,
             false: colors.border.muted,
           }}
-          thumbColor={theme.brandColors.white['000']}
+          thumbColor={theme.brandColors.white000}
           ios_backgroundColor={colors.border.muted}
         />
       </View>

app/components/UI/BasicFunctionality/__snapshots__/BasicFunctionality.test.js.snap

@@ -51,7 +51,7 @@ exports[`BasicFunctionality should render correctly 1`] = `
           },
         ]
       }
-      thumbTintColor="#FFFFFF"
+      thumbTintColor="#ffffff"
       tintColor="#D6D9DC"
       value={true}
     />

app/components/UI/CollectibleContractElement/index.js

@@ -68,7 +68,7 @@ const createStyles = (colors, brandColors) =>
       width: 32,
       height: 32,
       borderRadius: 16,
-      backgroundColor: brandColors.yellow['500'],
+      backgroundColor: brandColors.yellow500,
     },
   });
 

app/components/UI/LoginOptionsSwitch/LoginOptionsSwitch.tsx

@@ -66,7 +66,7 @@ const LoginOptionsSwitch = ({
             true: colors.primary.default,
             false: colors.border.muted,
           }}
-          thumbColor={theme.brandColors.white['000']}
+          thumbColor={theme.brandColors.white000}
           ios_backgroundColor={colors.border.muted}
           testID={LoginOptionsSwitchSelectorsIDs.BIOMETRICS_SWITCH}
         />
@@ -86,7 +86,7 @@ const LoginOptionsSwitch = ({
             true: colors.primary.default,
             false: colors.border.muted,
           }}
-          thumbColor={theme.brandColors.white['000']}
+          thumbColor={theme.brandColors.white000}
           ios_backgroundColor={colors.border.muted}
           {...generateTestId(Platform, LOGIN_WITH_REMEMBER_ME_SWITCH)}
         />

app/components/UI/PaymentRequestSuccess/index.js

@@ -154,7 +154,7 @@ const createStyles = (theme) =>
     qrCodeWrapper: {
       marginVertical: 8,
       padding: 8,
-      backgroundColor: theme.brandColors.white['000'],
+      backgroundColor: theme.brandColors.white000,
     },
   });
 

app/components/UI/QRHardware/AnimatedQRCode.tsx

@@ -20,7 +20,7 @@ const createStyles = (theme: Theme) =>
     wrapper: {
       width: 300,
       height: 300,
-      backgroundColor: theme.brandColors.white['000'],
+      backgroundColor: theme.brandColors.white000,
       alignItems: 'center',
       justifyContent: 'center',
     },

app/components/UI/QRHardware/AnimatedQRScanner.tsx

@@ -32,7 +32,7 @@ const createStyles = (theme: Theme) =>
     container: {
       width: '100%',
       height: '100%',
-      backgroundColor: theme.brandColors.black['000'],
+      backgroundColor: theme.brandColors.black000,
     },
     preview: {
       flex: 1,
@@ -57,7 +57,7 @@ const createStyles = (theme: Theme) =>
     text: {
       flex: 1,
       fontSize: 17,
-      color: theme.brandColors.white['000'],
+      color: theme.brandColors.white000,
       textAlign: 'center',
       justifyContent: 'center',
       marginTop: 100,
@@ -72,7 +72,7 @@ const createStyles = (theme: Theme) =>
     hintText: {
       width: 240,
       maxWidth: '80%',
-      color: theme.brandColors.black['000'],
+      color: theme.brandColors.black000,
       textAlign: 'center',
       fontSize: 16,
       ...fontStyles.normal,

app/components/UI/Ramp/Views/Settings/ActivationKeys.tsx

@@ -118,7 +118,7 @@ function ActivationKeys() {
                 true: colors.primary.default,
                 false: colors.border.muted,
               }}
-              thumbColor={theme.brandColors.white['000']}
+              thumbColor={theme.brandColors.white000}
               ios_backgroundColor={colors.border.muted}
               disabled={isLoadingKeys}
             />

app/components/UI/Ramp/Views/Settings/__snapshots__/Settings.test.tsx.snap

@@ -692,7 +692,7 @@ exports[`Settings Activation Keys renders correctly when is loading 1`] = `
                                             },
                                           ]
                                         }
-                                        thumbTintColor="#FFFFFF"
+                                        thumbTintColor="#ffffff"
                                         tintColor="#D6D9DC"
                                         value={true}
                                       />
@@ -878,7 +878,7 @@ exports[`Settings Activation Keys renders correctly when is loading 1`] = `
                                             },
                                           ]
                                         }
-                                        thumbTintColor="#FFFFFF"
+                                        thumbTintColor="#ffffff"
                                         tintColor="#D6D9DC"
                                         value={false}
                                       />
@@ -4227,7 +4227,7 @@ exports[`Settings renders correctly for internal builds 1`] = `
                                             },
                                           ]
                                         }
-                                        thumbTintColor="#FFFFFF"
+                                        thumbTintColor="#ffffff"
                                         tintColor="#D6D9DC"
                                         value={true}
                                       />
@@ -4413,7 +4413,7 @@ exports[`Settings renders correctly for internal builds 1`] = `
                                             },
                                           ]
                                         }
-                                        thumbTintColor="#FFFFFF"
+                                        thumbTintColor="#ffffff"
                                         tintColor="#D6D9DC"
                                         value={false}
                                       />

app/components/UI/ReceiveRequest/index.js

@@ -60,7 +60,7 @@ const createStyles = (theme) =>
     qrWrapper: {
       margin: 8,
       padding: 8,
-      backgroundColor: theme.brandColors.white['000'],
+      backgroundColor: theme.brandColors.white000,
     },
     addressWrapper: {
       flexDirection: 'row',

app/components/UI/SecurityOptionToggle/SecurityOptionToggle.tsx

@@ -53,7 +53,7 @@ const SecurityOptionToggle = ({
               true: colors.primary.default,
               false: colors.border.muted,
             }}
-            thumbColor={theme.brandColors.white['000']}
+            thumbColor={theme.brandColors.white000}
             style={styles.switch}
             ios_backgroundColor={colors.border.muted}
             disabled={disabled}

app/components/Views/AddressQRCode/index.js

@@ -44,7 +44,7 @@ const createStyles = (theme) =>
     },
     qrCode: {
       padding: 8,
-      backgroundColor: theme.brandColors.white['000'],
+      backgroundColor: theme.brandColors.white000,
     },
     addressWrapper: {
       alignItems: 'center',

app/components/Views/ConnectQRHardware/Instruction/styles.ts

@@ -50,7 +50,7 @@ export const createStyles = (theme: Theme) =>
       paddingHorizontal: '30%',
     },
     buttonText: {
-      color: theme.brandColors.white['000'],
+      color: theme.brandColors.white000,
       ...fontStyles.normal,
     },
     image: {

app/components/Views/LedgerConnect/index.tsx

@@ -107,7 +107,7 @@ const createStyles = (theme: any) =>
       marginTop: Device.getDeviceHeight() * 0.025,
     },
     loader: {
-      color: theme.brandColors.white['000'],
+      color: theme.brandColors.white000,
     },
   });
 

app/components/Views/MediaPlayer/AndroidMediaPlayer.js

@@ -121,7 +121,7 @@ const createStyles = (theme) =>
       height: 4,
       width: '100%',
       borderRadius: 2,
-      backgroundColor: theme.brandColors.white['000'],
+      backgroundColor: theme.brandColors.white000,
     },
     seekbarPermanentFill: {
       width: '100%',
@@ -137,7 +137,7 @@ const createStyles = (theme) =>
       top: 14,
       height: 14,
       width: 14,
-      backgroundColor: theme.brandColors.white['000'],
+      backgroundColor: theme.brandColors.white000,
     },
     actionButton: {
       width: 44,
@@ -150,7 +150,7 @@ const createStyles = (theme) =>
       marginHorizontal: 8,
     },
     actionButtons: {
-      color: theme.brandColors.white['000'],
+      color: theme.brandColors.white000,
     },
   });
 

app/components/Views/NetworkSelector/NetworkSelector.tsx

@@ -241,7 +241,7 @@ const NetworkSelector = () => {
           true: colors.primary.default,
           false: colors.border.muted,
         }}
-        thumbColor={theme.brandColors.white['000']}
+        thumbColor={theme.brandColors.white000}
         ios_backgroundColor={colors.border.muted}
         testID={NetworkListModalSelectorsIDs.TEST_NET_TOGGLE}
         disabled={isTestNet(providerConfig.chainId)}

app/components/Views/NetworkSelector/__snapshots__/NetworkSelector.test.tsx.snap

@@ -1115,7 +1115,7 @@ exports[`Network Selector renders correctly 1`] = `
                                     ]
                                   }
                                   testID="test-network-switch-id"
-                                  thumbTintColor="#FFFFFF"
+                                  thumbTintColor="#ffffff"
                                   tintColor="#D6D9DC"
                                   value={false}
                                 />

app/components/Views/OnboardingSuccess/DefaultSettings/__snapshots__/index.test.js.snap

@@ -93,7 +93,7 @@ exports[`DefaultSettings should render correctly 1`] = `
               },
             ]
           }
-          thumbTintColor="#FFFFFF"
+          thumbTintColor="#ffffff"
           tintColor="#D6D9DC"
           value={false}
         />

app/components/Views/QRScanner/styles.ts

@@ -5,7 +5,7 @@ const createStyles = (theme: Theme) =>
   StyleSheet.create({
     container: {
       flex: 1,
-      backgroundColor: theme.brandColors.black['000'],
+      backgroundColor: theme.brandColors.black000,
     },
     preview: {
       flex: 1,
@@ -18,7 +18,7 @@ const createStyles = (theme: Theme) =>
       marginRight: 20,
       width: 40,
       alignSelf: 'flex-end',
-      color: theme.brandColors.white['000'],
+      color: theme.brandColors.white000,
     },
     frame: {
       width: 250,
@@ -31,7 +31,7 @@ const createStyles = (theme: Theme) =>
     text: {
       flex: 1,
       fontSize: 17,
-      color: theme.brandColors.white['000'],
+      color: theme.brandColors.white000,
       textAlign: 'center',
       justifyContent: 'center',
       marginTop: 100,

app/components/Views/RevealPrivateCredential/styles.ts

@@ -101,7 +101,7 @@ export const createStyles = (theme: Theme) =>
       alignSelf: 'center',
       justifyContent: 'center',
       padding: 8,
-      backgroundColor: theme.brandColors.white['000'],
+      backgroundColor: theme.brandColors.white000,
     },
     tabUnderlineStyle: {
       height: 2,

app/components/Views/Settings/AdvancedSettings/__snapshots__/index.test.tsx.snap

@@ -238,7 +238,7 @@ exports[`AdvancedSettings should render correctly 1`] = `
                     ],
                   ]
                 }
-                thumbTintColor="#FFFFFF"
+                thumbTintColor="#ffffff"
                 tintColor="#D6D9DC"
                 value={false}
               />
@@ -342,7 +342,7 @@ exports[`AdvancedSettings should render correctly 1`] = `
                     ],
                   ]
                 }
-                thumbTintColor="#FFFFFF"
+                thumbTintColor="#ffffff"
                 tintColor="#D6D9DC"
                 value={true}
               />
@@ -447,7 +447,7 @@ exports[`AdvancedSettings should render correctly 1`] = `
                   ]
                 }
                 testID="eth-sign-switch"
-                thumbTintColor="#FFFFFF"
+                thumbTintColor="#ffffff"
                 tintColor="#D6D9DC"
                 value={false}
               />
@@ -533,7 +533,7 @@ exports[`AdvancedSettings should render correctly 1`] = `
                     ],
                   ]
                 }
-                thumbTintColor="#FFFFFF"
+                thumbTintColor="#ffffff"
                 tintColor="#D6D9DC"
                 value={false}
               />
@@ -620,7 +620,7 @@ exports[`AdvancedSettings should render correctly 1`] = `
                     ],
                   ]
                 }
-                thumbTintColor="#FFFFFF"
+                thumbTintColor="#ffffff"
                 tintColor="#D6D9DC"
                 value={true}
               />
@@ -707,7 +707,7 @@ exports[`AdvancedSettings should render correctly 1`] = `
                   ]
                 }
                 testID="show-fiat-on-testnets"
-                thumbTintColor="#FFFFFF"
+                thumbTintColor="#ffffff"
                 tintColor="#D6D9DC"
                 value={false}
               />

app/components/Views/Settings/AdvancedSettings/index.js

@@ -353,7 +353,7 @@ class AdvancedSettings extends PureComponent {
                 true: colors.primary.default,
                 false: colors.border.muted,
               }}
-              thumbColor={theme.brandColors.white['000']}
+              thumbColor={theme.brandColors.white000}
               ios_backgroundColor={colors.border.muted}
               style={styles.switch}
             />
@@ -464,7 +464,7 @@ class AdvancedSettings extends PureComponent {
                       true: colors.primary.default,
                       false: colors.border.muted,
                     }}
-                    thumbColor={theme.brandColors.white['000']}
+                    thumbColor={theme.brandColors.white000}
                     style={styles.switch}
                     ios_backgroundColor={colors.border.muted}
                     accessibilityLabel={strings(
@@ -503,7 +503,7 @@ class AdvancedSettings extends PureComponent {
                       true: colors.primary.default,
                       false: colors.border.muted,
                     }}
-                    thumbColor={theme.brandColors.white['000']}
+                    thumbColor={theme.brandColors.white000}
                     style={styles.switch}
                     ios_backgroundColor={colors.border.muted}
                   />
@@ -543,7 +543,7 @@ class AdvancedSettings extends PureComponent {
                       true: colors.primary.default,
                       false: colors.border.muted,
                     }}
-                    thumbColor={theme.brandColors.white['000']}
+                    thumbColor={theme.brandColors.white000}
                     style={styles.switch}
                     ios_backgroundColor={colors.border.muted}
                     accessibilityRole={'switch'}
@@ -582,7 +582,7 @@ class AdvancedSettings extends PureComponent {
                       true: colors.primary.default,
                       false: colors.border.muted,
                     }}
-                    thumbColor={theme.brandColors.white['000']}
+                    thumbColor={theme.brandColors.white000}
                     style={styles.switch}
                     ios_backgroundColor={colors.border.muted}
                   />
@@ -622,7 +622,7 @@ class AdvancedSettings extends PureComponent {
                       true: colors.primary.default,
                       false: colors.border.muted,
                     }}
-                    thumbColor={theme.brandColors.white['000']}
+                    thumbColor={theme.brandColors.white000}
                     style={styles.switch}
                     ios_backgroundColor={colors.border.muted}
                   />

app/components/Views/Settings/GeneralSettings/index.js

@@ -408,7 +408,7 @@ class Settings extends PureComponent {
                     true: colors.primary.default,
                     false: colors.border.muted,
                   }}
-                  thumbColor={themeTokens.brandColors.white['000']}
+                  thumbColor={themeTokens.brandColors.white000}
                   style={styles.switch}
                   ios_backgroundColor={colors.border.muted}
                 />

app/components/Views/Settings/NotificationsSettings/NotificationOptionToggle/index.tsx

@@ -93,7 +93,7 @@ const NotificationOptionToggle = ({
             true: colors.primary.default,
             false: colors.border.muted,
           }}
-          thumbColor={theme.brandColors.white['000']}
+          thumbColor={theme.brandColors.white000}
           style={styles.switch}
           ios_backgroundColor={colors.border.muted}
           disabled={disabled}