feat(ffe-modals): basic modal

packages/ffe-modals/less/modal.less

@@ -1,4 +1,78 @@
 @import 'theme';
+
+:is(:root, :host):has(.ffe-modal[open]) {
+    overflow-y: hidden;
+}
+
 .ffe-modal {
+    background: var(--ffe-farge-hvit);
+    border: none;
+    border-radius: var(--ffe-v-modal-border-radius);
+    padding: 0;
+}
+
+.ffe-modal[open] {
+    display: grid;
+    pointer-events: auto;
+}
+
+.ffe-modal::backdrop {
+    background: var(--ffe-v-modal-backdrop-color);
+    opacity: 0.6;
+}
+
+.ffe-modal__body {
     background: var(--ffe-v-modal-bg-color);
+    max-width: 600px;
+}
+
+.ffe-modal__block {
+    margin: var(--ffe-spacing-md);
+}
+
+.ffe-modal__close {
+    --background-color: var(--ffe-farge-hvit);
+    --border-color: var(--ffe-farge-vann);
+    --text-color: var(--ffe-farge-vann);
+    --outline-color: var(--ffe-farge-vann);
+
+    aspect-ratio: 1;
+    background: var(--background-color);
+    color: var(--text-color);
+    border: 2px solid var(--border-color);
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+    padding: var(--ffe-spacing-2xs);
+    border-radius: 50%;
+    float: right;
+    margin: var(--ffe-spacing-md);
+
+    &::after {
+        content: '';
+        display: block;
+        clear: both;
+    }
+
+    .ffe-icons {
+        display: block;
+        color: inherit;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            --background-color: var(--ffe-farge-vann);
+            --text-color: var(--ffe-farge-hvit);
+        }
+    }
+    &:focus-visible {
+        box-shadow: 0 0 0 2px var(--outline-color);
+        outline: none;
+    }
+
+    .native & {
+        @media (prefers-color-scheme: dark) {
+            --outline-color: var(--ffe-farge-hvit);
+        }
+    }
 }

packages/ffe-modals/less/theme.less

@@ -1,4 +1,6 @@
 :root,
 :host {
+    --ffe-v-modal-backdrop-color: var(--ffe-farge-svart);
     --ffe-v-modal-bg-color: var(--ffe-farge-hvit);
+    --ffe-v-modal-border-radius: 24px;
 }