fix(card): add border radius to slotted content to match parent card (#5796)

* fix(card): add border radius to slotted content to match parent card

Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com>

* fix(card): scope border-radius change to small quiet only

* chore(card): update golden hash

---------

Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com>

Author: cdransf

.circleci/config.yml

@@ -22,7 +22,7 @@ parameters:
     # 3. Commit this change to the PR branch where the changes exist.
     current_golden_images_hash:
         type: string
-        default: fb61509de41ae6a2cd09fbcf661e20b9f270450b
+        default: 1bd7e9973de8f318233aa41b5b8a97a2956cd44d
     wireit_cache_name:
         type: string
         default: wireit

packages/card/src/card.css

@@ -60,6 +60,10 @@ slot[name="description"] {
     height: 100%;
 }
 
+:host([variant="quiet"][size="s"]) #preview ::slotted(*) {
+    border-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-focus-indicator-thickness));
+}
+
 :host([horizontal]) #preview {
     width: auto;
 }
@@ -97,23 +101,12 @@ sp-popover {
     pointer-events: none;
 }
 
-:host([variant='quiet']:focus) #preview:after {
-    border: var(
-            --mod-card-focus-indicator-width,
-            var(--spectrum-card-focus-indicator-width)
-        )
-        solid
-        var(
-            --mod-card-focus-indicator-color,
-            var(--spectrum-card-focus-indicator-color)
-        );
+:host([variant="quiet"]:focus) #preview:after {
+    border: var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) solid var(--mod-card-focus-indicator-color, var(--spectrum-card-focus-indicator-color));
 }
 
-:host([variant='quiet'][selected]:focus) #preview {
-    border-width: var(
-        --mod-card-focus-indicator-width,
-        var(--spectrum-card-focus-indicator-width)
-    );
+:host([variant="quiet"][selected]:focus) #preview {
+    border-width: var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width));
 }
 
 /* This ensures that the checkbox is tabbable when the card toggles but is not itself focusable */