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

package/scss/components/content-switcher/_tokens.scss

@@ -0,0 +1,110 @@
+//
+// Copyright IBM Corp. 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:color';
+@use 'sass:map';
+@use '../../config';
+@use '../../colors';
+@use '../../themes';
+@use '../../theme' as *;
+@use '../../utilities/component-tokens';
+@use '@carbon/themes/scss/component-tokens' as content-switcher;
+
+// content-switcher-background
+$content-switcher-background: (
+  fallback: map.get(content-switcher.$content-switcher-background, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(content-switcher.$content-switcher-background, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(content-switcher.$content-switcher-background, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(content-switcher.$content-switcher-background, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(content-switcher.$content-switcher-background, g-100),
+    ),
+  ),
+) !default;
+
+// content-switcher-background-hover
+$content-switcher-background-hover: (
+  fallback:
+    map.get(content-switcher.$content-switcher-background-hover, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value:
+        map.get(
+          content-switcher.$content-switcher-background-hover,
+          white-theme
+        ),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(content-switcher.$content-switcher-background-hover, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(content-switcher.$content-switcher-background-hover, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(content-switcher.$content-switcher-background-hover, g-100),
+    ),
+  ),
+) !default;
+
+// content-switcher-selected
+$content-switcher-selected: (
+  fallback: map.get(content-switcher.$content-switcher-selected, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(content-switcher.$content-switcher-selected, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(content-switcher.$content-switcher-selected, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(content-switcher.$content-switcher-selected, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(content-switcher.$content-switcher-selected, g-100),
+    ),
+  ),
+) !default;
+
+// Add to $content-switcher-tokens map
+$content-switcher-tokens: (
+  content-switcher-background: $content-switcher-background,
+  content-switcher-background-hover: $content-switcher-background-hover,
+  content-switcher-selected: $content-switcher-selected,
+);
+
+// Generate CSS custom properties for each token
+$content-switcher-background: component-tokens.get-var(
+  $content-switcher-background,
+  'content-switcher-background'
+);
+$content-switcher-background-hover: component-tokens.get-var(
+  $content-switcher-background-hover,
+  'content-switcher-background-hover'
+);
+$content-switcher-selected: component-tokens.get-var(
+  $content-switcher-selected,
+  'content-switcher-selected'
+);

package/scss/components/data-table/_data-table.scss

@@ -239,6 +239,7 @@
   .#{$prefix}--data-table .#{$prefix}--dropdown,
   .#{$prefix}--data-table .#{$prefix}--list-box,
   .#{$prefix}--data-table .#{$prefix}--number input[type='number'],
+  .#{$prefix}--data-table .#{$prefix}--number input[type='text'],
   .#{$prefix}--data-table .#{$prefix}--number__control-btn::before,
   .#{$prefix}--data-table .#{$prefix}--number__control-btn::after,
   .#{$prefix}--data-table .#{$prefix}--text-input,
@@ -1133,7 +1134,7 @@
     td.#{$prefix}--table-cell--column-slug,
 
   // Windows HCM fix
-  
+
   .#{$prefix}--data-table-content {
     @include high-contrast-mode('outline');
   }

package/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');
-  }
 }

package/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');
-  }
 }

package/scss/components/date-picker/_date-picker.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/placeholder-colors' as *;
 @use '../../utilities/skeleton' as *;
 
@@ -262,10 +261,4 @@
     block-size: convert.to-rem(14px);
     inline-size: convert.to-rem(75px);
   }
-
-  // Windows HCM fix
-
-  .#{$prefix}--date-picker__icon {
-    @include high-contrast-mode('icon-fill');
-  }
 }

package/scss/components/date-picker/_flatpickr.scss

@@ -231,8 +231,6 @@
     transform: scale(1, 1) #{'/*rtl: scale(-1,1)*/'};
     transition: background-color $duration-fast-01 motion(standard, productive);
     user-select: none;
