Add backgroundColor property to Container component

[david0xd]

This PR adds backgroundColor property to Container component.

Related task: #2906
Related extension PR: MetaMask/metamask-extension#29095

Notes

• Background colors that can be used are predefined as: default and alternative.
• Background colors are meant to mirror backgroundDefault and backgroundAlternative colors from MetaMask extension design system (https://github.com/MetaMask/metamask-extension/blob/main/ui/helpers/constants/design-system.ts#L54).
• Color names are simplified on the Snaps side to make it easier for developers to use.
• Changes to the Box element made in form of adding backgroundColor?: string | undefined; are made in order to avoid errors on extension side, because container is reusing BoxElement type instead of having its own: https://github.com/MetaMask/metamask-extension/blob/main/ui/components/app/snaps/snap-ui-renderer/components/container.ts#L13

Examples (experiments with extension integration)

Confirmation example:

Source code used for 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>
          ),
        },
      });

Transaction insight example where background color is deliberately ignored:

Source code used for content:

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

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 94.49%. Comparing base (51ab913) to head (f3306bf).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2950   +/-   ##
=======================================
  Coverage   94.49%   94.49%           
=======================================
  Files         487      487           
  Lines       10451    10451           
  Branches     1604     1604           
=======================================
  Hits         9876     9876           
  Misses        575      575           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[FrederikBolding]

I think we may want to only allow it on the Container instead of the Box? 🤔