@carbon/styles 1.82.0 → 1.83.0

package/scss/components/popover/_popover.scss

@@ -12,7 +12,6 @@
 @use '../../utilities/button-reset';
 @use '../../utilities/component-reset';
 @use '../../utilities/custom-property';
-@use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/' as *;
 @use '../../utilities/convert';

package/scss/components/radio-button/_radio-button.scss

@@ -120,7 +120,7 @@ $radio-border-width: 1px !default;
       transform: scale(0.5);
 
       // Allow the selected button to be seen in Windows HCM for IE/Edge
-      @include high-contrast-mode('icon-fill') {
+      @include high-contrast-mode {
         background-color: ButtonText;
       }
 

package/scss/components/search/_search.scss

@@ -20,7 +20,6 @@
 @use '../../utilities/visually-hidden' as *;
 @use '../../utilities/component-reset' as *;
 @use '../../utilities/skeleton' as *;
-@use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert';
 @use '../../utilities/button-reset';
 
@@ -381,10 +380,4 @@
   .#{$prefix}--search--expandable.#{$prefix}--search--disabled svg {
     fill: $icon-disabled;
   }
-
-  // Windows HCM fix
-  .#{$prefix}--search-close svg,
-  .#{$prefix}--search-magnifier-icon {
-    @include high-contrast-mode('icon-fill');
-  }
 }

package/scss/components/select/_select.scss

@@ -17,7 +17,6 @@
 @use '../../utilities/component-reset';
 @use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
-@use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/skeleton' as *;
 
 /// Select styles
@@ -419,10 +418,4 @@
     ~ .#{$prefix}--select__invalid-icon {
     inset-inline-end: $spacing-11;
   }
-
-  // Windows HCM fix
-
-  .#{$prefix}--select__arrow {
-    @include high-contrast-mode('icon-fill');
-  }
 }

package/scss/components/structured-list/_structured-list.scss

@@ -15,7 +15,6 @@
 @use '../../spacing' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/skeleton' as *;
-@use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert';
 @use '../../utilities/component-reset';
 
@@ -260,13 +259,6 @@
     }
   }
 
-  // Windows HCM fix
-  .#{$prefix}--structured-list-input:checked
-    + .#{$prefix}--structured-list-td
-    .#{$prefix}--structured-list-svg {
-    @include high-contrast-mode('icon-fill');
-  }
-
   .#{$prefix}--structured-list__icon {
     margin-block-start: $spacing-01;
     vertical-align: top;

package/scss/components/tabs/_tabs.scss

@@ -410,7 +410,7 @@
       }
 
       svg:hover {
-        fill: $text-primary;
+        fill: $icon-primary;
       }
 
       &:hover {
@@ -427,12 +427,12 @@
       + .#{$prefix}--tabs__nav-item--close
       .#{$prefix}--tabs__nav-item--close-icon
       svg {
-      fill: $text-primary;
+      fill: $icon-primary;
     }
 
     .#{$prefix}--tabs__nav-item--close-icon--selected {
       svg {
-        fill: $text-primary;
+        fill: $icon-primary;
       }
     }
 
@@ -445,7 +445,9 @@
       cursor: not-allowed;
 
       svg {
-        fill: $tab-text-disabled;
+        // Note: $icon-disabled maps to the same color as $tab-text-disabled, but in high contrast mode, $icon-disabled
+        // maps to the system-defined "GrayText" color, which is better for high contrast mode support.
+        fill: $icon-disabled;
       }
 
       &:focus,

package/scss/components/tag/_tag.scss

@@ -432,11 +432,6 @@
     @include high-contrast-mode('outline');
   }
 
-  .#{$prefix}--tag__close-icon svg,
-  .#{$prefix}--tag__custom-icon svg {
-    @include high-contrast-mode('icon-fill');
-  }
-
   .#{$prefix}--tag__close-icon:focus {
     @include high-contrast-mode('focus');
   }

package/scss/components/text-input/_text-input.scss

@@ -20,7 +20,6 @@
 @use '../../utilities/placeholder-colors' as *;
 @use '../../utilities/tooltip' as *;
 @use '../../utilities/skeleton' as *;
-@use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert';
 @use '../../utilities/layout';
 @use '../../utilities/focus-outline' as *;
