From f6eb237023b0f117b2cbf38bc1018aa3fb0fc05f Mon Sep 17 00:00:00 2001
From: Une Sofie Kinn Ekroll <une.kinn.ekroll@bekk.no>
Date: Wed, 16 Oct 2024 09:56:00 +0200
Subject: [PATCH] fix: modal backdrop was invisible in some browser versions
 (#2615)

See
https://caniuse.com/mdn-css_selectors_backdrop_inherit_from_originating_element
for affected versions.
---
 .changeset/twelve-onions-laugh.md    | 5 +++++
 apps/storybook/chromatic.config.json | 1 +
 packages/css/modal.css               | 4 +++-
 3 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/twelve-onions-laugh.md

diff --git a/.changeset/twelve-onions-laugh.md b/.changeset/twelve-onions-laugh.md
new file mode 100644
index 0000000000..4680176c4e
--- /dev/null
+++ 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
index 18e7e7612d..0979624c1d 100644
--- 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
index 0d5e619900..6a04849622 100644
--- 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] {