From eb7e840ad8617deea95f1b82d94e6d00f31ec8ca Mon Sep 17 00:00:00 2001
From: waaaaaaaaaaaaaaaaaaaaa <jiaruiliao@gmail.com>
Date: Tue, 4 Jan 2022 12:38:15 +1100
Subject: [PATCH 1/8] add light gray, testing

---
 repo/theming/_mapColors.js | 95 +++++++++++++++++++++++++++++++++++++-
 repo/theming/colors.css    | 71 ++++++++++++++++++++++++++++
 repo/theming/variables.css | 16 +++++--
 3 files changed, 177 insertions(+), 5 deletions(-)

diff --git a/repo/theming/_mapColors.js b/repo/theming/_mapColors.js
index 04b9f4b..b65d5c5 100644
--- a/repo/theming/_mapColors.js
+++ b/repo/theming/_mapColors.js
@@ -10,6 +10,27 @@
 // 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)',
+  }
+};
+// TODO also add colouring for the preview box?
+
+
 const colors = {
   'gray': {
     'light': {
@@ -274,6 +295,65 @@ function css() {
     isTag =
       "[style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;']";
   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)
+      .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 += `
 
@@ -386,7 +466,19 @@ function css() {
 
 // 'light' or 'dark'
 function vars(mode) {
-  const sets = {};
+  // add the prefixes that light gray doesn't have first to preserve the same order
+  const sets = {'text': '', 'highlight': '', 'callout': ''};
+
+  // 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],
@@ -410,3 +502,4 @@ 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 e795727..c2aa19b 100644
--- a/repo/theming/colors.css
+++ b/repo/theming/colors.css
@@ -4,6 +4,77 @@
  * (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: 6px;'][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: 6px;'][style*='line-height: 120%;'] {
+  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)'],
diff --git a/repo/theming/variables.css b/repo/theming/variables.css
index d5fceae..9485814 100644
--- a/repo/theming/variables.css
+++ b/repo/theming/variables.css
@@ -109,8 +109,8 @@
   --theme--callout_red: rgb(253, 235, 236);
   --theme--callout_red-text: currentColor;
 
-  --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 +130,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;
@@ -291,8 +295,8 @@
   --theme--callout_red: rgb(94, 52, 54);
   --theme--callout_red-text: currentColor;
 
-  --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 +316,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;

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 2/8] 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)'],

From 195c0917ff8698e8021ae92fa37b25b9f9109891 Mon Sep 17 00:00:00 2001
From: waaaaaaaaaaaaaaaaaaaaa <jiaruiliao@gmail.com>
Date: Wed, 5 Jan 2022 11:24:50 +1100
Subject: [PATCH 3/8] rename to light_gray

---
 repo/theming/_mapColors.js | 24 ++++++++++++------------
 repo/theming/variables.css | 24 ++++++++++++------------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/repo/theming/_mapColors.js b/repo/theming/_mapColors.js
index 940e1e6..2460143 100644
--- a/repo/theming/_mapColors.js
+++ b/repo/theming/_mapColors.js
@@ -305,8 +305,8 @@ function css() {
 
     .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;
+      background: var(--theme--tag_light_gray) !important;
+      color: var(--theme--tag_light_gray-text) !important;
     }
 
     .notion-body:not(.dark) [style*='background: ${
@@ -315,8 +315,8 @@ function css() {
     .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;
+      background: var(--theme--tag_light_gray) !important;
+      color: var(--theme--tag_light_gray-text) !important;
     }
 
     .notion-body:not(.dark)
@@ -327,8 +327,8 @@ function css() {
       [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;
+      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']}']
@@ -336,13 +336,13 @@ function css() {
     .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;
+      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;
+      -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']}']
@@ -360,8 +360,8 @@ function css() {
     .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;
+      color: var(--theme--board_light_gray-text) !important;
+      fill: var(--theme--board_light_gray-text) !important;
     }
   `;
 
@@ -509,7 +509,7 @@ function vars(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('-');
+    key = [`--theme--${prefix}_light_gray`, ...key.split('-').slice(1)].join('-');
     sets[prefix] += `${key}: ${value};\n`;
   }
 
diff --git a/repo/theming/variables.css b/repo/theming/variables.css
index 9485814..965a7b9 100644
--- a/repo/theming/variables.css
+++ b/repo/theming/variables.css
@@ -109,8 +109,8 @@
   --theme--callout_red: rgb(253, 235, 236);
   --theme--callout_red-text: currentColor;
 
-  --theme--tag_light-gray: rgba(227, 226, 224, 0.5);
-  --theme--tag_light-gray-text: rgb(50, 48, 44);
+  --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,10 +130,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_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;
@@ -295,8 +295,8 @@
   --theme--callout_red: rgb(94, 52, 54);
   --theme--callout_red-text: currentColor;
 
-  --theme--tag_light-gray: rgba(71, 76, 80, 0.7);
-  --theme--tag_light-gray-text: rgba(255, 255, 255, 0.88);
+  --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);
@@ -316,10 +316,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_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;

From 69ca30a105bb90181e09607f8c965887c6f51c55 Mon Sep 17 00:00:00 2001
From: waaaaaaaaaaaaaaaaaaaaa <jiaruiliao@gmail.com>
Date: Wed, 5 Jan 2022 14:52:18 +1100
Subject: [PATCH 4/8] update to light_gray

---
 repo/theming/colors.css | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/repo/theming/colors.css b/repo/theming/colors.css
index 4a18ae8..01fa3c7 100644
--- a/repo/theming/colors.css
+++ b/repo/theming/colors.css
@@ -10,16 +10,16 @@
   [style*='background: rgba(227, 226, 224, 0.5)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][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: 6px;'][style*='line-height: 120%;'] {
-  background: var(--theme--tag_light-gray) !important;
-  color: var(--theme--tag_light-gray-text) !important;
+  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;
+  background: var(--theme--tag_light_gray) !important;
+  color: var(--theme--tag_light_gray-text) !important;
 }
 
 .notion-body:not(.dark)
@@ -37,8 +37,8 @@
   > :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;
+  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)']
@@ -48,8 +48,8 @@
   .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;
+  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)']
@@ -57,8 +57,8 @@
   > [rel='noopener noreferrer']
   [placeholder='Untitled'] {
   -webkit-text-fill-color: var(
-    --theme--board_light-gray-card_text,
-    var(--theme--board_light-gray-text)
+    --theme--board_light_gray-card_text,
+    var(--theme--board_light_gray-text)
   ) !important;
 }
 .notion-body:not(.dark)
