light+ configurable highlight color for text/lines etc.

repo/dark+/theme.mjs

@@ -9,10 +9,10 @@
 export default async function ({ fmt }, db) {
   {
     const primary = await db.get(['primary']),
-      [r, g, b, a] = primary
+      [r, g, b] = primary
         .slice(5, -1)
         .split(',')
-        .map((i) => parseFloat(i));
+        .map((i) => parseInt(i));
     if (!(r === 46 && g === 170 && b === 220)) {
       document.documentElement.style.setProperty('--dark_plus--accent_blue', primary);
       document.documentElement.style.setProperty(
@@ -36,7 +36,10 @@ export default async function ({ fmt }, db) {
 
   {
     const secondary = await db.get(['secondary']),
-      [r, g, b, a] = secondary.slice(5, -1).split(',');
+      [r, g, b] = secondary
+        .slice(5, -1)
+        .split(',')
+        .map((i) => parseInt(i));
     if (!(r === 235 && g === 87 && b === 87)) {
       document.documentElement.style.setProperty('--dark_plus--accent_red', secondary);
       document.documentElement.style.setProperty(

repo/dark+/variables.css

@@ -5,14 +5,17 @@
  */
 
 :root.dark {
-  --theme--accent_blue: var(--dark_plus--accent_blue);
-  --theme--accent_blue-selection: var(--dark_plus--accent_blue-selection);
-  --theme--accent_blue-hover: var(--dark_plus--accent_blue-hover);
-  --theme--accent_blue-active: var(--dark_plus--accent_blue-active);
-  --theme--accent_blue-text: var(--dark_plus--accent_blue-text);
-  --theme--accent_red: var(--dark_plus--accent_red);
-  --theme--accent_red-button: var(--dark_plus--accent_red-button);
-  --theme--accent_red-text: var(--dark_plus--accent_red-text);
+  --theme--accent_blue: var(--dark_plus--accent_blue, rgb(46, 170, 220));
+  --theme--accent_blue-selection: var(
+    --dark_plus--accent_blue-selection,
+    rgb(46, 170, 220, 0.25)
+  );
+  --theme--accent_blue-hover: var(--dark_plus--accent_blue-hover, rgb(6, 156, 205));
+  --theme--accent_blue-active: var(--dark_plus--accent_blue-active, rgb(0, 141, 190));
+  --theme--accent_blue-text: var(--dark_plus--accent_blue-text, #fff);
+  --theme--accent_red: var(--dark_plus--accent_red, #eb5757);
+  --theme--accent_red-button: var(--dark_plus--accent_red-button, rgba(235, 87, 87, 0.1));
+  --theme--accent_red-text: var(--dark_plus--accent_red-text, #fff);
 
   --theme--bg: rgb(14, 14, 14);
   --theme--bg_secondary: rgb(0, 0, 0);

repo/light+/mod.json

@@ -35,6 +35,13 @@
       "label": "secondary accent color",
       "tooltip": "**replaces notion's red accent**",
       "value": "rgba(235,87,87,1)"
+    },
+    {
+      "type": "color",
+      "key": "highlight",
+      "label": "highlight accent color",
+      "tooltip": "**affects dividers, text, icons and hovered scrollbars. set this to rgba(0,0,0,0) to disable it**",
+      "value": "rgba(0,0,0,0)"
     }
   ]
 }

repo/light+/theme.mjs

@@ -9,10 +9,10 @@
 export default async function ({ fmt }, db) {
   {
     const primary = await db.get(['primary']),
-      [r, g, b, a] = primary
+      [r, g, b] = primary
         .slice(5, -1)
         .split(',')
-        .map((i) => parseFloat(i));
+        .map((i) => parseInt(i));
     if (!(r === 46 && g === 170 && b === 220)) {
       document.documentElement.style.setProperty('--light_plus--accent_blue', primary);
       document.documentElement.style.setProperty(
@@ -36,7 +36,10 @@ export default async function ({ fmt }, db) {
 
   {
     const secondary = await db.get(['secondary']),
-      [r, g, b, a] = secondary.slice(5, -1).split(',');
+      [r, g, b] = secondary
+        .slice(5, -1)
+        .split(',')
+        .map((i) => parseInt(i));
     if (!(r === 235 && g === 87 && b === 87)) {
       document.documentElement.style.setProperty('--light_plus--accent_red', secondary);
       document.documentElement.style.setProperty(
@@ -49,4 +52,19 @@ export default async function ({ fmt }, db) {
       );
     }
   }
+
+  {
+    const highlight = await db.get(['highlight']),
+      [r, g, b, a] = highlight
+        .slice(5, -1)
+        .split(',')
+        .map((i) => parseFloat(i));
+    if (!(r === 0 && g === 0 && b === 0 && a === 0)) {
+      document.documentElement.style.setProperty('--light_plus--accent_highlight', highlight);
+      document.documentElement.style.setProperty(
+        '--light_plus--accent_highlight-shaded',
+        fmt.rgbLogShade(0.1, highlight)
+      );
+    }
+  }
 }

repo/light+/variables.css

@@ -6,14 +6,24 @@
  */
 
 :root {
-  --theme--accent_blue: var(--light_plus--accent_blue);
-  --theme--accent_blue-selection: var(--light_plus--accent_blue-selection);
-  --theme--accent_blue-hover: var(--light_plus--accent_blue-hover);
-  --theme--accent_blue-active: var(--light_plus--accent_blue-active);
-  --theme--accent_blue-text: var(--light_plus--accent_blue-text);
-  --theme--accent_red: var(--light_plus--accent_red);
-  --theme--accent_red-button: var(--light_plus--accent_red-button);
-  --theme--accent_red-text: var(--light_plus--accent_red-text);
+  --theme--accent_blue: var(--light_plus--accent_blue, rgb(46, 170, 220));
+  --theme--accent_blue-selection: var(
+    --light_plus--accent_blue-selection,
+    rgb(46, 170, 220, 0.25)
+  );
+  --theme--accent_blue-hover: var(--light_plus--accent_blue-hover, rgb(6, 156, 205));
+  --theme--accent_blue-active: var(--light_plus--accent_blue-active, rgb(0, 141, 190));
+  --theme--accent_blue-text: var(--light_plus--accent_blue-text, #fff);
+  --theme--accent_red: var(--light_plus--accent_red, #eb5757);
+  --theme--accent_red-button: var(--light_plus--accent_red-button, rgba(235, 87, 87, 0.1));
+  --theme--accent_red-text: var(--light_plus--accent_red-text, #fff);
+
+  --theme--scrollbar_thumb-hover: var(--light_plus--accent_highlight, #aeaca6);
+  --theme--ui_divider: var(--light_plus--accent_highlight, rgb(237, 237, 236));
+  --theme--icon: var(--light_plus--accent_highlight, rgba(55, 53, 47, 0.8));
+  --theme--icon_secondary: var(--light_plus--accent_highlight, rgba(55, 53, 47, 0.4));
+  --theme--text: var(--light_plus--accent_highlight, rgb(55, 43, 47));
+  --theme--text_secondary: var(--light_plus--accent_highlight-shaded, rgba(55, 43, 47, 0.6));
 
   --theme--text_gray: rgba(151, 154, 155, 0.95);
   --theme--text_brown: rgb(167, 126, 100);

repo/menu/components.mjs

@@ -139,7 +139,13 @@ export const options = {
       $icon = web.html`${await components.feather('droplet', { class: 'input-icon' })}`,
       paint = () => {
         $input.style.background = $picker.toBackground();
-        $input.style.color = $picker.isLight() ? '#000' : '#fff';
+        const [r, g, b, a] = $picker
+          .toRGBAString()
+          .slice(5, -1)
+          .split(',')
+          .map((i) => parseInt(i));
+        console.log(r, g, b, fmt.rgbContrast(r, g, b));
+        $input.style.color = fmt.rgbContrast(r, g, b);
         $input.style.padding = '';
       },
       $picker = new web.jscolor($input, {

repo/neutral/app.css

@@ -17,6 +17,7 @@
 }
 
 /* 1.3 supreme ratio. https://www.modularscale.com/ */
+.notion-collection_view_page-block > div[placeholder='Untitled'],
 .notion-frame .notion-page-block > div[placeholder='Untitled'],
 .notion-overlay-container .notion-page-block > div[placeholder='Untitled'] {
   font-size: 33px !important;