Merge pull request #18 from moughxyz/master

feat: adapt to new SN UI

.gitignore

@@ -2,3 +2,5 @@ node_modules
 .sass-cache
 
 .DS_Store
+
+ext.local.json

INSTALL.md

@@ -1,11 +1,31 @@
-### [Standard Notes](https://standardnotes.org/)
+### [Standard Notes](https://standardnotes.com/)
 
 #### Install manually
 
-1. Extensions → Import extension and paste this link: ` https://cdn.jsdelivr.net/gh/dracula/standard-notes@master/sn-theme-dracula.json `
+1. Preferences > General > Advanced Settings > Install: `https://cdn.jsdelivr.net/gh/dracula/standard-notes@master/ext.json`
 
-2. Click 'Install'
+2. Activate the theme!
 
-3. Activate the theme!
+3. Boom! It's working
 
-4. Boom! It's working
+#### Running locally
+
+##### Serving
+
+```
+npm install
+node devServer.js
+```
+
+Extension link will be available at `http://localhost:8080/ext.json` for use with installation step #1.
+
+##### Making changes
+
+1. Run `grunt watch`
+2. Edit `src/main.scss`
+3. Reload Standard Notes
+
+##### Bundling changes
+
+1. Run `grunt`
+2. Compiled results will be outputted to the `dist` directory.

README.md

@@ -1,11 +1,9 @@
-# Dracula Theme for [Standard Notes](https://standardnotes.org/)
+# Dracula Theme for [Standard Notes](https://standardnotes.com/)
 
