Docs: Tweak responsive example, add generated css (#3950)

* Tweak responsive example, add generated css

* hashed classname to avoid confusion

* improve copy

* improve padding example

docs/content/overriding-styles.mdx

@@ -36,20 +36,60 @@ This example demonstrates applying a bottom border to `Heading`, a component tha
 
 ## Responsive values
 
-Just like [values passed to system props](https://styled-system.com/responsive-styles), values in the `sx` prop can be provided as arrays to provide responsive styling.
+Values in the `sx` prop can be provided as arrays to provide responsive styling.
 
 ```jsx live
 <Box
   sx={{
-    display: ['flex', 'flex', 'block', 'block'],
+    backgroundColor: [
+      'open.emphasis', // default
+      'done.emphasis', // small       (min-width: 544px)
+      'accent.emphasis', // medium    (min-width: 768px)
+      'danger.emphasis', // large     (min-width: 1012px)
+      'attention.emphasis', // xlarge (min-width: 1280px)
+    ],
+    padding: [2, 2, 4],
+    color: 'fg.onEmphasis',
     borderRadius: 2,
-    padding: 2,
   }}
 >
-  Responsive background color
+  Resize window to see responsive background color
 </Box>
 ```
 
+This generates the following CSS:
+
+```css
+.Box-hsdYAF {
+  background-color: var(--bgColor-open-emphasis); /* default */
+  padding: 8px;
+  color: var(--fgColor-onEmphasis);
+  border-radius: 6px;
+}
+@media screen and (min-width: 544px /* small */) {
+  .Box-hsdYAF {
+    background-color: var(--bgColor-done-emphasis);
+    padding: 8px;
+  }
+}
+@media screen and (min-width: 768px /* medium */) {
+  .Box-hsdYAF {
+    background-color: var(--bgColor-accent-emphasis);
+    padding: 16px;
+  }
+}
+@media screen and (min-width: 1012px /* large */) {
+  .Box-hsdYAF {
+    background-color: var(--bgColor-danger-emphasis);
+  }
+}
+@media screen and (min-width: 1280px /* xlarge */) {
+  .Box-hsdYAF {
+    background-color: var(--bgColor-attention-emphasis);
+  }
+}
+```
+
 ## Nesting, pseudo-classes, and pseudo-elements
 
 The `sx` prop also allows for declaring styles based on media queries, pseudo-classes, and pseudo-elements. This example, though contrived, demonstrates the ability: