Carbon: Add ms high contrast support for icons

[joshblack]

In https://github.com/IBM/carbon-elements/pull/388 we landed support for high contrast mode for icons when being used in a Microsoft browser. This issue is to integrate the mixin available in the latest versions of elements.

[icemanlily]

@joshblack Any update for this issue?

[shinytoyrobots]

Will need to do a patch release in elements.

[joshblack]

First part: https://github.com/IBM/carbon-elements/pull/461

Will trigger a minor release for elements, 10.1.0.

[johnsteinbacher]

@shinytoyrobots - would you please have someone add an ETA to resolving this issue. This is holding up AVT exit.

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

[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. You can keep the conversation going with just a short comment. Thanks for your contributions.

[shinytoyrobots]

@dakahn - you're putting this into the reset file for v9 today and pushing today, correct?

[dakahn]

@shinytoyrobots Donezo! v9 has received the relevant changes here 🤠

[icemanlily]

@dakahn Is the new Carbon version for V9 ready to verify this issue?

[nicoxxie]

looks like I'm still not seeing the icon in the latest v9 <Icon description={this.props.t('locked')} name='locked'/>

this is the theme I'm using https://github.com/m-khvoinitsky/dark-background-light-text-extension

[icemanlily]

@joshblack @dakahn Could you help look at it. The issue is not resolved in the latest v9.

[joshblack]

@icemanlily are you all using the CSS reset from carbon? It was included in that block.

File: https://unpkg.com/[email protected]/scss/globals/scss/_css--reset.scss

At the bottom:

[nicoxxie]

@joshblack yes we have imported @import '../../node_modules/carbon-components/scss/globals/scss/css--reset';

here is the compiled css file running on https://dev.console.test.cloud.ibm.com/iam/

this icon specifically can be found on https://dev.console.test.cloud.ibm.com/iam/apikeys page

"carbon-components": {
"version": "9.91.3"...}

FF 67.0 (64-bit) theme https://github.com/m-khvoinitsky/dark-background-light-text-extension

[dakahn]

@icemanlily Testing IBM Cloud login flow in high contrast mode on Windows 10 using latest build of Firefox:

As you can see _most iconography_ seems to be taking the reset, but notably not the arrow on our Dropdown component.

Compare to the Dropdown in Carbon Design System v9 in high contrast mode:

The problem seems to not be on the library side. 👍🏽

[icemanlily]

@dakahn I think the login page didn't update to the latest Carbon v9. I tried it in IAM and the arrow should be OK.

But in https://dev.console.test.cloud.ibm.com/iam/apikeys . The lock icons are still missing.

[nicoxxie]

@joshblack sorry, maybe a dumb question, why is the compiled css file not a hex but a string? in the scss file it's fill: ButtonText but not $ButtonText if it's a variable?

[joshblack]

Hi @nicoxxie! 👋 As far as I understand (@dakahn discovered it) this is a system color variable defined in CSS2. This value is used to help with rendering the icons in high contrast mode on windows (I believe).

[emyarod]

on a side note, the ButtonText system color is deprecated. it seems to be supported by the major OSes still but it may cause issues on some systems

[icemanlily]

@joshblack @dakahn Seems it doesn't work for the radio button. Could you help check it?

[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. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale[bot]]

As there's been no activity since this issue was marked as stale, we are auto-closing it.