Carbon: [Carbon X] DatePicker color tokens applied with g90 and g100 themes have inaccessible color contrast

[jendowns]

Detailed description

A number of colors/tokens being applied to the DatePicker are not accessible when the g100 or g90 themes from @carbon/themes are used.

Here are some example screenshots...

g100 theme

Simple date picker

Range with min and max

g90 theme

Range

[jendowns]

So this isn't a blocker for us right now, since I can override colors selectively in our addons library to make them accessible.

However, I really want to make sure I have the right intended color for the bottom border on the input element -- just so my override is in the right ballpark, at least. 🤔

@IBM/carbon-designers could anyone let me know what color that bottom input border should be for a g100 theme? Thank you 🙏 (EDIT: I'm referring to the bottom border color as shown below, before the input is select/focused/active)

[aagonzales]

• The underline for the fields should be $ui-04 which is Gray 60 #6F6F6F in the Gray 100 theme
• All the icons should be using the token $icon-01
• The day ranges are just hard coded and will have to be over ridden. It seems excessive to make a token just for that. Could be convinced otherwise though. Could maybe be like a $highlight token or something, could maybe be used elsewhere
• The placeholder text in the fields should be using $text-03 which should be Gray 60 #6F6F6F in the G100 Theme

[aagonzales]

What the Duo file says the dark date picker should look like (ignore their field styles):

• highlight is Blue 90 #021677
  

[jendowns]

I'm waiting for https://github.com/IBM/carbon-components/pull/1795 to be merged (as I need the new $highlight token from @carbon/themes) before I can proceed with proposing a fix for this 👍

[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]

Sounds good -- thank you!

[jendowns]

@aagonzales Quick question -- That "selected" color (the start/end selected date in a range) and the text + "dot" color for the current date look like blue60 in these dark themes. The token used throughout looks like $interactive-01, which unfortunately is always blue60 for all themes -- https://carbon-elements.netlify.com/themes/examples/preview/

Am I correct that the blue for select/today should be blue40 (or even blue50) instead? Do you think $interactive-01 needs to be modified... or a new token needs to be created?

[aagonzales]

@jendowns we're one step a head of you this time. We just added in a new $interactive-04 that will those lighter blues in the dark themes but still keeping Blue 60 in the dark themes for the primary buttons with $interactive-01 https://github.com/IBM/carbon-elements/issues/366

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions.

[aagonzales]

I think this has been resolved with the addition of the $highlight and $interactive-04 color tokens.