feat(ffe-lists): legg til bakgrunnsfarger på detail list card

SpareBank1 · Jul 2, 2024 · c5255a0 · c5255a0
1 parent 27bc822
commit c5255a0
Showing 1 changed file with 41 additions and 1 deletion.
diff --git a/packages/ffe-lists/less/detail-list-card.less b/packages/ffe-lists/less/detail-list-card.less
@@ -1,5 +1,7 @@
 .ffe-detail-list-card {
-    background-color: var(--ffe-v-detail-list-card-background-color);
+    --detail-list-bg-color: var(--ffe-v-detail-list-card-background-color);
+
+    background-color: var(--detail-list-bg-color);
     border-radius: var(--ffe-v-detail-list-card-border-radius);
     font-family: var(--ffe-g-font);
     font-variant-numeric: tabular-nums;
@@ -62,4 +64,42 @@
             align-items: normal;
         }
     }
+
+    &--bg-sand-30 {
+        --detail-list-bg-color: var(--ffe-farge-sand-30);
+    }
+
+    &--bg-sand-70 {
+        --detail-list-bg-color: var(--ffe-farge-sand-70);
+    }
+
+    &--bg-frost-30 {
+        --detail-list-bg-color: var(--ffe-farge-frost-30);
+    }
+
+    &--bg-syrin-30 {
+        --detail-list-bg-color: var(--ffe-farge-syrin-30);
+    }
+
+    &--bg-syrin-70 {
+        --detail-list-bg-color: var(--ffe-farge-syrin-70);
+    }
+}
+
+.native & {
+    @media (prefers-color-scheme: dark) {
+        .ffe-detail-list-card {
+            &--dm-bg-svart {
+                --detail-list-bg-color: var(--ffe-farge-svart);
+            }
+
+            &--dm-bg-natt {
+                --detail-list-bg-color: var(--ffe-farge-natt);
+            }
+
+            &--dm-bg-koksgraa {
+                --detail-list-bg-color: var(--ffe-farge-koksgraa);
+            }
+        }
+    }
 }