@@ -79,8 +79,8 @@
 .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;
+  color: var(--theme--board_light_gray-text) !important;
+  fill: var(--theme--board_light_gray-text) !important;
 }
 
 /* gray */

From 91986905c85d7f49af3e3ff48d93cada80c233c0 Mon Sep 17 00:00:00 2001
From: waaaaaaaaaaaaaaaaaaaaa <jiaruiliao@gmail.com>
Date: Wed, 5 Jan 2022 14:52:18 +1100
Subject: [PATCH 5/8] update to light_gray

---
 repo/theming/_mapColors.js |  1 -
 repo/theming/colors.css    | 24 ++++++++++++------------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/repo/theming/_mapColors.js b/repo/theming/_mapColors.js
index 2460143..dfdb1aa 100644
--- a/repo/theming/_mapColors.js
+++ b/repo/theming/_mapColors.js
@@ -28,7 +28,6 @@ const lightGray = {
     'board-text': 'rgba(107, 112, 116, 0.7)',
   },
 };
-// TODO also add colouring for the preview box?
 
 const colors = {
   'gray': {
diff --git a/repo/theming/colors.css b/repo/theming/colors.css
index 4a18ae8..01fa3c7 100644
--- a/repo/theming/colors.css
+++ b/repo/theming/colors.css
@@ -10,16 +10,16 @@
   [style*='background: rgba(227, 226, 224, 0.5)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][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: 6px;'][style*='line-height: 120%;'] {
-  background: var(--theme--tag_light-gray) !important;
-  color: var(--theme--tag_light-gray-text) !important;
+  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;
+  background: var(--theme--tag_light_gray) !important;
+  color: var(--theme--tag_light_gray-text) !important;
 }
 
 .notion-body:not(.dark)
@@ -37,8 +37,8 @@
   > :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;
+  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)']
@@ -48,8 +48,8 @@
   .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;
+  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)']
@@ -57,8 +57,8 @@
   > [rel='noopener noreferrer']
   [placeholder='Untitled'] {
   -webkit-text-fill-color: var(
-    --theme--board_light-gray-card_text,
-    var(--theme--board_light-gray-text)
+    --theme--board_light_gray-card_text,
+    var(--theme--board_light_gray-text)
   ) !important;
 }
 .notion-body:not(.dark)
