mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-24 05:14:06 -06:00
Remove the need for Obsidian Optional CSS
this CSS is now integrated with the normal css file, which uses quartz colours by default.
This commit is contained in:
WinnerWind
parent
b669be6e06
commit
daabf148e8
@ -1,6 +1,5 @@
|
|||||||
import { QuartzTransformerPlugin } from "../types"
|
import { QuartzTransformerPlugin } from "../types"
|
||||||
import badgesCSS from "../../styles/badges.scss"
|
import badgesCSS from "../../styles/badges.scss"
|
||||||
import obsidianOptionalCSS from "../../styles/badges-optional.scss"
|
|
||||||
import { JSResource, CSSResource } from "../../util/resources"
|
import { JSResource, CSSResource } from "../../util/resources"
|
||||||
import icons from "lucide-static"
|
import icons from "lucide-static"
|
||||||
|
|
||||||
@ -105,12 +104,10 @@ export interface Options {
|
|||||||
color: [number, number, number, number]
|
color: [number, number, number, number]
|
||||||
textOpacity: number
|
textOpacity: number
|
||||||
}>
|
}>
|
||||||
useObsidianCSS: boolean
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const defaultOptions: Options = {
|
const defaultOptions: Options = {
|
||||||
customBadges: [],
|
customBadges: [],
|
||||||
useObsidianCSS: false,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const InlineBadges: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
|
export const InlineBadges: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
|
||||||
@ -159,13 +156,6 @@ export const InlineBadges: QuartzTransformerPlugin<Partial<Options>> = (userOpts
|
|||||||
}`,
|
}`,
|
||||||
inline: true,
|
inline: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
if (opts.useObsidianCSS) {
|
|
||||||
css.push({
|
|
||||||
content: obsidianOptionalCSS,
|
|
||||||
inline: true,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
return { js, css }
|
return { js, css }
|
||||||
},
|
},
|
||||||
|
|||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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 {
|
body {
|
||||||
--inline-badge-border-color: transparent;
|
--inline-badge-border-color: transparent;
|
||||||
--inline-badge-font-size: 0.8em;
|
--inline-badge-font-size: 0.8em;
|
||||||
--inline-badge-border-radius: var(--radius-s);
|
--inline-badge-border-radius: var(--radius-s);
|
||||||
--inline-badge-border: 1px solid var(--inline-badge-border-color);
|
--inline-badge-border: 1px solid var(--inline-badge-border-color);
|
||||||
--my-custom-rgb: var(--color-green-rgb);
|
|
||||||
}
|
}
|
||||||
.inline-badge {
|
.inline-badge {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user