-> A dark theme for [Standard Notes](https://standardnotes.org/)
+> A dark theme for [Standard Notes](https://standardnotes.com/)
 
 ![Screenshot](./screenshot.png)
 
-The editor used in the screenshot is the [Rich Markdown Editor](https://github.com/arturolinares/sn-rme).
-
 ## Install
 
 All instructions can be found at [draculatheme.com/standard-notes](https://draculatheme.com/standard-notes).
@@ -20,9 +18,13 @@ This theme is maintained by the following person(s) and a bunch of [awesome cont
 
 ## Community
 
-- [Twitter](https://twitter.com/draculatheme) - Best for getting updates about themes and new stuff.
-- [GitHub](https://github.com/dracula/dracula-theme/discussions) - Best for asking questions and discussing issues.
-- [Discord](https://draculatheme.com/discord-invite) - Best for hanging out with the community.
+- [Dracula Twitter](https://twitter.com/draculatheme)
+- [Dracula GitHub](https://github.com/dracula/dracula-theme/discussions).
+- [Dracula Discord](https://draculatheme.com/discord-invite)
+-
+- [Standard Notes Twitter](https://twitter.com/standardnotes)
+- [Standard Notes GitHub](https://github.com/standardnotes)
+- [Standard Notes Discord](https://standardnotes.com/discord)
 
 ## License
 

devServer.js

@@ -0,0 +1,19 @@
+const http = require("http")
+
+const static = require("node-static")
+
+const port = process.argv[2] || "8080"
+
+const dir = new static.Server(__dirname, {
+  headers: {
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Methods": "GET, OPTIONS",
+    "Access-Control-Allow-Headers": "*",
+  },
+})
+
+http
+  .createServer(function (req, res) {
+    dir.serve(req, res)
+  })
+  .listen(port)

dist/dist.css

@@ -1,63 +1,67 @@
 :root {
-  --foreground-color: #f8f8f2;
-  --background-color: #282a36;
-  --highlight-color: var(--purple);
-  --border-color: #6272a4;
-  --neutral-contrast: #44475a;
-  --neutral: #1d1e26;
+  --background: #282a36;
+  --current-line: #44475a;
+  --foreground: #f8f8f2;
+  --comment: #6272a4;
   --red: #ff5555;
   --orange: #ffb86c;
   --green: #50fa7b;
   --pink: #ff79c6;
   --purple: #bd93f9;
   --cyan: #8be9fd;
   --yellow: #f1fa8c;
-  --sn-component-foreground-color: var(--foreground-color);
-  --sn-component-background-color: var(--neutral);
+  --bar-color: rgb(32, 34, 49);
+  --darker-background: rgb(25, 26, 33);
+  --darker-background-border: rgb(32, 34, 49);
+  --sn-stylekit-accessory-tint-color-1: var(--purple);
+  --sn-stylekit-accessory-tint-color-2: var(--pink);
+  --sn-stylekit-accessory-tint-color-3: var(--orange);
+  --sn-stylekit-accessory-tint-color-4: var(--cyan);
+  --sn-stylekit-accessory-tint-color-5: var(--green);
+  --sn-stylekit-accessory-tint-color-6: var(--yellow);
+  --highlight-color: var(--comment);
+  --sn-component-foreground-color: var(--foreground);
+  --sn-component-background-color: var(--background);
   --sn-component-foreground-highlight-color: var(--highlight-color);
-  --sn-component-outer-border-color: var(--neutral);
-  --sn-component-inner-border-color: var(--foreground-color);
-  --sn-stylekit-shadow-color: var(--neutral);
-  --sn-stylekit-info-color: var(--highlight-color);
-  --sn-stylekit-info-contrast-color: var(--background-color);
-  --sn-stylekit-neutral-color: var(--neutral-contrast);
-  --sn-stylekit-neutral-contrast-color: var(--foreground-color);
+  --sn-component-outer-border-color: var(--comment);
+  --sn-component-inner-border-color: var(--foreground);
+  --sn-stylekit-shadow-color: var(--comment);
+  --sn-stylekit-info-color: var(--pink);
+  --sn-stylekit-info-contrast-color: var(--background);
+  --sn-stylekit-neutral-color: var(--purple);
+  --sn-stylekit-neutral-contrast-color: var(--foreground);
   --sn-stylekit-success-color: var(--green);
-  --sn-stylekit-success-contrast-color: var(--background-color);
+  --sn-stylekit-success-contrast-color: var(--background);
   --sn-stylekit-warning-color: var(--orange);
-  --sn-stylekit-warning-contrast-color: var(--background-color);
+  --sn-stylekit-warning-contrast-color: var(--background);
   --sn-stylekit-danger-color: var(--red);
-  --sn-stylekit-danger-contrast-color: var(--foreground-color);
+  --sn-stylekit-danger-contrast-color: var(--foreground);
   --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color);
   --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color);
-  --sn-stylekit-background-color: var(--background-color);
-  --sn-stylekit-foreground-color: var(--foreground-color);
-  --sn-stylekit-border-color: var(--neutral);
-  --sn-stylekit-contrast-background-color: var(--neutral);
-  --sn-stylekit-contrast-foreground-color: var(--foreground-color);
-  --sn-stylekit-contrast-border-color: var(--neutral);
-  --sn-stylekit-secondary-background-color: var(--neutral);
-  --sn-stylekit-secondary-foreground-color: var(--foreground-color);
-  --sn-stylekit-secondary-border-color: var(--neutral);
-  --sn-stylekit-secondary-contrast-background-color: var(--neutral-contrast);
-  --sn-stylekit-secondary-contrast-foreground-color: var(--foreground-color);
-  --sn-stylekit-secondary-contrast-border-color: var(--foreground-color);
-  --sn-stylekit-paragraph-text-color: var(--foreground-color);
-  --sn-desktop-titlebar-bg-color: var(--background-color);
-  --sn-desktop-titlebar-border-color: var(--border-color);
-  --sn-desktop-titlebar-ui-color: var(--foreground-color);
+  --sn-stylekit-background-color: var(--background);
+  --sn-stylekit-foreground-color: var(--foreground);
+  --sn-stylekit-border-color: var(--darker-background-border);
+  --sn-stylekit-contrast-background-color: var(--bar-color);
+  --sn-stylekit-contrast-foreground-color: var(--foreground);
+  --sn-stylekit-contrast-border-color: var(--footer-border);
+  --sn-stylekit-secondary-background-color: var(--background);
+  --sn-stylekit-secondary-foreground-color: var(--foreground);
+  --sn-stylekit-secondary-border-color: var(--darker-background-border);
+  --sn-stylekit-secondary-contrast-background-color: var(--current-line);
+  --sn-stylekit-secondary-contrast-foreground-color: var(--foreground);
+  --sn-stylekit-secondary-contrast-border-color: var(--foreground);
+  --sn-stylekit-paragraph-text-color: var(--foreground);
+  --sn-desktop-titlebar-bg-color: var(--background);
+  --sn-desktop-titlebar-border-color: var(--comment);
+  --sn-desktop-titlebar-ui-color: var(--foreground);
   --sn-desktop-titlebar-ui-hover-color: var(--highlight-color);
-  --sn-stylekit-scrollbar-track-border-color: var(--border-color);
+  --sn-stylekit-scrollbar-track-border-color: var(--comment);
   --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color);
   --sn-stylekit-grey-5: var(--highlight-color);
-  --sn-stylekit-grey-4-opacity-variant: var(--neutral-contrast); }
-
-#editor-title-bar {
-  padding-top: 14px;
-  padding-bottom: 26px; }
+  --sn-stylekit-grey-4-opacity-variant: var(--current-line); }
 
 .sn-component .sk-panel .sk-panel-footer .left {
-  color: var(--foreground-color); }
+  color: var(--foreground); }
 
 #plus-editor label kbd {
   background-color: var(--sn-stylekit-background-color); }

sn-theme-dracula.json → ext.json

@@ -6,7 +6,7 @@
   "version": "0.0.18",
   "description": "A Dracula theme for Standard Notes",
   "url": "https://cdn.jsdelivr.net/gh/dracula/standard-notes@0.0.18/dist/dist.css",
-  "latest_url": "https://cdn.jsdelivr.net/gh/dracula/standard-notes@master/sn-theme-dracula.json",
+  "latest_url": "https://cdn.jsdelivr.net/gh/dracula/standard-notes@master/ext.json",
   "download_url": "https://github.com/dracula/standard-notes/archive/0.0.18.zip",
   "marketing_url": "https://github.com/dracula/standard-notes",
   "thumbnail_url": "https://cdn.jsdelivr.net/gh/dracula/standard-notes/preview.png",

package.json

@@ -1,13 +1,14 @@
 {
   "name": "sn-theme-dracula",
-  "version": "1.2.3",
+  "version": "2.0.0",
   "main": "dist/dist.css",
   "devDependencies": {
     "grunt": "^1.0.1",
     "grunt-contrib-watch": "^1.0.0",
     "grunt-newer": "^1.2.0",
     "grunt-sass": "^3.1.0",
-    "node-sass": "^4.14.1"
+    "node-sass": "^4.14.1",
+    "node-static": "^0.7.11"
   },
   "sn": {
     "main": "dist/dist.css"