From 38e90556cd8c5d51dc2af74cf69ddc8386a98730 Mon Sep 17 00:00:00 2001 From: Kristóf Marussy Date: Sat, 29 May 2021 21:09:41 +0200 Subject: 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). --- src/features/appearance/index.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'src/features') 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, -- cgit v1.2.3-54-g00ecf