israel-dryer / ttkbootstrap

A supercharged theme extension for tkinter that enables on-demand modern flat style themes inspired by Bootstrap.
MIT License
1.88k stars 375 forks source link

Add formatting for disabled button state #1

Closed israel-dryer closed 3 years ago

daniilS commented 3 years ago

I feel like for some themes (flatly, lumen, cyborg), the grey-on-grey entry widgets would also be more suitable for the disabled state.

israel-dryer commented 3 years ago

possibly. But, I do like the contrast on the gray input vs. the white background though. One simple and scalable solution might be to de-saturate the colors on all disabled widgets.

image

daniilS commented 3 years ago

Yeah, I agree it does look nice, so I guess it's a trade-off between style and potential confusion as the colours do look very similar to the disables buttons in the bootstrap theme it came from. I don't mind much as I'm using the yeti in my current project.

Another scalable option for disabled widgets is to take the rgb average between each colour and the frame background colour: image

israel-dryer commented 3 years ago

Yeah true. I could also use a darker fg color in the input widgets. The reason I used the lighter shade was to mimic the bootstrap themes. But, I'm not necessarily married to it.

The saturation and lightness is hard to make consistently correct... I'm having some issues trying to keep the colors contrasted sufficiently to be legible, but also indicate clearly a disabled state. It might not be worth the extra effort. I'm tempted to just use the standard dim grey tone for disabled buttons & widgets.

image

I really wish there was an easy way to add stippled, as that would be another nice option... but unfortunately, though the option is available in the Button.label element options, I see no way to actually implement it.

daniilS commented 3 years ago

I'd support making the input text a little darker, the added contrast should make them a lot more readable. The grey tones work great (and wouldn't even need to differ between themes much, if at all), but if you decide you want to keep the difference between button colours in the disabled state, I think the fake transparency would be the easiest way to preserve contrast. Though I guess it would lose its effect if the widget is placed in a frame with its own background colour...

israel-dryer commented 3 years ago

I ended up adding a new set of colors for each theme: inputbg, disabledfg, disabledbg. This turned out well for most of the themes. There are a few that might need adjusted on the inputfg and inputbg. However, all-in-all, this ended up being much easier than trying to do it programmatically, and with acceptable results I think. This creates more colors on the ttkcreator app, however. The color list is getting a bit long, and the shape of the app a bit unwieldy. But, I'll open another issue for that.

Let me know what you think of the disabled colors + the new input fg & bg colors.

israel-dryer commented 3 years ago

image

israel-dryer commented 3 years ago

image

israel-dryer commented 3 years ago

image

israel-dryer commented 3 years ago

image

israel-dryer commented 3 years ago

@daniilS, I had to make some tweaks to the color palette when adding the inputfg and disabled colors. The lighter inputfg DOES make the disabled state more clear, but it also results in a much brighter contrast vs. the more muted colors of the original, especially on dark themes. This makes the themes a bit more true to the reference themes on www.bootswatch.com. But, probably I'll need to add some more dark themes that have that more muted look for those that prefer an overall darker theme. Here's an example of the before/after from the inputfg/bg changes:

original cyborg new image

daniilS commented 3 years ago

I agree that the muted look is a lot nicer than the bootswatch original. It might be better to leave the inputbg unchanged (it might not even need its own setting), and just darken the existing inputfg a little: Original: lumen Darker inputfg: lumen Original: flatly Darker inputfg: flatly Original: cyborg Darker inputfg: cyborg

israel-dryer commented 3 years ago

yeah, agreed. I simplified the color palette by removing disabled button colors. I merged light and inputbg into one inputbg. The disabled colors are modifications of the input colors. The end result is that I have the same number of colors as originally except that now I have inputbg instead of light, which I think makes more sense from a design perspective.

israel-dryer commented 3 years ago

I also reviewed all of the themes are darkened the inputfg

daniilS commented 3 years ago

I like the new colours! My only comment is that now there's no difference between disabled buttons, outline buttons, and entry-like widgets. What do you think of keeping disabled solid buttons as they are now, and for outline buttons and entry widgets, not changing the background at all when they get disabled, but setting both bordercolor and foreground to (Colors.update_hsv(self.theme.colors.inputbg, vd=-0.2) if self.theme.type =='light' else Colors.update_hsv(self.theme.colors.inputbg, vd=-0.3)) when they do?

israel-dryer commented 3 years ago

I like the idea with the outline buttons & outline menubuttons. I'm not sure about the entry widgets... let me think about that one.

The secondary colors on some of these themes are pretty dim already for the outline button. But, I'm not too worried about that. It's available because it's in the color palette, but not necessarily useful on all occasions. For all other colors, the disabled state seems to work just fine.

image image

israel-dryer commented 3 years ago

ok. yeah, I think the entry looks good too with just the text muted. I'll make those changes to all input widgets.

image image

daniilS commented 3 years ago

Looks great! Agree about the issue with the outline buttons, but I think that's more of a reason not to use that colour as an outline button if it's so dim already, and the difference should still be clear when it's hovered over.

israel-dryer commented 3 years ago

Sounds good. I'll go ahead and close this issue then. Thanks for your help.