Calcite-components: Lower opacity on Disabled Slider

[zaramatheson]

It is difficult to tell visually that the slider component is disabled.
https://github.com/Esri/calcite-components/tree/master/src/components/calcite-slider

@asangma suggested considering dropping the opacity from 50% to 33%

[asangma]

@macandcheese @bstifle @paulcpederson Any issues with this?

[paulcpederson]

Fine by me, I think we can get away with this because of Section 1.4.3's "Incidental" explanation (emphasis mine):

Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

However, I would go a step further, and say that disabled sliders should also be gray, not blue for the active parts. We should also ensure we're setting the disabled prop and cursor: not-allowed in this state.

[macandcheese]

Agree we can make it grey as well as lower the opacity and change cursor.

Currently every other disabled component gets a 0.4 opacity value. Would that work in conjunction with changing from blue to grey?

[asangma]

I'll make a draft PR, cool?

[bstifle]

Recommend making anything that is ui-blue to use blk-140 #6A6A6A for disabled.

[asangma]

@bstifle copy that.

[bstifle]

plus the 0.4 opacity like adam said!

[asangma]

~--calcite-ui-text-3 yeah?~

[asangma]

@paulcpederson re: cursor: not-allowed

This cursor change will only show if I remove pointer-events: none from :host([disabled]).
I can do that, but setting pointer-events: none on children, e.g. * seems ineffective.

[asangma]

@zaramatheson Lemme know if you need anything re: verifying.

[zaramatheson]

@asangma Looks good to me! Much clearer that it's disabled now.

[asangma]

@macandcheese Zara and Russ are cool with visual updates. Would you mind verfeeing?

[macandcheese]

LGTM ✅