@carbon/styles 1.82.0-rc.0 → 1.83.0-rc.0

package/scss/components/notification/_actionable-notification.scss

@@ -486,11 +486,4 @@
   .#{$prefix}--btn.#{$prefix}--btn--ghost.#{$prefix}--actionable-notification__action-button:focus {
     @include high-contrast-mode('focus');
   }
-
-  .#{$prefix}--actionable-notification .#{$prefix}--inline-notification__icon,
-  .#{$prefix}--actionable-notification .#{$prefix}--toast-notification__icon,
-  .#{$prefix}--actionable-notification
-    .#{$prefix}--actionable-notification__close-icon {
-    @include high-contrast-mode('icon-fill');
-  }
 }

package/scss/components/notification/_inline-notification.scss

@@ -316,12 +316,4 @@
   .#{$prefix}--btn.#{$prefix}--btn--ghost.#{$prefix}--inline-notification__action-button:focus {
     @include high-contrast-mode('focus');
   }
-
-  .#{$prefix}--inline-notification .#{$prefix}--inline-notification__icon {
-    @include high-contrast-mode('icon-fill');
-  }
-  .#{$prefix}--inline-notification
-    .#{$prefix}--inline-notification__close-icon {
-    @include high-contrast-mode('icon-fill');
-  }
 }

package/scss/components/notification/_toast-notification.scss

@@ -231,10 +231,4 @@
   .#{$prefix}--toast-notification__close-button:focus {
     @include high-contrast-mode('focus');
   }
-  .#{$prefix}--toast-notification .#{$prefix}--toast-notification__close-icon {
-    @include high-contrast-mode('icon-fill');
-  }
-  .#{$prefix}--toast-notification .#{$prefix}--toast-notification__icon {
-    @include high-contrast-mode('icon-fill');
-  }
 }

package/scss/components/number-input/_number-input.scss

@@ -35,11 +35,15 @@
 
   .#{$prefix}--number
     .#{$prefix}--number__input-wrapper--warning
-    input[type='number'] {
+    input[type='number'],
+  .#{$prefix}--number
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='text'] {
     padding-inline-end: convert.to-rem(128px);
   }
 
-  .#{$prefix}--number input[type='number'] {
+  .#{$prefix}--number input[type='number'],
+  .#{$prefix}--number input[type='text'] {
     @include type-style('body-compact-01');
     @include focus-outline('reset');
 
@@ -93,7 +97,8 @@
   }
 
   .#{$prefix}--number--lg.#{$prefix}--number {
-    input[type='number'] {
+    input[type='number'],
+    input[type='text'] {
       padding-inline-end: convert.to-rem(112px);
 
       &[data-invalid] {
@@ -101,13 +106,15 @@
       }
     }
 
-    .#{$prefix}--number__input-wrapper--warning input[type='number'] {
+    .#{$prefix}--number__input-wrapper--warning input[type='number'],
+    .#{$prefix}--number__input-wrapper--warning input[type='text'] {
       padding-inline-end: convert.to-rem(144px);
     }
   }
 
   .#{$prefix}--number--sm.#{$prefix}--number {
-    input[type='number'] {
+    input[type='number'],
+    input[type='text'] {
       padding-inline-end: convert.to-rem(80px);
 
       &[data-invalid] {
@@ -115,12 +122,14 @@
       }
     }
 
-    .#{$prefix}--number__input-wrapper--warning input[type='number'] {
+    .#{$prefix}--number__input-wrapper--warning input[type='number'],
+    .#{$prefix}--number__input-wrapper--warning input[type='text'] {
       padding-inline-end: convert.to-rem(112px);
     }
   }
 
-  .#{$prefix}--number input[type='number']:disabled {
+  .#{$prefix}--number input[type='number']:disabled,
+  .#{$prefix}--number input[type='text']:disabled {
     background-color: $field;
     border-block-end-color: transparent;
     color: $text-disabled;
@@ -197,6 +206,10 @@
   .#{$prefix}--number
     input[type='number'][data-invalid]
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number
+    input[type='text'][data-invalid]
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
     border-block-end-color: $support-error;
   }
@@ -205,6 +218,10 @@
   .#{$prefix}--number
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number
+    input[type='text']:focus
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
     border-width: 2px 0;
     border-style: solid;
@@ -216,6 +233,10 @@
   .#{$prefix}--number
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:last-of-type:hover,
+  .#{$prefix}--number
+    input[type='text']:focus
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:last-of-type:hover {
     box-shadow: -4px 0 0 -2px $focus inset;
   }
@@ -224,6 +245,10 @@
   .#{$prefix}--number
     input[type='number'][data-invalid]:not(:focus)
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:last-of-type:hover,
+  .#{$prefix}--number
+    input[type='text'][data-invalid]:not(:focus)
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:last-of-type:hover {
     box-shadow: -4px 0 0 -2px $support-error inset;
   }
