diff --git a/quartz/plugins/transformers/badges.ts b/quartz/plugins/transformers/badges.ts index d631047ab..2f7d85620 100644 --- a/quartz/plugins/transformers/badges.ts +++ b/quartz/plugins/transformers/badges.ts @@ -1,6 +1,5 @@ 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" @@ -105,12 +104,10 @@ export interface Options { color: [number, number, number, number] textOpacity: number }> - useObsidianCSS: boolean } const defaultOptions: Options = { customBadges: [], - useObsidianCSS: false, } export const InlineBadges: QuartzTransformerPlugin> = (userOpts) => { @@ -159,13 +156,6 @@ 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 deleted file mode 100644 index 7c0d9d363..000000000 --- a/quartz/styles/badges-optional.scss +++ /dev/null @@ -1,130 +0,0 @@ -// 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; - } -} diff --git a/quartz/styles/badges.scss b/quartz/styles/badges.scss index 54d03e9f6..19f233b54 100644 --- a/quartz/styles/badges.scss +++ b/quartz/styles/badges.scss @@ -1,9 +1,40 @@ +:root { + body { + --radius-l: 12px; + --radius-m: 8px; + --radius-s: 4px; + a.external .external-icon { + height: 0px; + margin: 0em; + display: none; + } + } +} + +:root { + --color-blue: #448aff; + --color-blue-rgb: 68, 138, 256; + --color-cyan: #00b0ff; + --color-cyan-rgb: 00, 176, 256; + --color-green: #09ad7a; + --color-green-rgb: 9, 173, 122; + --color-orange: #db8942; + --color-orange-rgb: 219, 137, 66; + --color-pink: #fa99cd; + --color-pink-rgb: 250, 153, 205; + --color-purple: #7a43b5; + --color-purple-rgb: 122, 67, 181; + --color-red: #db4242; + --color-red-rgb: 219, 66, 66; + --color-yellow: #dba642; + --color-yellow-rgb: 219, 166, 66; +} + body { --inline-badge-border-color: transparent; --inline-badge-font-size: 0.8em; --inline-badge-border-radius: var(--radius-s); --inline-badge-border: 1px solid var(--inline-badge-border-color); - --my-custom-rgb: var(--color-green-rgb); } .inline-badge { display: inline-flex;