Apply grey color to disabled toggle slider even if it's checked

[Al2Klimov]

fixes #5234

[flourish86]

Thanks for your review request. Could you name a view where this is in effect?

It would be helpful if you provided screenshots of before and after versions, so I can directly see the changes. Thanks in advance!

[Al2Klimov]

Of course.

This is the view in question: https://plan.netways.de/icingaweb2/netrp/task/create?user=1

• It would be affected by https://github.com/Icinga/netrp/pull/131

Instead of screenshots, here is even a live view: https://minigame.prod.aklimov.net-dump.de/icingaweb2/fourcolors/demo/

[flourish86]

See changes in commit 43a4add

[nilmerg]

This was solely about disabled checked sliders. Now it affects also unchecked sliders and destroys their contrast:

Before	After

[nilmerg]

This was previously done with the disabled class.

• Why is this removed?
• Who set this to begin with?
• Is it used somewhere still?

[flourish86]

… destroys their contrast:

I basically agree, even if I think "destroy" is a little harsh, but it was intentional. It was more of a quick fix, though.

This was solely about disabled checked sliders. Now it affects also unchecked sliders and …

But only changing the disabled unchecked ones still doesn't solve the main problem. So, here are the main problems I was solving the "before" version:

• both the disabled ones are standing out way too much. They shouldn't since they're disabled
• both disabled toggles aren't uniformly looking "disabled" in comparison with "enabled" ones.

So what I did is add another layer for the appearance of the disabled ones, namely opacity. I agree, that especially in direct comparison to each other, this still is far from perfect (especially the light/disabled/unchecked is really low on contrast), but it's still an improvement to before.

What we probably should do to make it as good as possible is to make a refinement of alle the toggles and validate all the versions in a form context. But it would be more efficient to do that in a design tool before implementing it.

[nilmerg]

but it's still an improvement to before.

Nah. It's blurring them so much, that I fail to identify them as toggles if buried between other elements. There's just a dark or light blob. If they keep looking this way, we can simply remove them instead of disabling them, this would have the same effect.

But it would be more efficient to do that in a design tool before implementing it.

Then please do so.

[flourish86]

Nah. It's blurring them so much, that I fail to identify them as toggles if buried between other elements. There's just a dark or light blob. If they keep looking this way, we can simply remove them instead of disabling them, this would have the same effect.

Sorry, but that's just subjective and random bashing without any reasoning behind it à la "I just don't like it". I explained, why it looks that way.

We won't have a final solution without either compromises or completely overhauling the theme (modes). Reducing contrast is an established way to make things disabled.

For Example

https://m2.material.io/components/text-fields#filled-text-field (See section states)

https://react.ui.audi/?path=/story/components-checkbox-all-stories--disabled

https://carbondesignsystem.com/components/toggle/usage/#states

[nilmerg]

Since we don't have a final solution right now, and the suggested changes here don't reflect our final design choices, I'll close here. We'll focus on a proper solution in the future.