@@ -155,13 +154,6 @@
     svg {
     fill: $icon-secondary;
     transition: fill $duration-fast-01 motion(standard, productive);
-
-    // Windows, Firefox HCM Fix
-    @media screen and (-ms-high-contrast: active),
-      screen and (prefers-contrast) {
-      // `ButtonText` is a CSS2 system color to help improve colors in HCM
-      fill: ButtonText;
-    }
   }
 
   .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:focus {
@@ -173,8 +165,6 @@
   .#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:focus
     svg {
     fill: $icon-primary;
-
-    @include high-contrast-mode('icon-fill');
   }
 
   .#{$prefix}--text-input--invalid,
@@ -525,14 +515,6 @@
     block-size: 1rem;
   }
 
-  // Windows HCM fix
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger
-    svg,
-  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:hover
-    svg {
-    @include high-contrast-mode('icon-fill');
-  }
-
   .#{$prefix}--text-input__label-wrapper {
     display: flex;
     justify-content: space-between;

package/scss/components/tile/_tile.scss

@@ -18,7 +18,6 @@
 @use '../../utilities/convert';
 @use '../../utilities/component-reset';
 @use '../../utilities/focus-outline' as *;
-@use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/visually-hidden' as *;
 @use '../../utilities/layout';
 
@@ -214,13 +213,6 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
       @media screen and (prefers-reduced-motion: reduce) {
         transition: none;
       }
-
-      // Windows, Firefox HCM Fix
-      @media screen and (-ms-high-contrast: active),
-        screen and (prefers-contrast) {
-        // `ButtonText` is a CSS2 system color to help improve colors in HCM
-        fill: ButtonText;
-      }
     }
   }
 
@@ -342,13 +334,6 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
   .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark svg {
     fill: $icon-primary;
-
-    // Windows, Firefox HCM Fix
-    @media screen and (-ms-high-contrast: active),
-      screen and (prefers-contrast) {
-      // `ButtonText` is a CSS2 system color to help improve colors in HCM
-      fill: ButtonText;
-    }
   }
 
   .#{$prefix}--tile-content {
@@ -632,11 +617,4 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--slug-rounded .#{$prefix}--tile__chevron {
     border-end-end-radius: $spacing-03;
   }
-
-  // Windows HCM fix
-  .#{$prefix}--tile__chevron svg,
-  .#{$prefix}--tile__checkmark svg,
-  .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark svg {
-    @include high-contrast-mode('icon-fill');
-  }
 }

package/scss/components/ui-shell/side-nav/_side-nav.scss

@@ -18,7 +18,6 @@
 @use '../../../utilities/component-reset';
 @use '../../../utilities/convert';
 @use '../../../utilities/focus-outline' as *;
-@use '../../../utilities/high-contrast-mode' as *;
 @use '../../../utilities/z-index' as *;
 
 /// UI shell side nav
@@ -542,16 +541,4 @@
   .#{$prefix}--side-nav .#{$prefix}--header__menu-arrow {
     fill: $icon-secondary;
   }
-
-  // Windows HCM fix
-  .#{$prefix}--side-nav__icon > svg,
-  .#{$prefix}--side-nav
-    a.#{$prefix}--header__menu-item:hover
-    .#{$prefix}--header__menu-arrow,
-  .#{$prefix}--side-nav
-    a.#{$prefix}--header__menu-item:focus
-    .#{$prefix}--header__menu-arrow,
-  .#{$prefix}--side-nav .#{$prefix}--header__menu-arrow {
-    @include high-contrast-mode('icon-fill');
-  }
 }

package/scss/utilities/_high-contrast-mode.scss

@@ -12,10 +12,6 @@
 /// Set HCM styles at the end of each file to ensure they are not overwritten
 @mixin high-contrast-mode($type: '') {
   @media screen and (-ms-high-contrast: active), (forced-colors: active) {
-    @if ($type == 'icon-fill') {
-      fill: ButtonText;
-    }
-
     @if ($type == 'focus') {
       color: Highlight;
       outline: 1px solid Highlight;

package/scss/utilities/_layout.scss

@@ -71,7 +71,8 @@
           $value
         );
 
-        .#{config.$prefix}--layout--#{$group}-#{$step} & {
+        &.#{config.$prefix}--layout--#{$group}-#{$step},
+        .#{config.$prefix}--layout--#{$group}-#{$step} :where(&) {
           $token: custom-property.get-var(
             'layout-#{$group}-#{$property}-#{$step}'
           );

package/scss/utilities/_update_fields_on_layer.scss

@@ -25,6 +25,7 @@
   .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box,
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper,
   .#{$prefix}--number-input--fluid input[type='number'],
+  .#{$prefix}--number-input--fluid input[type='text'],
   .#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn::before,
   .#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn::after,
   .#{$prefix}--date-picker--fluid