[Darkside] Popover CSS update

@navikt/core/css/darkside/popover.darkside.css

@@ -1,84 +1,26 @@
 .navds-popover {
-  z-index: var(--a-z-index-popover);
-  background-color: var(--ac-popover-bg, var(--a-surface-default));
-  box-shadow: var(--a-shadow-medium);
-  border: 1px solid;
-  border-color: var(--ac-popover-border, var(--a-border-default));
-  border-radius: var(--a-border-radius-large);
-  max-width: calc(100vw - var(--a-spacing-6));
+  z-index: 1000;
+  background: var(--ax-bg-raised);
+  box-shadow:
+    0 0 1px 0 rgba(7 9 13/ 0.02),
+    0 2px 5px 0 rgba(7 9 13/ 0.1),
+    0 5px 12px 0 rgba(7 9 13/ 0.12);
+  border: 1px solid var(--ax-border-subtleA);
+  border-radius: var(--ax-border-radius-xlarge);
+
+  /* Creates a small gutter between screen-edges on smaller devices */
+  max-width: calc(100vw - var(--ax-spacing-6));
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
 }
 
 .navds-popover__content {
-  padding: var(--a-spacing-4);
+  padding: var(--ax-spacing-4);
 }
 
 .navds-popover--hidden {
   display: none;
 }
-
-.navds-popover:focus-visible {
-  outline: none;
-  box-shadow: var(--a-shadow-focus);
-}
-
-@supports not selector(:focus-visible) {
-  .navds-popover:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
-  }
-}
-
-.navds-popover__arrow {
-  position: absolute;
-  z-index: -1;
-  transform: rotate(45deg);
-  background-color: var(--ac-popover-bg, var(--a-surface-default));
-  border: 1px solid;
-  border-color: var(--ac-popover-border, var(--a-border-default));
-  width: 1rem;
-  height: 1rem;
-}
-
-.navds-popover[data-placement^="top"] > .navds-popover__arrow {
-  border-left-color: transparent;
-  border-top-color: transparent;
-}
-
-/* prettier-ignore */
-.navds-popover[data-placement^="bottom"] > .navds-popover__arrow {
-  border-bottom-color: transparent;
-  border-right-color: transparent;
-}
-
-.navds-popover[data-placement^="left"] > .navds-popover__arrow {
-  border-left-color: transparent;
-  border-bottom-color: transparent;
-}
-
-.navds-popover[data-placement^="right"] > .navds-popover__arrow {
-  border-right-color: transparent;
-  border-top-color: transparent;
-}
-
-@media (forced-colors: active) {
-  .navds-popover[data-placement^="top"] > .navds-popover__arrow {
-    border-left-color: canvas;
-    border-top-color: canvas;
-  }
-
-  /* prettier-ignore */
-  .navds-popover[data-placement^="bottom"] > .navds-popover__arrow {
-    border-bottom-color: canvas;
-    border-right-color: canvas;
-  }
-
-  .navds-popover[data-placement^="left"] > .navds-popover__arrow {
-    border-left-color: canvas;
-    border-bottom-color: canvas;
-  }
-
-  .navds-popover[data-placement^="right"] > .navds-popover__arrow {
-    border-right-color: canvas;
-    border-top-color: canvas;
-  }
-}

@navikt/core/react/src/popover/Popover.tsx

@@ -11,6 +11,7 @@ import React, { HTMLAttributes, forwardRef, useContext, useRef } from "react";
 import { DateContext } from "../date/context";
 import { useModalContext } from "../modal/Modal.context";
 import { DismissableLayer } from "../overlays/dismissablelayer/DismissableLayer";
+import { UNSAFE_useAkselTheme } from "../provider";
 import { useClientLayoutEffect } from "../util/hooks";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
@@ -124,6 +125,8 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
     const chosenFlip = isInDatepicker ? false : _flip;
 
+    const themeContext = UNSAFE_useAkselTheme(false);
+
     const {
       update,
       refs,
@@ -135,7 +138,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       placement,
       open,
       middleware: [
-        flOffset(offset ?? (arrow ? 16 : 4)),
+        flOffset(offset ?? themeContext ? 8 : arrow ? 16 : 4),
         chosenFlip &&
           flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         shift({ padding: 12 }),
@@ -187,7 +190,8 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
           aria-hidden={!open || !anchorEl}
         >
           {children}
-          {arrow && (
+          {/* Hide arrow in new design, prop will be remove din breaking change update */}
+          {arrow && !themeContext && (
             <div
               ref={(node) => {
                 arrowRef.current = node;

@navikt/core/react/src/popover/popover.stories.tsx

@@ -92,6 +92,7 @@ export const Placement = () => {
   );
 };
 
+/* TODO: All stories with Arrow can be removed after darkside update */
 export const Arrow = () => {
   return (
     <div className="colgap" style={{ gap: "12rem" }}>