add colour picker for dark+ primary colour

DOCUMENTATION.md

@@ -74,12 +74,13 @@ module.exports = {
 | extensions | **optional:** allowed file extensions (only use with a file option), e.g. `['js', 'ts']` | _array\<string\>_ |
 | value      | **optional:** default or possible value/s for option                                     | see below         |
 
-| type   | value             |
+| type   | value                |
-| ------ | ----------------- |
+| ------ | -------------------- |
-| toggle | _boolean_         |
+| toggle | _boolean_            |
-| select | _array\<string\>_ |
+| select | _array\<string\>_    |
-| input  | _string_          |
+| input  | _string_ or _number_ |
-| file   | none              |
+| color  | _string_             |
+| file   | none                 |
 
 > the file option stores only a filepath, not the file itself.
 

mods/core/client.js

@@ -53,7 +53,7 @@ module.exports = (store, __exports) => {
       dragarea.className = 'window-dragarea';
       document.querySelector('.notion-topbar').prepend(dragarea);
       document.documentElement.style.setProperty(
-        '--configured-dragarea_height',
+        '--configured--dragarea_height',
         `${store().dragarea_height + 2}px`
       );
     }

mods/core/css/buttons.css

@@ -33,24 +33,13 @@
   stroke: currentColor;
 }
 
-.notion-dark-theme .window-button:hover {
+.window-button:hover {
-  background: var(--theme_dark--interactive_hover);
+  background: var(--theme--interactive_hover);
-  box-shadow: 0 0 0 0.5px var(--theme_dark--interactive_hover-border);
+  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
 }
-.notion-dark-theme .window-button#btn-close:hover {
+.window-button#btn-close:hover {
-  background: var(--theme_dark--button_close);
+  background: var(--theme--button_close);
 }
-.notion-dark-theme .window-button#btn-close:hover svg line {
+.window-button#btn-close:hover svg line {
-  stroke: var(--theme_dark--button_close-fill);
+  stroke: var(--theme--button_close-fill);
-}
-
-.notion-light-theme .window-button#btn-close:hover {
-  background: var(--theme_light--button_close);
-}
-.notion-light-theme .window-button#btn-close:hover svg line {
-  stroke: var(--theme_light--button_close-fill);
-}
-.notion-light-theme .window-button:hover {
-  background: var(--theme_light--interactive_hover);
-  box-shadow: 0 0 0 0.5px var(--theme_light--interactive_hover-border);
 }

mods/core/css/menu.css

@@ -17,6 +17,15 @@
   }
 }
 
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 * {
   box-sizing: border-box;
   word-break: break-word;
@@ -315,6 +324,7 @@ s {
 .toggle *,
 .input *,
 .select *,
+.color *,
 .file * {
   cursor: pointer;
 }
@@ -433,3 +443,133 @@ s {
   --menu--toggle_offset: 1em;
   --menu--toggle_opacity: 1;
 }
+
+.color {
+  display: flex;
+}
+.color label {
+  flex-basis: 70%;
+}
+.color input[type='button'] {
+  flex-basis: 30%;
+  box-shadow: 2px 1px 4px var(--theme--table-border);
+  border: 1px solid var(--theme--option_active-color);
+  border-radius: 3px;
+  background: var(--configured--color-value);
+  margin: 0;
+}
+.color input[type='button']:focus {
+  box-shadow: 3px 2px 5px var(--theme--table-border);
+}
+
+/* further-configuration popup */
+
+#popup,
+#popup-overlay {
+  position: absolute;
+  top: 0;
+  height: 100vh;
+  width: 100vw;
+}
+#popup {
+  display: none;
+}
+#popup.visible {
+  display: flex;
+  animation: fade 200ms ease;
+}
+#popup-overlay {
+  background: var(--theme--overlay);
+}
+
+.colorPicker {
+  margin: auto;
+  position: relative;
+  border: 1px solid var(--theme--table-border);
+  background: var(--theme--card);
+}
+
+.colorPicker .twod {
+  border-radius: 4px;
+}
+.colorPicker .twod .bg {
+  border-radius: 2px;
+}
+.colorPicker .oned,
+.colorPicker .oned .bg {
+  margin-left: 0;
+  height: 212.5px;
+}
+.colorPicker .oned .bg {
+  border-radius: 4px;
+  border: 1px solid var(--theme--table-border);
+}
+.colorPicker > button {
+  display: block;
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  width: 21px;
+  height: 20px;
+  cursor: pointer;
+  background: transparent;
+  transition: background 0.2s;
+}
+.colorPicker > button::after {
+  content: '×';
+  font-size: 1.5em;
+  position: relative;
+  bottom: 5px;
+}
+.colorPicker > button:hover {
+  background: var(--theme--interactive_hover);
+  border-radius: 4px;
+  box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
+}
+.colorPicker > button:focus {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--theme--table-border);
+}
+.colorPicker .twod .pointer .shape.shape1 {
+  width: 11px;
+  height: 11px;
+}
+.colorPicker .twod .pointer .shape.shape2 {
+  width: 9px;
+  height: 9px;
+}
+.colorPicker .oned .pointer .shape {
+  height: 6.5px;
+  margin-left: 0;
+  border: 2px solid #fff;
+  box-shadow: 0 0 0 1px #000;
+}
+.shape {
+  cursor: pointer;
+}
+
+@media (max-width: 300px) {
+  .colorPicker .twod,
+  .colorPicker .twod .bg {
+    width: 200px;
+    height: 200px;
+  }
+  .colorPicker .oned,
+  .colorPicker .oned .bg {
+    height: 172.5px;
+  }
+}
+@media (max-width: 250px) {
+  .colorPicker .twod,
+  .colorPicker .twod .bg {
+    width: 150px;
+    height: 150px;
+  }
+  .colorPicker .oned,
+  .colorPicker .oned .bg {
+    height: 132.5px;
+  }
+}

