fix: checkbox background color (#24262)

## **Description**

This PR updates the background color of the checkbox component from
transparent to white across the MetaMask extension. The motivation
behind this change is to enhance the visibility and contrast of the
checkbox against various backgrounds, and align it with the Figma
component

Component in Figma showing background default

![Screenshot 2024-04-26 at 8 12
45 AM](https://github.com/MetaMask/metamask-extension/assets/8112138/5dbc98da-08f8-4f23-a6f0-1441aaa617ec)


## **Related issues**

Fixes: N/A

## **Manual testing steps**

To ensure the checkbox component's background color update is correctly
implemented:
1. Navigate to Checkbox in storybook
2. Change the background color in dev tools
3. See background color has been updated

## **Screenshots/Recordings**

### **Before**


https://github.com/MetaMask/metamask-extension/assets/8112138/8e69d3cb-3742-4f49-adf8-fb932d0c3c42

### **After**


https://github.com/MetaMask/metamask-extension/assets/8112138/fd4a6c1e-840c-4416-86bd-cfb52730ad4f

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.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.
- [x] I’ve properly set the pull request status to "ready for review".

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g., pull and build branch, run the
app, visually inspect the checkbox component).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as screenshots or recordings.

This PR represents a significant improvement in the usability and
accessibility of the MetaMask extension, ensuring that all users can
easily interact with and visually distinguish the checkbox component,
regardless of the background.

ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap

@@ -66,7 +66,7 @@ exports[`Eth Sign Modal should match snapshot 1`] = `
           class="mm-checkbox__input-wrapper"
         >
           <input
-            class="mm-box mm-checkbox__input mm-box--margin-0 mm-box--margin-right-2 mm-box--display-flex mm-box--background-color-transparent mm-box--rounded-sm mm-box--border-color-border-default mm-box--border-width-2 box--border-style-solid"
+            class="mm-box mm-checkbox__input mm-box--margin-0 mm-box--margin-right-2 mm-box--display-flex mm-box--background-color-background-default mm-box--rounded-sm mm-box--border-color-border-default mm-box--border-width-2 box--border-style-solid"
             id="eth-sign-checkbox"
             title="I understand that I can lose all of my funds and NFTs if I enable eth_sign requests. "
             type="checkbox"

ui/components/component-library/checkbox/__snapshots__/checkbox.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`Checkbox should render the Checkbox without crashing 1`] = `
       class="mm-checkbox__input-wrapper"
     >
       <input
-        class="mm-box mm-checkbox__input mm-box--margin-0 mm-box--margin-right-0 mm-box--display-flex mm-box--background-color-transparent mm-box--rounded-sm mm-box--border-color-border-default mm-box--border-width-2 box--border-style-solid"
+        class="mm-box mm-checkbox__input mm-box--margin-0 mm-box--margin-right-0 mm-box--display-flex mm-box--background-color-background-default mm-box--rounded-sm mm-box--border-color-border-default mm-box--border-width-2 box--border-style-solid"
         type="checkbox"
       />
     </span>

ui/components/component-library/checkbox/checkbox.tsx

@@ -83,7 +83,7 @@ export const Checkbox: CheckboxComponent = React.forwardRef(
             backgroundColor={
               isChecked || isIndeterminate
                 ? BackgroundColor.primaryDefault
-                : BackgroundColor.transparent
+                : BackgroundColor.backgroundDefault
             }
             borderColor={
               isChecked || isIndeterminate