mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-10 15:39:01 +00:00
fix(theme): consistent primary vs secondary bgs, mode-agnostic tooltip styling
This commit is contained in:
parent
523e1f0bb4
commit
8c935ffb5d
GPG Key ID:
7998D08F7D7BD7A8
@ -18,7 +18,8 @@ const darkMode = document.body.classList.contains("dark"),
|
||||
modeSelector = darkMode ? ".dark" : ":not(.dark)",
|
||||
bodySelector = `.notion-body${modeSelector}`;
|
||||
let cssRoot = "",
|
||||
cssBody = "";
|
||||
cssBody = "",
|
||||
cssRefs = {};
|
||||
|
||||
const getComputedPropertyValue = (el, prop) => {
|
||||
const styles = window.getComputedStyle(el),
|
||||
@ -26,7 +27,16 @@ const getComputedPropertyValue = (el, prop) => {
|
||||
return value;
|
||||
},
|
||||
cssVariable = ({ name, value, alias, splitValues = false }) => {
|
||||
const values = splitValues ? value.split(", ") : [value];
|
||||
const values = splitValues ? value.split(", ") : [value],
|
||||
rgbPattern = /^rgba?\(\d{1,3},\d{1,3},\d{1,3}(?:,\d{1,3})?\)$/,
|
||||
isColor = rgbPattern.test(value.replace(/\s/g, ""));
|
||||
if (isColor) {
|
||||
values[0] = values[0].replace(/\s/g, "");
|
||||
const hasOpaqueAlpha =
|
||||
values[0].trim().startsWith("rgba(") &&
|
||||
values[0].trim().endsWith(",1)");
|
||||
if (hasOpaqueAlpha) values[0] = `rgb(${values[0].slice(5, -3)})`;
|
||||
}
|
||||
if (!cssRoot.includes(`--theme--${name}:`)) {
|
||||
cssRoot += `--theme--${name}:${
|
||||
alias ? `var(--theme--${alias})` : value
|
||||
@ -56,9 +66,13 @@ const getComputedPropertyValue = (el, prop) => {
|
||||
pattern = String.raw`(?:^|(?:;\s*))${property}:\s*([^;]+);?`,
|
||||
match = style.match(new RegExp(pattern));
|
||||
if (typeof variable === "string") {
|
||||
const value =
|
||||
match?.[1] ??
|
||||
(element ? getComputedPropertyValue(element, property) : "");
|
||||
let value = match?.[1];
|
||||
if (element) {
|
||||
value ??= getComputedPropertyValue(
|
||||
element,
|
||||
property === "background" ? "background-color" : property
|
||||
);
|
||||
}
|
||||
if (!value) throw new Error(`${property} not found for ${selector}`);
|
||||
variable = cssVariable({
|
||||
name: variable,
|
||||
@ -67,9 +81,10 @@ const getComputedPropertyValue = (el, prop) => {
|
||||
splitValues: property === "font-family",
|
||||
});
|
||||
}
|
||||
if (specificity.includes("mode")) selector = `${bodySelector} ${selector}`;
|
||||
if (specificity.includes("value")) {
|
||||
if (selector.includes(",")) selector = `:is(${selector})`;
|
||||
if (/(?<!rgb\()[^\s\d,]+,/g.test(selector) && !selector.includes(":is")) {
|
||||
selector = `:is(${selector})`;
|
||||
}
|
||||
if (match?.[0]) selector += `[style*="${match[0].replace(/"/g, `\\"`)}"]`;
|
||||
else {
|
||||
const propSelector = [variable.value, ...valueAliases]
|
||||
@ -80,10 +95,12 @@ const getComputedPropertyValue = (el, prop) => {
|
||||
[style*=";color: ${value}"],
|
||||
[style*=";color:${value}"],
|
||||
[style*=" color: ${value}"],
|
||||
[style*=" color:${value}"]`
|
||||
[style*=" color:${value}"],
|
||||
[style*="fill: ${value}"],
|
||||
[style*="fill:${value}"]`
|
||||
: property === "background"
|
||||
? `[style*="background: ${value}"],
|
||||
[style*="background:${value}"]
|
||||
[style*="background:${value}"],
|
||||
[style*="background-color: ${value}"],
|
||||
[style*="background-color:${value}"]`
|
||||
: `[style*="${property}: ${value}"],
|
||||
@ -93,41 +110,504 @@ const getComputedPropertyValue = (el, prop) => {
|
||||
selector += selector ? `:is(${propSelector})` : propSelector;
|
||||
}
|
||||
}
|
||||
if (specificity.includes("mode")) {
|
||||
selector =
|
||||
/(?<!rgb\()[^\s\d,]+,/g.test(selector) && !selector.includes(":is")
|
||||
? `${bodySelector} :is(${selector})`
|
||||
: `${bodySelector} ${selector}`;
|
||||
}
|
||||
cssProps[property] = variable;
|
||||
cssProps["fill"] ??= cssProps["color"];
|
||||
[selector, cssProps] = postProcessor(selector, cssProps);
|
||||
cssBody += `${selector}{${Object.entries(cssProps)
|
||||
const body = Object.entries(cssProps)
|
||||
.filter(([prop, val]) => prop && val)
|
||||
.map(([prop, val]) => `${prop}:${val?.ref ?? val}`)
|
||||
.join(";")}}`;
|
||||
.join(";");
|
||||
cssRefs[body] ??= [];
|
||||
cssRefs[body].push(selector);
|
||||
variableAliases[variable.value] ??= variable.name;
|
||||
};
|
||||
|
||||
const styleFonts = () => {
|
||||
overrideStyle({
|
||||
selector: "[style*='Segoe UI']",
|
||||
selector: `[style*="Segoe UI"]`,
|
||||
property: "font-family",
|
||||
variable: "font-sans",
|
||||
specificity: [],
|
||||
});
|
||||
overrideStyle({
|
||||
selector: "[style*='Georgia']",
|
||||
selector: `[style*="Georgia"]`,
|
||||
property: "font-family",
|
||||
variable: "font-serif",
|
||||
specificity: [],
|
||||
});
|
||||
overrideStyle({
|
||||
selector: "[style*='iawriter-mono']",
|
||||
selector: `[style*="iawriter-mono"]`,
|
||||
property: "font-family",
|
||||
variable: "font-mono",
|
||||
specificity: [],
|
||||
});
|
||||
overrideStyle({
|
||||
selector: "[style*='SFMono-Regular']",
|
||||
selector: `[style*="SFMono-Regular"]`,
|
||||
property: "font-family",
|
||||
variable: "font-code",
|
||||
specificity: [],
|
||||
});
|
||||
};
|
||||
|
||||
const styleText = () => {
|
||||
const primary = cssVariable({
|
||||
name: "fg-primary",
|
||||
value: darkMode ? "rgba(255, 255, 255, 0.81)" : "rgb(55, 53, 47)",
|
||||
}),
|
||||
primaryAliases = darkMode
|
||||
? [
|
||||
"rgb(211, 211, 211)",
|
||||
"rgb(255, 255, 255)",
|
||||
"rgba(255, 255, 255, 0.8",
|
||||
"rgba(255, 255, 255, 0.9",
|
||||
"rgba(255, 255, 255, 1",
|
||||
]
|
||||
: [
|
||||
"rgba(255, 255, 255, 0.9)",
|
||||
"rgba(55, 53, 47, 0.8",
|
||||
"rgba(55, 53, 47, 0.9",
|
||||
"rgba(55, 53, 47, 1",
|
||||
];
|
||||
|
||||
const secondary = cssVariable({
|
||||
name: "fg-secondary",
|
||||
value: darkMode ? "rgb(155, 155, 155)" : "rgba(25, 23, 17, 0.6)",
|
||||
}),
|
||||
secondaryAliases = darkMode
|
||||
? [
|
||||
"rgb(127, 127, 127)",
|
||||
"rgba(255, 255, 255, 0.0",
|
||||
"rgba(255, 255, 255, 0.1",
|
||||
"rgba(255, 255, 255, 0.2",
|
||||
"rgba(255, 255, 255, 0.3",
|
||||
"rgba(255, 255, 255, 0.4",
|
||||
"rgba(255, 255, 255, 0.5",
|
||||
"rgba(255, 255, 255, 0.6",
|
||||
"rgba(255, 255, 255, 0.7",
|
||||
]
|
||||
: [
|
||||
"rgba(206, 205, 202, 0.6)",
|
||||
"rgba(55, 53, 47, 0.0",
|
||||
"rgba(55, 53, 47, 0.1",
|
||||
"rgba(55, 53, 47, 0.2",
|
||||
"rgba(55, 53, 47, 0.3",
|
||||
"rgba(55, 53, 47, 0.4",
|
||||
"rgba(55, 53, 47, 0.5",
|
||||
"rgba(55, 53, 47, 0.6",
|
||||
"rgba(55, 53, 47, 0.7",
|
||||
];
|
||||
|
||||
overrideStyle({
|
||||
property: "color",
|
||||
variable: primary,
|
||||
valueAliases: primaryAliases,
|
||||
cssProps: {
|
||||
"caret-color": primary,
|
||||
"text-decoration-color": "currentColor",
|
||||
fill: primary,
|
||||
},
|
||||
styleAccents = () => {
|
||||
});
|
||||
overrideStyle({
|
||||
property: "color",
|
||||
variable: secondary,
|
||||
valueAliases: secondaryAliases,
|
||||
cssProps: {
|
||||
"caret-color": secondary,
|
||||
"text-decoration-color": "currentColor",
|
||||
fill: secondary,
|
||||
},
|
||||
postProcessor(selector, cssProps) {
|
||||
return [
|
||||
`${bodySelector} :is(.rdp-nav_icon, .rdp-head_cell,
|
||||
.rdp-day.rdp-day_outside, ::placeholder), ${selector}`,
|
||||
cssProps,
|
||||
];
|
||||
},
|
||||
});
|
||||
overrideStyle({
|
||||
property: "caret-color",
|
||||
variable: primary,
|
||||
valueAliases: primaryAliases,
|
||||
});
|
||||
overrideStyle({
|
||||
property: "caret-color",
|
||||
variable: secondary,
|
||||
valueAliases: secondaryAliases,
|
||||
});
|
||||
overrideStyle({
|
||||
selector: `[style*="-webkit-text-fill-color:"]`,
|
||||
property: "-webkit-text-fill-color",
|
||||
variable: secondary,
|
||||
specificity: ["mode"],
|
||||
});
|
||||
|
||||
// light mode tags have coloured text,
|
||||
// replace with primary text for inter-mode consistency
|
||||
for (const tagSelector of [
|
||||
`[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(tagSelector)) {
|
||||
if (darkMode) continue;
|
||||
overrideStyle({
|
||||
element: el,
|
||||
selector: tagSelector,
|
||||
property: "color",
|
||||
variable: "fg-primary",
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const styleBorders = () => {
|
||||
const border = cssVariable({
|
||||
name: "fg-border",
|
||||
value: darkMode ? "rgb(47, 47, 47)" : "rgb(233, 233, 231)",
|
||||
}),
|
||||
borderColors = darkMode
|
||||
? [border.value.slice(4, -1), "37, 37, 37", "255, 255, 255"]
|
||||
: [border.value.slice(4, -1), "238, 238, 237", "55, 53, 47"],
|
||||
boxShadows = darkMode
|
||||
? [
|
||||
"; box-shadow: rgba(255, 255, 255, 0.094) 0px -1px 0px;",
|
||||
"; box-shadow: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px inset;",
|
||||
"; box-shadow: rgb(25, 25, 25) -3px 0px 0px, rgb(47, 47, 47) 0px 1px 0px;",
|
||||
]
|
||||
: [
|
||||
"; box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px;",
|
||||
"; box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px inset;",
|
||||
"; box-shadow: white -3px 0px 0px, rgb(233, 233, 231) 0px 1px 0px;",
|
||||
];
|
||||
for (const el of document.querySelectorAll(`[style*="box-shadow:"]`)) {
|
||||
const boxShadow = el
|
||||
.getAttribute("style")
|
||||
.match(/(?:^|(?:;\s*))box-shadow:\s*([^;]+);?/)?.[0];
|
||||
if (borderColors.some((color) => boxShadow.includes(color))) {
|
||||
boxShadows.push(boxShadow);
|
||||
}
|
||||
}
|
||||
|
||||
overrideStyle({
|
||||
selector: `[style*="height: 1px;"][style*="background"]`,
|
||||
property: "background",
|
||||
variable: border,
|
||||
specificity: ["mode"],
|
||||
});
|
||||
cssBody += `
|
||||
${bodySelector} :is(${[...new Set(borderColors)]
|
||||
.map(
|
||||
(color) =>
|
||||
`[style*="px solid rgb(${color}"], [style*="px solid rgba(${color}"]`
|
||||
)
|
||||
.join(", ")}):is([style*="border:"], [style*="border-top:"],
|
||||
[style*="border-left:"], [style*="border-bottom:"],
|
||||
[style*="border-right:"]) { border-color: ${border.ref}; }
|
||||
${[...new Set(boxShadows)]
|
||||
.map((shadow) => {
|
||||
if (shadow.startsWith(";")) shadow = shadow.slice(1);
|
||||
return `${bodySelector} [style*="${shadow}"] { ${shadow
|
||||
.replace(
|
||||
/rgba?\([^\)]+\)/g,
|
||||
shadow.includes("-3px 0px 0px, ")
|
||||
? "transparent"
|
||||
: `var(--theme--fg-border, ${border.value})`
|
||||
)
|
||||
.slice(0, -1)} !important; }`;
|
||||
})
|
||||
.join("")}
|
||||
`;
|
||||
};
|
||||
|
||||
const styleColoredText = () => {
|
||||
// inline text
|
||||
for (const el of document.querySelectorAll(
|
||||
'.notion-selectable .notion-enable-hover[style*="color:"][style*="fill:"]:not([style*="mono"])'
|
||||
)) {
|
||||
if (!el.innerText || /\s/.test(el.innerText)) continue;
|
||||
overrideStyle({
|
||||
element: el,
|
||||
selector: `
|
||||
.notion-selectable .notion-enable-hover,
|
||||
.notion-code-block span.token
|
||||
`,
|
||||
property: "color",
|
||||
variable: `fg-${el.innerText}`,
|
||||
});
|
||||
}
|
||||
|
||||
// block text
|
||||
for (const el of document.querySelectorAll(
|
||||
'.notion-text-block > [style*="color:"][style*="fill:"]'
|
||||
)) {
|
||||
if (!el.innerText || /\s/.test(el.innerText)) continue;
|
||||
overrideStyle({
|
||||
element: el,
|
||||
selector: `.notion-text-block > [style*="color:"][style*="fill:"]`,
|
||||
property: "color",
|
||||
variable: `fg-${el.innerText}`,
|
||||
});
|
||||
}
|
||||
|
||||
// board text
|
||||
for (const group of document.querySelectorAll(
|
||||
".notion-board-view .notion-board-group"
|
||||
)) {
|
||||
// get color name from card
|
||||
const card = group.querySelector('a[style*="background"]'),
|
||||
innerText = card.innerText.replace("Drag image to reposition\n", "");
|
||||
if (!innerText || /\s/.test(innerText)) continue;
|
||||
const el = group.querySelector('[style*="height: 32px"]'),
|
||||
groupStyle = group
|
||||
.getAttribute("style")
|
||||
.match(/background(?:-color)?:\s*([^;]+);?/)[1];
|
||||
overrideStyle({
|
||||
element: el,
|
||||
selector: `.notion-board-view :is(
|
||||
.notion-board-group[style*="${groupStyle}"] [style*="height: 32px"],
|
||||
[style*="${groupStyle}"] > [style*="color"]:nth-child(2),
|
||||
[style*="${groupStyle}"] > div > svg
|
||||
)`,
|
||||
property: "color",
|
||||
// light_gray text doesn't exist
|
||||
variable: `fg-${innerText === "light_gray" ? "secondary" : innerText}`,
|
||||
specificity: ["mode"],
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const styleBackgrounds = () => {
|
||||
const primary = cssVariable({
|
||||
name: "bg-primary",
|
||||
value: darkMode ? "rgb(25, 25, 25)" : "white",
|
||||
}),
|
||||
secondary = cssVariable({
|
||||
name: "bg-secondary",
|
||||
value: darkMode ? "rgb(32, 32, 32)" : "rgb(251, 251, 250)",
|
||||
});
|
||||
|
||||
overrideStyle({
|
||||
property: "background",
|
||||
variable: primary,
|
||||
valueAliases: darkMode ? [] : ["rgb(255, 255, 255)", "rgb(247, 247, 247)"],
|
||||
postProcessor(selector, cssProps) {
|
||||
return [`${selector}:not(.notion-timeline-view)`, cssProps];
|
||||
},
|
||||
});
|
||||
overrideStyle({
|
||||
property: "background",
|
||||
variable: secondary,
|
||||
valueAliases: darkMode
|
||||
? ["rgb(37, 37, 37)", "rgb(47, 47, 47)"]
|
||||
: ["rgb(253, 253, 253)"],
|
||||
});
|
||||
|
||||
// cards
|
||||
overrideStyle({
|
||||
selector: `.notion-timeline-item,
|
||||
.notion-calendar-view .notion-collection-item > a,
|
||||
.notion-gallery-view .notion-collection-item > a`,
|
||||
property: "background",
|
||||
variable: secondary,
|
||||
});
|
||||
|
||||
// popups
|
||||
overrideStyle({
|
||||
selector: `.notion-overlay-container [style*="border-radius: 4px;"
|
||||
][style*="position: relative; max-width: calc(100vw - 24px); box-shadow:"],
|
||||
[style*="font-size: 12px;"][style*="box-shadow:"][
|
||||
style*="border-radius: 3px; max-width: calc(100% - 16px); min-height: 24px; overflow: hidden;"
|
||||
][style*="position: absolute; right: 8px; bottom: 8px; z-index:"],
|
||||
[style*="height: 32px;"][style*="font-size: 14px; line-height: 1.2; border-radius: 5px; box-shadow:"],
|
||||
[style*="transition: background"][style*="cursor: pointer;"][
|
||||
style*="border-radius: 3px; height: 24px; width: 24px;"][style*="box-shadow:"],
|
||||
[style*="right: 6px; top: 4px;"][style*="border-radius: 4px;"][style*="gap: 1px;"][style*="box-shadow:"]`,
|
||||
property: "background",
|
||||
variable: secondary,
|
||||
});
|
||||
|
||||
// modals
|
||||
overrideStyle({
|
||||
selector: `.notion-overlay-container [data-overlay] :is(
|
||||
[style*="height: 100%; width: 275px;"][style*="flex-direction: column;"],
|
||||
.notion-space-settings [style*="flex-grow: 1"] > [style*="background-color"])`,
|
||||
property: "background",
|
||||
variable: primary,
|
||||
specificity: ["mode"],
|
||||
});
|
||||
overrideStyle({
|
||||
selector: `.notion-overlay-container [data-overlay] :is(
|
||||
[style*="height: 100%; width: 275px;"][style*="flex-direction: column;"] + [style*="width: 100%;"],
|
||||
.notion-space-settings [style*="height: 100%; background:"][style*="max-width: 250px;"])`,
|
||||
property: "background",
|
||||
variable: secondary,
|
||||
specificity: ["mode"],
|
||||
});
|
||||
|
||||
// timeline fades
|
||||
overrideStyle({
|
||||
selector: `.notion-timeline-view`,
|
||||
property: "background",
|
||||
variable: primary,
|
||||
specificity: ["mode"],
|
||||
});
|
||||
cssBody += `[style*="linear-gradient(to left, ${
|
||||
darkMode ? primary.value : "white"
|
||||
} 20%, rgba(${
|
||||
darkMode ? primary.value.slice(4, -1) : "255, 255, 255"
|
||||
}, 0) 100%)"] { background-image: linear-gradient(to left,
|
||||
var(--theme--bg-primary, ${primary.value}) 20%, transparent
|
||||
100%) !important; }
|
||||
[style*="linear-gradient(to right, ${
|
||||
darkMode ? primary.value : "white"
|
||||
} 20%, rgba(${
|
||||
darkMode ? primary.value.slice(4, -1) : "255, 255, 255"
|
||||
}, 0) 100%)"] { background-image: linear-gradient(to right,
|
||||
var(--theme--bg-primary, ${primary.value}) 20%, transparent
|
||||
100%) !important; }
|
||||
`;
|
||||
|
||||
// hovered elements, inputs and unchecked toggle backgrounds
|
||||
overrideStyle({
|
||||
property: "background",
|
||||
variable: cssVariable({
|
||||
name: "bg-hover",
|
||||
value: darkMode ? "rgba(255, 255, 255, 0.055)" : "rgba(55, 53, 47, 0.08)",
|
||||
}),
|
||||
valueAliases: darkMode
|
||||
? []
|
||||
: [
|
||||
"rgba(242, 241, 238, 0.6)",
|
||||
"rgb(225, 225, 225)",
|
||||
"rgb(239, 239, 238)",
|
||||
],
|
||||
postProcessor(selector, cssProps) {
|
||||
selector += `, ${bodySelector} [style*="height: 14px; width: 26px; border-radius: 44px;"][style*="rgba"]`;
|
||||
if (darkMode) {
|
||||
selector += `, ${bodySelector} :is([style*="background: rgb(47, 47, 47)"],
|
||||
[style*="background-color: rgb(47, 47, 47)"])[style*="transition: background"]:hover`;
|
||||
}
|
||||
return [selector, cssProps];
|
||||
},
|
||||
});
|
||||
|
||||
// modal shadow
|
||||
overrideStyle({
|
||||
selector: `.notion-overlay-container [data-overlay]
|
||||
> div > [style*="position: absolute"]:first-child`,
|
||||
property: "background",
|
||||
variable: cssVariable({
|
||||
name: "bg-overlay",
|
||||
value: darkMode ? "rgba(15, 15, 15, 0.8)" : "rgba(15, 15, 15, 0.6)",
|
||||
}),
|
||||
specificity: ["mode"],
|
||||
});
|
||||
};
|
||||
|
||||
const styleColoredBackgrounds = () => {
|
||||
for (const targetSelector of [
|
||||
// database tags
|
||||
`[style*="height: 20px; border-radius: 3px; padding-left: 6px;"]`,
|
||||
`.notion-collection_view-block [style*="height: 14px; border-radius: 3px; padding-left: 6px;"]`,
|
||||
`:is(.notion-timeline-item-properties [style*="height: 18px; border-radius: 3px; padding-left: 8px;"],
|
||||
.notion-collection_view-block .notion-collection-item a > .notion-focusable)`,
|
||||
// inline highlights
|
||||
`.notion-selectable .notion-enable-hover[style*="background:"]`,
|
||||
// block highlights and hovered board items
|
||||
`:is(.notion-text-block > [style*="background:"],
|
||||
.notion-collection_view-block .notion-collection-item a > .notion-focusable)`,
|
||||
]) {
|
||||
for (const el of document.querySelectorAll(targetSelector)) {
|
||||
if (!el.innerText || /\s/.test(el.innerText)) continue;
|
||||
overrideStyle({
|
||||
element: el,
|
||||
selector: targetSelector,
|
||||
property: "background",
|
||||
variable: `bg-${el.innerText}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// board cards
|
||||
for (const group of document.querySelectorAll(
|
||||
".notion-board-view .notion-board-group"
|
||||
)) {
|
||||
const card = group.querySelector('a[style*="background"]'),
|
||||
innerText = card.innerText.replace("Drag image to reposition\n", "");
|
||||
if (!innerText || /\s/.test(innerText)) continue;
|
||||
const groupStyle = group
|
||||
.getAttribute("style")
|
||||
.match(/background(?:-color)?:\s*([^;]+);?/)[1];
|
||||
// in light mode pages in board views all have bg "white"
|
||||
// by default, must be styled based on parent
|
||||
overrideStyle({
|
||||
element: card,
|
||||
selector: `.notion-board-view .notion-board-group[style*="${groupStyle}"] a`,
|
||||
property: "background",
|
||||
variable: `bg-${innerText}`,
|
||||
specificity: ["mode"],
|
||||
});
|
||||
overrideStyle({
|
||||
element: group,
|
||||
selector: `.notion-board-view [style*="${groupStyle}"]:is(
|
||||
.notion-board-group,
|
||||
[style*="border-top-left-radius: 5px;"]
|
||||
)`,
|
||||
property: "background",
|
||||
variable: `dim-${innerText}`,
|
||||
specificity: ["mode"],
|
||||
});
|
||||
}
|
||||
|
||||
// use dim for callout blocks
|
||||
for (const el of document.querySelectorAll(
|
||||
'.notion-callout-block > div > [style*="background:"]'
|
||||
)) {
|
||||
if (!el.innerText || /\s/.test(el.innerText)) continue;
|
||||
overrideStyle({
|
||||
element: el,
|
||||
selector: ".notion-callout-block > div > div",
|
||||
property: "background",
|
||||
variable: `dim-${el.innerText}`,
|
||||
});
|
||||
}
|
||||
// use yellow for notification highlights
|
||||
overrideStyle({
|
||||
property: "background",
|
||||
variable: cssVariable({
|
||||
name: "bg-yellow",
|
||||
value: "rgba(255, 212, 0, 0.14)",
|
||||
}),
|
||||
specificity: ["value"],
|
||||
});
|
||||
// use light gray for taglikes e.g. file property values
|
||||
overrideStyle({
|
||||
selector: `[style*="height: 18px; border-radius: 3px; background"]`,
|
||||
property: "background",
|
||||
variable: "bg-light_gray",
|
||||
});
|
||||
};
|
||||
|
||||
const styleTooltips = () => {
|
||||
cssBody += `.notion-overlay-container [style*="border-radius: 3px; background:"
|
||||
][style*="max-width: calc(100vw - 24px); box-shadow:"
|
||||
][style*="padding: 4px 8px; font-size: 12px; line-height: 1.4; font-weight: 500;"] {
|
||||
background: rgb(15, 15, 15) !important;
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
}
|
||||
.notion-overlay-container [style*="border-radius: 3px; background:"
|
||||
][style*="max-width: calc(100vw - 24px); box-shadow:"
|
||||
][style*="padding: 4px 8px; font-size: 12px; line-height: 1.4; font-weight: 500;"]
|
||||
> [style*="color"] { color: rgb(127, 127, 127) !important; }`;
|
||||
};
|
||||
|
||||
const styleAccents = () => {
|
||||
const primary = cssVariable({
|
||||
name: "accent-primary",
|
||||
value: "rgb(35, 131, 226)",
|
||||
@ -149,11 +629,6 @@ const styleFonts = () => {
|
||||
variable: primary,
|
||||
specificity: ["value"],
|
||||
});
|
||||
overrideStyle({
|
||||
property: "fill",
|
||||
variable: primary,
|
||||
specificity: ["value"],
|
||||
});
|
||||
overrideStyle({
|
||||
property: "background",
|
||||
variable: primary,
|
||||
@ -232,12 +707,6 @@ const styleFonts = () => {
|
||||
valueAliases: secondaryAliases,
|
||||
specificity: ["value"],
|
||||
});
|
||||
overrideStyle({
|
||||
property: "fill",
|
||||
variable: secondary,
|
||||
valueAliases: secondaryAliases,
|
||||
specificity: ["value"],
|
||||
});
|
||||
overrideStyle({
|
||||
property: "background",
|
||||
variable: secondary,
|
||||
@ -247,11 +716,13 @@ const styleFonts = () => {
|
||||
fill: secondaryContrast,
|
||||
color: secondaryContrast,
|
||||
},
|
||||
postProcessor: (selector, cssProps) => [
|
||||
postProcessor(selector, cssProps) {
|
||||
return [
|
||||
`#notion-app .rdp-day_today:not(.rdp-day_selected):not(.rdp-day_value
|
||||
):not(.rdp-day_start):not(.rdp-day_end)::after, ${selector}`,
|
||||
cssProps,
|
||||
],
|
||||
];
|
||||
},
|
||||
});
|
||||
overrideStyle({
|
||||
property: "background",
|
||||
@ -262,7 +733,7 @@ const styleFonts = () => {
|
||||
fill: secondaryContrast,
|
||||
color: secondaryContrast,
|
||||
},
|
||||
postProcessor: (selector, cssProps) => {
|
||||
postProcessor(selector, cssProps) {
|
||||
delete cssProps["background"];
|
||||
return [
|
||||
`#notion-app .rdp-day_today:not(.rdp-day_selected):not(.rdp-day_value):not(.rdp-day_start
|
||||
@ -296,7 +767,7 @@ const styleFonts = () => {
|
||||
.map((shadow) => {
|
||||
return `[style*="${shadow}"] { ${shadow.replace(
|
||||
/rgba?\([^\)]+\)/g,
|
||||
`var(--theme--accent-primary, ${primary})`
|
||||
`var(--theme--accent-primary, ${primary.value})`
|
||||
)} !important; }`;
|
||||
})
|
||||
.join("")}
|
||||
@ -309,17 +780,25 @@ const styleFonts = () => {
|
||||
"border-right: 1px solid rgb(211, 79, 67)",
|
||||
]
|
||||
.map((border) => `[style*="${border}"]`)
|
||||
.join(", ")} { border-color: var(--theme--accent-secondary,
|
||||
${secondary.value}) !important; }`;
|
||||
},
|
||||
styleScrollbars = () => {
|
||||
overrideStyle({
|
||||
selector: "::-webkit-scrollbar-track, ::-webkit-scrollbar-corner",
|
||||
property: "background",
|
||||
variable: cssVariable({
|
||||
.join(", ")} { border-color: ${secondary.ref}; }`;
|
||||
};
|
||||
|
||||
const styleScrollbars = () => {
|
||||
const scrollbarTrack = cssVariable({
|
||||
name: "scrollbar-track",
|
||||
value: darkMode ? "rgba(202, 204, 206, 0.04)" : "#EDECE9",
|
||||
}),
|
||||
});
|
||||
overrideStyle({
|
||||
selector: "::-webkit-scrollbar-track",
|
||||
property: "background",
|
||||
variable: scrollbarTrack,
|
||||
specificity: ["mode"],
|
||||
});
|
||||
overrideStyle({
|
||||
selector: "::-webkit-scrollbar-corner",
|
||||
property: "background",
|
||||
variable: scrollbarTrack,
|
||||
specificity: ["mode"],
|
||||
});
|
||||
overrideStyle({
|
||||
selector: "::-webkit-scrollbar-thumb",
|
||||
@ -328,6 +807,7 @@ const styleFonts = () => {
|
||||
name: "scrollbar-thumb",
|
||||
value: darkMode ? "#474c50" : "#D3D1CB",
|
||||
}),
|
||||
specificity: ["mode"],
|
||||
});
|
||||
overrideStyle({
|
||||
selector: "::-webkit-scrollbar-thumb:hover",
|
||||
@ -336,27 +816,29 @@ const styleFonts = () => {
|
||||
name: "scrollbar-thumb_hover",
|
||||
value: darkMode ? "rgba(202, 204, 206, 0.3)" : "#AEACA6",
|
||||
}),
|
||||
specificity: ["mode"],
|
||||
});
|
||||
},
|
||||
styleCode = () => {
|
||||
};
|
||||
|
||||
const styleCode = () => {
|
||||
overrideStyle({
|
||||
selector: '.notion-text-block .notion-enable-hover[style*="mono"]',
|
||||
selector: `.notion-text-block .notion-enable-hover[style*="mono"]`,
|
||||
property: "color",
|
||||
variable: "code-inline_fg",
|
||||
});
|
||||
overrideStyle({
|
||||
selector: '.notion-text-block .notion-enable-hover[style*="mono"]',
|
||||
selector: `.notion-text-block .notion-enable-hover[style*="mono"]`,
|
||||
property: "background",
|
||||
variable: "code-inline_bg",
|
||||
});
|
||||
|
||||
overrideStyle({
|
||||
selector: '.notion-code-block > [style*="mono"]',
|
||||
selector: `.notion-code-block > [style*="mono"]`,
|
||||
property: "color",
|
||||
variable: "code-block_fg",
|
||||
});
|
||||
overrideStyle({
|
||||
selector: '.notion-code-block > div > [style*="background"]',
|
||||
selector: `.notion-code-block > div > [style*="background"]`,
|
||||
property: "background",
|
||||
variable: "code-block_bg",
|
||||
});
|
||||
@ -412,12 +894,21 @@ const styleFonts = () => {
|
||||
.operator, .entity, .url,
|
||||
:is(.language-css, .style) .string
|
||||
) { background: transparent !important; }`;
|
||||
};
|
||||
};
|
||||
|
||||
styleFonts();
|
||||
styleText();
|
||||
styleBorders();
|
||||
styleColoredText();
|
||||
styleBackgrounds();
|
||||
styleColoredBackgrounds();
|
||||
styleTooltips();
|
||||
styleAccents();
|
||||
styleScrollbars();
|
||||
styleCode();
|
||||
|
||||
cssBody = cssBody.replace(/\s+/g, " ");
|
||||
console.log(`body${modeSelector} { ${cssRoot} } ${cssBody}`);
|
||||
console.log(
|
||||
`body${modeSelector} { ${cssRoot} } ${Object.entries(cssRefs)
|
||||
.map(([body, selectors]) => `${[...new Set(selectors)].join(",")}{${body}}`)
|
||||
.join("")} ${cssBody}`.replace(/\s+/g, " ")
|
||||
);
|
||||
|
||||
@ -17,18 +17,16 @@ export default async (api, db) => {
|
||||
// appearance
|
||||
|
||||
if (loadThemeOverrides) {
|
||||
const $themeOverrides = html`<link
|
||||
document.head.append(html`<link
|
||||
rel="stylesheet"
|
||||
href=${enhancerUrl("core/theme.css")}
|
||||
/>`;
|
||||
document.head.append($themeOverrides);
|
||||
/>`);
|
||||
}
|
||||
|
||||
if (customStyles) {
|
||||
const $cssInsert = html`<style>
|
||||
document.head.append(html`<style>
|
||||
${customStyles}
|
||||
</style>`;
|
||||
document.head.append($cssInsert);
|
||||
</style>`);
|
||||
}
|
||||
|
||||
// menu
|
||||
@ -55,8 +53,8 @@ export default async (api, db) => {
|
||||
rounded-[5px] w-[1150px] h-[calc(100vh-100px)]
|
||||
max-w-[calc(100vw-100px)] max-h-[715px] overflow-hidden
|
||||
bg-[color:var(--theme--bg-secondary)] drop-shadow-xl
|
||||
transition opacity-0 scale-95
|
||||
group-open:(pointer-events-auto opacity-100 scale-100)
|
||||
transition opacity-0 scale-95
|
||||
"
|
||||
onload=${setTheme}
|
||||
></iframe>`;
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
"value": false
|
||||
}
|
||||
],
|
||||
"clientStyles": ["variables.css"],
|
||||
"clientStyles": [],
|
||||
"clientScripts": ["client.mjs"],
|
||||
"electronScripts": []
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -8,57 +8,56 @@ body.dark {
|
||||
--theme--font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif,
|
||||
"Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--theme--font-serif: Lyon-Text, Georgia, YuMincho, "Yu Mincho",
|
||||
"Hiragino Mincho ProN", "Hiragino Mincho Pro", "Songti TC", "Songti SC",
|
||||
SimSun, "Nanum Myeongjo", NanumMyeongjo, Batang, serif;
|
||||
--theme--font-serif: Lyon-Text, Georgia, ui-serif, serif;
|
||||
--theme--font-mono: iawriter-mono, Nitti, Menlo, Courier, monospace;
|
||||
--theme--font-code: SFMono-Regular, Consolas, "Liberation Mono", Menlo,
|
||||
Courier, monospace;
|
||||
--theme--font-code: SFMono-Regular, Menlo, Consolas, "PT Mono",
|
||||
"Liberation Mono", Courier, monospace;
|
||||
|
||||
--theme--fg-primary: rgba(255, 255, 255, 0.81);
|
||||
--theme--fg-secondary: rgb(155, 155, 155);
|
||||
--theme--fg-border: rgb(47, 47, 47);
|
||||
--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--fg-secondary: #9b9b9b;
|
||||
--theme--fg-border: #2f2f2f;
|
||||
--theme--fg-gray: rgba(155, 155, 155, 1);
|
||||
--theme--fg-brown: rgba(186, 133, 111, 1);
|
||||
--theme--fg-orange: rgba(199, 125, 72, 1);
|
||||
--theme--fg-yellow: rgba(202, 152, 73, 1);
|
||||
--theme--fg-green: rgba(82, 158, 114, 1);
|
||||
--theme--fg-blue: rgba(94, 135, 201, 1);
|
||||
--theme--fg-purple: rgba(157, 104, 211, 1);
|
||||
--theme--fg-pink: rgba(209, 87, 150, 1);
|
||||
--theme--fg-red: rgba(223, 84, 82, 1);
|
||||
|
||||
--theme--bg-primary: rgb(25, 25, 25);
|
||||
--theme--bg-secondary: rgb(32, 32, 32);
|
||||
--theme--bg-overlay: rgba(15, 15, 15, 0.6);
|
||||
--theme--bg-primary: #191919;
|
||||
--theme--bg-secondary: #202020;
|
||||
--theme--bg-hover: rgba(255, 255, 255, 0.055);
|
||||
--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-pink: rgb(105, 49, 76);
|
||||
--theme--bg-red: rgb(110, 54, 48);
|
||||
--theme--dim-light_gray: rgb(28, 28, 28);
|
||||
--theme--dim-gray: rgb(32, 32, 32);
|
||||
--theme--dim-brown: rgb(35, 30, 28);
|
||||
--theme--dim-orange: rgb(37, 31, 27);
|
||||
--theme--dim-yellow: rgb(35, 31, 26);
|
||||
--theme--dim-green: rgb(29, 34, 32);
|
||||
--theme--dim-blue: rgb(27, 31, 34);
|
||||
--theme--dim-purple: rgb(31, 29, 33);
|
||||
--theme--dim-pink: rgb(35, 28, 31);
|
||||
--theme--dim-red: rgb(36, 30, 29);
|
||||
--theme--bg-overlay: rgba(15, 15, 15, 0.8);
|
||||
--theme--bg-light_gray: #373737;
|
||||
--theme--bg-gray: #5a5a5a;
|
||||
--theme--bg-brown: #603b2c;
|
||||
--theme--bg-orange: #854c1d;
|
||||
--theme--bg-yellow: #89632a;
|
||||
--theme--bg-green: #2b593f;
|
||||
--theme--bg-blue: #28456c;
|
||||
--theme--bg-purple: #492f64;
|
||||
--theme--bg-pink: #69314c;
|
||||
--theme--bg-red: #6e3630;
|
||||
|
||||
--theme--accent-primary: rgb(35, 131, 226);
|
||||
--theme--accent-primary_hover: rgb(0, 117, 211);
|
||||
--theme--accent-primary_contrast: rgb(255, 255, 255);
|
||||
--theme--dim-light_gray: #1c1c1c;
|
||||
--theme--dim-gray: #202020;
|
||||
--theme--dim-brown: #231e1c;
|
||||
--theme--dim-orange: #251f1b;
|
||||
--theme--dim-yellow: #231f1a;
|
||||
--theme--dim-green: #1d2220;
|
||||
--theme--dim-blue: #1b1f22;
|
||||
--theme--dim-purple: #1f1d21;
|
||||
--theme--dim-pink: #231c1f;
|
||||
--theme--dim-red: #241e1d;
|
||||
|
||||
--theme--accent-primary: #2383e2;
|
||||
--theme--accent-primary_hover: #0075d3;
|
||||
--theme--accent-primary_contrast: #fff;
|
||||
--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: #eb5757;
|
||||
--theme--accent-secondary_contrast: #fff;
|
||||
--theme--accent-secondary_transparent: rgba(235, 87, 87, 0.1);
|
||||
|
||||
--theme--scrollbar-track: rgba(202, 204, 206, 0.04);
|
||||
@ -69,8 +68,8 @@ body.dark {
|
||||
--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-keyword: #d1949e;
|
||||
--theme--code-builtin: #bde052;
|
||||
--theme--code-class_name: rgba(255, 255, 255, 0.81);
|
||||
--theme--code-function: var(--theme--code-class_name);
|
||||
--theme--code-boolean: var(--theme--code-keyword);
|
||||
@ -78,15 +77,15 @@ body.dark {
|
||||
--theme--code-string: var(--theme--code-builtin);
|
||||
--theme--code-char: var(--theme--code-builtin);
|
||||
--theme--code-symbol: var(--theme--code-keyword);
|
||||
--theme--code-regex: rgb(238, 153, 0);
|
||||
--theme--code-url: rgb(245, 184, 61);
|
||||
--theme--code-regex: #e90;
|
||||
--theme--code-url: #f5b83d;
|
||||
--theme--code-operator: var(--theme--code-url);
|
||||
--theme--code-variable: var(--theme--code-url);
|
||||
--theme--code-constant: var(--theme--code-keyword);
|
||||
--theme--code-property: var(--theme--code-keyword);
|
||||
--theme--code-punctuation: var(--theme--code-class_name);
|
||||
--theme--code-important: var(--theme--code-regex);
|
||||
--theme--code-comment: rgb(153, 128, 102);
|
||||
--theme--code-comment: #998066;
|
||||
--theme--code-tag: var(--theme--code-keyword);
|
||||
--theme--code-attr_name: var(--theme--code-builtin);
|
||||
--theme--code-attr_value: var(--theme--code-keyword);
|
||||
@ -98,47 +97,46 @@ body.dark {
|
||||
--theme--code-atrule: var(--theme--code-keyword);
|
||||
--theme--code-selector: var(--theme--code-builtin);
|
||||
--theme--code-inserted: var(--theme--code-builtin);
|
||||
--theme--code-deleted: rgb(255, 0, 0);
|
||||
--theme--code-deleted: red;
|
||||
}
|
||||
|
||||
body:not(.dark) {
|
||||
--theme--font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif,
|
||||
"Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--theme--font-serif: Lyon-Text, Georgia, YuMincho, "Yu Mincho",
|
||||
"Hiragino Mincho ProN", "Hiragino Mincho Pro", "Songti TC", "Songti SC",
|
||||
SimSun, "Nanum Myeongjo", NanumMyeongjo, Batang, serif;
|
||||
--theme--font-serif: Lyon-Text, Georgia, ui-serif, serif;
|
||||
--theme--font-mono: iawriter-mono, Nitti, Menlo, Courier, monospace;
|
||||
--theme--font-code: SFMono-Regular, Consolas, "Liberation Mono", Menlo,
|
||||
Courier, monospace;
|
||||
--theme--font-code: SFMono-Regular, Menlo, Consolas, "PT Mono",
|
||||
"Liberation Mono", Courier, monospace;
|
||||
|
||||
--theme--fg-primary: rgb(55, 53, 47);
|
||||
--theme--fg-primary: #37352f;
|
||||
--theme--fg-secondary: rgba(25, 23, 17, 0.6);
|
||||
--theme--fg-border: rgb(233, 233, 231);
|
||||
--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--fg-border: #e9e9e7;
|
||||
--theme--fg-gray: rgba(120, 119, 116, 1);
|
||||
--theme--fg-brown: rgba(159, 107, 83, 1);
|
||||
--theme--fg-orange: rgba(217, 115, 13, 1);
|
||||
--theme--fg-yellow: rgba(203, 145, 47, 1);
|
||||
--theme--fg-green: rgba(68, 131, 97, 1);
|
||||
--theme--fg-blue: rgba(51, 126, 169, 1);
|
||||
--theme--fg-purple: rgba(144, 101, 176, 1);
|
||||
--theme--fg-pink: rgba(193, 76, 138, 1);
|
||||
--theme--fg-red: rgba(212, 76, 71, 1);
|
||||
|
||||
--theme--bg-primary: rgb(255, 255, 255);
|
||||
--theme--bg-secondary: rgb(251, 251, 250);
|
||||
--theme--bg-overlay: rgba(15, 15, 15, 0.6);
|
||||
--theme--bg-primary: #fff;
|
||||
--theme--bg-secondary: #fbfbfa;
|
||||
--theme--bg-hover: rgba(55, 53, 47, 0.08);
|
||||
--theme--bg-overlay: rgba(15, 15, 15, 0.6);
|
||||
--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-pink: rgb(245, 224, 233);
|
||||
--theme--bg-red: rgb(255, 226, 221);
|
||||
--theme--bg-gray: #e3e2e0;
|
||||
--theme--bg-brown: #eee0da;
|
||||
--theme--bg-orange: #fadec9;
|
||||
--theme--bg-yellow: #fdecc8;
|
||||
--theme--bg-green: #dbeddb;
|
||||
--theme--bg-blue: #d3e5ef;
|
||||
--theme--bg-purple: #e8deee;
|
||||
--theme--bg-pink: #f5e0e9;
|
||||
--theme--bg-red: #ffe2dd;
|
||||
|
||||
--theme--dim-light_gray: rgba(249, 249, 245, 0.5);
|
||||
--theme--dim-gray: rgba(247, 247, 245, 0.7);
|
||||
--theme--dim-brown: rgba(250, 246, 245, 0.7);
|
||||
@ -150,12 +148,12 @@ body:not(.dark) {
|
||||
--theme--dim-pink: rgba(251, 245, 251, 0.7);
|
||||
--theme--dim-red: rgba(253, 245, 243, 0.7);
|
||||
|
||||
--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: #2383e2;
|
||||
--theme--accent-primary_hover: #0075d3;
|
||||
--theme--accent-primary_contrast: #fff;
|
||||
--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: #eb5757;
|
||||
--theme--accent-secondary_contrast: #fff;
|
||||
--theme--accent-secondary_transparent: rgba(235, 87, 87, 0.1);
|
||||
|
||||
--theme--scrollbar-track: #edece9;
|
||||
@ -164,30 +162,30 @@ body:not(.dark) {
|
||||
|
||||
--theme--code-inline_fg: #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-block_fg: #37352f;
|
||||
--theme--code-block_bg: #f7f6f3;
|
||||
--theme--code-keyword: #07a;
|
||||
--theme--code-builtin: #690;
|
||||
--theme--code-class_name: #dd4a68;
|
||||
--theme--code-function: var(--theme--code-class_name);
|
||||
--theme--code-boolean: rgb(153, 0, 85);
|
||||
--theme--code-boolean: #905;
|
||||
--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-regex: #e90;
|
||||
--theme--code-url: #9a6e3a;
|
||||
--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-punctuation: #999;
|
||||
--theme--code-important: var(--theme--code-regex);
|
||||
--theme--code-comment: rgb(112, 128, 144);
|
||||
--theme--code-comment: #708090;
|
||||
--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-namespace: #37352f;
|
||||
--theme--code-prolog: var(--theme--code-comment);
|
||||
--theme--code-doctype: var(--theme--code-comment);
|
||||
--theme--code-cdata: var(--theme--code-comment);
|
||||
|
||||
@ -48,5 +48,4 @@ chrome.runtime.onMessage.addListener((msg, sender) => {
|
||||
} else if (msg.message === "reload-app") {
|
||||
reloadNotionTabs();
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user