feat: add themes source (#1089)

packages/components/package.json

@@ -13,11 +13,12 @@
     "version": "node scripts/package-components.mjs && git add dist && git commit -m 'chore(release): components'"
   },
   "devDependencies": {
-    "@standardnotes/advanced-checklist": "0.0.1",
-    "@standardnotes/autobiography-theme": "1.0.4",
     "@standardnotes/deterministic-zip": "^1.2.0",
     "@standardnotes/features": "^1.45.1",
+    "mini-css-extract-plugin": "^2.6.0",
     "node-sass": "7.0.1",
-    "sass": "^1.52.3"
+    "sass": "^1.52.3",
+    "webpack": "^5.73.0",
+    "webpack-remove-empty-scripts": "^0.8.0"
   }
 }

packages/components/src/org.standardnotes.theme-autobiography/Gruntfile.js

@@ -1,31 +0,0 @@
-module.exports = function(grunt) {
-
-  grunt.initConfig({
-    watch: {
-      css: {
-        files: ['src/**/*.scss'],
-        tasks: ['sass'],
-        options: {
-          spawn: false,
-        },
-      }
-    },
-
-    sass: {
-      dist: {
-        options: {
-         style: 'expanded'
-       },
-        files: {
-          'dist/dist.css': 'src/main.scss'
-        }
-      }
-    },
-  });
-
-  grunt.loadNpmTasks('grunt-newer');
-  grunt.loadNpmTasks('grunt-contrib-watch');
-  grunt.loadNpmTasks('grunt-contrib-sass');
-
-  grunt.registerTask('default', ['sass']);
-};

packages/components/src/org.standardnotes.theme-autobiography/package.json

@@ -3,17 +3,10 @@
   "version": "1.0.4",
   "main": "dist/dist.css",
   "private": true,
-  "scripts": {
-    "build": "yarn run grunt",
-    "prepublishOnly": "yarn run build"
-  },
   "sn": {
     "main": "dist/dist.css"
   },
-  "devDependencies": {
-    "grunt": "^1.0.1",
-    "grunt-contrib-sass": "^1.0.0",
-    "grunt-contrib-watch": "^1.0.0",
-    "grunt-newer": "^1.2.0"
+  "scripts": {
+    "build": "webpack --entry ./src/main.scss --config ./../../theme.webpack.config.js"
   }
 }

packages/components/src/org.standardnotes.theme-dynamic/.gitignore

@@ -0,0 +1 @@
+dist

packages/components/src/org.standardnotes.theme-dynamic/README.md

@@ -0,0 +1 @@
+# Dynamic Theme

packages/components/src/org.standardnotes.theme-dynamic/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@standardnotes/dynamic-theme",
+  "version": "1.0.4",
+  "main": "dist/dist.css",
+  "private": true,
+  "sn": {
+    "main": "dist/dist.css"
+  },
+  "scripts": {
+    "build": "webpack --entry ./src/main.scss --config ./../../theme.webpack.config.js"
+  }
+}

packages/components/src/org.standardnotes.theme-dynamic/src/main.scss

@@ -0,0 +1,29 @@
+#navigation.section,
+.section.tags, // legacy code pre-smart tags release
+navigation {
+  flex: none !important;
+  width: 190px !important;
+  transition: width 0.25s;
+}
+
+#navigation.section:hover,
+.section.tags:hover, // legacy code pre-smart tags release
+navigation:hover {
+  flex: initial;
+  width: 250px !important;
+  transition: width 0.25s;
+}
+
+.section.notes,
+notes-view {
+  flex: none !important;
+  width: 270px !important;
+  transition: width 0.25s;
+}
+
+.section.notes:hover,
+notes-view:hover {
+  flex: initial;
+  width: 420px !important;
+  transition: width 0.25s;
+}

packages/components/src/org.standardnotes.theme-focus/.gitignore

@@ -0,0 +1 @@
+dist

packages/components/src/org.standardnotes.theme-focus/README.md

@@ -0,0 +1 @@
+# Focus Theme

packages/components/src/org.standardnotes.theme-focus/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@standardnotes/focus-theme",
+  "version": "1.2.9",
+  "main": "dist/dist.css",
+  "private": true,
+  "sn": {
+    "main": "dist/dist.css"
+  },
+  "scripts": {
+    "build": "webpack --entry ./src/main.scss --config ./../../theme.webpack.config.js"
+  }
+}

