Clean up Dialog & Dialog CSS (#42604)

* Match border inside dialog to outside

* darken dark backdrop

* Fix drawer up, hook up drawer-sheet modifier

diff --git a/scss/_dialog.scss b/scss/_dialog.scss
index ee2b36e4001f3b2ff759849cd483de7e044c9aea..69bada97b145564ac93d0e664f2ae4c3a4447da8 100644 (file)
--- a/scss/_dialog.scss
+++ b/scss/_dialog.scss
@@ -30,13 +30,13 @@ $dialog-tokens: defaults(
     --dialog-box-shadow: var(--box-shadow-lg),
     --dialog-transition-duration: .3s,
     --dialog-transition-timing: cubic-bezier(.22, 1, .36, 1),
-    --dialog-backdrop-bg: rgb(0 0 0 / 50%),
+    --dialog-backdrop-bg: light-dark(rgb(0 0 0 / 50%), rgb(0 0 0 / 65%)),
     --dialog-backdrop-blur: 8px,
     --dialog-header-padding: 1rem,
-    --dialog-header-border-color: var(--border-color),
+    --dialog-header-border-color: var(--border-color-translucent),
     --dialog-header-border-width: var(--border-width),
     --dialog-footer-padding: 1rem,
-    --dialog-footer-border-color: var(--border-color),
+    --dialog-footer-border-color: var(--border-color-translucent),
     --dialog-footer-border-width: var(--border-width),
     --dialog-footer-gap: .5rem,
   ),

diff --git a/scss/_drawer.scss b/scss/_drawer.scss
index b14f175694162e89854b91ae82d447ed33455b9a..fd5f78468c7653cc7f3d0e13feb0729509cf698a 100644 (file)
--- a/scss/_drawer.scss
+++ b/scss/_drawer.scss
@@ -1,5 +1,6 @@
 @use "functions" as *;
 @use "config" as *;
+@use "layout/breakpoints" as *;
 @use "mixins/border-radius" as *;
 @use "mixins/box-shadow" as *;
 @use "mixins/dialog-shared" as *;
@@ -29,6 +30,8 @@ $drawer-tokens: defaults(
     --drawer-transition-duration: .3s,
     --drawer-transition-timing: cubic-bezier(.22, 1, .36, 1),
     --drawer-title-line-height: 1.5,
+    --drawer-backdrop-bg: color-mix(in oklch, var(--bg-body) 25%, transparent),
+    --drawer-backdrop-blur: 8px,
   ),
   $drawer-tokens
 );
@@ -217,14 +220,9 @@ $drawer-backdrop-tokens: defaults(
     }
   }
 
-  // Native ::backdrop for modal drawer.
-  // ::backdrop lives in the top layer outside the DOM tree, so it does NOT
-  // inherit custom properties from the element. Tokens must be applied directly.
   @include loop-breakpoints-down() using ($breakpoint, $next, $prefix) {
     .#{$prefix}drawer::backdrop {
-      @include tokens($drawer-backdrop-tokens);
-      @include tokens($drawer-tokens);
-      background-color: color-mix(in oklch, var(--drawer-backdrop-bg) var(--drawer-backdrop-opacity), transparent);
+      background-color: var(--drawer-backdrop-bg);
       backdrop-filter: blur(var(--drawer-backdrop-blur));
       @include backdrop-transitions(var(--drawer-transition-duration), var(--drawer-transition-timing));
     }
@@ -255,10 +253,18 @@ $drawer-backdrop-tokens: defaults(
   // Overrides tokens so placement transforms (which use calc() with --drawer-inset)
   // automatically position the drawer at the viewport edge.
   .drawer-sheet {
-    --drawer-inset: 0;
-    --drawer-border-radius: 0;
-    --drawer-border-width: 0;
-    --drawer-box-shadow: none;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100vw;
+    margin-inline: auto;
+    margin-bottom: calc(-1 * var(--drawer-border-width));
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+
+    @include media-breakpoint-up(lg) {
+      max-width: var(--drawer-sheet-width, 760px);
+    }
   }
 
   // Header with close button

diff --git a/site/src/content/docs/components/drawer.mdx b/site/src/content/docs/components/drawer.mdx
index af74c0ecb553fac59a617d288386a65895b3a94d..078cd4755021911df6b121a99b581272f7b8b57b 100644 (file)
--- a/site/src/content/docs/components/drawer.mdx
+++ b/site/src/content/docs/components/drawer.mdx
@@ -174,6 +174,24 @@ Add `.drawer-translucent` to the drawer panel to blur and saturate the backgroun
     </div>
   </dialog>`} />
 
+## Sheet
+
+Add `.drawer-sheet` to render the panel flush against the viewport edge. The sheet variant removes the drawer’s inset, border, border-radius, and box-shadow, so it sits edge-to-edge like a traditional offcanvas. It works with any placement.
+
+<Example code={`<button class="btn-solid theme-primary" type="button" data-bs-toggle="drawer" data-bs-target="#drawerSheet" aria-controls="drawerSheet">
+    Toggle sheet drawer
+  </button>
+
+  <dialog class="drawer drawer-bottom drawer-sheet" tabindex="-1" id="drawerSheet" aria-labelledby="drawerSheetLabel">
+    <div class="drawer-header">
+      <h5 class="drawer-title" id="drawerSheetLabel">Sheet drawer</h5>
+      <CloseButton dismiss="drawer" />
+    </div>
+    <div class="drawer-body">
+      Content for the sheet drawer goes here. It sits flush to the edge with no inset, border, rounded corners, or shadow.
+    </div>
+  </dialog>`} />
+
 ## Responsive
 
 Responsive drawer classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, `.lg:drawer` hides content in a drawer below the `lg` breakpoint, but shows the content above the `lg` breakpoint. Responsive drawer classes are available for each breakpoint.