chore: Add color prop to container style API (#4399)

Co-authored-by: Maximilian Schoell <schomax@amazon.de>

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/__tests__/__snapshots__/styles.test.tsx.snap

@@ -128,6 +128,7 @@ exports[`getRootStyles handles all possible style configurations 1`] = `
   "borderRadius": undefined,
   "borderWidth": undefined,
   "boxShadow": undefined,
+  "color": undefined,
 }
 `;
 
@@ -138,6 +139,7 @@ exports[`getRootStyles handles all possible style configurations 2`] = `
   "borderRadius": undefined,
   "borderWidth": undefined,
   "boxShadow": undefined,
+  "color": undefined,
 }
 `;
 
@@ -148,5 +150,6 @@ exports[`getRootStyles handles all possible style configurations 3`] = `
   "borderRadius": "8px",
   "borderWidth": "1px",
   "boxShadow": "0 1px 3px rgba(0,0,0,0.1)",
+  "color": "#000000",
 }
 `;

src/container/__tests__/styles.test.tsx

@@ -13,6 +13,7 @@ const allStyles = {
     borderRadius: '8px',
     borderWidth: '1px',
     boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+    color: '#000000',
   },
   content: {
     paddingBlock: '16px',

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,
   };
 }