diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index 5dc2bcc8..fc5aa95c 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -21,6 +21,7 @@ import yaml from 'js-yaml' import { render } from 'react-dom' import Carousel from 'react-image-carousel' import ConfigManager from '../main/lib/ConfigManager' +import uiThemes from 'browser/lib/ui-themes' import i18n from 'browser/lib/i18n' const { remote, shell } = require('electron') @@ -488,15 +489,7 @@ export default class MarkdownPreview extends React.Component { getScrollBarStyle () { const { theme } = this.props - switch (theme) { - case 'dark': - case 'solarized-dark': - case 'monokai': - case 'dracula': - return scrollBarDarkStyle - default: - return scrollBarStyle - } + return uiThemes.some(item => item.name === theme && item.isDark) ? scrollBarDarkStyle : scrollBarStyle } componentDidMount () { @@ -1142,7 +1135,17 @@ export default class MarkdownPreview extends React.Component { } // other case - shell.openExternal(href) + this.openExternal(href) + } + + openExternal (href) { + try { + const success = shell.openExternal(href) || shell.openExternal(decodeURI(href)) + if (!success) console.error('failed to open url ' + href) + } catch (e) { + // URI Error threw from decodeURI + console.error(e) + } } render () { diff --git a/browser/components/MarkdownSplitEditor.styl b/browser/components/MarkdownSplitEditor.styl index d716c85f..49bd927a 100644 --- a/browser/components/MarkdownSplitEditor.styl +++ b/browser/components/MarkdownSplitEditor.styl @@ -16,22 +16,14 @@ z-index 10 cursor col-resize -body[data-theme="dark"] - .root - .slider - border-left 1px solid $ui-dark-borderColor +apply-theme(theme) + body[data-theme={theme}] + .root + .slider + border-left 1px solid get-theme-var(theme, 'borderColor') -body[data-theme="solarized-dark"] - .root - .slider - border-left 1px solid $ui-solarized-dark-borderColor +for theme in 'dark' 'dracula' 'solarized-dark' + apply-theme(theme) -body[data-theme="monokai"] - .root - .slider - border-left 1px solid $ui-monokai-borderColor - -body[data-theme="dracula"] - .root - .slider - border-left 1px solid $ui-dracula-borderColor +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/NavToggleButton.styl b/browser/components/NavToggleButton.styl index 422a7ca6..a4bfc83e 100644 --- a/browser/components/NavToggleButton.styl +++ b/browser/components/NavToggleButton.styl @@ -17,10 +17,16 @@ body[data-theme="white"] navWhiteButtonColor() -body[data-theme="dark"] - .navToggle - &:hover - background-color alpha($ui-dark-button--active-backgroundColor, 20%) +apply-theme(theme) + body[data-theme={theme}] + .navToggle:hover + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%) + border 1px solid get-theme-var(theme, 'button--active-backgroundColor') transition 0.15s - color $ui-dark-text-color + color get-theme-var(theme, 'text-color') +for theme in 'dark' 'dracula' 'solarized-dark' + apply-theme(theme) + +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index a31f00a4..75078db4 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -194,7 +194,7 @@ body[data-theme="dark"] color $ui-dark-text-color .item-bottom-tagList-item transition 0.15s - background-color alpha(#fff, 20%) + background-color alpha($ui-dark-tagList-backgroundColor, 20%) color $ui-dark-text-color &:active transition 0.15s @@ -207,7 +207,7 @@ body[data-theme="dark"] color $ui-dark-text-color .item-bottom-tagList-item transition 0.15s - background-color alpha(white, 10%) + background-color alpha($ui-dark-tagList-backgroundColor, 10%) color $ui-dark-text-color .item-wrapper @@ -223,13 +223,13 @@ body[data-theme="dark"] .item-bottom-time color $ui-dark-text-color .item-bottom-tagList-item - background-color alpha(white, 10%) + background-color alpha($ui-dark-tagList-backgroundColor, 10%) color $ui-dark-text-color &:hover background-color alpha($ui-dark-button--active-backgroundColor, 60%) - color #c0392b + color $ui-dark-button--hover-color .item-bottom-tagList-item - background-color alpha(#fff, 20%) + background-color alpha($ui-dark-tagList-backgroundColor, 20%) .item-title color $ui-inactive-text-color @@ -322,148 +322,82 @@ body[data-theme="solarized-dark"] color $ui-inactive-text-color vertical-align middle -body[data-theme="monokai"] - .root - border-color $ui-monokai-borderColor - background-color $ui-monokai-noteList-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .root + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteList-backgroundColor') - .item - border-color $ui-monokai-borderColor - background-color $ui-monokai-noteList-backgroundColor - &:hover - transition 0.15s - // background-color alpha($ui-monokai-noteList-backgroundColor, 20%) - color $ui-monokai-text-color - .item-title - .item-title-icon - .item-bottom-time + .item + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteList-backgroundColor') + &:hover transition 0.15s - color $ui-monokai-text-color - .item-bottom-tagList-item + // background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%) + color get-theme-var(theme, 'text-color') + .item-title + .item-title-icon + .item-bottom-time + transition 0.15s + color get-theme-var(theme, 'text-color') + .item-bottom-tagList-item + transition 0.15s + background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%) + color get-theme-var(theme, 'text-color') + &:active transition 0.15s - background-color alpha($ui-monokai-noteList-backgroundColor, 20%) - color $ui-monokai-text-color - &:active - transition 0.15s - background-color $ui-monokai-noteList-backgroundColor - color $ui-monokai-text-color - .item-title - .item-title-icon - .item-bottom-time - transition 0.15s - color $ui-monokai-text-color - .item-bottom-tagList-item - transition 0.15s - background-color alpha($ui-monokai-noteList-backgroundColor, 10%) - color $ui-monokai-text-color + background-color get-theme-var(theme, 'noteList-backgroundColor') + color get-theme-var(theme, 'text-color') + .item-title + .item-title-icon + .item-bottom-time + transition 0.15s + color get-theme-var(theme, 'text-color') + .item-bottom-tagList-item + transition 0.15s + background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 10%) + color get-theme-var(theme, 'text-color') - .item-wrapper - border-color alpha($ui-monokai-button-backgroundColor, 60%) - - .item--active - border-color $ui-monokai-borderColor - background-color $ui-monokai-button-backgroundColor .item-wrapper - border-color transparent - .item-title - .item-title-icon - .item-bottom-time - color $ui-monokai-active-color - .item-bottom-tagList-item - background-color alpha(white, 10%) - color $ui-monokai-text-color - &:hover - // background-color alpha($ui-monokai-button--active-backgroundColor, 60%) - color #f92672 - .item-bottom-tagList-item - background-color alpha(#fff, 20%) + border-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%) - .item-title - color $ui-inactive-text-color - - .item-title-icon - color $ui-inactive-text-color - - .item-title-empty - color $ui-inactive-text-color - - .item-bottom-tagList-item - background-color alpha($ui-dark-button--active-backgroundColor, 40%) - color $ui-inactive-text-color - - .item-bottom-tagList-empty - color $ui-inactive-text-color - vertical-align middle - -body[data-theme="dracula"] - .root - border-color $ui-dracula-borderColor - background-color $ui-dracula-noteList-backgroundColor - - .item - border-color $ui-dracula-borderColor - background-color $ui-dracula-noteList-backgroundColor - &:hover - transition 0.15s - // background-color alpha($ui-dracula-noteList-backgroundColor, 20%) - color $ui-dracula-text-color + .item--active + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'button-backgroundColor') + .item-wrapper + border-color transparent .item-title .item-title-icon .item-bottom-time - transition 0.15s - color $ui-dracula-text-color + color get-theme-var(theme, 'active-color') .item-bottom-tagList-item - transition 0.15s - background-color alpha($ui-dracula-noteList-backgroundColor, 20%) - color $ui-dracula-text-color - &:active - transition 0.15s - background-color $ui-dracula-noteList-backgroundColor - color $ui-dracula-text-color - .item-title - .item-title-icon - .item-bottom-time - transition 0.15s - color $ui-dracula-text-color - .item-bottom-tagList-item - transition 0.15s - background-color alpha($ui-dracula-noteList-backgroundColor, 10%) - color $ui-dracula-text-color + background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%) + color get-theme-var(theme, 'text-color') + &:hover + // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%) + color get-theme-var(theme, 'button--hover-color') + .item-bottom-tagList-item + background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%) - .item-wrapper - border-color alpha($ui-dracula-button-backgroundColor, 60%) - - .item--active - border-color $ui-dracula-borderColor - background-color $ui-dracula-button-backgroundColor - .item-wrapper - border-color transparent .item-title + color $ui-inactive-text-color + .item-title-icon - .item-bottom-time - color $ui-dracula-active-color + color $ui-inactive-text-color + + .item-title-empty + color $ui-inactive-text-color + .item-bottom-tagList-item - background-color alpha(#f8f8f2, 10%) - color $ui-dracula-text-color - &:hover - // background-color alpha($ui-dracula-button--active-backgroundColor, 60%) - color #ff79c6 - .item-bottom-tagList-item - background-color alpha(#f8f8f2, 20%) + background-color alpha($ui-dark-button--active-backgroundColor, 40%) + color $ui-inactive-text-color - .item-title - color $ui-inactive-text-color + .item-bottom-tagList-empty + color $ui-inactive-text-color + vertical-align middle - .item-title-icon - color $ui-inactive-text-color +for theme in 'dracula' + apply-theme(theme) - .item-title-empty - color $ui-inactive-text-color - - .item-bottom-tagList-item - background-color alpha($ui-dark-button--active-backgroundColor, 40%) - color $ui-inactive-text-color - - .item-bottom-tagList-empty - color $ui-inactive-text-color - vertical-align middle \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl index 70b74be7..a36de5ed 100644 --- a/browser/components/NoteItemSimple.styl +++ b/browser/components/NoteItemSimple.styl @@ -223,130 +223,73 @@ body[data-theme="solarized-dark"] padding-left 4px opacity 0.4 -body[data-theme="monokai"] - .root - border-color $ui-monokai-borderColor - background-color $ui-monokai-noteList-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .root + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteList-backgroundColor') - .item-simple - border-color $ui-monokai-borderColor - background-color $ui-monokai-noteList-backgroundColor - &:hover - transition 0.15s - background-color alpha($ui-monokai-button-backgroundColor, 60%) - color $ui-monokai-text-color + .item-simple + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteList-backgroundColor') + &:hover + transition 0.15s + background-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%) + color get-theme-var(theme, 'text-color') + .item-simple-title + .item-simple-title-empty + .item-simple-title-icon + .item-simple-bottom-time + transition 0.15s + color get-theme-var(theme, 'text-color') + .item-simple-bottom-tagList-item + transition 0.15s + background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%) + color get-theme-var(theme, 'text-color') + &:active + transition 0.15s + background-color get-theme-var(theme, 'button--active-backgroundColor') + color get-theme-var(theme, 'text-color') + .item-simple-title + .item-simple-title-empty + .item-simple-title-icon + .item-simple-bottom-time + transition 0.15s + color get-theme-var(theme, 'text-color') + .item-simple-bottom-tagList-item + transition 0.15s + background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%) + color get-theme-var(theme, 'text-color') + + .item-simple--active + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'button--active-backgroundColor') + .item-simple-wrapper + border-color transparent .item-simple-title .item-simple-title-empty .item-simple-title-icon .item-simple-bottom-time - transition 0.15s - color $ui-monokai-text-color + color get-theme-var(theme, 'text-color') .item-simple-bottom-tagList-item - transition 0.15s - background-color alpha(#fff, 20%) - color $ui-monokai-text-color - &:active - transition 0.15s - background-color $ui-monokai-button--active-backgroundColor - color $ui-monokai-text-color - .item-simple-title - .item-simple-title-empty - .item-simple-title-icon - .item-simple-bottom-time - transition 0.15s - color $ui-monokai-text-color - .item-simple-bottom-tagList-item - transition 0.15s - background-color alpha(white, 10%) - color $ui-monokai-text-color - - .item-simple--active - border-color $ui-monokai-borderColor - background-color $ui-monokai-button--active-backgroundColor - .item-simple-wrapper - border-color transparent + background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%) + color get-theme-var(theme, 'text-color') + &:hover + // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%) + color #c0392b + .item-simple-bottom-tagList-item + background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%) .item-simple-title - .item-simple-title-empty - .item-simple-title-icon - .item-simple-bottom-time - color $ui-monokai-text-color - .item-simple-bottom-tagList-item - background-color alpha(white, 10%) - color $ui-monokai-text-color - &:hover - // background-color alpha($ui-dark-button--active-backgroundColor, 60%) - color #c0392b - .item-simple-bottom-tagList-item - background-color alpha(#fff, 20%) - .item-simple-title - color $ui-dark-text-color - border-bottom $ui-dark-borderColor - .item-simple-right - float right - .item-simple-right-storageName - padding-left 4px - opacity 0.4 + color $ui-dark-text-color + border-bottom $ui-dark-borderColor + .item-simple-right + float right + .item-simple-right-storageName + padding-left 4px + opacity 0.4 -body[data-theme="dracula"] - .root - border-color $ui-dracula-borderColor - background-color $ui-dracula-noteList-backgroundColor +for theme in 'dracula' + apply-theme(theme) - .item-simple - border-color $ui-dracula-borderColor - background-color $ui-dracula-noteList-backgroundColor - &:hover - transition 0.15s - background-color alpha($ui-dracula-button-backgroundColor, 60%) - color $ui-dracula-text-color - .item-simple-title - .item-simple-title-empty - .item-simple-title-icon - .item-simple-bottom-time - transition 0.15s - color $ui-dracula-text-color - .item-simple-bottom-tagList-item - transition 0.15s - background-color alpha(#f8f8f2, 20%) - color $ui-dracula-text-color - &:active - transition 0.15s - background-color $ui-dracula-button--active-backgroundColor - color $ui-dracula-text-color - .item-simple-title - .item-simple-title-empty - .item-simple-title-icon - .item-simple-bottom-time - transition 0.15s - color $ui-dracula-text-color - .item-simple-bottom-tagList-item - transition 0.15s - background-color alpha(#f8f8f2, 10%) - color $ui-dracula-text-color - - .item-simple--active - border-color $ui-dracula-borderColor - background-color $ui-dracula-button--active-backgroundColor - .item-simple-wrapper - border-color transparent - .item-simple-title - .item-simple-title-empty - .item-simple-title-icon - .item-simple-bottom-time - color $ui-dracula-text-color - .item-simple-bottom-tagList-item - background-color alpha(#f8f8f2, 10%) - color $ui-dracula-text-color - &:hover - // background-color alpha($ui-dark-button--active-backgroundColor, 60%) - color #c0392b - .item-simple-bottom-tagList-item - background-color alpha(#f8f8f2, 20%) - .item-simple-title - color $ui-dark-text-color - border-bottom $ui-dark-borderColor - .item-simple-right - float right - .item-simple-right-storageName - padding-left 4px - opacity 0.4 \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/RealtimeNotification.styl b/browser/components/RealtimeNotification.styl index 36330c48..795807b9 100644 --- a/browser/components/RealtimeNotification.styl +++ b/browser/components/RealtimeNotification.styl @@ -30,36 +30,20 @@ body[data-theme="dark"] &:hover color #5CB85C +apply-theme(theme) + body[data-theme={theme}] + .notification-area + background-color none -body[data-theme="solarized-dark"] - .notification-area - background-color none + .notification-link + color get-theme-var(theme, 'text-color') + border none + background-color get-theme-var(theme, 'button-backgroundColor') + &:hover + color get-theme-var(theme, 'button--hover-color') - .notification-link - color $ui-solarized-dark-text-color - border none - background-color $ui-solarized-dark-button-backgroundColor - &:hover - color #5CB85C +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="monokai"] - .notification-area - background-color none - - .notification-link - color $ui-monokai-text-color - border none - background-color $ui-monokai-button-backgroundColor - &:hover - color #5CB85C - -body[data-theme="dracula"] - .notification-area - background-color none - - .notification-link - color $ui-dracula-text-color - border none - background-color $ui-dracula-button-backgroundColor - &:hover - color #ff79c6 \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl index d5435a16..b028c90d 100644 --- a/browser/components/SideNavFilter.styl +++ b/browser/components/SideNavFilter.styl @@ -180,129 +180,51 @@ body[data-theme="dark"] .menu-button-label color $ui-dark-text-color +apply-theme(theme) + body[data-theme={theme}] + .menu-button + &:active + background-color get-theme-var(theme, 'noteList-backgroundColor') + color get-theme-var(theme, 'text-color') + &:hover + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') -body[data-theme="solarized-dark"] - .menu-button - &:active - background-color $ui-solarized-dark-noteList-backgroundColor - color $ui-solarized-dark-text-color - &:hover - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color - - .menu-button--active - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor - .menu-button-label - color $ui-solarized-dark-text-color - &:hover - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color + .menu-button--active + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') .menu-button-label - color $ui-solarized-dark-text-color + color get-theme-var(theme, 'text-color') + &:hover + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') + .menu-button-label + color get-theme-var(theme, 'text-color') - .menu-button-star--active - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor - .menu-button-label - color $ui-solarized-dark-text-color - &:hover - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color + .menu-button-star--active + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') .menu-button-label - color $ui-solarized-dark-text-color + color get-theme-var(theme, 'text-color') + &:hover + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') + .menu-button-label + color get-theme-var(theme, 'text-color') - .menu-button-trash--active - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor - .menu-button-label - color $ui-solarized-dark-text-color - &:hover - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color + .menu-button-trash--active + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') .menu-button-label - color $ui-solarized-dark-text-color + color get-theme-var(theme, 'text-color') + &:hover + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') + .menu-button-label + color get-theme-var(theme, 'text-color') -body[data-theme="monokai"] - .menu-button - &:active - background-color $ui-monokai-noteList-backgroundColor - color $ui-monokai-text-color - &:hover - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .menu-button--active - color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor - .menu-button-label - color $ui-monokai-text-color - &:hover - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color - .menu-button-label - color $ui-monokai-text-color - - .menu-button-star--active - color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor - .menu-button-label - color $ui-monokai-text-color - &:hover - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color - .menu-button-label - color $ui-monokai-text-color - - .menu-button-trash--active - color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor - .menu-button-label - color $ui-monokai-text-color - &:hover - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color - .menu-button-label - color $ui-monokai-text-color - -body[data-theme="dracula"] - .menu-button - &:active - background-color $ui-dracula-noteList-backgroundColor - color $ui-dracula-text-color - &:hover - background-color $ui-dracula-button-backgroundColor - color $ui-dracula-text-color - - .menu-button--active - color $ui-dracula-text-color - background-color $ui-dracula-button-backgroundColor - .menu-button-label - color $ui-dracula-text-color - &:hover - background-color $ui-dracula-button-backgroundColor - color $ui-dracula-text-color - .menu-button-label - color $ui-dracula-text-color - - .menu-button-star--active - color $ui-dracula-text-color - background-color $ui-dracula-button-backgroundColor - .menu-button-label - color $ui-dracula-text-color - &:hover - background-color $ui-dracula-button-backgroundColor - color $ui-dracula-text-color - .menu-button-label - color $ui-dracula-text-color - - .menu-button-trash--active - color $ui-dracula-text-color - background-color $ui-dracula-button-backgroundColor - .menu-button-label - color $ui-dracula-text-color - &:hover - background-color $ui-dracula-button-backgroundColor - color $ui-dracula-text-color - .menu-button-label - color $ui-dracula-text-color \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/SnippetTab.styl b/browser/components/SnippetTab.styl index d101f318..994e3b5a 100644 --- a/browser/components/SnippetTab.styl +++ b/browser/components/SnippetTab.styl @@ -61,7 +61,7 @@ width 100% outline none -body[data-theme="default"], body[data-theme="white"] +body[data-theme="default"], body[data-theme="white"] .root--active &:hover background-color alpha($ui-button--active-backgroundColor, 60%) @@ -100,103 +100,43 @@ body[data-theme="dark"] color $ui-dark-text-color transition 0.15s -body[data-theme="solarized-dark"] - .root - border-color $ui-solarized-dark-borderColor - &:hover - background-color $ui-solarized-dark-noteDetail-backgroundColor - transition 0.15s +apply-theme(theme) + body[data-theme={theme}] + .root + border-color get-theme-var(theme, 'borderColor') + &:hover + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + transition 0.15s + .deleteButton + color get-theme-var(theme, 'text-color') + transition 0.15s + .button + color get-theme-var(theme, 'text-color') + transition 0.15s + + .root--active + color get-theme-var(theme, 'active-color') + background-color get-theme-var(theme, 'button-backgroundColor') + border-color get-theme-var(theme, 'borderColor') .deleteButton - color $ui-solarized-dark-button--active-color - transition 0.15s + color get-theme-var(theme, 'text-color') .button - color $ui-solarized-dark-button--active-color - transition 0.15s + color get-theme-var(theme, 'active-color') - .root--active - color $ui-solarized-dark-button--active-color - background-color $ui-solarized-dark-button-backgroundColor - border-color $ui-solarized-dark-borderColor - .deleteButton - color $ui-solarized-dark-button--active-color .button - color $ui-solarized-dark-button--active-color + border none + color $ui-inactive-text-color + background-color transparent + transition color background-color 0.15s + border-left 4px solid transparent - .button - border none - color $ui-solarized-dark-text-color - background-color transparent - transition color background-color 0.15s - border-left 4px solid transparent - - .input - background-color $ui-solarized-dark-noteDetail-backgroundColor - color $ui-solarized-dark-button--active-color - transition 0.15s - -body[data-theme="monokai"] - .root - border-color $ui-monokai-borderColor - &:hover - background-color $ui-monokai-noteDetail-backgroundColor + .input + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + color get-theme-var(theme, 'text-color') transition 0.15s - .deleteButton - color $ui-monokai-text-color - transition 0.15s - .button - color $ui-monokai-text-color - transition 0.15s - .root--active - color $ui-monokai-active-color - background-color $ui-monokai-button-backgroundColor - border-color $ui-monokai-borderColor - .deleteButton - color $ui-monokai-text-color - .button - color $ui-monokai-active-color - - .button - border none - color $ui-inactive-text-color - background-color transparent - transition color background-color 0.15s - border-left 4px solid transparent +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .input - background-color $ui-monokai-noteDetail-backgroundColor - color $ui-monokai-text-color - transition 0.15s - -body[data-theme="dracula"] - .root - border-color $ui-dracula-borderColor - &:hover - background-color $ui-dracula-noteDetail-backgroundColor - transition 0.15s - .deleteButton - color $ui-dracula-text-color - transition 0.15s - .button - color $ui-dracula-text-color - transition 0.15s - - .root--active - color $ui-dracula-text-color - background-color $ui-dracula-button-backgroundColor - border-color $ui-dracula-borderColor - .deleteButton - color $ui-dracula-text-color - .button - color $ui-dracula-active-color - - .button - border none - color $ui-inactive-text-color - background-color transparent - transition color background-color 0.15s - border-left 4px solid transparent - - .input - background-color $ui-dracula-noteDetail-backgroundColor - color $ui-dracula-text-color \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl index df8cbbc6..e0a3c6cd 100644 --- a/browser/components/StorageItem.styl +++ b/browser/components/StorageItem.styl @@ -120,59 +120,28 @@ body[data-theme="dark"] color $ui-dark-text-color background-color alpha($ui-dark-button--active-backgroundColor, 50%) -body[data-theme="solarized-dark"] - .folderList-item - &:hover - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color - &:active - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .folderList-item + &:hover + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') + &:active + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') - .folderList-item--active - @extend .folderList-item - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor - &:active - background-color $ui-solarized-dark-button-backgroundColor - &:hover - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor + .folderList-item--active + @extend .folderList-item + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') + &:active + background-color get-theme-var(theme, 'button-backgroundColor') + &:hover + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') -body[data-theme="monokai"] - .folderList-item - &:hover - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color - &:active - color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .folderList-item--active - @extend .folderList-item - color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor - &:active - background-color $ui-monokai-button-backgroundColor - &:hover - color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor - -body[data-theme="dracula"] - .folderList-item - &:hover - background-color $ui-dracula-button-backgroundColor - color $ui-dracula-text-color - &:active - color $ui-dracula-text-color - background-color $ui-dracula-button-backgroundColor - - .folderList-item--active - @extend .folderList-item - color $ui-dracula-text-color - background-color $ui-dracula-button-backgroundColor - &:active - background-color $ui-dracula-button-backgroundColor - &:hover - color $ui-dracula-text-color - background-color $ui-dracula-button-backgroundColor \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/TagListItem.styl b/browser/components/TagListItem.styl index 9f407a17..1f78c46f 100644 --- a/browser/components/TagListItem.styl +++ b/browser/components/TagListItem.styl @@ -94,23 +94,30 @@ body[data-theme="white"] .tagList-item-count color $ui-text-color -body[data-theme="dark"] - .tagList-item - color $ui-dark-inactive-text-color - &:hover - color $ui-dark-text-color - background-color alpha($ui-dark-button--active-backgroundColor, 20%) - &:active - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .tagList-item + color get-theme-var(theme, 'inactive-text-color') + &:hover + color get-theme-var(theme, 'text-color') + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%) + &:active + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') - .tagList-item-active - background-color $ui-dark-button--active-backgroundColor - color $ui-dark-text-color - &:active - background-color alpha($ui-dark-button--active-backgroundColor, 50%) - &:hover - color $ui-dark-text-color - background-color alpha($ui-dark-button--active-backgroundColor, 50%) - .tagList-item-count - color $ui-dark-button--active-color + .tagList-item-active + background-color get-theme-var(theme, 'button--active-backgroundColor') + color get-theme-var(theme, 'text-color') + &:active + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%) + &:hover + color get-theme-var(theme, 'text-color') + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%) + .tagList-item-count + color get-theme-var(theme, 'button--active-color') + +for theme in 'dark' + apply-theme(theme) + +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/TodoListPercentage.styl b/browser/components/TodoListPercentage.styl index 5a0f3257..4a0081cd 100644 --- a/browser/components/TodoListPercentage.styl +++ b/browser/components/TodoListPercentage.styl @@ -54,7 +54,7 @@ body[data-theme="dark"] .percentageText color $ui-dark-text-color - + .todoClearText color $ui-dark-text-color @@ -71,25 +71,19 @@ body[data-theme="solarized-dark"] .todoClearText color #fdf6e3 -body[data-theme="monokai"] - .percentageBar - background-color: $ui-monokai-borderColor +apply-theme(theme) + body[data-theme={theme}] + .percentageBar + background-color: get-theme-var(theme, 'borderColor') - .progressBar - background-color $ui-monokai-active-color + .progressBar + background-color get-theme-var(theme, 'active-color') - .percentageText - color $ui-monokai-text-color + .percentageText + color get-theme-var(theme, 'text-color') -body[data-theme="dracula"] - .percentageBar - background-color $ui-dracula-borderColor +for theme in 'dracula' + apply-theme(theme) - .progressBar - background-color: $ui-dracula-active-color - - .percentageText - color $ui-dracula-text-color - - .percentageText - color $ui-dracula-text-color +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl index 61939a64..00f0b51c 100644 --- a/browser/components/markdown.styl +++ b/browser/components/markdown.styl @@ -561,159 +561,57 @@ body[data-theme="dark"] background-color darken(themeDarkBackground, 5%) color themeDarkText - -themeSolarizedDarkBackground = $ui-solarized-dark-noteDetail-backgroundColor -themeSolarizedDarkTableOdd = $ui-solarized-dark-noteDetail-backgroundColor -themeSolarizedDarkTableEven = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%) -themeSolarizedDarkTableHead = themeSolarizedDarkTableEven -themeSolarizedDarkTableBorder = themeDarkBorder - -body[data-theme="solarized-dark"] - color $ui-solarized-dark-text-color - border-color themeDarkBorder - background-color themeSolarizedDarkBackground - table - thead - tr - background-color themeSolarizedDarkTableHead - th - border-color themeSolarizedDarkTableBorder - &:last-child - border-right solid 1px themeSolarizedDarkTableBorder - tbody - tr:nth-child(2n + 1) - background-color themeSolarizedDarkTableOdd - tr:nth-child(2n) - background-color themeSolarizedDarkTableEven - td - border-color themeSolarizedDarkTableBorder - &:last-child - border-right solid 1px themeSolarizedDarkTableBorder - dl +apply-theme(theme) + body[data-theme={theme}] + color get-theme-var(theme, 'text-color') border-color themeDarkBorder - background-color themeSolarizedDarkTableHead - dt - border-color themeDarkBorder - dd - border-color themeDarkBorder - background-color $ui-solarized-dark-noteDetail-backgroundColor + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + table + thead + tr + background-color get-theme-var(theme, 'table-head-backgroundColor') + th + border-color get-theme-var(theme, 'table-borderColor') + &:last-child + border-right solid 1px get-theme-var(theme, 'table-borderColor') + tbody + tr:nth-child(2n + 1) + background-color get-theme-var(theme, 'table-odd-backgroundColor') + tr:nth-child(2n) + background-color get-theme-var(theme, 'table-even-backgroundColor') + td + border-color get-theme-var(theme, 'table-borderColor') + &:last-child + border-right solid 1px get-theme-var(theme, 'table-borderColor') + kbd + background-color get-theme-var(theme, 'kbd-backgroundColor') + color get-theme-var(theme, 'kbd-color') - pre.fence - .gallery - .carousel-main, .carousel-footer - background-color $ui-solarized-dark-noteDetail-backgroundColor - .prev, .next - color $ui-solarized-dark-button--active-color - background-color $ui-solarized-dark-button-backgroundColor + dl + border-color themeDarkBorder + background-color get-theme-var(theme, 'table-head-backgroundColor') + dt + border-color themeDarkBorder + dd + border-color themeDarkBorder + background-color get-theme-var(theme, 'noteDetail-backgroundColor') - .markdownIt-TOC-wrapper - &, - &:before - background-color darken(themeSolarizedDarkBackground, 15%) - color themeDarkText + pre.fence + .gallery + .carousel-main, .carousel-footer + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + .prev, .next + color get-theme-var(theme, 'button--active-color') + background-color get-theme-var(theme, 'button-backgroundColor') -themeMonokaiBackground = $ui-monokai-noteDetail-backgroundColor -themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor -themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%) -themeMonokaiTableHead = themeMonokaiTableEven -themeMonokaiTableBorder = themeDarkBorder + .markdownIt-TOC-wrapper + &, + &:before + background-color darken(get-theme-var(theme, 'noteDetail-backgroundColor'), 15%) + color themeDarkText -body[data-theme="monokai"] - color $ui-monokai-text-color - border-color themeDarkBorder - background-color themeMonokaiBackground - table - thead - tr - background-color themeMonokaiTableHead - th - border-color themeMonokaiTableBorder - &:last-child - border-right solid 1px themeMonokaiTableBorder - tbody - tr:nth-child(2n + 1) - background-color themeMonokaiTableOdd - tr:nth-child(2n) - background-color themeMonokaiTableEven - td - border-color themeMonokaiTableBorder - &:last-child - border-right solid 1px themeMonokaiTableBorder - kbd - background-color themeDarkBackground +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - dl - border-color themeDarkBorder - background-color themeMonokaiTableHead - dt - border-color themeDarkBorder - dd - border-color themeDarkBorder - background-color $ui-monokai-noteDetail-backgroundColor - - pre.fence - .gallery - .carousel-main, .carousel-footer - background-color $ui-monokai-noteDetail-backgroundColor - .prev, .next - color $ui-monokai-button--active-color - background-color $ui-monokai-button-backgroundColor - - .markdownIt-TOC-wrapper - &, - &:before - background-color darken(themeMonokaiBackground, 15%) - color themeDarkText - -themeDraculaBackground = $ui-dracula-noteDetail-backgroundColor -themeDraculaTableOdd = $ui-dracula-noteDetail-backgroundColor -themeDraculaTableEven = darken($ui-dracula-noteDetail-backgroundColor, 10%) -themeDraculaTableHead = themeDraculaTableEven -themeDraculaTableBorder = themeDarkBorder - -body[data-theme="dracula"] - color $ui-dracula-text-color - border-color themeDarkBorder - background-color themeDraculaBackground - table - thead - tr - background-color themeDraculaTableHead - th - border-color themeDraculaTableBorder - &:last-child - border-right solid 1px themeDraculaTableBorder - tbody - tr:nth-child(2n + 1) - background-color themeDraculaTableOdd - tr:nth-child(2n) - background-color themeDraculaTableEven - td - border-color themeDraculaTableBorder - &:last-child - border-right solid 1px themeDraculaTableBorder - kbd - background-color themeDarkBackground - - dl - border-color themeDarkBorder - background-color themeDraculaTableHead - dt - border-color themeDarkBorder - dd - border-color themeDarkBorder - background-color $ui-dracula-noteDetail-backgroundColor - - pre.fence - .gallery - .carousel-main, .carousel-footer - background-color $ui-dracula-noteDetail-backgroundColor - .prev, .next - color $ui-dracula-button--active-color - background-color $ui-dracula-button-backgroundColor - - .markdownIt-TOC-wrapper - &, - &:before - background-color darken(themeDraculaBackground, 15%) - color themeDarkText +for theme in $themes + apply-theme(theme) diff --git a/browser/components/render/MermaidRender.js b/browser/components/render/MermaidRender.js index 2b1e8b71..5bed9bf1 100644 --- a/browser/components/render/MermaidRender.js +++ b/browser/components/render/MermaidRender.js @@ -1,4 +1,5 @@ import mermaidAPI from 'mermaid' +import uiThemes from 'browser/lib/ui-themes' // fixes bad styling in the mermaid dark theme const darkThemeStyling = ` @@ -23,10 +24,13 @@ function render (element, content, theme, enableHTMLLabel) { try { const height = element.attributes.getNamedItem('data-height') const isPredefined = height && height.value !== 'undefined' + if (isPredefined) { element.style.height = height.value + 'vh' } - const isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula' + + const isDarkTheme = uiThemes.some(item => item.name === theme && item.isDark) + mermaidAPI.initialize({ theme: isDarkTheme ? 'dark' : 'default', themeCSS: isDarkTheme ? darkThemeStyling : '', @@ -37,6 +41,7 @@ function render (element, content, theme, enableHTMLLabel) { useWidth: element.clientWidth } }) + mermaidAPI.render(getId(), content, (svgGraph) => { element.innerHTML = svgGraph diff --git a/browser/lib/ui-themes.js b/browser/lib/ui-themes.js new file mode 100644 index 00000000..3d9044c6 --- /dev/null +++ b/browser/lib/ui-themes.js @@ -0,0 +1,39 @@ +import i18n from 'browser/lib/i18n' + +export default [ + { + name: 'dark', + label: i18n.__('Dark'), + isDark: true + }, + { + name: 'default', + label: i18n.__('Default'), + isDark: false + }, + { + name: 'dracula', + label: i18n.__('Dracula'), + isDark: true + }, + { + name: 'monokai', + label: i18n.__('Monokai'), + isDark: true + }, + { + name: 'nord', + label: i18n.__('Nord'), + isDark: true + }, + { + name: 'solarized-dark', + label: i18n.__('Solarized Dark'), + isDark: true + }, + { + name: 'white', + label: i18n.__('White'), + isDark: false + } +] diff --git a/browser/main/Detail/Detail.styl b/browser/main/Detail/Detail.styl index 1b7bd606..f03de5d7 100644 --- a/browser/main/Detail/Detail.styl +++ b/browser/main/Detail/Detail.styl @@ -24,23 +24,16 @@ body[data-theme="dark"] .empty-message color $ui-dark-inactive-text-color -body[data-theme="solarized-dark"] - .root - background-color $ui-solarized-dark-noteDetail-backgroundColor - border-left 1px solid $ui-solarized-dark-borderColor - .empty-message - color $ui-solarized-dark-text-color +apply-theme(theme) + body[data-theme={theme}] + .root + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + border-left 1px solid get-theme-var(theme, 'borderColor') + .empty-message + color get-theme-var(theme, 'text-color') -body[data-theme="monokai"] - .root - background-color $ui-monokai-noteDetail-backgroundColor - border-left 1px solid $ui-monokai-borderColor - .empty-message - color $ui-monokai-text-color +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="dracula"] - .root - background-color $ui-dracula-noteDetail-backgroundColor - border-left 1px solid $ui-dracula-borderColor - .empty-message - color $ui-dracula-text-color \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Detail/FolderSelect.styl b/browser/main/Detail/FolderSelect.styl index fe045e3a..ac903c6c 100644 --- a/browser/main/Detail/FolderSelect.styl +++ b/browser/main/Detail/FolderSelect.styl @@ -134,54 +134,39 @@ body[data-theme="dark"] .search-optionList-item-name-surfix color $ui-dark-inactive-text-color -body[data-theme="monokai"] - .root - color $ui-dark-text-color - &:hover - color white - background-color $ui-monokai-button--hover-backgroundColor - border-color $ui-monokai-borderColor +apply-theme(theme) + body[data-theme={theme}] + .root + &:hover + background-color get-theme-var(theme, 'button--hover-backgroundColor') + border-color get-theme-var(theme, 'borderColor') - .search-optionList - color white - border-color $ui-monokai-borderColor - background-color $ui-monokai-button-backgroundColor + .search-input + color get-theme-var(theme, 'text-color') + background-color transparent + border-color get-theme-var(theme, 'borderColor') - .search-optionList-item - &:hover - background-color lighten($ui-monokai-button--hover-backgroundColor, 15%) + .search-optionList + color get-theme-var(theme, 'text-color') + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'button-backgroundColor') - .search-optionList-item--active - background-color $ui-monokai-button--active-backgroundColor - color $ui-monokai-button--active-color - &:hover - background-color $ui-monokai-button--active-backgroundColor - color $ui-monokai-button--active-color - .search-optionList-item-name-surfix - color $ui-monokai-inactive-text-color + .search-optionList-item + &:hover + background-color lighten(get-theme-var(theme, 'button--hover-backgroundColor'), 15%) -body[data-theme="dracula"] - .root - color $ui-dracula-text-color - &:hover - color #f8f8f2 - background-color $ui-dark-button--hover-backgroundColor - border-color $ui-dracula-borderColor + .search-optionList-item--active + background-color get-theme-var(theme, 'button--active-backgroundColor') + color get-theme-var(theme, 'button--active-color') + &:hover + background-color get-theme-var(theme, 'button--active-backgroundColor') + color get-theme-var(theme, 'button--active-color') - .search-optionList - color #f8f8f2 - border-color $ui-dracula-borderColor - background-color $ui-dracula-button-backgroundColor + .search-optionList-item-name-surfix + color get-theme-var(theme, 'inactive-text-color') - .search-optionList-item - &:hover - background-color lighten($ui-dracula-button--hover-backgroundColor, 15%) +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .search-optionList-item--active - background-color $ui-dracula-button--active-backgroundColor - color $ui-dracula-button--active-color - &:hover - background-color $ui-dark-button--hover-backgroundColor - color $ui-dracula-button--active-color - .search-optionList-item-name-surfix - color $ui-dracula-inactive-text-color +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Detail/FullscreenButton.styl b/browser/main/Detail/FullscreenButton.styl index 133577f3..52a3b961 100644 --- a/browser/main/Detail/FullscreenButton.styl +++ b/browser/main/Detail/FullscreenButton.styl @@ -1,26 +1,26 @@ -.control-fullScreenButton - top 80px - topBarButtonRight() - &:hover .tooltip - opacity 1 - -.tooltip - tooltip() - position absolute - pointer-events none - top 50px - right 70px - z-index 200 - padding 5px - line-height normal - border-radius 2px - opacity 0 - transition 0.1s - -.tooltip:lang(ja) - @extend .tooltip - right 35px - -body[data-theme="dark"] - .control-fullScreenButton +.control-fullScreenButton + top 80px + topBarButtonRight() + &:hover .tooltip + opacity 1 + +.tooltip + tooltip() + position absolute + pointer-events none + top 50px + right 70px + z-index 200 + padding 5px + line-height normal + border-radius 2px + opacity 0 + transition 0.1s + +.tooltip:lang(ja) + @extend .tooltip + right 35px + +body[data-theme="dark"] + .control-fullScreenButton topBarButtonDark() \ No newline at end of file diff --git a/browser/main/Detail/InfoPanel.styl b/browser/main/Detail/InfoPanel.styl index e9f7f59b..4417dc60 100644 --- a/browser/main/Detail/InfoPanel.styl +++ b/browser/main/Detail/InfoPanel.styl @@ -138,162 +138,49 @@ .export--unable cursor not-allowed -body[data-theme="dark"] - .control-infoButton-panel - background-color $ui-dark-noteList-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .control-infoButton-panel + background-color get-theme-var(theme, 'noteList-backgroundColor') - .control-infoButton-panel-trash - background-color $ui-dark-noteList-backgroundColor + .control-infoButton-panel-trash + background-color get-theme-var(theme, 'noteList-backgroundColor') - .modification-date - color $ui-dark-text-color + .modification-date + color get-theme-var(theme, 'text-color') - .modification-date-desc - color $ui-inactive-text-color + .modification-date-desc + color $ui-inactive-text-color - .infoPanel-defaul-count - color $ui-dark-text-color + .infoPanel-defaul-count + color get-theme-var(theme, 'text-color') - .infoPanel-sub-count - color $ui-inactive-text-color + .infoPanel-sub-count + color $ui-inactive-text-color - .infoPanel-default - color $ui-dark-text-color + .infoPanel-default + color get-theme-var(theme, 'text-color') - .infoPanel-sub - color $ui-inactive-text-color + .infoPanel-sub + color $ui-inactive-text-color - .infoPanel-noteLink - background-color alpha($ui-dark-borderColor, 60%) - color $ui-dark-text-color + .infoPanel-noteLink + background-color alpha(get-theme-var(theme, 'borderColor'), 20%) + color get-theme-var(theme, 'text-color') - [id=export-wrap] - button - color $ui-dark-inactive-text-color - &:hover - background-color alpha($ui-dark-borderColor, 20%) - color $ui-dark-text-color - p - color $ui-dark-inactive-text-color - &:hover - color $ui-dark-text-color + [id=export-wrap] + button + color $ui-dark-inactive-text-color + &:hover + background-color alpha(get-theme-var(theme, 'borderColor'), 20%) + color get-theme-var(theme, 'text-color') + p + color $ui-dark-inactive-text-color + &:hover + color get-theme-var(theme, 'text-color') -body[data-theme="solarized-dark"] - .control-infoButton-panel - background-color $ui-solarized-dark-noteList-backgroundColor +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) - .control-infoButton-panel-trash - background-color $ui-solarized-ark-noteList-backgroundColor - - .modification-date - color $ui-solarized-ark-text-color - - .modification-date-desc - color $ui-inactive-text-color - - .infoPanel-defaul-count - color $ui-solarized-dark-text-color - - .infoPanel-sub-count - color $ui-inactive-text-color - - .infoPanel-default - color $ui-solarized-ark-text-color - - .infoPanel-sub - color $ui-inactive-text-color - - .infoPanel-noteLink - background-color alpha($ui-solarized-dark-borderColor, 20%) - color $ui-solarized-dark-text-color - - [id=export-wrap] - button - color $ui-dark-inactive-text-color - &:hover - background-color alpha($ui-solarized-dark-borderColor, 20%) - color $ui-solarized-ark-text-color - p - color $ui-dark-inactive-text-color - &:hover - color $ui-solarized-ark-text-color - -body[data-theme="monokai"] - .control-infoButton-panel - background-color $ui-monokai-noteList-backgroundColor - - .control-infoButton-panel-trash - background-color $ui-monokai-noteList-backgroundColor - - .modification-date - color $ui-monokai-text-color - - .modification-date-desc - color $ui-inactive-text-color - - .infoPanel-defaul-count - color $ui-monokai-text-color - - .infoPanel-sub-count - color $ui-inactive-text-color - - .infoPanel-default - color $ui-monokai-text-color - - .infoPanel-sub - color $ui-inactive-text-color - - .infoPanel-noteLink - background-color alpha($ui-monokai-borderColor, 20%) - color $ui-monokai-text-color - - [id=export-wrap] - button - color $ui-dark-inactive-text-color - &:hover - background-color alpha($ui-monokai-borderColor, 20%) - color $ui-monokai-text-color - p - color $ui-dark-inactive-text-color - &:hover - color $ui-monokai-text-color - -body[data-theme="dracula"] - .control-infoButton-panel - background-color $ui-dracula-noteList-backgroundColor - - .control-infoButton-panel-trash - background-color $ui-dracula-noteList-backgroundColor - - .modification-date - color $ui-dracula-text-color - - .modification-date-desc - color $ui-inactive-text-color - - .infoPanel-defaul-count - color $ui-dracula-text-color - - .infoPanel-sub-count - color $ui-inactive-text-color - - .infoPanel-default - color $ui-dracula-text-color - - .infoPanel-sub - color $ui-inactive-text-color - - .infoPanel-noteLink - background-color alpha($ui-dracula-borderColor, 20%) - color $ui-dracula-text-color - - [id=export-wrap] - button - color $ui-dark-inactive-text-color - &:hover - background-color alpha($ui-dracula-borderColor, 20%) - color $ui-dracula-text-color - p - color $ui-dark-inactive-text-color - &:hover - color $ui-dracula-text-color \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl index a7adbea1..a9ae1421 100644 --- a/browser/main/Detail/MarkdownNoteDetail.styl +++ b/browser/main/Detail/MarkdownNoteDetail.styl @@ -66,19 +66,14 @@ body[data-theme="dark"] .control-fullScreenButton topBarButtonDark() +apply-theme(theme) + body[data-theme={theme}] + .root + border-left 1px solid get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteDetail-backgroundColor') -body[data-theme="solarized-dark"] - .root - border-left 1px solid $ui-solarized-dark-borderColor - background-color $ui-solarized-dark-noteDetail-backgroundColor - -body[data-theme="monokai"] - .root - border-left 1px solid $ui-monokai-borderColor - background-color $ui-monokai-noteDetail-backgroundColor - -body[data-theme="dracula"] - .root - border-left 1px solid $ui-dracula-borderColor - background-color $ui-dracula-noteDetail-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) +for theme in $themes + apply-theme(theme) diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl index 21670a1b..59d67583 100644 --- a/browser/main/Detail/NoteDetailInfo.styl +++ b/browser/main/Detail/NoteDetailInfo.styl @@ -15,6 +15,14 @@ $info-margin-under-border = 30px padding 0 20px z-index 99 +.info > div + > button + -webkit-user-drag none + user-select none + > img, span + -webkit-user-drag none + user-select none + .info-left padding 0 10px width 100% @@ -94,25 +102,14 @@ body[data-theme="dark"] .undo-button topBarButtonDark() -body[data-theme="solarized-dark"] - .info - border-color $ui-solarized-dark-borderColor - background-color $ui-solarized-dark-noteDetail-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .info + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteDetail-backgroundColor') -body[data-theme="monokai"] - .info - border-color $ui-monokai-borderColor - background-color $ui-monokai-noteDetail-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="dracula"] - .info - border-color $ui-dracula-borderColor - background-color $ui-dracula-noteDetail-backgroundColor - -.info > div - > button - -webkit-user-drag none - user-select none - > img, span - -webkit-user-drag none - user-select none \ No newline at end of file +for theme in $themes + apply-theme(theme) diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl index 1af93645..c312d271 100644 --- a/browser/main/Detail/SnippetNoteDetail.styl +++ b/browser/main/Detail/SnippetNoteDetail.styl @@ -156,78 +156,35 @@ body[data-theme="dark"] .control-fullScreenButton topBarButtonDark() -body[data-theme="solarized-dark"] - .root - border-left 1px solid $ui-solarized-dark-borderColor - background-color $ui-solarized-dark-noteDetail-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .root + border-left 1px solid get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteDetail-backgroundColor') - .body - background-color $ui-solarized-dark-noteDetail-backgroundColor + .body + background-color get-theme-var(theme, 'noteDetail-backgroundColor') - .body .description textarea - background-color $ui-solarized-dark-noteDetail-backgroundColor - color $ui-solarized-dark-text-color - border 1px solid $ui-solarized-dark-borderColor + .body .description textarea + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + color get-theme-var(theme, 'text-color') + border 1px solid get-theme-var(theme, 'borderColor') - .tabList .tabButton - border-color $ui-solarized-dark-borderColor + .tabList .tabButton + border-color get-theme-var(theme, 'borderColor') - .tabButton - &:hover - color $ui-solarized-dark-button--active-color - background-color $ui-solarized-dark-noteDetail-backgroundColor - transition 0.15s - - .tabList - background-color $ui-solarized-dark-noteDetail-backgroundColor - color $ui-solarized-dark-text-color + .tabButton + &:hover + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + transition 0.15s -body[data-theme="monokai"] - .root - border-left 1px solid $ui-monokai-borderColor - background-color $ui-monokai-noteDetail-backgroundColor + .tabList + background-color get-theme-var(theme, 'noteDetail-backgroundColor') + color get-theme-var(theme, 'text-color') - .body - background-color $ui-monokai-noteDetail-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .body .description textarea - background-color $ui-monokai-noteDetail-backgroundColor - color $ui-monokai-text-color - border 1px solid $ui-monokai-borderColor - - .tabList .tabButton - border-color $ui-monokai-borderColor - - .tabButton - &:hover - color $ui-monokai-text-color - background-color $ui-monokai-noteDetail-backgroundColor - - .tabList - background-color $ui-monokai-noteDetail-backgroundColor - color $ui-monokai-text-color - -body[data-theme="dracula"] - .root - border-left 1px solid $ui-dracula-borderColor - background-color $ui-dracula-noteDetail-backgroundColor - - .body - background-color $ui-dracula-noteDetail-backgroundColor - - .body .description textarea - background-color $ui-dracula-noteDetail-backgroundColor - color $ui-dracula-text-color - border 1px solid $ui-dracula-borderColor - - .tabList .tabButton - border-color $ui-dracula-borderColor - - .tabButton - &:hover - color $ui-dracula-text-color - background-color $ui-dracula-noteDetail-backgroundColor - - .tabList - background-color $ui-dracula-noteDetail-backgroundColor - color $ui-dracula-text-color \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl index 844561c6..6107b731 100644 --- a/browser/main/Detail/TagSelect.styl +++ b/browser/main/Detail/TagSelect.styl @@ -54,35 +54,20 @@ body[data-theme="dark"] .tag-label color $ui-dark-text-color -body[data-theme="solarized-dark"] - .tag - background-color $ui-solarized-dark-tag-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .tag + background-color get-theme-var(theme, 'tag-backgroundColor') - .tag-removeButton - border-color $ui-button--focus-borderColor - background-color transparent + .tag-removeButton + border-color $ui-button--focus-borderColor + background-color transparent - .tag-label - color $ui-solarized-dark-text-color + .tag-label + color get-theme-var(theme, 'text-color') -body[data-theme="monokai"] - .tag - background-color $ui-monokai-tag-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .tag-removeButton - border-color $ui-button--focus-borderColor - background-color transparent - - .tag-label - color $ui-monokai-text-color - -body[data-theme="dracula"] - .tag - background-color $ui-dracula-tag-backgroundColor - - .tag-removeButton - border-color $ui-dracula-button--focus-borderColor - background-color transparent - - .tag-label - color $ui-dracula-borderColor +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/Detail/ToggleDirectionButton.styl b/browser/main/Detail/ToggleDirectionButton.styl index 5146ad23..15f90778 100644 --- a/browser/main/Detail/ToggleDirectionButton.styl +++ b/browser/main/Detail/ToggleDirectionButton.styl @@ -46,6 +46,13 @@ left -8px width 70px +.control-toggleModeButton + -webkit-user-drag none + user-select none + > div img + -webkit-user-drag none + user-select none + body[data-theme="dark"] .control-fullScreenButton topBarButtonDark() @@ -63,23 +70,16 @@ body[data-theme="solarized-dark"] background-color #1EC38B box-shadow 2px 0px 7px #222222 -body[data-theme="monokai"] - .control-toggleModeButton - background-color #373831 - .active - background-color #f92672 - box-shadow 2px 0px 7px #222222 +apply-theme(theme) + body[data-theme={theme}] + .control-toggleModeButton + background-color get-theme-var(theme, 'borderColor') + .active + background-color get-theme-var(theme, 'active-color') + box-shadow 2px 0px 7px #222222 -body[data-theme="dracula"] - .control-toggleModeButton - background-color #44475a - .active - background-color #bd93f9 - box-shadow 2px 0px 7px #222222 +for theme in 'dracula' + apply-theme(theme) -.control-toggleModeButton - -webkit-user-drag none - user-select none - > div img - -webkit-user-drag none - user-select none +for theme in $themes + apply-theme(theme) diff --git a/browser/main/Detail/ToggleModeButton.styl b/browser/main/Detail/ToggleModeButton.styl index 39d30973..a9579fcd 100644 --- a/browser/main/Detail/ToggleModeButton.styl +++ b/browser/main/Detail/ToggleModeButton.styl @@ -1,84 +1,84 @@ -.control-toggleModeButton - height 25px - border-radius 50px - background-color #F4F4F4 - width 52px - display flex - align-items center - position: relative - top 2px - .active - background-color #1EC38B - width 33px - height 24px - box-shadow 2px 0px 7px #eee - z-index 1 - - div - width 40px - height 100% - border-radius 50% - display flex - align-items center - justify-content center - cursor pointer - - &:hover .tooltip - opacity 1 - -.tooltip - tooltip() - position absolute - pointer-events none - top 33px - left -10px - z-index 200 - width 80px - padding 5px - line-height normal - border-radius 2px - opacity 0 - transition 0.1s - -.tooltip:lang(ja) - @extend .tooltip - left -8px - width 70px - -body[data-theme="dark"] - .control-fullScreenButton - topBarButtonDark() - - .control-toggleModeButton - background-color #3A404C - .active - background-color #1EC38B - box-shadow 2px 0px 7px #444444 - -body[data-theme="solarized-dark"] - .control-toggleModeButton - background-color #002B36 - .active - background-color #1EC38B - box-shadow 2px 0px 7px #222222 - -body[data-theme="monokai"] - .control-toggleModeButton - background-color #373831 - .active - background-color #f92672 - box-shadow 2px 0px 7px #222222 - -body[data-theme="dracula"] - .control-toggleModeButton - background-color #44475a - .active - background-color #bd93f9 - box-shadow 2px 0px 7px #222222 - -.control-toggleModeButton - -webkit-user-drag none - user-select none - > div img - -webkit-user-drag none - user-select none +.control-toggleModeButton + height 25px + border-radius 50px + background-color #F4F4F4 + width 52px + display flex + align-items center + position: relative + top 2px + .active + background-color #1EC38B + width 33px + height 24px + box-shadow 2px 0px 7px #eee + z-index 1 + + div + width 40px + height 100% + border-radius 50% + display flex + align-items center + justify-content center + cursor pointer + + &:hover .tooltip + opacity 1 + +.control-toggleModeButton + -webkit-user-drag none + user-select none + > div img + -webkit-user-drag none + user-select none + +.tooltip + tooltip() + position absolute + pointer-events none + top 33px + left -10px + z-index 200 + width 80px + padding 5px + line-height normal + border-radius 2px + opacity 0 + transition 0.1s + +.tooltip:lang(ja) + @extend .tooltip + left -8px + width 70px + +body[data-theme="dark"] + .control-fullScreenButton + topBarButtonDark() + + .control-toggleModeButton + background-color #3A404C + .active + background-color #1EC38B + box-shadow 2px 0px 7px #444444 + +body[data-theme="solarized-dark"] + .control-toggleModeButton + background-color #002B36 + .active + background-color #1EC38B + box-shadow 2px 0px 7px #222222 + +apply-theme(theme) + body[data-theme={theme}] + .control-toggleModeButton + background-color get-theme-var(theme, 'borderColor') + .active + background-color get-theme-var(theme, 'active-color') + box-shadow 2px 0px 7px #222222 + +for theme in 'dracula' + apply-theme(theme) + +for theme in $themes + apply-theme(theme) diff --git a/browser/main/Main.js b/browser/main/Main.js index e277c421..2e706893 100644 --- a/browser/main/Main.js +++ b/browser/main/Main.js @@ -16,7 +16,9 @@ import { store } from 'browser/main/store' import i18n from 'browser/lib/i18n' import { getLocales } from 'browser/lib/Languages' import applyShortcuts from 'browser/main/lib/shortcutManager' +import uiThemes from 'browser/lib/ui-themes' import { push } from 'connected-react-router' + const path = require('path') const electron = require('electron') const { remote } = electron @@ -142,9 +144,7 @@ class Main extends React.Component { componentDidMount () { const { dispatch, config } = this.props - const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai', 'dracula'] - - if (supportedThemes.indexOf(config.ui.theme) !== -1) { + if (uiThemes.some(theme => theme.name === config.ui.theme)) { document.body.setAttribute('data-theme', config.ui.theme) } else { document.body.setAttribute('data-theme', 'default') diff --git a/browser/main/NewNoteButton/NewNoteButton.styl b/browser/main/NewNoteButton/NewNoteButton.styl index 75a9061c..57b0fc03 100644 --- a/browser/main/NewNoteButton/NewNoteButton.styl +++ b/browser/main/NewNoteButton/NewNoteButton.styl @@ -72,14 +72,13 @@ body[data-theme="dark"] .control-newNoteButton-tooltip darkTooltip() -body[data-theme="solarized-dark"] - .root, .root--expanded - background-color $ui-solarized-dark-noteList-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .root, .root--expanded + background-color get-theme-var(theme, 'noteList-backgroundColor') -body[data-theme="monokai"] - .root, .root--expanded - background-color $ui-monokai-noteList-backgroundColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="dracula"] - .root, .root--expanded - background-color $ui-dracula-noteList-backgroundColor \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl index 73959c9b..2b42ae3d 100644 --- a/browser/main/NoteList/NoteList.styl +++ b/browser/main/NoteList/NoteList.styl @@ -66,99 +66,33 @@ body[data-theme="white"] .control background-color $ui-white-noteList-backgroundColor -body[data-theme="dark"] - .root - border-color $ui-dark-borderColor - background-color $ui-dark-noteList-backgroundColor +apply-theme(theme) + body[data-theme={theme}] + .root + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteList-backgroundColor') - .control - background-color $ui-dark-noteList-backgroundColor - border-color $ui-dark-borderColor + .control + background-color get-theme-var(theme, 'noteList-backgroundColor') + border-color get-theme-var(theme, 'borderColor') - .control-sortBy-select - &:hover - transition 0.2s - color $ui-dark-text-color + .control-sortBy-select + &:hover + transition 0.2s + color get-theme-var(theme, 'text-color') - .control-button - color $ui-dark-inactive-text-color - &:hover - color $ui-dark-text-color + .control-button + color get-theme-var(theme, 'inactive-text-color') + &:hover + color get-theme-var(theme, 'text-color') - .control-button--active - color $ui-dark-text-color - &:active - color $ui-dark-text-color + .control-button--active + color get-theme-var(theme, 'text-color') + &:active + color get-theme-var(theme, 'text-color') +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="solarized-dark"] - .root - border-color $ui-solarized-dark-borderColor - background-color $ui-solarized-dark-noteList-backgroundColor - - .control - background-color $ui-solarized-dark-noteList-backgroundColor - border-color $ui-solarized-dark-borderColor - - .control-sortBy-select - &:hover - transition 0.2s - color $ui-solarized-dark-text-color - - .control-button - color $ui-solarized-dark-inactive-text-color - &:hover - color $ui-solarized-dark-text-color - - .control-button--active - color $ui-solarized-dark-text-color - &:active - color $ui-solarized-dark-text-color - -body[data-theme="monokai"] - .root - border-color $ui-monokai-borderColor - background-color $ui-monokai-noteList-backgroundColor - - .control - background-color $ui-monokai-noteList-backgroundColor - border-color $ui-monokai-borderColor - - .control-sortBy-select - &:hover - transition 0.2s - color $ui-monokai-text-color - - .control-button - color $ui-monokai-inactive-text-color - &:hover - color $ui-monokai-text-color - - .control-button--active - color $ui-monokai-text-color - &:active - color $ui-monokai-text-color - -body[data-theme="dracula"] - .root - border-color $ui-dracula-borderColor - background-color $ui-dracula-noteList-backgroundColor - - .control - background-color $ui-dracula-noteList-backgroundColor - border-color $ui-dracula-borderColor - - .control-sortBy-select - &:hover - transition 0.2s - color $ui-dracula-text-color - - .control-button - color $ui-dracula-inactive-text-color - &:hover - color $ui-dracula-text-color - - .control-button--active - color $ui-dracula-text-color - &:active - color $ui-dracula-text-color \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/SideNav/PreferenceButton.styl b/browser/main/SideNav/PreferenceButton.styl index 12cb9267..c404a604 100644 --- a/browser/main/SideNav/PreferenceButton.styl +++ b/browser/main/SideNav/PreferenceButton.styl @@ -1,49 +1,47 @@ -.top-menu-preference - navButtonColor() - width 2em - background-color transparent - &:hover - color $ui-button-default--active-backgroundColor - background-color transparent - .tooltip - opacity 1 - &:active, &:active:hover - color $ui-button-default--active-backgroundColor - -body[data-theme="white"] - .top-menu-preference - navWhiteButtonColor() - background-color transparent - &:hover - color #0B99F1 - background-color transparent - &:active, &:active:hover - color #0B99F1 - background-color transparent - -body[data-theme="dark"] - .top-menu-preference - navDarkButtonColor() - background-color transparent - &:active - background-color alpha($ui-dark-button--active-backgroundColor, 20%) - background-color transparent - &:hover - background-color alpha($ui-dark-button--active-backgroundColor, 20%) - background-color transparent - - - -.tooltip - tooltip() - position absolute - pointer-events none - top 26px - left -20px - z-index 200 - padding 5px - line-height normal - border-radius 2px - opacity 0 - transition 0.1s - white-space nowrap +.top-menu-preference + navButtonColor() + width 2em + background-color transparent + &:hover + color $ui-button-default--active-backgroundColor + background-color transparent + .tooltip + opacity 1 + &:active, &:active:hover + color $ui-button-default--active-backgroundColor + +body[data-theme="white"] + .top-menu-preference + navWhiteButtonColor() + background-color transparent + &:hover + color #0B99F1 + background-color transparent + &:active, &:active:hover + color #0B99F1 + background-color transparent + +body[data-theme="dark"] + .top-menu-preference + navDarkButtonColor() + background-color transparent + &:active + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + background-color transparent + &:hover + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + background-color transparent + +.tooltip + tooltip() + position absolute + pointer-events none + top 26px + left -20px + z-index 200 + padding 5px + line-height normal + border-radius 2px + opacity 0 + transition 0.1s + white-space nowrap diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index 1533830f..b2a8a0d2 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -169,30 +169,19 @@ body[data-theme="dark"] .top border-color $ui-dark-borderColor -body[data-theme="solarized-dark"] - .root, .root--folded - background-color $ui-solarized-dark-backgroundColor - border-right 1px solid $ui-solarized-dark-borderColor +apply-theme(theme) + body[data-theme={theme}] + .root, .root--folded + background-color get-theme-var(theme, 'backgroundColor') + border-right 1px solid get-theme-var(theme, 'borderColor') - .search .search-input - background-color $ui-solarized-dark-backgroundColor - color $ui-solarized-dark-text-color - border-color $ui-solarized-dark-borderColor + .search .search-input + background-color get-theme-var(theme, 'backgroundColor') + color get-theme-var(theme, 'text-color') + border-color get-theme-var(theme, 'borderColor') -body[data-theme="monokai"] - .root, .root--folded - background-color $ui-monokai-backgroundColor - border-right 1px solid $ui-monokai-borderColor - .search .search-input - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color - border-color $ui-monokai-borderColor +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="dracula"] - .root, .root--folded - background-color $ui-dracula-backgroundColor - border-right 1px solid $ui-dracula-borderColor - .search .search-input - background-color $ui-dracula-backgroundColor - color $ui-dracula-text-color - border-color $ui-dracula-borderColor \ No newline at end of file +for theme in $themes + apply-theme(theme) diff --git a/browser/main/SideNav/StorageItem.styl b/browser/main/SideNav/StorageItem.styl index a06ecb11..375a989f 100644 --- a/browser/main/SideNav/StorageItem.styl +++ b/browser/main/SideNav/StorageItem.styl @@ -132,55 +132,57 @@ body[data-theme="white"] background-color alpha($ui-button--active-backgroundColor, 40%) color $ui-text-color -body[data-theme="dark"] - .header--active - background-color $ui-dark-button--active-backgroundColor - transition color background-color 0.15s +apply-theme(theme) + body[data-theme={theme}] + .header--active + background-color get-theme-var(theme, 'button--active-backgroundColor') + transition color background-color 0.15s + + .header--active + .header-toggleButton + color get-theme-var(theme, 'text-color') + + .header--active + .header-info + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') + &:active + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') + + .header--active + .header-addFolderButton + color get-theme-var(theme, 'text-color') - .header--active .header-toggleButton - color $ui-dark-text-color + &:hover + transition 0.2s + color get-theme-var(theme, 'text-color') + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%) + &:active, &:active:hover + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') - .header--active .header-info - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor - &:active - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%) + &:hover + transition 0.2s + color get-theme-var(theme, 'text-color') + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%) + &:active, &:active:hover + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') - .header--active .header-addFolderButton - color $ui-dark-text-color - - .header-toggleButton - &:hover - transition 0.2s - color $ui-dark-text-color - background-color alpha($ui-dark-button--active-backgroundColor, 60%) - &:active, &:active:hover - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor - - .header-info - background-color alpha($ui-dark-button--active-backgroundColor, 20%) - &:hover - transition 0.2s - color $ui-dark-text-color - background-color alpha($ui-dark-button--active-backgroundColor, 20%) - &:active, &:active:hover - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor - - .header-addFolderButton - &:hover - transition 0.2s - color $ui-dark-text-color - background-color alpha($ui-dark-button--active-backgroundColor, 60%) - &:active, &:active:hover - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor - - + &:hover + transition 0.2s + color get-theme-var(theme, 'text-color') + background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%) + &:active, &:active:hover + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') +apply-theme('dark') +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/SideNav/SwitchButton.styl b/browser/main/SideNav/SwitchButton.styl index 36099140..2184bc69 100644 --- a/browser/main/SideNav/SwitchButton.styl +++ b/browser/main/SideNav/SwitchButton.styl @@ -1,60 +1,60 @@ -.non-active-button - color $ui-inactive-text-color - font-size 16px - border 0 - background-color transparent - transition 0.2s - display flex - text-align center - margin-right 4px - position relative - &:hover - color alpha(#239F86, 60%) - .tooltip - opacity 1 - -.active-button - @extend .non-active-button - color $ui-button-default--active-backgroundColor - -.tooltip - tooltip() - position absolute - pointer-events none - top 22px - left -2px - z-index 200 - padding 5px - line-height normal - border-radius 2px - opacity 0 - transition 0.1s - white-space nowrap - -body[data-theme="white"] - .non-active-button - color $ui-inactive-text-color - &:hover - color alpha(#0B99F1, 60%) - - .tag-title - p - color $ui-text-color - - .non-active-button - &:hover - color alpha(#0B99F1, 60%) - - .active-button - @extend .non-active-button - color #0B99F1 - -body[data-theme="dark"] - .non-active-button - color alpha($ui-dark-text-color, 60%) - &:hover - color alpha(#0B99F1, 60%) - - .tag-title - p +.non-active-button + color $ui-inactive-text-color + font-size 16px + border 0 + background-color transparent + transition 0.2s + display flex + text-align center + margin-right 4px + position relative + &:hover + color alpha(#239F86, 60%) + .tooltip + opacity 1 + +.active-button + @extend .non-active-button + color $ui-button-default--active-backgroundColor + +.tooltip + tooltip() + position absolute + pointer-events none + top 22px + left -2px + z-index 200 + padding 5px + line-height normal + border-radius 2px + opacity 0 + transition 0.1s + white-space nowrap + +body[data-theme="white"] + .non-active-button + color $ui-inactive-text-color + &:hover + color alpha(#0B99F1, 60%) + + .tag-title + p + color $ui-text-color + + .non-active-button + &:hover + color alpha(#0B99F1, 60%) + + .active-button + @extend .non-active-button + color #0B99F1 + +body[data-theme="dark"] + .non-active-button + color alpha($ui-dark-text-color, 60%) + &:hover + color alpha(#0B99F1, 60%) + + .tag-title + p color alpha($ui-dark-text-color, 60%) \ No newline at end of file diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl index 23dec208..0ff3e7e5 100644 --- a/browser/main/StatusBar/StatusBar.styl +++ b/browser/main/StatusBar/StatusBar.styl @@ -78,24 +78,19 @@ body[data-theme="dark"] border-color $ui-dark-borderColor border-left 1px solid $ui-dark-borderColor -body[data-theme="monokai"] - navButtonColor() - .zoom - border-color $ui-dark-borderColor - color $ui-monokai-text-color - &:hover - transition 0.15s - color $ui-monokai-active-color - &:active - color $ui-monokai-active-color +apply-theme(theme) + body[data-theme={theme}] + .zoom + border-color $ui-dark-borderColor + color get-theme-var(theme, 'text-color') + &:hover + transition 0.15s + color get-theme-var(theme, 'active-color') + &:active + color get-theme-var(theme, 'active-color') -body[data-theme="dracula"] - navButtonColor() - .zoom - border-color $ui-dark-borderColor - color $ui-dracula-text-color - &:hover - transition 0.15s - color $ui-dracula-active-color - &:active - color $ui-dracula-active-color \ No newline at end of file +for theme in 'dracula' 'solarized-dark' + apply-theme(theme) + +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl index 61b21fc5..a0eeadf6 100644 --- a/browser/main/TopBar/TopBar.styl +++ b/browser/main/TopBar/TopBar.styl @@ -212,69 +212,31 @@ body[data-theme="dark"] .control-newPostButton-tooltip darkTooltip() +apply-theme(theme) + body[data-theme={theme}] + .root, .root--expanded + background-color get-theme-var(theme, 'noteList-backgroundColor') -body[data-theme="solarized-dark"] - .root, .root--expanded - background-color $ui-solarized-dark-noteList-backgroundColor + .control + border-color get-theme-var(theme, 'borderColor') + .control-search + background-color get-theme-var(theme, 'noteList-backgroundColor') - .control - border-color $ui-solarized-dark-borderColor - .control-search - background-color $ui-solarized-dark-noteList-backgroundColor + .control-search-icon + absolute top bottom left + line-height 32px + width 35px + color get-theme-var(theme, 'inactive-text-color') + background-color get-theme-var(theme, 'noteList-backgroundColor') - .control-search-icon - absolute top bottom left - line-height 32px - width 35px - color $ui-solarized-dark-inactive-text-color - background-color $ui-solarized-dark-noteList-backgroundColor + .control-search-input + background-color get-theme-var(theme, 'noteList-backgroundColor') + input + background-color get-theme-var(theme, 'noteList-backgroundColor') + color get-theme-var(theme, 'text-color') - .control-search-input - background-color $ui-solarized-dark-noteList-backgroundColor - input - background-color $ui-solarized-dark-noteList-backgroundColor - color $ui-solarized-dark-text-color +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="monokai"] - .root, .root--expanded - background-color $ui-monokai-noteList-backgroundColor - - .control - border-color $ui-monokai-borderColor - .control-search - background-color $ui-monokai-noteList-backgroundColor - - .control-search-icon - absolute top bottom left - line-height 32px - width 35px - color $ui-monokai-inactive-text-color - background-color $ui-monokai-noteList-backgroundColor - - .control-search-input - background-color $ui-monokai-noteList-backgroundColor - input - background-color $ui-monokai-noteList-backgroundColor - color $ui-monokai-text-color - -body[data-theme="dracula"] - .root, .root--expanded - background-color $ui-dracula-noteList-backgroundColor - - .control - border-color $ui-dracula-borderColor - .control-search - background-color $ui-dracula-noteList-backgroundColor - - .control-search-icon - absolute top bottom left - line-height 32px - width 35px - color $ui-dracula-inactive-text-color - background-color $ui-dracula-noteList-backgroundColor - - .control-search-input - background-color $ui-dracula-noteList-backgroundColor - input - background-color $ui-dracula-noteList-backgroundColor - color $ui-dracula-text-color \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/global.styl b/browser/main/global.styl index d1205b37..3f513c78 100644 --- a/browser/main/global.styl +++ b/browser/main/global.styl @@ -96,16 +96,6 @@ modalBackColor = white z-index modalZIndex + 1 -body[data-theme="dark"] - background-color $ui-dark-backgroundColor - ::-webkit-scrollbar-thumb - background-color rgba(0, 0, 0, 0.3) - .ModalBase - .modalBack - background-color $ui-dark-backgroundColor - .sortableItemHelper - color: $ui-dark-text-color - .CodeMirror font-family inherit !important line-height 1.4em @@ -148,35 +138,22 @@ body[data-theme="dark"] .sortableItemHelper z-index modalZIndex + 5 -body[data-theme="solarized-dark"] - background-color $ui-solarized-dark-backgroundColor - ::-webkit-scrollbar-thumb - background-color rgba(0, 0, 0, 0.3) - .ModalBase - .modalBack - background-color $ui-solarized-dark-backgroundColor - .sortableItemHelper - color: $ui-solarized-dark-text-color +apply-theme(theme) + body[data-theme={theme}] + background-color get-theme-var(theme, 'backgroundColor') + ::-webkit-scrollbar-thumb + background-color rgba(0, 0, 0, 0.3) + .ModalBase + .modalBack + background-color get-theme-var(theme, 'backgroundColor') + .sortableItemHelper + color get-theme-var(theme, 'text-color') -body[data-theme="monokai"] - background-color $ui-monokai-backgroundColor - ::-webkit-scrollbar-thumb - background-color rgba(0, 0, 0, 0.3) - .ModalBase - .modalBack - background-color $ui-monokai-backgroundColor - .sortableItemHelper - color: $ui-monokai-text-color +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="dracula"] - background-color $ui-dracula-backgroundColor - ::-webkit-scrollbar-thumb - background-color rgba(0, 0, 0, 0.3) - .ModalBase - .modalBack - background-color $ui-dracula-backgroundColor - .sortableItemHelper - color: $ui-dracula-text-color +for theme in $themes + apply-theme(theme) body[data-theme="default"] .SideNav ::-webkit-scrollbar-thumb diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js index f73895df..26fda02b 100644 --- a/browser/main/lib/ConfigManager.js +++ b/browser/main/lib/ConfigManager.js @@ -2,6 +2,7 @@ import _ from 'lodash' import RcParser from 'browser/lib/RcParser' import i18n from 'browser/lib/i18n' import ee from 'browser/main/lib/eventEmitter' +import uiThemes from 'browser/lib/ui-themes' const OSX = global.process.platform === 'darwin' const win = global.process.platform === 'win32' @@ -180,16 +181,8 @@ function set (updates) { if (!validate(newConfig)) throw new Error('INVALID CONFIG') _save(newConfig) - if (newConfig.ui.theme === 'dark') { - document.body.setAttribute('data-theme', 'dark') - } else if (newConfig.ui.theme === 'white') { - document.body.setAttribute('data-theme', 'white') - } else if (newConfig.ui.theme === 'solarized-dark') { - document.body.setAttribute('data-theme', 'solarized-dark') - } else if (newConfig.ui.theme === 'monokai') { - document.body.setAttribute('data-theme', 'monokai') - } else if (newConfig.ui.theme === 'dracula') { - document.body.setAttribute('data-theme', 'dracula') + if (uiThemes.some(theme => theme.name === newConfig.ui.theme)) { + document.body.setAttribute('data-theme', newConfig.ui.theme) } else { document.body.setAttribute('data-theme', 'default') } diff --git a/browser/main/modals/CreateFolderModal.styl b/browser/main/modals/CreateFolderModal.styl index 93848683..95d6249a 100644 --- a/browser/main/modals/CreateFolderModal.styl +++ b/browser/main/modals/CreateFolderModal.styl @@ -51,106 +51,40 @@ font-size 14px colorPrimaryButton() -body[data-theme="dark"] - .root - modalDark() - width 500px - height 270px - overflow hidden - position relative +apply-theme(theme) + body[data-theme={theme}] + .root + width 500px + height 270px + overflow hidden + position relative + position relative + z-index $modal-z-index + width 100% + background-color get-theme-var(theme, 'backgroundColor') + overflow hidden + border-radius $modal-border-radius - .header - background-color transparent - border-color $ui-dark-borderColor - color $ui-dark-text-color + .header + background-color transparent + border-color $ui-dark-borderColor + color get-theme-var(theme, 'text-color') - .control-folder-label - color $ui-dark-text-color + .control-folder-label + color get-theme-var(theme, 'text-color') - .control-folder-input - border 1px solid $ui-input--create-folder-modal - color white + .control-folder-input + border 1px solid $ui-input--create-folder-modal + color white - .description - color $ui-inactive-text-color + .description + color $ui-inactive-text-color - .control-confirmButton - colorDarkPrimaryButton() + .control-confirmButton + colorThemedPrimaryButton(theme) -body[data-theme="solarized-dark"] - .root - modalSolarizedDark() - width 500px - height 270px - overflow hidden - position relative +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) - .header - background-color transparent - border-color $ui-dark-borderColor - color $ui-solarized-dark-text-color - - .control-folder-label - color $ui-solarized-dark-text-color - - .control-folder-input - border 1px solid $ui-input--create-folder-modal - color white - - .description - color $ui-inactive-text-color - - .control-confirmButton - colorSolarizedDarkPrimaryButton() - -body[data-theme="monokai"] - .root - modalMonokai() - width 500px - height 270px - overflow hidden - position relative - - .header - background-color transparent - border-color $ui-dark-borderColor - color $ui-monokai-text-color - - .control-folder-label - color $ui-monokai-text-color - - .control-folder-input - border 1px solid $ui-input--create-folder-modal - color white - - .description - color $ui-inactive-text-color - - .control-confirmButton - colorMonokaiPrimaryButton() - -body[data-theme="dracula"] - .root - modalDracula() - width 500px - height 270px - overflow hidden - position relative - - .header - background-color transparent - border-color $ui-dark-borderColor - color $ui-dracula-text-color - - .control-folder-label - color $ui-dracula-text-color - - .control-folder-input - border 1px solid $ui-input--create-folder-modal - color white - - .description - color $ui-inactive-text-color - - .control-confirmButton - colorDraculaPrimaryButton() \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/CreateMarkdownFromURLModal.styl b/browser/main/modals/CreateMarkdownFromURLModal.styl index 5e59e465..8aca1505 100644 --- a/browser/main/modals/CreateMarkdownFromURLModal.styl +++ b/browser/main/modals/CreateMarkdownFromURLModal.styl @@ -51,110 +51,39 @@ font-size 14px colorPrimaryButton() -body[data-theme="dark"] - .root - modalDark() - width 500px - height 270px - overflow hidden - position relative - - .header - background-color transparent - border-color $ui-dark-borderColor - color $ui-dark-text-color - - .control-folder-label - color $ui-dark-text-color - - .control-folder-input - border 1px solid $ui-input--create-folder-modal - color white - - .description - color $ui-inactive-text-color - - .control-confirmButton - colorDarkPrimaryButton() - -body[data-theme="solarized-dark"] - .root - modalSolarizedDark() - width 500px - height 270px - overflow hidden - position relative - - .header - background-color transparent - border-color $ui-dark-borderColor - color $ui-solarized-dark-text-color - - .control-folder-label - color $ui-solarized-dark-text-color - - .control-folder-input - border 1px solid $ui-input--create-folder-modal - color white - - .description - color $ui-inactive-text-color - - .control-confirmButton - colorSolarizedDarkPrimaryButton() - .error text-align center color #F44336 -body[data-theme="monokai"] - .root - modalMonokai() - width 500px - height 270px - overflow hidden - position relative +apply-theme(theme) + body[data-theme={theme}] + .root + background-color transparent + width 500px + height 270px + overflow hidden + position relative - .header - background-color transparent - border-color $ui-dark-borderColor - color $ui-monokai-text-color + .header + background-color transparent + border-color get-theme-var(theme, 'borderColor') + color get-theme-var(theme, 'text-color') - .control-folder-label - color $ui-monokai-text-color + .control-folder-label + color get-theme-var(theme, 'text-color') - .control-folder-input - border 1px solid $ui-input--create-folder-modal - color white + .control-folder-input + border 1px solid $ui-input--create-folder-modal + color white - .description - color $ui-inactive-text-color + .description + color $ui-inactive-text-color - .control-confirmButton - colorMonokaiPrimaryButton() + .control-confirmButton + colorThemedPrimaryButton(theme) -body[data-theme="dracula"] - .root - modalDracula() - width 500px - height 270px - overflow hidden - position relative +for theme in 'dark' 'dracula' 'solarized-dark' + apply-theme(theme) - .header - background-color transparent - border-color $ui-dracula-borderColor - color $ui-dracula-text-color - - .control-folder-label - color $ui-dracula-text-color - - .control-folder-input - border 1px solid $ui-input--create-folder-modal - color white - - .description - color $ui-inactive-text-color - - .control-confirmButton - colorDraculaPrimaryButton() +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/NewNoteModal.styl b/browser/main/modals/NewNoteModal.styl index ff0052bd..a9be5a22 100644 --- a/browser/main/modals/NewNoteModal.styl +++ b/browser/main/modals/NewNoteModal.styl @@ -54,70 +54,26 @@ margin-bottom 25px cursor pointer -body[data-theme="dark"] - .root - modalDark() +apply-theme(theme) + body[data-theme={theme}] + .root + background-color transparent - .header - color $ui-dark-text-color + .header + color get-theme-var(theme, 'text-color') - .control-button - border-color $ui-dark-borderColor - color $ui-dark-text-color - background-color transparent - &:focus - colorDarkPrimaryButton() + .control-button + border-color get-theme-var(theme, 'borderColor') + color get-theme-var(theme, 'text-color') + background-color transparent + &:focus + colorThemedPrimaryButton(theme) - .description, .from-url - color $ui-inactive-text-color + .description + color get-theme-var(theme, 'text-color') -body[data-theme="solarized-dark"] - .root - background-color transparent +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) - .header - color $ui-solarized-dark-text-color - - .control-button - border-color $ui-solarized-dark-borderColor - color $ui-solarized-dark-text-color - background-color transparent - &:focus - colorDarkPrimaryButton() - - .description, .from-url - color $ui-solarized-dark-text-color - -body[data-theme="monokai"] - .root - background-color transparent - - .header - color $ui-monokai-text-color - - .control-button - border-color $ui-monokai-borderColor - color $ui-monokai-text-color - background-color transparent - &:focus - colorDarkPrimaryButton() - - .description, .from-url - color $ui-monokai-text-color - -body[data-theme="dracula"] - .root - background-color transparent - - .header - color $ui-dracula-text-color - - .control-button - border-color $ui-dracula-borderColor - color $ui-dracula-text-color - background-color transparent - &:focus - colorDraculaPrimaryButton() - - .description - color $ui-dracula-text-color \ No newline at end of file +for theme in $themes + apply-theme(theme) diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl index 0e22833d..dbfb393e 100644 --- a/browser/main/modals/PreferencesModal/ConfigTab.styl +++ b/browser/main/modals/PreferencesModal/ConfigTab.styl @@ -2,7 +2,6 @@ .root padding 15px - color $ui-text-color margin-bottom 30px .group @@ -14,7 +13,6 @@ .group-header2 font-size 20px - color $ui-text-color margin-bottom 15px margin-top 30px @@ -136,20 +134,18 @@ colorDarkControl() background-color $ui-dark-backgroundColor color $ui-dark-text-color -colorSolarizedDarkControl() +colorThemedControl(theme) border none - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') -colorMonokaiControl() - border none - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color +body[data-theme="default"], +body[data-theme="white"] + .root + color $ui-text-color -colorDraculaControl() - border none - background-color $ui-dracula-button-backgroundColor - color $ui-dracula-text-color + .group-header2 + color $ui-text-color body[data-theme="dark"] .root @@ -180,90 +176,36 @@ body[data-theme="dark"] select, .group-section-control-input colorDarkControl() +apply-theme(theme) + body[data-theme={theme}] + .root + color get-theme-var(theme, 'text-color') -body[data-theme="solarized-dark"] - .root - color $ui-solarized-dark-text-color + .group-header + color get-theme-var(theme, 'text-color') + border-color get-theme-var(theme, 'borderColor') - .group-header - .group-header--sub - color $ui-solarized-dark-text-color - border-color $ui-solarized-dark-borderColor + .group-header2 + color get-theme-var(theme, 'text-color') - .group-header2 - .group-header2--sub - color $ui-solarized-dark-text-color + .group-section-control-input + border-color get-theme-var(theme, 'borderColor') - .group-section-control-input - border-color $ui-solarized-dark-borderColor + .group-control + border-color get-theme-var(theme, 'borderColor') + .group-control-leftButton + colorDarkDefaultButton() + border-color get-theme-var(theme, 'borderColor') + .group-control-rightButton + colorThemedPrimaryButton(theme) + .group-hint + colorThemedControl(theme) + .group-section-control + select, .group-section-control-input + colorThemedControl(theme) - .group-control - border-color $ui-solarized-dark-borderColor - .group-control-leftButton - colorDarkDefaultButton() - border-color $ui-solarized-dark-borderColor - .group-control-rightButton - colorSolarizedDarkPrimaryButton() - .group-hint - colorSolarizedDarkControl() - .group-section-control - select, .group-section-control-input - colorSolarizedDarkControl() +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="monokai"] - .root - color $ui-monokai-text-color - - .group-header - .group-header--sub - color $ui-monokai-text-color - border-color $ui-monokai-borderColor - - .group-header2 - .group-header2--sub - color $ui-monokai-text-color - - .group-section-control-input - border-color $ui-monokai-borderColor - - .group-control - border-color $ui-monokai-borderColor - .group-control-leftButton - colorDarkDefaultButton() - border-color $ui-monokai-borderColor - .group-control-rightButton - colorMonokaiPrimaryButton() - .group-hint - colorMonokaiControl() - .group-section-control - select, .group-section-control-input - colorMonokaiControl() - -body[data-theme="dracula"] - .root - color $ui-dracula-text-color - - .group-header - .group-header--sub - color $ui-dracula-text-color - border-color $ui-dracula-borderColor - - .group-header2 - .group-header2--sub - color $ui-dracula-text-color - - .group-section-control-input - border-color $ui-dracula-borderColor - - .group-control - border-color $ui-dracula-borderColor - .group-control-leftButton - colorDarkDefaultButton() - border-color $ui-dracula-borderColor - .group-control-rightButton - colorDraculaPrimaryButton() - .group-hint - colorDraculaControl() - .group-section-control - select, .group-section-control-input - colorDraculaControl() \ No newline at end of file +for theme in $themes + apply-theme(theme) diff --git a/browser/main/modals/PreferencesModal/Crowdfunding.styl b/browser/main/modals/PreferencesModal/Crowdfunding.styl index d1d6fc9f..4725aa23 100644 --- a/browser/main/modals/PreferencesModal/Crowdfunding.styl +++ b/browser/main/modals/PreferencesModal/Crowdfunding.styl @@ -24,20 +24,15 @@ body[data-theme="dark"] p color $ui-dark-text-color -body[data-theme="solarized-dark"] - .root - color $ui-solarized-dark-text-color - p - color $ui-solarized-dark-text-color +apply-theme(theme) + body[data-theme={theme}] + .root + color get-theme-var(theme, 'text-color') + p + color get-theme-var(theme, 'text-color') -body[data-theme="monokai"] - .root - color $ui-monokai-text-color - p - color $ui-monokai-text-color +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="dracula"] - .root - color $ui-dracula-text-color - p - color $ui-dracula-text-color \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/FolderItem.styl b/browser/main/modals/PreferencesModal/FolderItem.styl index 618e9bc4..32a83d63 100644 --- a/browser/main/modals/PreferencesModal/FolderItem.styl +++ b/browser/main/modals/PreferencesModal/FolderItem.styl @@ -107,73 +107,32 @@ body[data-theme="dark"] .folderItem-right-dangerButton colorDarkDangerButton() +apply-theme(theme) + body[data-theme={theme}] + .folderItem + &:hover + background-color get-theme-var(theme, 'button-backgroundColor') + .folderItem-left-danger + color $danger-color -body[data-theme="solarized-dark"] - .folderItem - &:hover - background-color $ui-solarized-dark-button-backgroundColor + .folderItem-left-key + color $ui-dark-inactive-text-color - .folderItem-left-danger - color $danger-color + .folderItem-left-colorButton + colorThemedPrimaryButton(theme) - .folderItem-left-key - color $ui-dark-inactive-text-color + .folderItem-right-button + colorThemedPrimaryButton(theme) - .folderItem-left-colorButton - colorSolarizedDarkPrimaryButton() + .folderItem-right-confirmButton + colorThemedPrimaryButton(theme) - .folderItem-right-button - colorSolarizedDarkPrimaryButton() + .folderItem-right-dangerButton + colorThemedPrimaryButton(theme) - .folderItem-right-confirmButton - colorSolarizedDarkPrimaryButton() +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .folderItem-right-dangerButton - colorSolarizedDarkPrimaryButton() - -body[data-theme="monokai"] - .folderItem - &:hover - background-color $ui-monokai-button-backgroundColor - - .folderItem-left-danger - color $danger-color - - .folderItem-left-key - color $ui-dark-inactive-text-color - - .folderItem-left-colorButton - colorMonokaiPrimaryButton() - - .folderItem-right-button - colorMonokaiPrimaryButton() - - .folderItem-right-confirmButton - colorMonokaiPrimaryButton() - - .folderItem-right-dangerButton - colorMonokaiPrimaryButton() - -body[data-theme="dracula"] - .folderItem - &:hover - background-color $ui-dracula-button-backgroundColor - - .folderItem-left-danger - color $danger-color - - .folderItem-left-key - color $ui-dark-inactive-text-color - - .folderItem-left-colorButton - colorDraculaPrimaryButton() - - .folderItem-right-button - colorDraculaPrimaryButton() - - .folderItem-right-confirmButton - colorDraculaPrimaryButton() - - .folderItem-right-dangerButton - colorDraculaPrimaryButton() \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/InfoTab.styl b/browser/main/modals/PreferencesModal/InfoTab.styl index c541c91c..4701d809 100644 --- a/browser/main/modals/PreferencesModal/InfoTab.styl +++ b/browser/main/modals/PreferencesModal/InfoTab.styl @@ -59,29 +59,19 @@ body[data-theme="dark"] .appId color $ui-dark-text-color -body[data-theme="solarized-dark"] - .root - color $ui-solarized-dark-text-color - .appId - color $ui-solarized-dark-text-color -.list - a - color $ui-solarized-dark-active-color -body[data-theme="monokai"] - .root - color $ui-monokai-text-color - .appId - color $ui-monokai-text-color -.list - a - color $ui-monokai-active-color +apply-theme(theme) + body[data-theme={theme}] + .root + color get-theme-var(theme, 'text-color') + .appId + color get-theme-var(theme, 'text-color') + .list + a + color get-theme-var(theme, 'active-color') -body[data-theme="dracula"] - .root - color $ui-dracula-text-color - .appId - color $ui-dracula-text-color -.list - a - color $ui-dracula-active-color \ No newline at end of file +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) + +for theme in $themes + apply-theme(theme) diff --git a/browser/main/modals/PreferencesModal/PreferencesModal.styl b/browser/main/modals/PreferencesModal/PreferencesModal.styl index 7004259b..2e3b4040 100644 --- a/browser/main/modals/PreferencesModal/PreferencesModal.styl +++ b/browser/main/modals/PreferencesModal/PreferencesModal.styl @@ -64,102 +64,31 @@ top-bar--height = 50px margin-top 10px overflow-y auto -body[data-theme="dark"] - .root - modalDark() +apply-theme(theme) + body[data-theme={theme}] + .root + background-color transparent + .top-bar + background-color transparent + border-color get-theme-var(theme, 'borderColor') + p + color get-theme-var(theme, 'text-color') + .nav + background-color transparent + border-color get-theme-var(theme, 'borderColor') + .nav-button + background-color transparent + color get-theme-var(theme, 'text-color') + &:hover + color get-theme-var(theme, 'text-color') - .top-bar - background-color transparent - border-color #4A4D52 - p - color $tab--dark-text-color + .nav-button--active + @extend .nav-button + color get-theme-var(theme, 'button--active-color') + background-color get-theme-var(theme, 'button--active-backgroundColor') - .nav - background-color transparent - border-color $ui-dark-borderColor +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) - .nav-button - background-color transparent - color $tab--dark-text-color - &:hover - color $ui-dark-text-color - - .nav-button--active - @extend .nav-button - color white - background-color $dark-primary-button-background--active - &:hover - color white - - -body[data-theme="solarized-dark"] - .root - background-color transparent - .top-bar - background-color transparent - border-color $ui-solarized-dark-borderColor - p - color $ui-solarized-dark-text-color - .nav - background-color transparent - border-color $ui-solarized-dark-borderColor - .nav-button - background-color transparent - color $ui-solarized-dark-text-color - &:hover - color $ui-solarized-dark-text-color - - .nav-button--active - @extend .nav-button - color $ui-solarized-dark-button--active-color - background-color $ui-solarized-dark-button--active-backgroundColor - &:hover - color white - -body[data-theme="monokai"] - .root - background-color transparent - .top-bar - background-color transparent - border-color $ui-monokai-borderColor - p - color $ui-monokai-text-color - .nav - background-color transparent - border-color $ui-monokai-borderColor - .nav-button - background-color transparent - color $ui-monokai-text-color - &:hover - color $ui-monokai-text-color - - .nav-button--active - @extend .nav-button - color $ui-monokai-button--active-color - background-color $ui-monokai-button--active-backgroundColor - &:hover - color white - -body[data-theme="dracula"] - .root - background-color transparent - .top-bar - background-color transparent - border-color $ui-dracula-borderColor - p - color $ui-dracula-text-color - .nav - background-color transparent - border-color $ui-dracula-borderColor - .nav-button - background-color transparent - color $ui-dracula-text-color - &:hover - color $ui-dracula-text-color - - .nav-button--active - @extend .nav-button - color $ui-dracula-button--active-color - background-color $ui-dracula-button--active-backgroundColor - &:hover - color #f8f8f2 \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/SnippetTab.styl b/browser/main/modals/PreferencesModal/SnippetTab.styl index 296f8167..83b0a296 100644 --- a/browser/main/modals/PreferencesModal/SnippetTab.styl +++ b/browser/main/modals/PreferencesModal/SnippetTab.styl @@ -140,66 +140,25 @@ body[data-theme="default"], body[data-theme="white"] .snippet-item-selected background darken($ui-backgroundColor, 5) -body[data-theme="dark"] - .snippets - background $ui-dark-backgroundColor - .snippet-item - color white - &::after - background $ui-dark-borderColor - &:hover - background darken($ui-dark-backgroundColor, 5) - .snippet-item-selected - background darken($ui-dark-backgroundColor, 5) - .snippet-detail - color white - .group-control-button - colorDarkPrimaryButton() +apply-theme(theme) + body[data-theme={theme}] + .snippets + background get-theme-var(theme, 'backgroundColor') + .snippet-item + color get-theme-var(theme, 'text-color') + &::after + background get-theme-var(theme, 'borderColor') + &:hover + background darken(get-theme-var(theme, 'backgroundColor'), 5) + .snippet-item-selected + background darken(get-theme-var(theme, 'backgroundColor'), 5) + .snippet-detail + color get-theme-var(theme, 'text-color') + .group-control-button + colorThemedPrimaryButton(theme) -body[data-theme="solarized-dark"] - .snippets - background $ui-solarized-dark-backgroundColor - .snippet-item - color white - &::after - background $ui-solarized-dark-borderColor - &:hover - background darken($ui-solarized-dark-backgroundColor, 5) - .snippet-item-selected - background darken($ui-solarized-dark-backgroundColor, 5) - .snippet-detail - color white - .group-control-button - colorSolarizedDarkPrimaryButton() +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) -body[data-theme="monokai"] - .snippets - background $ui-monokai-backgroundColor - .snippet-item - color White - &::after - background $ui-monokai-borderColor - &:hover - background darken($ui-monokai-backgroundColor, 5) - .snippet-item-selected - background darken($ui-monokai-backgroundColor, 5) - .snippet-detail - color white - .group-control-button - colorMonokaiPrimaryButton() - -body[data-theme="dracula"] - .snippets - background $ui-dracula-backgroundColor - .snippet-item - color #f8f8f2 - &::after - background $ui-dracula-borderColor - &:hover - background darken($ui-dracula-backgroundColor, 5) - .snippet-item-selected - background darken($ui-dracula-backgroundColor, 5) - .snippet-detail - color #f8f8f2 - .group-control-button - colorDraculaPrimaryButton() \ No newline at end of file +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/StorageItem.styl b/browser/main/modals/PreferencesModal/StorageItem.styl index 3e588a17..03fa65eb 100644 --- a/browser/main/modals/PreferencesModal/StorageItem.styl +++ b/browser/main/modals/PreferencesModal/StorageItem.styl @@ -103,10 +103,17 @@ body[data-theme="solarized-dark"] background-color $ui-solarized-dark-button-backgroundColor color $ui-solarized-dark-text-color -body[data-theme="dracula"] - .header - border-color $ui-dracula-borderColor +apply-theme(theme) + body[data-theme={theme}] + .header + border-color get-theme-var(theme, 'borderColor') - .header-control-button - colorDraculaDefaultButton() - border-color $ui-dracula-borderColor \ No newline at end of file + .header-control-button + colorThemedPrimaryButton(theme) + border-color get-theme-var(theme, 'borderColor') + +for theme in 'dracula' + apply-theme(theme) + +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/main/modals/PreferencesModal/StoragesTab.styl b/browser/main/modals/PreferencesModal/StoragesTab.styl index fbfa89e6..285e9c60 100644 --- a/browser/main/modals/PreferencesModal/StoragesTab.styl +++ b/browser/main/modals/PreferencesModal/StoragesTab.styl @@ -168,122 +168,49 @@ body[data-theme="dark"] .list-attachement-clear-button colorDarkPrimaryButton() -body[data-theme="solarized-dark"] - .root - color $ui-solarized-dark-text-color +apply-theme(theme) + body[data-theme={theme}] + .root + color get-theme-var(theme, 'text-color') - .folderList-item - border-bottom $ui-solarized-dark-borderColor + .folderList-item + border-bottom get-theme-var(theme, 'borderColor') - .folderList-empty - color $ui-solarized-dark-text-color + .folderList-empty + color get-theme-var(theme, 'text-color') - .list-empty - color $ui-solarized-dark-text-color - .list-control-addStorageButton - border-color $ui-solarized-dark-button-backgroundColor - background-color $ui-solarized-dark-button-backgroundColor - color $ui-solarized-dark-text-color + .list-empty + color get-theme-var(theme, 'text-color') + .list-control-addStorageButton + border-color get-theme-var(theme, 'button-backgroundColor') + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') - .addStorage-header - color $ui-solarized-dark-text-color - border-color $ui-solarized-dark-borderColor + .addStorage-header + color get-theme-var(theme, 'text-color') + border-color get-theme-var(theme, 'borderColor') - .addStorage-body-section-name-input - border-color $$ui-solarized-dark-borderColor + .addStorage-body-section-name-input + border-color $get-theme-var(theme, 'borderColor') - .addStorage-body-section-type-description - color $ui-solarized-dark-text-color + .addStorage-body-section-type-description + color get-theme-var(theme, 'text-color') - .addStorage-body-section-path-button - colorPrimaryButton() - .addStorage-body-control - border-color $ui-solarized-dark-borderColor + .addStorage-body-section-path-button + colorPrimaryButton() + .addStorage-body-control + border-color get-theme-var(theme, 'borderColor') - .addStorage-body-control-createButton - colorDarkPrimaryButton() - .addStorage-body-control-cancelButton - colorDarkDefaultButton() - border-color $ui-solarized-dark-borderColor - .list-attachement-clear-button - colorSolarizedDarkPrimaryButton() + .addStorage-body-control-createButton + colorDarkPrimaryButton() + .addStorage-body-control-cancelButton + colorDarkDefaultButton() + border-color get-theme-var(theme, 'borderColor') + .list-attachement-clear-button + colorThemedPrimaryButton(theme) -body[data-theme="monokai"] - .root - color $ui-monokai-text-color +for theme in 'solarized-dark' 'dracula' + apply-theme(theme) - .folderList-item - border-bottom $ui-monokai-borderColor - - .folderList-empty - color $ui-monokai-text-color - - .list-empty - color $ui-monokai-text-color - .list-control-addStorageButton - border-color $ui-monokai-button-backgroundColor - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color - - .addStorage-header - color $ui-monokai-text-color - border-color $ui-monokai-borderColor - - .addStorage-body-section-name-input - border-color $$ui-monokai-borderColor - - .addStorage-body-section-type-description - color $ui-monokai-text-color - - .addStorage-body-section-path-button - colorPrimaryButton() - .addStorage-body-control - border-color $ui-monokai-borderColor - - .addStorage-body-control-createButton - colorDarkPrimaryButton() - .addStorage-body-control-cancelButton - colorDarkDefaultButton() - border-color $ui-monokai-borderColor - .list-attachement-clear-button - colorMonokaiPrimaryButton() - -body[data-theme="dracula"] - .root - color $ui-dracula-text-color - - .folderList-item - border-bottom $ui-dracula-borderColor - - .folderList-empty - color $ui-dracula-text-color - - .list-empty - color $ui-dracula-text-color - .list-control-addStorageButton - border-color $ui-dracula-button-backgroundColor - background-color $ui-dracula-button-backgroundColor - color $ui-dracula-text-color - - .addStorage-header - color $ui-dracula-text-color - border-color $ui-dracula-borderColor - - .addStorage-body-section-name-input - border-color $$ui-dracula-borderColor - - .addStorage-body-section-type-description - color $ui-dracula-text-color - - .addStorage-body-section-path-button - colorPrimaryButton() - .addStorage-body-control - border-color $ui-dracula-borderColor - - .addStorage-body-control-createButton - colorDarkPrimaryButton() - .addStorage-body-control-cancelButton - colorDarkDefaultButton() - border-color $ui-dracula-borderColor - .list-attachement-clear-button - colorDraculaPrimaryButton() \ No newline at end of file +for theme in $themes + apply-theme(theme) diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index 329dbfa4..c54ed098 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -12,6 +12,7 @@ import _ from 'lodash' import i18n from 'browser/lib/i18n' import { getLanguages } from 'browser/lib/Languages' import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily' +import uiThemes from 'browser/lib/ui-themes' const OSX = global.process.platform === 'darwin' @@ -214,12 +215,20 @@ class UiTab extends React.Component { onChange={(e) => this.handleUIChange(e)} ref='uiTheme' > - - - - - - + + { + uiThemes.filter(theme => !theme.isDark).sort((a, b) => a.label.localeCompare(b.label)).map(theme => { + return () + }) + } + + + { + uiThemes.filter(theme => theme.isDark).sort((a, b) => a.label.localeCompare(b.label)).map(theme => { + return () + }) + } + diff --git a/browser/main/modals/RenameFolderModal.styl b/browser/main/modals/RenameFolderModal.styl index c9909d00..435aa6a0 100644 --- a/browser/main/modals/RenameFolderModal.styl +++ b/browser/main/modals/RenameFolderModal.styl @@ -43,23 +43,31 @@ border-radius 2px padding 0 25px margin 0 auto + font-size 14px colorPrimaryButton() -body[data-theme="dark"] - .root - modalDark() +apply-theme(theme) + body[data-theme={theme}] + .root + background-color transparent - .header - background-color $ui-dark-button--hover-backgroundColor - border-color $ui-dark-borderColor - color $ui-dark-text-color + .header + background-color get-theme-var(theme, 'button--hover-backgroundColor') + border-color get-theme-var(theme, 'borderColor') + color get-theme-var(theme, 'text-color') - .description - color $ui-inactive-text-color + .description + color $ui-inactive-text-color - .control-input - border-color $ui-dark-borderColor - color $ui-dark-text-color + .control-input + border-color get-theme-var(theme, 'borderColor') + color get-theme-var(theme, 'text-color') - .control-confirmButton - colorDarkPrimaryButton() + .control-confirmButton + colorThemedPrimaryButton(theme) + +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) + +for theme in $themes + apply-theme(theme) diff --git a/browser/styles/Detail/TagSelect.styl b/browser/styles/Detail/TagSelect.styl index 8900422c..5fc23310 100644 --- a/browser/styles/Detail/TagSelect.styl +++ b/browser/styles/Detail/TagSelect.styl @@ -51,78 +51,34 @@ background-color alpha($ui-button--active-backgroundColor, 40%) color $ui-text-color -body[data-theme="dark"] - .TagSelect - .react-autosuggest__input - color $ui-dark-text-color - - ul - border-color $ui-dark-borderColor - background-color $ui-dark-noteList-backgroundColor - color $ui-dark-text-color - - &:before - background-color $ui-dark-noteList-backgroundColor - - li[aria-selected="true"] - background-color $ui-dark-button--active-backgroundColor - color $ui-dark-text-color - -body[data-theme="monokai"] - .TagSelect - .react-autosuggest__input - color $ui-monokai-text-color - - ul - border-color $ui-monokai-borderColor - background-color $ui-monokai-noteList-backgroundColor - color $ui-monokai-text-color - - &:before - background-color $ui-dark-noteList-backgroundColor - - li[aria-selected="true"] - background-color $ui-monokai-button-backgroundColor - color $ui-monokai-text-color - -body[data-theme="dracula"] - .TagSelect - .react-autosuggest__input - color $ui-dracula-text-color - - ul - border-color $ui-dracula-borderColor - background-color $ui-dracula-noteList-backgroundColor - color $ui-dracula-text-color - - &:before - background-color $ui-dark-noteList-backgroundColor - - li[aria-selected="true"] - background-color $ui-dracula-button-backgroundColor - color $ui-dracula-text-color - -body[data-theme="solarized-dark"] - .TagSelect - .react-autosuggest__input - color $ui-solarized-dark-text-color - - ul - border-color $ui-solarized-dark-borderColor - background-color $ui-solarized-dark-noteList-backgroundColor - color $ui-solarized-dark-text-color - - &:before - background-color $ui-solarized-dark-noteList-backgroundColor - - li[aria-selected="true"] - background-color $ui-dark-button--active-backgroundColor - color $ui-solarized-dark-text-color - body[data-theme="white"] .TagSelect ul background-color $ui-white-noteList-backgroundColor li[aria-selected="true"] - background-color $ui-button--active-backgroundColor \ No newline at end of file + background-color $ui-button--active-backgroundColor + +apply-theme(theme) + body[data-theme={theme}] + .TagSelect + .react-autosuggest__input + color get-theme-var(theme, 'text-color') + + ul + border-color get-theme-var(theme, 'borderColor') + background-color get-theme-var(theme, 'noteList-backgroundColor') + color get-theme-var(theme, 'text-color') + + &:before + background-color $ui-dark-noteList-backgroundColor + + li[aria-selected="true"] + background-color get-theme-var(theme, 'button-backgroundColor') + color get-theme-var(theme, 'text-color') + +for theme in 'dark' 'solarized-dark' 'dracula' + apply-theme(theme) + +for theme in $themes + apply-theme(theme) \ No newline at end of file diff --git a/browser/styles/index.styl b/browser/styles/index.styl index 53456da9..3fc65065 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -107,36 +107,18 @@ colorDarkPrimaryButton() &:active:hover background-color $dark-primary-button-background--active - -colorSolarizedDarkPrimaryButton() - color $ui-solarized-dark-text-color - background-color $ui-solarized-dark-button-backgroundColor - border none - &:hover - background-color $dark-primary-button-background--hover - &:active - &:active:hover - background-color $dark-primary-button-background--active - -colorMonokaiPrimaryButton() - color $ui-monokai-text-color - background-color $ui-monokai-button-backgroundColor - border none - &:hover - background-color $dark-primary-button-background--hover - &:active - &:active:hover - background-color $dark-primary-button-background--active - -colorDraculaPrimaryButton() - color $ui-dracula-text-color - background-color $ui-dracula-button-backgroundColor - border none - &:hover - background-color $ui-dracula-button--active-backgroundColor - &:active - &:active:hover - background-color $ui-dracula-button--active-backgroundColor +colorThemedPrimaryButton(theme) + if theme == 'dark' + colorDarkPrimaryButton() + else + color get-theme-var(theme, 'text-color') + background-color get-theme-var(theme, 'button-backgroundColor') + border none + &:hover + background-color get-theme-var(theme, 'button--hover-backgroundColor') + &:active + &:active:hover + background-color get-theme-var(theme, 'button--active-backgroundColor') // Danger button(Brand color) @@ -257,12 +239,14 @@ $ui-dark-borderColor = #444444 $ui-dark-backgroundColor = #2C3033 $ui-dark-noteList-backgroundColor = #2C3033 $ui-dark-noteDetail-backgroundColor = #2C3033 +$ui-dark-tagList-backgroundColor = #FFFFFF $ui-dark-tag-backgroundColor = #3A404C $dark-background-color = lighten($ui-dark-backgroundColor, 10%) $ui-dark-text-color = #DDDDDD $ui-dark-button--active-color = #f4f4f4 $ui-dark-button--active-backgroundColor = #3A404C +$ui-dark-button--hover-color = #c0392b $ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%) $ui-dark-button--focus-borderColor = lighten(#369DCD, 25%) $ui-dark-topbar-button-color = #939395 @@ -332,19 +316,11 @@ darkTooltip() pointer-events none transition 0.1s -modalDark() - position relative - z-index $modal-z-index - width 100% - background-color $ui-dark-backgroundColor - overflow hidden - border-radius $modal-border-radius - - /******* Solarized Dark theme ********/ $ui-solarized-dark-backgroundColor = #073642 $ui-solarized-dark-noteList-backgroundColor = #073642 $ui-solarized-dark-noteDetail-backgroundColor = #073642 +$ui-solarized-dark-tagList-backgroundColor = #FFFFFF $ui-solarized-dark-text-color = #93a1a1 $ui-solarized-dark-active-color = #2aa198 @@ -356,21 +332,23 @@ $ui-solarized-dark-tag-backgroundColor = #002b36 $ui-solarized-dark-button-backgroundColor = #002b36 $ui-solarized-dark-button--active-color = #93a1a1 $ui-solarized-dark-button--active-backgroundColor = #073642 +$ui-solarized-dark-button--hover-color = #c0392b $ui-solarized-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%) $ui-solarized-dark-button--focus-borderColor = lighten(#369DCD, 25%) -modalSolarizedDark() - position relative - z-index $modal-z-index - width 100% - background-color $ui-solarized-dark-backgroundColor - overflow hidden - border-radius $modal-border-radius +$ui-solarized-dark-kbd-backgroundColor = darken(#21252B, 10%) +$ui-solarized-dark-kbd-color = $ui-solarized-dark-text-color + +$ui-solarized-dark-table-odd-backgroundColor = $ui-solarized-dark-noteDetail-backgroundColor +$ui-solarized-dark-table-even-backgroundColor = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%) +$ui-solarized-dark-table-head-backgroundColor = $ui-solarized-dark-table-even-backgroundColor +$ui-solarized-dark-table-borderColor = lighten(darken(#21252B, 10%), 20%) /******* Monokai theme ********/ $ui-monokai-backgroundColor = #272822 $ui-monokai-noteList-backgroundColor = #272822 $ui-monokai-noteDetail-backgroundColor = #272822 +$ui-monokai-tagList-backgroundColor = #FFFFFF $ui-monokai-text-color = #f8f8f2 $ui-monokai-active-color = #f92672 @@ -382,21 +360,23 @@ $ui-monokai-tag-backgroundColor = #373831 $ui-monokai-button-backgroundColor = #373831 $ui-monokai-button--active-color = white $ui-monokai-button--active-backgroundColor = #f92672 +$ui-monokai-button--hover-color = #f92672 $ui-monokai-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%) $ui-monokai-button--focus-borderColor = lighten(#369DCD, 25%) -modalMonokai() - position relative - z-index $modal-z-index - width 100% - background-color $ui-monokai-backgroundColor - overflow hidden - border-radius $modal-border-radius +$ui-monokai-kbd-backgroundColor = darken(#21252B, 10%) +$ui-monokai-kbd-color = $ui-monokai-text-color + +$ui-monokai-table-odd-backgroundColor = $ui-monokai-noteDetail-backgroundColor +$ui-monokai-table-even-backgroundColor = darken($ui-monokai-noteDetail-backgroundColor, 10%) +$ui-monokai-table-head-backgroundColor = $ui-monokai-table-even-backgroundColor +$ui-monokai-table-borderColor = lighten(darken(#21252B, 10%), 20%) /******* Dracula theme ********/ $ui-dracula-backgroundColor = #282a36 $ui-dracula-noteList-backgroundColor = #282a36 $ui-dracula-noteDetail-backgroundColor = #282a36 +$ui-dracula-tagList-backgroundColor = #f8f8f2 $ui-dracula-text-color = #f8f8f2 $ui-dracula-active-color = #bd93f9 @@ -408,22 +388,52 @@ $ui-dracula-tag-backgroundColor = #8be9fd $ui-dracula-button-backgroundColor = #44475a $ui-dracula-button--active-color = #f8f8f2 $ui-dracula-button--active-backgroundColor = #bd93f9 +$ui-dracula-button--hover-color = #ff79c6 $ui-dracula-button--hover-backgroundColor = lighten($ui-dracula-backgroundColor, 10%) $ui-dracula-button--focus-borderColor = lighten(#44475a, 25%) -colorDraculaDefaultButton() - border-color $ui-dracula-borderColor - color $ui-dracula-text-color - background-color $ui-dracula-button-backgroundColor - &:hover - background-color $ui-dracula-button--hover-backgroundColor - &:active - &:active:hover - background-color $ui-dracula-button--active-backgroundColor -modalDracula() - position relative - z-index $modal-z-index - width 100% - background-color $ui-dracula-backgroundColor - overflow hidden - border-radius $modal-border-radius \ No newline at end of file +$ui-dracula-kbd-backgroundColor = darken(#21252B, 10%) +$ui-dracula-kbd-color = $ui-monokai-text-color + +$ui-dracula-table-odd-backgroundColor = $ui-dracula-noteDetail-backgroundColor +$ui-dracula-table-even-backgroundColor = darken($ui-dracula-noteDetail-backgroundColor, 10%) +$ui-dracula-table-head-backgroundColor = $ui-dracula-table-even-backgroundColor +$ui-dracula-table-borderColor = lighten(darken(#21252B, 10%), 20%) + +/******* Nord theme ********/ +$ui-nord-backgroundColor = #2e3440 +$ui-nord-noteList-backgroundColor = #2e3440 +$ui-nord-noteDetail-backgroundColor = #2e3440 +$ui-nord-tagList-backgroundColor = #FFFFFF + +$ui-nord-text-color = #d8dee9 +$ui-nord-inactive-text-color = #8fbcbb +$ui-nord-active-color = #5e81ac + +$ui-nord-borderColor = #3b4252 + +$ui-nord-tag-backgroundColor = #3b4252 + +$ui-nord-button-backgroundColor = #434c5e +$ui-nord-button--active-color = #d8dee9 +$ui-nord-button--active-backgroundColor = #5e81ac +$ui-nord-button--hover-color = #c0392b +$ui-nord-button--hover-backgroundColor = #434c5e + +$ui-nord-kbd-backgroundColor = $ui-nord-text-color +$ui-nord-kbd-color = $ui-nord-backgroundColor + +$ui-nord-table-odd-backgroundColor = $ui-nord-noteDetail-backgroundColor +$ui-nord-table-even-backgroundColor = darken($ui-nord-noteDetail-backgroundColor, 10%) +$ui-nord-table-head-backgroundColor = $ui-nord-table-even-backgroundColor +$ui-nord-table-borderColor = lighten(darken(#21252B, 10%), 20%) + + + +debug-theme-var(theme, suffix) + '$ui-' + theme + '-' + suffix + +get-theme-var(theme, suffix) + lookup('$ui-' + theme + '-' + suffix) + +$themes = 'monokai' 'nord' \ No newline at end of file diff --git a/contributing.md b/contributing.md index a7c91e91..43d68d85 100644 --- a/contributing.md +++ b/contributing.md @@ -50,14 +50,26 @@ GPL v3 is too strict to be compatible with another license, so we thought it mig # Contributing to Boostnote (Korean) -### 버그 리포트를 보고할 때 -이슈의 양식은 없습니다. 하지만 부탁이 있습니다. - -**개발자 도구를 연 상태의 Boostnote 스크린샷을 첨부해주세요** +### 이슈 또는 버그 리포트를 제출하는 절차 +이슈를 제기할 때에 사용하는 양식(issue template)이 준비되어 있으니, 해당 양식에 맞추어 최대한 구체적인 정보를 첨부하여 주시기 바랍니다. 도움을 주셔서 감사합니다. -### Pull Request의 저작권에 관하여 +### Pull Request를 제출하는 절차 +Pull Request에 사용하는 양식(pull request template)이 준비되어 있으니, 코드를 접수하기 전에 미리 해당 양식을 작성해 주시기 바랍니다. 코드가 해결하고자 하는 문제가 무엇인지 정확히 알면 저희가 훨씬 신속하게 해당 pull request를 검토할 수 있습니다. + +다음 사항을 준수하여 주십시오: +- [`code_style.md`](docs/code_style.md) 에 정리된 코드 스타일 정보를 확인할 것 +- 테스트 코드를 작성하고, 아래와 같은 테스트 커맨드를 실행할 것 +``` +npm run test +``` +- 아래와 같은 린팅 커맨드로 코드를 확인할 것 +``` +npm run lint +``` + +### 저작권에 관한 기준 당신이 pull request를 요청하면, 코드 변경에 대한 저작권을 BoostIO에 양도한다는 것에 동의한다는 의미입니다. diff --git a/docs/build.md b/docs/build.md index 1e269b4c..2a8c22af 100644 --- a/docs/build.md +++ b/docs/build.md @@ -37,7 +37,7 @@ Visit the page for the pull request and look at the end of the url for the PR nu https://github.com/BoostIO/Boostnote/pull/2794 In the following, replace \ with that number (no brackets). -For the above url, you would replace \ with 2794 +For URLs below, you would replace \ with 2794 _If you do not have a local copy of the master branch yet_ ``` diff --git a/docs/ko/build.md b/docs/ko/build.md index 17e9c712..d9a5f4a9 100644 --- a/docs/ko/build.md +++ b/docs/ko/build.md @@ -5,8 +5,6 @@ * npm: 6.x * node: 8.x -`$ grunt pre-build`를 `npm v5.x`에서 실행할 수 없기 때문에, 반드시 `npm v4.x`를 사용하셔야 합니다. - ## 개발 개발에 있어서 Webpack HRM을 사용합니다. @@ -29,6 +27,34 @@ $ yarn run dev > 1. 콤포넌트의 컨스트럭터 함수를 수정할 경우 > 2. 새로운 CSS코드를 추가할 경우(1.과 같은 이유: CSS클래스는 콤포넌트마다 다시 만들어 지는데, 이 작업은 컨스트럭터에서 일어납니다.) +## Pull Request에 사용된 코드를 적용하는 방법 +관련된 Pull request 페이지를 방문하여, url 스트링 마지막에 표기된 PR 번호를 확인합니다. +
+https://github.com/BoostIO/Boostnote/pull/2794
+
+아래의 커맨드를 실행하면서, \ 대신에 위에서 확인한 번호를 입력합니다 (부등호 신호는 빼고 입력하세요). +위에 보여진 예시의 경우, \ 자리에 2794를 입력하면 됩니다. + +_본인의 로컬 컴퓨터에 마스터 브랜치가 복사되어 있지 않은 경우_ +``` +git clone https://github.com/BoostIO/Boostnote.git +cd Boostnote +git fetch origin pull//head: +git checkout +``` + +_이미 마스터 브랜치를 로컬 컴퓨터에 저장해둔 경우_ +``` +git fetch origin pull//head: +git checkout +``` + +_To compile and run the code_ +``` +yarn +yarn run dev +``` + ## 배포 Boostnote에서는 배포 자동화를 위하여 그런트를 사용합니다. @@ -43,3 +69,31 @@ grunt pre-build 실행 파일은 `dist`에서 찾을 수 있습니다. 이 경우, 인증이 되어있지 않기 때문에 업데이터는 사용할 수 없습니다. 필요로 하다면, 이 실행파일에 Codesign나 Authenticode등의 서명을 할 수 있습니다. + +## 독자적인 배포판을 제작하는 방법 (deb, rpm) + +배포판 패키지를 제작하려면 (우분투, 페도라 등) 리눅스 플랫폼에서 `grunt build` 커맨드를 실행하면 됩니다. + +> 참조: 동일한 환경에서 `.deb` 파일과 `.rpm` 파일을 모두 만들 수 있습니다. + +지원되는 버전의 `node`와 `npm`을 설치한 다음, 빌드에 필요한 패키지를 설치합니다. + +우분투/데비안 환경 (Ubuntu/Debian): + +``` +$ sudo apt-get install -y rpm fakeroot +``` + +페도라 환경 (Fedora): + +``` +$ sudo dnf install -y dpkg dpkg-dev rpm-build fakeroot +``` + +그 다음 `grunt build` 커맨드를 실행합니다. + +``` +$ grunt build +``` + +`dist` 디렉토리에 `.deb` 파일과 `.rpm` 파일이 새롭게 생성됩니다. diff --git a/docs/ko/debug.md b/docs/ko/debug.md index 290eee9c..6d68d951 100644 --- a/docs/ko/debug.md +++ b/docs/ko/debug.md @@ -1,5 +1,7 @@ # Boostnote의 디버그 방법(Electron app) +## 구글 크롬 Developer Tools를 사용한 디버깅 + Boostnote는 Electron 애플리케이션이므로 Chromium위에서 작동합니다. 그렇기 때문에 개발자분들은 Google Chrome 브라우저에서 처럼 `Developer Tools`를 사용하실 수 있습니다. 다음과 같이 `Developer Tools`를 실행할 수 있습니다: @@ -10,12 +12,26 @@ Boostnote는 Electron 애플리케이션이므로 Chromium위에서 작동합니 에러가 발생할 때에는, 에러메시지가 `console`위에 표시 됩니다. -## 디버깅 +### 디버깅 예를들면 `debugger`를 사용하여 코드 안에서 다음과 같이 일시 정지지점을 설정할 수 있습니다: ![debugger](https://cloud.githubusercontent.com/assets/11307908/24343879/9459efea-127d-11e7-9943-f60bf7f66d4a.png) 이는 단순한 하나의 예시에 불과합니다. 자기자신에게 가장 잘 맞는 디버그 방법을 찾는 것도 좋을 것 입니다. -## 참고 + ### 참고 * [디버그에 관한 Google Chrome의 공식 문서](https://developer.chrome.com/devtools) + +## 비주얼 스튜디오 코드를 사용한 디버깅 + +1. **[크롬 디버깅 플러그인](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome 'Install Debugger for Chrome')** 을 비주얼 스튜디오 코드에 설치한 후, 프로그램을 닫았다가 재실행합니다. +2. **Shift+Command+B** 키를 누르거나, **Terminal** 메뉴 하단에 있는 **Run Build Task** 메뉴를 선택한 후 **Build Boostnote** 를 선택합니다. 아니면 터미널에서 곧바로 `yarn run watch`를 실행해도 됩니다. +3. 위의 절차가 실행되고 있을 때, 사이드바 **Activity Bar**에서 **Debug view**를 선택합니다. 키보드 단축키로는 **Shift+Command+D**를 눌러도 됩니다.. +4. **Debug configuration**에서 **Boostnote All** 설정을 선택한 후, 초록색 화살표를 클릭하거나 **F5** 키를 누르면 디버깅이 시작됩니다. +5. 이 시점에서는 **Boostnote**가 실행되고 있을 텐데, 두 개의 프로세스가 진행중인 것을 볼 수 있을 겁니다. 바로 **Boostnote Main** 프로세스와 **Boostnote Renderer** 프로세스입니다. 이제 비주얼 스튜디오 코드에서 곧바로 **디버깅 정지지점 (debug breakpoint)** 을 설정할 수 있습니다. 만약에 지정한 **정지지점 (breakpoint)** 이 등록되지 않는다면, **Boostnote Renderer** 와 **Boostnote Main** 프로세스 사이를 번갈아 확인해 보아야 합니다. + + +### 참고 + +- [일렉트론 애플리케이션 디버깅 공식 튜토리얼](https://electronjs.org/docs/tutorial/application-debugging) +- [비쥬얼 스튜디오 코드용 크롬 디버깅 플러그인](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) diff --git a/docs/zh_TW/build.md b/docs/zh_TW/build.md index 151f946d..4f9c7a96 100644 --- a/docs/zh_TW/build.md +++ b/docs/zh_TW/build.md @@ -10,7 +10,6 @@ ## 開發 我們使用 Webpack HMR 來開發 Boostnote。 - 在專案根目錄底下執行下列指令，將會以原始設置啟動 Boostnote。 **用 yarn 來安裝必要 packages** @@ -19,41 +18,70 @@ $ yarn ``` -**開始開發** +**編譯及執行** ``` $ yarn run dev ``` -> ### Notice +> ### 注意 > -> There are some cases where you have to refresh the app manually. +> 以下是一些可能要手動重新啟動程式的情況。 > -> 1. When editing a constructor method of a component -> 2. When adding a new css class (similar to 1: the CSS class is re-written by each component. This process occurs at the Constructor method.) +> 1. 修改一個 component 的 constructor 方法時。 +> 2. 新增新的 CSS 類別時 (和 1 很類似：CSS 類別會被每個 component 重寫過。這個過程在 constructor 方法中發生)。 -## Deploy +## 使用 Pull Requests 中的程式碼 +瀏覽 pull request 的頁面，從 URL 的後面找到 PR 號碼。 -We use Grunt to automate deployment. -You can build the program by using `grunt`. However, we don't recommend this because the default task includes codesign and authenticode. +
+https://github.com/BoostIO/Boostnote/pull/2794
+
+接著，於底下步驟中把 \ 換成這個號碼 (沒有括號)。 +請將下方 URL 中的 \ 換置成 2794。 -So, we've prepared a separate script which just makes an executable file. +_如果您還未取得一份 master branch 的本地備份_ +``` +git clone https://github.com/BoostIO/Boostnote.git +cd Boostnote +git fetch origin pull//head: +git checkout +``` + +_如果您已經擁有了 master branch_ +``` +git fetch origin pull//head: +git checkout +``` + +_編譯及執行程式碼_ +``` +yarn +yarn run dev +``` + +## 佈署 + +我們用 Grunt 做自動佈署。 +您能使用 `grung` 建構本程式。然而，我們並不建議這麼做，因為預設工作流程包含了程式簽名以及 Authenticode 驗證。 + +所以，我們準備了一份額外的腳本用於建構可執行檔。 ``` grunt pre-build ``` -You will find the executable in the `dist` directory. Note, the auto updater won't work because the app isn't signed. +您可以在 `dist` 資料夾下找到可執行檔。注意，自動更新功能 (auto updater) 並不會生效，因為程式沒有被簽署過。 -If you find it necessary, you can use codesign or authenticode with this executable. +必要時您可以使用程式簽名或 authenticode 驗證執行檔。 -## Make own distribution packages (deb, rpm) +## 建立您自己的發行版套件 (deb, rpm) -Distribution packages are created by exec `grunt build` on Linux platform (e.g. Ubuntu, Fedora). +發行版套件可以透過在 Linux 平台上 (如 Ubuntu, Fedora) 執行 `grunt build` 來建立。 -> Note: You can create both `.deb` and `.rpm` in a single environment. +> 注意：您可以在同個環境中同時建立 `.deb` 及`.rpm` 。 -After installing the supported version of `node` and `npm`, install build dependency packages. +安裝支援版本的 `node` 和 `npm` 後，安裝編譯相依套件。 Ubuntu/Debian: @@ -67,10 +95,10 @@ Fedora: $ sudo dnf install -y dpkg dpkg-dev rpm-build fakeroot ``` -Then execute `grunt build`. +接著執行 `grunt build`。 ``` $ grunt build ``` -You will find `.deb` and `.rpm` in the `dist` directory. +於 `dist` 資料夾下找到 `.deb` 及 `.rpm`。 diff --git a/yarn.lock b/yarn.lock index 77621a24..2d153615 100644 --- a/yarn.lock +++ b/yarn.lock @@ -486,7 +486,7 @@ async@^0.9.0, async@~0.9.0: version "0.9.2" resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d" -async@^1.3.0, async@^1.4.0, async@^1.4.2, async@^1.5.1, async@^1.5.2: +async@^1.3.0, async@^1.4.2, async@^1.5.1, async@^1.5.2: version "1.5.2" resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" @@ -3669,8 +3669,9 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2: is-extendable "^1.0.1" extend@~3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444" + version "3.0.2" + resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa" + integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g== extglob@^0.3.1: version "0.3.2" @@ -3952,6 +3953,7 @@ font-awesome@^4.3.0: for-in@^1.0.1, for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" + integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA= for-own@^0.1.4: version "0.1.5" @@ -4420,14 +4422,15 @@ gud@^1.0.0: integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw== handlebars@^4.0.3: - version "4.0.11" - resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc" + version "4.5.3" + resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482" + integrity sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA== dependencies: - async "^1.4.0" + neo-async "^2.6.0" optimist "^0.6.1" - source-map "^0.4.4" + source-map "^0.6.1" optionalDependencies: - uglify-js "^2.6" + uglify-js "^3.1.4" har-schema@^2.0.0: version "2.0.0" @@ -4997,6 +5000,7 @@ is-extendable@^0.1.0, is-extendable@^0.1.1: is-extendable@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4" + integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA== dependencies: is-plain-object "^2.0.4" @@ -5126,6 +5130,7 @@ is-plain-obj@^1.0.0: is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677" + integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og== dependencies: isobject "^3.0.1" @@ -5229,6 +5234,7 @@ isobject@^2.0.0: isobject@^3.0.0, isobject@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df" + integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8= isomorphic-fetch@^2.1.1: version "2.2.1" @@ -6553,6 +6559,7 @@ minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0: minimist@~0.0.1: version "0.0.10" resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf" + integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8= minipass@^2.2.1, minipass@^2.3.3: version "2.3.3" @@ -6568,8 +6575,9 @@ minizlib@^1.1.0: minipass "^2.2.1" mixin-deep@^1.1.3, mixin-deep@^1.2.0: - version "1.3.1" - resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe" + version "1.3.2" + resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566" + integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA== dependencies: for-in "^1.0.2" is-extendable "^1.0.1" @@ -6696,6 +6704,11 @@ negotiator@0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9" +neo-async@^2.6.0: + version "2.6.1" + resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c" + integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw== + next-tick@1: version "1.0.0" resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c" @@ -7021,6 +7034,7 @@ open@0.0.5: optimist@^0.6.1, optimist@~0.6.0, optimist@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686" + integrity sha1-2j6nRob6IaGaERwybpDrFaAZZoY= dependencies: minimist "~0.0.1" wordwrap "~0.0.2" @@ -8976,12 +8990,6 @@ source-map@0.5.6: version "0.5.6" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412" -source-map@^0.4.4, source-map@~0.4.1: - version "0.4.4" - resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b" - dependencies: - amdefine ">=0.0.4" - source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" @@ -8990,6 +8998,12 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" +source-map@~0.4.1: + version "0.4.4" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b" + dependencies: + amdefine ">=0.0.4" + sourcemapped-stacktrace@^1.1.6: version "1.1.8" resolved "https://registry.yarnpkg.com/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.8.tgz#6b7a3f1a6fb15f6d40e701e23ce404553480d688" @@ -9680,14 +9694,13 @@ uc.micro@^1.0.5: resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac" integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA== -uglify-js@^2.6: - version "2.8.29" - resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd" +uglify-js@^3.1.4: + version "3.7.3" + resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.7.3.tgz#f918fce9182f466d5140f24bb0ff35c2d32dcc6a" + integrity sha512-7tINm46/3puUA4hCkKYo4Xdts+JDaVC9ZPRcG8Xw9R4nhO/gZgUM3TENq8IF4Vatk8qCig4MzP/c8G4u2BkVQg== dependencies: - source-map "~0.5.1" - yargs "~3.10.0" - optionalDependencies: - uglify-to-browserify "~1.0.0" + commander "~2.20.3" + source-map "~0.6.1" uglify-js@^3.5.1: version "3.6.9" @@ -10144,6 +10157,7 @@ wordwrap@0.0.2: wordwrap@~0.0.2: version "0.0.3" resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107" + integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc= wordwrap@~1.0.0: version "1.0.0"