Add backgroundColor property to Container component (#2950)

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.

### Examples (experiments with extension integration)

Confirmation example:
![Screenshot 2024-12-11 at 13 14
02](https://github.com/user-attachments/assets/f2b77202-d9c4-403e-87a1-ad36d44299c9)

Source code used for content:
```typescript
      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:
![Screenshot 2024-12-11 at 13 07
40](https://github.com/user-attachments/assets/b7b3a593-8407-4f92-a629-edd85c8f88dc)
Source code used for content:
```typescript
    return {
      content: (
        <Container backgroundColor="alternative">
          <Box>
            <Text>Testing container background on transaction insight.</Text>
            <Text>Normal transaction.</Text>
          </Box>
        </Container>
      ),
      severity: SeverityLevel.Critical,
    };
```

Author: david0xd

packages/examples/packages/browserify-plugin/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "VLL7J8JE/MX0j3B7FCAGtrJ/LYXYSnq88hKUr8mMfFQ=",
+    "shasum": "Hk6cbofZemMiX1hbyOek/sMo3kLlgCATBaLReHnTjys=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/browserify/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "mAFLwxqRmE5DHBRs1/nOM91YpcmeEHkyqksRrXTgjJY=",
+    "shasum": "OMGLit1mel4LuH9aYDSlSOoT7ZO6IsJXQjorv4NYgeQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snaps-sdk/src/jsx/components/Container.test.tsx

@@ -7,7 +7,7 @@ import { Text } from './Text';
 describe('Container', () => {
   it('renders a container element with a box', () => {
     const result = (
-      <Container>
+      <Container backgroundColor="alternative">
         <Box>
           <Text>Hello world!</Text>
         </Box>
@@ -18,6 +18,7 @@ describe('Container', () => {
       type: 'Container',
       key: null,
       props: {
+        backgroundColor: 'alternative',
         children: {
           type: 'Box',
           key: null,

packages/snaps-sdk/src/jsx/components/Container.ts

@@ -2,13 +2,19 @@ import type { GenericSnapElement } from '../component';
 import { createSnapComponent } from '../component';
 import type { FooterElement } from './Footer';
 
+/**
+ * Definition of container background colors.
+ */
+export type ContainerBackgroundColor = 'default' | 'alternative';
+
 /**
  * The props of the {@link Container} component.
  *
  * @property children - The Box and the Footer or the Box element.
  */
 export type ContainerProps = {
   children: [GenericSnapElement, FooterElement] | GenericSnapElement;
+  backgroundColor?: ContainerBackgroundColor | undefined;
 };
 
 const TYPE = 'Container';
@@ -17,10 +23,11 @@ const TYPE = 'Container';
  * A container component, which is used to create a container with a box and a footer.
  *
  * @param props - The props of the component.
+ * @param props.backgroundColor - The color of the background.
  * @param props.children - The Box and the Footer or the Box element.
  * @returns A container element.
  * @example
- * <Container>
+ * <Container backgroundColor="default">
  *   <Box>
  *     <Text>Hello world!</Text>
  *   </Box>

packages/snaps-sdk/src/jsx/validation.test.tsx

@@ -759,6 +759,12 @@ describe('ContainerStruct', () => {
     <Container>
       <Text>Hello world!</Text>
     </Container>,
+    <Container backgroundColor="default">
+      <Text>Hello world!</Text>
+    </Container>,
+    <Container backgroundColor="alternative">
+      <Text>Hello world!</Text>
+    </Container>,
     <Container>
       <Text>Hello world!</Text>
       <Footer>

packages/snaps-sdk/src/jsx/validation.ts

@@ -877,6 +877,9 @@ export const ContainerStruct: Describe<ContainerElement> = element(
       [GenericSnapElement, FooterElement] | GenericSnapElement,
       null
     >,
+    backgroundColor: optional(
+      nullUnion([literal('default'), literal('alternative')]),
+    ),
   },
 );