Fix missing outline on dark-mode Card components (#785)

* fix missing focus outline on dark-mode Cards

* add changeset

* fix typo

* update snapshots

Author: joshfarrant

.changeset/thick-numbers-play.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Fixed bug in `Card` component which caused the focus outline to not display when in dark-mode

packages/react/src/Card/Card.features.stories.tsx

@@ -35,7 +35,7 @@ MinimalDark.decorators = [
 
 export const CTAText: StoryFn<typeof Card> = () => {
   return (
-    <Card ctaText="Dicover how" href="https://github.com">
+    <Card ctaText="Discover how" href="https://github.com">
       <Card.Heading>GitHub Actions cheat sheet</Card.Heading>
       <Card.Description>
         In a recent TechTarget study, 70 percent of organizations reported they had adopted DevOps.

packages/react/src/Card/Card.module.css

@@ -35,14 +35,6 @@
   background-color: var(--brand-Card-background-default);
 }
 
-.Card:focus-within {
-  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
-}
-
-.Card--variant-minimal:focus-within {
-  outline-offset: var(--base-size-16);
-}
-
 .Card:hover {
   text-decoration: none;
 }
@@ -73,6 +65,15 @@
 
 .Card__outer {
   height: 100%;
+  border-radius: var(--brand-borderRadius-large);
+}
+
+.Card__outer:focus-within {
+  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+}
+
+.Card__outer:has(.Card--variant-minimal):focus-within {
+  outline-offset: var(--base-size-16);
 }
 
 .Card--icon {
@@ -269,17 +270,21 @@
 
 .Card--skew {
   height: 100%;
-  overflow: hidden;
   border-radius: var(--brand-borderRadius-large);
 }
 
+.Card--skew:focus-within {
+  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+}
+
 .Card--skew:hover .Card__torch {
   opacity: 0.85;
 }
 
 .Card__skew-bounding {
   border-radius: var(--brand-borderRadius-large);
   position: relative;
+  overflow: hidden;
   z-index: 1;
   height: 100%;
   background-color: var(--brand-Card-background-default);