Replace accent color with grey for button hover background in Paella #1031
Conversation
We had problems with this as the automatically derived accent colors (dark and light version) look very different hue-wise. We thought about just making both configurable but I got an idea that I like better, I think: don't use the accent color for the hover effect. Instead, a grey color is used which makes hovering less "flashy", which is good IMO. The YouTube player for example only has very subtle hover effects. It does have a changing cursor, which Paella should get as well, but that's a different issue.
|
I like this solution. Thx! |
|
+1. Am I correct in assuming we still have two different "blues" in Tobira and Paella?
|
I'm not 100% sure what your asking:
But ok, good to hear you like the solution. Then I'm just waiting for a code review by Ole (currently sick, unfortunately). |
Bummer. Is there a ticket for this already? |
No, that is by design. We do need multiple brightness versions of the primary color. For example, the text color changes when hovering a main navigation item or a link. But there are many more examples of this and this was the case since the very beginning already. Needing multiple brightness levels of the primary color is not inherently bad. The problem with the Paella colors was that we created versions with two very different brightnesses (i.e. one dark, one bright) that were used right next to one another. |
|
Is this related to what is being described at https://ethz.ch/staffnet/en/service/communication/corporate-design/colours.html under "Using different shades"? |
|
Exactly. Your CI has different shades for every color for the same reason that Tobira creates a few different shades of the primary color: just having one shade is just too limiting for UI design. |
|
Great. So for https://video.test.tobira.ethz.ch/ to match the ETH CD, we simply select a specific shade for each element using color? |
|
Tobira will create the shades automatically. You only need to configure on shade (in a specific brightness range). Tobira does the rest for you. |
|
Great. So if we configure #215CAF, it will use #4D7DBF, #7A9DCF, #A6BEDF, #D3DEEF, #E9EFF7, and #08407E accordingly / where needed? And what about Paella Player? |
|
Not exactly those brightness values/shades but still shades with the exact same color tone. And the Paella player in Tobira also uses that. Let's maybe talk about this in person on Wednesday, if you have further questions. |
|
I wonder why paella isn't using the exact same shade for progress bar and volume control. Didn't even notice this before. And I did have to check with a color picker, as they are very close to each other. But that is a paella thing, nothing to do with this PR. |
|
Oh and I do like the hover solution as well, nice! |
According to the conversation Lukas and I had with Valencia last week, this should become an issue here, so that "Tobira devs (Ole and myself) then figure out where the problem originates." Cf. #1039 |
|
Correct, thanks for opening the issue! |
We had problems with this as the automatically derived accent colors (dark and light version) look very different hue-wise. We thought about just making both configurable but I got an idea that I like better, I think: don't use the accent color for the hover effect. Instead, a grey color is used which makes hovering less "flashy", which is good IMO. The YouTube player for example only has very subtle hover effects. It does have a changing cursor, which Paella should get as well, but that's a different issue.
So yeah, I propose this as it's a really simple solution and I think it even looks better!
Opinions @oas777 @dagraf ?
Here are screenshots with a few different primary colors:
ETH Blau
ETH Grün
ETH Rot
ETH Purpur
Bern Blue
