@carbon/styles 1.111.0 → 1.112.0

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

@@ -398,18 +398,28 @@
     color: $link-inverse;
   }
 
-  .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:active,
-  .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:hover {
+  .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:active {
     background-color: $background-inverse-hover;
   }
 
-  .#{$prefix}--actionable-notification--low-contrast
-    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:active,
-  .#{$prefix}--actionable-notification--low-contrast
+  @media (any-hover: hover) {
     .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:hover {
+      background-color: $background-inverse-hover;
+    }
+  }
+
+  .#{$prefix}--actionable-notification--low-contrast
+    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:active {
     background-color: $notification-action-hover;
   }
 
+  @media (any-hover: hover) {
+    .#{$prefix}--actionable-notification--low-contrast
+      .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:hover {
+      background-color: $notification-action-hover;
+    }
+  }
+
   .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost:focus {
     border-color: transparent;
     box-shadow: none;
@@ -460,11 +470,13 @@
     );
   }
 
-  .#{$prefix}--actionable-notification:not(
-      .#{$prefix}--actionable-notification--low-contrast
-    )
-    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:hover {
-    color: $notification-action-tertiary-inverse-text;
+  @media (any-hover: hover) {
+    .#{$prefix}--actionable-notification:not(
+        .#{$prefix}--actionable-notification--low-contrast
+      )
+      .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:hover {
+      color: $notification-action-tertiary-inverse-text;
+    }
   }
 
   .#{$prefix}--actionable-notification:not(
@@ -492,10 +504,6 @@
       .#{$prefix}--actionable-notification--low-contrast
     )
     .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:disabled,
-  .#{$prefix}--actionable-notification:not(
-      .#{$prefix}--actionable-notification--low-contrast
-    )
-    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:hover:disabled,
   .#{$prefix}--actionable-notification:not(
       .#{$prefix}--actionable-notification--low-contrast
     )
@@ -504,10 +512,6 @@
       .#{$prefix}--actionable-notification--low-contrast
     )
     .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled,
-  .#{$prefix}--actionable-notification:not(
-      .#{$prefix}--actionable-notification--low-contrast
-    )
-    .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled:hover,
   .#{$prefix}--actionable-notification:not(
       .#{$prefix}--actionable-notification--low-contrast
     )
@@ -517,6 +521,21 @@
     outline: none;
   }
 
+  @media (any-hover: hover) {
+    .#{$prefix}--actionable-notification:not(
+        .#{$prefix}--actionable-notification--low-contrast
+      )
+      .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:hover:disabled,
+    .#{$prefix}--actionable-notification:not(
+        .#{$prefix}--actionable-notification--low-contrast
+      )
+      .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled:hover {
+      background: transparent;
+      color: $notification-action-tertiary-inverse-text-on-color-disabled;
+      outline: none;
+    }
+  }
+
   .#{$prefix}--actionable-notification--hide-close-button
     .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary {
     margin-inline-end: $spacing-03;

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2023
+// Copyright IBM Corp. 2016, 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.
@@ -316,18 +316,28 @@
     color: $link-inverse;
   }
 
-  .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:active,
-  .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:hover {
+  .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:active {
     background-color: $background-inverse-hover;
   }
 
-  .#{$prefix}--inline-notification--low-contrast
-    .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:active,
-  .#{$prefix}--inline-notification--low-contrast
+  @media (any-hover: hover) {
     .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:hover {
+      background-color: $background-inverse-hover;
+    }
+  }
+
+  .#{$prefix}--inline-notification--low-contrast
+    .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:active {
     background-color: $notification-action-hover;
   }
 
+  @media (any-hover: hover) {
+    .#{$prefix}--inline-notification--low-contrast
+      .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:hover {
+      background-color: $notification-action-hover;
+    }
+  }
+
   .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:focus {
     border-color: transparent;
     box-shadow: none;

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

@@ -105,10 +105,12 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     }
   }
 
