rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: directly include themes in web package (#1988)

Browse Source
This commit is contained in:
Mo
2022-11-09 11:21:26 -06:00
committed by GitHub
parent ac4882b357
commit 10a9889cf4
12 changed files with 341 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/features/src/Domain/Lists/Utilities/FillThemeComponentDefaults.ts
View File

@@ -8,7 +8,7 @@ export function FillThemeComponentDefaults(
theme: Partial<ThemeFeatureDescription> & RequiredThemeFields,
): ThemeFeatureDescription {
if (!theme.index_path) {
theme.index_path = 'dist/dist.css'
theme.index_path = 'index.css'
}
theme.content_type = ContentType.Theme

12
packages/web/.gitignore vendored
View File

@@ -1 +1,11 @@
src/components
src/components/assets/org.standardnotes.advanced-markdown-editor
src/components/assets/org.standardnotes.bold-editor
src/components/assets/org.standardnotes.code-editor
src/components/assets/org.standardnotes.fancy-markdown-editor
src/components/assets/org.standardnotes.markdown-visual-editor
src/components/assets/org.standardnotes.minimal-markdown-editor
src/components/assets/org.standardnotes.plus-editor
src/components/assets/org.standardnotes.simple-markdown-editor
src/components/assets/org.standardnotes.simple-task-editor
src/components/assets/org.standardnotes.standard-sheets
src/components/assets/org.standardnotes.token-vault

2
packages/web/package.json
View File

@@ -10,7 +10,7 @@
],
"scripts": {
"build": "yarn clean && yarn copy:components && webpack --config web.webpack.prod.js && yarn tsc",
"clean": "rm -fr dist && rm -rf src/components",
"clean": "rm -fr dist",
"format": "prettier --write src/javascripts",
"lint": "NODE_OPTIONS=\"--max-old-space-size=4096\" eslint src/javascripts",
"lint:fix": "NODE_OPTIONS=\"--max-old-space-size=4096\" eslint src/javascripts --fix",

27
packages/web/scripts/CopyComponents.mjs
View File

@@ -1,36 +1,23 @@
import fs from 'fs'
import path from 'path'
import { fileURLToPath } from 'url'
import {
copyRecursiveSync,
doesDirExist,
emptyExistingDir,
ensureDirExists,
copyFileOrDir,
} from '../../../scripts/ScriptUtils.mjs'
import { doesDirExist, emptyExistingDir, ensureDirExists, copyFileOrDir } from '../../../scripts/ScriptUtils.mjs'
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const components = {
'@standardnotes/authenticator': 'org.standardnotes.token-vault',
'@standardnotes/autobiography-theme': 'org.standardnotes.theme-autobiography',
'@standardnotes/classic-code-editor': 'org.standardnotes.code-editor',
'@standardnotes/dynamic-theme': 'org.standardnotes.theme-dynamic',
'@standardnotes/focus-theme': 'org.standardnotes.theme-focus',
'@standardnotes/futura-theme': 'org.standardnotes.theme-futura',
'@standardnotes/markdown-hybrid': 'org.standardnotes.advanced-markdown-editor',
'@standardnotes/markdown-visual': 'org.standardnotes.markdown-visual-editor',
'@standardnotes/midnight-theme': 'org.standardnotes.theme-midnight',
'@standardnotes/rich-text': 'org.standardnotes.plus-editor',
'@standardnotes/simple-task-editor': 'org.standardnotes.simple-task-editor',
'@standardnotes/solarized-dark-theme': 'org.standardnotes.theme-solarized-dark',
'@standardnotes/spreadsheets': 'org.standardnotes.standard-sheets',
'@standardnotes/titanium-theme': 'org.standardnotes.theme-titanium',
'@standardnotes/bold-editor': 'org.standardnotes.bold-editor',
'@standardnotes/classic-code-editor': 'org.standardnotes.code-editor',
'@standardnotes/markdown-basic': 'org.standardnotes.simple-markdown-editor',
'@standardnotes/markdown-hybrid': 'org.standardnotes.advanced-markdown-editor',
'@standardnotes/markdown-math': 'org.standardnotes.fancy-markdown-editor',
'@standardnotes/markdown-minimal': 'org.standardnotes.minimal-markdown-editor',
'@standardnotes/markdown-visual': 'org.standardnotes.markdown-visual-editor',
'@standardnotes/rich-text': 'org.standardnotes.plus-editor',
'@standardnotes/simple-task-editor': 'org.standardnotes.simple-task-editor',
'@standardnotes/spreadsheets': 'org.standardnotes.standard-sheets',
}
const BasePath = path.join(__dirname, '../../../node_modules')

56
packages/web/src/components/assets/org.standardnotes.theme-autobiography/index.css Normal file
View File

@@ -0,0 +1,56 @@
:root {
--background-1: #ede4da;
--background-2: #e8d9c8;
--foreground-color: #5c3f27;
--border-color: #d9c6b1;
--highlight-color: #d68420;
--highlight-contrast: #e3ae74;
--sn-stylekit-passive-color-0: #7e582a;
--sn-stylekit-passive-color-1: #a37337;
--sn-stylekit-passive-color-3: #d9c6b1;
--sn-stylekit-passive-color-4: #e3d5c4;
--sn-stylekit-passive-color-4-opacity-variant: #c9995e3d;
--sn-stylekit-passive-color-5: #e9d9c7;
--sn-stylekit-info-color: #620613;
--sn-stylekit-info-contrast-color: #ebcdaa;
--sn-stylekit-neutral-color: #a47c5b;
--sn-stylekit-neutral-contrast-color: #e7ddd2;
--sn-stylekit-success-color: #9f4e03;
--sn-stylekit-success-contrast-color: #ebcdaa;
--sn-stylekit-warning-color: #b87a02;
--sn-stylekit-warning-contrast-color: #ebcdaa;
--sn-stylekit-danger-color: #a71428;
--sn-stylekit-danger-contrast-color: #ebcdaa;
--sn-stylekit-accessory-tint-color-1: #941648;
--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(--sn-stylekit-passive-color-4);
--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);
--navigation-item-selected-background-color: var(--sn-stylekit-background-color);
}
#notes-column .note.selected,
.notes .note.selected {
background-color: #e9d9c7;
color: var(--sn-stylekit-contrast-foreground-color);
}

22
packages/web/src/components/assets/org.standardnotes.theme-dynamic/index.css Normal file
View File

@@ -0,0 +1,22 @@
@media screen and (min-width: 768px) {
#navigation {
flex: none !important;
width: 10px !important;
transition: width 0.25s;
}
#navigation:hover {
flex: initial;
width: 200px !important;
transition: width 0.25s;
}
#items-column {
flex: none !important;
width: 270px !important;
transition: width 0.25s;
}
#items-column:hover {
flex: initial;
width: 380px !important;
transition: width 0.25s;
}
}

