From 6999f51c20f3c3a672cd369e698b3c8bf11815a2 Mon Sep 17 00:00:00 2001
From: Halvor Haugan <halvor.haugan@nav.no>
Date: Fri, 9 Aug 2024 16:38:25 +0200
Subject: [PATCH 1/2] Modal: Added scroll shadows

---
 .changeset/warm-mice-run.md                   |  5 ++++
 @navikt/core/css/modal.css                    | 12 ++++++++++
 .../core/react/src/modal/modal.stories.tsx    | 24 ++++++++++++++++++-
 3 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/warm-mice-run.md

diff --git a/.changeset/warm-mice-run.md b/.changeset/warm-mice-run.md
new file mode 100644
index 0000000000..808a19e99e
--- /dev/null
+++ b/.changeset/warm-mice-run.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": patch
+---
+
+Modal: Added scroll shadows
diff --git a/@navikt/core/css/modal.css b/@navikt/core/css/modal.css
index 6dd69e6158..6491a7881d 100644
--- a/@navikt/core/css/modal.css
+++ b/@navikt/core/css/modal.css
@@ -128,6 +128,18 @@
   overflow: auto;
   overscroll-behavior: contain;
   position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
+  background:
+    linear-gradient(white 30%, transparent) top,
+    linear-gradient(transparent, white 60%) bottom,
+    radial-gradient(farthest-side at 50% 0, rgba(0 0 0 / 0.3), transparent) top,
+    radial-gradient(farthest-side at 50% 100%, rgba(0 0 0 / 0.3), transparent) bottom;
+  background-size:
+    100% 40px,
+    100% 50px,
+    100% 16px,
+    100% 16px;
+  background-attachment: local, local, scroll, scroll;
+  background-repeat: no-repeat;
 }
 
 .navds-modal--small .navds-modal__body {
diff --git a/@navikt/core/react/src/modal/modal.stories.tsx b/@navikt/core/react/src/modal/modal.stories.tsx
index 7d9115fd53..9d9e4583c7 100644
--- a/@navikt/core/react/src/modal/modal.stories.tsx
+++ b/@navikt/core/react/src/modal/modal.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryFn } from "@storybook/react";
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { FileIcon } from "@navikt/aksel-icons";
 import { Button } from "../button";
 import { Checkbox, CheckboxGroup } from "../form/checkbox";
@@ -293,6 +293,28 @@ PlacementTopLong.parameters = {
   },
 };
 
+export const Scroll: StoryFn = () => {
+  const modalRef = useRef<HTMLDialogElement>(null);
+  const bodyRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!bodyRef.current || !modalRef.current) return;
+    modalRef.current.showModal();
+    bodyRef.current.scrollTop = 100;
+  }, []);
+
+  return (
+    <Modal ref={modalRef} header={{ heading: "Scroll shadow demo" }}>
+      <Modal.Body ref={bodyRef} style={{ maxHeight: "500px" }}>
+        <BodyLong spacing>{lorem}</BodyLong>
+        <BodyLong spacing>{lorem}</BodyLong>
+        <BodyLong spacing>{lorem}</BodyLong>
+        <BodyLong>{lorem}</BodyLong>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
 export const WithTooltip: StoryFn = () => {
   const ref = useRef<HTMLDialogElement>(null);
 

From 86d9c50c179d400deb531efe2fa73f399bddc32b Mon Sep 17 00:00:00 2001
From: Halvor Haugan <halvor.haugan@nav.no>
Date: Mon, 12 Aug 2024 11:50:49 +0200
Subject: [PATCH 2/2] token

---
 @navikt/core/css/modal.css | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/@navikt/core/css/modal.css b/@navikt/core/css/modal.css
index 6491a7881d..d9c78f088a 100644
--- a/@navikt/core/css/modal.css
+++ b/@navikt/core/css/modal.css
@@ -3,7 +3,9 @@
 }
 
 .navds-modal {
-  background-color: var(--ac-modal-bg, var(--a-surface-default));
+  --__ac-modal-bg: var(--ac-modal-bg, var(--a-surface-default));
+
+  background-color: var(--__ac-modal-bg);
   border: none;
   border-radius: var(--a-border-radius-large);
   box-shadow: var(--a-shadow-xlarge);
@@ -129,8 +131,8 @@
   overscroll-behavior: contain;
   position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
   background:
-    linear-gradient(white 30%, transparent) top,
-    linear-gradient(transparent, white 60%) bottom,
+    linear-gradient(var(--__ac-modal-bg) 30%, transparent) top,
+    linear-gradient(transparent, var(--__ac-modal-bg) 60%) bottom,
     radial-gradient(farthest-side at 50% 0, rgba(0 0 0 / 0.3), transparent) top,
     radial-gradient(farthest-side at 50% 100%, rgba(0 0 0 / 0.3), transparent) bottom;
   background-size: