From 6178c599512e8dcdf77bf96b8a686bcaa4f0ce57 Mon Sep 17 00:00:00 2001
From: waaaaaaaaaaaaaaaaaaaaa <jiaruiliao@gmail.com>
Date: Tue, 4 Jan 2022 15:09:47 +1100
Subject: [PATCH] add custom colours to tag and highlight previews
---
repo/theming/_mapColors.js | 48 +++++++++++--
repo/theming/colors.css | 143 +++++++++++++++++++++++++++++++++++++
2 files changed, 184 insertions(+), 7 deletions(-)
diff --git a/repo/theming/_mapColors.js b/repo/theming/_mapColors.js
index b65d5c5..940e1e6 100644
--- a/repo/theming/_mapColors.js
+++ b/repo/theming/_mapColors.js
@@ -26,11 +26,10 @@ const lightGray = {
'board-card': 'rgba(60, 65, 68, 0.7)',
'board-card_text': 'inherit',
'board-text': 'rgba(107, 112, 116, 0.7)',
- }
+ },
};
// TODO also add colouring for the preview box?
-
const colors = {
'gray': {
'light': {
@@ -293,7 +292,10 @@ function css() {
notCallout = ":not([style*='border-radius'])",
notBoardCard = ":not([style*='box-shadow'])",
isTag =
- "[style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;']";
+ "[style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;']",
+ isTagPalette = "[style*='border-radius: 3px;'][style*='width: 18px; height: 18px;']",
+ isHighlightPalette =
+ "[style*='align-items: center; justify-content: center; width: 22px; height: 22px;'][style*='border-radius: 3px; font-weight: 500;']";
let css = '';
// generate light gray separately
@@ -307,6 +309,16 @@ function css() {
color: var(--theme--tag_light-gray-text) !important;
}
+ .notion-body:not(.dark) [style*='background: ${
+ lightGray.light['tag']
+ }']${isTagPalette},
+ .notion-body.dark [style*='background: ${
+ lightGray.dark['board-text']
+ }']${isTagPalette} {
+ background: var(--theme--tag_light-gray) !important;
+ color: var(--theme--tag_light-gray-text) !important;
+ }
+
.notion-body:not(.dark)
.notion-board-group[style*='background-color: ${lightGray.light['board']}'],
.notion-body.dark
@@ -415,6 +427,25 @@ function css() {
color: var(--theme--tag_${c}-text) !important;
}
+ .notion-body:not(.dark) [style*='background: ${
+ colors[c].light['callout']
+ }']${isHighlightPalette},
+ .notion-body.dark [style*='background: ${
+ colors[c].dark['callout']
+ }']${isHighlightPalette} {
+ background: var(--theme--highlight_${c}) !important;
+ color: var(--theme--highlight_${c}-text) !important;
+ }
+ .notion-body:not(.dark) [style*='background: ${
+ colors[c].light['tag']
+ }']${isTagPalette},
+ .notion-body.dark [style*='background: ${
+ colors[c].dark['board-text']
+ }']${isTagPalette} {
+ background: var(--theme--tag_${c}) !important;
+ color: var(--theme--tag_${c}-text) !important;
+ }
+
.notion-body:not(.dark)
.notion-board-group[style*='background-color: ${colors[c].light['board']}'],
.notion-body.dark
@@ -452,10 +483,14 @@ function css() {
}
.notion-body:not(.dark) .notion-board-view
[style*='color: ${colors[c].light['board-text']}'],
- .notion-body.dark .notion-board-view [style*='color: ${colors[c].dark['board-text']}'],
+ .notion-body.dark .notion-board-view [style*='color: ${
+ colors[c].dark['board-text']
+ }'],
.notion-body:not(.dark) .notion-board-view
[style*='fill: ${colors[c].light['board-text']}'],
- .notion-body.dark .notion-board-view [style*='fill: ${colors[c].dark['board-text']}'] {
+ .notion-body.dark .notion-board-view [style*='fill: ${
+ colors[c].dark['board-text']
+ }'] {
color: var(--theme--board_${c}-text) !important;
fill: var(--theme--board_${c}-text) !important;
}
@@ -467,7 +502,7 @@ function css() {
// 'light' or 'dark'
function vars(mode) {
// add the prefixes that light gray doesn't have first to preserve the same order
- const sets = {'text': '', 'highlight': '', 'callout': ''};
+ const sets = { text: '', highlight: '', callout: '' };
// light gray separately
for (let key in lightGray[mode]) {
@@ -502,4 +537,3 @@ if (process.argv.includes('css')) {
} else if (process.argv.includes('dark')) {
console.log(vars('dark'));
}
-
diff --git a/repo/theming/colors.css b/repo/theming/colors.css
index c2aa19b..4a18ae8 100644
--- a/repo/theming/colors.css
+++ b/repo/theming/colors.css
@@ -14,6 +14,14 @@
color: var(--theme--tag_light-gray-text) !important;
}
+.notion-body:not(.dark)
+ [style*='background: rgba(227, 226, 224, 0.5)'][style*='border-radius: 3px;'][style*='width: 18px; height: 18px;'],
+.notion-body.dark
+ [style*='background: rgba(107, 112, 116, 0.7)'][style*='border-radius: 3px;'][style*='width: 18px; height: 18px;'] {
+ background: var(--theme--tag_light-gray) !important;
+ color: var(--theme--tag_light-gray-text) !important;
+}
+
.notion-body:not(.dark)
.notion-board-group[style*='background-color: rgba(249, 249, 245, 0.5)'],
.notion-body.dark .notion-board-group[style*='background-color: rgba(51, 55, 59, 0.7)'],
@@ -125,6 +133,21 @@
color: var(--theme--tag_gray-text) !important;
}
+.notion-body:not(.dark)
+ [style*='background: rgb(241, 241, 239)'][style*='align-items: center; justify-content: center; width: 22px; height: 22px;'][style*='border-radius: 3px; font-weight: 500;'],
+.notion-body.dark
+ [style*='background: rgb(60, 65, 68)'][style*='align-items: center; justify-content: center; width: 22px; height: 22px;'][style*='border-radius: 3px; font-weight: 500;'] {
+ background: var(--theme--highlight_gray) !important;
+ color: var(--theme--highlight_gray-text) !important;
+}
+.notion-body:not(.dark)
+ [style*='background: rgb(227, 226, 224)'][style*='border-radius: 3px;'][style*='width: 18px; height: 18px;'],
+.notion-body.dark
+ [style*='background: rgb(107, 112, 116)'][style*='border-radius: 3px;'][style*='width: 18px; height: 18px;'] {
+ background: var(--theme--tag_gray) !important;
+ color: var(--theme--tag_gray-text) !important;
+}
+
.notion-body:not(.dark)
.notion-board-group[style*='background-color: rgba(247, 247, 245, 0.7)'],
.notion-body.dark .notion-board-group[style*='background-color: rgb(51, 55, 59)'],
@@ -236,6 +259,21 @@
color: var(--theme--tag_brown-text) !important;
}
+.notion-body:not(.dark)
+ [style*='background: rgb(244, 238, 238)'][style*='align-items: center; justify-content: center; width: 22px; height: 22px;'][style*='border-radius: 3px; font-weight: 500;'],
+.notion-body.dark
+ [style*='background: rgb(76, 61, 53)'][style*='align-items: center; justify-content: center; width: 22px; height: 22px;'][style*='border-radius: 3px; font-weight: 500;'] {
+ background: var(--theme--highlight_brown) !important;
+ color: var(--theme--highlight_brown-text) !important;
+}
+.notion-body:not(.dark)
+ [style*='background: rgb(238, 224, 218)'][style*='border-radius: 3px;'][style*='width: 18px; height: 18px;'],
+.notion-body.dark
+ [style*='background: rgb(155, 98, 69)'][style*='border-radius: 3px;'][style*='width: 18px; height: 18px;'] {
+ background: var(--theme--tag_brown) !important;
+ color: var(--theme--tag_brown-text) !important;
+}
+
.notion-body:not(.dark)
.notion-board-group[style*='background-color: rgba(250, 246, 245, 0.7)'],
.notion-body.dark .notion-board-group[style*='background-color: rgb(59, 54, 51)'],
@@ -347,6 +385,21 @@
color: var(--theme--tag_orange-text) !important;
}
+.notion-body:not(.dark)
+ [style*='background: rgb(251, 236, 221)'][style*='align-items: center; justify-content: center; width: 22px; height: 22px;'][style*='border-radius: 3px; font-weight: 500;'],
+.notion-body.dark
+ [style*='background: rgb(85, 59, 41)'][style*='align-items: center; justify-content: center; width: 22px; height: 22px;'][style*='border-radius: 3px; font-weight: 500;'] {
+ background: var(--theme--highlight_orange) !important;
+ color: var(--theme--highlight_orange-text) !important;
+}
+.notion-body:not(.dark)
+ [style*='background: rgb(250, 222, 201)'][style*='border-radius: 3px;'][style*='width: 18px; height: 18px;'],
+.notion-body.dark
+ [style*='background: rgb(168, 92, 30)'][style*='border-radius: 3px;'][style*='width: 18px; height: 18px;'] {
+ background: var(--theme--tag_orange) !important;
+ color: var(--theme--tag_orange-text) !important;
+}
+
.notion-body:not(.dark)
.notion-board-group[style*='background-color: rgba(252, 245, 242, 0.7)'],
.notion-body.dark .notion-board-group[style*='background-color: rgb(61, 54, 49)'],
@@ -458,6 +511,21 @@
color: var(--theme--tag_yellow-text) !important;
}
+.notion-body:not(.dark)
+ [style*='background: rgb(251, 243, 219)'][style*='align-items: center; justify-content: center; width: 22px; height: 22px;'][style*='border-radius: 3px; font-weight: 500;'],
+.notion-body.dark
+ [style*='background: rgb(79, 64, 41)'][style*='align-items: center; justify-content: center; width: 22px; height: 22px;'][style*='border-radius: 3px; font-weight: 500;'] {
+ background: var(--theme--highlight_yellow) !important;
+ color: var(--theme--highlight_yellow-text) !important;
+}
+.notion-body:not(.dark)
+ [style*='background: rgb(253, 236, 200)'][style*='border-radius: 3px;'][style*='width: 18px; height: 18px;'],
+.notion-body.dark
+ [style*='background: rgb(137, 107, 42)'][style*='border-radius: 3px;'][style*='width: 18px; height: 18px;'] {
+ background: var(--theme--tag_yellow) !important;
+ color: var(--theme--tag_yellow-text) !important;
+}
+
.notion-body:not(.dark)
.notion-board-group[style*='background-color: rgba(250, 247, 237, 0.7)'],
.notion-body.dark .notion-board-group[style*='background-color: rgb(56, 55, 49)'],
@@ -569,6 +637,21 @@
color: var(--theme--tag_green-text) !important;
}
+.notion-body:not(.dark)
+ [style*='background: rgb(237, 243, 236)'][style*='align-items: center; justify-content: center; width: 22px; height: 22px;'][style*='border-radius: 3px; font-weight: 500;'],
+.notion-body.dark
+ [style*='background: rgb(46, 68, 58)'][style*='align-items: center; justify-content: center; width: 22px; height: 22px;'][style*='border-radius: 3px; font-weight: 500;'] {
+ background: var(--theme--highlight_green) !important;
+ color: var(--theme--highlight_green-text) !important;
+}
+.notion-body:not(.dark)
+ [style*='background: rgb(219, 237, 219)'][style*='border-radius: 3px;'][style*='width: 18px; height: 18px;'],
+.notion-body.dark
+ [style*='background: rgb(61, 124, 86)'][style*='border-radius: 3px;'][style*='width: 18px; height: 18px;'] {
+ background: var(--theme--tag_green) !important;
+ color: var(--theme--tag_green-text) !important;
+}
+
.notion-body:not(.dark)
.notion-board-group[style*='background-color: rgba(244, 248, 243, 0.7)'],
.notion-body.dark .notion-board-group[style*='background-color: rgb(49, 57, 53)'],
@@ -680,6 +763,21 @@
color: var(--theme--tag_blue-text) !important;
}
+.notion-body:not(.dark)
+ [style*='background: rgb(231, 243, 248)'][style*='align-items: center; justify-content: center; width: 22px; height: 22px;'][style*='border-radius: 3px; font-weight: 500;'],
+.notion-body.dark
+ [style*='background: rgb(45, 66, 86)'][style*='align-items: center; justify-content: center; width: 22px; height: 22px;'][style*='border-radius: 3px; font-weight: 500;'] {
+ background: var(--theme--highlight_blue) !important;
+ color: var(--theme--highlight_blue-text) !important;
+}
+.notion-body:not(.dark)
+ [style*='background: rgb(211, 229, 239)'][style*='border-radius: 3px;'][style*='width: 18px; height: 18px;'],
+.notion-body.dark
+ [style*='background: rgb(46, 117, 164)'][style*='border-radius: 3px;'][style*='width: 18px; height: 18px;'] {
+ background: var(--theme--tag_blue) !important;
+ color: var(--theme--tag_blue-text) !important;
+}
+
.notion-body:not(.dark)
.notion-board-group[style*='background-color: rgba(241, 248, 251, 0.7)'],
.notion-body.dark .notion-board-group[style*='background-color: rgb(49, 56, 64)'],
@@ -791,6 +889,21 @@
color: var(--theme--tag_purple-text) !important;
}
+.notion-body:not(.dark)
+ [style*='background: rgba(244, 240, 247, 0.8)'][style*='align-items: center; justify-content: center; width: 22px; height: 22px;'][style*='border-radius: 3px; font-weight: 500;'],
+.notion-body.dark
+ [style*='background: rgb(69, 58, 91)'][style*='align-items: center; justify-content: center; width: 22px; height: 22px;'][style*='border-radius: 3px; font-weight: 500;'] {
+ background: var(--theme--highlight_purple) !important;
+ color: var(--theme--highlight_purple-text) !important;
+}
+.notion-body:not(.dark)
+ [style*='background: rgb(232, 222, 238)'][style*='border-radius: 3px;'][style*='width: 18px; height: 18px;'],
+.notion-body.dark
+ [style*='background: rgb(123, 96, 180)'][style*='border-radius: 3px;'][style*='width: 18px; height: 18px;'] {
+ background: var(--theme--tag_purple) !important;
+ color: var(--theme--tag_purple-text) !important;
+}
+
.notion-body:not(.dark)
.notion-board-group[style*='background-color: rgba(249, 246, 252, 0.7)'],
.notion-body.dark .notion-board-group[style*='background-color: rgb(57, 53, 65)'],
@@ -902,6 +1015,21 @@
color: var(--theme--tag_pink-text) !important;
}
+.notion-body:not(.dark)
+ [style*='background: rgba(249, 238, 243, 0.8)'][style*='align-items: center; justify-content: center; width: 22px; height: 22px;'][style*='border-radius: 3px; font-weight: 500;'],
+.notion-body.dark
+ [style*='background: rgb(81, 56, 77)'][style*='align-items: center; justify-content: center; width: 22px; height: 22px;'][style*='border-radius: 3px; font-weight: 500;'] {
+ background: var(--theme--highlight_pink) !important;
+ color: var(--theme--highlight_pink-text) !important;
+}
+.notion-body:not(.dark)
+ [style*='background: rgb(245, 224, 233)'][style*='border-radius: 3px;'][style*='width: 18px; height: 18px;'],
+.notion-body.dark
+ [style*='background: rgb(169, 76, 157)'][style*='border-radius: 3px;'][style*='width: 18px; height: 18px;'] {
+ background: var(--theme--tag_pink) !important;
+ color: var(--theme--tag_pink-text) !important;
+}
+
.notion-body:not(.dark)
.notion-board-group[style*='background-color: rgba(251, 245, 251, 0.7)'],
.notion-body.dark .notion-board-group[style*='background-color: rgb(60, 53, 58)'],
@@ -1013,6 +1141,21 @@
color: var(--theme--tag_red-text) !important;
}
+.notion-body:not(.dark)
+ [style*='background: rgb(253, 235, 236)'][style*='align-items: center; justify-content: center; width: 22px; height: 22px;'][style*='border-radius: 3px; font-weight: 500;'],
+.notion-body.dark
+ [style*='background: rgb(94, 52, 54)'][style*='align-items: center; justify-content: center; width: 22px; height: 22px;'][style*='border-radius: 3px; font-weight: 500;'] {
+ background: var(--theme--highlight_red) !important;
+ color: var(--theme--highlight_red-text) !important;
+}
+.notion-body:not(.dark)
+ [style*='background: rgb(255, 226, 221)'][style*='border-radius: 3px;'][style*='width: 18px; height: 18px;'],
+.notion-body.dark
+ [style*='background: rgb(194, 65, 82)'][style*='border-radius: 3px;'][style*='width: 18px; height: 18px;'] {
+ background: var(--theme--tag_red) !important;
+ color: var(--theme--tag_red-text) !important;
+}
+
.notion-body:not(.dark)
.notion-board-group[style*='background-color: rgba(253, 245, 243, 0.7)'],
.notion-body.dark .notion-board-group[style*='background-color: rgb(66, 51, 51)'],