Fix color adjustment confusion

SCSS functions apply absolute change to the color lightness values, but
the 'color' npm package does relative changes. This lead to inconsistent
behavior between the default and custom accent colors.

See also https://github.com/Qix-/color/issues/53#issuecomment-656590710

We use relative adjustment for buttons. For the service switcher in
light mode, we use relative adjustment instead, because absolute
adjustment made the buttons too hard to see (#235).

2 files changed, 10 insertions, 3 deletions

diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js
index 3bd6a6575..82a0971eb 100644
--- a/src/features/appearance/index.js
+++ b/src/features/appearance/index.js
@@ -18,6 +18,12 @@ function setAppearance(style) {
   styleElement.innerHTML = style;
 }
 
+// See https://github.com/Qix-/color/issues/53#issuecomment-656590710
+function darkenAbsolute(originalColor, absoluteChange) {
+  const originalLightness = originalColor.lightness();
+  return originalColor.lightness(originalLightness - absoluteChange);
+}
+
 function generateAccentStyle(accentColorStr) {
   let style = '';
 
@@ -35,10 +41,10 @@ function generateAccentStyle(accentColorStr) {
   } catch (e) {
     // Ignore invalid accent color.
   }
-  const darkerColorStr = accentColor.darken(0.05).hex();
+  const darkerColorStr = darkenAbsolute(accentColor, 5).hex();
   style += `
     a.button:hover, button.button:hover {
-      background: ${accentColor.darken(0.1).hex()};
+      background: ${darkenAbsolute(accentColor, 10).hex()};
     }
 
     .franz-form__button:hover,
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index fb2f1c32a..31a239387 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -33,7 +33,8 @@
   width: $theme-sidebar-width;
 
   &.is-active {
-    background: lighten($theme-brand-primary, 35%);
+    background: change-color($theme-brand-primary,
+                             $lightness: min(lightness($theme-brand-primary) * 1.35, 100));
     border-left-width: 4px;
     border-left-style: solid;
     color: $theme-brand-primary;