From 8ad993bfc2f282ce0d6ea39a69f54e7205d954e9 Mon Sep 17 00:00:00 2001
From: vintro <vince@plasticlabs.ai>
Date: Fri, 13 Dec 2024 17:09:13 -0800
Subject: [PATCH] minor tweaks on graph, explorer, toc

---
 quartz.config.ts                       | 12 ++++++------
 quartz/components/styles/explorer.scss |  6 ++++++
 quartz/components/styles/graph.scss    | 11 ++++++++++-
 quartz/components/styles/toc.scss      | 15 +++++++++++++--
 4 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/quartz.config.ts b/quartz.config.ts
index bed9ee8f6..7da99fd11 100644
--- a/quartz.config.ts
+++ b/quartz.config.ts
@@ -28,25 +28,25 @@ const config: QuartzConfig = {
       colors: {
         lightMode: {
           light: "#E2E2E2",
-          lightgray: "#D3D3D3", //code, graph, outline
-          gray: "#4e4e4e", // graph links
+          lightgray: "#4e4e4e", //code, graph, outline
+          gray: "#4e4e4e", // graph nodes
           darkgray: "#4e4e4e",
           dark: "#4E4E4E",
           secondary: "#4e4e4e",
           tertiary: "#C0FFE1",
           customCallout: "rgba(183, 255, 236, 0.35)",
-          highlight: "rgba(128, 128, 128, 0.35)",
+          highlight: "rgba(128, 128, 128, 0.35)", //code bg, note bg, graph bg (ONLY ON LIGHT MODE)
           searchBackground: "#D3D3D3",
         },
         darkMode: {
           light: "#191919",
-          lightgray: "#393639",
-          gray: "#646464",
+          lightgray: "#393639", //code, graph edges, outline
+          gray: "#E2E2E2", //graph nodes
           darkgray: "#E2E2E2",
           dark: "#ebebec",
           secondary: "#7C7C7C",
           tertiary: "#C0FFE1",
-          highlight: "rgba(125, 125, 125, 0.15)",
+          highlight: "rgba(125, 125, 125, 0.15)", //code bg, note bg
           customCallout: "#00b8d410",
           searchBackground: "#252525",
         },
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index 55ea8aa88..eadff7f93 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -65,6 +65,12 @@ button#explorer {
       color: var(--dark);
       opacity: 0.75;
       pointer-events: all;
+      transition: all 0.2s ease;
+      
+      &:hover {
+        opacity: 1;
+        color: var(--tertiary);
+      }
     }
   }
 }
diff --git a/quartz/components/styles/graph.scss b/quartz/components/styles/graph.scss
index 3deaa1feb..b02b6e57b 100644
--- a/quartz/components/styles/graph.scss
+++ b/quartz/components/styles/graph.scss
@@ -14,6 +14,11 @@
     margin: 0.5em 0;
     position: relative;
     overflow: hidden;
+    background-color: var(--highlight);
+
+    [saved-theme="dark"] & {
+      background-color: var(--light);
+    }
 
     & > #global-graph-icon {
       color: var(--dark);
@@ -52,7 +57,7 @@
 
     & > #global-graph-container {
       border: 1px solid var(--lightgray);
-      background-color: var(--light);
+      background-color: var(--highlight);
       border-radius: 5px;
       box-sizing: border-box;
       position: fixed;
@@ -62,6 +67,10 @@
       height: 60vh;
       width: 50vw;
 
+      [saved-theme="dark"] & {
+        background-color: var(--light);
+      }
+
       @media all and (max-width: $fullPageWidth) {
         width: 90%;
       }
diff --git a/quartz/components/styles/toc.scss b/quartz/components/styles/toc.scss
index 27ff62a40..24f068ae0 100644
--- a/quartz/components/styles/toc.scss
+++ b/quartz/components/styles/toc.scss
@@ -44,10 +44,21 @@ button#toc {
       color: var(--dark);
       opacity: 0.35;
       transition:
-        0.5s ease opacity,
-        0.3s ease color;
+        0.2s ease opacity,
+        0.2s ease color;
+
+      &:hover {
+        opacity: 1;
+        color: var(--tertiary);
+      }
+
       &.in-view {
         opacity: 0.75;
+        
+        &:hover {
+          opacity: 1;
+          color: var(--tertiary);
+        }
       }
     }
   }