diff --git a/CHANGELOG.md b/CHANGELOG.md index 9ac0bcd..a95066c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,7 +20,7 @@ complete rewrite with node.js. - theme: "dark+" = a vivid-colour near-black theme. - theme: "neutral" = smoother colours and fonts, designed to be more pleasing to the eye. - theme: "gameish" = a purple, "gamer-styled" theme with a blocky-font. -- theme: "pastel dark" = a true dark theme with a hint of pastel. +- theme: "pastel dark" = a smooth-transition true dark theme with a hint of pastel. - extension: "emoji sets" = pick from a variety of emoji styles to use. - extension: "night shift" = sync dark/light theme with the system (overrides normal theme setting). - extension: "right-to-left" = enables auto rtl/ltr text direction detection. (ported from [github.com/obahareth/notion-rtl](https://github.com/obahareth/notion-rtl).) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8a45259..f3bc93e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -17,13 +17,11 @@ following them shows respect to the developer/s spending their free time on it, > enhancements are applied only locally - > features should be designed only to improve the user experience. -**using a not-yet-supported operating system or notion installation?** ask for -[platform support](https://github.com/dragonwocky/notion-enhancer/issues/new?labels=enhancement&template=platform-support.md). +**know your way around notion/electron/js/css and have some code to contribute?** great! read below for guidelines +on how to create a helpful pull request and what happens with your code afterwards. it's probably also helpful to +join the [discord server](//coming-soon) -> mobile clients cannot currently be modded. - -**know your way around notion/electron/js/css and have some code to contribute?** great! read below to for recommendations -on how to create a helpful pull request and what happens with your code afterwards. +**for information on how to actually create a theme or module with the notion-enhancer api, check the [docs](DOCUMENTATION.md).** ## testing @@ -33,15 +31,13 @@ download: git clone https://github.com/dragonwocky/notion-enhancer cd notion-enhancer git checkout js +npm link ``` -using npm? globally link via `npm link`. - -using yarn? globally link via `yarn && yarn link` (the output of `yarn global bin` must be in PATH). - the downloaded folder is now directly linked to the `notion-enhancer` command. -no written tests are included with the enhancer: i don't have the experience/skill with them yet to use them effectively. +no written tests are included with the enhancer: +i don't have the experience/skill with them yet to use them effectively. if you can add some for your code, though, go ahead! ## conventions @@ -53,44 +49,50 @@ modules are either **extensions** or **themes**. each module is separately versioned, following the [semver](https://semver.org/) scheme. depending on the content and scale of a contribution, it may constitute an update on its own or may be merged into a larger update. -to keep a consistent code but informative style it is preferred to name variables with +to keep a consistent informative code style it is preferred to name variables with `snake_case`, functions/methods with `camelCase`, and classes with `PascalCase`. - -for information on how to create a theme or module, check the [docs](DOCUMENTATION.md). +if a variable is a reference to a DOM element, it may be helpful to prefix it with a `$`. ## review active core devs will manually look through each pull request and communicate with contributors before merging to -make sure it is a) safe, b) functional and c) bug-free. +make sure it is: -**a) safe:** system details (e.g. IP, clipboard) + notion user data are considered private unless directly shared by the user. +**a) safe.** system details (e.g. IP, clipboard) + notion user data are considered private unless directly shared by the user. none of this should be accessed or transmitted to an external server. -**b) functional:** is there a better way to do this? can extra dependencies be removed or replaced by newer web technologies? +**b) functional.** is there a better way to do this? can extra dependencies be removed or replaced by newer web technologies? how can this be made as user-friendly as possible? -**c) bug-free:** where possible, code should be tested on a variety of platforms in a variety of situations so it can be +**c) bug-free.** where possible, code should be tested on a variety of platforms in a variety of situations so it can be confirmed that it won't break anything for the user and is robust enough to handle use by both -power-users and non-tech-savvy users. +power users and non-tech-savvy users. ## translating -honestly, i'm not sure where to start with something like this. +future versions of the enhancer will have multi-language support. -if you want to translate parts of the enhancer and you know how to get the enhancer to use such translations, let me know! +if you are willing to help with translation, let me know and i'll contact you when i'm ready. ## licensing this project is distributed under the [MIT](https://choosealicense.com/licenses/mit/) license. the project as a whole is copyrighted by core devs in the [LICENSE](LICENSE) file. -when modifying a file, add your copyright to it in the format `(c) year name (website)` -(inserted into the comment at the top, just above the line that reads `under the MIT license`). +when modifying a file, add your copyright to it in the format: + +``` +/* + * module or project name + * (c) year name (website) + * under the MIT license + */ +``` all code contributed to this repository remains attributed to the contributor, but full rights are granted for it to be used under the terms of the MIT license. on the occasion that the contributed code should be removed or overwritten, -the copyright statement may be removed from the file. +the contributor's copyright may be removed from the file. by opening a pull request in this repository, you agree to the above conditions. diff --git a/mods/core/css/dark.css b/mods/core/css/dark.css index 6e1904f..673286a 100644 --- a/mods/core/css/dark.css +++ b/mods/core/css/dark.css @@ -41,7 +41,8 @@ /** databases **/ -.dark [style*='background: rgb(63, 68, 71)'] { +.dark [style*='background: rgb(63, 68, 71)'], +.dark [style*='background-color: rgb(64, 68, 71);'] { background: var(--theme--card) !important; } .dark @@ -85,7 +86,10 @@ .dark [style*='box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px'] { box-shadow: var(--theme--table-border) 0px -1px 0px !important; } -.dark [style*='border-left: 1px solid rgba(255, 255, 255,'] { +.dark [style*='border-left: 1px solid rgba(255, 255, 255,'], +.dark + .notion-block-permission-settings-public-access + [role='button'][style*='border-left: none'] { border-left: 1px solid var(--theme--table-border) !important; } .dark [style*='box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px inset'] { @@ -134,10 +138,6 @@ .dark [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] { box-shadow: var(--theme--primary) 0px 0px 0px 2px inset !important; } -.dark .notion-focusable:focus-within { - box-shadow: var(--theme--primary) 0px 0px 0px 1px inset, - var(--theme--primary_hover) 0px 0px 0px 2px !important; -} .dark [style*='background: rgb(6, 156, 205)'] { background: var(--theme--primary_hover) !important; } diff --git a/mods/core/css/light.css b/mods/core/css/light.css index 995b45c..74b5bf2 100644 --- a/mods/core/css/light.css +++ b/mods/core/css/light.css @@ -152,10 +152,6 @@ [style*='box-shadow: rgb(46, 170, 220) 0px 0px 0px 2px inset'] { box-shadow: var(--theme--primary) 0px 0px 0px 2px inset !important; } -.notion-body:not(.dark) .notion-focusable:focus-within { - box-shadow: var(--theme--primary) 0px 0px 0px 1px inset, - var(--theme--primary_hover) 0px 0px 0px 2px !important; -} .notion-body:not(.dark) [style*='background: rgb(6, 156, 205)'] { background: var(--theme--primary_hover) !important; } diff --git a/mods/core/css/shared.css b/mods/core/css/shared.css index 53b04bf..0bbb29a 100644 --- a/mods/core/css/shared.css +++ b/mods/core/css/shared.css @@ -9,7 +9,13 @@ @import './localised.css'; -/* colour help button - one of the few specific classes it does give us */ +/* inputs */ +.notion-focusable:focus-within { + /* var(--theme--primary) 0px 0px 0px 1px inset, */ + box-shadow: var(--theme--primary_hover) 0px 0px 0px 2px !important; +} + +/* colour help button - one of the few specific classes notion does give us */ .notion-help-button { background: var(--theme--interactive_hover) !important; box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important; diff --git a/mods/gameish/styles.css b/mods/gameish/styles.css index b0c82a6..401f76b 100644 --- a/mods/gameish/styles.css +++ b/mods/gameish/styles.css @@ -121,9 +121,10 @@ --theme_dark--code_attr-value: hsl(350, 40%, 70%); */ } -.notion-scroller.vertical.horizontal +.notion-dark-theme + .notion-scroller.vertical.horizontal .notion-table-view .notion-selectable.notion-collection_view-block > :first-child { - background: var(--theme_dark--card) !important; + background: var(--theme--card) !important; } diff --git a/mods/neutral/styles.css b/mods/neutral/styles.css index 74db686..26d3b61 100644 --- a/mods/neutral/styles.css +++ b/mods/neutral/styles.css @@ -143,20 +143,24 @@ } */ /* increase page width */ -.notion-frame .notion-scroller [style*='width: 900px;'] { +.notion-dark-theme .notion-frame .notion-scroller [style*='width: 900px;'] { width: 1000px !important; } /* add space at the bottom of the main frame when sidebar is hidden * -- matches space at top for titlebar */ -.notion-frame { +.notion-dark-theme .notion-frame { transition: height 300ms ease 0s; } -.notion-sidebar-container[style*='width: 0px;'] + .notion-frame { +.notion-dark-theme + .notion-sidebar-container[style*='width: 0px;'] + + .notion-frame { height: calc(100vh - 40px) !important; } /* hide sidebar "new page" button */ -.notion-sidebar > [style*='flex: 0 0 auto; margin-top: auto;'] { +.notion-dark-theme + .notion-sidebar + > [style*='flex: 0 0 auto; margin-top: auto;'] { display: none !important; } diff --git a/mods/pastel-dark/mod.js b/mods/pastel-dark/mod.js index 6ed006d..af052e1 100644 --- a/mods/pastel-dark/mod.js +++ b/mods/pastel-dark/mod.js @@ -11,7 +11,7 @@ module.exports = { id: '033bff54-50ba-4cec-bdc0-b2ca7e307085', tags: ['theme', 'dark'], name: 'pastel dark', - desc: 'a true dark theme with a hint of pastel.', + desc: 'a smooth-transition true dark theme with a hint of pastel.', version: '0.1.0', author: { name: 'zenith_illinois', diff --git a/mods/pastel-dark/styles.css b/mods/pastel-dark/styles.css index 95fcac0..637110c 100644 --- a/mods/pastel-dark/styles.css +++ b/mods/pastel-dark/styles.css @@ -120,19 +120,74 @@ --theme_dark--code_attr-value: var(--theme_dark--text_orange); } -img[src*='/images/onboarding/use-case-note.png'], -img[src*='/images/onboarding/team-features-illustration.png'] { +.notion-dark-theme img[src*='/images/onboarding/use-case-note.png'], +.notion-dark-theme + img[src*='/images/onboarding/team-features-illustration.png'] { filter: invert(1) !important; } -img[src*='/images/onboarding/checked.svg'] { +.notion-dark-theme img[src*='/images/onboarding/checked.svg'] { filter: hue-rotate(45deg) !important; } - -img[style*='display: block; object-fit: cover; border-radius: 100%; width: 90px; height: 90px;']:hover, -img[style*='display: block; object-fit: cover; border-radius: 3px; width: 56.832px; height: 56.832px; transition: opacity 100ms ease-out 0s;']:hover { +.notion-dark-theme + img[style*='display: block; object-fit: cover; border-radius: 100%; width: 90px; height: 90px;'], +.notion-dark-theme + img[style*='display: block; object-fit: cover; border-radius: 3px; width: 56.832px; height: 56.832px; transition: opacity 100ms ease-out 0s;'] { + transition: filter 0.4s ease !important; +} +.notion-dark-theme + img[style*='display: block; object-fit: cover; border-radius: 100%; width: 90px; height: 90px;']:hover, +.notion-dark-theme + img[style*='display: block; object-fit: cover; border-radius: 3px; width: 56.832px; height: 56.832px; transition: opacity 100ms ease-out 0s;']:hover { filter: brightness(1.2); } -[style*='font-family: iawriter-mono, Nitti, Menlo, Courier, monospace;'] { +.notion-dark-theme + [style*='font-family: iawriter-mono, Nitti, Menlo, Courier, monospace;'] { filter: hue-rotate(170deg) !important; } + +.notion-dark-theme + .notion-token-remove-button[role*='button'][tabindex*='0']:hover, +.notion-dark-theme .notion-record-icon { + background: transparent !important; +} + +.notion-dark-theme .notion-focusable:focus-within, +.notion-dark-theme .notion-to_do-block > div > div > div[style*='background:'], +.notion-dark-theme div[role='button'], +[style*='height: 4px;'] + > .notion-selectable.notion-collection_view_page-block + > *, +.notion-dark-theme + .notion-calendar-view-day[style*='background: rgb(235, 87, 87);'], +.DayPicker-Day--today, +.notion-dark-theme + .DayPicker:not(.DayPicker--interactionDisabled) + .DayPicker-Day--outside:hover, +.notion-dark-theme + .DayPicker:not(.DayPicker--interactionDisabled) + .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--value) + .DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected, +.notion-dark-theme .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--start, +.notion-dark-theme .DayPicker-Day.DayPicker-Day--range.DayPicker-Day--end { + transition: color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease !important; +} + +.notion-dark-theme [style*='background: rgb(63, 68, 71);'], +.notion-dark-theme + [style*='background: rgb(80, 85, 88);'][style*='color: rgba(255, 255, 255, 0.7)'], +.notion-dark-theme + [style*='background: rgb(80, 85, 88);'][style*='width: 18px;'][style*='height: 18px;'], +.notion-dark-theme + [style*='box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.2) 0px 5px 10px, rgba(15, 15, 15, 0.4) 0px 15px 40px;'], +.notion-dark-theme [style*='background: rgba(151, 154, 155, 0.5);'], +.notion-dark-theme [style*='background: rgba(147, 114, 100, 0.5)'], +.notion-dark-theme [style*='background: rgba(255, 163, 68, 0.5)'], +.notion-dark-theme [style*='background: rgba(255, 220, 73, 0.5)'], +.notion-dark-theme [style*='background: rgba(77, 171, 154, 0.5)'], +.notion-dark-theme [style*='background: rgba(82, 156, 202, 0.5)'], +.notion-dark-theme [style*='background: rgba(154, 109, 215, 0.5)'], +.notion-dark-theme [style*='background: rgba(226, 85, 161, 0.5)'], +.notion-dark-theme [style*='background: rgba(255, 115, 105, 0.5)'] { + box-shadow: 0 2px 4px rgb(0 0 0 / 66%) !important; +}