update(react-card): dark mode colors (#992)

* update: edit card dark mode colors

* Create dull-bottles-lay.md

* fix outline

* 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

* Update .changeset/dull-bottles-lay.md

Co-authored-by: Dylan Staley <88163+dstaley@users.noreply.github.com>

---------

Co-authored-by: Noel Quiles <3746694+EnMod@users.noreply.github.com>
Co-authored-by: Dylan Staley <88163+dstaley@users.noreply.github.com>

.changeset/dull-bottles-lay.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/react-card": minor
+---
+
+Update dark mode colors to align with HashiCorp Developer's dark palette

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,30 @@
   }
 
   &.dark {
-    --border-color: transparent;
-    --primary-text-color: var(--wpl-neutral-0);
-    --secondary-text-color: var(--wpl-neutral-400);
-    --background-color: var(--wpl-neutral-700);
+    /* 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(--wpl-neutral-600);
+      /* dark-surface-interactive-active */
+      --background-color: #1e222a;
+    }
+
+    & .contentContainer {
+      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;
     }
   }
 }