diff options
author | Kristóf Marussy <kristof@marussy.com> | 2021-05-29 21:09:41 +0200 |
---|---|---|
committer | Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com> | 2021-05-30 04:56:58 +0530 |
commit | 38e90556cd8c5d51dc2af74cf69ddc8386a98730 (patch) | |
tree | 789e3c7b6359b885eaa9dc02bf90648eff727a28 /src/features/appearance/index.js | |
parent | Bump ws from 6.2.1 to 7.4.6 (#1463) (diff) | |
download | ferdium-app-38e90556cd8c5d51dc2af74cf69ddc8386a98730.tar.gz ferdium-app-38e90556cd8c5d51dc2af74cf69ddc8386a98730.tar.zst ferdium-app-38e90556cd8c5d51dc2af74cf69ddc8386a98730.zip |
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).
Diffstat (limited to 'src/features/appearance/index.js')
-rw-r--r-- | src/features/appearance/index.js | 10 |
1 files changed, 8 insertions, 2 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) { | |||
18 | styleElement.innerHTML = style; | 18 | styleElement.innerHTML = style; |
19 | } | 19 | } |
20 | 20 | ||
21 | // See https://github.com/Qix-/color/issues/53#issuecomment-656590710 | ||
22 | function darkenAbsolute(originalColor, absoluteChange) { | ||
23 | const originalLightness = originalColor.lightness(); | ||
24 | return originalColor.lightness(originalLightness - absoluteChange); | ||
25 | } | ||
26 | |||
21 | function generateAccentStyle(accentColorStr) { | 27 | function generateAccentStyle(accentColorStr) { |
22 | let style = ''; | 28 | let style = ''; |
23 | 29 | ||
@@ -35,10 +41,10 @@ function generateAccentStyle(accentColorStr) { | |||
35 | } catch (e) { | 41 | } catch (e) { |
36 | // Ignore invalid accent color. | 42 | // Ignore invalid accent color. |
37 | } | 43 | } |
38 | const darkerColorStr = accentColor.darken(0.05).hex(); | 44 | const darkerColorStr = darkenAbsolute(accentColor, 5).hex(); |
39 | style += ` | 45 | style += ` |
40 | a.button:hover, button.button:hover { | 46 | a.button:hover, button.button:hover { |
41 | background: ${accentColor.darken(0.1).hex()}; | 47 | background: ${darkenAbsolute(accentColor, 10).hex()}; |
42 | } | 48 | } |
43 | 49 | ||
44 | .franz-form__button:hover, | 50 | .franz-form__button:hover, |