-    // Windows HCM fix
-    @include high-contrast-mode('icon-fill');
 
     @media screen and (prefers-reduced-motion: reduce) {
       transition: none;

package/scss/components/dialog/_dialog.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2014, 2024
+// Copyright IBM Corp. 2014, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -17,24 +17,23 @@
 @use '../../utilities/convert';
 @use '../../utilities/component-reset';
 @use '../../utilities/focus-outline' as *;
-@use '../../utilities/high-contrast-mode' as *;
 
 /// Dialog styles
 /// @access public
 /// @group dialog
 @mixin dialog {
   .#{$prefix}--dialog {
+    position: fixed;
     padding: 0;
     border: none;
+    margin: auto;
     background-color: $layer;
-    block-size: fit-content;
     color: $text-primary;
     inline-size: 48rem;
-    max-block-size: 50%;
-    max-inline-size: 100%;
+    inset: 0;
+    max-block-size: 100%;
     opacity: 0;
     transform: translateY(calc(-1 * #{$spacing-06}));
-
     /** opening and closing is used in as allow-discrete is not currently supported wide enough
      * https://caniuse.com/mdn-css_properties_display_is_transitionable
      */
@@ -52,13 +51,10 @@
       max-inline-size: 84%;
     }
     @include breakpoint(lg) {
-      max-inline-size: 72%;
-    }
-    @include breakpoint(xlg) {
-      max-inline-size: 64%;
+      max-inline-size: 60%;
     }
     @include breakpoint(xlg) {
-      max-inline-size: 60%;
+      max-inline-size: 48%;
     }
 
     &[open] {
@@ -95,9 +91,12 @@
 
   .#{$prefix}--dialog__header {
     position: relative;
-    overflow: visible;
+    grid-area: header;
     inline-size: 100%;
+    margin-block-end: $spacing-03;
     min-block-size: $spacing-09;
+    padding-block-start: $spacing-05;
+    padding-inline: $spacing-05 $spacing-09;
   }
 
   /* Transition the :backdrop when the dialog modal is promoted to the top layer */
@@ -118,7 +117,6 @@
 
   .#{$prefix}--dialog[open]::backdrop {
     opacity: 1;
-
     transition:
       background-color $duration-moderate-02 motion(exit, expressive),
       opacity $duration-moderate-02 motion(exit, expressive);
@@ -145,4 +143,153 @@ because the nesting selector cannot represent pseudo-elements. */
     inset-block-start: 0;
     inset-inline-end: 0;
   }
+
+  .#{$prefix}--dialog-header__label {
+    @include component-reset.reset;
+
+    @include type-style('label-01');
+
+    color: $text-secondary;
+    margin-block-end: $spacing-02;
+  }
+
+  .#{$prefix}--dialog-header__heading {
+    @include component-reset.reset;
+
+    @include type-style('heading-03');
+
+    margin: 0;
+    color: $text-primary;
+
+    padding-inline-end: calc(20% - $spacing-09);
+  }
+
+  .#{$prefix}--dialog-container {
+    display: grid;
+    background-color: $layer;
+    grid-template-areas:
+      'header'
+      'content'
+      'footer';
+    grid-template-columns: 100%;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    inline-size: 100%;
+
+    @include breakpoint(md) {
+      max-block-size: 90vh;
+    }
+
+    @include breakpoint(lg) {
+      max-block-size: 84vh;
+    }
+  }
+
+  .#{$prefix}--dialog-content {
+    position: relative;
+    grid-area: content;
+    overflow-y: auto;
+    padding-block: $spacing-03 $spacing-09;
+    padding-inline: $spacing-05 $spacing-05;
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+  }
+
+  .#{$prefix}--dialog-scroll-content {
+    border-block-end: $spacing-01 solid transparent;
+    mask-image: linear-gradient(
+        to bottom,
+        $layer calc(100% - $spacing-11),
+        transparent calc(100% - $spacing-09),
+        transparent 100%
+      ),
+      linear-gradient(to left, $layer 0, $spacing-05, transparent $spacing-05),
+      linear-gradient(to right, $layer 0, $spacing-01, transparent $spacing-01),
+      linear-gradient(to top, $layer 0, $spacing-01, transparent $spacing-01);
+  }
+
+  .#{$prefix}--dialog-scroll-content > *:last-child {
+    margin-block-end: $spacing-06;
+  }
+
+  .#{$prefix}--dialog-scroll-content:has(.#{$prefix}--autoalign) {
+    mask-image: none;
+  }
+
+  .#{$prefix}--dialog-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    block-size: $spacing-10;
+    grid-area: footer;
+  }
+
+  .#{$prefix}--dialog-footer .#{$prefix}--btn {
+    flex: 0 1 50%;
+    align-items: baseline;
+    margin: 0;
+    block-size: $spacing-10;
+    max-inline-size: none;
+  }
+
+  .#{$prefix}--dialog-footer--three-button .#{$prefix}--btn {
+    flex: 0 1 25%;
+    align-items: flex-start;
+  }
+
+  .#{$prefix}--dialog--danger {
+    background-color: $ai-overlay;
+  }
+
+  .#{$prefix}--dialog--danger .#{$prefix}--dialog-container {
+    @include ai-popover-gradient('default', 0, 'layer');
+
+    border: 1px solid transparent;
+    background-color: $layer;
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
+      0 24px 40px -24px $ai-drop-shadow;
+  }
+
+  .#{$prefix}--dialog--danger
+    .#{$prefix}--dialog-container:has(.#{$prefix}--dialog-footer) {
+    @include ai-popover-gradient('default', $spacing-10, 'layer');
+
+    box-shadow:
+      inset 0 -80px 0 -16px $layer,
+      inset 0 -160px 70px -65px $ai-inner-shadow,
+      0 24px 40px -24px $ai-drop-shadow;
+  }
+
+  .#{$prefix}--dialog--danger
+    .#{$prefix}--dialog-content.#{$prefix}--dialog-scroll-content {
+    mask-image: linear-gradient(
+        to bottom,
+        $layer calc(100% - $spacing-11),
+        transparent calc(100% - $spacing-09),
+        transparent 100%
+      ),
+      linear-gradient(to left, $layer 0, $spacing-05, transparent $spacing-05),
+      linear-gradient(to right, $layer 0, $spacing-01, transparent $spacing-01),
+      linear-gradient(to top, $layer 0, $spacing-01, transparent $spacing-01);
+  }
+  .#{$prefix}--dialog__close {
+    padding: convert.to-rem(12px);
+    border: 2px solid transparent;
+    background-color: transparent;
+    block-size: 3rem;
+    cursor: pointer;
+    inline-size: 3rem;
+    transition: background-color $duration-fast-02 motion(standard, productive);
+
+    &:hover {
+      background-color: $layer-hover;
+    }
+
+    &:focus {
+      border-color: $focus;
+      outline: none;
+    }
+  }
 }

