@carbon/styles 1.113.0 → 1.114.0

package/scss/components/tag/_tag.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.
@@ -99,8 +99,10 @@
     padding-block: 0;
     padding-inline-end: 0;
 
-    &:hover {
-      outline: none;
+    @media (any-hover: hover) {
+      &:hover {
+        outline: none;
+      }
     }
   }
 
@@ -110,9 +112,11 @@
     color: $text-primary;
     cursor: pointer;
 
-    &:hover {
-      background-color: $layer-hover;
-      outline: none;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: $layer-hover;
+        outline: none;
+      }
     }
 
     &:focus {
@@ -125,8 +129,10 @@
     background-color: $layer-selected-inverse;
     color: $text-inverse;
 
-    &:hover {
-      background-color: $layer-selected-inverse;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: $layer-selected-inverse;
+      }
     }
   }
 
@@ -136,9 +142,11 @@
     color: $tag-color-gray;
     cursor: pointer;
 
-    &:hover {
-      background-color: $tag-hover-gray;
-      outline: none;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: $tag-hover-gray;
+        outline: none;
+      }
     }
 
     &:focus {
@@ -248,8 +256,10 @@
   .#{$prefix}--multi-select--readonly
     .#{$prefix}--tag--high-contrast:not(.#{$prefix}--tag--operational)
     .#{$prefix}--tag__close-icon {
-    &:hover {
-      background-color: transparent;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: transparent;
+      }
     }
   }
 
@@ -270,8 +280,10 @@
     box-shadow: none;
     outline: none;
 
-    &:hover {
-      cursor: not-allowed;
+    @media (any-hover: hover) {
+      &:hover {
+        cursor: not-allowed;
+      }
     }
 
     .#{$prefix}--tag__label {
@@ -286,9 +298,11 @@
     background-color: $layer;
     color: $text-disabled;
 
-    &:hover {
-      background-color: $layer;
-      cursor: not-allowed;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: $layer;
+        cursor: not-allowed;
+      }
     }
   }
 
@@ -350,9 +364,11 @@
     box-shadow: inset 0 0 0 1px $focus-inverse;
   }
 
-  .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
-    .#{$prefix}--tag__close-icon:hover {
-    background-color: transparent;
+  @media (any-hover: hover) {
+    .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
+      .#{$prefix}--tag__close-icon:hover {
+      background-color: transparent;
+    }
   }
 
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg {
@@ -404,11 +420,13 @@
     background-color: currentColor;
   }
 
-  .#{$prefix}--tag
-    .#{$prefix}--ai-label
-    .#{$prefix}--ai-label__button--inline:hover,
-  .#{$prefix}--tag .#{$prefix}--slug .#{$prefix}--slug__button--inline:hover {
-    border-color: currentColor;
+  @media (any-hover: hover) {
+    .#{$prefix}--tag
+      .#{$prefix}--ai-label
+      .#{$prefix}--ai-label__button--inline:hover,
+    .#{$prefix}--tag .#{$prefix}--slug .#{$prefix}--slug__button--inline:hover {
+      border-color: currentColor;
+    }
   }
 
   .#{$prefix}--tag--filter .#{$prefix}--tag__decorator > *,

package/scss/components/text-input/_text-input.scss

@@ -170,8 +170,10 @@
     svg {
     fill: $icon-disabled;
 
-    &:hover {
-      fill: $icon-disabled;
+    @media (any-hover: hover) {
+      &:hover {
+        fill: $icon-disabled;
+      }
     }
   }
 
@@ -183,12 +185,14 @@
     cursor: default;
   }
 
-  .#{$prefix}--text-input--password__visibility__toggle:disabled.#{$prefix}--tooltip__trigger:hover {
-    svg {
-      fill: $icon-disabled;
-    }
+  @media (any-hover: hover) {
+    .#{$prefix}--text-input--password__visibility__toggle:disabled.#{$prefix}--tooltip__trigger:hover {
+      svg {
+        fill: $icon-disabled;
+      }
 
-    cursor: default;
+      cursor: default;
+    }
   }
 
   .#{$prefix}--text-input__counter-alert {

package/scss/components/treeview/_treeview.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2025
+// 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.
@@ -35,8 +35,10 @@
       outline: none;
     }
 
-    &:hover {
-      cursor: pointer;
+    @media (any-hover: hover) {
+      &:hover {
+        cursor: pointer;
+      }
     }
   }
 
@@ -65,30 +67,39 @@
     outline: none;
   }
 
-  .#{$prefix}--tree-node--disabled,
-  .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__label:hover,
-  .#{$prefix}--tree-node--disabled
-    .#{$prefix}--tree-node__label:hover
-    .#{$prefix}--tree-node__label__details {
+  .#{$prefix}--tree-node--disabled {
     background-color: $field-01;
     color: $text-disabled;
