From 7bdae2faa63cc182a792cc6cacd674f4627bd9c3 Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Tue, 30 Nov 2021 20:43:20 +1100
Subject: [PATCH] patch notion theme changes

bar at top of db, cards, db groups, simple tables, calendar tags, calendar selection, code captions, corner actions, etc.
---
 repo/cherry-cola/variables.css      |   3 +
 repo/collapsible-headers/client.mjs |   2 +-
 repo/dark+/variables.css            |   3 +
 repo/dracula/variables.css          |   3 +
 repo/gruvbox-dark/variables.css     |   3 +
 repo/gruvbox-light/variables.css    |   3 +
 repo/light+/variables.css           |   6 +
 repo/material-ocean/variables.css   |   3 +
 repo/neutral/variables.css          |   3 +
 repo/nord/variables.css             |   3 +
 repo/pastel-dark/app.css            |   6 +-
 repo/pastel-dark/variables.css      |   7 +-
 repo/pinky-boom/variables.css       |   5 +-
 repo/playful-purple/variables.css   |   3 +
 repo/theming/colors.css             |  36 +--
 repo/theming/generate-mappings.js   | 400 ++++++++++++++++++++++++++++
 repo/theming/patches.css            |  25 +-
 repo/theming/theme.css              |  49 +++-
 repo/theming/variables.css          |   6 +
 19 files changed, 533 insertions(+), 36 deletions(-)
 create mode 100644 repo/theming/generate-mappings.js

diff --git a/repo/cherry-cola/variables.css b/repo/cherry-cola/variables.css
index e5ddf9b..bccd9af 100644
--- a/repo/cherry-cola/variables.css
+++ b/repo/cherry-cola/variables.css
@@ -41,6 +41,9 @@
   --theme--ui_interactive-hover: var(--cola--tet);
   --theme--ui_interactive-active: var(--cola--tet);
   --theme--ui_toggle-off: rgba(73, 35, 65, 0.7);
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
 
   --theme--icon: #fff;
   --theme--icon_secondary: var(--cola--info);
