Retheme to better match Fedora #524
Conversation
garrett
commented
Nov 19, 2024
garrett
commented
- Shift PF blue palette colors to use official Fedora blue and PF-inspired variants that better match Fedora
- Recolor Fedora logo to be the white-on-dark version (which isn't provided, so we filter it)
- Optimize link and buttons colors for both brand and legibility
|
I think this should be nearly done, but it's EOBD, so I'm sharing what I have now as draft. I'll double check it tomorrow and may make some (possibly) smaller changes if it's not quite ready. |
| } | ||
|
|
||
| /* Have the kebab toggle inherit the text color */ | ||
| #toggle-kebab { |
There was a problem hiding this comment.
Is this section specific to the fedora colors? Should it not be always black? Can you show me some example?
There was a problem hiding this comment.
This is specific to Fedora, as we're recoloring the header for Fedora, so the kebab needs to be able to be seen. Having it black on blue means it wouldn't be high contrast enough and wouldn't be seen. Therefore, it needs to be light to be on dark, just like the logo and the text in the header.
There was a problem hiding this comment.
Working on creating and booting up a VM now to demonstrate via screenshots.
src/branding/fedora.scss
Outdated
|
|
||
| /* Give menu list items a blue tint in light mode */ | ||
| .pf-v5-c-menu__list-item:has(.pf-m-selected) { | ||
| --pf-v5-c-menu__list-item--hover--BackgroundColor: var(--pf-v5-global--palette--blue-50); |
There was a problem hiding this comment.
This is light grey normally right?
I dont object changing this really, but this goes beyond branding if we are changin grey to blue. It's really custom styling divergent from Patternfly's and should be isolated as override with our common way of overriding patternlfy CSS.
There was a problem hiding this comment.
This makes the selection more obvious and makes it use Fedora-coloring, but we can drop this, if you'd rather.
I'm not sure if anyone would even see this in the Workstation build anyway. (I think it's just in the language selector right now?) It's really completely optional and I'll go ahead and drop it.
There was a problem hiding this comment.
As white (in this PR):
Kebab, without adjustments:
PF dark masthead:
https://v5-archive.patternfly.org/components/masthead
Color checking:
https://colorcontrast.app/#fg=%236a6e73&bg=%2351a2da&level=aa&format=rgb&algo=WCAG2&filter=none
The white on that blue is not perfect, but it's better, and it's what Fedora uses too:
https://colorcontrast.app/#fg=%23fff&bg=%2351a2da&level=aa&format=rgb&algo=WCAG2&filter=none
I think that's why Fedora has a gradient in their header @ https://www.fedoraproject.org/ to make the text more legible. We don't have text in the right side however. I could consider darkening our titlebar to make it not match Fedora's official branding, but be a little darker (probably based on a blend of the color it is now and the one a shade darker, with the dark at either at 50% or possibly even 25%, or 12.5% so it's just a little darker – both of these two blue shades are official Fedora colors anyway).
…LCH instead of srgb
