From 02b8c1db958dd474c710835a7d14d192a9c3c436 Mon Sep 17 00:00:00 2001 From: WinnerWind <71366717+WinnerWind@users.noreply.github.com> Date: Tue, 15 Jul 2025 12:43:05 +0530 Subject: [PATCH] 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 | 12 ++- quartz/styles/badges-optional.scss | 126 ++++++++++++++++++++++++++ 2 files changed, 137 insertions(+), 1 deletion(-) create mode 100644 quartz/styles/badges-optional.scss diff --git a/quartz/plugins/transformers/badges.ts b/quartz/plugins/transformers/badges.ts index 789c2f459..82aab8cbc 100644 --- a/quartz/plugins/transformers/badges.ts +++ b/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> = (userOpts) => { @@ -151,6 +154,13 @@ export const InlineBadges: QuartzTransformerPlugin> = (userOpts }`, inline: true, }) + + if (opts.useObsidianCSS){ + css.push({ + content: obsidianOptionalCSS, + inline: true + }) + } } return { js, css } }, diff --git a/quartz/styles/badges-optional.scss b/quartz/styles/badges-optional.scss new file mode 100644 index 000000000..d1ffef2a4 --- /dev/null +++ b/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; + } +}