-  .#{$prefix}--progress-label:hover {
-    box-shadow: 0 convert.to-rem(1px) $link-primary-hover;
-    color: $link-primary-hover;
-    cursor: pointer;
+  @media (any-hover: hover) {
+    .#{$prefix}--progress-label:hover {
+      box-shadow: 0 convert.to-rem(1px) $link-primary-hover;
+      color: $link-primary-hover;
+      cursor: pointer;
+    }
   }
 
   .#{$prefix}--progress--space-equal .#{$prefix}--progress-label {
@@ -228,18 +230,20 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     outline: none;
   }
 
-  .#{$prefix}--progress-step-button--unclickable
-    .#{$prefix}--progress-label:hover {
-    box-shadow: none;
-    color: $text-primary;
-    cursor: default;
-  }
+  @media (any-hover: hover) {
+    .#{$prefix}--progress-step-button--unclickable
+      .#{$prefix}--progress-label:hover {
+      box-shadow: none;
+      color: $text-primary;
+      cursor: default;
+    }
 
-  .#{$prefix}--progress-step-button--unclickable
-    .#{$prefix}--tooltip__label:hover {
-    box-shadow: 0 convert.to-rem(1px) $link-primary;
-    color: $link-primary;
-    cursor: pointer;
+    .#{$prefix}--progress-step-button--unclickable
+      .#{$prefix}--tooltip__label:hover {
+      box-shadow: 0 convert.to-rem(1px) $link-primary;
+      color: $link-primary;
+      cursor: pointer;
+    }
   }
 
   //DISABLED STYLING
@@ -252,13 +256,20 @@ $progress-indicator-bar-width: 1px inset transparent !default;
       fill: $icon-disabled;
     }
 
-    .#{$prefix}--progress-label,
-    .#{$prefix}--progress-label:hover {
+    .#{$prefix}--progress-label {
       box-shadow: none;
       color: $text-disabled;
       cursor: not-allowed;
     }
 
+    @media (any-hover: hover) {
+      .#{$prefix}--progress-label:hover {
+        box-shadow: none;
+        color: $text-disabled;
+        cursor: not-allowed;
+      }
+    }
+
     .#{$prefix}--progress-line {
       cursor: not-allowed;
     }

package/scss/components/slug/_slug.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2023, 2024
+// Copyright IBM Corp. 2023, 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.
@@ -122,30 +122,32 @@ $sizes: (
     box-shadow: inset 0 0 0 1px $focus;
   }
 
-  .#{$prefix}--ai-label .#{$prefix}--ai-label__button:hover,
-  .#{$prefix}--slug .#{$prefix}--slug__button:hover {
-    background: $border-inverse;
-    color: $text-inverse;
-  }
+  @media (any-hover: hover) {
+    .#{$prefix}--ai-label .#{$prefix}--ai-label__button:hover,
+    .#{$prefix}--slug .#{$prefix}--slug__button:hover {
+      background: $border-inverse;
+      color: $text-inverse;
+    }
 
-  .#{$prefix}--ai-label .#{$prefix}--ai-label__button:hover:active,
-  .#{$prefix}--slug .#{$prefix}--slug__button:hover:active {
-    background: $border-inverse;
-    box-shadow:
-      inset 0 0 0 1px $focus,
-      inset 0 0 0 2px $focus-inset;
-    color: $text-inverse;
-  }
+    .#{$prefix}--ai-label .#{$prefix}--ai-label__button:hover:active,
+    .#{$prefix}--slug .#{$prefix}--slug__button:hover:active {
+      background: $border-inverse;
+      box-shadow:
+        inset 0 0 0 1px $focus,
+        inset 0 0 0 2px $focus-inset;
+      color: $text-inverse;
+    }
 
-  .#{$prefix}--ai-label
-    .#{$prefix}--ai-label__button.#{$prefix}--ai-label__button--mini:hover:active,
-  .#{$prefix}--ai-label
-    .#{$prefix}--ai-label__button.#{$prefix}--ai-label__button--2xs:hover:active,
-  .#{$prefix}--slug
-    .#{$prefix}--slug__button.#{$prefix}--slug__button--mini:hover:active,
-  .#{$prefix}--slug
-    .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs:hover:active {
-    box-shadow: inset 0 0 0 1px $focus-inset;
+    .#{$prefix}--ai-label
+      .#{$prefix}--ai-label__button.#{$prefix}--ai-label__button--mini:hover:active,
+    .#{$prefix}--ai-label
+      .#{$prefix}--ai-label__button.#{$prefix}--ai-label__button--2xs:hover:active,
+    .#{$prefix}--slug
+      .#{$prefix}--slug__button.#{$prefix}--slug__button--mini:hover:active,
+    .#{$prefix}--slug
+      .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs:hover:active {
+      box-shadow: inset 0 0 0 1px $focus-inset;
+    }
   }
 
   .#{$prefix}--ai-label__text,
