aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorLibravatar Kristóf Marussy <kristof@marussy.com>2021-05-29 21:09:41 +0200
committerLibravatar Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com>2021-05-30 04:56:58 +0530
commit38e90556cd8c5d51dc2af74cf69ddc8386a98730 (patch)
tree789e3c7b6359b885eaa9dc02bf90648eff727a28
parentBump ws from 6.2.1 to 7.4.6 (#1463) (diff)
downloadferdi-38e90556cd8c5d51dc2af74cf69ddc8386a98730.tar.gz
ferdi-38e90556cd8c5d51dc2af74cf69ddc8386a98730.tar.zst
ferdi-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).
-rw-r--r--src/features/appearance/index.js10
-rw-r--r--src/styles/tabs.scss3
2 files changed, 10 insertions, 3 deletions
diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js
index 3bd6a657..82a0971e 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
22function darkenAbsolute(originalColor, absoluteChange) {
23 const originalLightness = originalColor.lightness();
24 return originalColor.lightness(originalLightness - absoluteChange);
25}
26
21function generateAccentStyle(accentColorStr) { 27function 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,
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index fb2f1c32..31a23938 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -33,7 +33,8 @@
33 width: $theme-sidebar-width; 33 width: $theme-sidebar-width;
34 34
35 &.is-active { 35 &.is-active {
36 background: lighten($theme-brand-primary, 35%); 36 background: change-color($theme-brand-primary,
37 $lightness: min(lightness($theme-brand-primary) * 1.35, 100));
37 border-left-width: 4px; 38 border-left-width: 4px;
38 border-left-style: solid; 39 border-left-style: solid;
39 color: $theme-brand-primary; 40 color: $theme-brand-primary;