packages/components/src/org.standardnotes.theme-focus/src/main.scss

@@ -0,0 +1,68 @@
+:root {
+
+  --foreground-color: #eeeeee;
+  --background-color: #0f1011;
+  --highlight-color: #a464c2;
+  --border-color: #0f1011;
+
+  --sn-component-foreground-color: var(--foreground-color);
+  --sn-component-background-color: transparent;
+  --sn-component-foreground-highlight-color: var(--highlight-color);
+  --sn-component-outer-border-color: transparent;
+  --sn-component-inner-border-color: var(--foreground-color);
+
+  // StyleKit Vars
+
+  --sn-stylekit-shadow-color: #000000;
+
+  --sn-stylekit-info-color: var(--highlight-color);
+  --sn-stylekit-info-contrast-color: var(--foreground-color);
+
+  --sn-stylekit-neutral-color: #7c7c7c;
+  --sn-stylekit-neutral-contrast-color: #ffffff;
+
+  --sn-stylekit-success-color: #2B9612;
+  --sn-stylekit-success-contrast-color: #ffffff;
+
+  --sn-stylekit-warning-color: #f6a200;
+  --sn-stylekit-warning-contrast-color: #ffffff;
+
+  --sn-stylekit-danger-color: #F80324;
+  --sn-stylekit-danger-contrast-color: #ffffff;
+
+  --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: #000000;
+
+  --sn-stylekit-contrast-background-color: #000000;
+  --sn-stylekit-contrast-foreground-color: #ffffff;
+  --sn-stylekit-contrast-border-color: #000000;
+
+  --sn-stylekit-secondary-background-color: #0f1011;
+  --sn-stylekit-secondary-foreground-color: #ffffff;
+  --sn-stylekit-secondary-border-color: #000000;
+
+  --sn-stylekit-secondary-contrast-background-color: #000000;
+  --sn-stylekit-secondary-contrast-foreground-color: #ffffff;
+  --sn-stylekit-secondary-contrast-border-color: #ffffff;
+
+  --sn-stylekit-paragraph-text-color: #ffffff;
+
+  --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-desktop-titlebar-ui-hover-color: var(--highlight-color);
+
+  --sn-stylekit-scrollbar-track-border-color: var(--border-color);
+  --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color);
+
+  --sn-stylekit-menu-border: 1px solid #424242;
+
+  --sn-stylekit-passive-color-0: #999999;
+  --sn-stylekit-passive-color-3: #28292b;
+  --sn-stylekit-passive-color-4: #1c1d1e;
+  --sn-stylekit-passive-color-5: #1d1f20;
+}

packages/components/src/org.standardnotes.theme-futura/.gitignore

@@ -0,0 +1 @@
+dist

packages/components/src/org.standardnotes.theme-futura/README.md

@@ -0,0 +1 @@
+# Futura Theme

packages/components/src/org.standardnotes.theme-futura/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@standardnotes/futura-theme",
+  "version": "1.2.9",
+  "main": "dist/dist.css",
+  "private": true,
+  "sn": {
+    "main": "dist/dist.css"
+  },
+  "scripts": {
+    "build": "webpack --entry ./src/main.scss --config ./../../theme.webpack.config.js"
+  }
+}

packages/components/src/org.standardnotes.theme-futura/src/main.scss

