From c46795c6922bdfc3f3669d71f0c5867cb2f1577a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Apr 2018 06:02:01 +0300
Subject: [PATCH] use semi-transparent faint color + fix

---
 src/_variables.scss                             | 2 +-
 src/components/notifications/notifications.scss | 2 +-
 src/services/style_setter/style_setter.js       | 5 +----
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/_variables.scss b/src/_variables.scss
index d90a1d48..3cd55868 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -4,7 +4,7 @@ $darkened-background: whitesmoke;
 
 $fallback--bg: #121a24;
 $fallback--btn: #182230;
-$fallback--faint: #999;
+$fallback--faint: rgba(185, 185, 186, .5);
 $fallback--fg: #b9b9ba;
 $fallback--link: #d8a070;
 $fallback--icon: #666;
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 9cbb1226..008530b4 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -98,7 +98,7 @@
       .status {
         padding: 0.25em 0;
         color: $fallback--faint;
-        color: var($fallback--faint, --faint);
+        color: var(--faint, $fallback--faint);
       }
       padding: 0;
       .media-body {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 9dc4a3e1..3e96f54d 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -72,10 +72,7 @@ const setColors = (col, commit) => {
   colors.lightBg = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg
   colors.btn = rgb2hex(col.fg.r, col.fg.g, col.fg.b)                         // panels & buttons
   colors.border = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod)       // borders
-  colors.faint = rgb2hex(
-    col.text.r * 0.45 + col.fg.r * 0.55,
-    col.text.g * 0.45 + col.fg.g * 0.55,
-    col.text.b * 0.45 + col.fg.b * 0.55) // faint text
+  colors.faint = `rgba(${col.text.r}, ${col.text.g}, ${col.text.b}, .5)`
   colors.fg = rgb2hex(col.text.r, col.text.g, col.text.b)                   // text
   colors.lightFg = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text