chore: Add color prop to container style API

Author: jkuelz

pages/container/style-custom.page.tsx

@@ -208,6 +208,32 @@ export default function CustomContainer() {
         >
           Container content
         </Container>
+
+        <Container
+          header={
+            <>
+              <Box color="inherit">{`<Box color="inherit" />`}</Box> Plain text
+            </>
+          }
+          footer={
+            <>
+              <Box color="inherit">{`<Box color="inherit" />`}</Box> Plain text
+            </>
+          }
+          style={{
+            root: {
+              background: 'light-dark(#1a1f6e, #bbc2f4)',
+              color: 'light-dark(#ffffff, #000000)',
+            },
+            content: {
+              paddingBlock: '12px',
+            },
+          }}
+        >
+          <>
+            <Box color="inherit">{`<Box color="inherit" />`}</Box> Plain text
+          </>
+        </Container>
       </SpaceBetween>
     </ScreenshotArea>
   );

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -9722,12 +9722,17 @@ Refer to the [style](/components/container/?tabId=style) tab for more details.",
                   "optional": true,
                   "type": "string",
                 },
+                {
+                  "name": "color",
+                  "optional": true,
+                  "type": "string",
+                },
               ],
               "type": "object",
             },
             "name": "root",
             "optional": true,
-            "type": "{ background?: string | undefined; borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; boxShadow?: string | undefined; }",
+            "type": "{ background?: string | undefined; borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; boxShadow?: string | undefined; color?: string | undefined; }",
           },
         ],
         "type": "object",
@@ -27202,12 +27207,17 @@ Refer to the [style](/components/tabs/?tabId=style) tab for more details.",
                         "optional": true,
                         "type": "string",
                       },
+                      {
+                        "name": "color",
+                        "optional": true,
+                        "type": "string",
+                      },
                     ],
                     "type": "object",
                   },
                   "name": "root",
                   "optional": true,
-                  "type": "{ background?: string | undefined; borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; boxShadow?: string | undefined; }",
+                  "type": "{ background?: string | undefined; borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; boxShadow?: string | undefined; color?: string | undefined; }",
                 },
               ],
               "type": "object",

src/container/interfaces.ts

@@ -131,6 +131,7 @@ export namespace ContainerProps {
       borderRadius?: string;
       borderWidth?: string;
       boxShadow?: string;
+      color?: string;
     };
     content?: {
       paddingBlock?: string;

src/container/style.tsx

@@ -14,6 +14,7 @@ export function getRootStyles(style: ContainerProps.Style | undefined) {
     borderRadius: style?.root?.borderRadius,
     borderWidth: style?.root?.borderWidth,
     boxShadow: style?.root?.boxShadow,
+    color: style?.root?.color,
   };
 }