fix(icons): fix icons invisible in high contrast mode (carbon-design-system#19352)

* fix(icons): fix icons invisible in high contrast mode

If the system has a dark high-contrast theme, then icons need to be displayed
in white (or a light color), and vice-versa.  Otherwise, icons become invisible.
Importantly, this must happen regardless of the Carbon theme setting.

Fixes carbon-design-system#17147, carbon-design-system#18830, carbon-design-system#19015, carbon-design-system#19023, carbon-design-system#19140.

* fix(icons): fix tooltip story

Use proper color for icon, not background color.

* fix(icons): remove vestigial high-contrast-mode('icon-fill')

When you use standard tokens like $icon-primary you don't
need it anymore.

Note: I didn't convert $support-error and $support-warning usages
to a system color. Previously the inline notification icon 🚫 was converted
from red to ButtonText.  Also $support-error and $support-warning usages in
_list-box.scss.

Also, inline-notification has a dodgy use of $black-100 that I didn't change.

* fix(icons): handle weird values for fill

Replace $text-primary with $icon-primary as they are the same.

Likewise $tab-text-disabled --> $icon-disabled.

Updated _theme.scss to handle the other weird fill settings.

* fix(icons): fix comment

* fix(icons): fix background colors

* fix(icons): fix checkmark

* fix(icons): remove unused imports of high-contrast-mode

* fix: remove unexpected shadow from web-component button (carbon-design-system#19347)

* fix: controlled tag component for selected prop carbon-design-system#19228 (carbon-design-system#19231)

* fix: controlled tag component for selected prop carbon-design-system#19228

* fix: fix tests for tag

* fix: controlled tag component for selected prop carbon-design-system#19228

* fix: controlled tag added a default selected prop and tests carbon-design-system#19228

* fix: controlled tag added a default selected prop and tests carbon-design-system#19228

* fix: controlled tag added a default selected prop and tests carbon-design-system#19228

* fix: controlled tag fix tests carbon-design-system#19228

* fix: add profile

* fix: add profile

* fix(date-picker): clear flatpickr instance on reset (carbon-design-system#19239)

* fix(date-picker): clear flatpickr instance on reset

* fix(date-picker): clear flatpickr instance on reset

* fix(date-picker): update comments and storybook docs to clarify changes

* fix(date-picker): update comments and storybook docs to clarify changes

* Update packages/react/src/components/DatePicker/DatePicker.tsx

Co-authored-by: kennylam <[email protected]>

---------

Co-authored-by: kennylam <[email protected]>

* fix: modal footer buttons were not fully visible in zoom to 400 (carbon-design-system#19288)

* fix: modal footer buttons were not fully visible in zoom to 400

* fix: added test story

* fix: remove test story

---------

Co-authored-by: Heloise Lui <[email protected]>

* fix(icons): another inverted background

* chore(icons): fix merge error

---------

Co-authored-by: Heloise Lui <[email protected]>
Co-authored-by: Sojin antony <[email protected]>
Co-authored-by: Warren Blood <[email protected]>
Co-authored-by: kennylam <[email protected]>
Co-authored-by: Preeti Bansal <[email protected]>

Author: 6 people

packages/react/src/components/Tooltip/story.scss

@@ -36,7 +36,7 @@
 }
 
 .sb-tooltip-trigger svg {
-  fill: theme.$background-inverse;
+  fill: theme.$icon-secondary;
 }
 
 // DefinitionTooltip

packages/styles/scss/_reset.scss

@@ -172,7 +172,8 @@
 
   @include type.reset();
 
-  /// Makes SVGs accessible in high contrast mode
+  /// Makes SVGs accessible in high contrast mode, although it only works sporadically as other CSS selectors
+  /// routinely override this one.
   /// @link https://github.com/IBM/carbon-elements/issues/345#issuecomment-466577293 Carbon-elements #345
   @media screen and (-ms-high-contrast: active) {
     svg {

packages/styles/scss/_theme.scss

@@ -8,12 +8,61 @@
 @forward './theme/theme' hide theme;
 @use './theme/theme';
 @use './layer/layer-tokens';
+@use './utilities/custom-property';
 
 /// Include the CSS Custom Properties for the active theme or a given theme on
 /// a selector
 @mixin theme($args...) {
   @include theme.theme($args...);
 
+  // If the system is in high-contrast mode, use the system defined colors.  This mostly happens automatically, but
+  // we need to do it manually for icons and selected backgrounds.  Importantly, the custom properties we set here
+  // need to override the CSS custom properties set above.  See:
+  // - https://github.com/carbon-design-system/carbon/issues/19015
+  // - https://developer.mozilla.org/en-US/docs/Web/CSS/system-color.
+  // - https://carbondesignsystem.com/elements/color/tokens/#icon
+  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
+    // Icon colors specified by "fill".
+    @include custom-property.declaration('icon-primary', ButtonText);
+    @include custom-property.declaration('icon-secondary', ButtonText);
+    @include custom-property.declaration('icon-interactive', ButtonText);
+    @include custom-property.declaration('icon-disabled', GrayText);
+    @include custom-property.declaration('icon-on-color-disabled', GrayText);
+
+    // Since icon-inverse and icon-on-color are generally used to indicated selected icons, use SelectedItemText.
+    @include custom-property.declaration('icon-inverse', SelectedItemText);
+    @include custom-property.declaration('icon-on-color', SelectedItemText);
+
+    // Some components currently set these values for fill, although unclear if that's valid.
+    @include custom-property.declaration('button-disabled', GrayText);
+    @include custom-property.declaration('interactive', ButtonText);
+    @include custom-property.declaration('link-primary', LinkText);
+    @include custom-property.declaration('link-primary-hover', LinkText);
+    @include custom-property.declaration('link-secondary', LinkText);
+    @include custom-property.declaration('link-inverse', SelectedItemText);
+    @include custom-property.declaration(
+      'link-inverse-hover',
+      SelectedItemText
+    );
+    @include custom-property.declaration(
+      'link-inverse-visited',
+      SelectedItemText
+    );
+    @include custom-property.declaration('link-visited', VisitedText);
+
+    // Force a background-color for selected buttons etc., otherwise the user won't know they are selected.
+    @include custom-property.declaration('background-selected', SelectedItem);
+    @include custom-property.declaration(
+      'background-selected-hover',
+      SelectedItem
+    );
+    @include custom-property.declaration('background-inverse', SelectedItem);
+    @include custom-property.declaration(
+      'layer-selected-inverse',
+      SelectedItem
+    );
+  }
+
   // Note: we need to re-emit the contextual layer tokens as part of the theme
   // mixin. Otherwise, the layer tokens are defined at the :root level and will
   // not pick up the theme-specific, or zone-specific, value from the first

packages/styles/scss/components/accordion/_accordion.scss

@@ -17,7 +17,6 @@
 @use '../../utilities/convert';
 @use '../../utilities/layout';
 @use '../../utilities/focus-outline' as *;
-@use '../../utilities/high-contrast-mode' as *;
 
 /// @type Value
 /// @access public
@@ -385,12 +384,6 @@ $content-padding: 0 0 0 $spacing-05 !default;
     margin-inline-start: $spacing-05;
   }
 
-  // Windows HCM fix
-  .#{$prefix}--accordion__arrow,
-  .#{$prefix}--accordion__item--active .#{$prefix}--accordion__arrow {
-    @include high-contrast-mode('icon-fill');
-  }
-
   // RTL overrides
   [dir='rtl'] .#{$prefix}--accordion--start .#{$prefix}--accordion__heading {
     padding-inline: layout.density('padding-inline') 0;

packages/styles/scss/components/breadcrumb/_breadcrumb.scss

@@ -176,7 +176,7 @@
   .#{$prefix}--breadcrumb-item
     .#{$prefix}--overflow-menu:active
     .#{$prefix}--overflow-menu__icon {
-    fill: $text-primary;
+    fill: $icon-primary;
   }
 
   .#{$prefix}--breadcrumb-menu-options:focus {

packages/styles/scss/components/button/_button.scss

@@ -421,15 +421,6 @@
     @include high-contrast-mode('focus');
   }
 
-  // Windows HCM fix
-
-  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only
-    .#{$prefix}--btn__icon
-    path:not([data-icon-path]):not([fill='none']),
-  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon {
-    @include high-contrast-mode('icon-fill');
-  }
-
   // RTL overrides
   [dir='rtl'] .#{$prefix}--btn-set .#{$prefix}--btn:not(:focus) {
     box-shadow: convert.to-rem(1px) 0 0 0 $button-separator;

packages/styles/scss/components/checkbox/_checkbox.scss

@@ -12,6 +12,7 @@
 @use '../../type' as *;
 @use '../../utilities/component-reset';
 @use '../../utilities/convert';
+@use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/skeleton' as *;
 @use '../../utilities/visually-hidden' as *;
 
@@ -91,6 +92,9 @@
     position: absolute;
     border: 1px solid $icon-primary;
     border-radius: 2px;
+    @include high-contrast-mode {
+      border: 1px solid ButtonBorder;
+    }
 
     // Checkboxes with a background color look visually off against a parent container.
     background-color: transparent;
@@ -136,6 +140,13 @@
     border: none;
     border-width: 1px;
     background-color: $icon-primary;
+
+    // According to https://developer.mozilla.org/en-US/docs/Web/CSS/system-color, in high contrast mode, the
+    // checkbox should be displayed using SelectedItem and SelectedItemText.
+    @include high-contrast-mode {
+      border: 1px solid ButtonBorder;
+      background-color: SelectedItem;
+    }
   }
 
   // Display the check
