fix: tearsheet overlay (carbon-design-system#4421)

* fix: tearsheet overlay * fix: selector for old overlay --------- Co-authored-by: Matt Gallo <[email protected]>
lee-chase · Feb 23, 2024 · 8a93722 · 8a93722
1 parent b96ff02
commit 8a93722
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 18 deletions.
diff --git a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap
@@ -2693,13 +2693,33 @@ p.c4p--about-modal__copyright-text:first-child {
 }
 
 .c4p--tearsheet.c4p--tearsheet {
+  --overlay-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
+  --overlay-opacity: 1;
   z-index: 9001;
   align-items: flex-end;
   color: var(--cds-text-primary, #161616);
-  transition: visibility 0s linear 240ms, background-color 240ms cubic-bezier(0.4, 0.14, 1, 1), opacity 240ms cubic-bezier(0.4, 0.14, 1, 1);
+  transition: visibility 0s linear 240ms;
   --c4p--tearsheet--stacking-scale-factor-single: 0.95;
   --c4p--tearsheet--stacking-scale-factor-double: 0.9;
 }
+.c4p--tearsheet.c4p--tearsheet::before {
+  position: absolute;
+  display: block;
+  background: var(--overlay-color);
+  content: "";
+  inset: 0;
+  opacity: var(--overlay-opacity);
+  transition: background-color 240ms cubic-bezier(0.4, 0.14, 1, 1), opacity 240ms cubic-bezier(0.4, 0.14, 1, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .c4p--tearsheet.c4p--tearsheet::before {
+    transition: none;
+  }
+}
+.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet {
+  /* tearsheet uses --overlay-color and --overlay-opacity in ::before */
+  background: initial;
+}
 .c4p--tearsheet.is-visible {
   z-index: 9000;
   align-items: flex-end;
@@ -2711,19 +2731,19 @@ p.c4p--about-modal__copyright-text:first-child {
   }
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-2 {
+  --overlay-opacity: 0.67;
   z-index: 8999;
-  background-color: rgba(22, 22, 22, 0.33);
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-1-of-3 {
+  --overlay-opacity: 0.22;
   z-index: 8998;
-  background-color: rgba(22, 22, 22, 0.11);
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-2-of-3 {
+  --overlay-opacity: 0.5;
   z-index: 8999;
-  background-color: rgba(22, 22, 22, 0.25);
 }
 .c4p--tearsheet.c4p--tearsheet--stacked-2-of-2, .c4p--tearsheet.c4p--tearsheet--stacked-3-of-3 {
-  background-color: rgba(22, 22, 22, 0.25);
+  --overlay-opacity: 0.5;
 }
 .c4p--tearsheet .c4p--tearsheet__container {
   top: auto;
@@ -2936,6 +2956,10 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
   background: var(--cds-background, #ffffff);
 }
+.c4p--tearsheet.c4p--tearsheet--has-slug {
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  --overlay-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5));
+}
 .c4p--tearsheet.c4p--tearsheet--has-slug:not(.c4p--tearsheet--has-close) .cds--slug {
   inset-inline-end: 0;
 }

diff --git a/packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss b/packages/ibm-products-styles/src/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 {
@@ -369,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;