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.

[metamaskbot]

Builds ready [0f5f5d3]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1675 ± 43 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1500	1841	1685	99	48
		domContentLoaded	1487	1793	1650	89	43
		load	1549	1837	1675	89	43
		domInteractive	24	172	56	43	21
		backgroundConnect	9	97	28	24	12
		firstReactRender	16	101	48	34	16
		getState	5	66	19	21	10
		initialActions	0	1	0	0	0
		loadScripts	1115	1370	1236	73	35
		setupStore	6	73	15	18	9
		uiStartup	1747	2472	2035	231	111

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 376 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[metamaskbot]

Builds ready [fdf9081]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1629 ± 43 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1525	1849	1636	95	46
		domContentLoaded	1481	1789	1604	88	42
		load	1524	1807	1629	89	43
		domInteractive	24	218	52	46	22
		backgroundConnect	9	85	26	21	10
		firstReactRender	16	91	56	28	13
		getState	5	95	15	21	10
		initialActions	0	1	0	0	0
		loadScripts	1068	1378	1180	82	40
		setupStore	7	91	21	24	12
		uiStartup	1729	2365	1969	197	95

Bundle size diffs [🚀 Bundle size reduced!]

• background: 0 Bytes (0.00%)
• ui: 504 Bytes (0.01%)
• common: -4.81 KiB (-0.06%)

[metamaskbot]

Builds ready [406ca2d]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1811 ± 85 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1590	2271	1815	181	87
		domContentLoaded	1559	2249	1778	173	83
		load	1598	2274	1811	177	85
		domInteractive	27	110	44	22	11
		backgroundConnect	8	80	36	22	11
		firstReactRender	16	103	62	35	17
		getState	6	91	33	30	14
		initialActions	0	1	0	0	0
		loadScripts	1137	1732	1326	152	73
		setupStore	7	80	15	20	9
		uiStartup	1839	3173	2255	320	154

Bundle size diffs [🚀 Bundle size reduced!]

• background: 0 Bytes (0.00%)
• ui: 1.03 KiB (0.01%)
• common: -4.81 KiB (-0.06%)