From ab1b46877ce03ac2018fd72894a303c3cecb0e72 Mon Sep 17 00:00:00 2001
From: Vineeth Voruganti <13438633+VVoruganti@users.noreply.github.com>
Date: Fri, 23 Aug 2024 12:01:27 -0400
Subject: [PATCH] feat(callout) Theme matching callouts

---
 content/_index.md         |  2 +-
 quartz.config.ts          |  2 ++
 quartz/styles/custom.scss | 33 +++++++++++++++++++++++++++++++++
 quartz/util/theme.ts      |  3 +++
 4 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/content/_index.md b/content/_index.md
index dd9a9a9b518d..a48c279fbb91 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -2,7 +2,7 @@
 title: Home
 enableToc: false
 ---
-> [!important] PLASTIC IS HIRING!
+> [!custom] PLASTIC IS HIRING!
 > Check out our [[Work at Plastic|open positions here]].
 
 Welcome to our collaborative second brain. 
diff --git a/quartz.config.ts b/quartz.config.ts
index 03a27d3805f9..13c67ee6fb44 100644
--- a/quartz.config.ts
+++ b/quartz.config.ts
@@ -34,6 +34,7 @@ const config: QuartzConfig = {
           dark: "#2b2b2b",
           secondary: "#4e4e4e",
           tertiary: "#FF5A7E",
+          customCallout: "#db424210",
           highlight: "rgba(128, 128, 128, 0.15)",
         },
         darkMode: {
@@ -45,6 +46,7 @@ const config: QuartzConfig = {
           secondary: "#7C7C7C",
           tertiary: "#09FEF8",
           highlight: "rgba(125, 125, 125, 0.15)",
+          customCallout: "#00b8d410",
         },
       },
     },
diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss
index bd96eb9940a4..1568205f1f8b 100644
--- a/quartz/styles/custom.scss
+++ b/quartz/styles/custom.scss
@@ -32,3 +32,36 @@ iframe {
   margin-left: auto;
   margin-right: auto;
 }
+
+// Callouts
+
+.callout {
+  &[data-callout="custom"] {
+    --color: var(--tertiary);
+    --border:var(--tertiary);
+    --bg: var(--customCallout);
+    --callout-icon: var(--callout-icon-tip);
+  }
+}
+
+/* @media (prefers-color-scheme: dark) { */
+/*   .callout { */
+/*     &[data-callout="custom"] { */
+/*       --color: #09FEF8; */
+/*       --border:#09FEF8; */
+/*       --bg: #00b0ff10; */
+/*       --callout-icon: var(--callout-icon-tip); */
+/*     } */
+/*   } */
+/* } */
+/* @media (prefers-color-scheme: light) { */
+/* .callout { */
+/*   &[data-callout="custom"] { */
+/**/
+/*     --color: #FF5A7E; */
+/*     --border:#FF5A7E; */
+/*     --bg: #db424210; */
+/*     --callout-icon: var(--callout-icon-tip); */
+/*   } */
+/* } */
+/* } */
diff --git a/quartz/util/theme.ts b/quartz/util/theme.ts
index 49cc9cce8e02..637489aab04a 100644
--- a/quartz/util/theme.ts
+++ b/quartz/util/theme.ts
@@ -7,6 +7,7 @@ export interface ColorScheme {
   secondary: string
   tertiary: string
   highlight: string
+  customCallout: string
 }
 
 interface Colors {
@@ -48,6 +49,7 @@ ${stylesheet.join("\n\n")}
   --secondary: ${theme.colors.lightMode.secondary};
   --tertiary: ${theme.colors.lightMode.tertiary};
   --highlight: ${theme.colors.lightMode.highlight};
+  --customCallout: ${theme.colors.lightMode.customCallout};
 
   --headerFont: "${theme.typography.header}", ${DEFAULT_SANS_SERIF};
   --bodyFont: "${theme.typography.body}", ${DEFAULT_SANS_SERIF};
@@ -63,6 +65,7 @@ ${stylesheet.join("\n\n")}
   --secondary: ${theme.colors.darkMode.secondary};
   --tertiary: ${theme.colors.darkMode.tertiary};
   --highlight: ${theme.colors.darkMode.highlight};
+  --customCallout: ${theme.colors.darkMode.customCallout};
 }
 `
 }