dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-05 13:19:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

pr #47 by @blorbb: colour fixes

Browse Source 
light gray tags missing - #42

gruvbox dark tag colours not applying - #35
list and timeline tag colours not applying - #35

also added: apply theme variables to the palette of colours when selecting a tag/background colour
This commit is contained in:
Tom 2022-01-21 12:20:13 +11:00 committed by GitHub
commit b93f730170
16 changed files with 503 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
repo/cherry-cola/variables.css
View File

@ -10,6 +10,7 @@
--cola--tet: #492341;
--cola--info: #9b6890;
--cola--accent: #bf799b;
--cola--light_gray: #ADADAD;
--cola--gray: #8a8a8a;
--cola--brown: #755241;
--cola--orange: #e6846b;
@ -98,6 +99,8 @@
--theme--callout_red: var(--theme--tag_red);
--theme--callout_red-text: var(--theme--tag-text);
--theme--tag_light_gray: var(--cola--light_gray);
--theme--tag_light_gray-text: var(--cola--main);
--theme--tag_gray: var(--cola--gray);
--theme--tag_gray-text: var(--cola--main);
--theme--tag_brown: var(--cola--brown);
@ -117,6 +120,9 @@
--theme--tag_red: var(--cola--red);
--theme--tag_red-text: #ffffff;
--theme--board_light_gray: var(--cola--light_gray);
--theme--board_light_gray-text: var(--cola--main);
--theme--board_light_gray-card: var(--theme--tag_light_gray);
--theme--board_gray: var(--cola--gray);
--theme--board_gray-text: var(--cola--main);
--theme--board_gray-card: var(--theme--tag_gray);

4
repo/dark+/variables.css
View File

@ -69,6 +69,7 @@
--theme--callout_pink: rgba(243, 61, 158, 0.301);
--theme--callout_red: rgba(122, 20, 20, 0.623);
--theme--tag_light_gray: rgba(165, 166, 167, 0.5);
--theme--tag_gray: rgba(126, 128, 129, 0.5);
--theme--tag_brown: #50331f;
--theme--tag_orange: rgba(255, 155, 0, 0.58);
@ -79,6 +80,9 @@
--theme--tag_pink: rgba(243, 61, 159, 0.5);
--theme--tag_red: rgb(122, 20, 20);
--theme--board_light_gray: rgba(165, 166, 167, 0.089);
--theme--board_light_gray-card: var(--theme--tag_light_gray);
--theme--board_light_gray-card_text: var(--theme--tag_light_gray-text);
--theme--board_gray: rgba(126, 128, 129, 0.089);
--theme--board_gray-card: var(--theme--tag_gray);
--theme--board_gray-card_text: var(--theme--tag_gray-text);

8
repo/dracula/variables.css
View File

@ -20,6 +20,7 @@
--dracula--selection: #44475a;
--dracula--block_highlight: #44475a75;
--dracula--light_gray: #CFCFCF;
--dracula--gray: var(--dracula--fg_dark);
--dracula--brown: #6272a4;
--dracula--orange: #ffb86c;
@ -30,6 +31,7 @@
--dracula--pink: #ff79c6;
--dracula--red: #ff5555;
--dracula--bg_light_gray: #71737E;
--dracula--bg_gray: var(--dracula--bg_light);
--dracula--bg_brown: #465079;
--dracula--bg_orange: #8a6345;
@ -112,6 +114,8 @@
--theme--tag_default: var(--dracula--comment);
--theme--tag_default-text: var(--dracula--fg);
--theme--tag_light_gray: var(--dracula--light_gray);
--theme--tag_light_gray-text: var(--dracula--bg);
--theme--tag_gray: var(--dracula--gray);
--theme--tag_gray-text: var(--dracula--bg);
--theme--tag_brown: var(--dracula--brown);
@ -131,6 +135,10 @@
--theme--tag_red: var(--dracula--red);
--theme--tag_red-text: var(--dracula--fg);
--theme--board_light_gray: var(--dracula--bg_light_gray);
--theme--board_light_gray-card: var(--theme--tag_light_gray);
--theme--board_light_gray-card_text: var(--theme--tag_light_gray-text);
--theme--board_light_gray-text: var(--dracula--fg);
--theme--board_gray: var(--dracula--bg_gray);
--theme--board_gray-card: var(--theme--tag_gray);
--theme--board_gray-card_text: var(--theme--tag_gray-text);

114
repo/gruvbox-dark/variables.css
View File

