style(Popover): change background and add shadow (#3188)

Co-authored-by: Michael Marszalek <[email protected]>

Author: Barsnes

.changeset/gold-lemons-fry.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**Popover**: Added shadow and fixed default background color

packages/css/src/dropdown.css

@@ -12,7 +12,6 @@
   border-width: var(--dsc-dropdown-border-width);
   border-style: var(--dsc-dropdown-border-style);
   border-color: var(--dsc-dropdown-border-color);
-  box-shadow: var(--ds-shadow-md);
   box-sizing: border-box;
   list-style: none;
   min-width: 15em;

packages/css/src/popover.css

@@ -1,19 +1,21 @@
 .ds-popover {
-  --dsc-popover-background: var(--ds-color-surface-tinted);
+  --dsc-popover-background: var(--ds-color-surface-default);
   --dsc-popover-border-width: var(--ds-border-width-default);
   --dsc-popover-border-style: solid;
   --dsc-popover-border-color: var(--ds-color-border-default);
   --dsc-popover-color: var(--ds-color-text-default);
-  --dsc-popover-arrow-size: var(--ds-size-2);
+  --dsc-popover-arrow-size: var(--ds-size-3);
   --dsc-popover-border-radius: var(--ds-border-radius-md);
   --dsc-popover-max-width: 300px;
   --dsc-popover-padding: var(--ds-size-3) var(--ds-size-4);
+  --dsc-popover-box-shadow: var(--ds-shadow-md);
 
   background: var(--dsc-popover-background);
   border-radius: var(--dsc-popover-border-radius);
   border-width: var(--dsc-popover-border-width);
   border-style: var(--dsc-popover-border-style);
   border-color: var(--dsc-popover-border-color);
+  box-shadow: var(--dsc-popover-box-shadow);
   box-sizing: border-box;
   color: var(--dsc-popover-color);
   inset: 0 auto auto 0;
@@ -54,11 +56,11 @@
   }
 
   &[data-variant='default'] {
-    --dsc-popover-background: var(--ds-color-background-default);
+    --dsc-popover-background: var(--ds-color-surface-default);
   }
 
   &[data-variant='tinted'] {
-    --dsc-popover-background: var(--ds-color-background-tinted);
+    --dsc-popover-background: var(--ds-color-surface-tinted);
   }
 }