package/scss/components/dropdown/_dropdown.scss

@@ -481,10 +481,6 @@
     }
   }
 
-  .#{$prefix}--list-box__menu-item__selected-icon {
-    @include high-contrast-mode('icon-fill');
-  }
-
   // readonly
   .#{$prefix}--dropdown--readonly,
   .#{$prefix}--dropdown--readonly:hover {

package/scss/components/file-uploader/_file-uploader.scss

@@ -347,6 +347,7 @@
   }
 
   .#{$prefix}--file__state-container .#{$prefix}--file-complete {
+    // TODO: Should this be $icon-interactive instead?
     fill: $interactive;
     inline-size: $spacing-06;
 
@@ -412,12 +413,7 @@
   }
 
   // Windows HCM fix
-
   .#{$prefix}--file__selected-file {
     @include high-contrast-mode('outline');
   }
-
-  .#{$prefix}--file__state-container .#{$prefix}--file-close svg path {
-    @include high-contrast-mode('icon-fill');
-  }
 }

package/scss/components/fluid-number-input/_fluid-number-input.scss

@@ -58,7 +58,8 @@
     position: initial;
   }
 
-  .#{$prefix}--number-input--fluid input[type='number'] {
+  .#{$prefix}--number-input--fluid input[type='number'],
+  .#{$prefix}--number-input--fluid input[type='text'] {
     padding: convert.to-rem(32px) convert.to-rem(80px) convert.to-rem(13px)
       $spacing-05;
     background: transparent;
@@ -75,6 +76,10 @@
   .#{$prefix}--number-input--fluid
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid
+    input[type='text']:focus
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
     border-block-end-color: $focus;
     box-shadow: inset 0 -1px $focus;
@@ -83,6 +88,10 @@
   .#{$prefix}--number-input--fluid
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:last-of-type,
+  .#{$prefix}--number-input--fluid
+    input[type='text']:focus
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:last-of-type {
     box-shadow:
       inset 0 -1px $focus,
@@ -97,6 +106,15 @@
   .#{$prefix}--number-input--fluid--invalid
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='text']:focus
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid--invalid
+    input[type='text']:focus
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
     border-block-end-color: transparent;
     box-shadow: none;
@@ -110,6 +128,15 @@
   .#{$prefix}--number-input--fluid--invalid
     input[type='number'][data-invalid]:focus
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:last-of-type,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='text']:focus
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:last-of-type,
+  .#{$prefix}--number-input--fluid--invalid
+    input[type='text'][data-invalid]:focus
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:last-of-type {
     box-shadow: inset -2px 0 $focus;
   }
@@ -117,6 +144,10 @@
   .#{$prefix}--number-input--fluid--invalid
     input[type='number'][data-invalid]:not(:focus)
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:last-of-type:hover,
+  .#{$prefix}--number-input--fluid--invalid
+    input[type='text'][data-invalid]:not(:focus)
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:last-of-type:hover {
     box-shadow: inset -2px 0 $support-error;
   }