+    cursor: not-allowed;
   }
 
   .#{$prefix}--tree-node--disabled .#{$prefix}--tree-parent-node__toggle-icon,
-  .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__icon,
-  .#{$prefix}--tree-node--disabled
-    .#{$prefix}--tree-node__label:hover
-    .#{$prefix}--tree-parent-node__toggle-icon,
-  .#{$prefix}--tree-node--disabled
-    .#{$prefix}--tree-node__label:hover
-    .#{$prefix}--tree-node__icon {
+  .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__icon {
     fill: $icon-disabled;
   }
 
-  .#{$prefix}--tree-node--disabled,
-  .#{$prefix}--tree-node--disabled
-    .#{$prefix}--tree-parent-node__toggle-icon:hover {
-    cursor: not-allowed;
+  @media (any-hover: hover) {
+    .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__label:hover,
+    .#{$prefix}--tree-node--disabled
+      .#{$prefix}--tree-node__label:hover
+      .#{$prefix}--tree-node__label__details {
+      background-color: $field-01;
+      color: $text-disabled;
+    }
+
+    .#{$prefix}--tree-node--disabled
+      .#{$prefix}--tree-node__label:hover
+      .#{$prefix}--tree-parent-node__toggle-icon,
+    .#{$prefix}--tree-node--disabled
+      .#{$prefix}--tree-node__label:hover
+      .#{$prefix}--tree-node__icon {
+      fill: $icon-disabled;
+    }
+
+    .#{$prefix}--tree-node--disabled
+      .#{$prefix}--tree-parent-node__toggle-icon:hover {
+      cursor: not-allowed;
+    }
   }
 
   // Overrides link styling
@@ -122,9 +133,11 @@
     min-block-size: convert.to-rem(32px);
     padding-inline-end: 1rem;
 
-    &:hover {
-      background-color: $layer-hover-01;
-      color: $text-primary;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: $layer-hover-01;
+        color: $text-primary;
+      }
     }
   }
 
@@ -134,14 +147,16 @@
     // (min-height 32px - single line text height 18px) / 2 = 7px
   }
 
-  .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details {
-    color: $text-primary;
-  }
+  @media (any-hover: hover) {
+    .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details {
+      color: $text-primary;
+    }
 
-  .#{$prefix}--tree-node__label:hover
-    .#{$prefix}--tree-parent-node__toggle-icon,
-  .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__icon {
-    fill: $icon-primary;
+    .#{$prefix}--tree-node__label:hover
+      .#{$prefix}--tree-parent-node__toggle-icon,
+    .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__icon {
+      fill: $icon-primary;
+    }
   }
 
   .#{$prefix}--tree-leaf-node {
@@ -177,8 +192,10 @@
     margin-inline: -$spacing-02 $spacing-02;
     padding-inline-start: $spacing-02;
 
-    &:hover {
-      cursor: pointer;
+    @media (any-hover: hover) {
+      &:hover {
+        cursor: pointer;
+      }
     }
 
     &:focus {
@@ -213,8 +230,10 @@
     background-color: $layer-selected-01;
     color: $text-primary;
 
-    &:hover {
-      background-color: $layer-selected-hover-01;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: $layer-selected-hover-01;
+      }
     }
   }
 

package/scss/components/ui-shell/side-nav/_side-nav.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.
@@ -154,31 +154,32 @@
     inline-size: auto;
   }
 
-  .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active):hover
+  @media (any-hover: hover) {
+    .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active):hover,
     .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
-    > .#{$prefix}--side-nav__submenu:hover,
-  .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
-    > .#{$prefix}--side-nav__link:hover,
-  .#{$prefix}--side-nav__menu
-    a.#{$prefix}--side-nav__link:not(.#{$prefix}--side-nav__link--current):not(
-      [aria-current='page']
-    ):hover,
-  .#{$prefix}--side-nav a.#{$prefix}--header__menu-item:hover,
-  .#{$prefix}--side-nav
-    .#{$prefix}--header__menu-title[aria-expanded='true']:hover {
-    // TODO: sync color
-    background-color: $background-hover;
-    color: $text-primary;
-  }
-
-  .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
-    > .#{$prefix}--side-nav__link:hover
-    > span,
-  .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
-    .#{$prefix}--side-nav__menu-item
-    > .#{$prefix}--side-nav__link:hover
-    > span {
-    color: $text-primary;
+      > .#{$prefix}--side-nav__submenu:hover,
+    .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
+      > .#{$prefix}--side-nav__link:hover,
+    .#{$prefix}--side-nav__menu
+      a.#{$prefix}--side-nav__link:not(
+        .#{$prefix}--side-nav__link--current
+      ):not([aria-current='page']):hover,
+    .#{$prefix}--side-nav a.#{$prefix}--header__menu-item:hover,
+    .#{$prefix}--side-nav
+      .#{$prefix}--header__menu-title[aria-expanded='true']:hover {
+      // TODO: sync color
+      background-color: $background-hover;
+      color: $text-primary;
+    }
+    .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
+      > .#{$prefix}--side-nav__link:hover
+      > span,
+    .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
+      .#{$prefix}--side-nav__menu-item
+      > .#{$prefix}--side-nav__link:hover
+      > span {
+      color: $text-primary;
+    }
   }
 
   .#{$prefix}--side-nav__item--large {
