Merge 8fcb2b7 into 7768e02

hashicorp · Aug 11, 2023 · 759f417 · 759f417
2 parents 7768e02 + 8fcb2b7
commit 759f417
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/.changeset/dull-bottles-lay.md b/.changeset/dull-bottles-lay.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/react-card": minor
+---
+
+update(react-card): dark mode colors
diff --git 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,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;
     }
   }
 }