49
packages/web/src/components/assets/org.standardnotes.theme-focus/index.css Normal file
View File

@@ -0,0 +1,49 @@
: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);
--sn-stylekit-passive-color-0: #999999;
--sn-stylekit-passive-color-3: #28292b;
--sn-stylekit-passive-color-4: #1c1d1e;
--sn-stylekit-passive-color-5: #1d1f20;
--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: var(--sn-stylekit-passive-color-4);
--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;
--navigation-item-selected-background-color: var(--background-color);
}

45
packages/web/src/components/assets/org.standardnotes.theme-futura/index.css Normal file
View File

@@ -0,0 +1,45 @@
:root {
--foreground-color: #a9aabe;
--background-color: #20202b;
--highlight-color: #fca429;
--border-color: #20222c;
--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;
--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: var(--sn-stylekit-passive-color-4);
--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;
--navigation-item-selected-background-color: var(--sn-stylekit-background-color);
}

46
packages/web/src/components/assets/org.standardnotes.theme-midnight/index.css Normal file
View File

@@ -0,0 +1,46 @@
: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);
--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;
--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: var(--sn-stylekit-passive-color-4);
--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;
--navigation-item-selected-background-color: var(--sn-stylekit-background-color);
}

61
packages/web/src/components/assets/org.standardnotes.theme-solarized-dark/index.css Normal file
View File

@@ -0,0 +1,61 @@
: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);
--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;
--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(--sn-stylekit-passive-color-4);
--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;
--navigation-item-selected-background-color: var(--sn-stylekit-background-color);
}

42
packages/web/src/components/assets/org.standardnotes.theme-titanium/index.css Normal file
View File

@@ -0,0 +1,42 @@
:root {
--foreground-color: #3d3c40;
--background-color: #663399;
--highlight-color: #c9cccf;
--border-color: var(--highlight-color);
--sn-stylekit-passive-color-0: #626166;
--sn-stylekit-passive-color-4-opacity-variant: #e9e9e9;
--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: var(--sn-stylekit-passive-color-4);
--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: #d9dbde;
--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;
--navigation-item-selected-background-color: var(--sn-stylekit-background-color);
}

2
packages/web/web.webpack.config.js
View File

@@ -6,8 +6,6 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
const mergeWithEnvDefaults = require('./web.webpack-defaults')
require('dotenv').config()
const isDevelopment = process.env.NODE_ENV !== 'production'
module.exports = (env) => {
mergeWithEnvDefaults(env)
return {