[AlphaCard] Add support for responsive padding with defaults (#7790)

### WHY are these changes introduced?

Resolves #7789.

### WHAT is this pull request doing?

- Adds support for responsive padding on `AlphaCard`, so it accepts
`padding="2"` or `padding={{xs: '2', sm: '3'}}`
- Updates default padding to be responsive on `AlphaCard` with `padding
= {xs: '4', md: '5'}`
- Updates style guide props for `AlphaCard`
    <details>
      <summary>AlphaCard with responsive padding</summary>
<img
src="https://user-images.githubusercontent.com/26749317/203350716-46887dc8-5a1c-4ad3-981e-76afe18fa2f6.gif"
alt="AlphaCard with responsive padding">
    </details>

### How to 🎩


[Storybook](https://5d559397bae39100201eedc1-vhhdejtdgh.chromatic.com/?path=/story/all-components-alphacard--with-responsive-padding).

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: laurkim

.changeset/purple-jeans-pretend.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': minor
+---
+
+Added support for responsive padding to `AlphaCard` and updated default padding to be responsive

polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx

@@ -51,6 +51,21 @@ export function WithBorderRadiusRoundedAbove() {
   );
 }
 
+export function WithResponsivePadding() {
+  return (
+    <AlphaCard padding={{xs: '5', sm: '6', md: '8'}} roundedAbove="sm">
+      <AlphaStack gap={{xs: '4', sm: '5'}}>
+        <Text as="h3" variant="headingMd">
+          Online store dashboard
+        </Text>
+        <Text variant="bodyMd" as="p">
+          View a summary of your online store’s performance.
+        </Text>
+      </AlphaStack>
+    </AlphaCard>
+  );
+}
+
 export function WithSubduedSection() {
   return (
     <AlphaCard roundedAbove="sm">

polaris-react/src/components/AlphaCard/AlphaCard.tsx

@@ -7,31 +7,37 @@ import type {
 import React from 'react';
 
 import {useBreakpoints} from '../../utilities/breakpoints';
+import type {ResponsiveProp} from '../../utilities/css';
 import {Box} from '../Box';
 
 type CardBackgroundColorTokenScale = Extract<
   ColorsTokenName,
   'surface' | 'surface-subdued'
 >;
 
+type Spacing = ResponsiveProp<SpacingSpaceScale>;
+
 export interface AlphaCardProps {
   children?: React.ReactNode;
   /** Background color
    * @default 'surface'
    */
   background?: CardBackgroundColorTokenScale;
   /** The spacing around the card
-   * @default '5'
+   * @default {xs: '4', sm: '5'}
+   * @example
+   * padding='4'
+   * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
    */
-  padding?: SpacingSpaceScale;
+  padding?: Spacing;
   /** Border radius value above a set breakpoint */
   roundedAbove?: BreakpointsAlias;
 }
 
 export const AlphaCard = ({
   children,
   background = 'surface',
-  padding = '5',
+  padding = {xs: '4', sm: '5'},
   roundedAbove,
 }: AlphaCardProps) => {
   const breakpoints = useBreakpoints();