From eb7e840ad8617deea95f1b82d94e6d00f31ec8ca Mon Sep 17 00:00:00 2001 From: waaaaaaaaaaaaaaaaaaaaa Date: Tue, 4 Jan 2022 12:38:15 +1100 Subject: [PATCH] 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;