Merge pull request #2127 from SpareBank1/develop_darkmode-modal

fix(ffe-modals): darkmode
SpareBank1 · Jun 26, 2024 · 98386c6 · 98386c6
2 parents 1cfbd72 + ef0b02f
commit 98386c6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/packages/ffe-modals/less/modal.less b/packages/ffe-modals/less/modal.less
@@ -16,13 +16,8 @@
 }
 
 .ffe-modal::backdrop {
+    background-color: var(--ffe-v-modal-backdrop-color);
     backdrop-filter: blur(4px);
-    background-color: rgba(0, 0, 0, 0.6);
-    .native & {
-        @media (prefers-color-scheme: dark) {
-            background-color: rgba(255, 255, 255, 0.1);
-        }
-    }
 }
 
 .ffe-modal__body {
@@ -31,12 +26,22 @@
 
 .ffe-modal__block {
     margin: var(--ffe-spacing-md);
+
+    &:first-of-type {
+        margin-top: 0;
+        padding-top: var(--ffe-spacing-md);
+    }
+
+    &:last-of-type {
+        margin-bottom: 0;
+        padding-bottom: var(--ffe-spacing-md);
+    }
 }
 
 .ffe-modal__close {
     --background-color: var(--ffe-v-modal-bg-color);
-    --border-color: var(--ffe-v-modal-close-button-color);
-    --text-color: var(--ffe-v-modal-close-button-color);
+    --border-color: var(--ffe-v-modal-close-button-border-color);
+    --text-color: var(--ffe-v-modal-close-button-cross-color);
     --outline-color: transparent;
 
     aspect-ratio: 1;
@@ -49,7 +54,7 @@
     padding: var(--ffe-spacing-2xs);
     border-radius: 50%;
     float: right;
-    margin: 0 var(--ffe-spacing-md) var(--ffe-spacing-md);
+    margin: var(--ffe-spacing-md);
     outline-offset: 4px;
     transition: all var(--ffe-transition-duration) var(--ffe-ease);
 
@@ -70,7 +75,7 @@
 
     @media (hover: hover) and (pointer: fine) {
         &:hover {
-            --background-color: var(--ffe-v-modal-close-button-color);
+            --background-color: var(--ffe-v-modal-close-button-cross-color);
             --text-color: var(--ffe-v-modal-bg-color);
         }
     }

diff --git a/packages/ffe-modals/less/theme.less b/packages/ffe-modals/less/theme.less
@@ -1,15 +1,17 @@
 :root,
 :host {
-    --ffe-v-modal-backdrop-color: var(--ffe-farge-svart);
+    --ffe-v-modal-backdrop-color: rgba(2, 10, 10, 0.5);
     --ffe-v-modal-bg-color: var(--ffe-farge-hvit);
-    --ffe-v-modal-close-button-color: var(--ffe-farge-vann);
+    --ffe-v-modal-close-button-cross-color: var(--ffe-farge-vann);
+    --ffe-v-modal-close-button-border-color: var(--ffe-farge-vann);
     --ffe-v-modal-border-radius: 24px;
 
     @media (prefers-color-scheme: dark) {
         .native {
+            --ffe-v-modal-backdrop-color: rgba(103, 103, 103, 0.5);
             --ffe-v-modal-bg-color: var(--ffe-farge-svart);
-            --ffe-v-modal-backdrop-color: var(--ffe-farge-hvit);
-            --ffe-v-modal-close-button-color: var(--ffe-farge-vann-70);
+            --ffe-v-modal-close-button-cross-color: var(--ffe-farge-vann-30);
+            --ffe-v-modal-close-button-border-color: var(--ffe-farge-vann-70);
         }
     }
 }