@@ -231,6 +256,10 @@
   .#{$prefix}--number
     input[type='number'][data-invalid]:not(:focus)
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover,
+  .#{$prefix}--number
+    input[type='text'][data-invalid]:not(:focus)
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:hover {
     border-width: 2px 0;
     border-style: solid;
@@ -242,6 +271,10 @@
   .#{$prefix}--number
     input[type='number'][data-invalid]:not(:focus)
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:focus:hover,
+  .#{$prefix}--number
+    input[type='text'][data-invalid]:not(:focus)
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:focus:hover {
     @include focus-outline('outline');
   }
@@ -283,6 +316,10 @@
   .#{$prefix}--number
     input[type='number']:disabled
     + .#{$prefix}--number__controls
+    .#{$prefix}--number__rule-divider:first-of-type,
+  .#{$prefix}--number
+    input[type='text']:disabled
+    + .#{$prefix}--number__controls
     .#{$prefix}--number__rule-divider:first-of-type {
     background-color: transparent;
   }
@@ -290,6 +327,10 @@
   .#{$prefix}--number
     input[type='number']:disabled
     + .#{$prefix}--number__controls
+    .#{$prefix}--number__rule-divider,
+  .#{$prefix}--number
+    input[type='text']:disabled
+    + .#{$prefix}--number__controls
     .#{$prefix}--number__rule-divider {
     background-color: $icon-disabled;
   }
@@ -350,7 +391,8 @@
   }
 
   // Size Variant styles
-  .#{$prefix}--number--lg input[type='number'] {
+  .#{$prefix}--number--lg input[type='number'],
+  .#{$prefix}--number--lg input[type='text'] {
     block-size: convert.to-rem(48px);
   }
 
@@ -362,7 +404,8 @@
     inline-size: convert.to-rem(48px);
   }
 
-  .#{$prefix}--number--sm input[type='number'] {
+  .#{$prefix}--number--sm input[type='number'],
+  .#{$prefix}--number--sm input[type='text'] {
     block-size: convert.to-rem(32px);
   }
 
@@ -382,14 +425,19 @@
   }
 
   // No steppers
-  .#{$prefix}--number--nosteppers input[type='number'] {
+  .#{$prefix}--number--nosteppers input[type='number'],
+  .#{$prefix}--number--nosteppers input[type='text'] {
     padding-inline-end: 0;
   }
 
   .#{$prefix}--number--nosteppers input[type='number'][data-invalid],
+  .#{$prefix}--number--nosteppers input[type='text'][data-invalid],
+  .#{$prefix}--number--nosteppers
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='number'],
   .#{$prefix}--number--nosteppers
     .#{$prefix}--number__input-wrapper--warning
-    input[type='number'] {
+    input[type='text'] {
     padding-inline-end: convert.to-rem(48px);
   }
 
@@ -398,7 +446,8 @@
   }
 
   // Readonly
-  .#{$prefix}--number--readonly input[type='number'] {
+  .#{$prefix}--number--readonly input[type='number'],
+  .#{$prefix}--number--readonly input[type='text'] {
     background: transparent;
     border-block-end-color: $border-subtle;
   }
@@ -416,6 +465,10 @@
   .#{$prefix}--number--readonly
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover,
+  .#{$prefix}--number--readonly
+    input[type='text']:focus
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:hover {
     outline: none;
   }
@@ -564,7 +617,26 @@
     input[type='number']:has(~ .#{$prefix}--slug):not(
       :has(~ .#{$prefix}--slug--revert)
     ),
-  .#{$prefix}--number__input-wrapper--slug input[type='number']:disabled {
+  .#{$prefix}--number__input-wrapper--slug input[type='number']:disabled,
+  .#{$prefix}--number__input-wrapper--decorator
+    input[type='text']:has(
+      ~ .#{$prefix}--number__input-inner-wrapper--decorator
+        .#{$prefix}--ai-label
+    ):not(
+      :has(
+          ~ .#{$prefix}--number__input-inner-wrapper--decorator
+            .#{$prefix}--ai-label--revert
+        )
+    ),
+  .#{$prefix}--number__input-wrapper--slug
+    input[type='text']:has(~ .#{$prefix}--ai-label):not(
+      :has(~ .#{$prefix}--ai-label--revert)
+    ),
+  .#{$prefix}--number__input-wrapper--slug
+    input[type='text']:has(~ .#{$prefix}--slug):not(
+      :has(~ .#{$prefix}--slug--revert)
+    ),
+  .#{$prefix}--number__input-wrapper--slug input[type='text']:disabled {
     @include ai-gradient;
 
     padding-inline-end: convert.to-rem(145px);
@@ -577,7 +649,8 @@
 
     inline-size: 100%;
 
-    input[type='number'] {
+    input[type='number'],
+    input[type='text'] {
       display: none;
     }
   }
@@ -604,10 +677,6 @@
   .#{$prefix}--number__control-btn {
     @include high-contrast-mode('outline');
   }
-
-  .#{$prefix}--number__control-btn svg {
-    @include high-contrast-mode('icon-fill');
-  }
 }
 
 .#{$prefix}--number__controls:hover .#{$prefix}--number__control-btn::after {