@@ -220,9 +221,11 @@
     user-select: none;
   }
 
-  .#{$prefix}--side-nav__submenu:hover {
-    background-color: $background-hover;
-    color: $text-primary;
+  @media (any-hover: hover) {
+    .#{$prefix}--side-nav__submenu:hover {
+      background-color: $background-hover;
+      color: $text-primary;
+    }
   }
 
   .#{$prefix}--side-nav__submenu:focus {
@@ -257,10 +260,16 @@
     block-size: mini-units(6);
   }
 
-  .#{$prefix}--side-nav__item--active .#{$prefix}--side-nav__submenu:hover {
-    //the active className is used for selected styles, hence using the selected tokens
-    background-color: $background-selected;
-    color: $text-primary;
+  @media (any-hover: hover) {
+    .#{$prefix}--side-nav__submenu:hover {
+      background-color: $background-hover;
+      color: $text-primary;
+    }
+    .#{$prefix}--side-nav__item--active .#{$prefix}--side-nav__submenu:hover {
+      //the active className is used for selected styles, hence using the selected tokens
+      background-color: $background-selected;
+      color: $text-primary;
+    }
   }
 
   .#{$prefix}--side-nav__item--active
@@ -505,14 +514,16 @@
       padding-inline-start: 4.25rem;
     }
 
-    a.#{$prefix}--header__menu-item:hover {
-      background-color: $background-hover;
-      color: $text-primary;
-    }
+    @media (any-hover: hover) {
+      a.#{$prefix}--header__menu-item:hover {
+        background-color: $background-hover;
+        color: $text-primary;
+      }
 
-    // non-hover, selected state inherited from `_header.scss`
-    a.#{$prefix}--header__menu-item--current:hover {
-      background-color: $layer-selected-hover;
+      // non-hover, selected state inherited from `_header.scss`
+      a.#{$prefix}--header__menu-item--current:hover {
+        background-color: $layer-selected-hover;
+      }
     }
   }
 
@@ -532,13 +543,18 @@
     block-size: inherit;
   }
 
-  .#{$prefix}--side-nav
-    a.#{$prefix}--header__menu-item:hover
-    .#{$prefix}--header__menu-arrow,
   .#{$prefix}--side-nav
     a.#{$prefix}--header__menu-item:focus
     .#{$prefix}--header__menu-arrow,
   .#{$prefix}--side-nav .#{$prefix}--header__menu-arrow {
     fill: $icon-secondary;
   }
+
+  @media (any-hover: hover) {
+    .#{$prefix}--side-nav
+      a.#{$prefix}--header__menu-item:hover
+      .#{$prefix}--header__menu-arrow {
+      fill: $icon-secondary;
+    }
+  }
 }

package/scss/components/ui-shell/switcher/_switcher.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.
@@ -56,10 +56,12 @@
     color: $text-secondary;
     text-decoration: none;
 
