@carbon/styles 1.82.0 → 1.83.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.82.0",
+  "version": "1.83.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.33.0",
-    "@carbon/feature-flags": "^0.26.0",
-    "@carbon/grid": "^11.36.0",
-    "@carbon/layout": "^11.34.0",
-    "@carbon/motion": "^11.28.0",
-    "@carbon/themes": "^11.53.0",
-    "@carbon/type": "^11.40.0",
+    "@carbon/colors": "^11.34.0-rc.0",
+    "@carbon/feature-flags": "^0.27.0-rc.0",
+    "@carbon/grid": "^11.37.0-rc.0",
+    "@carbon/layout": "^11.35.0-rc.0",
+    "@carbon/motion": "^11.29.0-rc.0",
+    "@carbon/themes": "^11.54.0-rc.0",
+    "@carbon/type": "^11.41.0-rc.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/plex-mono": "0.0.3-alpha.0",
     "@ibm/plex-sans": "0.0.3-alpha.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "68105b183b14b348bcba4622f86a9e50265414da"
+  "gitHead": "fcae2645f1b5a1a01b5629926df471ec1945d1e6"
 }

package/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 {

package/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

package/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;

package/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 {

package/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;

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

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

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