@@ -0,0 +1,62 @@
+:root {
+
+  --foreground-color: #a9aabe;
+  --background-color: #20202b;
+  --highlight-color: #fca429;
+  --border-color: #20222c;
+
+  // StyleKit Vars
+  --sn-stylekit-shadow-color: var(--border-color);
+
+  --sn-stylekit-info-color: var(--highlight-color);
+  --sn-stylekit-info-contrast-color: var(--background-color);
+
+  --sn-stylekit-neutral-color: #7c7c7c;
+  --sn-stylekit-neutral-contrast-color: #ffffff;
+
+  --sn-stylekit-success-color: #2B9612;
+  --sn-stylekit-success-contrast-color: #ffffff;
+
+  --sn-stylekit-warning-color: #f6a200;
+  --sn-stylekit-warning-contrast-color: #ffffff;
+
+  --sn-stylekit-danger-color: #F80324;
+  --sn-stylekit-danger-contrast-color: #ffffff;
+
+  --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color);
+  --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color);
+
+  --sn-stylekit-background-color: #20202b;
+  --sn-stylekit-foreground-color: #a9aabe;
+  --sn-stylekit-border-color: #0f1116;
+
+  --sn-stylekit-contrast-background-color: #272734;
+  --sn-stylekit-contrast-foreground-color: #a9aabe;
+  --sn-stylekit-contrast-border-color: #0f1116;
+
+  --sn-stylekit-secondary-background-color: #20202b;
+  --sn-stylekit-secondary-foreground-color: #a9aabe;
+  --sn-stylekit-secondary-border-color: #20222c;
+
+  --sn-stylekit-secondary-contrast-background-color: #272734;
+  --sn-stylekit-secondary-contrast-foreground-color: #a9aabe;
+  --sn-stylekit-secondary-contrast-border-color: #272734;
+
+  --sn-stylekit-paragraph-text-color: var(--foreground-color);
+
+  --sn-stylekit-scrollbar-track-border-color: var(--border-color);
+  --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-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-desktop-titlebar-ui-hover-color: var(--highlight-color);
+
+  --sn-stylekit-menu-border: 1px solid #434b60;
+
+  --sn-stylekit-passive-color-0: #a4a5b3;
+  --sn-stylekit-passive-color-3: #3a3a48;
+  --sn-stylekit-passive-color-4: #2c2c39;
+  --sn-stylekit-passive-color-4-opacity-variant: #292937;
+  --sn-stylekit-passive-color-5: #2e2e3e;
+}

packages/components/src/org.standardnotes.theme-midnight/.gitignore

@@ -0,0 +1 @@
+dist

packages/components/src/org.standardnotes.theme-midnight/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@standardnotes/midnight-theme",
+  "version": "1.2.8",
+  "main": "dist/dist.css",
+  "private": true,
+  "sn": {
+    "main": "dist/dist.css"
+  },
+  "scripts": {
+    "build": "webpack --entry ./src/main.scss --config ./../../theme.webpack.config.js"
+  }
+}

packages/components/src/org.standardnotes.theme-midnight/src/main.scss

@@ -0,0 +1,62 @@
+:root {
+  --primary-bg-color: #292937;
+  --secondary-bg-color: #313142;
+  --editor-bg-color: #202020;
+  --border-color: #13131a;
+  --ui-text-color: #d8d8d8;
+
+  --sn-stylekit-info-color: #4CA3FF;
+  --sn-stylekit-info-contrast-color: white;
+
+  --sn-stylekit-neutral-color: #7c7c7c;
+  --sn-stylekit-neutral-contrast-color: white;
+
+  --sn-stylekit-success-color: #01BE79;
+  --sn-stylekit-success-contrast-color: white;
+
+  --sn-stylekit-warning-color: #f6a200;
+  --sn-stylekit-warning-contrast-color: white;
+
+  --sn-stylekit-danger-color: #F80324;
+  --sn-stylekit-danger-contrast-color: white;
+
+  --sn-desktop-titlebar-bg-color: var(--primary-bg-color);
+  --sn-desktop-titlebar-border-color: var(--border-color);
+  --sn-desktop-titlebar-ui-color: var(--ui-text-color);
+  --sn-desktop-titlebar-ui-hover-color: var(--sn-stylekit-info-color);
+
+  // StyleKit Vars
+  --sn-stylekit-shadow-color: #20202b;
+
+  --sn-stylekit-background-color: #20202b;
+  --sn-stylekit-border-color: var(--border-color);
+  --sn-stylekit-foreground-color: var(--ui-text-color);
+
+  --sn-stylekit-contrast-background-color: var(--secondary-bg-color);
+  --sn-stylekit-contrast-foreground-color: var(--ui-text-color);
+  --sn-stylekit-contrast-border-color: var(--border-color);
+
+  --sn-stylekit-secondary-background-color: #292937;
+  --sn-stylekit-secondary-foreground-color: var(--ui-text-color);
+  --sn-stylekit-secondary-border-color: var(--border-color);
+
+  --sn-stylekit-secondary-contrast-background-color: #45445a;
+  --sn-stylekit-secondary-contrast-foreground-color: var(--ui-text-color);
+  --sn-stylekit-secondary-contrast-border-color: var(--border-color);
+
+  --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color);
+  --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color);
+
+  --sn-stylekit-paragraph-text-color: var(--ui-text-color);
+
+  --sn-stylekit-scrollbar-track-border-color: var(--border-color);
+  --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color);
+
+  --sn-stylekit-menu-border: 1px solid #494965;
+
+  --sn-stylekit-passive-color-0: #94979e;
+  --sn-stylekit-passive-color-3: #2c2c39;
+  --sn-stylekit-passive-color-4: #313142;
+  --sn-stylekit-passive-color-4-opacity-variant: #292937;
+  --sn-stylekit-passive-color-5: #313142;
+}

