Fixes issues welcome & settings editor with light themes

CHANGELOG.md

@@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 ### Fixed
 - Fixes [#462](https://github.com/eamodio/vscode-gitlens/issues/462) - Source Control shortcut on macOS (⌃⇧G) shouldn't be overridden
 - Fixes [#457](https://github.com/eamodio/vscode-gitlens/issues/457) - Displays the wrong username (You) — thanks to [PR #460](https://github.com/eamodio/vscode-gitlens/pull/460) by Zyck ([@qzyse2017](https://github.com/qzyse2017))
+- Fixes issues with GitLens Welcome and the interactive settings editor with light themes
 
 ## [8.5.3] - 2018-07-25
 ### Fixed

src/ui/scss/main.scss

@@ -24,13 +24,7 @@ a {
     }
 
     &:focus {
-        .vscode-light & {
-            outline-color: var(--background-color--darken-30);
-        }
-
-        .vscode-dark & {
-            outline-color: var(--background-color--lighten-30);
-        }
+        outline-color: var(--focus-border-color);
     }
 }
 
@@ -113,7 +107,7 @@ button {
     margin: 0;
 }
 
-input[type=checkbox] {
+input[type='checkbox'] {
     background: none;
     border: none;
     cursor: pointer;
@@ -132,18 +126,33 @@ input[type=checkbox] {
     }
 }
 
-input[type=text],
+input[type='text'],
 input:not([type]) {
     background: none;
-    border: 1px solid var(--color);
     color: var(--color);
     margin: 0 0.75em;
     max-width: 300px;
     padding: 4px;
     width: 100%;
 
+    .vscode-light & {
+        border: 1px solid rgba(0, 0, 0, 0.3);
+    }
+
+    .vscode-dark & {
+        border: 1px solid rgba(255, 255, 255, 0.3);
+    }
+
     &:focus {
-        background: rgba(0, 0, 0, 0.1);
+        outline-color: var(--focus-border-color);
+
+        .vscode-light & {
+            background-color: rgba(255, 255, 255, 0.4);
+        }
+
+        .vscode-dark & {
+            background-color: rgba(0, 0, 0, 0.2);
+        }
     }
 
     &[disabled] {
@@ -152,12 +161,12 @@ input:not([type]) {
     }
 
     &::placeholder {
-        color: var(--color--50);
+        color: var(--vscode-input-placeholderForeground);
     }
 }
 
 label {
-    cursor : pointer;
+    cursor: pointer;
 }
 
 section {
@@ -176,17 +185,29 @@ section {
 }
 
 select {
+    background: none;
     color: var(--color);
     cursor: pointer;
     margin: 0 0.75em;
     padding: 2px;
 
     .vscode-light & {
-        background-color: var(--background-color--darken-05);
+        border: 1px solid rgba(0, 0, 0, 0.3);
     }
 
     .vscode-dark & {
-        background-color: var(--background-color--lighten-05);
+        border: 1px solid rgba(255, 255, 255, 0.3);
+    }
+
+    &:focus {
+        outline-color: var(--focus-border-color);
+        .vscode-light & {
+            background-color: rgba(255, 255, 255, 0.4);
+        }
+
+        .vscode-dark & {
+            background-color: rgba(0, 0, 0, 0.2);
+        }
     }
 
     &[disabled] {
@@ -203,6 +224,17 @@ select option {
     .vscode-dark & {
         background-color: var(--background-color--lighten-05);
     }
+
+    &:focus {
+        outline-color: var(--focus-border-color);
+        .vscode-light & {
+            background-color: rgba(255, 255, 255, 0.4);
+        }
+
+        .vscode-dark & {
+            background-color: rgba(0, 0, 0, 0.2);
+        }
+    }
 }
 
 ul {
@@ -237,13 +269,27 @@ ul {
 }
 
 .button--flat {
-    border: 1px solid rgba(255, 255, 255, 0.6);
-    color: white !important;
+    .vscode-light & {
+        border: 1px solid rgba(0, 0, 0, 0.6);
+        color: black;
+    }
+    .vscode-dark & {
+        border: 1px solid rgba(255, 255, 255, 0.6);
+        color: white !important;
+    }
     transition: background-color 250ms, border-color 250ms, color 250ms;
 
     &:hover {
-        background-color: white;
-        color: black !important;
+        .vscode-light & {
+            background-color: var(--button-background-color--darken-30);
+            border-color: var(--button-background-color--darken-30);
+            color: white !important;
+        }
+        .vscode-dark & {
+            background-color: white;
+            border-color: white;
+            color: black !important;
+        }
     }
 
     .preload & {
@@ -270,16 +316,23 @@ ul {
 }
 
 .button--flat-primary {
-    background-color: var(--link-color--darken-20);
-    border: 1px solid var(--link-color--darken-20);
-    color: white !important;
+    background-color: var(--button-background-color);
+    border: 1px solid var(--button-background-color);
+    color: var(--button-color) !important;
     font-weight: 600;
     transition: background-color 250ms, border-color 250ms, color 250ms;
 
     &:hover {
-        background-color: white;
-        border-color: white;
-        color: black !important;
+        .vscode-light & {
+            background-color: var(--button-background-color--darken-30);
+            border-color: var(--button-background-color--darken-30);
+            color: white !important;
+        }
+        .vscode-dark & {
+            background-color: white;
+            border-color: white;
+            color: black !important;
+        }
     }
 
     .preload & {
@@ -379,7 +432,7 @@ ul {
 
     &:before {
         border-left: 1px solid rgba(122, 122, 122, 0.15);
-        content: " ";;
+        content: ' ';;
         height: calc(100% + 7px);
         left: 37px;
         position: absolute;
@@ -499,7 +552,7 @@ ul {
 
     & p {
         margin-top: -1em;
-        opacity: 0.4;
+        opacity: 0.6;
     }
 }
 
@@ -538,7 +591,9 @@ ul {
     color: var(--color);
     outline: none;
 
-    &:hover, &:active, &:focus {
+    &:hover,
+    &:active,
+    &:focus {
         color: var(--color);
         outline: none;
     }
@@ -623,7 +678,8 @@ ul {
         background-color: var(--background-color--lighten-05);
     }
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
         .vscode-light & {
             background-color: var(--background-color--darken-075);
         }
@@ -646,16 +702,15 @@ ul {
     }
 }
 
-.list-button__title{
+.list-button__title {
     font-size: 1em;
     font-weight: 400;
     margin: 0;
-    margin-bottom: .25em;
+    margin-bottom: 0.25em;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-
 .list-button__detail {
     color: var(--color--75);
     display: inline-block;
@@ -707,13 +762,14 @@ ul {
         margin-right: -9px;
     }
 
-    select, option {
+    select,
+    option {
         background-color: var(--background-color) !important;
     }
 }
 
 .page-header__subtitle {
-    color: var(--color--50);
+    color: var(--color--75);
     margin: 0.25em 0 0 0;
 }
 
@@ -732,7 +788,7 @@ ul {
 }
 
 .section__settings--multi {
-    & >.settings-group {
+    & > .settings-group {
         flex-basis: 100%;
         margin-left: 1em;
     }
@@ -889,7 +945,7 @@ ul {
     margin-bottom: 0.75em;
     position: relative;
 
-    & input[type=checkbox] {
+    & input[type='checkbox'] {
         flex: 16px 0 0;
         height: 16px;
         margin: 0 0.75em 0 0;
@@ -965,4 +1021,4 @@ ul {
     flex-wrap: nowrap !important;
 }
 
-@import 'popup';
+@import 'popup';

src/ui/settings/app.ts

@@ -1,7 +1,7 @@
 'use strict';
-import { DOM } from './../shared/dom';
-import { App } from '../shared/app-base';
 import { SettingsBootstrap } from '../ipc';
+import { App } from '../shared/app-base';
+import { DOM } from './../shared/dom';
 
 const bootstrap: SettingsBootstrap = (window as any).bootstrap;
 
@@ -84,8 +84,9 @@ export class SettingsApp extends App {
         if (
             (e.target as HTMLElement).matches('i.icon__info') ||
             (e.target as HTMLElement).matches('a.link__learn-more')
-        )
+        ) {
             return;
+        }
 
         element.classList.toggle('collapsed');
     }

src/ui/shared/app-base.ts

@@ -1,7 +1,7 @@
 'use strict';
-import { DOM } from './../shared/dom';
 import { darken, lighten, opacity } from '../shared/colors';
 import { Bootstrap, Message, SaveSettingsMessage } from './../ipc';
+import { DOM } from './../shared/dom';
 
 interface VsCodeApi {
     postMessage(msg: {}): void;
@@ -16,7 +16,10 @@ export abstract class App {
     private _changes: { [key: string]: any } = Object.create(null);
     private _updating: boolean = false;
 
-    constructor(protected readonly appName: string, protected readonly bootstrap: TBootstrap) {
+    constructor(
+        protected readonly appName: string,
+        protected readonly bootstrap: TBootstrap
+    ) {
         this.log(`${this.appName}.ctor`);
 
         this._api = acquireVsCodeApi();
@@ -89,7 +92,8 @@ export abstract class App {
 
                 if (element.checked) {
                     set(setting, props.join('.'), fromCheckboxValue(element.value));
-                } else {
+                }
+                else {
                     set(setting, props.join('.'), false);
                 }
 
@@ -104,7 +108,8 @@ export abstract class App {
                         if (!setting.includes(element.value)) {
                             setting.push(element.value);
                         }
-                    } else {
+                    }
+                    else {
                         const i = setting.indexOf(element.value);
                         if (i !== -1) {
                             setting.splice(i, 1);
@@ -118,7 +123,8 @@ export abstract class App {
             default: {
                 if (element.checked) {
                     this._changes[element.name] = fromCheckboxValue(element.value);
-                } else {
+                }
+                else {
                     this._changes[element.name] = false;
                 }
 
@@ -329,6 +335,19 @@ export abstract class App {
 
             color = computedStyle.getPropertyValue('--link-color').trim();
             bodyStyle.setProperty('--link-color--darken-20', darken(color, 20));
+
+            bodyStyle.setProperty(
+                '--focus-border-color',
+                computedStyle.getPropertyValue('--vscode-focusBorder').trim()
+            );
+
+            color = computedStyle.getPropertyValue('--vscode-button-background').trim();
+            bodyStyle.setProperty('--button-background-color', color);
+            bodyStyle.setProperty('--button-background-color--darken-30', darken(color, 30));
+            bodyStyle.setProperty(
+                '--button-color',
+                computedStyle.getPropertyValue('--vscode-button-foreground').trim()
+            );
         };
 
         const observer = new MutationObserver(onColorThemeChanged);
@@ -363,7 +382,8 @@ export abstract class App {
                     option.selected = true;
                 }
             }
-        } finally {
+        }
+        finally {
             this._updating = false;
         }
 
@@ -386,13 +406,15 @@ export abstract class App {
             const disabled = !this.evaluateStateExpression(el.dataset.enablement!, state);
             if (disabled) {
                 el.setAttribute('disabled', '');
-            } else {
+            }
+            else {
                 el.removeAttribute('disabled');
             }
 
             if (el.matches('input,select')) {
                 (el as HTMLInputElement | HTMLSelectElement).disabled = disabled;
-            } else {
+            }
+            else {
                 const input = el.querySelector<HTMLInputElement | HTMLSelectElement>('input,select');
                 if (input == null) continue;
 
@@ -464,7 +486,8 @@ function flatten(o: { [key: string]: any }, path?: string): { [key: string]: any
 
         if (typeof value === 'object') {
             Object.assign(results, flatten(value, path === undefined ? key : `${path}.${key}`));
-        } else {
+        }
+        else {
             results[path === undefined ? key : `${path}.${key}`] = value;
         }
     }

src/ui/welcome/app.ts

@@ -1,7 +1,7 @@
 'use strict';
-import { DOM } from './../shared/dom';
-import { App } from '../shared/app-base';
 import { WelcomeBootstrap } from '../ipc';
+import { App } from '../shared/app-base';
+import { DOM } from './../shared/dom';
 
 const bootstrap: WelcomeBootstrap = (window as any).bootstrap;