[AlphaCard] Add support for responsive padding with defaults

.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();