package/scss/components/overflow-menu/_overflow-menu.scss

@@ -361,10 +361,6 @@
   .#{$prefix}--overflow-menu-options__btn:focus {
     @include high-contrast-mode('focus');
   }
-
-  .#{$prefix}--overflow-menu svg {
-    @include high-contrast-mode('icon-fill');
-  }
   /*stylelint-enable */
 
   $popover-offset: custom-property.get-var('popover-offset', 2.5rem);

package/scss/components/page-header/_page-header.scss

@@ -7,33 +7,68 @@
 
 @use '../../config' as *;
 @use '../../breakpoint' as *;
-// @use '../../motion' as *;
+@use '../../colors' as *;
 @use '../../spacing' as *;
-// @use '../../theme' as *;
+@use '../../theme' as *;
 @use '../../type' as *;
-// @use '../../layer' as *;
-// @use '../../utilities/box-shadow' as *;
-// @use '../../utilities/button-reset';
-// @use '../../utilities/component-reset';
-// @use '../../utilities/focus-outline' as *;
-// @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert';
-// @use '../../utilities/z-index' as *;
-// @use '../../utilities/custom-property';
 
 /// Page header styles
 /// @access public
 /// @group page-header
 @mixin page-header {
   .#{$prefix}--page-header {
-    border: 1px solid rebeccapurple; /* stylelint-disable-line */
+    background-color: $layer-01;
   }
+
   .#{$prefix}--page-header__breadcrumb-bar {
-    border: 1px solid blue; /* stylelint-disable-line */
+    block-size: convert.to-rem(40px);
+  }
+
+  .#{$prefix}--page-header__breadcrumb-bar .#{$prefix}--subgrid {
+    block-size: 100%;
+  }
+
+  .#{$prefix}--page-header__breadcrumb-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--page-header__breadcrumb__actions-flush {
+    .#{$prefix}--css-grid {
+      padding-inline-end: 0;
+    }
+
+    .#{$prefix}--css-grid-column {
+      margin-inline-end: 0;
+    }
+  }
+
+  .#{$prefix}--page-header__breadcrumb-bar-border {
+    border-block-end: 1px solid $border-subtle-01;
   }
+
+  .#{$prefix}--page-header__breadcrumb__icon {
+    margin-inline-end: $spacing-03;
+  }
+
+  .#{$prefix}--page-header__breadcrumb__actions {
+    display: inline-flex;
+  }
+
+  .#{$prefix}--page-header__breadcrumb__content-actions {
+    margin-inline-end: $spacing-04;
+  }
+
+  .#{$prefix}--page-header__breadcrumb-wrapper {
+    display: inline-flex;
+  }
+
   .#{$prefix}--page-header__content {
-    margin: $spacing-06 0;
-    border: 1px solid red; /* stylelint-disable-line */
+    padding: $spacing-06 0;
   }
 
   .#{$prefix}--page-header__content__title-wrapper {
@@ -138,13 +173,19 @@
     display: flex;
     overflow: hidden;
     align-items: center;
-    justify-content: end;
+    justify-content: flex-end;
     block-size: 100%;
   }
 
-  .#{$prefix}--page-header__tab-bar {
-    display: grid;
-    padding: 0 $spacing-05;
-    border: 1px solid green; /* stylelint-disable-line */
+  .#{$prefix}--page-header__tablist-wrapper {
+    border-block-end: 1px solid $border-subtle-01;
+  }
+
+  .#{$prefix}--page-header__tab-bar .#{$prefix}--tabs {
+    margin-inline-start: -$spacing-05;
+  }
+
+  .#{$prefix}--tab-content {
+    background: $background;
   }
 }

package/scss/components/pagination-nav/_pagination-nav.scss

@@ -14,7 +14,6 @@
 @use '../../theme' as *;
 @use '../../utilities/button-reset';
 @use '../../utilities/focus-outline' as *;
-@use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/layout';
 @use '../../utilities/visually-hidden' as *;
 

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/layer/_layer-sets.scss

@@ -19,6 +19,11 @@ $-default-layer-sets: (
     theme.$layer-active-02,
     theme.$layer-active-03,
   ),
+  layer-background: (
+    theme.$layer-background-01,
+    theme.$layer-background-02,
+    theme.$layer-background-03,
+  ),
   layer-hover: (
     theme.$layer-hover-01,
     theme.$layer-hover-02,