Carbon: [Carbon X] Toggle colors are inaccessible for g90 and g100 themes

[jendowns]

Detailed description

The Carbon X Toggle component is inaccessible when someone uses the g90 or g100 themes provided by @carbon/themes

Here are a few screenshots with the g100 theme:

Looks like the issue is related to tokens, like this one here:
https://github.com/IBM/carbon-components/blob/master/src/components/toggle/_toggle.scss#L272

// Toggle circle
&:after {
  background-color: $ui-02;
  ...
}

The $ui-02 color token is gray70 for g90 and gray80 for g100 themes (see: https://carbon-elements.netlify.com/themes/examples/preview/), which makes the toggle's circle invisible when toggled off/deselected.

[jendowns]

@IBM/carbon-designers I'm happy to help fix this 👍 Just let me know what colors you'd like to see here. Thanks!

[aagonzales]

@shixiedesign do you know colors they should be on dark? Did we mess a token up?

[shixiedesign]

Hi @jendowns @aagonzales looks like it should just be $ui-03 instead!
Values for $ui-03:

White | G10 | G90 | G100
--- | --- | --- | ---
Gray 20 / #dcdcdc | Gray 20 #dcdcdc | G70 / #565656 | G80 / #3D3D3D

[jendowns]

@shixiedesign @aagonzales --

Unfortunately for the Carbon X Toggle, the background is $ui-03 and the circle is $ui-02, which is effectively the same color for g90 and g100 themes (re: https://carbon-elements.netlify.com/themes/examples/preview/):

So I think we're going to need a different ui token 😬 What do you think?

EDIT: for our temporary override in our library, we made the circle $ibm-colors__gray-40

[aagonzales]

Hmm I think that might be a bug. Let me investigate 🕵️

[shixiedesign]

Yeah I'm not sure about the solution coz there seems to be a few other things wrong too. The circle shouldn't be G90 as it looks like in the screenshot. I'd suggest continuing with the G40 solution for now and we will get back to you!

[shixiedesign]

@jendowns I think we figured it out! There's a couple more changes to make the toggle On state look better on dark theme too. Could you still tackle this update and send in a PR?

In summary:

1. Add token: $icon-03 value on all 4 themes are White /#ffffff
2. Change token $support-02 ’s values to Green 50 / #24A148 on both light themes, and Green 40 / #3DBB61 on both dark themes.
3. Re-assign tokens according to spec image below, Proposed solution column:

[jendowns]

Sure thing @shixiedesign! Are you able to assign this issue to me? I can get a PR together 👍

EDIT: first step is to add $icon-03 token to @carbon/themes & then I will follow up here to update the Toggle experimental theme.

[asudoh]

Thank you for jumping in @jendowns!!

[jendowns]

Just FYI, I'm waiting on https://github.com/IBM/carbon-components/pull/1795 before I can proceed with this (I need the new $icon-03 token) 👍

[joshblack]

@jendowns just a heads up, will pull out the updates into a two parts, I think. Hoping to have it done this morning if folks have a chance to leave feedback 👍

[jendowns]

@shixiedesign I was looking into this and I think there may be a problem with $ui-03 (circle) and $ui-05 (background) for the off state for g90 and g100 themes:

In your comment above, you mentioned using those 2 colors to fix some of the contrast issues for the Toggle's off state -- https://github.com/IBM/carbon-components/issues/1731#issuecomment-461562980

Should I update the $ui-03 and $ui-05 color hexes for g90 and g100 in Carbon Elements to better match what you expect them to be?

EDIT: btw I'm looking at the themes here: https://carbon-elements.netlify.com/themes/examples/preview/

[shixiedesign]

@jendowns Omg my bad...correction:

Circle: $ui-03 (Gray70 | Gray80)
Background: $ui-04 (Gray50 | Gray60)

Thank you so much for your patience, Jen. I'm gonna go reflect on why I keep making mistakes here...

[jendowns]

@shixiedesign no worries at all! The only way I'm able to keep these tokens straight is by constantly looking at the theme preview site: https://carbon-elements.netlify.com/themes/examples/preview/ 😆 I appreciate your help with this 🙏

[jendowns]

Closing this issue, as I can see that the latest version has the correct colors for the g100 theme. Thank you! 🎉