@@ -124,6 +155,10 @@
   .#{$prefix}--number-input--fluid--invalid
     input[type='number'][data-invalid]:not(:focus)
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover,
+  .#{$prefix}--number-input--fluid--invalid
+    input[type='text'][data-invalid]:not(:focus)
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:hover {
     box-shadow: none;
   }
@@ -141,6 +176,15 @@
     )
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover,
+  .#{$prefix}--number-input--fluid:not(
+      .#{$prefix}--number-input--fluid--invalid
+    )
+    .#{$prefix}--number-input-wrapper:not(
+      .#{$prefix}--number-input-wrapper__warning
+    )
+    input[type='text']:focus
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:hover {
     border-block-end: 1px solid $focus;
     outline: none;
@@ -154,6 +198,15 @@
     .#{$prefix}--number
     input[type='number'][data-invalid]
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:focus:hover,
+  .#{$prefix}--number-input--fluid--invalid
+    input[type='text'][data-invalid]
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:focus,
+  .#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number
+    input[type='text'][data-invalid]
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:focus:hover {
     @include focus-outline('outline');
   }
@@ -177,13 +230,19 @@
 
   .#{$prefix}--number-input--fluid
     .#{$prefix}--number__input-wrapper--warning
-    input[type='number'] {
+    input[type='number'],
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='text'] {
     border-block-end: 1px solid transparent;
   }
 
   .#{$prefix}--number-input--fluid
     .#{$prefix}--number__input-wrapper--warning
-    input[type='number']:focus {
+    input[type='number']:focus,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='text']:focus {
     outline: none;
   }
 
@@ -216,7 +275,10 @@
 
   .#{$prefix}--number-input--fluid--invalid
     .#{$prefix}--number[data-invalid]
-    input[type='number'] {
+    input[type='number'],
+  .#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number[data-invalid]
+    input[type='text'] {
     border-block-end: 1px solid transparent;
   }
 
@@ -232,6 +294,19 @@
     .#{$prefix}--number__input-wrapper--warning
     input[type='number']
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover:not(:focus),
+  .#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number[data-invalid]
+    input[type='text'],
+  .#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number
+    input[type='text'][data-invalid]
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='text']
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:hover:not(:focus) {
     outline: none;
   }
@@ -245,6 +320,16 @@
     .#{$prefix}--number__input-wrapper--warning
     input[type='number']
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--invalid
+    .#{$prefix}--number__input-wrapper
+    input[type='text']
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='text']
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
     border-block-end: none;
   }
@@ -258,6 +343,16 @@
     .#{$prefix}--number
     input[type='number']
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number
+    input[type='text'][data-invalid]
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number
+    input[type='text']
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
     border: initial;
     border-block-end-width: convert.to-rem(1px);
@@ -273,7 +368,10 @@
 
   .#{$prefix}--number-input--fluid--disabled.#{$prefix}--number-input--fluid--invalid
     .#{$prefix}--number
-    input[type='number']:disabled {
+    input[type='number']:disabled,
+  .#{$prefix}--number-input--fluid--disabled.#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number
+    input[type='text']:disabled {
     background-color: transparent;
   }
 

package/scss/components/form/_form.scss

@@ -116,12 +116,14 @@ $input-label-weight: 400 !default;
     inline-size: convert.to-rem(75px);
   }
 
-  input[type='number'] {
+  input[type='number'],
+  input[type='text'].#{$prefix}--number {
     font-family: font-family('sans');
   }
 
   input[data-invalid]:not(:focus),
   .#{$prefix}--number[data-invalid] input[type='number']:not(:focus),
+  .#{$prefix}--number[data-invalid] input[type='text']:not(:focus),
   .#{$prefix}--text-input__field-wrapper[data-invalid]
     > .#{$prefix}--text-input--invalid:not(:focus),
   .#{$prefix}--text-area__wrapper[data-invalid]

package/scss/components/list-box/_list-box.scss

@@ -1145,12 +1145,6 @@ $list-box-menu-width: convert.to-rem(300px);
     @include high-contrast-mode('focus');
   }
 
-  .#{$prefix}--list-box__menu-icon > svg,
-  .#{$prefix}--list-box__selection > svg,
-  .#{$prefix}--list-box__selection--multi > svg {
-    @include high-contrast-mode('icon-fill');
-  }
-
   .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__menu-icon)
     .#{$prefix}--list-box__selection::after {
     position: absolute;

package/scss/components/modal/_modal.scss

@@ -489,11 +489,6 @@
   }
 
   // Windows HCM fix
-
-  .#{$prefix}--modal-close__icon {
-    @include high-contrast-mode('icon-fill');
-  }
-
   .#{$prefix}--modal-close:focus {
     @include high-contrast-mode('focus');
   }