packages/components/src/org.standardnotes.theme-solarized-dark/.gitignore

@@ -0,0 +1 @@
+dist

packages/components/src/org.standardnotes.theme-solarized-dark/README.md

@@ -0,0 +1 @@
+# Solarized Dark Theme

packages/components/src/org.standardnotes.theme-solarized-dark/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@standardnotes/solarized-dark-theme",
+  "version": "1.2.7",
+  "main": "dist/dist.css",
+  "private": true,
+  "sn": {
+    "main": "dist/dist.css"
+  },
+  "scripts": {
+    "build": "webpack --entry ./src/main.scss --config ./../../theme.webpack.config.js"
+  }
+}

packages/components/src/org.standardnotes.theme-solarized-dark/src/main.scss

@@ -0,0 +1,83 @@
+:root {
+
+  --background-1: #002B36;
+  --background-2: #083642;
+
+  --foreground-color: #FDF6E3;
+  --highlight-color: #2AA198;
+  --border-color: #00252e;
+  --pre-color: #d6dbdb;
+
+  --content-1: #586D75;
+  --content-2: #667A83;
+  --content-3: #839496;
+  --content-4: #93A1A1;
+
+  /* Footer */
+  --footer-bar-border-top-color: 0;
+
+  /* Column Menus */
+  --menu-item-sep-color: rgba(0, 0, 0, 0.1);
+
+  --sn-component-foreground-color: var(--content-1);
+  --sn-component-background-color: var(--border-color);
+  --sn-component-foreground-highlight-color: var(--highlight-color);
+  --sn-component-outer-border-color: transparent;
+  --sn-component-inner-border-color: var(--highlight-color);
+
+  // StyleKit Vars
+  --sn-stylekit-info-color: var(--highlight-color);
+  --sn-stylekit-info-contrast-color: var(--foreground-color);
+
+  --sn-stylekit-neutral-color: #7c7c7c;
+  --sn-stylekit-neutral-contrast-color: white;
+
+  --sn-stylekit-success-color: #2B9612;
+  --sn-stylekit-success-contrast-color: white;
+
+  --sn-stylekit-warning-color: #f6a200;
+  --sn-stylekit-warning-contrast-color: white;
+
+  --sn-stylekit-danger-color: #F80324;
+  --sn-stylekit-danger-contrast-color: white;
+
+  --sn-stylekit-shadow-color: var(--background-2);
+
+  --sn-stylekit-background-color: var(--background-1);
+  --sn-stylekit-foreground-color: var(--foreground-color);
+  --sn-stylekit-border-color: var(--border-color);
+
+  --sn-stylekit-paragraph-text-color: var(--foreground-color);
+
+  --sn-stylekit-contrast-background-color: var(--background-2);
+  --sn-stylekit-contrast-foreground-color: var(--foreground-color);
+  --sn-stylekit-contrast-border-color: var(--border-color);
+
+  --sn-stylekit-secondary-background-color: var(--background-1);
+  --sn-stylekit-secondary-foreground-color: var(--foreground-color);
+  --sn-stylekit-secondary-border-color: var(--border-color);
+
+  --sn-stylekit-secondary-contrast-background-color: var(--background-2);
+  --sn-stylekit-secondary-contrast-foreground-color: var(--foreground-color);
+  --sn-stylekit-secondary-contrast-border-color: var(--border-color);
+
+  --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color);
+  --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color);
+
+  --sn-stylekit-scrollbar-track-border-color: var(--border-color);
+  --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color);
+
+  --sn-desktop-titlebar-bg-color: var(--background-1);
+  --sn-desktop-titlebar-border-color: var(--border-color);
+  --sn-desktop-titlebar-ui-color: var(--foreground-color);
+  --sn-desktop-titlebar-ui-hover-color: var(--highlight-color);
+
+  --sn-stylekit-menu-border: 1px solid #1f5461;
+
+  --sn-stylekit-passive-color-0: #a8bdbd;
+  --sn-stylekit-passive-color-1: #93A1A1;
+  --sn-stylekit-passive-color-3: #0d4f60;
+  --sn-stylekit-passive-color-4: #083642;
+  --sn-stylekit-passive-color-4-opacity-variant: #2AA1983d;
+  --sn-stylekit-passive-color-5: #003542;
+}

