@carbon/styles 1.113.0 → 1.114.0-rc.0

package/scss/components/scroll-gradient/_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 'scroll-gradient';
+@use 'scroll-gradient';
+
+@include scroll-gradient.scroll-gradient;

package/scss/components/scroll-gradient/_scroll-gradient.scss

@@ -0,0 +1,107 @@
+//
+// 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.
+//
+
+//-----------------------------
+// Scroll gradient
+//-----------------------------
+
+@use '../../config' as *;
+@use '../../spacing' as *;
+
+/// ScrollGradient styles
+/// @access public
+/// @group scroll-gradient
+@mixin scroll-gradient {
+  $intersection-value: 3rem;
+
+  .#{$prefix}--scroll-gradient {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
+    block-size: inherit;
+    inline-size: inherit;
+  }
+
+  .#{$prefix}--scroll-gradient__content {
+    display: grid;
+    overflow: auto;
+    block-size: inherit;
+    grid-template-columns: 1fr;
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--scroll-gradient__content-children {
+    block-size: 100%;
+    grid-column-start: 1;
+    grid-row-start: 1;
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--scroll-gradient__content-children > * {
+    grid-area: 1 / 1;
+  }
+
+  .#{$prefix}--scroll-gradient__start-vertical,
+  .#{$prefix}--scroll-gradient__start-horizontal,
+  .#{$prefix}--scroll-gradient__end-vertical,
+  .#{$prefix}--scroll-gradient__end-horizontal {
+    position: absolute;
+    z-index: 1;
+    display: none;
+    pointer-events: none;
+  }
+
+  .#{$prefix}--scroll-gradient--y-scrollable
+    .#{$prefix}--scroll-gradient__start-vertical {
+    block-size: $spacing-09;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+
+  .#{$prefix}--scroll-gradient--y-scrollable
+    .#{$prefix}--scroll-gradient__end-vertical {
+    block-size: $spacing-09;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+  }
+
+  .#{$prefix}--scroll-gradient--x-scrollable
+    .#{$prefix}--scroll-gradient__start-horizontal {
+    inline-size: $spacing-09;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+
+  .#{$prefix}--scroll-gradient--x-scrollable
+    .#{$prefix}--scroll-gradient__end-horizontal {
+    inline-size: $spacing-09;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+  }
+
+  .#{$prefix}--scroll-gradient [data-start-vertical],
+  .#{$prefix}--scroll-gradient [data-end-vertical] {
+    block-size: $intersection-value;
+    grid-column-start: 1;
+    grid-row-start: 1;
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--scroll-gradient [data-end-vertical],
+  .#{$prefix}--scroll-gradient [data-end-horizontal] {
+    place-self: flex-end;
+  }
+
+  .#{$prefix}--scroll-gradient [data-start-horizontal],
+  .#{$prefix}--scroll-gradient [data-end-horizontal] {
+    block-size: 100%;
+    grid-column-start: 1;
+    grid-row-start: 1;
+    inline-size: $intersection-value;
+  }
+}

package/scss/components/slider/_slider.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.
@@ -198,9 +198,11 @@
       background $duration-fast-02 motion(standard, productive),
       box-shadow $duration-fast-02 motion(standard, productive);
 
-    &:hover {
-      // 20px / 14px = 1.4286
-      transform: scale(1.4286);
+    @media (any-hover: hover) {
+      &:hover {
+        // 20px / 14px = 1.4286
+        transform: scale(1.4286);
+      }
     }
 
     &:focus {
@@ -248,11 +250,13 @@
       inset-inline-end: 0;
     }
 
-    &:hover {
-      transform: none;
+    @media (any-hover: hover) {
+      &:hover {
+        transform: none;
 
-      .#{$prefix}--slider__thumb-icon {
-        fill: $text-secondary;
+        .#{$prefix}--slider__thumb-icon {
+          fill: $text-secondary;
+        }
       }
     }
 
@@ -289,11 +293,16 @@
       inset-inline: 0 auto;
     }
 
-    &:hover,
     &:active,
     &:focus {
       transform: none;
     }
+
+    @media (any-hover: hover) {
+      &:hover {
+        transform: none;
+      }
+    }
   }
 
   .#{$prefix}--slider__input {
@@ -376,9 +385,11 @@
   .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb {
     background-color: $border-disabled;
 
-    &:hover {
-      cursor: not-allowed;
-      transform: none;
+    @media (any-hover: hover) {
+      &:hover {
+        cursor: not-allowed;
+        transform: none;
+      }
     }
 
     &:focus {
@@ -400,12 +411,18 @@
     background-color: transparent;
 
     &:active,
-    &:hover,
     &:focus {
       background-color: transparent;
       transform: none;
     }
 
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: transparent;
+        transform: none;
+      }
+    }
+
     .#{$prefix}--slider__thumb-icon {
       fill: $border-disabled;
     }
@@ -430,11 +447,17 @@
     transition: none;
 
     &:active,
-    &:focus,
-    &:hover {
+    &:focus {
       color: $text-disabled;
       outline: none;
     }
+
+    @media (any-hover: hover) {
+      &:hover {
+        color: $text-disabled;
+        outline: none;
+      }
+    }
   }
 
   // readonly state

package/scss/components/tabs/_tabs.scss

@@ -827,6 +827,17 @@
   }
 }
 
+//-----------------------------
+// Popover tooltip
+//-----------------------------
+.#{$prefix}--tabs .#{$prefix}--icon-tooltip .#{$prefix}--popover-content {
+  @include custom-property.declaration('popover-offset', convert.to-rem(8px));
+}
+
+.#{$prefix}--tabs .#{$prefix}--icon-tooltip .#{$prefix}--popover-caret {
+  @include custom-property.declaration('popover-offset', convert.to-rem(8px));
+}
+
 .#{$prefix}--tabs.#{$prefix}--tabs--vertical.#{$prefix}--layout--size-sm {
   .#{$prefix}--tabs__nav-link {
     .#{$prefix}--tabs__nav-item-label {

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