mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-04 04:39:03 +00:00
feat: script generation of theme css
- foregrounds - coloured backgrounds - accents - scrollbar - inline code & code blocks still todo: - fonts - base backgrounds - borders and outlines - tooltips - cards - buttons - etc.
This commit is contained in:
parent
29c4fff909
commit
ee69d44796
GPG Key ID:
7998D08F7D7BD7A8
438
scripts/generate-theme-css.mjs
Normal file
438
scripts/generate-theme-css.mjs
Normal file
@ -0,0 +1,438 @@
|
||||
/**
|
||||
* notion-enhancer
|
||||
* (c) 2022 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
// paste this in the devtools console at to generate theme css
|
||||
// at https://www.notion.so/9390e51f458940a5a339dc4b8fdea2fb
|
||||
|
||||
// the variables at the top of the file should be placed in core/variables.css
|
||||
// as a reference for theme developers, but not loaded into notion.
|
||||
|
||||
// the css body below should be passed through https://css.github.io/csso/csso.html
|
||||
// and then saved to core/theme.css. repeat this process for both light and dark modes
|
||||
|
||||
const darkMode = document.body.classList.contains("dark"),
|
||||
modeSelector = darkMode ? ".dark" : ":not(.dark)";
|
||||
let cssRoot = "",
|
||||
cssBody = "";
|
||||
|
||||
const generateQuerySelector = (el) => {
|
||||
if (el.tagName === "HTML") return "html";
|
||||
const parentSelector = generateQuerySelector(el.parentElement);
|
||||
if (el.id) return `${parentSelector} > #${el.id}`;
|
||||
const classes = [...el.classList].map((cls) => `.${cls}`).join(""),
|
||||
style = el.getAttribute("style")
|
||||
? `[style="${el.getAttribute("style").replace(/"/g, "'")}"]`
|
||||
: "",
|
||||
index = `:nth-child(${[...el.parentElement.children].indexOf(el) + 1})`;
|
||||
return `${parentSelector} > ${classes || style || index}`;
|
||||
},
|
||||
getComputedPropertyValue = (el, prop) => {
|
||||
const styles = window.getComputedStyle(el),
|
||||
value = styles.getPropertyValue(prop);
|
||||
return value;
|
||||
};
|
||||
|
||||
const generateForegroundStyles = () => {
|
||||
const rgbPrimary = darkMode ? "rgb(255, 255, 255)" : "rgb(55, 53, 47)",
|
||||
defaultPrimary = darkMode ? "rgba(255, 255, 255, 0.81)" : "rgb(55, 53, 47)",
|
||||
defaultSecondary = darkMode
|
||||
? "rgb(155, 155, 155)"
|
||||
: "rgba(25, 23, 17, 0.6)",
|
||||
fgPrimary = new Set([rgbPrimary]),
|
||||
fgSecondary = new Set([defaultSecondary]);
|
||||
for (const el of document.querySelectorAll(
|
||||
'[style^="color"], [style*=" color"], [style*=";color"], [style*="fill"]'
|
||||
)) {
|
||||
const colorVal =
|
||||
el
|
||||
.getAttribute("style")
|
||||
.match(/(?:^|(?:;\s*))color:\s*([^;]+);?/)?.[1] ??
|
||||
getComputedPropertyValue(el, "color"),
|
||||
fillVal =
|
||||
el
|
||||
.getAttribute("style")
|
||||
.match(/(?:^|(?:;\s*))fill:\s*([^;]+);?/)?.[1] ??
|
||||
getComputedPropertyValue(el, "fill");
|
||||
if (colorVal.startsWith(`rgba(${rgbPrimary.slice(4, -1)}`)) {
|
||||
const alpha = +colorVal.slice(5, -1).split(", ")[3];
|
||||
if (alpha > 0.8) {
|
||||
fgPrimary.add(colorVal);
|
||||
} else fgSecondary.add(colorVal);
|
||||
}
|
||||
if (fillVal.startsWith(`rgba(${rgbPrimary.slice(4, -1)}`)) {
|
||||
const alpha = +fillVal.slice(5, -1).split(", ")[3];
|
||||
if (alpha > 0.8) {
|
||||
fgPrimary.add(fillVal);
|
||||
} else fgSecondary.add(fillVal);
|
||||
}
|
||||
if (
|
||||
// light mode tags have coloured text,
|
||||
// replace with primary text for consistency
|
||||
!darkMode &&
|
||||
el.matches(
|
||||
`[style*="height: 20px; border-radius: 3px; padding-left: 6px;"][style*="background:"],
|
||||
.notion-collection_view-block [style*="height: 14px; border-radius: 3px; padding-left: 6px;"],
|
||||
.notion-timeline-item-properties [style*="height: 18px; border-radius: 3px; padding-left: 8px;"]`
|
||||
)
|
||||
) {
|
||||
fgPrimary.add(colorVal);
|
||||
}
|
||||
}
|
||||
cssRoot += `
|
||||
--theme--fg-primary: ${defaultPrimary};
|
||||
--theme--fg-secondary: ${defaultSecondary};
|
||||
`;
|
||||
const mapFgToSelectors = (colorVal) =>
|
||||
`.notion-body${modeSelector} [style^="color:${colorVal}"],
|
||||
.notion-body${modeSelector} [style^="color: ${colorVal}"],
|
||||
.notion-body${modeSelector} [style*=" color:${colorVal}"],
|
||||
.notion-body${modeSelector} [style*=" color: ${colorVal}"],
|
||||
.notion-body${modeSelector} [style*=";color:${colorVal}"],
|
||||
.notion-body${modeSelector} [style*=";color: ${colorVal}"],
|
||||
.notion-body${modeSelector} [style*="fill:${colorVal}"],
|
||||
.notion-body${modeSelector} [style*="fill: ${colorVal}"]`;
|
||||
cssBody += `
|
||||
${[...fgPrimary].map(mapFgToSelectors).join(", ")} {
|
||||
color: var(--theme--fg-primary, ${defaultPrimary}) !important;
|
||||
caret-color: var(--theme--fg-primary, ${defaultPrimary}) !important;
|
||||
-webkit-text-fill-color: currentColor !important;
|
||||
fill: var(--theme--fg-primary, ${defaultPrimary}) !important;
|
||||
}
|
||||
${[...fgSecondary].map(mapFgToSelectors).join(", ")} {
|
||||
color: var(--theme--fg-secondary, ${defaultSecondary}) !important;
|
||||
caret-color: var(--theme--fg-secondary, ${defaultSecondary}) !important;
|
||||
-webkit-text-fill-color: currentColor !important;
|
||||
fill: var(--theme--fg-secondary, ${defaultSecondary}) !important;
|
||||
}
|
||||
`;
|
||||
|
||||
const refs = {};
|
||||
// inline text color
|
||||
for (const el of document.querySelectorAll(
|
||||
'.notion-selectable .notion-enable-hover[style*="color:"][style*="fill:"]'
|
||||
)) {
|
||||
if (!el.innerText || el.innerText.includes(" ")) continue;
|
||||
const cssVar = `--theme--fg-${el.innerText}`,
|
||||
colorVal = getComputedPropertyValue(el, "color"),
|
||||
styleAttr = el.getAttribute("style");
|
||||
cssRoot += `${cssVar}: ${colorVal};`;
|
||||
refs[`${cssVar}, ${colorVal}`] ??= [];
|
||||
refs[`${cssVar}, ${colorVal}`].push(
|
||||
`.notion-body${modeSelector} .notion-enable-hover[style*="${styleAttr}"]`
|
||||
);
|
||||
}
|
||||
// block text color
|
||||
const targetSelector =
|
||||
'.notion-text-block > [style*="color:"][style*="fill:"]';
|
||||
for (const el of document.querySelectorAll(targetSelector)) {
|
||||
if (!el.innerText || el.innerText.includes(" ")) continue;
|
||||
const cssVar = `--theme--fg-${el.innerText}`,
|
||||
colorVal = getComputedPropertyValue(el, "color"),
|
||||
styleAttr = el
|
||||
.getAttribute("style")
|
||||
.match(/(?:^|(?:;\s*))color:\s*([^;]+);?/)[1];
|
||||
refs[`${cssVar}, ${colorVal}`] ??= [];
|
||||
refs[`${cssVar}, ${colorVal}`].push(
|
||||
`.notion-body${modeSelector} ${targetSelector}[style*="${styleAttr}"]`
|
||||
);
|
||||
}
|
||||
// board text
|
||||
for (const parent of document.querySelectorAll(
|
||||
".notion-board-view .notion-board-group"
|
||||
)) {
|
||||
// get color name from card
|
||||
const card = parent.querySelector('a[style*="background"]'),
|
||||
innerText = card.innerText.replace("Drag image to reposition\n", "");
|
||||
if (!innerText || innerText.includes(" ")) continue;
|
||||
const el = parent.querySelector('[style*="height: 32px"]'),
|
||||
colorVal = getComputedPropertyValue(el, "color"),
|
||||
cssVar = `--theme--fg-${
|
||||
// --fg-light_gray doesn't exist
|
||||
innerText === "light_gray" ? "secondary" : innerText
|
||||
}`,
|
||||
styleAttr = parent
|
||||
.getAttribute("style")
|
||||
.match(/background(?:-color)?:\s*([^;]+);?/)[1];
|
||||
refs[`${cssVar}, ${colorVal}`] ??= [];
|
||||
refs[`${cssVar}, ${colorVal}`].push(
|
||||
`.notion-body${modeSelector} .notion-board-view :is(
|
||||
.notion-board-group[style*="${styleAttr}"] [style*="height: 32px"],
|
||||
[style*="${styleAttr}"] > [style*="color"]:nth-child(2),
|
||||
[style*="${styleAttr}"] > div > svg
|
||||
)`
|
||||
);
|
||||
}
|
||||
for (const varRef in refs) {
|
||||
cssBody += `${refs[varRef].join(",")} {
|
||||
color: var(${varRef}) !important;
|
||||
fill: var(${varRef}) !important;
|
||||
}`;
|
||||
}
|
||||
};
|
||||
generateForegroundStyles();
|
||||
|
||||
const generateBackgroundStyles = () => {
|
||||
for (const el of document.querySelectorAll(
|
||||
'.notion-collection_view-block [style*="height: 20px; border-radius: 3px; padding-left: 6px;"]'
|
||||
)) {
|
||||
if (!el.innerText || el.innerText.includes(" ")) continue;
|
||||
const cssVar = `--theme--bg-${el.innerText}`,
|
||||
colorVal = getComputedPropertyValue(el, "background-color");
|
||||
cssRoot += `${cssVar}: ${colorVal};`;
|
||||
}
|
||||
const refs = {};
|
||||
for (const targetSelector of [
|
||||
// inline highlight
|
||||
'.notion-selectable .notion-enable-hover[style^="background:"]',
|
||||
// block highlight
|
||||
'.notion-text-block > [style*="background:"]',
|
||||
// callout block
|
||||
'.notion-callout-block > div > [style*="background:"]',
|
||||
// database tag
|
||||
'[style*="height: 20px; border-radius: 3px; padding-left: 6px;"][style*="background:"]',
|
||||
'.notion-collection_view-block [style*="height: 14px; border-radius: 3px; padding-left: 6px;"]',
|
||||
'.notion-timeline-item-properties [style*="height: 18px; border-radius: 3px; padding-left: 8px;"]',
|
||||
]) {
|
||||
for (const el of document.querySelectorAll(targetSelector)) {
|
||||
if (!el.innerText || el.innerText.includes(" ")) continue;
|
||||
const cssVar = `--theme--bg-${el.innerText}`,
|
||||
colorVal = getComputedPropertyValue(el, "background-color"),
|
||||
styleAttr = el
|
||||
.getAttribute("style")
|
||||
.match(/background(?:-color)?:\s*([^;]+);?/)[1];
|
||||
refs[`${cssVar}, ${colorVal}`] ??= [];
|
||||
refs[`${cssVar}, ${colorVal}`].push(
|
||||
`.notion-body${modeSelector} ${targetSelector}[style*="${styleAttr}"]`
|
||||
);
|
||||
}
|
||||
}
|
||||
// board card: in light mode all have bg "white" by default,
|
||||
// must be styled based on parent
|
||||
for (const parent of document.querySelectorAll(
|
||||
".notion-board-view .notion-board-group"
|
||||
)) {
|
||||
const el = parent.querySelector('a[style*="background"]'),
|
||||
innerText = el.innerText.replace("Drag image to reposition\n", "");
|
||||
if (!innerText || innerText.includes(" ")) continue;
|
||||
const cssVar = `--theme--bg-${innerText}`,
|
||||
colorVal = getComputedPropertyValue(el, "background-color"),
|
||||
styleAttr = parent
|
||||
.getAttribute("style")
|
||||
.match(/background(?:-color)?:\s*([^;]+);?/)[1];
|
||||
refs[`${cssVar}, ${colorVal}`] ??= [];
|
||||
refs[`${cssVar}, ${colorVal}`].push(
|
||||
`.notion-body${modeSelector} .notion-board-view
|
||||
.notion-board-group[style*="${styleAttr}"] a[style*="background"]`
|
||||
);
|
||||
}
|
||||
for (const varRef in refs) {
|
||||
cssBody += `${refs[varRef].join(",")} {
|
||||
background: var(${varRef}) !important;
|
||||
}`;
|
||||
}
|
||||
};
|
||||
generateBackgroundStyles();
|
||||
|
||||
const generateAccentStyles = () => {
|
||||
// accents are the same in both light and dark modes
|
||||
// duplicate styles should be removed by csso
|
||||
const accentPrimary = "rgb(35, 131, 226)",
|
||||
accentPrimaryHover = "rgb(0, 117, 211)",
|
||||
accentPrimaryContrast = "rgb(255, 255, 255)",
|
||||
accentPrimaryTransparent = "rgba(35, 131, 226, 0.14)",
|
||||
accentSecondary = [
|
||||
"rgb(235, 87, 87)",
|
||||
"rgb(180, 65, 60)",
|
||||
"rgb(205, 73, 69)",
|
||||
],
|
||||
accentSecondaryContrast = "rgb(255, 255, 255)",
|
||||
accentSecondaryTransparent = "rgba(235, 87, 87, 0.1)",
|
||||
accentSecondaryBorder = "1px solid rgb(110, 54, 48)";
|
||||
cssRoot += `--theme--accent-primary: ${accentPrimary};
|
||||
--theme--accent-primary_hover: ${accentPrimaryHover};
|
||||
--theme--accent-primary_contrast: ${accentPrimaryContrast};
|
||||
--theme--accent-primary_transparent: ${accentPrimaryTransparent};
|
||||
--theme--accent-secondary: ${accentSecondary[0]};
|
||||
--theme--accent-secondary_contrast: ${accentSecondaryContrast};
|
||||
--theme--accent-secondary_transparent: ${accentSecondaryTransparent};`;
|
||||
cssBody += `
|
||||
[style*="color: ${accentPrimary}"],
|
||||
[style*="fill: ${accentPrimary}"] {
|
||||
color: var(--theme--accent-primary, ${accentPrimary}) !important;
|
||||
}
|
||||
[style*="background: ${accentPrimary}"],
|
||||
[style*="background-color: ${accentPrimary}"] {
|
||||
background: var(--theme--accent-primary, ${accentPrimary}) !important;
|
||||
color: var(--theme--accent-primary_contrast, ${accentPrimaryContrast}) !important;
|
||||
fill: var(--theme--accent-primary_contrast, ${accentPrimaryContrast}) !important;
|
||||
}
|
||||
[style*="background: ${accentPrimary}"] svg[style*="fill"],
|
||||
[style*="background-color: ${accentPrimary}"] svg[style*="fill"] {
|
||||
fill: var(--theme--accent-primary_contrast, ${accentPrimaryContrast}) !important;
|
||||
}
|
||||
[style*="border-radius: 44px;"] > [style*="border-radius: 44px; background: white;"] {
|
||||
background: var(--theme--accent-primary_contrast, ${accentPrimaryContrast}) !important;
|
||||
}
|
||||
[style*="background: ${accentPrimaryHover}"],
|
||||
[style*="background-color: ${accentPrimaryHover}"] {
|
||||
background: var(--theme--accent-primary_hover, ${accentPrimaryHover}) !important;
|
||||
color: var(--theme--accent-primary_contrast, ${accentPrimaryContrast}) !important;
|
||||
fill: var(--theme--accent-primary_contrast, ${accentPrimaryContrast}) !important;
|
||||
}
|
||||
.notion-table-selection-overlay [style*='border: 2px solid'] {
|
||||
border-color: var(--theme--accent-primary, ${accentPrimary}) !important;
|
||||
}
|
||||
*::selection,
|
||||
.notion-selectable-halo,
|
||||
[style*="background: ${accentPrimaryTransparent}"],
|
||||
[style*="background-color: ${accentPrimaryTransparent}"] {
|
||||
background: var(--theme--accent-primary_transparent, ${accentPrimaryTransparent}) !important;
|
||||
}
|
||||
[style*="color: ${accentSecondary[0]}"],
|
||||
[style*="color: ${accentSecondary[1]}"],
|
||||
[style*="fill: ${accentSecondary[0]}"],
|
||||
[style*="fill: ${accentSecondary[1]}"] {
|
||||
color: var(--theme--accent-secondary, ${accentSecondary}) !important;
|
||||
}
|
||||
[style*="background: ${accentSecondary[0]}"],
|
||||
[style*="background: ${accentSecondary[1]}"],
|
||||
[style*="background: ${accentSecondary[2]}"],
|
||||
[style*="background-color: ${accentSecondary[0]}"],
|
||||
[style*="background-color: ${accentSecondary[1]}"],
|
||||
[style*="background-color: ${accentSecondary[2]}"] {
|
||||
background: var(--theme--accent-secondary, ${accentSecondary[0]}) !important;
|
||||
color: var(--theme--accent-secondary_contrast, ${accentSecondaryContrast}) !important;
|
||||
fill: var(--theme--accent-secondary_contrast, ${accentSecondaryContrast}) !important;
|
||||
}
|
||||
[style*="background: ${accentSecondary[1]}"] + [style*="color: white;"] {
|
||||
color: var(--theme--accent-secondary_contrast, ${accentSecondaryContrast}) !important;
|
||||
fill: var(--theme--accent-secondary_contrast, ${accentSecondaryContrast}) !important;
|
||||
}
|
||||
[style*="background: ${accentSecondaryTransparent}"],
|
||||
[style*="background-color: ${accentSecondaryTransparent}"] {
|
||||
background: var(--theme--accent-secondary_transparent, ${accentSecondaryTransparent}) !important;
|
||||
}
|
||||
[style*="border: ${accentSecondaryBorder}"] {
|
||||
border-color: var(--theme--accent-secondary, ${accentSecondary[0]}) !important;
|
||||
}
|
||||
`;
|
||||
};
|
||||
generateAccentStyles();
|
||||
|
||||
const generateScrollbarStyles = () => {
|
||||
const scrollbarTrack = darkMode ? "rgba(202, 204, 206, 0.04)" : "#EDECE9",
|
||||
scrollbarThumb = darkMode ? "#474c50" : "#D3D1CB",
|
||||
scrollbarThumbHover = darkMode ? "rgba(202, 204, 206, 0.3)" : "#AEACA6";
|
||||
cssRoot += `--theme--scrollbar-track: ${scrollbarTrack};
|
||||
--theme--scrollbar-thumb: ${scrollbarThumb};
|
||||
--theme--scrollbar-thumb_hover: ${scrollbarThumbHover};`;
|
||||
cssBody += `
|
||||
.notion-body${modeSelector} ::-webkit-scrollbar-track {
|
||||
background: var(--theme--scrollbar-track, ${scrollbarTrack}) !important;
|
||||
}
|
||||
.notion-body${modeSelector} ::-webkit-scrollbar-thumb {
|
||||
background: var(--theme--scrollbar-thumb, ${scrollbarThumb}) !important;
|
||||
}
|
||||
.notion-body${modeSelector} ::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--theme--scrollbar-thumb_hover, ${scrollbarThumbHover}) !important;
|
||||
}
|
||||
`;
|
||||
};
|
||||
generateScrollbarStyles();
|
||||
|
||||
const prismTokens = [
|
||||
// all standard tokens from https://prismjs.com/tokens.html
|
||||
"keyword",
|
||||
"builtin",
|
||||
"class-name",
|
||||
"function",
|
||||
"boolean",
|
||||
"number",
|
||||
"string",
|
||||
"char",
|
||||
"symbol",
|
||||
"regex",
|
||||
"url",
|
||||
"operator",
|
||||
"variable",
|
||||
"constant",
|
||||
"property",
|
||||
"punctuation",
|
||||
"important",
|
||||
"comment",
|
||||
"tag",
|
||||
"attr-name",
|
||||
"attr-value",
|
||||
"namespace",
|
||||
"prolog",
|
||||
"doctype",
|
||||
"cdata",
|
||||
"entity",
|
||||
"atrule",
|
||||
"selector",
|
||||
"inserted",
|
||||
"deleted",
|
||||
],
|
||||
generateCodeStyles = () => {
|
||||
const inlineCode = document.querySelector(
|
||||
'.notion-text-block .notion-enable-hover[style*="mono"]'
|
||||
),
|
||||
inlineFg = inlineCode
|
||||
.getAttribute("style")
|
||||
.match(/(?:^|(?:;\s*))color:\s*([^;]+);?/)?.[1],
|
||||
inlineBg = inlineCode
|
||||
.getAttribute("style")
|
||||
.match(/(?:^|(?:;\s*))background:\s*([^;]+);?/)?.[1];
|
||||
cssRoot += `
|
||||
--theme--code-inline_fg: ${inlineFg};
|
||||
--theme--code-inline_bg: ${inlineBg};`;
|
||||
cssBody += `
|
||||
.notion-body${modeSelector} .notion-text-block
|
||||
.notion-enable-hover[style*="mono"][style*="color:${inlineFg}"] {
|
||||
color: var(--theme--code-inline_fg, ${inlineFg}) !important;
|
||||
}
|
||||
.notion-body${modeSelector} .notion-text-block
|
||||
.notion-enable-hover[style*="mono"][style*="background:${inlineBg}"] {
|
||||
background: var(--theme--code-inline_bg, ${inlineBg}) !important;
|
||||
}
|
||||
`;
|
||||
const blockFg = document
|
||||
.querySelector('.notion-code-block > [style*="mono"]')
|
||||
.getAttribute("style")
|
||||
.match(/(?:^|(?:;\s*))color:\s*([^;]+);?/)?.[1],
|
||||
blockBg = document
|
||||
.querySelector('.notion-code-block > div > [style*="background"]')
|
||||
.getAttribute("style")
|
||||
.match(/(?:^|(?:;\s*))background:\s*([^;]+);?/)?.[1];
|
||||
cssRoot += `--theme--code-block_fg: ${blockFg};
|
||||
--theme--code-block_bg: ${blockBg};`;
|
||||
cssBody += `
|
||||
.notion-body${modeSelector} .notion-code-block > [style*="mono"] {
|
||||
color: var(--theme--code-block_fg, ${blockFg}) !important;
|
||||
}
|
||||
.notion-body${modeSelector} .notion-code-block > div > [style*="background"] {
|
||||
background: var(--theme--code-block_bg, ${blockBg}) !important;
|
||||
}
|
||||
`;
|
||||
const refs = {},
|
||||
el = document.querySelector(".notion-code-block .token");
|
||||
for (const token of prismTokens) {
|
||||
el.className = `token ${token}`;
|
||||
const cssVar = `--theme--code-${token.replace(/-/g, "_")}`,
|
||||
colorVal = getComputedPropertyValue(el, "color");
|
||||
refs[colorVal] ??= cssVar;
|
||||
cssRoot += `${cssVar}: ${
|
||||
refs[colorVal] === cssVar ? colorVal : `var(${refs[colorVal]})`
|
||||
};`;
|
||||
cssBody += `.notion-body${modeSelector} .notion-code-block .token.${token} {
|
||||
color: var(${cssVar}, ${colorVal}) !important;
|
||||
}`;
|
||||
}
|
||||
};
|
||||
generateCodeStyles();
|
||||
|
||||
const cssDoc = `body${modeSelector} { ${cssRoot} } ${cssBody}`;
|
||||
console.log(cssDoc);
|
||||
@ -1,126 +0,0 @@
|
||||
/**
|
||||
* notion-enhancer
|
||||
* (c) 2022 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
// these utils are for manual use (e.g. in the devtools console)
|
||||
// to assist in the generation of the theme.css and variables.css files
|
||||
|
||||
const cssProperties = [
|
||||
"background-color",
|
||||
"border-color",
|
||||
"box-shadow",
|
||||
"caret-color",
|
||||
"color",
|
||||
"fill",
|
||||
"outline-color",
|
||||
"text-decoration-color",
|
||||
],
|
||||
prismTokens = [
|
||||
"keyword",
|
||||
"builtin",
|
||||
"class-name",
|
||||
"function",
|
||||
"boolean",
|
||||
"number",
|
||||
"string",
|
||||
"char",
|
||||
"symbol",
|
||||
"regex",
|
||||
"url",
|
||||
"operator",
|
||||
"variable",
|
||||
"constant",
|
||||
"property",
|
||||
"punctuation",
|
||||
"important",
|
||||
"comment",
|
||||
"tag",
|
||||
"attr-name",
|
||||
"attr-value",
|
||||
"namespace",
|
||||
"prolog",
|
||||
"doctype",
|
||||
"cdata",
|
||||
"entity",
|
||||
"atrule",
|
||||
"selector",
|
||||
"inserted",
|
||||
"deleted",
|
||||
];
|
||||
|
||||
const generateQuerySelector = (el) => {
|
||||
if (el.tagName === "HTML") return "html";
|
||||
const parentSelector = generateQuerySelector(el.parentElement);
|
||||
if (el.id) return `${parentSelector} > #${el.id}`;
|
||||
const classes = [...el.classList].map((cls) => `.${cls}`).join(""),
|
||||
style = el.getAttribute("style")
|
||||
? `[style="${el.getAttribute("style").replace(/"/g, "'")}"]`
|
||||
: "",
|
||||
index = `:nth-child(${[...el.parentElement.children].indexOf(el) + 1})`;
|
||||
return `${parentSelector} > ${classes || style || index}`;
|
||||
},
|
||||
getComputedPropertyValue = (el, prop) => {
|
||||
const styles = window.getComputedStyle(el),
|
||||
value = styles.getPropertyValue(prop);
|
||||
return value;
|
||||
};
|
||||
|
||||
const generatePrismVariables = () => {
|
||||
let cssVariables = "",
|
||||
colourRefs = {};
|
||||
const el = document.querySelector(".notion-code-block .token");
|
||||
for (const token of prismTokens) {
|
||||
el.className = `token ${token}`;
|
||||
const varName = token.replace(/-/g, "_"),
|
||||
colourValue = getComputedPropertyValue(el, "color");
|
||||
colourRefs[colourValue] ??= varName;
|
||||
cssVariables += `--theme--code-${varName}: ${
|
||||
colourRefs[colourValue] === varName
|
||||
? colourValue
|
||||
: `var(--theme--code-${colourRefs[colourValue]})`
|
||||
};`;
|
||||
}
|
||||
return cssVariables;
|
||||
};
|
||||
|
||||
console.log(generatePrismVariables());
|
||||
|
||||
// getComputedPropertyValues = (el) => {
|
||||
// const styles = window.getComputedStyle(el),
|
||||
// values = cssProperties.map((prop) => [
|
||||
// prop,
|
||||
// styles.getPropertyValue(prop),
|
||||
// ]);
|
||||
// return Object.fromEntries(values);
|
||||
// },
|
||||
// indexCssValues = () => {
|
||||
// // Map<value, { [k: property]: selector[] }
|
||||
// const cssValues = new Map();
|
||||
// for (const el of document.querySelectorAll("*")) {
|
||||
// const styles = getComputedPropertyValues(el),
|
||||
// selector = generateQuerySelector(el);
|
||||
// for (const prop in styles) {
|
||||
// const value = styles[prop];
|
||||
// if (value.includes("svg") || value.includes("url")) continue;
|
||||
// if (!(value.includes("rgb") || value.includes("#"))) continue;
|
||||
// if (!cssValues.has(value)) cssValues.set(value, {});
|
||||
// cssValues.get(value)[prop] ??= [];
|
||||
// cssValues.get(value)[prop].push(selector);
|
||||
// }
|
||||
// }
|
||||
// return cssValues;
|
||||
// },
|
||||
// mapCssValuesToVariables = (cssValues) => {
|
||||
// let i = 0,
|
||||
// cssRoot = "",
|
||||
// cssBody = "";
|
||||
// for (const [value, props] of cssValues) {
|
||||
// cssRoot += `--${++i}: ${value};`;
|
||||
// for (const prop in props) {
|
||||
// cssBody += `${props[prop].join(", ")} { ${prop}: var(--${i}); }`;
|
||||
// }
|
||||
// }
|
||||
// return `:root { ${cssRoot} } ${cssBody}`;
|
||||
// };
|
||||
@ -5,7 +5,6 @@
|
||||
*/
|
||||
|
||||
@import url("./theme.css");
|
||||
@import url("./variables.css");
|
||||
|
||||
.notion-enhancer--menu-button {
|
||||
display: flex;
|
||||
|
||||
@ -0,0 +1,25 @@
|
||||
/**
|
||||
* notion-enhancer
|
||||
* (c) 2022 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
/* ::selection {
|
||||
background: var(--theme--accent_blue-selection);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-track,
|
||||
::-webkit-scrollbar-corner {
|
||||
background: var(--theme--scrollbar_track) !important;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--theme--scrollbar_thumb) !important;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--theme--scrollbar_thumb-hover) !important;
|
||||
} */
|
||||
File diff suppressed because one or more lines are too long
@ -4,43 +4,42 @@
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
:root {
|
||||
}
|
||||
|
||||
body:not(.dark) {
|
||||
--theme--code-keyword: rgb(0, 119, 170);
|
||||
--theme--code-builtin: rgb(102, 153, 0);
|
||||
--theme--code-class_name: rgb(221, 74, 104);
|
||||
--theme--code-function: var(--theme--code-class_name);
|
||||
--theme--code-boolean: rgb(153, 0, 85);
|
||||
--theme--code-number: var(--theme--code-boolean);
|
||||
--theme--code-string: var(--theme--code-builtin);
|
||||
--theme--code-char: var(--theme--code-builtin);
|
||||
--theme--code-symbol: var(--theme--code-boolean);
|
||||
--theme--code-regex: rgb(238, 153, 0);
|
||||
--theme--code-url: rgb(154, 110, 58);
|
||||
--theme--code-operator: var(--theme--code-url);
|
||||
--theme--code-variable: var(--theme--code-regex);
|
||||
--theme--code-constant: var(--theme--code-boolean);
|
||||
--theme--code-property: var(--theme--code-boolean);
|
||||
--theme--code-punctuation: rgb(153, 153, 153);
|
||||
--theme--code-important: var(--theme--code-regex);
|
||||
--theme--code-comment: rgb(112, 128, 144);
|
||||
--theme--code-tag: var(--theme--code-boolean);
|
||||
--theme--code-attr_name: var(--theme--code-builtin);
|
||||
--theme--code-attr_value: var(--theme--code-keyword);
|
||||
--theme--code-namespace: rgb(55, 53, 47);
|
||||
--theme--code-prolog: var(--theme--code-comment);
|
||||
--theme--code-doctype: var(--theme--code-comment);
|
||||
--theme--code-cdata: var(--theme--code-comment);
|
||||
--theme--code-entity: var(--theme--code-url);
|
||||
--theme--code-atrule: var(--theme--code-keyword);
|
||||
--theme--code-selector: var(--theme--code-builtin);
|
||||
--theme--code-inserted: var(--theme--code-builtin);
|
||||
--theme--code-deleted: var(--theme--code-boolean);
|
||||
}
|
||||
|
||||
body.dark {
|
||||
--theme--fg-primary: rgba(255, 255, 255, 0.81);
|
||||
--theme--fg-secondary: rgb(155, 155, 155);
|
||||
--theme--fg-gray: rgb(155, 155, 155);
|
||||
--theme--fg-brown: rgb(186, 133, 111);
|
||||
--theme--fg-orange: rgb(199, 125, 72);
|
||||
--theme--fg-yellow: rgb(202, 152, 73);
|
||||
--theme--fg-green: rgb(82, 158, 114);
|
||||
--theme--fg-blue: rgb(94, 135, 201);
|
||||
--theme--fg-purple: rgb(157, 104, 211);
|
||||
--theme--fg-pink: rgb(209, 87, 150);
|
||||
--theme--fg-red: rgb(223, 84, 82);
|
||||
--theme--bg-light_gray: rgb(55, 55, 55);
|
||||
--theme--bg-gray: rgb(90, 90, 90);
|
||||
--theme--bg-brown: rgb(96, 59, 44);
|
||||
--theme--bg-orange: rgb(133, 76, 29);
|
||||
--theme--bg-yellow: rgb(137, 99, 42);
|
||||
--theme--bg-green: rgb(43, 89, 63);
|
||||
--theme--bg-blue: rgb(40, 69, 108);
|
||||
--theme--bg-purple: rgb(73, 47, 100);
|
||||
--theme--bg-red: rgb(110, 54, 48);
|
||||
--theme--bg-pink: rgb(105, 49, 76);
|
||||
--theme--accent-primary: rgb(35, 131, 226);
|
||||
--theme--accent-primary_hover: rgb(0, 117, 211);
|
||||
--theme--accent-primary_contrast: rgb(255, 255, 255);
|
||||
--theme--accent-primary_transparent: rgba(35, 131, 226, 0.14);
|
||||
--theme--accent-secondary: rgb(235, 87, 87);
|
||||
--theme--accent-secondary_contrast: rgb(255, 255, 255);
|
||||
--theme--accent-secondary_transparent: rgba(235, 87, 87, 0.1);
|
||||
--theme--scrollbar-track: rgba(202, 204, 206, 0.04);
|
||||
--theme--scrollbar-thumb: #474c50;
|
||||
--theme--scrollbar-thumb_hover: rgba(202, 204, 206, 0.3);
|
||||
--theme--code-inli: #eb5757;
|
||||
--theme--code-inline_bg: rgba(135, 131, 120, 0.15);
|
||||
--theme--code-block_fg: rgba(255, 255, 255, 0.81);
|
||||
--theme--code-block_bg: rgba(255, 255, 255, 0.03);
|
||||
--theme--code-keyword: rgb(209, 148, 158);
|
||||
--theme--code-builtin: rgb(189, 224, 82);
|
||||
--theme--code-class_name: rgba(255, 255, 255, 0.81);
|
||||
@ -72,3 +71,71 @@ body.dark {
|
||||
--theme--code-inserted: var(--theme--code-builtin);
|
||||
--theme--code-deleted: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
body:not(.dark) {
|
||||
--theme--fg-primary: rgb(55, 53, 47);
|
||||
--theme--fg-secondary: rgba(25, 23, 17, 0.6);
|
||||
--theme--fg-gray: rgb(120, 119, 116);
|
||||
--theme--fg-brown: rgb(159, 107, 83);
|
||||
--theme--fg-orange: rgb(217, 115, 13);
|
||||
--theme--fg-yellow: rgb(203, 145, 47);
|
||||
--theme--fg-green: rgb(68, 131, 97);
|
||||
--theme--fg-blue: rgb(51, 126, 169);
|
||||
--theme--fg-purple: rgb(144, 101, 176);
|
||||
--theme--fg-pink: rgb(193, 76, 138);
|
||||
--theme--fg-red: rgb(212, 76, 71);
|
||||
--theme--bg-light_gray: rgba(227, 226, 224, 0.5);
|
||||
--theme--bg-gray: rgb(227, 226, 224);
|
||||
--theme--bg-brown: rgb(238, 224, 218);
|
||||
--theme--bg-orange: rgb(250, 222, 201);
|
||||
--theme--bg-yellow: rgb(253, 236, 200);
|
||||
--theme--bg-green: rgb(219, 237, 219);
|
||||
--theme--bg-blue: rgb(211, 229, 239);
|
||||
--theme--bg-purple: rgb(232, 222, 238);
|
||||
--theme--bg-red: rgb(255, 226, 221);
|
||||
--theme--bg-pink: rgb(245, 224, 233);
|
||||
--theme--accent-primary: rgb(35, 131, 226);
|
||||
--theme--accent-primary_hover: rgb(0, 117, 211);
|
||||
--theme--accent-primary_contrast: rgb(255, 255, 255);
|
||||
--theme--accent-primary_transparent: rgba(35, 131, 226, 0.14);
|
||||
--theme--accent-secondary: rgb(235, 87, 87);
|
||||
--theme--accent-secondary_contrast: rgb(255, 255, 255);
|
||||
--theme--accent-secondary_transparent: rgba(235, 87, 87, 0.1);
|
||||
--theme--scrollbar-track: #edece9;
|
||||
--theme--scrollbar-thumb: #d3d1cb;
|
||||
--theme--scrollbar-thumb_hover: #aeaca6;
|
||||
--theme--code-inli: #eb5757;
|
||||
--theme--code-inline_bg: rgba(135, 131, 120, 0.15);
|
||||
--theme--code-block_fg: rgb(55, 53, 47);
|
||||
--theme--code-block_bg: rgb(247, 246, 243);
|
||||
--theme--code-keyword: rgb(0, 119, 170);
|
||||
--theme--code-builtin: rgb(102, 153, 0);
|
||||
--theme--code-class_name: rgb(221, 74, 104);
|
||||
--theme--code-function: var(--theme--code-class_name);
|
||||
--theme--code-boolean: rgb(153, 0, 85);
|
||||
--theme--code-number: var(--theme--code-boolean);
|
||||
--theme--code-string: var(--theme--code-builtin);
|
||||
--theme--code-char: var(--theme--code-builtin);
|
||||
--theme--code-symbol: var(--theme--code-boolean);
|
||||
--theme--code-regex: rgb(238, 153, 0);
|
||||
--theme--code-url: rgb(154, 110, 58);
|
||||
--theme--code-operator: var(--theme--code-url);
|
||||
--theme--code-variable: var(--theme--code-regex);
|
||||
--theme--code-constant: var(--theme--code-boolean);
|
||||
--theme--code-property: var(--theme--code-boolean);
|
||||
--theme--code-punctuation: rgb(153, 153, 153);
|
||||
--theme--code-important: var(--theme--code-regex);
|
||||
--theme--code-comment: rgb(112, 128, 144);
|
||||
--theme--code-tag: var(--theme--code-boolean);
|
||||
--theme--code-attr_name: var(--theme--code-builtin);
|
||||
--theme--code-attr_value: var(--theme--code-keyword);
|
||||
--theme--code-namespace: rgb(55, 53, 47);
|
||||
--theme--code-prolog: var(--theme--code-comment);
|
||||
--theme--code-doctype: var(--theme--code-comment);
|
||||
--theme--code-cdata: var(--theme--code-comment);
|
||||
--theme--code-entity: var(--theme--code-url);
|
||||
--theme--code-atrule: var(--theme--code-keyword);
|
||||
--theme--code-selector: var(--theme--code-builtin);
|
||||
--theme--code-inserted: var(--theme--code-builtin);
|
||||
--theme--code-deleted: var(--theme--code-boolean);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user