[Themes] Align Card content with equivalent Inset padding

apps/playground/app/(themeable)/test/card-inset-padding/page.tsx

@@ -0,0 +1,30 @@
+import { Box, Card, Container, Grid, Inset, Text } from '@radix-ui/themes';
+
+const sizes = ['1', '2', '3', '4', '5'] as const;
+const padding = ['3', '4', '5', '6', '8'] as const;
+const variants = ['surface', 'classic', 'ghost'] as const;
+
+export default function Test() {
+  return (
+    <Container p="8">
+      <Grid columns="3" gap="8">
+        {variants.flatMap((variant) =>
+          sizes.map((size, index) => (
+            <Card key={`${variant}-${size}`} variant={variant} size={size}>
+              <Text as="div" data-testid={`${variant}-${size}-body`}>
+                {variant}, size {size}
+              </Text>
+              <Inset side="bottom" mt="3" style={{ background: 'var(--gray-a3)' }}>
+                <Box p={padding[index]}>
+                  <Text as="div" data-testid={`${variant}-${size}-panel`}>
+                    Matching padding
+                  </Text>
+                </Box>
+              </Inset>
+            </Card>
+          ))
+        )}
+      </Grid>
+    </Container>
+  );
+}

apps/playground/tests/card-inset-padding.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test';
+
+test('Card content aligns with an Inset using equivalent padding', async ({ page }) => {
+  await page.goto('/test/card-inset-padding');
+
+  for (const variant of ['surface', 'classic', 'ghost']) {
+    for (const size of ['1', '2', '3', '4', '5']) {
+      const body = await page.getByTestId(`${variant}-${size}-body`).boundingBox();
+      const panel = await page.getByTestId(`${variant}-${size}-panel`).boundingBox();
+      expect(body).not.toBeNull();
+      expect(panel).not.toBeNull();
+      expect(panel!.x, `${variant} size ${size}: left alignment`).toBeCloseTo(body!.x, 1);
+      expect(panel!.width, `${variant} size ${size}: right alignment`).toBeCloseTo(body!.width, 1);
+    }
+  }
+});

packages/radix-ui-themes/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## 3.4.0
 
+- Account for the visual border in `Card` padding so content aligns with an `Inset` using equivalent padding.
 - Expand the prop type for `Select`'s `placeholder` prop to accept any `ReactNode` ([#693](https://github.com/radix-ui/themes/pull/693))
 - Add `ghost-offset` variant to `Button`, `IconButton` and `SelectTrigger` components ([#546](https://github.com/radix-ui/themes/pull/546))
 - Fix broken loading state for `Button` and `IconButton` components using `asChild` ([#752](https://github.com/radix-ui/themes/pull/752))

packages/radix-ui-themes/src/components/card.css

@@ -5,10 +5,10 @@
 /* Make sure these tags are wrapped in `:where()` for 0 specificity. */
 
 .rt-Card {
-  --base-card-padding-top: var(--card-padding);
-  --base-card-padding-right: var(--card-padding);
-  --base-card-padding-bottom: var(--card-padding);
-  --base-card-padding-left: var(--card-padding);
+  --base-card-padding-top: calc(var(--card-padding) + var(--card-border-width));
+  --base-card-padding-right: calc(var(--card-padding) + var(--card-border-width));
+  --base-card-padding-bottom: calc(var(--card-padding) + var(--card-border-width));
+  --base-card-padding-left: calc(var(--card-padding) + var(--card-border-width));
   --base-card-border-radius: var(--card-border-radius);
   --base-card-border-width: var(--card-border-width);