@@ -178,28 +180,30 @@ $sizes: (
     box-shadow: none;
   }
 
-  .#{$prefix}--ai-label .#{$prefix}--ai-label__button--inline:hover,
-  .#{$prefix}--ai-label .#{$prefix}--ai-label__button--inline:hover:active,
-  .#{$prefix}--slug .#{$prefix}--slug__button--inline:hover,
-  .#{$prefix}--slug .#{$prefix}--slug__button--inline:hover:active {
-    border-color: $icon-secondary;
-    background: transparent;
-    box-shadow: none;
-    color: $text-secondary;
-  }
+  @media (any-hover: hover) {
+    .#{$prefix}--ai-label .#{$prefix}--ai-label__button--inline:hover,
+    .#{$prefix}--ai-label .#{$prefix}--ai-label__button--inline:hover:active,
+    .#{$prefix}--slug .#{$prefix}--slug__button--inline:hover,
+    .#{$prefix}--slug .#{$prefix}--slug__button--inline:hover:active {
+      border-color: $icon-secondary;
+      background: transparent;
+      box-shadow: none;
+      color: $text-secondary;
+    }
 
-  .#{$prefix}--ai-label .#{$prefix}--ai-label__button--inline:focus:hover,
-  .#{$prefix}--slug .#{$prefix}--slug__button--inline:focus:hover {
-    border-color: $focus;
-  }
+    .#{$prefix}--ai-label .#{$prefix}--ai-label__button--inline:focus:hover,
+    .#{$prefix}--slug .#{$prefix}--slug__button--inline:focus:hover {
+      border-color: $focus;
+    }
 
-  .#{$prefix}--ai-label
-    .#{$prefix}--ai-label__button--inline:hover
-    .#{$prefix}--ai-label__text::before,
-  .#{$prefix}--slug
-    .#{$prefix}--slug__button--inline:hover
-    .#{$prefix}--slug__text::before {
-    background: $icon-secondary;
+    .#{$prefix}--ai-label
+      .#{$prefix}--ai-label__button--inline:hover
+      .#{$prefix}--ai-label__text::before,
+    .#{$prefix}--slug
+      .#{$prefix}--slug__button--inline:hover
+      .#{$prefix}--slug__text::before {
+      background: $icon-secondary;
+    }
   }
 
   .#{$prefix}--ai-label__button--inline .#{$prefix}--ai-label__text,
@@ -304,13 +308,19 @@ $sizes: (
 
   .#{$prefix}--ai-label
     .#{$prefix}--ai-label__button--inline-with-content:focus,
-  .#{$prefix}--ai-label
-    .#{$prefix}--ai-label__button--inline-with-content:hover:focus,
-  .#{$prefix}--slug .#{$prefix}--slug__button--inline-with-content:focus,
-  .#{$prefix}--slug .#{$prefix}--slug__button--inline-with-content:hover:focus {
+  .#{$prefix}--slug .#{$prefix}--slug__button--inline-with-content:focus {
     box-shadow: inset 0 0 0 1px $focus;
   }
 
+  @media (any-hover: hover) {
+    .#{$prefix}--ai-label
+      .#{$prefix}--ai-label__button--inline-with-content:hover:focus,
+    .#{$prefix}--slug
+      .#{$prefix}--slug__button--inline-with-content:hover:focus {
+      box-shadow: inset 0 0 0 1px $focus;
+    }
+  }
+
   // Slug callout styles
   .#{$prefix}--ai-label .#{$prefix}--ai-label-content,
   .#{$prefix}--slug .#{$prefix}--slug-content {