feat: Update callouts to handle dark mode

newrelic · Jun 30, 2020 · c39153f · c39153f
1 parent 5d8f4d7
commit c39153f
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/src/components/Callouts.module.scss b/src/components/Callouts.module.scss
@@ -3,23 +3,35 @@
 .tip {
   padding: 1.25rem 0.3rem 1.25rem 1.25rem;
   margin: 1.55rem 3rem 1.55rem 1.25rem;
-  color: var(--color-neutrals-900);
+  color: var(--primary-text-color);
 
   h4 {
     font-size: 0.75rem !important;
     text-transform: uppercase;
-    color: var(--color-neutrals-800);
+    color: var(--heading-text-color);
   }
 }
 .caution {
   border-left: 4px solid var(--color-red-400);
   background: var(--color-red-100);
+
+  :global(.dark-mode) & {
+    background: var(--color-red-900);
+  }
 }
 .important {
   border-left: 4px solid var(--color-yellow-400);
   background: var(--color-yellow-100);
+
+  :global(.dark-mode) & {
+    background: var(--color-yellow-900);
+  }
 }
 .tip {
   border-left: 4px solid var(--color-green-400);
   background: var(--color-green-100);
+
+  :global(.dark-mode) & {
+    background: var(--color-green-900);
+  }
 }