Merge 5c37aa8 into 37cc019

hashicorp · Aug 4, 2023 · 63999eb · 63999eb
2 parents 37cc019 + 5c37aa8
commit 63999eb
Show file tree

Hide file tree

Showing 2 changed files with 21 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,22 @@
   }
 
   &.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);
+    }
+
+    & .thumbnail {
+      border-bottom: 0;
     }
   }
 }