@@ -79,8 +79,8 @@
 .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;
+  color: var(--theme--board_light_gray-text) !important;
+  fill: var(--theme--board_light_gray-text) !important;
 }
 
 /* gray */

From ce500c7f8e9e6705ce671b350bc5316a6f589acd Mon Sep 17 00:00:00 2001
From: waaaaaaaaaaaaaaaaaaaaa <jiaruiliao@gmail.com>
Date: Wed, 5 Jan 2022 23:08:32 +1100
Subject: [PATCH 6/8] fix tag colours not applying in list and timeline views

---
 repo/theming/_mapColors.js |  2 +-
 repo/theming/colors.css    | 40 +++++++++++++++++++-------------------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/repo/theming/_mapColors.js b/repo/theming/_mapColors.js
index dfdb1aa..37551aa 100644
--- a/repo/theming/_mapColors.js
+++ b/repo/theming/_mapColors.js
@@ -291,7 +291,7 @@ 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;']";
diff --git a/repo/theming/colors.css b/repo/theming/colors.css
index 01fa3c7..16a8dc4 100644
--- a/repo/theming/colors.css
+++ b/repo/theming/colors.css
@@ -7,9 +7,9 @@
 /* light gray */
 
 .notion-body:not(.dark)
-  [style*='background: rgba(227, 226, 224, 0.5)'][style*='align-items: center;'][style*='border-radius: 3px; padding-left: 6px;'][style*='line-height: 120%;'],
+  [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: 6px;'][style*='line-height: 120%;'] {
+  [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;
 }
@@ -126,9 +126,9 @@
   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;
 }
@@ -252,9 +252,9 @@
   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;
 }
@@ -378,9 +378,9 @@
   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;
 }
@@ -504,9 +504,9 @@
   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;
 }
@@ -630,9 +630,9 @@
   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;
 }
@@ -756,9 +756,9 @@
   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;
 }
@@ -882,9 +882,9 @@
   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;
 }
@@ -1008,9 +1008,9 @@
   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;
 }
@@ -1134,9 +1134,9 @@
   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;
 }

From 48fa4790012083ec37859ee67ebcf9ba0c5db769 Mon Sep 17 00:00:00 2001
From: waaaaaaaaaaaaaaaaaaaaa <jiaruiliao@gmail.com>
Date: Thu, 6 Jan 2022 11:55:08 +1100
Subject: [PATCH 7/8] add light_gray colours

---
 repo/cherry-cola/variables.css    |   6 ++
 repo/dark+/variables.css          |   4 ++
 repo/dracula/variables.css        |   8 +++
 repo/gruvbox-dark/variables.css   | 114 ++++++++++++++++--------------
 repo/gruvbox-light/variables.css  |   6 ++
 repo/light+/variables.css         |   5 ++
 repo/material-ocean/variables.css |   6 ++
 repo/neutral/variables.css        |   5 ++
 repo/nord/variables.css           |   5 ++
 repo/pastel-dark/variables.css    |   5 ++
 repo/pinky-boom/variables.css     |   5 ++
 repo/playful-purple/variables.css |   6 ++
 12 files changed, 121 insertions(+), 54 deletions(-)

