Merge branch 'next' into fix/input-readonly-contrast

digdir · Oct 16, 2024 · 358bcca · 358bcca
2 parents 235fde1 + f6eb237
commit 358bcca
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/.changeset/twelve-onions-laugh.md b/.changeset/twelve-onions-laugh.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Modal backdrop was invisible in some browser versions. See https://caniuse.com/mdn-css_selectors_backdrop_inherit_from_originating_element for affected versions.
diff --git a/apps/storybook/chromatic.config.json b/apps/storybook/chromatic.config.json
@@ -1,6 +1,7 @@
 {
   "onlyChanged": true,
   "projectId": "Project:66fe736b9d639fe6801bf130",
+  "buildScriptName": "build",
   "storybookBaseDir": "apps/storybook",
   "storybookBuildDir": "dist",
   "zip": true,

diff --git a/packages/css/modal.css b/packages/css/modal.css
@@ -22,7 +22,9 @@
 
   &::backdrop {
     animation: fade-in 300ms ease-in-out;
-    background: var(--dsc-modal-backdrop-background);
+    /* we include a fallback color because ::backdrop didn't inherit
+       custom properties in Chrome until version 122 (mid-2024) */
+    background: var(--dsc-modal-backdrop-background, rgb(0 0 0 / 0.5));
   }
 
   &[open] {