@carbon/styles 1.86.1-rc.0 → 1.87.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.86.1-rc.0",
+  "version": "1.87.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.36.0",
-    "@carbon/feature-flags": "^0.28.1-rc.0",
-    "@carbon/grid": "^11.39.0",
-    "@carbon/layout": "^11.37.0",
-    "@carbon/motion": "^11.31.0",
-    "@carbon/themes": "^11.56.0",
-    "@carbon/type": "^11.43.0",
+    "@carbon/colors": "^11.37.0",
+    "@carbon/feature-flags": "^0.29.0",
+    "@carbon/grid": "^11.40.0",
+    "@carbon/layout": "^11.38.0",
+    "@carbon/motion": "^11.32.0",
+    "@carbon/themes": "^11.57.0",
+    "@carbon/type": "^11.44.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": "c0c7a3adc9f05f3a1bfb0d53316167c6a7262e6e"
+  "gitHead": "6568a3389c2a82348c693b167b511dea66b7b269"
 }

package/scss/components/button/_button.scss

@@ -150,17 +150,12 @@
   }
 
   .#{$prefix}--btn--icon-only {
+    align-items: center;
     justify-content: center;
     padding: 0;
     block-size: layout.size('height');
     inline-size: layout.size('height');
-    // -1px to compensate for border width
-    padding-block-start: min(
-      calc(
-        (layout.size('height') - convert.to-rem(16px)) / 2 - convert.to-rem(1px)
-      ),
-      var(--temp-padding-block-max)
-    );
+    padding-block-start: 0;
 
     > :first-child {
       min-inline-size: convert.to-rem(16px);

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

@@ -508,15 +508,14 @@ $copy-btn-feedback: $background-inverse !default;
   // Safari-only media query
   // since fades won't appear correctly with CSS custom properties
   // see: tabs, code snippet, and modal overflow indicators
-  @media not all and (min-resolution >= 0.001dpcm) {
-    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-      .#{$prefix}--snippet__overflow-indicator--left {
-        background-image: linear-gradient(to left, rgba($layer, 0), $layer);
-      }
-
-      .#{$prefix}--snippet__overflow-indicator--right {
-        background-image: linear-gradient(to right, rgba($layer, 0), $layer);
-      }
+  @supports (hanging-punctuation: first) and (font: -apple-system-body) and
+    (-webkit-appearance: none) {
+    .#{$prefix}--snippet__overflow-indicator--left {
+      background-image: linear-gradient(to left, rgba($layer, 0), $layer);
+    }
+
+    .#{$prefix}--snippet__overflow-indicator--right {
+      background-image: linear-gradient(to right, rgba($layer, 0), $layer);
     }
   }
 

package/scss/components/loading/_loading.scss

@@ -76,12 +76,11 @@
   }
 
   // Negative values for `stroke-dashoffset` are not supported in Safari
-  @media not all and (resolution >= 0.001dpcm) {
-    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-      circle.#{$prefix}--loading__background {
-        stroke-dasharray: 265;
-        stroke-dashoffset: 0;
-      }
+  @supports (hanging-punctuation: first) and (font: -apple-system-body) and
+    (-webkit-appearance: none) {
+    circle.#{$prefix}--loading__background {
+      stroke-dasharray: 265;
+      stroke-dashoffset: 0;
     }
   }
 

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

@@ -280,6 +280,19 @@
     .#{$prefix}--actionable-notification__subtitle {
     color: $text-primary;
   }
+
+  .#{$prefix}--actionable-notification__caption {
+    @include type-style('body-compact-01');
+
+    color: $text-inverse;
+    padding-block-start: $spacing-06;
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast
+    .#{$prefix}--actionable-notification__caption {
+    color: $text-primary;
+  }
+
   /* Ghost action button when inline */
   .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost {
     block-size: convert.to-rem(32px);

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

@@ -49,7 +49,7 @@
     }
 
     &:hover {
-      background-color: $layer-hover;
+      background-color: $background-hover;
     }
   }
 
@@ -136,7 +136,7 @@
   }
 
   .#{$prefix}--overflow-menu-options--light {
-    background-color: $layer;
+    background-color: $layer-hover;
 
     &::after {
       background-color: $layer;
@@ -144,7 +144,7 @@
   }
 
   .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--light.#{$prefix}--overflow-menu--open:hover {
-    background-color: $layer;
+    background-color: $layer-hover;
   }
 
   .#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']:not(

package/scss/components/skeleton-styles/_ai-skeleton-styles.scss

@@ -8,6 +8,7 @@
 @use '../../config' as *;
 @use '../../theme';
 @use '../../utilities/convert';
