feat(callout) Theme matching callouts

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. 

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",
         },
       },
     },

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); */
+/*   } */
+/* } */
+/* } */

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};
 }
 `
 }