fix dialog/drawer borders in WHC

shoelace-style · Nov 14, 2022 · 36e677d · 36e677d
1 parent 6167993
commit 36e677d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/src/components/dialog/dialog.styles.ts b/src/components/dialog/dialog.styles.ts
@@ -37,6 +37,12 @@ export default css`
     box-shadow: var(--sl-shadow-x-large);
   }
 
+  @media (forced-colors: active) {
+    .dialog__panel {
+      border: solid 1px var(--sl-color-neutral-0);
+    }
+  }
+
   .dialog__panel:focus {
     outline: none;
   }

diff --git a/src/components/drawer/drawer.styles.ts b/src/components/drawer/drawer.styles.ts
@@ -50,6 +50,12 @@ export default css`
     outline: none;
   }
 
+  @media (forced-colors: active) {
+    .drawer__panel {
+      border: solid 1px var(--sl-color-neutral-0);
+    }
+  }
+
   .drawer--top .drawer__panel {
     top: 0;
     inset-inline-end: auto;