Add an option to include CSS for proper rendering

Now, you don't need an Obsidian Theme to use this plugin.

quartz/plugins/transformers/badges.ts

@@ -1,5 +1,6 @@
 import { QuartzTransformerPlugin } from "../types"
 import badgesCSS from "../../styles/badges.scss"
+import obsidianOptionalCSS from "../../styles/badges-optional.scss"
 import { JSResource, CSSResource } from "../../util/resources"
 import icons from "lucide-static"
 
@@ -99,10 +100,12 @@ const CODEREGEX = /`([^`\n]+)`/g
 
 export interface Options {
   customBadges: Array<[string, string, [number, number, number, number], number]>, // Write in format [ [icon,name,[RED,GREEN,BLUE,ALPHA],TEXT_ALPHA], [icon,name,[RED,GREEN,BLUE,ALPHA],TEXT_ALPHA] ]
+  useObsidianCSS: boolean
 }
 
 const defaultOptions: Options = {
-  customBadges: []
+  customBadges: [],
+  useObsidianCSS: false,
 }
 
 export const InlineBadges: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
@@ -151,6 +154,13 @@ export const InlineBadges: QuartzTransformerPlugin<Partial<Options>> = (userOpts
                     }`,
         inline: true,
       })
+
+      if (opts.useObsidianCSS){
+        css.push({
+          content: obsidianOptionalCSS,
+          inline: true
+        })
+      }
       }
       return { js, css }
     },

quartz/styles/badges-optional.scss

@@ -0,0 +1,126 @@
+// This CSS is required to render badges properly.
+// WinnerWind.
+:root{
+    body{
+          --radius-l: 12px;
+          --radius-m: 8px;
+          --radius-s: 4px;
+	a.external .external-icon {
+		height:0px;
+		margin:0em;
+		display:none;
+	}
+    }
+}
+:root[saved-theme="dark"] {
+  --chalk-grey: #dddddd;
+  --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
+  --color-accent-1: hsl(
+    calc(var(--accent-h) - 3),
+    calc(var(--accent-s) * 1.02),
+    calc(var(--accent-l) * 1.15)
+  );
+  --color-accent-2: hsl(
+    calc(var(--accent-h) - 5),
+    calc(var(--accent-s) * 1.05),
+    calc(var(--accent-l) * 1.29)
+  );
+  --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
+  --color-base-00: #090909;
+  --color-base-10: #1f1f1f;
+  --color-base-100: #c6c6c6;
+  --color-base-30: #1f1f1f;
+  --color-base-35: #383838;
+  --color-base-40: #1f1f1f;
+  --color-base-50: #808080;
+  --color-base-60: #5f5f5f;
+  --color-base-70: #bdbdbd;
+  --color-blue: #027aff;
+  --color-blue-rgb: 2, 122, 255;
+  --color-cyan: #53dfdd;
+  --color-cyan-rgb: 83, 223, 221;
+  --color-green: #44cf6e;
+  --color-green-rgb: 68, 207, 110;
+  --color-orange: #e9973f;
+  --color-orange-rgb: 233, 151, 63;
+  --color-pink: #fa99cd;
+  --color-purple: #a882ff;
+  --color-purple-rgb: 168, 130, 255;
+  --color-red: #fb464c;
+  --color-red-rgb: 251, 70, 76;
+  --color-yellow: #e0de71;
+  --h1-color: var(--chalk-grey);
+  --h2-color: var(--chalk-grey);
+  --h3-color: var(--chalk-grey);
+  --h4-color: var(--chalk-grey);
+  --h5-color: var(--chalk-grey);
+  --h6-color: var(--chalk-grey);
+  --interactive-accent: var(--color-accent);
+  --interactive-accent-hover: var(--color-accent-1);
+  --mono-rgb-100: 255, 255, 255;
+  --shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 0px 6.3px 24.7px rgba(0, 0, 0, 0.112),
+    0px 30px 90px rgba(0, 0, 0, 0.2);
+  --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.121), 0px 3.4px 6.7px rgba(0, 0, 0, 0.179),
+    0px 15px 30px rgba(0, 0, 0, 0.3);
+  --text-accent: var(--color-accent-1);
+  color-scheme: dark;
+
+  .callout {
+    --callout-blend-mode: lighten;
+  }
+}
+
+:root[saved-theme="light"] {
+  --chalk-grey: #686868;
+  --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
+  --color-accent-1: hsl(
+    calc(var(--accent-h) - 1),
+    calc(var(--accent-s) * 1.01),
+    calc(var(--accent-l) * 1.075)
+  );
+  --color-accent-2: hsl(
+    calc(var(--accent-h) - 3),
+    calc(var(--accent-s) * 1.02),
+    calc(var(--accent-l) * 1.15)
+  );
+  --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l);
+  --color-base-00: #fff;
+  --color-base-10: #fafafa;
+  --color-base-100: #222;
+  --color-base-30: #e0e0e0;
+  --color-base-35: #d4d4d4;
+  --color-base-40: #bdbdbd;
+  --color-base-50: #ababab;
+  --color-base-60: #707070;
+  --color-base-70: #5a5a5a;
+  --color-blue: #086ddd;
+  --color-blue-rgb: 8, 109, 221;
+  --color-cyan: #00bfbc;
+  --color-cyan-rgb: 0, 191, 188;
+  --color-green: #08b94e;
+  --color-green-rgb: 8, 185, 78;
+  --color-orange: #ec7500;
+  --color-orange-rgb: 236, 117, 0;
+  --color-pink: #d53984;
+  --color-purple: #7852ee;
+  --color-purple-rgb: 120, 82, 238;
+  --color-red: #e93147;
+  --color-red-rgb: 233, 49, 71;
+  --color-yellow: #e0ac00;
+  --h1-color: var(--chalk-grey);
+  --h2-color: var(--chalk-grey);
+  --h3-color: var(--chalk-grey);
+  --h4-color: var(--chalk-grey);
+  --h5-color: var(--chalk-grey);
+  --h6-color: var(--chalk-grey);
+  --mono-rgb-100: 0, 0, 0;
+  --shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 0px 6.3px 24.7px rgba(0, 0, 0, 0.112),
+    0px 30px 90px rgba(0, 0, 0, 0.2);
+  --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.028), 0px 3.4px 6.7px rgba(0, 0, 0, 0.042),
+    0px 15px 30px rgba(0, 0, 0, 0.07);
+  color-scheme: light;
+
+  .callout {
+    --callout-blend-mode: darken;
+  }
+}