new themes

app/index.html

@@ -19,7 +19,6 @@
             "
         />
         <meta name="application-name" content="KeeWeb" />
-        <meta name="kw-signature" content="" />
         <meta name="kw-config" content="(no-config)" />
         <meta
             name="viewport"

app/scripts/comp/settings/settings-manager.js

@@ -2,12 +2,6 @@ import { Events } from 'framework/events';
 import { Features } from 'util/features';
 import { Locale } from 'util/locale';
 
-const appleThemes = {
-    macdark: 'setGenThemeMacDark'
-};
-
-const extraThemes = Features.isMac || Features.isiOS ? appleThemes : {};
-
 const SettingsManager = {
     neutralLocale: null,
     activeLocale: 'en-US',
@@ -20,14 +14,14 @@ const SettingsManager = {
     },
 
     allThemes: {
+        dark: 'setGenThemeDark',
+        light: 'setGenThemeLight',
         fb: 'setGenThemeFb',
         db: 'setGenThemeDb',
         sd: 'setGenThemeSd',
         sl: 'setGenThemeSl',
-        wh: 'setGenThemeWh',
         te: 'setGenThemeTe',
-        hc: 'setGenThemeHc',
-        ...extraThemes
+        hc: 'setGenThemeHc'
     },
 
     customLocales: {},
@@ -46,7 +40,7 @@ const SettingsManager = {
     },
 
     getDefaultTheme() {
-        return Features.isMac ? 'macdark' : 'fb';
+        return 'dark';
     },
 
     setTheme(theme) {

app/scripts/framework/views/resizable.js

@@ -25,7 +25,7 @@ const Resizable = {
         if (dragInfo.auto !== undefined) {
             this.$el.css(dragInfo.prop, dragInfo.auto);
         } else {
-            this.$el.css(dragInfo.prop, 'auto');
+            this.$el.css(dragInfo.prop, '');
         }
         this.fixSize(dragInfo);
         this.emit('view-resize', null);
@@ -55,7 +55,7 @@ const Resizable = {
         const propLower = prop.toLowerCase();
         const min = this.getSizeProp('min' + prop);
         const max = this.getSizeProp('max' + prop);
-        const auto = this.getSizeProp('auto' + prop) || 'auto';
+        const auto = this.getSizeProp('auto' + prop);
         const startSize = this.$el[propLower]();
         return { startSize, prop: propLower, min, max, auto };
     },

app/scripts/locales/base.json

@@ -369,14 +369,14 @@
     "setGenDownloadAndRestart": "Download update and restart",
     "setGenAppearance": "Appearance",
     "setGenTheme": "Theme",
+    "setGenThemeDark": "Dark",
+    "setGenThemeLight": "Light",
     "setGenThemeFb": "Flat blue",
     "setGenThemeDb": "Dark brown",
-    "setGenThemeWh": "White",
     "setGenThemeTe": "Terminal",
     "setGenThemeHc": "High contrast",
     "setGenThemeSd": "Solarized dark",
     "setGenThemeSl": "Solarized light",
-    "setGenThemeMacDark": "macOS Dark",
     "setGenLocale": "Language",
     "setGenLocOther": "other languages are available as plugins",
     "setGenFontSize": "Font size",

app/scripts/models/app-settings-model.js

@@ -24,6 +24,12 @@ class AppSettingsModel extends Model {
         if (data.locale === 'en') {
             data.locale = 'en-US';
         }
+        if (data.theme === 'macdark') {
+            data.theme = 'dark';
+        }
+        if (data.theme === 'wh') {
+            data.theme = 'light';
+        }
     }
 
     save() {

app/scripts/models/menu/menu-item-model.js

@@ -57,7 +57,8 @@ MenuItemModel.defineModelProperties({
     defaultItem: false,
     page: null,
     editable: false,
-    file: null
+    file: null,
+    section: null
 });
 
 export { MenuItemModel };

app/scripts/models/menu/menu-model.js

@@ -66,7 +66,48 @@ class MenuModel extends Model {
         ]);
 
         this.generalSection = new MenuSectionModel([
-            { locTitle: 'menuSetGeneral', icon: 'cog', page: 'general', active: true }
+            {
+                locTitle: 'menuSetGeneral',
+                icon: 'cog',
+                page: 'general',
+                section: 'top',
+                active: true
+            },
+            {
+                locTitle: 'setGenAppearance',
+                icon: '0',
+                page: 'general',
+                section: 'appearance',
+                active: true
+            },
+            {
+                locTitle: 'setGenFunction',
+                icon: '0',
+                page: 'general',
+                section: 'function',
+                active: true
+            },
+            {
+                locTitle: 'setGenLock',
+                icon: '0',
+                page: 'general',
+                section: 'lock',
+                active: true
+            },
+            {
+                locTitle: 'setGenStorage',
+                icon: '0',
+                page: 'general',
+                section: 'storage',
+                active: true
+            },
+            {
+                locTitle: 'advanced',
+                icon: '0',
+                page: 'general',
+                section: 'advanced',
+                active: true
+            }
         ]);
         this.shortcutsSection = new MenuSectionModel([
             { locTitle: 'shortcuts', icon: 'keyboard', page: 'shortcuts' }
@@ -127,6 +168,7 @@ class MenuModel extends Model {
         } else if (sections === this.menus.settings) {
             Events.emit('set-page', {
                 page: sel.item.page,
+                section: sel.item.section,
                 file: sel.item.file
             });
         }

app/scripts/views/menu/menu-view.js

@@ -20,7 +20,6 @@ class MenuView extends View {
 
     minWidth = 130;
     maxWidth = 300;
-    autoWidth = 150;
 
     constructor(model, options) {
         super(model, options);

app/scripts/views/settings/settings-logs-view.js

@@ -6,10 +6,12 @@ import template from 'templates/settings/settings-logs-view.hbs';
 class SettingsLogsView extends View {
     parent = '.settings__general-advanced';
     template = template;
+    levelToColor = { debug: 'muted', warn: 'yellow', error: 'red' };
 
     render() {
         const logs = Logger.getLast().map((item) => ({
             level: item.level,
+            color: this.levelToColor[item.level],
             msg:
                 '[' +
                 StringFormat.padStr(item.level.toUpperCase(), 5) +

app/scripts/views/settings/settings-view.js

@@ -32,7 +32,7 @@ class SettingsView extends View {
     }
 
     setPage(e) {
-        let { page, file } = e;
+        let { page, section, file } = e;
         if (page === 'file' && file && file.external) {
             page = 'file-external';
         }
@@ -48,6 +48,20 @@ class SettingsView extends View {
         this.file = file;
         this.page = page;
         this.pageResized();
+        this.scrollToSection(section);
+    }
+
+    scrollToSection(section) {
+        let scrollEl;
+        if (section) {
+            scrollEl = this.views.page.el.querySelector(`#${section}`);
+        }
+        if (!scrollEl) {
+            scrollEl = this.views.page.el.querySelector(`h1`);
+        }
+        if (scrollEl) {
+            scrollEl.scrollIntoView(true);
+        }
     }
 
     returnToApp() {

app/styles/areas/_app.scss

@@ -31,7 +31,8 @@
     &__menu {
         flex: 0 0 auto;
         display: flex;
-        width: 150px;
+        width: 15em;
+        background-color: var(--secondary-background-color);
         @include mobile {
             &:not(.menu-visible) {
                 display: none;
@@ -92,11 +93,14 @@
     }
 
     &__list {
-        flex: 0 0 250px;
+        flex: 0 0 25em;
         display: flex;
         align-items: stretch;
         flex-direction: column;
         overflow-y: auto;
+        .titlebar-hidden & {
+            padding-top: $titlebar-padding-tiny;
+        }
         @include mobile {
             flex: 1 1;
             .app--details-visible & {
@@ -134,6 +138,7 @@
     &__footer {
         flex: 0 0 auto;
         border-top: light-border();
+        background-color: var(--secondary-background-color);
     }
 
     &__beta {

app/styles/areas/_auto-type.scss

@@ -9,7 +9,7 @@
     box-sizing: border-box;
     z-index: $z-index-no-modal;
     opacity: 1;
-    padding: $base-padding;
+    padding: $medium-padding;
 
     .titlebar-hidden & {
         padding-top: $titlebar-padding-small;
@@ -108,10 +108,10 @@
         }
     }
     &__item {
-        @include area-selectable(right);
+        @include area-selectable();
         &--active,
         &--active:hover {
-            @include area-selected(right);
+            @include area-selected();
             cursor: pointer;
         }
         &--active {

app/styles/areas/_details.scss

@@ -38,12 +38,10 @@
             padding: 3px 6px 1px;
             overflow: hidden;
             text-overflow: ellipsis;
-            border-radius: $base-border-radius;
+            border-radius: var(--input-border-radius);
             border: 1px solid transparent;
-            height: 36px;
-            line-height: 34px;
-            position: relative;
-            top: -2px;
+            height: 1.4em;
+            line-height: 1.4em;
             white-space: nowrap;
             &:hover {
                 transition: border-color $base-duration $base-timing;
@@ -54,34 +52,38 @@
             }
         }
         input.details__header-title-input {
-            height: 42px;
-            line-height: 34px;
+            height: calc(1.4em + 6px);
+            line-height: 1.4em;
             user-select: text;
             flex: 1;
             margin: 0 6px;
             padding: 0 6px;
             font-size: $large-header-font-size;
             font-weight: bold;
-            position: relative;
-            top: -2px;
             min-width: 0;
             @include mobile {
                 width: 100%;
             }
         }
-        &-color,
-        &-icon {
+        &-color {
             user-select: none;
-            @include area-selectable();
-            display: inline;
             font-size: $large-header-font-size;
-            height: 1em;
             padding-top: 0.1em;
         }
         &-icon {
-            width: 1.4em;
+            @include area-selectable();
+            user-select: none;
+            display: inline;
+            font-size: $large-header-font-size;
+            padding-top: 0.1em;
+            border-radius: var(--block-border-radius);
+            width: 1.8em;
+            height: 1.5em;
             text-align: center;
         }
+        &-icon-img {
+            vertical-align: middle;
+        }
     }
 
     &__colors-popup {
@@ -92,8 +94,7 @@
         border-radius: $base-border-radius;
         background: var(--background-color);
         box-shadow: 0 0 3px var(--background-color);
-        top: 13px;
-        left: 6px;
+        left: 0.2em;
         font-size: $large-header-font-size;
         &:hover,
         .details__header-color:hover & {
@@ -102,7 +103,7 @@
             }
         }
         &-item {
-            padding: 8px 12px;
+            padding: 0 12px 0;
             cursor: pointer;
             display: block;
             position: relative;
@@ -116,8 +117,7 @@
                     content: $fa-var-bookmark;
                     opacity: 0.3;
                     position: absolute;
-                    left: 12px;
-                    top: 8px;
+                    left: 0.4em;
                 }
             }
         }
@@ -230,7 +230,7 @@
                 color: transparent;
             }
             .details__field--editable & {
-                border-radius: $base-border-radius;
+                border-radius: var(--input-border-radius);
                 &:hover {
                     @include nomobile {
                         transition: border-color $base-duration $base-timing;
@@ -265,7 +265,7 @@
             > textarea {
                 margin: 0;
                 padding: 0 $base-padding-h;
-                line-height: $details-field-line-height + 2px;
+                line-height: $details-field-line-height;
                 width: 100%;
                 height: 20px;
                 .details__field--protected & {
@@ -319,7 +319,7 @@
                 flex: 0 0 auto;
             }
             &-btn {
-                @include position(absolute, 0 0 null null);
+                @include position(absolute, -0.2em 0 null null);
                 color: var(--muted-color);
                 cursor: pointer;
                 &:hover {
@@ -445,7 +445,7 @@
             align-self: flex-start;
             width: 2em;
             text-align: center;
-            padding-top: 0.25em;
+            padding-top: 0.1em;
             .details__field:hover & {
                 opacity: 1;
                 transition: opacity $slow-transition-in;
@@ -483,36 +483,26 @@
     }
 
     &__attachment {
-        user-select: none;
-        @include area-selectable();
+        @include bg-btn();
         align-self: flex-end;
         flex: 0 1 auto;
-        border: light-border();
         margin-right: $small-spacing;
         margin-top: $small-spacing;
-        padding: $base-padding;
-        text-align: center;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        i {
-            margin-right: 0.4em;
-        }
-        &--active {
-            border-bottom: 1px solid var(--action-color);
+        &--active,
+        &--active:hover {
+            @include bg-btn-active();
         }
     }
 
     &__attachment-add {
+        @include icon-btn();
         user-select: none;
         align-self: flex-end;
         flex: 0 0 auto;
         color: var(--muted-color);
-        border: 1px solid transparent;
         margin-right: $small-spacing;
-        padding: $base-padding;
         text-align: center;
         overflow: hidden;
-        transition: color $base-duration $base-timing;
         &:hover {
             color: var(--medium-color);
         }
@@ -640,9 +630,8 @@
             }
             &-item {
                 position: absolute;
-                top: 4px;
+                top: 0;
                 cursor: pointer;
-                transform: translateX(-48%);
                 &:hover {
                     color: var(--text-semi-muted-color);
                 }
@@ -721,10 +710,9 @@
             padding: $base-padding;
             display: inline-block;
             word-break: break-all;
-            @include area-selectable(bottom);
+            @include area-selectable();
             &--selected {
                 background-color: var(--secondary-background-color);
-                border-bottom: selected-hover-border();
             }
         }
     }
@@ -734,6 +722,12 @@
         float: right;
         cursor: pointer;
         user-select: none;
+        &-post {
+            margin-left: $tiny-spacing;
+            margin-right: $small-spacing;
+            position: relative;
+            top: 0.2em;
+        }
         &-pre,
         &-post {
             display: none;

app/styles/areas/_footer.scss

@@ -9,7 +9,7 @@
 
     &__db {
         flex: 0 0 auto;
-        @include area-selectable(top);
+        @include area-selectable-on-secondary();
         position: relative;
         padding: $medium-padding;
         padding-right: 1.3em;
@@ -22,6 +22,9 @@
                 color: var(--medium-color);
             }
         }
+        &:first-of-type {
+            padding-left: $base-spacing;
+        }
 
         &--expanded {
             flex: 1;
@@ -64,7 +67,7 @@
 
     &__btn {
         flex: 0 0 auto;
-        @include area-selectable(top);
+        @include area-selectable-on-secondary();
         padding: $base-padding;
         .standalone & {
             padding-top: $base-padding-v;
@@ -73,6 +76,9 @@
         font-size: 1.4em;
         text-align: center;
         width: 1em;
+        &:last-of-type {
+            padding-right: $base-spacing;
+        }
     }
 
     &__update-icon {

app/styles/areas/_grp.scss

@@ -17,7 +17,7 @@
 
     &__content,
     &__buttons {
-        padding: $base-padding;
+        padding: $medium-padding;
     }
 
     &__icon {

app/styles/areas/_list.scss

@@ -49,6 +49,7 @@
         }
         &-field {
             width: 100%;
+            height: 2.5em;
             @include mobile {
                 font-size: 1.05em !important;
                 box-shadow: none !important;
@@ -71,11 +72,12 @@
                 top: 0.5em;
             }
         }
-        &-btn-new {
-            @include icon-btn;
-        }
+        &-btn-new,
         &-btn-sort {
             @include icon-btn;
+            height: 2.5em;
+            line-height: 2.3em;
+            padding: 0 $base-padding-h;
         }
         &-btn-menu {
             display: none;
@@ -98,6 +100,7 @@
             flex-wrap: wrap;
             &-text {
                 flex: 100%;
+                padding: $base-padding-v 0;
             }
         }
         &-check {
@@ -127,15 +130,15 @@
     }
 
     &__item {
-        padding: 6px 10px 0;
+        padding: $base-padding;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
         @include nomobile {
-            @include area-selectable(right);
+            @include area-selectable();
             &--active,
             &--active:hover {
-                @include area-selected(right);
+                @include area-selected();
             }
         }
         @include mobile {
@@ -147,7 +150,8 @@
         }
 
         &:not(.list__item--table) {
-            height: 3rem;
+            border-radius: var(--block-border-radius);
+            margin: 0 $small-spacing;
         }
 
         &--expired {
@@ -158,9 +162,12 @@
         }
 
         &-icon {
-            margin-right: 2px;
+            margin-right: 0.2em;
             width: 14px;
             height: 14px;
+            vertical-align: top;
+            position: relative;
+            top: -1px;
             @include mobile {
                 margin-right: 4px;
             }
@@ -197,6 +204,10 @@
             display: block;
             text-overflow: ellipsis;
             overflow: hidden;
+            margin-bottom: $tiny-spacing;
+            .list__item--active & {
+                color: var(--selected-item-text-color);
+            }
         }
     }
 }

app/styles/areas/_menu.scss

@@ -12,6 +12,7 @@
         @include scrollbar-on-hover;
         position: relative;
         overflow: hidden;
+        padding: $small-spacing 0;
 
         &--grow {
             flex: 1;
@@ -71,19 +72,17 @@
         }
 
         &-body {
-            @include area-selectable();
+            @include area-selectable-on-secondary();
             padding: $base-padding;
             text-overflow: ellipsis;
             overflow: hidden;
             white-space: nowrap;
-            border-right: selected-transparent-border();
-            .menu__item--hover > & {
-                border-right: selected-hover-border();
-            }
+            border-radius: var(--block-border-radius);
+            margin: 0 $small-spacing;
 
             .menu__item--active > &,
             .menu__item--active.menu__item--hover > & {
-                @include area-selected(right);
+                @include area-selected-on-secondary();
             }
 
             .menu__item > .menu__item > & {
@@ -164,7 +163,7 @@
             top: 0.55em;
             cursor: pointer;
             transition: opacity $base-duration $base-timing, color $base-duration $base-timing;
-            color: var(--muted-color);
+            color: var(--clickable-on-secondary-color);
             &:hover {
                 color: var(--medium-color);
             }

app/styles/areas/_open.scss

@@ -24,16 +24,15 @@
     }
 
     &__icon {
-        text-align: center;
-        cursor: pointer;
-        margin: 20px;
-        transition: color $base-duration $base-timing;
+        @include icon-btn();
+        padding-top: 0;
+        margin: 0.2em 0.5em;
         &:hover {
             color: var(--medium-color);
         }
         &:focus {
             .open--show-focus & {
-                outline: focused-outline();
+                box-shadow: focused-box-shadow();
             }
         }
         &-i {
@@ -91,15 +90,17 @@
             padding: 0.6em $base-spacing;
             position: absolute;
             left: 100%;
+            border-radius: var(--block-border-radius);
             @include mobile {
                 left: auto;
                 right: 0;
             }
             color: var(--muted-color);
             line-height: 3em;
-            height: 3em;
+            height: 3.2em;
             > i {
                 font-size: 3em;
+                line-height: 1;
                 @include mobile {
                     line-height: 0.8;
                 }
@@ -108,7 +109,7 @@
         .open--show-focus & {
             &-enter-btn:focus,
             &-opening-icon:focus {
-                outline: focused-outline();
+                box-shadow: focused-box-shadow();
             }
         }
         &-enter-btn {
@@ -197,6 +198,7 @@
         padding-left: $base-padding-h;
         height: 2em;
         &-key-file {
+            border-radius: var(--block-border-radius);
             .open--file:not(.open--opening) & {
                 cursor: pointer;
             }
@@ -228,7 +230,7 @@
             }
             &:focus {
                 .open--show-focus & {
-                    outline: focused-outline();
+                    box-shadow: focused-box-shadow();
                 }
             }
         }
@@ -291,9 +293,10 @@
             }
             color: var(--muted-color);
             padding: $base-padding;
+            border-radius: var(--block-border-radius);
             &:focus {
                 .open--show-focus & {
-                    outline: focused-outline();
+                    box-shadow: focused-box-shadow();
                 }
             }
             &-icon {
@@ -362,7 +365,7 @@
     &__file {
         cursor: pointer;
         padding: $base-padding;
-        border-radius: $base-border-radius;
+        border-radius: var(--block-border-radius);
         box-sizing: border-box;
         flex-basis: 100%;
         @include nomobile {

app/styles/areas/_settings.scss

@@ -10,7 +10,7 @@
     position: relative;
 
     &__content {
-        margin: $base-padding;
+        margin: $medium-padding;
     }
 
     > .scroller {
@@ -192,9 +192,9 @@
         color: var(--text-color);
         cursor: pointer;
         body & {
-            --focus-shadow-blur: unset;
             --focus-shadow-spread: unset;
             --form-box-shadow-color-focus: unset;
+            --form-box-shadow-color-hover: unset;
         }
         &-name {
             border-bottom: light-border();
@@ -205,9 +205,10 @@
             margin-bottom: $base-padding-v;
         }
         &:hover {
-            box-shadow: form-box-shadow-focus();
+            box-shadow: form-box-shadow-hover();
         }
-        &--selected {
+        &--selected,
+        &--selected:hover {
             border: 1px solid var(--action-color);
             box-shadow: form-box-shadow-focus();
         }
@@ -219,17 +220,6 @@
         &-log {
             margin: 0;
             white-space: pre-wrap;
-            &--debug {
-                opacity: 0.8;
-            }
-            &--info {
-            }
-            &--warn {
-                color: $yellow;
-            }
-            &--error {
-                color: $red;
-            }
         }
     }
     &__plugins {
@@ -331,6 +321,8 @@
     }
 
     &__head-icon {
+        position: relative;
+        top: .1em;
         margin-right: 0.2em;
     }
 }

app/styles/areas/_tag.scss

@@ -6,7 +6,7 @@
     justify-content: flex-start;
     width: 100%;
     user-select: none;
-    padding: $base-padding;
+    padding: $medium-padding;
 
     &__space {
         flex: 1;

app/styles/base/_base.scss

@@ -6,6 +6,7 @@
 @import 'override-mixins';
 @import 'colors';
 @import 'variables';
+@import 'properties';
 @import 'media';
 @import 'icon-font';
 @import 'body';

app/styles/base/_buttons.scss

@@ -73,15 +73,49 @@
 }
 
 @mixin icon-btn($error: false) {
-    @include area-selectable(bottom);
-    padding: 0.7em 0.6em 0;
-    height: 1.6em;
+    @include area-selectable();
+    padding: $medium-padding;
+    text-align: center;
+    border-radius: var(--block-border-radius);
+    transition: color $base-duration $base-timing;
     > i {
-        display: block;
+        vertical-align: middle;
     }
     @if $error {
         &:hover {
-            border-color: var(--error-color);
+            color: var(--error-color);
         }
     }
 }
+
+@mixin bg-btn() {
+    user-select: none;
+    cursor: pointer;
+    -webkit-app-region: no-drag;
+    padding: $medium-padding;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border-radius: var(--block-border-radius);
+    background-color: var(--intermediate-background-color);
+    transition: color $base-duration $base-timing;
+    > i {
+        margin-right: 0.4em;
+        line-height: inherit;
+        vertical-align: bottom;
+    }
+    &:hover {
+        background-color: var(--intermediate-background-color);
+        color: var(--medium-color);
+        transform: background-color $base-duration $base-timing;
+    }
+    &:active {
+        background-color: var(--intermediate-pressed-background-color);
+        color: var(--text-color);
+    }
+}
+
+@mixin bg-btn-active() {
+    color: var(--selected-item-text-color);
+    background-color: var(--selected-item-color);
+}

app/styles/base/_colors.scss

@@ -1,26 +1,34 @@
-$black: #111;
-$white: #d8e5f1;
-$red: #df3c06;
-$orange: #fbac45;
-$yellow: #e9d92a;
-$green: #0dc94b;
-$blue: #4e6af8;
-$violet: #d946db;
+$dark-colors: (
+    white-color: #d8e5f1,
+    black-color: #111,
+    red-color: #ed5f5e,
+    orange-color: #e8873a,
+    yellow-color: #f7c644,
+    green-color: #78b756,
+    blue-color: #2f7cf7,
+    violet-color: #e55d9c
+);
 
-$all-colors: (
-    'white': $white,
-    'black': $black,
-    'red': $red,
-    'orange': $orange,
-    'yellow': $yellow,
-    'green': $green,
-    'blue': $blue,
-    'violet': $violet
+$light-colors: (
+    white-color: #d8e5f1,
+    black-color: #111,
+    red-color: #d04745,
+    orange-color: #e9873a,
+    yellow-color: #f7c84e,
+    green-color: #79b656,
+    blue-color: #2f7cf7,
+    violet-color: #e55d9c
 );
 
-@each $col, $val in $all-colors {
-    .#{$col}-color {
-        color: #{$val};
+body {
+    @each $name, $value in $dark-colors {
+        --#{$name}: #{$value};
+    }
+}
+
+@each $name in map-keys($dark-colors) {
+    .#{$name} {
+        color: var(--#{$name});
     }
 }
 .muted-color {

app/styles/base/_forms.scss

@@ -72,7 +72,7 @@ input:not([type]) {
     }
 
     &:focus {
-        border-color: var(--form-box-border-focus);
+        border-color: var(--form-box-border-color-focus);
         box-shadow: form-box-shadow-focus();
         outline: none;
     }
@@ -152,7 +152,7 @@ select {
         border-color: var(--accent-border-color);
     }
     &:focus {
-        border-color: var(--form-box-border-focus);
+        border-color: var(--form-box-border-color-focus);
         box-shadow: form-box-shadow-focus();
         outline: none;
     }
@@ -186,7 +186,9 @@ input[type='checkbox'] {
         width: 1.3em;
         color: var(--text-color);
         font-size: 1.2em;
-        vertical-align: text-bottom;
+        vertical-align: bottom;
+        position: relative;
+        top: 0.08em;
     }
     &:checked + label:before {
         content: $fa-var-check-square-o;

app/styles/base/_icon-font.scss

@@ -12,7 +12,7 @@
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     display: inline-block;
-    line-height: 1;
+    line-height: $base-line-height;
 }
 
 .fa {

app/styles/base/_properties.scss

@@ -0,0 +1,7 @@
+body {
+    --focus-shadow-spread: 3px;
+    --button-border-radius: 3px;
+    --input-border-radius: 4px;
+    --block-border-radius: 5px;
+    --selected-item-text-color: var(--text-color);
+}

app/styles/base/_theme-vars.scss

@@ -14,8 +14,9 @@
             base-border-color: mix(map-get($t, medium-color), map-get($t, background-color), 50%),
             accent-border-color: mix(map-get($t, medium-color), map-get($t, background-color), 65%),
             light-border-color: mix(map-get($t, medium-color), map-get($t, background-color), map-get($t, light-border-percent)),
-            form-box-border-focus: map-get($t, action-color),
-            form-box-shadow-color-focus: lightness-alpha(map-get($t, action-color), -5%, -0.3),
+            form-box-border-color-focus: mix(map-get($t, action-color), map-get($t, text-color), 70%),
+            form-box-shadow-color-focus: rgba(mix(map-get($t, action-color), map-get($t, text-color), 70%), 0.7),
+            form-box-shadow-color-hover: rgba(mix(map-get($t, action-color), map-get($t, text-color), 70%), 0.5),
             form-box-shadow-color-focus-error: lightness-alpha(map-get($t, error-color), -5%, -0.3),
             dropdown-box-shadow-color: rgba(map-get($t, medium-color), 0.05),
             secondary-background-color: mix(map-get($t, medium-color), map-get($t, background-color), 10%),
@@ -31,7 +32,11 @@
             error-background-color-active: shade(map-get($t, error-color), 25%),
             error-background-color-active-tr: rgba(shade(map-get($t, error-color), 25%), 0.15),
             modal-background-color: rgba(map-get($t, background-color), map-get($t, modal-opacity)),
-            modal-background-color-tr: rgba(map-get($t, background-color), 0)
+            modal-background-color-tr: rgba(map-get($t, background-color), 0),
+            selected-item-color: mix(map-get($t, action-color), map-get($t, background-color), 85%),
+            selected-on-secondary-item-color: mix(map-get($t, medium-color), map-get($t, background-color), 30%),
+            selectable-on-secondary-item-color: mix(map-get($t, medium-color), map-get($t, background-color), 14%),
+            clickable-on-secondary-color: mix(map-get($t, medium-color), map-get($t, background-color), 75%),
         )
     );
 }

app/styles/base/_variables.scss

@@ -7,14 +7,14 @@ $monospace-font-family: 'SFMono-Regular', Monaco, Consolas, 'Lucida Console', mo
 
 // Font Sizes
 $base-font-size: 12px;
-$large-pass-font-size: 22px;
+$large-pass-font-size: 2em;
 
 // Line height
 $base-line-height: 1.5;
 $heading-line-height: 1.2;
 
 // Other Sizes
-$base-border-radius: 1px;
+$base-border-radius: 2px;
 $base-spacing: $base-line-height * 1em;
 $small-spacing: $base-spacing / 2;
 $tiny-spacing: $small-spacing / 2;
@@ -29,6 +29,7 @@ $medium-padding: $medium-padding-v $medium-padding-h;
 $base-padding-px: 5px 10px;
 $modal-icon-size: 6em;
 $large-padding: 2em;
+$titlebar-padding-tiny: 8px;
 $titlebar-padding-small: 24px;
 $titlebar-padding-large: 40px;
 
@@ -39,20 +40,8 @@ $titlebar-padding-large: 40px;
 @function light-border() {
     @return 1px solid var(--light-border-color);
 }
-@function selected-border-width() {
-    @return var(--selected-border-width);
-}
-@function selected-border() {
-    @return selected-border-width() solid var(--action-color);
-}
-@function selected-hover-border() {
-    @return var(--accent-border-width) solid var(--action-color);
-}
-@function selected-transparent-border() {
-    @return var(--accent-border-width) solid transparent;
-}
-@function focused-outline() {
-    @return 1px solid var(--action-color);
+@function focused-box-shadow() {
+    @return 0 0 0 1px var(--action-color);
 }
 
 // Forms
@@ -60,13 +49,14 @@ $titlebar-padding-large: 40px;
     @return inset 0 1px 3px rgba(0, 0, 0, 0.06);
 }
 @function form-box-shadow-focus() {
-    @return form-box-shadow(),
-        0 0 var(--focus-shadow-blur) var(--focus-shadow-spread) var(--form-box-shadow-color-focus);
+    @return form-box-shadow(), 0 0 0 var(--focus-shadow-spread) var(--form-box-shadow-color-focus);
+}
+@function form-box-shadow-hover() {
+    @return form-box-shadow(), 0 0 0 var(--focus-shadow-spread) var(--form-box-shadow-color-hover);
 }
 @function form-box-shadow-focus-error() {
     @return form-box-shadow(),
-        0 0 var(--focus-shadow-blur) var(--focus-shadow-spread)
-            var(--form-box-shadow-color-focus-error);
+        0 0 0 var(--focus-shadow-spread) var(--form-box-shadow-color-focus-error);
 }
 
 // Shadows

app/styles/common/_dropdown.scss

@@ -1,23 +1,29 @@
 .dropdown {
     position: absolute;
     z-index: $z-index-no-modal;
-    border-radius: $base-border-radius;
+    border-radius: var(--block-border-radius);
     background: var(--background-color);
     border: light-border();
     box-shadow: dropdown-box-shadow();
+    padding: $small-spacing;
     &__item {
         padding: 8px 12px;
         cursor: pointer;
         white-space: nowrap;
+        border-radius: var(--block-border-radius);
         &--active,
         &--active:hover {
-            @include area-selected(right);
+            @include area-selected();
         }
         @include nomobile {
-            @include area-selectable(right);
+            @include area-selectable();
+            &:hover {
+                color: var(--text-color);
+                background-color: var(--action-color);
+            }
             &--active,
             &--active:hover {
-                @include area-selected(right);
+                @include area-selected();
             }
         }
         &-icon {

app/styles/common/_icon-select.scss

@@ -13,13 +13,12 @@
         }
     }
     &__icon {
-        @include area-selectable(bottom);
+        @include icon-btn();
+        font-size: 1.6em;
         width: 26px;
-        text-align: center;
-        font-size: 20px;
-        padding: 10px;
+        padding: $base-padding-v;
         &.icon-select__icon--active {
-            @include area-selected(bottom);
+            @include area-selected();
         }
         &-btn {
             padding: 5px 10px;

app/styles/common/_scroll.scss

@@ -10,13 +10,13 @@
         z-index: 3;
         top: 10px;
         bottom: 10px;
-        right: 5px;
-        width: 8px;
+        right: 1px;
+        width: 7px;
     }
     &__bar {
         position: absolute;
         z-index: 1;
-        width: 8px;
+        width: 7px;
         border-radius: 3px;
         pointer-events: auto;
         -webkit-app-region: no-drag;

app/styles/common/_tip.scss

@@ -1,7 +1,6 @@
 .tip {
     position: absolute;
     padding: $base-padding;
-    border-radius: $base-border-radius;
     white-space: nowrap;
     z-index: $z-index-no-modal;
     pointer-events: none;

app/styles/themes/_all-themes.scss

@@ -1,14 +1,14 @@
 $themes: ();
 
 @import 'theme-defaults';
+@import 'dark';
+@import 'light';
 @import 'dark-brown';
 @import 'flat-blue';
-@import 'white';
 @import 'terminal';
 @import 'high-contrast';
 @import 'solarized-dark';
 @import 'solarized-light';
-@import 'macos-dark';
 
 @each $theme-name, $theme-vars in $themes {
     $theme-vars: set-theme-vars($theme-vars);

app/styles/themes/_dark.scss

@@ -0,0 +1,26 @@
+$themes: map-merge(
+    $themes,
+    (
+        dark:
+            map-merge(
+                $theme-defaults,
+                (
+                    background-color: #1e1e1e,
+                    medium-color: #b7b7b8,
+                    text-color: #f7f7f7,
+                    action-color: #317ef6,
+                    error-color: #ec655a
+                )
+            )
+    )
+);
+
+body.th-dark {
+    --form-box-border-color-focus: #407091;
+    --form-box-shadow-color-focus: #3a698b;
+    --form-box-shadow-color-hover: rgba(58, 105, 139, 0.8);
+    --light-border-color: rgb(68, 68, 69, 0.7);
+    --secondary-background-color: #2d2d2e;
+    --selected-item-color: #2463c8;
+    --selected-on-secondary-item-color: #403f40;
+}

app/styles/themes/_high-contrast.scss

@@ -4,16 +4,24 @@ $themes: map-merge(
         hc:
             map-merge(
                 $theme-defaults,
-                (
-                    background-color: #fafafa,
-                    medium-color: #050505,
-                    text-color: #050505,
-                    action-color: #2d72d7,
-                    error-color: #e74859,
-                    mute-percent: 60%,
-                    light-border-percent: 50%,