Giter Club home page Giter Club logo

Comments (19)

daniilS avatar daniilS commented on May 27, 2024 1

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

from ttkbootstrap.

israel-dryer avatar israel-dryer commented on May 27, 2024 1

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.

from ttkbootstrap.

daniilS avatar daniilS commented on May 27, 2024 1

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...

from ttkbootstrap.

daniilS avatar daniilS commented on May 27, 2024 1

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

from ttkbootstrap.

daniilS avatar daniilS commented on May 27, 2024 1

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?

from ttkbootstrap.

israel-dryer avatar israel-dryer commented on May 27, 2024 1

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

from ttkbootstrap.

daniilS avatar daniilS commented on May 27, 2024 1

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.

from ttkbootstrap.

daniilS avatar daniilS commented on May 27, 2024

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

from ttkbootstrap.

israel-dryer avatar israel-dryer commented on May 27, 2024

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

from ttkbootstrap.

israel-dryer avatar israel-dryer commented on May 27, 2024

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.

from ttkbootstrap.

israel-dryer avatar israel-dryer commented on May 27, 2024

image

from ttkbootstrap.

israel-dryer avatar israel-dryer commented on May 27, 2024

image

from ttkbootstrap.

israel-dryer avatar israel-dryer commented on May 27, 2024

image

from ttkbootstrap.

israel-dryer avatar israel-dryer commented on May 27, 2024

image

from ttkbootstrap.

israel-dryer avatar israel-dryer commented on May 27, 2024

@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

from ttkbootstrap.

israel-dryer avatar israel-dryer commented on May 27, 2024

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.

from ttkbootstrap.

israel-dryer avatar israel-dryer commented on May 27, 2024

I also reviewed all of the themes are darkened the inputfg

from ttkbootstrap.

israel-dryer avatar israel-dryer commented on May 27, 2024

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

from ttkbootstrap.

israel-dryer avatar israel-dryer commented on May 27, 2024

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

from ttkbootstrap.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.