add light gray, testing

notion-enhancer · Jan 4, 2022 · 9ebbb6f · 9ebbb6f
1 parent 59559df
commit 9ebbb6f
Show file tree

Hide file tree

Showing 3 changed files with 177 additions and 5 deletions.
diff --git a/theming/_mapColors.js b/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/theming/colors.css b/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/theming/variables.css b/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;