From f71185c2776edfee3ea4145aa2a86d3f043d62d7 Mon Sep 17 00:00:00 2001
From: Tobias Barsnes <tobias.barsnes@digdir.no>
Date: Tue, 17 Sep 2024 10:17:18 +0200
Subject: [PATCH] feat(modal): css changes (#2418)

part of #2295
I am not renaming anything is this PR. That belongs in it's own PR
---
 .changeset/heavy-rabbits-boil.md              |   6 +
 packages/css/modal.css                        | 126 ++++++++++--------
 .../src/components/Modal/ModalHeader.tsx      |  10 +-
 3 files changed, 75 insertions(+), 67 deletions(-)
 create mode 100644 .changeset/heavy-rabbits-boil.md

diff --git a/.changeset/heavy-rabbits-boil.md b/.changeset/heavy-rabbits-boil.md
new file mode 100644
index 0000000000..1216ccb154
--- /dev/null
+++ b/.changeset/heavy-rabbits-boil.md
@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Modal: css changes
diff --git a/packages/css/modal.css b/packages/css/modal.css
index e2c47547bd..10090ce7fe 100644
--- a/packages/css/modal.css
+++ b/packages/css/modal.css
@@ -1,5 +1,5 @@
 .ds-modal {
-  --dsc-modal-max-width: 650px;
+  --dsc-modal-max-width: 40rem;
   --dsc-modal-background: var(--ds-color-neutral-background-default);
   --dsc-modal-color: var(--ds-color-neutral-text-default);
   --dsc-modal-backdrop-background: rgb(0 0 0 / 0.5);
@@ -16,76 +16,84 @@
   box-shadow: var(--ds-shadow-xl);
   background-color: var(--dsc-modal-background);
   color: var(--dsc-modal-color);
-}
-
-.ds-modal::backdrop {
-  background-color: var(--dsc-modal-backdrop-background);
-  animation: fade-in 300ms ease-in-out;
-}
 
-.ds-modal[open] {
-  animation:
-    slide-in 300ms ease-in-out,
-    fade-in 300ms ease-in-out;
-}
-
-.ds-modal > hr {
-  margin: var(--ds-spacing-3) 0 !important;
-  border-color: var(--ds-color-neutral-border-subtle);
-}
-
-.ds-modal--lock-scroll {
-  overflow: hidden;
-}
+  &::backdrop {
+    background-color: var(--dsc-modal-backdrop-background);
+    animation: fade-in 300ms ease-in-out;
+  }
 
-@media (max-width: 650px) {
-  .ds-modal {
-    min-width: 100%;
-    max-width: 100%;
-    border-radius: 0;
+  &[open] {
+    animation:
+      slide-in 300ms ease-in-out,
+      fade-in 300ms ease-in-out;
   }
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .ds-modal[open] {
-    animation: none;
+  & > hr {
+    margin: var(--ds-spacing-3) 0 !important;
   }
 
-  .ds-modal::backdrop {
-    animation: none;
+  @media (max-width: 40rem) {
+    & {
+      min-width: 100%;
+      max-width: 100%;
+      border-radius: 0;
+    }
   }
-}
 
-.ds-modal__header {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  padding: var(--dsc-modal-header-padding);
-  gap: var(--ds-spacing-1);
-  color: var(--dsc-modal-color);
-}
+  @media (prefers-reduced-motion: reduce) {
+    &[open] {
+      animation: none;
+    }
 
-.ds-modal__header--no-button {
-  --dsc-modal-header-padding: var(--ds-spacing-6) var(--ds-spacing-6) var(--ds-spacing-2) var(--ds-spacing-6);
-}
+    &::backdrop {
+      animation: none;
+    }
+  }
 
-.ds-modal__header__button {
-  position: absolute;
-  top: var(--ds-spacing-3);
-  right: var(--ds-spacing-3);
-}
+  &.ds-modal--lock-scroll {
+    overflow: hidden;
+  }
 
-.ds-modal__footer {
-  display: flex;
-  align-items: center;
-  gap: var(--ds-spacing-4);
-  padding: var(--dsc-modal-footer-padding);
-}
+  .ds-modal__header {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    padding: var(--dsc-modal-header-padding);
+    gap: var(--ds-spacing-1);
+
+    &:not(:has(> .ds-modal__header__button)) {
+      --dsc-modal-header-padding: var(--ds-spacing-6) var(--ds-spacing-6) var(--ds-spacing-2) var(--ds-spacing-6);
+    }
+
+    .ds-modal__header__button {
+      position: absolute;
+      top: var(--ds-spacing-3);
+      right: var(--ds-spacing-3);
+      color: var(--dsc-modal-color);
+
+      &::before {
+        content: '';
+        background: currentcolor;
+        height: 1.5em;
+        width: 1.5em;
+        mask: center/contain no-repeat
+          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24' focusable='false' role='img'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'%3E%3C/path%3E%3C/svg%3E");
+      }
+    }
+  }
 
-.ds-modal__content {
-  padding: var(--dsc-modal-content-padding);
-  max-height: var(--dsc-modal-content-max-height);
-  overflow-y: auto;
+  .ds-modal__footer {
+    display: flex;
+    align-items: center;
+    gap: var(--ds-spacing-4);
+    padding: var(--dsc-modal-footer-padding);
+  }
+
+  .ds-modal__content {
+    padding: var(--dsc-modal-content-padding);
+    max-height: var(--dsc-modal-content-max-height);
+    overflow-y: auto;
+  }
 }
 
 @keyframes slide-in {
diff --git a/packages/react/src/components/Modal/ModalHeader.tsx b/packages/react/src/components/Modal/ModalHeader.tsx
index 10ad31ff88..f776e3c188 100644
--- a/packages/react/src/components/Modal/ModalHeader.tsx
+++ b/packages/react/src/components/Modal/ModalHeader.tsx
@@ -51,11 +51,7 @@ export const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
     return (
       <Component
         ref={ref}
-        className={cl(
-          'ds-modal__header',
-          !closeButton && 'ds-modal__header--no-button',
-          className,
-        )}
+        className={cl('ds-modal__header', className)}
         {...rest}
       >
         {subtitle && (
@@ -77,9 +73,7 @@ export const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
             icon
             className='ds-modal__header__button'
             title={closeButtonTitle}
-          >
-            <XMarkIcon title={closeButtonTitle} fontSize='1.5em' />
-          </Button>
+          />
         )}
       </Component>
     );