mods/core/css/scrollbars.css

@@ -19,18 +19,10 @@
   border-radius: 5px;
 }
 
-.smooth-scrollbars .notion-dark-theme ::-webkit-scrollbar-thumb {
+.smooth-scrollbars ::-webkit-scrollbar-thumb {
-  background-color: var(--theme_dark--scrollbar);
+  background-color: var(--theme--scrollbar);
-  border: var(--theme_dark--scrollbar-border);
+  border: 1px solid var(--theme--scrollbar-border);
 }
-.smooth-scrollbars .notion-dark-theme ::-webkit-scrollbar-thumb:hover {
+.smooth-scrollbars ::-webkit-scrollbar-thumb:hover {
-  background: var(--theme_dark--scrollbar_hover);
+  background: var(--theme--scrollbar_hover);
-}
-
-.smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb {
-  background-color: var(--theme_light--scrollbar);
-  border: 1px solid var(--theme_light--scrollbar-border);
-}
-.smooth-scrollbars .notion-light-theme ::-webkit-scrollbar-thumb:hover {
-  background: var(--theme_light--scrollbar_hover);
 }

mods/core/css/titlebar.css

@@ -8,22 +8,19 @@
 @import 'buttons.css';
 
 .frameless .notion-topbar {
-  height: calc(var(--configured-dragarea_height, 10px) + 45px) !important;
+  height: calc(var(--configured--dragarea_height, 10px) + 45px) !important;
 }
 .frameless .window-dragarea {
-  height: var(--configured-dragarea_height, 10px);
+  height: var(--configured--dragarea_height, 10px);
   width: 100%;
 }
-.frameless .notion-dark-theme .window-dragarea {
+.frameless .window-dragarea {
-  background: var(--theme_dark--dragarea);
+  background: var(--theme--dragarea);
-}
-.frameless .notion-light-theme .window-dragarea {
-  background: var(--theme_light--dragarea);
 }
 
 @media (max-width: 760px) {
   .frameless .notion-topbar {
-    height: calc(var(--configured-dragarea_height, 10px) + 80px) !important;
+    height: calc(var(--configured--dragarea_height, 10px) + 80px) !important;
   }
   .frameless .notion-topbar > :nth-child(2) {
     height: 80px !important;

mods/core/menu.html

@@ -4,8 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>notion-enhancer menu</title>
+    <script src="./colorjoe/min.js"></script>
+    <link rel="stylesheet" href="./colorjoe/picker.css" />
     <link rel="stylesheet" href="./css/menu.css" />
-    <script src="https://unpkg.com/snarkdown@1.0.2/dist/snarkdown.umd.js"></script>
   </head>
   <body>
     <header id="menu-titlebar"></header>
@@ -22,6 +23,10 @@
       </div>
       <div id="modules"></div>
     </main>
+    <section id="popup">
+      <div id="popup-overlay" class="close-modal"></div>
+      <div id="colorpicker"></div>
+    </section>
     <script>
       window['__start']();
     </script>

mods/core/menu.js

@@ -130,6 +130,37 @@ window['__start'] = async () => {
     ).append();
   }
 
+  // further-configuration popup
+  const $popup = document.querySelector('#popup');
+  document.addEventListener('keyup', (event) => {
+    if (
+      $popup.classList.contains('visible') &&
+      [13, 27].includes(event.keyCode)
+    )
+      $popup.classList.remove('visible');
+  });
+  let colorpicker_target = null;
+  const $colorpicker = colorjoe
+    .rgb('colorpicker')
+    .on('change', function (color) {
+      if (!colorpicker_target) return;
+      colorpicker_target.elem.style.setProperty(
+        '--configured--color-value',
+        color.css()
+      );
+      store(colorpicker_target.id)[colorpicker_target.key] = color.css();
+    })
+    .update();
+
+  document
+    .querySelector('#colorpicker')
+    .appendChild(createElement('<button class="close-modal"></button>'));
+  document.querySelectorAll('#popup .close-modal').forEach((el) =>
+    el.addEventListener('click', (event) => {
+      $popup.classList.remove('visible');
+    })
+  );
+
   // search
   const search_query = {
     enabled: true,
@@ -244,6 +275,94 @@ window['__start'] = async () => {
     modified_notice.append();
   }
 
+  const file_icon = await fs.readFile(
+    path.resolve(`${__dirname}/icons/file.svg`)
+  );
+  function createOption(opt, id) {
+    let $opt;
+    switch (opt.type) {
+      case 'toggle':
+        $opt = `
+          <input type="checkbox" id="${opt.type}_${id}--${opt.key}"
+          ${store(id, { [opt.key]: opt.value })[opt.key] ? 'checked' : ''}/>
+          <label for="${opt.type}_${id}--${opt.key}">
+            <span class="name">${opt.label}</span>
+            <span class="switch"><span class="dot"></span></span>
+          </label>
+        `;
+        break;
+      case 'select':
+        $opt = `
+          <label for="${opt.type}_${id}--${opt.key}">${opt.label}</label>
+          <select id="${opt.type}_${id}--${opt.key}">
+            ${opt.value
+              .map((val) => `<option value="${val}">${val}</option>`)
+              .join('')}
+          </select>
+        `;
+        break;
+      case 'input':
+        $opt = `
+          <label for="${opt.type}_${id}--${opt.key}">${opt.label}</label>
+          <input type="${typeof value === 'number' ? 'number' : 'text'}" id="${
+          opt.type
+        }_${id}--${opt.key}">
+        `;
+        break;
+      case 'color':
+        $opt = `
+          <label for="${opt.type}_${id}--${opt.key}">${opt.label}</label>
+          <input type="button" id="${opt.type}_${id}--${opt.key}">
+        `;
+        break;
+      case 'file':
+        $opt = `
+          <input type="file" id="${opt.type}_${id}--${opt.key}"
+          ${
+            opt.extensions
+              ? ` accept="${opt.extensions
+                  .map((ext) => (ext.startsWith('.') ? ext : `.${ext}`))
+                  .join(',')}"`
+              : ''
+          }>
+          <label for="${opt.type}_${id}--${opt.key}">
+            <span class="label">
+              <span class="name">${opt.label}</span>
+              <button class="clear"></button>
+            </span>
+            <span class="choose">
+              ${file_icon}
+              <span class="path">${
+                store(id)[opt.key]
+                  ? store(id)[opt.key].split(path.sep).reverse()[0]
+                  : 'choose a file...'
+              }</span>
+            </span>
+          </label>
+        `;
+    }
+    $opt = createElement(`<p class="${opt.type}">${$opt}</p>`);
+    if (opt.type === 'color') {
+      $opt
+        .querySelector(`#${opt.type}_${id}--${opt.key}`)
+        .style.setProperty(
+          '--configured--color-value',
+          store(id, { [opt.key]: opt.value })[opt.key]
+        );
+    } else if (opt.type === 'file') {
+      $opt.querySelector('.clear').addEventListener('click', (event) => {
+        store(id)[opt.key] = '';
+        $opt.querySelector('.path').innerText = 'choose a file...';
+      });
+    } else {
+      $opt.querySelector(`#${opt.type}_${id}--${opt.key}`).value = store(id, {
+        [opt.key]: opt.type === 'select' ? opt.value[0] : opt.value,
+      })[opt.key];
+    }
+
+    return $opt;
+  }
+
   const $modules = document.querySelector('#modules');
   for (let mod of modules.loaded.sort((a, b) =>
     a.tags.includes('core') ||
@@ -302,114 +421,40 @@ window['__start'] = async () => {
       });
 
     const $options = mod.elem.querySelector('.options');
-    let file_icon;
     if ($options)
       for (const opt of mod.options) {
-        let $opt;
+        const $opt = createOption(opt, mod.id);
-        switch (opt.type) {
+        if (opt.type === 'color') {
-          case 'toggle':
+          const $preview = $opt.querySelector('input');
-            $opt = createElement(`
+          $opt.addEventListener('click', (event) => {
-              <p class="toggle">
+            colorpicker_target = {
-                <input type="checkbox" id="toggle_${mod.id}--${opt.key}"
+              id: mod.id,
-                ${
+              key: opt.key,
-                  store(mod.id, { [opt.key]: opt.value })[opt.key]
+              elem: $preview,
-                    ? 'checked'
+            };
-                    : ''
+            $colorpicker.set(store(mod.id)[opt.key]);
-                } />
+            $popup.classList.add('visible');
-                <label for="toggle_${mod.id}--${opt.key}">
-                  <span class="name">${opt.label}</span>
-                  <span class="switch"><span class="dot"></span></span>
-                </label>
-              </p>
-            `);
-            break;
-          case 'select':
-            $opt = createElement(`
-              <p class="select">
-                <label for="select_${mod.id}--${opt.key}">${opt.label}</label>
-                <select id="select_${mod.id}--${opt.key}">
-                  ${opt.value
-                    .map((val) => `<option value="${val}">${val}</option>`)
-                    .join('')}
-                </select>
-              </p>
-            `);
-            break;
-          case 'input':
-            $opt = createElement(`
-              <p class="input">
-                <label for="input_${mod.id}--${opt.key}">${opt.label}</label>
-                <input type="${
-                  typeof opt.value === 'number' ? 'number' : 'text'
-                }" id="input_${mod.id}--${opt.key}">
-              </p>
-            `);
-            break;
-          case 'file':
-            if (!file_icon)
-              file_icon = await fs.readFile(
-                path.resolve(`${__dirname}/icons/file.svg`)
-              );
-            $opt = createElement(`
-              <p class="file">
-              <input type="file" id="file_${mod.id}--${opt.key}"
-              ${
-                opt.extensions
-                  ? ` accept="${opt.extensions
-                      .map((ext) => (ext.startsWith('.') ? ext : `.${ext}`))
-                      .join(',')}"`
-                  : ''
-              }>
-                <label for="file_${mod.id}--${opt.key}">
-                  <span class="label">
-                    <span class="name">${opt.label}</span>
-                    <button class="clear"></button>
-                  </span>
-                  <span class="choose">
-                    ${file_icon}
-                    <span class="path">${
-                      store(mod.id)[opt.key]
-                        ? store(mod.id)[opt.key].split(path.sep).reverse()[0]
-                        : 'choose a file...'
-                    }</span>
-                  </span>
-                </label>
-              </p>
-            `);
-            $opt.querySelector('.clear').addEventListener('click', (event) => {
-              store(mod.id)[opt.key] = '';
-              $opt.querySelector('.path').innerText = store(mod.id)[opt.key]
-                ? store(mod.id)[opt.key].split(path.sep).reverse()[0]
-                : 'choose a file...';
-            });
-            break;
-        }
-
-        if (opt.type !== 'file') {
-          $opt.querySelector(
-            `#${opt.type}_${mod.id}--${opt.key}`
-          ).value = store(mod.id, {
-            [opt.key]: opt.type === 'select' ? opt.value[0] : opt.value,
-          })[opt.key];
-        }
-        $opt
-          .querySelector(`#${opt.type}_${mod.id}--${opt.key}`)
-          .addEventListener('change', (event) => {
-            if (opt.type === 'toggle') {
-              store(mod.id)[opt.key] = event.target.checked;
-            } else if (opt.type === 'file') {
-              if (event.target.files.length)
-                store(mod.id)[opt.key] = event.target.files[0].path;
-              $opt.querySelector('.path').innerText = store(mod.id)[opt.key]
-                ? store(mod.id)[opt.key].split(path.sep).reverse()[0]
-                : 'choose a file...';
-            } else
-              store(mod.id)[opt.key] =
-                typeof opt.value === 'number'
-                  ? Number(event.target.value)
-                  : event.target.value;
-            modified();
           });
+        } else {
+          $opt
+            .querySelector(`#${opt.type}_${mod.id}--${opt.key}`)
+            .addEventListener('change', (event) => {
+              if (opt.type === 'toggle') {
+                store(mod.id)[opt.key] = event.target.checked;
+              } else if (opt.type === 'file') {
+                if (event.target.files.length)
+                  store(mod.id)[opt.key] = event.target.files[0].path;
+                $opt.querySelector('.path').innerText = store(mod.id)[opt.key]
+                  ? store(mod.id)[opt.key].split(path.sep).reverse()[0]
+                  : 'choose a file...';
+              } else
+                store(mod.id)[opt.key] =
+                  typeof opt.value === 'number'
+                    ? Number(event.target.value)
+                    : event.target.value;
+              modified();
+            });
+        }
         $options.appendChild($opt);
       }
     $modules.append(mod.elem);

mods/dark+/mod.js

@@ -13,4 +13,40 @@ module.exports = {
   desc: 'a vivid-colour near-black theme.',
   version: '0.1.0',
   author: 'dragonwocky',
+  options: [
+    {
+      key: 'primary',
+      label: 'primary colour',
+      type: 'color',
+      value: 'rgb(177, 24, 24)',
+    },
+  ],
+  hacks: {
+    'renderer/preload.js'(store, __exports) {
+      const color = require('./one-color.js')(store().primary);
+      document.addEventListener('readystatechange', (event) => {
+        if (document.readyState !== 'complete') return false;
+        document.documentElement.style.setProperty(
+          '--theme_dark--selected',
+          color.lightness(0.35).alpha(0.2).cssa()
+        );
+        document.documentElement.style.setProperty(
+          '--theme_dark--primary',
+          color.hex()
+        );
+        document.documentElement.style.setProperty(
+          '--theme_dark--primary_hover',
+          color.lightness(0.5).hex()
+        );
+        document.documentElement.style.setProperty(
+          '--theme_dark--primary_click',
+          color.lightness(0.6).hex()
+        );
+        document.documentElement.style.setProperty(
+          '--theme_dark--primary_indicator',
+          color.lightness(0.4).hex()
+        );
+      });
+    },
+  },
 };

mods/dark+/styles.css

@@ -32,11 +32,11 @@
   --theme_dark--font_body-size: 16px;
   --theme_dark--font_code-size: 12.75px; */
 
-  --theme_dark--scrollbar: #232425;
+  --theme_dark--scrollbar: #23242599;
   --theme_dark--scrollbar-border: transparent;
-  --theme_dark--scrollbar_hover: #373838;
+  --theme_dark--scrollbar_hover: #37383899;
 
-  --theme_dark--card: #1717175e;
+  --theme_dark--card: #101010;
   --theme_dark--gallery: rgba(26, 26, 26, 0.3);
   --theme_dark--table-border: rgba(46, 46, 46, 0.7);
   --theme_dark--interactive_hover: #020202;
@@ -44,12 +44,6 @@
   --theme_dark--button_close: #e81123;
   --theme_dark--button_close-fill: white; */
 
-  --theme_dark--selected: rgba(241, 91, 91, 0.2);
-  --theme_dark--primary: rgb(177, 24, 24);
-  --theme_dark--primary_hover: rgb(202, 26, 26);
-  --theme_dark--primary_click: rgb(219, 41, 41);
-  --theme_dark--primary_indicator: rgb(202, 26, 26);
-
   /* --theme_dark--option-color: white;
   --theme_dark--option-background: transparent;
   --theme_dark--option_active-color: white;

mods/focus-mode/styles.css

@@ -7,7 +7,7 @@
 
 .notion-sidebar-container[style*='width: 0px;'] + .notion-frame {
   height: calc(
-    100% - (var(--configured-dragarea_height, 10px) + 45px)
+    100% - (var(--configured--dragarea_height, 10px) + 45px)
   ) !important;
 }
 .notion-sidebar-container[style*='width: 0px;'] + .notion-frame .notion-topbar {

pkg/helpers.js

@@ -130,7 +130,7 @@ function getEnhancements() {
         !mod.author ||
         (mod.options &&
           !mod.options.every((opt) =>
-            ['toggle', 'select', 'input', 'file'].includes(opt.type)
+            ['toggle', 'select', 'input', 'file', 'color'].includes(opt.type)
           ))
       )
         throw Error;