podman-desktop
podman-desktop copied to clipboard
containers
Next batch of colors in light mode palette
Is your enhancement related to a problem? Please describe
We need the next batch of colors for light mode.
Describe the solution you'd like
We will meet and figure out how we want to work on this, but we need to define the next batch of colors for light mode.
The coming components/pages in rough order:
- Select component
- NavPage (main pages, mostly background colors)
- Form pages
- Details page
- Tables
- Preferences tiles
- Tooltips
Describe alternatives you've considered
No response
Additional context
No response
I'm unsure what you mean exactly by NavPage, but is this what you're referring to? I refer to it as the main content theming and then the invert content theming for when you are in the settings.
Content Theming:
Invert Content Theming:
NavPage is just the main pages like Containers, Images. Same header / major colors as Content Theming (what we call a form page) so this is likely enough for @feloy.
Today the forms (content theming) have a different bg color on the card in addition to the content-card-bg. Are we removing those? e.g. light gray here:
@ekidneyrh there is also this thin line below the tabs names, used in NavPage (see first screenshot - Containers List page) and FormPage (see second screenshot - Troubleshooting page), which is not defined in the Content Theming afaik. In the sources, it is defined as charcoal-400 for dark mode.
NavPage is just the main pages like Containers, Images. Same header / major colors as Content Theming (what we call a form page) so this is likely enough for @feloy.
Today the forms (content theming) have a different bg color on the card in addition to the content-card-bg. Are we removing those? e.g. light gray here:
I forgot I made this change on the mock-ups when I first did this at the start of the year. IMO it looks cleaner, but that's up for debate I think. WDYT?
@ekidneyrh there is also this thin line below the tabs names, used in NavPage (see first screenshot - Containers List page) and FormPage (see second screenshot - Troubleshooting page), which is not defined in the Content Theming afaik. In the sources, it is defined as
charcoal-400for dark mode.
I still need to add this version of the screen in! But yes charcoal-400 is the way to go
@ekidneyrh there is also this thin line below the tabs names, used in NavPage (see first screenshot - Containers List page) and FormPage (see second screenshot - Troubleshooting page), which is not defined in the Content Theming afaik. In the sources, it is defined as
charcoal-400for dark mode.I still need to add this version of the screen in! But yes charcoal-400 is the way to go
What would be the color for light mode?
@ekidneyrh In the Content Theming as defined above, some color names are not prefixed by content- (action-button, action-button-text, ghost-button, card-checked-box-icon). Is it on purpose? If so, does this mean that these colors are part of another theming (but displayed here for information)?
What would be the color for light mode?
I haven't got to do that page up yet, but gray-700 seems like a reasonable choice.
@ekidneyrh In the Content Theming as defined above, some color names are not prefixed by
content-(action-button,action-button-text,ghost-button,card-checked-box-icon). Is it on purpose? If so, does this mean that these colors are part of another theming (but displayed here for information)?
I believe that bc those are colours that can be used else where / aren't unique to the content page.
+ _ - Button Light.pdf
+ _ - Button Dark.pdf
Here's the theming for the +/- button. Added an error message underneath to aid colour-blind users
I've started adding the up-to-date colours to https://github.com/containers/podman-desktop/wiki/Design-System-Theming for easier filing
Updated the description with where to find the current theming.
Will review tables, preferences tiles, and tooltips in coming days.
For tables, here are the colours:
Updated with arrows and updated in the nav page section on the wiki https://github.com/containers/podman-desktop/wiki/Design-System-Theming#nav-page
As I was doing the preference tiles, I came across the drop-down and the toggle buttons, so I've included them in this ticket.
The drop-down follows the same values as the +/- button.
dropdown_light.pdf
dropdown_dark.pdf
Preferences page This can also be referenced as the inverted content page
Invert Content _ Preferences Theming.pdf
Tooltips What is currently implemented is good :) I documented it anyway for reference. Only change is the text for light.tooptip-text, I'd have that as charcoal-900 rather than black.