-    &:hover:not(.#{$prefix}--switcher__item-link--selected) {
-      background: $layer-hover;
-      color: $text-primary;
-      cursor: pointer;
+    @media (any-hover: hover) {
+      &:hover:not(.#{$prefix}--switcher__item-link--selected) {
+        background: $layer-hover;
+        color: $text-primary;
+        cursor: pointer;
+      }
     }
 
     &:focus {

package/scss/components/user-avatar/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+@forward 'user-avatar';
+@use 'user-avatar';
+
+@include user-avatar.user-avatar;

package/scss/components/user-avatar/_user-avatar.scss

@@ -0,0 +1,160 @@
+//
+// Copyright IBM Corp. 2024, 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.
+//
+
+@use 'sass:map';
+@use '../../config' as *;
+@use '../../theme' as *;
+@use '../../type' as *;
+@use '../../spacing' as *;
+@use '@carbon/colors' as *;
+
+$_sizes: (
+  xl: $spacing-10,
+  lg: $spacing-09,
+  md: $spacing-07,
+  sm: $spacing-06,
+);
+
+@mixin -size($block-class, $size) {
+  $_size: map.get($_sizes, $size);
+
+  .#{$block-class}--#{$size} {
+    block-size: $_size;
+    inline-size: $_size;
+  }
+}
+
+@mixin -photo-size($block-class, $size) {
+  $_size: map.get($_sizes, $size);
+
+  .#{$block-class}__photo--#{$size} {
+    border-radius: 100%;
+    block-size: $_size;
+    inline-size: $_size;
+    object-fit: fill;
+  }
+}
+
+@mixin -set-light-bg($block-class, $order, $color) {
+  :root .#{$block-class}--#{$order},
+  .#{$prefix}--g10 .#{$block-class}--#{$order},
+  .#{$prefix}--white .#{$block-class}--#{$order} {
+    background-color: $color;
+  }
+}
+
+@mixin -set-dark-bg($block-class, $order, $color) {
+  .#{$prefix}--g90 .#{$block-class}--#{$order},
+  .#{$prefix}--g100 .#{$block-class}--#{$order} {
+    background-color: $color;
+  }
+}
+
+/// UserAvatar styles
+/// @access public
+/// @group user-avatar
+@mixin user-avatar {
+  $block-class: #{$prefix}--user-avatar;
+
+  .#{$block-class} {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 0.5px solid transparent;
+    border-radius: 100%;
+    block-size: 4rem;
+    color: $text-inverse;
+    inline-size: 4rem;
+    outline: none;
+    outline-offset: 3px;
+  }
+
+  .#{$block-class} svg {
+    color: $icon-inverse;
+  }
+
+  .#{$block-class}__tooltip-trigger {
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    margin: 0;
+    appearance: none;
+    background: none;
+    block-size: 100%;
+    cursor: pointer;
+    inline-size: 100%;
+    outline: none;
+  }
+
+  .#{$block-class}__tooltip {
+    &:focus-within .#{$block-class} {
+      outline: 2px solid $focus;
+      outline-offset: 1px;
+    }
+  }
+
+  .#{$block-class}__photo {
+    border-radius: 100%;
+    object-fit: contain;
+  }
+
+  @include -size($block-class, 'xl');
+  @include -size($block-class, 'lg');
+  @include -size($block-class, 'md');
+  @include -size($block-class, 'sm');
+
+  .#{$block-class}--xl {
+    @include type-style('heading-04');
+  }
+
+  .#{$block-class}--lg {
+    @include type-style('heading-03');
+  }
+
+  .#{$block-class}--md {
+    @include type-style('body-compact-01');
+  }
+
+  .#{$block-class}--sm {
+    @include type-style('label-01');
+  }
+
+  @include -photo-size($block-class, 'xl');
+  @include -photo-size($block-class, 'lg');
+  @include -photo-size($block-class, 'md');
+  @include -photo-size($block-class, 'sm');
+
+  @include -set-light-bg($block-class, order-1-cyan, $cyan-60);
+  @include -set-light-bg($block-class, order-2-gray, $gray-60);
+  @include -set-light-bg($block-class, order-3-green, $green-60);
+  @include -set-light-bg($block-class, order-4-magenta, $magenta-60);
+  @include -set-light-bg($block-class, order-5-purple, $purple-60);
+  @include -set-light-bg($block-class, order-6-teal, $teal-60);
+  @include -set-light-bg($block-class, order-7-cyan, $cyan-80);
+  @include -set-light-bg($block-class, order-8-gray, $gray-80);
+  @include -set-light-bg($block-class, order-9-green, $green-80);
+  @include -set-light-bg($block-class, order-10-magenta, $magenta-80);
+  @include -set-light-bg($block-class, order-11-purple, $purple-80);
+  @include -set-light-bg($block-class, order-12-teal, $teal-80);
+
+  @include -set-dark-bg($block-class, order-1-cyan, $cyan-50);
+  @include -set-dark-bg($block-class, order-2-gray, $gray-50);
+  @include -set-dark-bg($block-class, order-3-green, $green-50);
+  @include -set-dark-bg($block-class, order-4-magenta, $magenta-50);
+  @include -set-dark-bg($block-class, order-5-purple, $purple-50);
+  @include -set-dark-bg($block-class, order-6-teal, $teal-50);
+  @include -set-dark-bg($block-class, order-7-cyan, $cyan-30);
+  @include -set-dark-bg($block-class, order-8-gray, $gray-30);
+  @include -set-dark-bg($block-class, order-9-green, $green-30);
+  @include -set-dark-bg($block-class, order-10-magenta, $magenta-30);
+  @include -set-dark-bg($block-class, order-11-purple, $purple-30);
+  @include -set-dark-bg($block-class, order-12-teal, $teal-30);
+}