popup: Add light theme

Closes browserpass#98

Author: adtac

src/options/interface.js

@@ -59,7 +59,12 @@ function view(ctl, params) {
     nodes.push(createInput.call(this, "gpgPath", "Custom gpg binary", "/path/to/gpg"));
 
     nodes.push(m("h3", "Theme"));
-    nodes.push(createDropdown.call(this, "theme", [m("option", { value: "dark" }, "Dark")]));
+    nodes.push(
+        createDropdown.call(this, "theme", [
+            m("option", { value: "dark" }, "Dark"),
+            m("option", { value: "light" }, "Light")
+        ])
+    );
 
     nodes.push(m("h3", "Custom store locations"));
     nodes.push(

src/popup/colors-light.less

@@ -0,0 +1,34 @@
+@import "colors.less";
+
+.colors-light {
+    .colors(
+        @bg-color: #f1f3f5,
+        @default-bg-color: #dee2e6,
+        @hover-bg-color: #ced4da,
+        @text-color: #343a40,
+        @error-text-color: #e03131,
+        @dim-text-color: #868e96,
+        @badge-color: #b8b8b8,
+        @input-bg-color: #eaeef1,
+        @active-input-bg-color: #e8ebee,
+        @input-text-color: #343a40,
+        @hint-bg-color: #1c7ed6,
+        @hint-color: #e7f5ff
+    );
+
+    .part.login .name .line1 .recent,
+    .part.login .action.copy-password,
+    .part.login .action.copy-user {
+        filter: invert(85%);
+    }
+
+    .part.login .name .line1 .recent:focus,
+    .part.login .name .line1 .recent:hover,
+    .part.login .action.copy-password:focus,
+    .part.login .action.copy-password:hover,
+    .part.login .action.copy-user:focus,
+    .part.login .action.copy-user:hover {
+        // colour such that invert(85%) ~= @hover-bg-color
+        background-color: #0c0804;
+    }
+}

src/popup/popup.less

@@ -1,4 +1,5 @@
 @import "colors-dark.less";
+@import "colors-light.less";
 
 @login-height: 53px;
 @max-logins-height: @login-height * 7;