packages/components/src/org.standardnotes.theme-titanium/.gitignore

@@ -0,0 +1 @@
+dist

packages/components/src/org.standardnotes.theme-titanium/README.md

@@ -0,0 +1 @@
+# Titanium Theme

packages/components/src/org.standardnotes.theme-titanium/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@standardnotes/titanium-theme",
+  "version": "1.2.8",
+  "main": "dist/dist.css",
+  "private": true,
+  "sn": {
+    "main": "dist/dist.css"
+  },
+  "scripts": {
+    "build": "webpack --entry ./src/main.scss --config ./../../theme.webpack.config.js"
+  }
+}

packages/components/src/org.standardnotes.theme-titanium/src/main.scss

@@ -0,0 +1,60 @@
+:root {
+
+  --foreground-color: #3d3c40;
+  --background-color: #663399;
+  --highlight-color: #c9cccf;
+
+  --border-color: var(--highlight-color);
+
+  // StyleKit Vars
+  --sn-stylekit-shadow-color: var(--highlight-color);
+
+  --sn-stylekit-info-color: var(--background-color);
+  --sn-stylekit-info-contrast-color: #e6e6e6;
+
+  --sn-stylekit-neutral-color: #7c7c7c;
+  --sn-stylekit-neutral-contrast-color: #ffffff;
+
+  --sn-stylekit-success-color: #2B9612;
+  --sn-stylekit-success-contrast-color: #ffffff;
+
+  --sn-stylekit-warning-color: #f6a200;
+  --sn-stylekit-warning-contrast-color: #ffffff;
+
+  --sn-stylekit-danger-color: #F80324;
+  --sn-stylekit-danger-contrast-color: #ffffff;
+
+  --sn-stylekit-background-color: #d9dbde;
+  --sn-stylekit-foreground-color: #3d3c40;
+  --sn-stylekit-border-color: #c9cccf;
+
+  --sn-stylekit-contrast-background-color: #e7e7e7;
+  --sn-stylekit-contrast-foreground-color: #3d3c40;
+  --sn-stylekit-contrast-border-color: #c9cccf;
+
+  --sn-stylekit-secondary-background-color: #d8d9de;
+  --sn-stylekit-secondary-foreground-color: #3d3c40;
+  --sn-stylekit-secondary-border-color: #c9cccf;
+
+  --sn-stylekit-secondary-contrast-background-color: #e7e7e7;
+  --sn-stylekit-secondary-contrast-foreground-color: #3d3c40;
+  --sn-stylekit-secondary-contrast-border-color: #c9cccf;
+
+  --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color);
+  --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color);
+
+  --sn-stylekit-paragraph-text-color: #3d3c40;
+
+  --sn-stylekit-scrollbar-track-border-color: var(--border-color);
+  --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-neutral-color);
+
+  --sn-desktop-titlebar-bg-color: #d9dbde;
+  --sn-desktop-titlebar-border-color: var(--highlight-color);
+  --sn-desktop-titlebar-ui-color: var(--foreground-color);
+  --sn-desktop-titlebar-ui-hover-color: var(--background-color);
+
+  --sn-stylekit-menu-border: 1px solid #b2b2b3;
+
+  --sn-stylekit-passive-color-0: #626166;
+  --sn-stylekit-passive-color-4-opacity-variant: #e9e9e9;
+}

packages/components/theme.webpack.config.js

@@ -0,0 +1,34 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
+
+module.exports = {
+  mode: 'production',
+  output: {},
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        exclude: /(node_modules)/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: false,
+              url: false,
+            },
+          },
+          'sass-loader',
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: "dist.css"
+    }),
+    new RemoveEmptyScriptsPlugin(),
+  ],
+};