feat(snaps): Add background color prop to Snaps UI Container component

[david0xd]

Description

This PR adds backgroundColor property to Container component.
Background colors that can be used are predefined as: default and alternative.
This PR deliberately disables the backgroundColor feature for containers used within Transaction Insights pages (Snaps).

Related issues

Fixes: MetaMask/snaps#2906
Related Snaps PR: MetaMask/snaps#2950

Manual testing steps

1. Try installing and using a Snap with confirmation window or home page, with Container in its content with backgroundColor defined (e.g. <Container backgroundColor="default">).
2. Try the same thing on transaction insights Snaps and confirm that the colors are not changing there.
3. Confirm that the colors are as expected on all pages.

Some source code used for testing:

• Source code used for confirmation content:

      return snap.request({
        method: 'snap_dialog',
        params: {
          content: (
            <Container backgroundColor="default">
              <Box>
                <Text>Testing container background.</Text>
                <Button variant="primary">Primary button</Button>
                <Button variant="destructive">Destructive button</Button>
                <Button disabled={true}>Disabled button</Button>
              </Box>
              <Footer>
                <Button>Accept</Button>
                <Button name="footer_button">Cancel</Button>
              </Footer>
            </Container>
          ),
        },
      });

Source code used for Transaction Insight content:

    return {
      content: (
        <Container backgroundColor="alternative">
          <Box>
            <Text>Testing container background on transaction insight.</Text>
            <Text>Normal transaction.</Text>
          </Box>
        </Container>
      ),
      severity: SeverityLevel.Critical,
    };

Screenshots/Recordings

Before

Note: Changing container colors was not possible before.

After

Here are some examples when colors are changed (specified as a prop on container).

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). 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.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.