@carbon/ibm-products 2.28.1 → 2.29.0

package/scss/components/Tearsheet/_tearsheet.scss

@@ -23,19 +23,39 @@
 $block-class: #{$pkg-prefix}--tearsheet;
 
 // stylelint-disable-next-line carbon/theme-token-use
-$overlay-color: $gray-100;
-
 $motion-duration: $duration-moderate-02;
 
 @include block-wrap($block-class) {
   &.#{$block-class} {
+    --overlay-color: #{$overlay};
+    --overlay-opacity: 1;
+
+    &::before {
+      position: absolute;
+      display: block;
+      background: var(--overlay-color);
+      content: '';
+      inset: 0;
+      opacity: var(--overlay-opacity);
+
+      transition: background-color $motion-duration motion(exit, expressive),
+        opacity $motion-duration motion(exit, expressive);
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+
+    &.#{$block-class}.#{$block-class} {
+      /* tearsheet uses --overlay-color and --overlay-opacity in ::before */
+      background: initial;
+    }
+
     z-index: utilities.z('modal') + 1;
     align-items: flex-end;
     color: $text-primary;
     // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
-    transition: visibility 0s linear $motion-duration,
-      background-color $motion-duration motion(exit, expressive),
-      opacity $motion-duration motion(exit, expressive);
+    transition: visibility 0s linear $motion-duration;
     --#{$block-class}--stacking-scale-factor-single: 0.95;
     --#{$block-class}--stacking-scale-factor-double: 0.9;
   }
@@ -53,27 +73,26 @@ $motion-duration: $duration-moderate-02;
   }
 
   &.#{$block-class}--stacked-1-of-2 {
+    --overlay-opacity: 0.67;
+
     z-index: utilities.z('modal') - 1;
-    // stylelint-disable-next-line carbon/theme-token-use
-    background-color: rgba($overlay-color, 0.33);
   }
 
   &.#{$block-class}--stacked-1-of-3 {
+    --overlay-opacity: 0.22;
+
     z-index: utilities.z('modal') - 2;
-    // stylelint-disable-next-line carbon/theme-token-use
-    background-color: rgba($overlay-color, 0.11);
   }
 
   &.#{$block-class}--stacked-2-of-3 {
+    --overlay-opacity: 0.5;
+
     z-index: utilities.z('modal') - 1;
-    // stylelint-disable-next-line carbon/theme-token-use
-    background-color: rgba($overlay-color, 0.25);
   }
 
   &.#{$block-class}--stacked-2-of-2,
   &.#{$block-class}--stacked-3-of-3 {
-    // stylelint-disable-next-line carbon/theme-token-use
-    background-color: rgba($overlay-color, 0.25);
+    --overlay-opacity: 0.5;
   }
 
   .#{$block-class}__container {
@@ -238,12 +257,14 @@ $motion-duration: $duration-moderate-02;
   &.#{$block-class}--wide
     .#{$block-class}__header.#{$block-class}__header--with-close-icon,
   &.#{$block-class}--has-slug .#{$block-class}__header.#{$block-class}__header {
-    padding-right: $spacing-11;
+    padding-inline-end: $spacing-11;
   }
 
   &.#{$block-class}--wide.#{$block-class}--has-slug
     .#{$block-class}__header.#{$block-class}__header--with-close-icon {
-    margin-right: $spacing-09;
+    /* spacing 11 plus additional space for slug/close */
+    /* stylelint-disable-next-line carbon/layout-token-use */
+    padding-inline-end: calc(#{$spacing-11 + $spacing-09});
   }
 
   &.#{$block-class}--narrow .#{$block-class}__header-description {
@@ -367,6 +388,11 @@ $motion-duration: $duration-moderate-02;
     background: $background;
   }
 
+  &.#{$block-class}--has-slug {
+    /* stylelint-disable-next-line carbon/theme-token-use */
+    --overlay-color: #{$ai-overlay};
+  }
+
   &.#{$block-class}--has-slug:not(.#{$block-class}--has-close)
     .#{$carbon-prefix}--slug {
     inset-inline-end: 0;

package/scss/components/_index-with-carbon.scss

@@ -60,7 +60,10 @@
 @use './CoachmarkOverlayElements/index-with-carbon' as *;
 @use './CoachmarkStack/index-with-carbon' as *;
 @use './DelimitedList/index-with-carbon' as *;
+@use './Decorator/index-with-carbon' as *;
+@use './DescriptionList/index-with-carbon' as *;
 @use './FullPageError/index-with-carbon' as *;
 @use './SearchBar/index-with-carbon' as *;
 @use './StringFormatter/index-with-carbon' as *;
 @use './UserAvatar/index-with-carbon' as *;
+@use './StatusIndicator/index-with-carbon' as *;

package/scss/components/_index.scss

@@ -68,7 +68,10 @@
 @use './InterstitialScreenView';
 @use './InterstitialScreenViewModule';
 @use './DelimitedList';
+@use './Decorator';
+@use './DescriptionList';
 @use './FullPageError';
 @use './SearchBar';
 @use './StringFormatter';
 @use './UserAvatar';
+@use './StatusIndicator';