From 923f3b07452af8443b005d44d6c9b459943ee2cd Mon Sep 17 00:00:00 2001
From: pbortnick <pbortnick@gmail.com>
Date: Fri, 4 Aug 2023 13:05:38 -0400
Subject: [PATCH 1/4] update: edit card dark mode colors

---
 packages/card/style.module.css | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/card/style.module.css b/packages/card/style.module.css
index b7bf0b988..3d33654be 100644
--- a/packages/card/style.module.css
+++ b/packages/card/style.module.css
@@ -27,6 +27,8 @@
   &.light .contentContainer {
     box-shadow: 0 8px 12px -8px rgba(203, 203, 205, 0.4),
       0 16px 24px -16px rgba(203, 203, 205, 0.2);
+    box-shadow: 0 2px 2px 0 rgba(97, 104, 117, 0.05),
+      0 1px 1px 0 rgba(97, 104, 117, 0.05);
 
     &:hover {
       box-shadow: 0 10px 12px -8px rgba(203, 203, 205, 0.5),
@@ -35,13 +37,18 @@
   }
 
   &.dark {
-    --border-color: transparent;
-    --primary-text-color: var(--wpl-neutral-0);
-    --secondary-text-color: var(--wpl-neutral-400);
-    --background-color: var(--wpl-neutral-700);
+    --border-color: var(--dark-border-primary, rgba(178, 182, 189, 0.2));
+    --primary-text-color: var(--dark-foreground-primary, #d5d7db);
+    --secondary-text-color: var(--dark-foreground-faint, #b2b6bd);
+    --background-color: var(--dark-surface-interactive, #0d0e12);
 
     &:hover {
-      --background-color: var(--wpl-neutral-600);
+      --background-color: var(--dark-surface-interactive, #1e222a);
+    }
+
+    & .contentContainer {
+      box-shadow: 0 2px 2px 0 rgba(97, 104, 117, 0.05),
+        0 1px 1px 0 rgba(97, 104, 117, 0.05);
     }
   }
 }

From 90e6229f7034d8c91790a4f0665bb14024ffe94b Mon Sep 17 00:00:00 2001
From: "Pamela Bortnick (she/her)" <pbortnick@gmail.com>
Date: Fri, 4 Aug 2023 13:08:15 -0400
Subject: [PATCH 2/4] Create dull-bottles-lay.md

---
 .changeset/dull-bottles-lay.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/dull-bottles-lay.md

diff --git a/.changeset/dull-bottles-lay.md b/.changeset/dull-bottles-lay.md
new file mode 100644
index 000000000..caaf256de
--- /dev/null
+++ b/.changeset/dull-bottles-lay.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/react-card": minor
+---
+
+update(react-card): dark mode colors

From 5c37aa8acd5efef0d1e51930f53029c4b22263ca Mon Sep 17 00:00:00 2001
From: pbortnick <pbortnick@gmail.com>
Date: Fri, 4 Aug 2023 13:17:35 -0400
Subject: [PATCH 3/4] fix outline

---
 packages/card/style.module.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/card/style.module.css b/packages/card/style.module.css
index 3d33654be..716f764e0 100644
--- a/packages/card/style.module.css
+++ b/packages/card/style.module.css
@@ -50,6 +50,10 @@
       box-shadow: 0 2px 2px 0 rgba(97, 104, 117, 0.05),
         0 1px 1px 0 rgba(97, 104, 117, 0.05);
     }
+
+    & .thumbnail {
+      border-bottom: 0;
+    }
   }
 }
 

From 8fcb2b748948e0ad65dcebc500f5cf0851ede090 Mon Sep 17 00:00:00 2001
From: Noel Quiles <3746694+EnMod@users.noreply.github.com>
Date: Fri, 11 Aug 2023 14:10:09 -0400
Subject: [PATCH 4/4] chore: Change notation of color values

Moving away from a 'expected token as variable, value as fallback' approach,
in favor of a 'value used directly, design token in comment' approach.

Ref:
https://hashicorp.slack.com/archives/C031LA4KS4S/p1691774993436509?thread_ts=1691762754.792629&cid=C031LA4KS4S
---
 packages/card/style.module.css | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/card/style.module.css b/packages/card/style.module.css
index 716f764e0..fc06f9d24 100644
--- a/packages/card/style.module.css
+++ b/packages/card/style.module.css
@@ -37,13 +37,21 @@
   }
 
   &.dark {
-    --border-color: var(--dark-border-primary, rgba(178, 182, 189, 0.2));
-    --primary-text-color: var(--dark-foreground-primary, #d5d7db);
-    --secondary-text-color: var(--dark-foreground-faint, #b2b6bd);
-    --background-color: var(--dark-surface-interactive, #0d0e12);
+    /* dark-border-primary */
+    --border-color: rgba(178, 182, 189, 0.2);
+
+    /* dark-foreground-primary */
+    --primary-text-color: #d5d7db;
+
+    /* dark-foreground-faint */
+    --secondary-text-color: #b2b6bd;
+
+    /* dark-surface-interactive */
+    --background-color: #0d0e12;
 
     &:hover {
-      --background-color: var(--dark-surface-interactive, #1e222a);
+      /* dark-surface-interactive-active */
+      --background-color: #1e222a;
     }
 
     & .contentContainer {