From 81c0e135235e1def8374c1a9cf44bb4a430bcc43 Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Sun, 10 Oct 2021 12:30:06 +1100
Subject: [PATCH] light+ configurable highlight color for text/lines etc.
---
repo/dark+/theme.mjs | 9 ++++++---
repo/dark+/variables.css | 19 +++++++++++--------
repo/light+/mod.json | 7 +++++++
repo/light+/theme.mjs | 24 +++++++++++++++++++++---
repo/light+/variables.css | 26 ++++++++++++++++++--------
repo/menu/components.mjs | 8 +++++++-
repo/neutral/app.css | 1 +
7 files changed, 71 insertions(+), 23 deletions(-)
diff --git a/repo/dark+/theme.mjs b/repo/dark+/theme.mjs
index 59bc2b4..87bd2f3 100644
--- a/repo/dark+/theme.mjs
+++ b/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(
diff --git a/repo/dark+/variables.css b/repo/dark+/variables.css
index 8c1acb1..e59c81b 100644
--- a/repo/dark+/variables.css
+++ b/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);
diff --git a/repo/light+/mod.json b/repo/light+/mod.json
index a26b314..73f989e 100644
--- a/repo/light+/mod.json
+++ b/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)"
}
]
}
diff --git a/repo/light+/theme.mjs b/repo/light+/theme.mjs
index d6dbffd..daf32d4 100644
--- a/repo/light+/theme.mjs
+++ b/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)
+ );
+ }
+ }
}
diff --git a/repo/light+/variables.css b/repo/light+/variables.css
index 9408c7a..bf4281b 100644
--- a/repo/light+/variables.css
+++ b/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);
diff --git a/repo/menu/components.mjs b/repo/menu/components.mjs
index f103505..64a2305 100644
--- a/repo/menu/components.mjs
+++ b/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, {
diff --git a/repo/neutral/app.css b/repo/neutral/app.css
index 038e209..1e27956 100644
--- a/repo/neutral/app.css
+++ b/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;