feat: Dark theme support for modals (#329)

Ref #325 Co-authored-by: dequejosie <[email protected]>
dequelabs · Sep 20, 2021 · 5aade53 · 5aade53
1 parent d331084
commit 5aade53
Showing 1 changed file with 46 additions and 0 deletions.
diff --git a/packages/styles/dialog.css b/packages/styles/dialog.css
@@ -138,3 +138,49 @@
   justify-content: center;
   border-top: none;
 }
+
+/* Dark Theme */
+
+.cauldron--theme-dark .Dialog__inner {
+  background-color: var(--accent-medium);
+  color: var(--white);
+  border: 1px solid var(--gray-70);
+}
+
+.cauldron--theme-dark .Dialog__header {
+  border-bottom: 1px solid var(--gray-70);
+}
+
+.cauldron--theme-dark .Dialog__footer {
+  border-top: 1px solid var(--gray-70);
+}
+
+.cauldron--theme-dark .Dialog__header,
+.cauldron--theme-dark .Dialog__footer {
+  background-color: var(--accent-dark);
+  color: var(--gray-20);
+}
+
+.cauldron--theme-dark .Dialog__close {
+  color: var(--gray-20);
+}
+
+.cauldron--theme-dark .Dialog__heading:focus,
+.cauldron--theme-dark .Dialog__close:focus,
+.cauldron--theme-dark .Dialog__close:hover {
+  border-bottom-color: #fff;
+}
+
+.cauldron--theme-dark .Modal--info .Dialog__header,
+.cauldron--theme-dark .Modal--info .Dialog__content,
+.cauldron--theme-dark .Modal--info .Dialog__footer {
+  background-color: var(--accent-medium);
+}
+
+.cauldron--theme-dark .Modal--info .Dialog__header {
+  border-bottom: none;
+}
+
+.cauldron--theme-dark .Modal--info .Dialog__footer {
+  border-top: none;
+}