style(glossary): dark mode (#599)

* style(glossary): dark mode * fix(glossaryitem): actually apply styles
readmeio · Oct 20, 2022 · 6d9e7eb · 6d9e7eb
1 parent 3171fcb
commit 6d9e7eb
Showing 1 changed file with 31 additions and 5 deletions.
diff --git a/components/GlossaryItem/style.scss b/components/GlossaryItem/style.scss
@@ -9,16 +9,42 @@
   }
 
   &-tooltip-content {
-    background-color: #fff;
-    border: 1px solid #e2e3e3;
-    border-radius: 5px;
-    box-shadow: 0 1px 3px -1px #e2e3e3;
+    --GlossaryItem-bg: var(--color-bg-page, var(--white));
+    --GlossaryItem-color: var(--color-text-default, var(--gray20));
+    --GlossaryItem-shadow: var(--box-shadow-menu-light, 0 5px 10px rgba(0, 0, 0, .05),
+      0 2px 6px rgba(0, 0, 0, .025),
+      0 1px 3px rgba(0, 0, 0, .025));
+
+    /* what the dark-mode mixin does in the readme project */
+    [data-color-mode='dark'] & {
+      --GlossaryItem-bg: var(--gray15);
+      --GlossaryItem-color: var(--color-text-default, var(--white));
+      --GlossaryItem-shadow: var(--box-shadow-menu-dark, 0 1px 3px rgba(0, 0, 0, 0.025),
+        0 2px 6px rgba(0, 0, 0, 0.025),
+        0 5px 10px rgba(0, 0, 0, 0.05))
+    }
+
+    @media (prefers-color-scheme: dark) {
+      [data-color-mode='auto'] & {
+        --GlossaryItem-bg: var(--Tooltip-bg, var(--gray0));
+        --GlossaryItem-color: var(--color-text-default, var(--white));
+        --GlossaryItem-shadow: var(--box-shadow-menu-dark, 0 1px 3px rgba(0, 0, 0, 0.025),
+          0 2px 6px rgba(0, 0, 0, 0.025),
+          0 5px 10px rgba(0, 0, 0, 0.05))
+      }
+    }
+
+    background-color: var(--GlossaryItem-bg);
+    border: 1px solid #{var(--color-border-default, rgba(black, 0.1))};
+    border-radius: var(--border-radius);
+    box-shadow: var(--GlossaryItem-shadow);
+    color: var(--GlossaryItem-color);
     font-size: 15px;
     font-weight: 400;
     line-height: 1.5;
     padding: 15px;
     text-align: left;
-    width: 350px; 
+    width: 350px;
   }
 
   &-term {