@carbon/styles 1.106.0 → 1.107.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.106.0",
+  "version": "1.107.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.51.0",
+    "@carbon/colors": "^11.52.0",
     "@carbon/feature-flags": "^1.3.0",
-    "@carbon/grid": "^11.55.0",
-    "@carbon/layout": "^11.52.0",
-    "@carbon/motion": "^11.45.0",
-    "@carbon/themes": "^11.73.0",
-    "@carbon/type": "^11.59.0",
+    "@carbon/grid": "^11.56.0",
+    "@carbon/layout": "^11.53.0",
+    "@carbon/motion": "^11.46.0",
+    "@carbon/themes": "^11.74.0",
+    "@carbon/type": "^11.60.0",
     "@ibm/plex": "6.4.1",
     "@ibm/plex-mono": "1.1.0",
     "@ibm/plex-sans": "1.1.0",
@@ -63,7 +63,7 @@
     "autoprefixer": "^10.4.7",
     "browserslist-config-carbon": "^11.2.0",
     "css": "^3.0.0",
-    "cssnano": "^7.0.0",
+    "cssnano": "^8.0.0",
     "postcss": "^8.5.6",
     "postcss-flexbugs-fixes": "^5.0.2",
     "rimraf": "^6.0.1",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "13c5c427ad4413aea5184a0a593e6452bc163e4a"
+  "gitHead": "2d98f4ee9914fa44acba58f62599c3f5382acad0"
 }

package/scss/_theme.scss

@@ -36,7 +36,6 @@
     @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);
@@ -63,6 +62,8 @@
       'layer-selected-inverse',
       SelectedItem
     );
+    // Set focus color to system Highlight for better visibility in high contrast mode
+    @include custom-property.declaration('focus', Highlight);
   }
 
   // Note: we need to re-emit the contextual layer tokens as part of the theme

package/scss/components/accordion/_accordion.scss

@@ -119,6 +119,13 @@ $content-padding: 0 0 0 $spacing-05 !default;
     }
   }
 
+  // Box shadow focus rings don't appear in high contrast mode, so we use outline instead
+  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
+    .#{$prefix}--accordion__heading:focus {
+      outline: 2px solid Highlight;
+    }
+  }
+
   // Disabled styles
   .#{$prefix}--accordion__heading[disabled] {
     background-color: transparent;

package/scss/components/code-snippet/_code-snippet.scss

@@ -167,6 +167,7 @@ $copy-btn-feedback: $background-inverse !default;
     display: flex;
     align-items: center;
     block-size: 100%;
+    min-inline-size: 0;
     overflow-x: auto;
     padding-inline-start: $spacing-05;
 

package/scss/components/code-snippet/_mixins.scss

@@ -19,4 +19,6 @@
   background-color: $layer;
   inline-size: 100%;
   max-inline-size: convert.to-rem(768px);
+  // Allow shrinking in grid/flex parents (e.g. Stack) so long pre content does not force layout width
+  min-inline-size: 0;
 }

package/scss/components/dialog/_dialog.scss

@@ -287,6 +287,11 @@
     }
   }
 
+  // Prevent a 2px border when using `enable-dialog-element` feature flag
+  .#{$prefix}--dialog.#{$prefix}--modal-container {
+    border: none;
+  }
+
   .#{$prefix}--dialog-content {
     position: relative;
     grid-area: content;

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

@@ -257,6 +257,11 @@
     outline-width: 1px;
   }
 
+  .#{$prefix}--file__selected-file--disabled {
+    color: $text-disabled;
+    cursor: not-allowed;
+  }
+
   .#{$prefix}--file__selected-file--invalid {
     @include focus-outline('invalid');
 
@@ -377,18 +382,25 @@
     background-color: transparent;
     block-size: $spacing-06;
     cursor: pointer;
-    fill: $icon-primary;
     inline-size: $spacing-06;
 
+    svg {
+      fill: $icon-primary;
+    }
+
+    &[disabled] {
+      cursor: not-allowed;
+
+      svg {
+        fill: $icon-disabled;
+      }
+    }
+
     &:focus {
       @include focus-outline('outline');
     }
   }
 
-  .#{$prefix}--file__state-container .#{$prefix}--file-close svg path {
-    fill: $icon-primary;
-  }
-
   .#{$prefix}--file__state-container .#{$prefix}--inline-loading__animation {
     margin-inline-end: -$spacing-03;
   }

package/scss/components/popover/_popover.scss

@@ -147,6 +147,20 @@ $popover-caret-height: custom-property.get-var(
   // High contrast modifier
   .#{$prefix}--popover--high-contrast .#{$prefix}--popover {
     @include popover-highcontrast-base;
+
+    .#{$prefix}--skeleton,
+    .#{$prefix}--skeleton__text,
+    .#{$prefix}--skeleton__placeholder,
+    .#{$prefix}--icon--skeleton {
+      background: theme.$background-inverse-hover;
+    }
+
+    .#{$prefix}--skeleton::before,
+    .#{$prefix}--skeleton__text::before,
+    .#{$prefix}--skeleton__placeholder::before,
+    .#{$prefix}--icon--skeleton::before {
+      background: theme.$background-inverse;
+    }
   }
 
   // Drop shadow modifier

package/scss/components/progress-bar/_progress-bar.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021
+// Copyright IBM Corp. 2021, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -42,7 +42,7 @@
 
   .#{$prefix}--progress-bar__track {
     position: relative;
-    background-color: $layer;
+    background-color: $border-subtle;
     block-size: convert.to-rem(8px);
     inline-size: 100%;
     min-inline-size: convert.to-rem(48px);

package/scss/components/toggle/_toggle.scss

@@ -104,6 +104,12 @@
     }
   }
 
+  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
+    .#{$prefix}--toggle__switch--checked {
+      background-color: Highlight;
+    }
+  }
+
   .#{$prefix}--toggle__text {
     @include type-style('body-01');
 

package/scss/components/toggletip/_toggletip.scss

@@ -41,6 +41,13 @@
     fill: theme.$icon-primary;
   }
 
+  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
+    .#{$prefix}--toggletip-button:hover svg,
+    .#{$prefix}--toggletip--open .#{$prefix}--toggletip-button svg {
+      fill: Highlight;
+    }
+  }
+
   .#{$prefix}--toggletip-button:focus {
     @include focus-outline.focus-outline;
   }