diff --git a/repo/cherry-cola/variables.css b/repo/cherry-cola/variables.css
index 26c3341..e2cc5f9 100644
--- a/repo/cherry-cola/variables.css
+++ b/repo/cherry-cola/variables.css
@@ -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);
diff --git a/repo/dark+/variables.css b/repo/dark+/variables.css
index 306d144..4f757d7 100644
--- a/repo/dark+/variables.css
+++ b/repo/dark+/variables.css
@@ -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);
diff --git a/repo/dracula/variables.css b/repo/dracula/variables.css
index 42f0ef1..0ef8311 100644
--- a/repo/dracula/variables.css
+++ b/repo/dracula/variables.css
@@ -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);
diff --git a/repo/gruvbox-dark/variables.css b/repo/gruvbox-dark/variables.css
index d8ef866..4096c4e 100644
--- a/repo/gruvbox-dark/variables.css
+++ b/repo/gruvbox-dark/variables.css
@@ -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);
diff --git a/repo/gruvbox-light/variables.css b/repo/gruvbox-light/variables.css
index a72e370..9b3722f 100644
--- a/repo/gruvbox-light/variables.css
+++ b/repo/gruvbox-light/variables.css
@@ -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);
diff --git a/repo/light+/variables.css b/repo/light+/variables.css
index 473a6c7..60531ff 100644
--- a/repo/light+/variables.css
+++ b/repo/light+/variables.css
@@ -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);
diff --git a/repo/material-ocean/variables.css b/repo/material-ocean/variables.css
index ff8cb89..e8a3579 100644
--- a/repo/material-ocean/variables.css
+++ b/repo/material-ocean/variables.css
@@ -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);
diff --git a/repo/neutral/variables.css b/repo/neutral/variables.css
index 3720638..0e7b76f 100644
--- a/repo/neutral/variables.css
+++ b/repo/neutral/variables.css
@@ -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);
diff --git a/repo/nord/variables.css b/repo/nord/variables.css
index 083e66c..7aaa8da 100644
--- a/repo/nord/variables.css
+++ b/repo/nord/variables.css
@@ -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);
diff --git a/repo/pastel-dark/variables.css b/repo/pastel-dark/variables.css
index 3a09aa0..81f697a 100644
--- a/repo/pastel-dark/variables.css
+++ b/repo/pastel-dark/variables.css
@@ -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);
diff --git a/repo/pinky-boom/variables.css b/repo/pinky-boom/variables.css
index 8a57b21..a5eefdc 100644
--- a/repo/pinky-boom/variables.css
+++ b/repo/pinky-boom/variables.css
@@ -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);
diff --git a/repo/playful-purple/variables.css b/repo/playful-purple/variables.css
index cf82ba1..cb0d704 100644
--- a/repo/playful-purple/variables.css
+++ b/repo/playful-purple/variables.css
@@ -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);

From 43bcc8101ceffae8f054f989e8b12fad468afbd5 Mon Sep 17 00:00:00 2001
From: blorbb <jiaruiliao@gmail.com>
Date: Fri, 21 Jan 2022 12:04:10 +1100
Subject: [PATCH 8/8] add tag_default back

---
 repo/theming/_mapColors.js | 11 +++++++++--
 repo/theming/theme.css     |  1 +
 repo/theming/variables.css |  4 ++++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/repo/theming/_mapColors.js b/repo/theming/_mapColors.js
index e79ebfa..9798198 100644
--- a/repo/theming/_mapColors.js
+++ b/repo/theming/_mapColors.js
@@ -500,8 +500,15 @@ 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: '' };
+  // 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]) {
diff --git a/repo/theming/theme.css b/repo/theming/theme.css
index f0cff9d..4473a89 100644
--- a/repo/theming/theme.css
+++ b/repo/theming/theme.css
@@ -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']),
diff --git a/repo/theming/variables.css b/repo/theming/variables.css
index 965a7b9..8ff0aad 100644
--- a/repo/theming/variables.css
+++ b/repo/theming/variables.css
@@ -109,6 +109,8 @@
   --theme--callout_red: rgb(253, 235, 236);
   --theme--callout_red-text: currentColor;
 
+  --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);
@@ -295,6 +297,8 @@
   --theme--callout_red: rgb(94, 52, 54);
   --theme--callout_red-text: currentColor;
 
+  --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);