contributing guide, css transitions, bg of account picker

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).)

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
+**know your way around notion/electron/js/css and have some code to contribute?** great! read below for guidelines
-[platform support](https://github.com/dragonwocky/notion-enhancer/issues/new?labels=enhancement&template=platform-support.md).
+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.
+**for information on how to actually create a theme or module with the notion-enhancer api, check the [docs](DOCUMENTATION.md).**
-
-**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.
 
 ## 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`.
-
+if a variable is a reference to a DOM element, it may be helpful to prefix it with a `$`.
-for information on how to create a theme or module, check the [docs](DOCUMENTATION.md).
 
 ## 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 <email> (website)`
+when modifying a file, add your copyright to it in the format:
-(inserted into the comment at the top, just above the line that reads `under the MIT license`).
+
+```
+/*
+ * module or project name
+ * (c) year name <email> (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.
 

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;
 }

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;
 }

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;

mods/gameish/styles.css

@@ -121,9 +121,10 @@
   --theme_dark--code_attr-value: hsl(350, 40%, 70%); */
 }
 
+.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;
 }

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;
 }

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',

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'],
+.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;
 }
-
+.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);
 }
 
+.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;
+}