@@ -326,6 +337,12 @@
     .#{$prefix}--checkbox:checked
     + .#{$prefix}--checkbox-label::after {
     border-color: $text-primary;
+
+    // According to https://developer.mozilla.org/en-US/docs/Web/CSS/system-color, in high contrast mode, the
+    // checkbox should be displayed using SelectedItem and SelectedItemText.
+    @include high-contrast-mode {
+      fill: SelectedItemText;
+    }
   }
 
   //-----------------------------------------------

packages/styles/scss/components/code-snippet/_code-snippet.scss

@@ -555,11 +555,6 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   // Windows HCM fix
-
-  .#{$prefix}--snippet__icon {
-    @include high-contrast-mode('icon-fill');
-  }
-
   .#{$prefix}--snippet--inline:focus {
     @include high-contrast-mode('focus');
   }

packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss

@@ -481,8 +481,4 @@
   .#{$prefix}--table-expand__button:focus .#{$prefix}--table-expand__svg {
     @include high-contrast-mode('focus');
   }
-
-  .#{$prefix}--table-expand__svg {
-    @include high-contrast-mode('icon-fill');
-  }
 }

packages/styles/scss/components/data-table/sort/_data-table-sort.scss

@@ -12,7 +12,6 @@
 @use '../../../utilities/button-reset';
 @use '../../../utilities/convert';
 @use '../../../utilities/focus-outline' as *;
-@use '../../../utilities/high-contrast-mode' as *;
 
 /// Data table sort styles
 /// @access public
@@ -270,10 +269,4 @@
     display: block;
     margin-inline-end: convert.to-rem(8px);
   }
-
-  // Windows HCM fix
-  .#{$prefix}--table-sort__icon,
-  .#{$prefix}--table-sort__icon-unsorted {
-    @include high-contrast-mode('icon-fill');
-  }
 }