+@use '../../utilities/high-contrast-mode' as *;
 
 @keyframes ai-skeleton-animation {
   0% {
@@ -61,6 +62,22 @@
   .#{$prefix}--skeleton__icon--ai {
     border-radius: convert.to-rem(2px);
   }
+
+  //High Contrast Mode
+  //Ensure AI Skeleton is visible and animated in Windows HCM
+  @include high-contrast-mode {
+    .#{$prefix}--skeleton__text--ai,
+    .#{$prefix}--skeleton__placeholder--ai,
+    .#{$prefix}--skeleton__icon--ai {
+      background: CanvasText;
+    }
+
+    .#{$prefix}--skeleton__text--ai::before,
+    .#{$prefix}--skeleton__placeholder--ai::before,
+    .#{$prefix}--skeleton__icon--ai::before {
+      background: Canvas;
+    }
+  }
 }
 
 // rgba($ai-skeleton-element-background, 1)

package/scss/components/tabs/_tabs.scss

@@ -258,41 +258,40 @@
     // Safari-only media query
     // won't appear correctly with CSS custom properties
     // see: code snippet and modal overflow indicators
-    @media not all and (resolution >= 0.001dpcm) {
-      @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    @supports (hanging-punctuation: first) and (font: -apple-system-body) and
+      (-webkit-appearance: none) {
+      .#{$prefix}--tabs__overflow-indicator--left {
+        background-image: linear-gradient(
+          to left,
+          rgba($background, 0),
+          $background
+        );
+      }
+
+      .#{$prefix}--tabs__overflow-indicator--right {
+        background-image: linear-gradient(
+          to right,
+          rgba($background, 0),
+          $background
+        );
+      }
+
+      &.#{$prefix}--tabs--contained
         .#{$prefix}--tabs__overflow-indicator--left {
-          background-image: linear-gradient(
-            to left,
-            rgba($background, 0),
-            $background
-          );
-        }
+        background-image: linear-gradient(
+          to left,
+          rgba($layer-accent, 0),
+          $layer-accent
+        );
+      }
 
+      &.#{$prefix}--tabs--contained
         .#{$prefix}--tabs__overflow-indicator--right {
-          background-image: linear-gradient(
-            to right,
-            rgba($background, 0),
-            $background
-          );
-        }
-
-        &.#{$prefix}--tabs--contained
-          .#{$prefix}--tabs__overflow-indicator--left {
-          background-image: linear-gradient(
-            to left,
-            rgba($layer-accent, 0),
-            $layer-accent
-          );
-        }
-
-        &.#{$prefix}--tabs--contained
-          .#{$prefix}--tabs__overflow-indicator--right {
-          background-image: linear-gradient(
-            to right,
-            rgba($layer-accent, 0),
-            $layer-accent
-          );
-        }
+        background-image: linear-gradient(
+          to right,
+          rgba($layer-accent, 0),
+          $layer-accent
+        );
       }
     }
 

package/scss/components/tag/_tag.scss

@@ -381,10 +381,9 @@
     inline-size: convert.to-rem(60px);
 
     // Safari specific bug (#7672)
-    @media not all and (min-resolution >= 0.001dpcm) {
-      @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-        transform: translateZ(0);
-      }
+    @supports (hanging-punctuation: first) and (font: -apple-system-body) and
+      (-webkit-appearance: none) {
+      transform: translateZ(0);
     }
   }
 

package/scss/components/tile/_tile.scss

@@ -316,10 +316,9 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
       // Safari-only media query
       // Fixes an issue with scrolling
       // and absolutely positioned elements (#8119)
-      @media not all and (resolution >= 0.001dpcm) {
-        @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-          overflow-y: auto;
-        }
+      @supports (hanging-punctuation: first) and (font: -apple-system-body) and
+        (-webkit-appearance: none) {
+        overflow-y: auto;
       }
     }
   }

package/scss/utilities/_skeleton.scss

@@ -8,6 +8,7 @@
 @use 'keyframes';
 @use '../theme' as *;
 @use '../config' as *;
+@use '../utilities/high-contrast-mode' as *;
 
 /// Skeleton loading animation
 /// @access public
@@ -43,6 +44,16 @@
       animation: none;
     }
   }
+
+  // High Contrast Mode support
+  @include high-contrast-mode {
+    background: CanvasText;
+
+    &::before {
+      background: Canvas;
+      forced-color-adjust: none;
+    }
+  }
 }
 
 /// Circular Skeleton loading animation
@@ -68,4 +79,15 @@
       animation: none;
     }
   }
+
+  //High Contrast Mode
+  //Ensure Skeleton is visible and animated in Windows HCM
+  @include high-contrast-mode {
+    background: CanvasText;
+
+    &::before {
+      background: Canvas;
+      forced-color-adjust: none;
+    }
+  }
 }