diff --git a/repo/collapsible-headers/client.mjs b/repo/collapsible-headers/client.mjs
index 4e0a6a1..07219ef 100644
--- a/repo/collapsible-headers/client.mjs
+++ b/repo/collapsible-headers/client.mjs
@@ -193,7 +193,7 @@ export default async function ({ web }, db) {
     if (childNodeEvent) return;
 
     const removeHeaderEvent = [...event.removedNodes].filter(($node) =>
-      $node?.className?.includes('header-blocks')
+      $node?.className?.includes?.('header-blocks')
     );
     if (removeHeaderEvent.length) {
       return removeHeaderEvent.forEach(($header) => expandHeaderSection($header, false));
diff --git a/repo/dark+/variables.css b/repo/dark+/variables.css
index c7d22b0..02205d8 100644
--- a/repo/dark+/variables.css
+++ b/repo/dark+/variables.css
@@ -30,6 +30,9 @@
   --theme--ui_interactive-active: rgba(55, 56, 56, 0.402);
   --theme--ui_toggle-on: var(--theme--accent_blue);
   --theme--ui_toggle-off: rgb(40, 40, 40);
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
 
   --theme--icon: rgb(228, 228, 228);
   --theme--icon_secondary: rgba(211, 211, 211, 0.637);
diff --git a/repo/dracula/variables.css b/repo/dracula/variables.css
index 77bd16f..7828796 100644
--- a/repo/dracula/variables.css
+++ b/repo/dracula/variables.css
@@ -62,6 +62,9 @@
   --theme--ui_interactive-hover: var(--dracula--block_highlight);
   --theme--ui_interactive-active: var(--dracula--bg_lighter);
   --theme--ui_toggle-off: var(--dracula--block_highlight);
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
 
   --theme--icon: var(--dracula--comment);
   --theme--icon_secondary: var(--dracula--comment);
diff --git a/repo/gruvbox-dark/variables.css b/repo/gruvbox-dark/variables.css
index 6e921b9..fbc9f3b 100644
--- a/repo/gruvbox-dark/variables.css
+++ b/repo/gruvbox-dark/variables.css
@@ -58,6 +58,9 @@
   --theme--ui_interactive-active: rgba(80, 73, 69, 0.9);
   --theme--ui_toggle-off: var(--gruvbox_dark--bg4);
   --theme--ui_toggle-feature: var(--gruvbox_dark--fg);
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
 
   --theme--icon: var(--gruvbox_dark--fg0);
   --theme--icon_secondary: var(--gruvbox_dark--fg3);
diff --git a/repo/gruvbox-light/variables.css b/repo/gruvbox-light/variables.css
index d24f649..7622732 100644
--- a/repo/gruvbox-light/variables.css
+++ b/repo/gruvbox-light/variables.css
@@ -63,6 +63,9 @@
   --theme--ui_input: var(--gruvbox_light--bg3);
   --theme--ui_toggle-off: var(--gruvbox_light--bg4);
   --theme--ui_toggle-feature: var(--gruvbox_light--bg);
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
 
   --theme--icon: var(--gruvbox_light--fg0);
   --theme--icon_secondary: var(--gruvbox_light--fg3);
diff --git a/repo/light+/variables.css b/repo/light+/variables.css
index f5105d5..8ce9f46 100644
--- a/repo/light+/variables.css
+++ b/repo/light+/variables.css
@@ -19,9 +19,15 @@
   --theme--accent_red-text: var(--light_plus--accent_red-text, #fff);
 
   --theme--scrollbar_thumb-hover: var(--light_plus--accent_highlight, #aeaca6);
+
   --theme--ui_divider: var(--light_plus--accent_highlight, rgb(237, 237, 236));
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
+
   --theme--icon: var(--light_plus--accent_highlight, rgba(55, 53, 47, 0.8));
   --theme--icon_secondary: var(--light_plus--accent_highlight, rgba(55, 53, 47, 0.4));
+
   --theme--text: var(--light_plus--accent_highlight, rgb(55, 43, 47));
   --theme--text_secondary: var(--light_plus--accent_highlight-shaded, rgba(55, 43, 47, 0.6));
 
diff --git a/repo/material-ocean/variables.css b/repo/material-ocean/variables.css
index 36e654f..bbc3117 100644
--- a/repo/material-ocean/variables.css
+++ b/repo/material-ocean/variables.css
@@ -40,6 +40,9 @@
   --theme--ui_interactive-hover: var(--ocean--tet);
   --theme--ui_interactive-active: var(--ocean--tet);
   --theme--ui_toggle-off: #30313c;
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
 
   --theme--icon: var(--ocean--gray);
   --theme--icon_secondary: var(--ocean--gray);
diff --git a/repo/neutral/variables.css b/repo/neutral/variables.css
index 6032650..0ad2a4a 100644
--- a/repo/neutral/variables.css
+++ b/repo/neutral/variables.css
@@ -26,6 +26,9 @@
   --theme--ui_interactive-hover: rgb(29, 29, 29);
   --theme--ui_interactive-active: rgba(29, 29, 29, 0.7);
   --theme--ui_input: #1d1d1d;
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
 
   --theme--icon: #dadada;
   --theme--icon_secondary: #dadadac0;
diff --git a/repo/nord/variables.css b/repo/nord/variables.css
index b1ecffb..29a7941 100644
--- a/repo/nord/variables.css
+++ b/repo/nord/variables.css
@@ -44,6 +44,9 @@
   --theme--ui_interactive-active: #4c566ade;
   --theme--ui_toggle-off: var(--nord--dark4);
   --theme--ui_toggle-feature: var(--nord--light1);
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
 
   --theme--icon: var(--nord--light1);
   --theme--icon_secondary: var(--nord--light1);
diff --git a/repo/pastel-dark/app.css b/repo/pastel-dark/app.css
index 72e6138..12b1dba 100644
--- a/repo/pastel-dark/app.css
+++ b/repo/pastel-dark/app.css
@@ -48,7 +48,11 @@
   transition: color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease !important;
 }
 
-.notion-dark-theme [style*='background: rgb(63, 68, 71);'],
+.notion-dark-theme :not(.notion-code-block) > * > [style*='background: rgb(63, 68, 71);'],
+.notion-dark-theme
+  .notion-code-block
+  [style*='background: rgb(63, 68, 71);']
+  .notion-code-block,
 .notion-dark-theme
   [style*='background: rgb(80, 85, 88);'][style*='color: rgba(255, 255, 255, 0.7)'],
 .notion-dark-theme
diff --git a/repo/pastel-dark/variables.css b/repo/pastel-dark/variables.css
index 0783754..34f6366 100644
--- a/repo/pastel-dark/variables.css
+++ b/repo/pastel-dark/variables.css
@@ -22,9 +22,12 @@
   --theme--scrollbar_thumb-hover: #1b1b1b;
 
   --theme--ui_divider: rgba(255, 255, 255, 0.1);
-  --theme--ui_interactive-hover: #1e1e1e5c;
-  --theme--ui_interactive-active: #1e1e1ea5;
+  --theme--ui_interactive-hover: #15161c;
+  --theme--ui_interactive-active: #18191c;
   --theme--ui_toggle-off: #b1aeab;
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
 
   --theme--icon: #ffffff;
   --theme--icon_secondary: #909090;
diff --git a/repo/pinky-boom/variables.css b/repo/pinky-boom/variables.css
index 949db4b..5d92b3a 100644
--- a/repo/pinky-boom/variables.css
+++ b/repo/pinky-boom/variables.css
@@ -35,6 +35,9 @@
   --theme--ui_interactive-hover: #fcb9d0;
   --theme--ui_interactive-active: #ffccdc;
   --theme--ui_toggle-off: #ffc9e6;
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
 
   --theme--icon: #56002e;
   --theme--icon_secondary: rgba(255, 20, 145, 0.75);
@@ -117,7 +120,7 @@
 
   --theme--tag_default: #ffc9e6;
   --theme--tag_gray: rgba(128, 128, 128, 0.25);
-  --theme--tag_gray-text: white;
+  --theme--tag_gray-text: black;
   --theme--tag_brown: var(--pinky_boom--brown);
   --theme--tag_brown-text: white;
   --theme--tag_orange: var(--pinky_boom--orange);
diff --git a/repo/playful-purple/variables.css b/repo/playful-purple/variables.css
index 58353dd..7f627e4 100644
--- a/repo/playful-purple/variables.css
+++ b/repo/playful-purple/variables.css
@@ -25,6 +25,9 @@
   --theme--ui_interactive-hover: #282632;
   --theme--ui_interactive-active: #2b293a;
   --theme--ui_toggle-off: rgb(20, 0, 51);
+  --theme--ui_corner_action: var(--theme--bg_card);
+  --theme--ui_corner_action-hover: var(--theme--ui_interactive-hover);
+  --theme--ui_corner_action-active: var(--theme--ui_interactive-active);
 
   --theme--icon: #978ec7;
   --theme--icon_secondary: #978ec7;
diff --git a/repo/theming/colors.css b/repo/theming/colors.css
index cfa00fb..0fc59d6 100644
--- a/repo/theming/colors.css
+++ b/repo/theming/colors.css
@@ -47,9 +47,9 @@
   color: var(--theme--callout_gray-text) !important;
 }
 .notion-body:not(.dark)
-  [style*='background: rgb(227, 226, 224)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px; font-size: 14px; line-height: 120%;'],
+  [style*='background: rgb(227, 226, 224)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px;'][style*='line-height: 120%;'],
 .notion-body.dark
-  [style*='background: rgb(71, 76, 80)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px; font-size: 14px; line-height: 120%;'] {
+  [style*='background: rgb(71, 76, 80)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px;'][style*='line-height: 120%;'] {
   background: var(--theme--tag_gray) !important;
   color: var(--theme--tag_gray-text) !important;
 }
@@ -147,9 +147,9 @@
   color: var(--theme--callout_brown-text) !important;
 }
 .notion-body:not(.dark)
-  [style*='background: rgb(238, 224, 218)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px; font-size: 14px; line-height: 120%;'],
+  [style*='background: rgb(238, 224, 218)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px;'][style*='line-height: 120%;'],
 .notion-body.dark
-  [style*='background: rgb(92, 71, 61)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px; font-size: 14px; line-height: 120%;'] {
+  [style*='background: rgb(92, 71, 61)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px;'][style*='line-height: 120%;'] {
   background: var(--theme--tag_brown) !important;
   color: var(--theme--tag_brown-text) !important;
 }
@@ -247,9 +247,9 @@
   color: var(--theme--callout_orange-text) !important;
 }
 .notion-body:not(.dark)
-  [style*='background: rgb(250, 222, 201)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px; font-size: 14px; line-height: 120%;'],
+  [style*='background: rgb(250, 222, 201)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px;'][style*='line-height: 120%;'],
 .notion-body.dark
-  [style*='background: rgb(136, 84, 44)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px; font-size: 14px; line-height: 120%;'] {
+  [style*='background: rgb(136, 84, 44)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px;'][style*='line-height: 120%;'] {
   background: var(--theme--tag_orange) !important;
   color: var(--theme--tag_orange-text) !important;
 }
@@ -347,9 +347,9 @@
   color: var(--theme--callout_yellow-text) !important;
 }
 .notion-body:not(.dark)
-  [style*='background: rgb(253, 236, 200)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px; font-size: 14px; line-height: 120%;'],
+  [style*='background: rgb(253, 236, 200)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px;'][style*='line-height: 120%;'],
 .notion-body.dark
-  [style*='background: rgb(146, 118, 63)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px; font-size: 14px; line-height: 120%;'] {
+  [style*='background: rgb(146, 118, 63)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px;'][style*='line-height: 120%;'] {
   background: var(--theme--tag_yellow) !important;
   color: var(--theme--tag_yellow-text) !important;
 }
@@ -447,9 +447,9 @@
   color: var(--theme--callout_green-text) !important;
 }
 .notion-body:not(.dark)
-  [style*='background: rgb(219, 237, 219)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px; font-size: 14px; line-height: 120%;'],
+  [style*='background: rgb(219, 237, 219)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px;'][style*='line-height: 120%;'],
 .notion-body.dark
-  [style*='background: rgb(50, 82, 65)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px; font-size: 14px; line-height: 120%;'] {
+  [style*='background: rgb(50, 82, 65)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px;'][style*='line-height: 120%;'] {
   background: var(--theme--tag_green) !important;
   color: var(--theme--tag_green-text) !important;
 }
@@ -547,9 +547,9 @@
   color: var(--theme--callout_blue-text) !important;
 }
 .notion-body:not(.dark)
-  [style*='background: rgb(211, 229, 239)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px; font-size: 14px; line-height: 120%;'],
+  [style*='background: rgb(211, 229, 239)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px;'][style*='line-height: 120%;'],
 .notion-body.dark
-  [style*='background: rgb(42, 78, 107)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px; font-size: 14px; line-height: 120%;'] {
+  [style*='background: rgb(42, 78, 107)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px;'][style*='line-height: 120%;'] {
   background: var(--theme--tag_blue) !important;
   color: var(--theme--tag_blue-text) !important;
 }
@@ -647,9 +647,9 @@
   color: var(--theme--callout_purple-text) !important;
 }
 .notion-body:not(.dark)
-  [style*='background: rgb(232, 222, 238)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px; font-size: 14px; line-height: 120%;'],
+  [style*='background: rgb(232, 222, 238)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px;'][style*='line-height: 120%;'],
 .notion-body.dark
-  [style*='background: rgb(83, 68, 116)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px; font-size: 14px; line-height: 120%;'] {
+  [style*='background: rgb(83, 68, 116)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px;'][style*='line-height: 120%;'] {
   background: var(--theme--tag_purple) !important;
   color: var(--theme--tag_purple-text) !important;
 }
@@ -747,9 +747,9 @@
   color: var(--theme--callout_pink-text) !important;
 }
 .notion-body:not(.dark)
-  [style*='background: rgb(245, 224, 233)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px; font-size: 14px; line-height: 120%;'],
+  [style*='background: rgb(245, 224, 233)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px;'][style*='line-height: 120%;'],
 .notion-body.dark
-  [style*='background: rgb(106, 59, 99)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px; font-size: 14px; line-height: 120%;'] {
+  [style*='background: rgb(106, 59, 99)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px;'][style*='line-height: 120%;'] {
   background: var(--theme--tag_pink) !important;
   color: var(--theme--tag_pink-text) !important;
 }
@@ -847,9 +847,9 @@
   color: var(--theme--callout_red-text) !important;
 }
 .notion-body:not(.dark)
-  [style*='background: rgb(255, 226, 221)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px; font-size: 14px; line-height: 120%;'],
+  [style*='background: rgb(255, 226, 221)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px;'][style*='line-height: 120%;'],
 .notion-body.dark
-  [style*='background: rgb(122, 54, 59)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px; font-size: 14px; line-height: 120%;'] {
+  [style*='background: rgb(122, 54, 59)'][style*='border-radius: 3px; padding-left: 6px; padding-right: 6px;'][style*='line-height: 120%;'] {
   background: var(--theme--tag_red) !important;
   color: var(--theme--tag_red-text) !important;
 }
diff --git a/repo/theming/generate-mappings.js b/repo/theming/generate-mappings.js
new file mode 100644
index 0000000..68a10cc
--- /dev/null
+++ b/repo/theming/generate-mappings.js
@@ -0,0 +1,400 @@
+/*
+ * notion-enhancer core: theming
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+// a development tool used for generating color variables
+// and the contents of colors.css
+
+// included for posterity/updates
+// -- not executed by the enhancer at runtime
+
+const colors = {
+  'gray': {
+    'light': {
+      'text': 'rgba(120, 119, 116, 1)',
+      'highlight': 'rgba(241, 241, 239, 1)',
+      'highlight-text': 'currentColor',
+      'callout': 'rgb(241, 241, 239)',
+      'callout-text': 'currentColor',
+      'tag': 'rgb(227, 226, 224)',
+      'tag-text': 'rgb(50, 48, 44)',
+      'board': 'rgba(247, 247, 245, 0.7)',
+      'board-card': 'white',
+      'board-card_text': 'inherit',
+      'board-text': 'rgb(145, 145, 142)',
+    },
+    'dark': {
+      'text': 'rgba(159, 164, 169, 1)',
+      'highlight': 'rgba(60, 65, 68, 1)',
+      'highlight-text': 'currentColor',
+      'callout': 'rgb(60, 65, 68)',
+      'callout-text': 'currentColor',
+      'tag': 'rgb(71, 76, 80)',
+      'tag-text': 'rgba(255, 255, 255, 0.88)',
+      'board': 'rgb(51, 55, 59)',
+      'board-card': 'rgb(60, 65, 68)',
+      'board-card_text': 'inherit',
+      'board-text': 'rgb(107, 112, 116)',
+    },
+  },
+  'brown': {
+    'light': {
+      'text': 'rgba(159, 107, 83, 1)',
+      'highlight': 'rgba(244, 238, 238, 1)',
+      'highlight-text': 'currentColor',
+      'callout': 'rgb(244, 238, 238)',
+      'callout-text': 'currentColor',
+      'tag': 'rgb(238, 224, 218)',
+      'tag-text': 'rgb(68, 42, 30)',
+      'board': 'rgba(250, 246, 245, 0.7)',
+      'board-card': 'white',
+      'board-card_text': 'inherit',
+      'board-text': 'rgb(187, 132, 108)',
+    },
+    'dark': {
+      'text': 'rgba(212, 150, 117, 1)',
+      'highlight': 'rgba(76, 61, 53, 1)',
+      'highlight-text': 'currentColor',
+      'callout': 'rgb(76, 61, 53)',
+      'callout-text': 'currentColor',
+      'tag': 'rgb(92, 71, 61)',
+      'tag-text': 'rgba(255, 255, 255, 0.88)',
+      'board': 'rgb(59, 54, 51)',
+      'board-card': 'rgb(76, 61, 53)',
+      'board-card_text': 'inherit',
+      'board-text': 'rgb(155, 98, 69)',
+    },
+  },
+  'orange': {
+    'light': {
+      'text': 'rgba(217, 115, 13, 1)',
+      'highlight': 'rgba(251, 236, 221, 1)',
+      'highlight-text': 'currentColor',
+      'callout': 'rgb(251, 236, 221)',
+      'callout-text': 'currentColor',
+      'tag': 'rgb(250, 222, 201)',
+      'tag-text': 'rgb(73, 41, 14)',
+      'board': 'rgba(252, 245, 242, 0.7)',
+      'board-card': 'white',
+      'board-card_text': 'inherit',
+      'board-text': 'rgb(215, 129, 58)',
+    },
+    'dark': {
+      'text': 'rgba(217, 133, 56, 1)',
+      'highlight': 'rgba(85, 59, 41, 1)',
+      'highlight-text': 'currentColor',
+      'callout': 'rgb(85, 59, 41)',
+      'callout-text': 'currentColor',
+      'tag': 'rgb(136, 84, 44)',
+      'tag-text': 'rgba(255, 255, 255, 0.88)',
+      'board': 'rgb(61, 54, 49)',
+      'board-card': 'rgb(85, 59, 41)',
+      'board-text': 'rgb(168, 92, 30)',
+    },
+  },
+  'yellow': {
+    'light': {
+      'text': 'rgba(203, 145, 47, 1)',
+      'highlight': 'rgba(251, 243, 219, 1)',
+      'highlight-text': 'currentColor',
+      'callout': 'rgb(251, 243, 219)',
+      'callout-text': 'currentColor',
+      'tag': 'rgb(253, 236, 200)',
+      'tag-text': 'rgb(64, 44, 27)',
+      'board': 'rgba(250, 247, 237, 0.7)',
+      'board-card': 'white',
+      'board-card_text': 'inherit',
+      'board-text': 'rgb(203, 148, 51)',
+    },
+    'dark': {
+      'text': 'rgba(201, 145, 38, 1)',
+      'highlight': 'rgba(79, 64, 41, 1)',
+      'highlight-text': 'currentColor',
+      'callout': 'rgb(79, 64, 41)',
+      'callout-text': 'currentColor',
+      'tag': 'rgb(146, 118, 63)',
+      'tag-text': 'rgba(255, 255, 255, 0.88)',
+      'board': 'rgb(56, 55, 49)',
+      'board-card': 'rgb(79, 64, 41)',
+      'board-card_text': 'inherit',
+      'board-text': 'rgb(137, 107, 42)',
+    },
+  },
+  'green': {
+    'light': {
+      'text': 'rgba(68, 131, 97, 1)',
+      'highlight': 'rgba(237, 243, 236, 1)',
+      'highlight-text': 'currentColor',
+      'callout': 'rgb(237, 243, 236)',
+      'callout-text': 'currentColor',
+      'tag': 'rgb(219, 237, 219)',
+      'tag-text': 'rgb(28, 56, 41)',
+      'board': 'rgba(244, 248, 243, 0.7)',
+      'board-card': 'white',
+      'board-card_text': 'inherit',
+      'board-text': 'rgb(108, 155, 125)',
+    },
+    'dark': {
+      'text': 'rgba(113, 178, 131, 1)',
+      'highlight': 'rgba(46, 68, 58, 1)',
+      'highlight-text': 'currentColor',
+      'callout': 'rgb(46, 68, 58)',
+      'callout-text': 'currentColor',
+      'tag': 'rgb(50, 82, 65)',
+      'tag-text': 'rgba(255, 255, 255, 0.88)',
+      'board': 'rgb(49, 57, 53)',
+      'board-card': 'rgb(46, 68, 58)',
+      'board-card_text': 'inherit',
+      'board-text': 'rgb(61, 124, 86)',
+    },
+  },
+  'blue': {
+    'light': {
+      'text': 'rgba(51, 126, 169, 1)',
+      'highlight': 'rgba(231, 243, 248, 1)',
+      'highlight-text': 'currentColor',
+      'callout': 'rgb(231, 243, 248)',
+      'callout-text': 'currentColor',
+      'tag': 'rgb(211, 229, 239)',
+      'tag-text': 'rgb(24, 51, 71)',
+      'board': 'rgba(241, 248, 251, 0.7)',
+      'board-card': 'white',
+      'board-card_text': 'inherit',
+      'board-text': 'rgb(91, 151, 189)',
+    },
+    'dark': {
+      'text': 'rgba(102, 170, 218, 1)',
+      'highlight': 'rgba(45, 66, 86, 1)',
+      'highlight-text': 'currentColor',
+      'callout': 'rgb(45, 66, 86)',
+      'callout-text': 'currentColor',
+      'tag': 'rgb(42, 78, 107)',
+      'tag-text': 'rgba(255, 255, 255, 0.88)',
+      'board': 'rgb(49, 56, 64)',
+      'board-card': 'rgb(45, 66, 86)',
+      'board-card_text': 'inherit',
+      'board-text': 'rgb(46, 117, 164)',
+    },
+  },
+  'purple': {
+    'light': {
+      'text': 'rgba(144, 101, 176, 1)',
+      'highlight': 'rgba(244, 240, 247, 0.8)',
+      'highlight-text': 'currentColor',
+      'callout': 'rgba(244, 240, 247, 0.8)',
+      'callout-text': 'currentColor',
+      'tag': 'rgb(232, 222, 238)',
+      'tag-text': 'rgb(65, 36, 84)',
+      'board': 'rgba(249, 246, 252, 0.7)',
+      'board-card': 'white',
+      'board-card_text': 'inherit',
+      'board-text': 'rgb(167, 130, 195)',
+    },
+    'dark': {
+      'text': 'rgba(176, 152, 217, 1)',
+      'highlight': 'rgba(69, 58, 91, 1)',
+      'highlight-text': 'currentColor',
+      'callout': 'rgb(69, 58, 91)',
+      'callout-text': 'currentColor',
+      'tag': 'rgb(83, 68, 116)',
+      'tag-text': 'rgba(255, 255, 255, 0.88)',
+      'board': 'rgb(57, 53, 65)',
+      'board-card': 'rgb(69, 58, 91)',
+      'board-card_text': 'inherit',
+      'board-text': 'rgb(123, 96, 180)',
+    },
+  },
+  'pink': {
+    'light': {
+      'text': 'rgba(193, 76, 138, 1)',
+      'highlight': 'rgba(249, 238, 243, 0.8)',
+      'highlight-text': 'currentColor',
+      'callout': 'rgba(249, 238, 243, 0.8)',
+      'callout-text': 'currentColor',
+      'tag': 'rgb(245, 224, 233)',
+      'tag-text': 'rgb(76, 35, 55)',
+      'board': 'rgba(251, 245, 251, 0.7)',
+      'board-card': 'white',
+      'board-card_text': 'inherit',
+      'board-text': 'rgb(205, 116, 159)',
+    },
+    'dark': {
+      'text': 'rgba(223, 132, 209, 1)',
+      'highlight': 'rgba(81, 56, 77, 1)',
+      'highlight-text': 'currentColor',
+      'callout': 'rgb(81, 56, 77)',
+      'callout-text': 'currentColor',
+      'tag': 'rgb(106, 59, 99)',
+      'tag-text': 'rgba(255, 255, 255, 0.88)',
+      'board': 'rgb(60, 53, 58)',
+      'board-card': 'rgb(81, 56, 77)',
+      'board-card_text': 'inherit',
+      'board-text': 'rgb(169, 76, 157)',
+    },
+  },
+  'red': {
+    'light': {
+      'text': 'rgba(212, 76, 71, 1)',
+      'highlight': 'rgba(253, 235, 236, 1)',
+      'highlight-text': 'currentColor',
+      'callout': 'rgb(253, 235, 236)',
+      'callout-text': 'currentColor',
+      'tag': 'rgb(255, 226, 221)',
+      'tag-text': 'rgb(93, 23, 21)',
+      'board': 'rgba(253, 245, 243, 0.7)',
+      'board-card': 'white',
+      'board-card_text': 'inherit',
+      'board-text': 'rgb(225, 111, 100)',
+    },
+    'dark': {
+      'text': 'rgba(234, 135, 140, 1)',
+      'highlight': 'rgba(94, 52, 54, 1)',
+      'highlight-text': 'currentColor',
+      'callout': 'rgb(94, 52, 54)',
+      'callout-text': 'currentColor',
+      'tag': 'rgb(122, 54, 59)',
+      'tag-text': 'rgba(255, 255, 255, 0.88)',
+      'board': 'rgb(66, 51, 51)',
+      'board-card': 'rgb(94, 52, 54)',
+      'board-card_text': 'inherit',
+      'board-text': 'rgb(194, 65, 82)',
+    },
+  },
+};
+
+function css() {
+  const rgb = (color) =>
+      color.startsWith('rgba') && color.endsWith(', 1)')
+        ? `rgb(${color.slice(5, -4)})`
+        : color,
+    notCallout = ":not([style*='border-radius'])",
+    notBoardCard = ":not([style*='box-shadow'])",
+    isTag =
+      "[style*='border-radius: 3px; padding-left: 6px; padding-right: 6px;'][style*='line-height: 120%;']";
+  let css = '';
+  for (const c in colors) {
+    css += `
+
+    /* ${c} */
+
+    .notion-body:not(.dark) [style*='color: ${rgb(colors[c].light['text'])}'],
+    .notion-body:not(.dark) [style*='color:${colors[c].light['text']}'],
+    .notion-body.dark [style*='color: ${rgb(colors[c].dark['text'])}'],
+    .notion-body.dark [style*='color:${colors[c].dark['text']}'] {
+      color: var(--theme--text_${c}) !important;
+      fill: var(--theme--text_${c}) !important;
+    }
+
+
+    .notion-body:not(.dark) [style*='background: ${
+      colors[c].light['highlight']
+    }']${notCallout}${notBoardCard},
+    .notion-body:not(.dark) [style*='background:${
+      colors[c].light['highlight']
+    }']${notCallout}${notBoardCard},
+    .notion-body:not(.dark) [style*='background: ${rgb(
+      colors[c].light['highlight']
+    )}']${notCallout}${notBoardCard},
+    .notion-body:not(.dark) [style*='background:${rgb(
+      colors[c].light['highlight']
+    )}']${notCallout}${notBoardCard},
+    .notion-body:not(.dark) [style*='background-color: ${
+      colors[c].light['highlight']
+    }']${notCallout}${notBoardCard},
+    .notion-body.dark [style*='background: ${
+      colors[c].dark['highlight']
+    }']${notCallout}${notBoardCard},
+    .notion-body.dark [style*='background:${
+      colors[c].dark['highlight']
+    }']${notCallout}${notBoardCard},
+    .notion-body.dark [style*='background: ${rgb(
+      colors[c].dark['highlight']
+    )}']${notCallout}${notBoardCard},
+    .notion-body.dark [style*='background:${rgb(
+      colors[c].dark['highlight']
+    )}']${notCallout}${notBoardCard},
+    .notion-body.dark [style*='background-color: ${
+      colors[c].dark['highlight']
+    }']${notCallout}${notBoardCard} {
+      background: var(--theme--highlight_${c}) !important;
+      color: var(--theme--highlight_${c}-text) !important;
+    }
+
+    .notion-body:not(.dark) .notion-callout-block > div
+      > [style*='background: ${colors[c].light['callout']}'],
+    .notion-body.dark .notion-callout-block > div
+      > [style*='background: ${colors[c].dark['callout']}'] {
+      background: var(--theme--callout_${c}) !important;
+      color: var(--theme--callout_${c}-text) !important;
+    }
+    .notion-body:not(.dark) [style*='background: ${colors[c].light['tag']}']${isTag},
+    .notion-body.dark [style*='background: ${colors[c].dark['tag']}']${isTag} {
+      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
+      .notion-board-group[style*='background-color: ${colors[c].dark['board']}'],
+    .notion-body:not(.dark) .notion-board-view > .notion-selectable > :first-child > :nth-child(2)
+      > [style*='background-color: ${colors[c].light['board']}'],
+    .notion-body.dark .notion-board-view > .notion-selectable > :first-child > :nth-child(2)
+      > [style*='background-color: ${colors[c].dark['board']}'] {
+      background: var(--theme--board_${c}) !important;
+    }
+    .notion-body:not(.dark)
+      .notion-board-group[style*='background-color: ${colors[c].light['board']}']
+      > [data-block-id] > [rel='noopener noreferrer'],
+    .notion-body.dark
+      .notion-board-group[style*='background-color: ${colors[c].dark['board']}']
+      > [data-block-id] > [rel='noopener noreferrer'] {
+      background: var(--theme--board_${c}-card) !important;
+      color: var(--theme--board_${c}-card_text) !important;
+    }
+    .notion-body:not(.dark)
+      .notion-board-group[style*='background-color: ${colors[c].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: ${colors[c].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: ${colors[c].light['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']}'] {
+      color: var(--theme--board_${c}-text) !important;
+      fill: var(--theme--board_${c}-text) !important;
+    }
+  `;
+  }
+  return css;
+}
+
+// 'light' or 'dark'
+function vars(mode) {
+  let sets = {};
+  for (const color in colors) {
+    for (let key in colors[color][mode]) {
+      const prefix = key.split('-')[0],
+        value = colors[color][mode][key];
+      if (!sets[prefix]) sets[prefix] = '';
+      key = [`--theme--${prefix}_${color}`, ...key.split('-').slice(1)].join('-');
+      sets[prefix] += `${key}: ${value};\n`;
+    }
+  }
+  let vars = '';
+  for (const set in sets) {
+    vars += `\n${sets[set]}`;
+  }
+  return vars;
+}
+
+console.log(css());
diff --git a/repo/theming/patches.css b/repo/theming/patches.css
index 26d62bc..59511db 100644
--- a/repo/theming/patches.css
+++ b/repo/theming/patches.css
@@ -154,11 +154,20 @@
 .notion-help-button,
 .onboarding-checklist-button {
   opacity: 1 !important;
-  color: var(--theme--tag_default-text);
-  fill: var(--theme--tag_default-text);
-  background: var(--theme--tag_default) !important;
+  color: var(--theme--icon);
+  fill: var(--theme--icon);
+  background: var(--theme--ui_corner_action) !important;
   box-shadow: var(--theme--ui_shadow, rgba(15, 15, 15, 0.15)) 0px 0px 0px 1px,
     var(--theme--ui_shadow, rgba(15, 15, 15, 0.15)) 0px 2px 4px !important;
+  cursor: pointer;
+}
+.notion-help-button:hover,
+.onboarding-checklist-button:hover {
+  background: var(--theme--ui_corner_action-hover) !important;
+}
+.notion-help-button:active,
+.onboarding-checklist-button:active {
+  background: var(--theme--ui_corner_action-active) !important;
 }
 
 /* backgrounds */
@@ -223,6 +232,14 @@
   .notion-board-view
   > .notion-selectable.notion-collection_view-block
   > :first-child
-  > [style*='width: 20px'] {
+  > [style*='width: 20px'],
+.notion-body.dark
+  [style*='background: linear-gradient(rgba(47, 52, 55, 0) 0px, rgb(47, 52, 55) 10px, rgb(47, 52, 55) 100%);'],
+.notion-body:not(.dark)
+  [style*='background: linear-gradient(rgba(255, 255, 255, 0) 0px, white 10px, white 100%);'],
+.notion-body.dark .notion-collection_view_page-block [style*='background: rgb(47, 52, 55);'],
+.notion-body:not(.dark)
+  .notion-collection_view_page-block
+  [style*='background: white;']:not([style*='box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;']) {
   background: transparent !important;
 }
diff --git a/repo/theming/theme.css b/repo/theming/theme.css
index d02f59c..dc4ce7f 100644
--- a/repo/theming/theme.css
+++ b/repo/theming/theme.css
@@ -46,7 +46,8 @@ body,
 .notion-update-sidebar-tab-updates-header,
 .notion-update-sidebar-tab-updates-header + .notion-scroller,
 .notion-update-sidebar-tab-comments-header,
-.notion-update-sidebar-tab-comments-header + div {
+.notion-update-sidebar-tab-comments-header + div,
+.notion-code-block ~ [style$='padding-right: 105px;'] {
   background: var(--theme--bg) !important;
 }
 .notion-timeline-item-row + div > div > div,
@@ -118,9 +119,14 @@ body,
   background: var(--theme--ui_shadow) !important;
 }
 
-.notion-calendar-view
-  .notion-selectable.notion-page-block.notion-collection-item
-  > [style*='background:'],
+.notion-body.dark
+  [style*='box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 3px 6px, rgba(15, 15, 15, 0.4) 0px 9px 24px;'],
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;'],
+.notion-body.dark
+  [style*='box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 3px 6px, rgba(15, 15, 15, 0.4) 0px 9px 24px;'],
+.notion-body:not(.dark)
+  [style*='box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;'],
 [data-overlay]
   > div
   > [style*='position: relative; z-index: 1; box-shadow:'][style*='border-radius: 3px;'][style*='margin-bottom: 0px; top: 90px; overflow: hidden; width: 75%; max-width: 600px; min-height: 50px; max-height: 80vh;']:nth-child(2),
@@ -160,6 +166,14 @@ body,
     var(--theme--ui_shadow, rgba(15, 15, 15, 0.2)) 0px 9px 24px !important;
 }
 
+.notion-calendar-view
+  .notion-selectable.notion-page-block.notion-collection-item
+  > a[style*='background:'] {
+  background: var(--theme--bg_card) !important;
+  box-shadow: var(--theme--ui_shadow, rgba(15, 15, 15, 0.05)) 0px 0px 0px 1px,
+    var(--theme--ui_shadow, rgba(15, 15, 15, 0.1)) 0px 2px 4px !important;
+}
+
 .notion-media-menu > div > div > div[style*='background'],
 .notion-media-menu > div > div > div > div[style*='background']:not(.notion-focusable),
 .notion-body.dark
@@ -170,7 +184,8 @@ body,
   .notion-default-overlay-container
   [style*='grid-template-columns: [boolean-start] 60px [boolean-end property-start] 120px [property-end opererator-start] 110px [operator-end value-start] auto [value-end menu-start] 32px [menu-end];']
   .notion-focusable[style*='background: white;'],
-.notion-timeline-item {
+.notion-timeline-item,
+.notion-collection-item > a {
   background: var(--theme--bg_card) !important;
 }
 
@@ -243,10 +258,6 @@ body,
   color: var(--theme--text) !important;
   fill: var(--theme--text) !important;
 }
-.notion-body.dark
-  :not(.notion-text-action-menu)
-  > div
-  > [style*='background: rgb(63, 68, 71)'],
 .notion-body:not(.dark) [style*='background: rgba(55, 53, 47, 0.16)'],
 .notion-body.dark .notion-focusable[role='button'][style*='background: rgb(63, 68, 71);'],
 .notion-body:not(.dark)
@@ -739,3 +750,23 @@ body,
 .notion-code-block > div {
   color: var(--theme--code_plain) !important;
 }
+
+/** simple tables **/
+
+.notion-table-selection-overlay [style*='border: 2px solid rgb(116, 182, 219);'] {
+  border: 2px solid var(--theme--accent_blue) !important;
+}
+.notion-table-row-selector,
+.notion-table-column-selector,
+.notion-table-block .notion-focusable [style*='background: rgba(55, 53, 47, 0.06);'] {
+  background: var(--theme--ui_interactive-hover) !important;
+}
+.notion-table-row [style*='background: rgb(116, 182, 219);'],
+.notion-table-row-selector[style*='background: rgb(116, 182, 219);'],
+.notion-table-column-selector[style*='background: rgb(116, 182, 219);'],
+.notion-table-block .notion-focusable [style*='background: rgb(116, 182, 219);'] {
+  background: var(--theme--accent_blue) !important;
+}
+.notion-table-row td[style*='background:'] {
+  background: var(--theme--bg_secondary) !important;
+}
diff --git a/repo/theming/variables.css b/repo/theming/variables.css
index 0018b3a..42add87 100644
--- a/repo/theming/variables.css
+++ b/repo/theming/variables.css
@@ -51,6 +51,9 @@
   --theme--ui_tooltip: rgb(15, 15, 15);
   --theme--ui_tooltip-title: rgba(255, 255, 255, 0.9);
   --theme--ui_tooltip-description: rgba(206, 205, 202, 0.6);
+  --theme--ui_corner_action: white;
+  --theme--ui_corner_action-hover: rgb(239, 239, 238);
+  --theme--ui_corner_action-active: rgb(223, 223, 222);
 
   --theme--icon: rgba(55, 53, 47, 0.8);
   --theme--icon_secondary: rgba(55, 53, 47, 0.4);
@@ -230,6 +233,9 @@
   --theme--ui_tooltip: rgb(202, 204, 206);
   --theme--ui_tooltip-title: rgb(15, 15, 15);
   --theme--ui_tooltip-description: rgba(47, 52, 55, 0.6);
+  --theme--ui_corner_action: rgb(80, 85, 88);
+  --theme--ui_corner_action-hover: rgb(98, 102, 104);
+  --theme--ui_corner_action-active: rgb(120, 123, 123);
 
   --theme--icon: rgba(202, 204, 206);
   --theme--icon_secondary: rgb(202, 204, 206, 0.6);