@ -8,6 +8,7 @@
:root.dark {
--gruvbox_dark--bg: #282828;
--gruvbox_dark--light_gray_dark: #B3A89E;
--gruvbox_dark--gray_dark: #928374;
--gruvbox_dark--red_dark: #cc241d;
--gruvbox_dark--red_light: #fb4934;
@ -77,91 +78,96 @@
--theme--text_pink: var(--gruvbox_dark--purple_light);
--theme--text_red: var(--gruvbox_dark--red_dark);
--theme--highlight_gray: var(--gruvbox_light--gray_dark);
--theme--highlight_gray-text: var(--gruvbox_light--bg0);
--theme--highlight_gray: var(--gruvbox_dark--gray_dark);
--theme--highlight_gray-text: var(--gruvbox_dark--bg0);
--theme--highlight_brown: var(--theme--tag_brown);
--theme--highlight_brown-text: var(--gruvbox_light--bg0);
--theme--highlight_orange: var(--gruvbox_light--orange_dark);
--theme--highlight_orange-text: var(--gruvbox_light--bg0);
--theme--highlight_yellow: var(--gruvbox_light--yellow_dark);
--theme--highlight_yellow-text: var(--gruvbox_light--bg0);
--theme--highlight_green: var(--gruvbox_light--green_dark);
--theme--highlight_green-text: var(--gruvbox_light--bg0);
--theme--highlight_blue: var(--gruvbox_light--blue_dark);
--theme--highlight_blue-text: var(--gruvbox_light--bg0);
--theme--highlight_purple: var(--gruvbox_light--purple_dark);
--theme--highlight_purple-text: var(--gruvbox_light--bg0);
--theme--highlight_brown-text: var(--gruvbox_dark--bg0);
--theme--highlight_orange: var(--gruvbox_dark--orange_dark);
--theme--highlight_orange-text: var(--gruvbox_dark--bg0);
--theme--highlight_yellow: var(--gruvbox_dark--yellow_dark);
--theme--highlight_yellow-text: var(--gruvbox_dark--bg0);
--theme--highlight_green: var(--gruvbox_dark--green_dark);
--theme--highlight_green-text: var(--gruvbox_dark--bg0);
--theme--highlight_blue: var(--gruvbox_dark--blue_dark);
--theme--highlight_blue-text: var(--gruvbox_dark--bg0);
--theme--highlight_purple: var(--gruvbox_dark--purple_dark);
--theme--highlight_purple-text: var(--gruvbox_dark--bg0);
--theme--highlight_pink: var(--theme--tag_pink);
--theme--highlight_pink-text: var(--gruvbox_light--bg0);
--theme--highlight_red: var(--gruvbox_light--red_dark);
--theme--highlight_red-text: var(--gruvbox_light--bg0);
--theme--highlight_pink-text: var(--gruvbox_dark--bg0);
--theme--highlight_red: var(--gruvbox_dark--red_dark);
--theme--highlight_red-text: var(--gruvbox_dark--bg0);
--theme--callout_gray: var(--theme--highlight_gray);
--theme--callout_gray-text: var(--gruvbox_light--bg0);
--theme--callout_gray-text: var(--gruvbox_dark--bg0);
--theme--callout_brown: var(--theme--highlight_brown);
--theme--callout_brown-text: var(--gruvbox_light--bg0);
--theme--callout_brown-text: var(--gruvbox_dark--bg0);
--theme--callout_orange: var(--theme--highlight_orange);
--theme--callout_orange-text: var(--gruvbox_light--bg0);
--theme--callout_orange-text: var(--gruvbox_dark--bg0);
--theme--callout_yellow: var(--theme--highlight_yellow);
--theme--callout_yellow-text: var(--gruvbox_light--bg0);
--theme--callout_yellow-text: var(--gruvbox_dark--bg0);
--theme--callout_green: var(--theme--highlight_green);
--theme--callout_green-text: var(--gruvbox_light--bg0);
--theme--callout_green-text: var(--gruvbox_dark--bg0);
--theme--callout_blue: var(--theme--highlight_blue);
--theme--callout_blue-text: var(--gruvbox_light--bg0);
--theme--callout_blue-text: var(--gruvbox_dark--bg0);
--theme--callout_purple: var(--theme--highlight_purple);
--theme--callout_purple-text: var(--gruvbox_light--bg0);
--theme--callout_purple-text: var(--gruvbox_dark--bg0);
--theme--callout_pink: var(--theme--highlight_pink);
--theme--callout_pink-text: var(--gruvbox_light--bg0);
--theme--callout_pink-text: var(--gruvbox_dark--bg0);
--theme--callout_red: var(--theme--highlight_red);
--theme--callout_red-text: var(--gruvbox_light--bg0);
--theme--callout_red-text: var(--gruvbox_dark--bg0);
--theme--tag_default: var(--gruvbox_light--gray_dark);
--theme--tag_default-text: var(--gruvbox_light--bg2);
--theme--tag_gray: var(--gruvbox_light--gray_dark);
--theme--tag_gray-text: var(--gruvbox_light--bg2);
--theme--tag_brown: var(--gruvbox_light--fg3);
--theme--tag_brown-text: var(--gruvbox_light--bg2);
--theme--tag_orange: var(--gruvbox_light--orange_dark);
--theme--tag_orange-text: var(--gruvbox_light--bg0);
--theme--tag_yellow: var(--gruvbox_light--yellow_dark);
--theme--tag_yellow-text: var(--gruvbox_light--bg0);
--theme--tag_green: var(--gruvbox_light--green_dark);
--theme--tag_green-text: var(--gruvbox_light--bg0);
--theme--tag_blue: var(--gruvbox_light--blue_dark);
--theme--tag_blue-text: var(--gruvbox_light--bg0);
--theme--tag_purple: var(--gruvbox_light--purple_dark);
--theme--tag_purple-text: var(--gruvbox_light--bg0);
--theme--tag_pink: var(--gruvbox_light--purple_light);
--theme--tag_pink-text: var(--gruvbox_light--bg0);
--theme--tag_red: var(--gruvbox_light--red_dark);
--theme--tag_red-text: var(--gruvbox_light--bg0);
--theme--tag_default: var(--gruvbox_dark--gray_dark);
--theme--tag_default-text: var(--gruvbox_dark--bg2);
--theme--tag_light_gray: var(--gruvbox_dark--light_gray_dark);
--theme--tag_light_gray-text: var(--gruvbox_dark--bg2);
--theme--tag_gray: var(--gruvbox_dark--gray_dark);
--theme--tag_gray-text: var(--gruvbox_dark--bg2);
--theme--tag_brown: var(--gruvbox_dark--fg3);
--theme--tag_brown-text: var(--gruvbox_dark--bg2);
--theme--tag_orange: var(--gruvbox_dark--orange_dark);
--theme--tag_orange-text: var(--gruvbox_dark--bg0);
--theme--tag_yellow: var(--gruvbox_dark--yellow_dark);
--theme--tag_yellow-text: var(--gruvbox_dark--bg0);
--theme--tag_green: var(--gruvbox_dark--green_dark);
--theme--tag_green-text: var(--gruvbox_dark--bg0);
--theme--tag_blue: var(--gruvbox_dark--blue_dark);
--theme--tag_blue-text: var(--gruvbox_dark--bg0);
--theme--tag_purple: var(--gruvbox_dark--purple_dark);
--theme--tag_purple-text: var(--gruvbox_dark--bg0);
--theme--tag_pink: var(--gruvbox_dark--purple_light);
--theme--tag_pink-text: var(--gruvbox_dark--bg0);
--theme--tag_red: var(--gruvbox_dark--red_dark);
--theme--tag_red-text: var(--gruvbox_dark--bg0);
--theme--board_light_gray: var(--gruvbox_dark--light_gray_dark);
--theme--board_light_gray-text: var(--gruvbox_dark--bg0);
--theme--board_light_gray-card: var(--theme--tag_light_gray);
--theme--board_gray: var(--theme--text_gray);
--theme--board_gray-text: var(--gruvbox_light--bg0);
--theme--board_gray-text: var(--gruvbox_dark--bg0);
--theme--board_gray-card: var(--theme--tag_gray);
--theme--board_brown: var(--theme--text_brown);
--theme--board_brown-text: var(--gruvbox_light--bg0);
--theme--board_brown-text: var(--gruvbox_dark--bg0);
--theme--board_brown-card: var(--theme--tag_brown);
--theme--board_orange: var(--theme--text_orange);
--theme--board_orange-text: var(--gruvbox_light--bg0);
--theme--board_orange-text: var(--gruvbox_dark--bg0);
--theme--board_orange-card: var(--theme--tag_orange);
--theme--board_yellow: var(--theme--text_yellow);
--theme--board_yellow-text: var(--gruvbox_light--bg0);
--theme--board_yellow-text: var(--gruvbox_dark--bg0);
--theme--board_yellow-card: var(--theme--tag_yellow);
--theme--board_green: var(--theme--text_green);
--theme--board_green-text: var(--gruvbox_light--bg0);
--theme--board_green-text: var(--gruvbox_dark--bg0);
--theme--board_green-card: var(--theme--tag_green);
--theme--board_blue: var(--theme--text_blue);
--theme--board_blue-text: var(--gruvbox_light--bg0);
--theme--board_blue-text: var(--gruvbox_dark--bg0);
--theme--board_blue-card: var(--theme--tag_blue);
--theme--board_purple: var(--theme--text_purple);
--theme--board_purple-text: var(--gruvbox_light--bg0);
--theme--board_purple-text: var(--gruvbox_dark--bg0);
--theme--board_purple-card: var(--theme--tag_purple);
--theme--board_pink: var(--theme--text_pink);
--theme--board_pink-text: var(--gruvbox_light--bg0);
--theme--board_pink-text: var(--gruvbox_dark--bg0);
--theme--board_pink-card: var(--theme--tag_pink);
--theme--board_red: var(--theme--text_red);
--theme--board_red-text: var(--gruvbox_light--bg0);
--theme--board_red-text: var(--gruvbox_dark--bg0);
--theme--board_red-card: var(--theme--tag_red);
--theme--code_inline: var(--gruvbox_dark--bg1);

6
repo/gruvbox-light/variables.css
View File

@ -12,6 +12,7 @@
* but the _light variants are actually darker here
*/
--gruvbox_light--bg: #fbf1c7;
--gruvbox_light--light_gray_dark: #B3A89E;
--gruvbox_light--gray_dark: #928374;
--gruvbox_light--red_dark: #cc241d;
--gruvbox_light--red_light: #9d0006;
@ -122,6 +123,8 @@
--theme--tag_default: var(--gruvbox_light--gray_dark);
--theme--tag_default-text: var(--gruvbox_light--bg2);
--theme--tag_light_gray: var(--gruvbox_light--light_gray_dark);
--theme--tag_light_gray-text: var(--gruvbox_light--bg0);
--theme--tag_gray: var(--gruvbox_light--gray_dark);
--theme--tag_gray-text: var(--gruvbox_light--bg2);
--theme--tag_brown: var(--gruvbox_light--fg3);
@ -141,6 +144,9 @@
--theme--tag_red: var(--gruvbox_light--red_dark);
--theme--tag_red-text: var(--gruvbox_light--bg0);
--theme--board_light_gray: var(--gruvbox_light--light_gray_dark);
--theme--board_light_gray-text: var(--gruvbox_light--bg0_h);
--theme--board_light_gray-card: var(--theme--tag_light_gray);
--theme--board_gray: var(--theme--text_gray);
--theme--board_gray-text: var(--gruvbox_light--bg0);
--theme--board_gray-card: var(--theme--tag_gray);

5
repo/light+/variables.css
View File

@ -80,6 +80,8 @@
--theme--callout_red-text: #721c24;
--theme--tag_default: rgb(234, 234, 234);
--theme--tag_light_gray: rgb(240, 240, 240);
--theme--tag_light_gray-text: rgb(65, 65, 65);
--theme--tag_gray: rgb(234, 234, 234);
--theme--tag_gray-text: rgb(17, 17, 17);
--theme--tag_brown: rgb(206, 206, 206);
@ -99,6 +101,9 @@
--theme--tag_red: rgb(248, 215, 218);
--theme--tag_red-text: rgb(138, 0, 10);
--theme--board_light_gray: #EBEBED;
--theme--board_light_gray-text: #616366;
--theme--board_light_gray-card: var(--theme--tag_light_gray);
--theme--board_gray: #e2e3e5;
--theme--board_gray-text: #383d41;
--theme--board_gray-card: var(--theme--tag_gray);

6
repo/material-ocean/variables.css
View File

@ -9,6 +9,7 @@
--ocean--sec: #00010a;
--ocean--tet: #000108;
--ocean--accent: #ff4151;
--ocean--light_gray: #E9E9E9;
--ocean--gray: #e0e0e0;
--ocean--brown: #d8b6a6;
--ocean--orange: #fde3c0;
@ -99,6 +100,8 @@
--theme--tag_default: var(--ocean--gray);
--theme--tag_default-text: var(--ocean--main);
--theme--tag_light_gray: var(--ocean--light_gray);
--theme--tag_light_gray-text: var(--ocean--main);
--theme--tag_gray: var(--theme--highlight_gray);
--theme--tag_gray-text: var(--ocean--main);
--theme--tag_brown: var(--theme--highlight_brown);
@ -118,6 +121,9 @@
--theme--tag_red: var(--theme--highlight_red);
--theme--tag_red-text: var(--ocean--main);
--theme--board_light_gray: var(--ocean--light_gray);
--theme--board_light_gray-text: var(--ocean--main);
--theme--board_light_gray-card: rgba(0, 0, 0, 0.075);
--theme--board_gray: var(--theme--highlight_gray);
--theme--board_gray-text: var(--theme--highlight_gray-text);
--theme--board_gray-card: rgba(0, 0, 0, 0.075);

5
repo/neutral/variables.css
View File

@ -67,6 +67,7 @@
--theme--tag-text: var(--theme--text);
--theme--tag_default: var(--theme--highlight_gray);
--theme--tag_light_gray: #8A8A8A;
--theme--tag_gray: var(--theme--highlight_gray);
--theme--tag_brown: var(--theme--highlight_brown);
--theme--tag_orange: var(--theme--highlight_orange);
@ -77,6 +78,10 @@
--theme--tag_pink: var(--theme--highlight_pink);
--theme--tag_red: var(--theme--highlight_red);
--theme--board_light_gray: rgba(112, 112, 112, 0.175);
--theme--board_light_gray-text: #AAAAAA;
--theme--board_light_gray-card: var(--theme--tag_light_gray);
--theme--board_light_gray-card_text: var(--theme--tag_light_gray-text);
--theme--board_gray: rgba(88, 88, 88, 0.175);
--theme--board_gray-text: var(--theme--text_gray);
--theme--board_gray-card: var(--theme--tag_gray);

5
repo/nord/variables.css
View File

@ -87,6 +87,7 @@
--theme--callout_red: var(--nord--red);
--theme--tag_default: rgba(151, 154, 155, 0.5);
--theme--tag_light_gray: rgba(182, 184, 185, 0.5);
--theme--tag_gray: rgba(151, 154, 155, 0.5);
--theme--tag_brown: rgba(147, 114, 100, 0.5);
--theme--tag_orange: rgba(255, 163, 68, 0.5);
@ -97,6 +98,10 @@
--theme--tag_pink: rgba(226, 85, 161, 0.5);
--theme--tag_red: rgba(255, 115, 105, 0.5);
--theme--board_light_gray: rgba(69, 75, 78, 0.3);
--theme--board_light_gray-card: var(--theme--tag_light_gray);
--theme--board_light_gray-card_text: var(--theme--tag_light_gray-text);
--theme--board_light_gray-text: rgba(161, 162, 163, 0.95);
--theme--board_gray: rgba(69, 75, 78, 0.3);
--theme--board_gray-card: var(--theme--tag_gray);
--theme--board_gray-card_text: var(--theme--tag_gray-text);

5
repo/pastel-dark/variables.css
View File

@ -73,6 +73,8 @@
--theme--callout_pink: #fdcce8b1;
--theme--callout_red: #ffc8ce9e;
--theme--tag_light_gray: #C8C6C4;
--theme--tag_light_gray-text: rgb(55, 53, 47);
--theme--tag_gray: #b1aeab;
--theme--tag_gray-text: rgb(55, 53, 47);
--theme--tag_brown: #d8b6a6;
@ -92,6 +94,9 @@
--theme--tag_red: #f8acb4;
--theme--tag_red-text: rgb(55, 53, 47);
--theme--board_light_gray: #D4D4D389;
--theme--board_light_gray-text: #C8C6C4;
--theme--board_light_gray-card: rgb(255, 255, 255, 0.2);
--theme--board_gray: #c2c1c089;
--theme--board_gray-text: #b1aeab;
--theme--board_gray-card: rgb(255, 255, 255, 0.2);

5
repo/pinky-boom/variables.css
View File

@ -90,6 +90,9 @@
--theme--callout_red: var(--pinky_boom--red);
--theme--callout_red-text: white;
--theme--board_light_gray: rgba(166, 166, 166, 0.5);
--theme--board_light_gray-text: white;
--theme--board_light_gray-card: rgba(166, 166, 166, 0.25);
--theme--board_gray: rgba(128, 128, 128, 0.5);
--theme--board_gray-text: white;
--theme--board_gray-card: rgba(128, 128, 128, 0.25);
@ -119,6 +122,8 @@
--theme--board_red-card: var(--pinky_boom--red);
--theme--tag_default: #ffc9e6;
--theme--tag_light_gray: rgba(166, 166, 166, 0.25);
--theme--tag_light_gray-text: black;
--theme--tag_gray: rgba(128, 128, 128, 0.25);
--theme--tag_gray-text: black;
--theme--tag_brown: var(--pinky_boom--brown);

6
repo/playful-purple/variables.css
View File

@ -81,6 +81,8 @@
--theme--tag_default: rgb(234, 234, 234);
--theme--tag_default-text: rgb(17, 17, 17);
--theme--tag_light_gray: rgb(240, 240, 240);
--theme--tag_light_gray-text: rgb(88, 88, 88);
--theme--tag_gray: rgb(234, 234, 234);
--theme--tag_gray-text: rgb(17, 17, 17);
--theme--tag_brown: rgb(206, 206, 206);
@ -100,6 +102,10 @@
--theme--tag_red: rgb(251, 228, 228);
--theme--tag_red-text: rgb(138, 0, 10);
--theme--board_light_gray: #EBEBED;
--theme--board_light_gray-text: #74777A;
--theme--board_light_gray-card: var(--theme--tag_light_gray);
--theme--board_light_gray-card_text: var(--theme--tag_light_gray-text);
--theme--board_gray: #e2e3e5;
--theme--board_gray-text: #383d41;
--theme--board_gray-card: var(--theme--tag_gray);

141
repo/theming/_mapColors.js
View File

@ -10,6 +10,25 @@
// included for posterity/updates
// -- not executed by the enhancer at runtime
const lightGray = {
'light': {
'tag': 'rgba(227, 226, 224, 0.5)',
'tag-text': 'rgb(50, 48, 44)',
'board': 'rgba(249, 249, 245, 0.5)',
'board-card': 'white',
'board-card_text': 'inherit',
'board-text': 'rgba(145, 145, 142, 0.5)',
},
'dark': {
'tag': 'rgba(71, 76, 80, 0.7)',
'tag-text': 'rgba(255, 255, 255, 0.88)',
'board': 'rgba(51, 55, 59, 0.7)',
'board-card': 'rgba(60, 65, 68, 0.7)',
'board-card_text': 'inherit',
'board-text': 'rgba(107, 112, 116, 0.7)',
},
};
const colors = {
'gray': {
'light': {
@ -272,8 +291,80 @@ 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: '][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
css += `
/* light gray */
.notion-body:not(.dark) [style*='background: ${lightGray.light['tag']}']${isTag},
.notion-body.dark [style*='background: ${lightGray.dark['tag']}']${isTag} {
background: var(--theme--tag_light_gray) !important;
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
.notion-board-group[style*='background-color: ${lightGray.dark['board']}'],
.notion-body:not(.dark) .notion-board-view > .notion-selectable > :first-child > :nth-child(2)
[style*='background-color: ${lightGray.light['board']}'],
.notion-body.dark .notion-board-view > .notion-selectable > :first-child > :nth-child(2)
[style*='background-color: ${lightGray.dark['board']}'] {
background: var(--theme--board_light_gray) !important;
color: var(--theme--board_light_gray-text) !important;
}
.notion-body:not(.dark)
.notion-board-group[style*='background-color: ${lightGray.light['board']}']
> [data-block-id] > [rel='noopener noreferrer'],
.notion-body.dark
.notion-board-group[style*='background-color: ${lightGray.dark['board']}']
> [data-block-id] > [rel='noopener noreferrer'] {
background: var(--theme--board_light_gray-card) !important;
color: var(--theme--board_light_gray-card_text) !important;
}
.notion-body.dark
.notion-board-group[style*='background-color: ${lightGray.dark['board']}']
> [data-block-id] > [rel='noopener noreferrer'] [placeholder="Untitled"] {
-webkit-text-fill-color: var(--theme--board_light_gray-card_text, var(--theme--board_light_gray-text)) !important;
}
.notion-body:not(.dark)
.notion-board-group[style*='background-color: ${lightGray.light['board']}']
> [data-block-id] > [rel='noopener noreferrer'] > .notion-focusable:hover {
background: rgba(255, 255, 255, 0.2) !important;
}
.notion-body.dark
.notion-board-group[style*='background-color: ${lightGray.dark['board']}']
> [data-block-id] > [rel='noopener noreferrer'] > .notion-focusable:hover {
background: rgba(0, 0, 0, 0.1) !important;
}
.notion-body:not(.dark) .notion-board-view
[style*='color: ${lightGray.light['board-text']}'],
.notion-body.dark .notion-board-view [style*='color: ${lightGray.dark['board-text']}'],
.notion-body:not(.dark) .notion-board-view
[style*='fill: ${lightGray.light['board-text']}'],
.notion-body.dark .notion-board-view [style*='fill: ${lightGray.dark['board-text']}'] {
color: var(--theme--board_light_gray-text) !important;
fill: var(--theme--board_light_gray-text) !important;
}
`;
// generate the rest of the colours
for (const c in colors) {
css += `
@ -335,6 +426,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
@ -372,10 +482,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;
}
@ -386,7 +500,26 @@ function css() {
// 'light' or 'dark'
function vars(mode) {
const sets = {};
// order in which variables will appear
const sets = {
'text': '',
'highlight': '',
'callout': '',
// tag_default has the same color in light and dark
'tag': '--theme--tag_default: rgba(206, 205, 202, 0.5);\n--theme--tag_default-text: var(--theme--text);\n',
'board': ''
};
// light gray separately
for (let key in lightGray[mode]) {
const prefix = key.split('-')[0],
value = lightGray[mode][key];
if (!sets[prefix]) sets[prefix] = '';
key = [`--theme--${prefix}_light_gray`, ...key.split('-').slice(1)].join('-');
sets[prefix] += `${key}: ${value};\n`;
}
// other colors
for (const color in colors) {
for (let key in colors[color][mode]) {
const prefix = key.split('-')[0],

250
repo/theming/colors.css
View File

@ -4,6 +4,85 @@
* (https://notion-enhancer.github.io/) under the MIT license
*/
/* light gray */
.notion-body:not(.dark)
[style*='background: rgba(227, 226, 224, 0.5)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;'],
.notion-body.dark
[style*='background: rgba(71, 76, 80, 0.7)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;'] {
background: var(--theme--tag_light_gray) !important;
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)'],
.notion-body:not(.dark)
.notion-board-view
> .notion-selectable
> :first-child
> :nth-child(2)
[style*='background-color: rgba(249, 249, 245, 0.5)'],
.notion-body.dark
.notion-board-view
> .notion-selectable
> :first-child
> :nth-child(2)
[style*='background-color: rgba(51, 55, 59, 0.7)'] {
background: var(--theme--board_light_gray) !important;
color: var(--theme--board_light_gray-text) !important;
}
.notion-body:not(.dark)
.notion-board-group[style*='background-color: rgba(249, 249, 245, 0.5)']
> [data-block-id]
> [rel='noopener noreferrer'],
.notion-body.dark
.notion-board-group[style*='background-color: rgba(51, 55, 59, 0.7)']
> [data-block-id]
> [rel='noopener noreferrer'] {
background: var(--theme--board_light_gray-card) !important;
color: var(--theme--board_light_gray-card_text) !important;
}
.notion-body.dark
.notion-board-group[style*='background-color: rgba(51, 55, 59, 0.7)']
> [data-block-id]
> [rel='noopener noreferrer']
[placeholder='Untitled'] {
-webkit-text-fill-color: var(
--theme--board_light_gray-card_text,
var(--theme--board_light_gray-text)
) !important;
}
.notion-body:not(.dark)
.notion-board-group[style*='background-color: rgba(249, 249, 245, 0.5)']
> [data-block-id]
> [rel='noopener noreferrer']
> .notion-focusable:hover {
background: rgba(255, 255, 255, 0.2) !important;
}
.notion-body.dark
.notion-board-group[style*='background-color: rgba(51, 55, 59, 0.7)']
> [data-block-id]
> [rel='noopener noreferrer']
> .notion-focusable:hover {
background: rgba(0, 0, 0, 0.1) !important;
}
.notion-body:not(.dark) .notion-board-view [style*='color: rgba(145, 145, 142, 0.5)'],
.notion-body.dark .notion-board-view [style*='color: rgba(107, 112, 116, 0.7)'],
.notion-body:not(.dark) .notion-board-view [style*='fill: rgba(145, 145, 142, 0.5)'],
.notion-body.dark .notion-board-view [style*='fill: rgba(107, 112, 116, 0.7)'] {
color: var(--theme--board_light_gray-text) !important;
fill: var(--theme--board_light_gray-text) !important;
}
/* gray */
.notion-body:not(.dark) [style*='color: rgb(120, 119, 116)'],
@ -47,9 +126,24 @@
color: var(--theme--callout_gray-text) !important;
}
.notion-body:not(.dark)
[style*='background: rgb(227, 226, 224)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;'],
[style*='background: rgb(227, 226, 224)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;'],
.notion-body.dark
[style*='background: rgb(71, 76, 80)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;'] {
[style*='background: rgb(71, 76, 80)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;'] {
background: var(--theme--tag_gray) !important;
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;
}
@ -158,9 +252,24 @@
color: var(--theme--callout_brown-text) !important;
}
.notion-body:not(.dark)
[style*='background: rgb(238, 224, 218)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;'],
[style*='background: rgb(238, 224, 218)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;'],
.notion-body.dark
[style*='background: rgb(92, 71, 61)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;'] {
[style*='background: rgb(92, 71, 61)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;'] {
background: var(--theme--tag_brown) !important;
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;
}
@ -269,9 +378,24 @@
color: var(--theme--callout_orange-text) !important;
}
.notion-body:not(.dark)
[style*='background: rgb(250, 222, 201)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;'],
[style*='background: rgb(250, 222, 201)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;'],
.notion-body.dark
[style*='background: rgb(136, 84, 44)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;'] {
[style*='background: rgb(136, 84, 44)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;'] {
background: var(--theme--tag_orange) !important;
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;
}
@ -380,9 +504,24 @@
color: var(--theme--callout_yellow-text) !important;
}
.notion-body:not(.dark)
[style*='background: rgb(253, 236, 200)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;'],
[style*='background: rgb(253, 236, 200)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;'],
.notion-body.dark
[style*='background: rgb(146, 118, 63)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;'] {
[style*='background: rgb(146, 118, 63)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;'] {
background: var(--theme--tag_yellow) !important;
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;
}
@ -491,9 +630,24 @@
color: var(--theme--callout_green-text) !important;
}
.notion-body:not(.dark)
[style*='background: rgb(219, 237, 219)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;'],
[style*='background: rgb(219, 237, 219)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;'],
.notion-body.dark
[style*='background: rgb(50, 82, 65)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;'] {
[style*='background: rgb(50, 82, 65)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;'] {
background: var(--theme--tag_green) !important;
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;
}
@ -602,9 +756,24 @@
color: var(--theme--callout_blue-text) !important;
}
.notion-body:not(.dark)
[style*='background: rgb(211, 229, 239)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;'],
[style*='background: rgb(211, 229, 239)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;'],
.notion-body.dark
[style*='background: rgb(42, 78, 107)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;'] {
[style*='background: rgb(42, 78, 107)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;'] {
background: var(--theme--tag_blue) !important;
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;
}
@ -713,9 +882,24 @@
color: var(--theme--callout_purple-text) !important;
}
.notion-body:not(.dark)
[style*='background: rgb(232, 222, 238)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;'],
[style*='background: rgb(232, 222, 238)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;'],
.notion-body.dark
[style*='background: rgb(83, 68, 116)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;'] {
[style*='background: rgb(83, 68, 116)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;'] {
background: var(--theme--tag_purple) !important;
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;
}
@ -824,9 +1008,24 @@
color: var(--theme--callout_pink-text) !important;
}
.notion-body:not(.dark)
[style*='background: rgb(245, 224, 233)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;'],
[style*='background: rgb(245, 224, 233)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;'],
.notion-body.dark
[style*='background: rgb(106, 59, 99)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;'] {
[style*='background: rgb(106, 59, 99)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;'] {
background: var(--theme--tag_pink) !important;
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;
}
@ -935,9 +1134,24 @@
color: var(--theme--callout_red-text) !important;
}
.notion-body:not(.dark)
[style*='background: rgb(255, 226, 221)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;'],
[style*='background: rgb(255, 226, 221)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;'],
.notion-body.dark
[style*='background: rgb(122, 54, 59)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;'] {
[style*='background: rgb(122, 54, 59)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: '][style*='line-height: 120%;'] {
background: var(--theme--tag_red) !important;
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;
}

1
repo/theming/theme.css
View File

@ -724,6 +724,7 @@ body,
border-color: var(--theme--text_secondary) !important;
}
/* make sure to change in _mapColors.js as well if colors ever change */
.notion-body.dark [style*='background: rgb(80, 85, 88)']:not([role='button']),
.notion-body.dark [style*='background-color: rgb(80, 85, 88)']:not([role='button']),
.notion-body:not(.dark) [style*='background: rgba(206, 205, 202, 0.5)']:not([role='button']),

12
repo/theming/variables.css
View File

@ -111,6 +111,8 @@
--theme--tag_default: rgba(206, 205, 202, 0.5);
--theme--tag_default-text: var(--theme--text);
--theme--tag_light_gray: rgba(227, 226, 224, 0.5);
--theme--tag_light_gray-text: rgb(50, 48, 44);
--theme--tag_gray: rgb(227, 226, 224);
--theme--tag_gray-text: rgb(50, 48, 44);
--theme--tag_brown: rgb(238, 224, 218);
@ -130,6 +132,10 @@
--theme--tag_red: rgb(255, 226, 221);
--theme--tag_red-text: rgb(93, 23, 21);
--theme--board_light_gray: rgba(249, 249, 245, 0.5);
--theme--board_light_gray-card: white;
--theme--board_light_gray-card_text: inherit;
--theme--board_light_gray-text: rgba(145, 145, 142, 0.5);
--theme--board_gray: rgba(247, 247, 245, 0.7);
--theme--board_gray-card: white;
--theme--board_gray-card_text: inherit;
@ -293,6 +299,8 @@
--theme--tag_default: rgba(206, 205, 202, 0.5);
--theme--tag_default-text: var(--theme--text);
--theme--tag_light_gray: rgba(71, 76, 80, 0.7);
--theme--tag_light_gray-text: rgba(255, 255, 255, 0.88);
--theme--tag_gray: rgb(71, 76, 80);
--theme--tag_gray-text: rgba(255, 255, 255, 0.88);
--theme--tag_brown: rgb(92, 71, 61);
@ -312,6 +320,10 @@
--theme--tag_red: rgb(122, 54, 59);
--theme--tag_red-text: rgba(255, 255, 255, 0.88);
--theme--board_light_gray: rgba(51, 55, 59, 0.7);
--theme--board_light_gray-card: rgba(60, 65, 68, 0.7);
--theme--board_light_gray-card_text: inherit;
--theme--board_light_gray-text: rgba(107, 112, 116, 0.7);
--theme--board_gray: rgb(51, 55, 59);
--theme--board_gray-card: rgb(60, 65, 68);
--theme--board_gray-card_text: inherit;