From 32fdb1774124d40a7b358f0b614c51369e5fb762 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 14 Apr 2025 14:59:36 +0200
Subject: [PATCH 1/5] feat(constants): introduce popover elevation constant

---
 constants/src/elevations.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/constants/src/elevations.js b/constants/src/elevations.js
index 5f7eb1391d..41ab12c091 100644
--- a/constants/src/elevations.js
+++ b/constants/src/elevations.js
@@ -3,4 +3,6 @@ export const elevations = {
     e200: '0px 0px 1px rgba(33,41,52,0.1), 0px 4px 6px -1px rgba(33,41,52,0.1), 0px 2px 4px -1px rgba(33,41,52,0.06)',
     e300: '0px 10px 15px -3px rgba(33,41,52,0.1), 0px 4px 6px -2px rgba(33,41,52,0.05)',
     e400: '0px 25px 50px -12px rgba(33, 41, 52, 0.25)',
+    popover:
+        '0 4px 12px rgba(12, 14, 16, 0.15), 0 0 0 1px rgba(12, 14, 16, 0.05)',
 }

From e47a530cae30653f64acafe9a1b3b6f86ebe8be1 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 14 Apr 2025 15:00:15 +0200
Subject: [PATCH 2/5] fix(select): use popover elevation constant

---
 components/select/src/select/menu-wrapper.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/select/src/select/menu-wrapper.js b/components/select/src/select/menu-wrapper.js
index 5b95d16de4..597b357a05 100644
--- a/components/select/src/select/menu-wrapper.js
+++ b/components/select/src/select/menu-wrapper.js
@@ -31,7 +31,7 @@ const MenuWrapper = ({
                             background: ${colors.white};
                             border: 1px solid ${colors.grey200};
                             border-radius: 3px;
-                            box-shadow: ${elevations.e300};
+                            box-shadow: ${elevations.popover};
                         }
                     `}</style>
                 </div>

From 103020b43c8399afaebb80dc1b9e1c0c706a3520 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 14 Apr 2025 15:00:32 +0200
Subject: [PATCH 3/5] fix(popover): use popover elevation constant

---
 components/popover/src/popover.js              | 2 +-
 components/popover/src/popover.prod.stories.js | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/popover/src/popover.js b/components/popover/src/popover.js
index bdefd2fc4c..1fe3b59514 100644
--- a/components/popover/src/popover.js
+++ b/components/popover/src/popover.js
@@ -12,7 +12,7 @@ const Popover = ({
     arrow = true,
     className,
     dataTest = 'dhis2-uicore-popover',
-    elevation = elevations.e200,
+    elevation = elevations.popover,
     maxWidth = 360,
     observePopperResize,
     observeReferenceResize,
diff --git a/components/popover/src/popover.prod.stories.js b/components/popover/src/popover.prod.stories.js
index 801cad5c4b..7df36941a9 100644
--- a/components/popover/src/popover.prod.stories.js
+++ b/components/popover/src/popover.prod.stories.js
@@ -40,7 +40,6 @@ export default {
     args: {
         arrow: true,
         dataTest: 'dhis2-uicore-popover',
-        elevation: elevations.e200,
         maxWidth: 360,
         placement: 'top',
     },

From 11451bef9612509055a0416389e966198fb06a28 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 14 Apr 2025 15:00:49 +0200
Subject: [PATCH 4/5] fix(flyoutMenu): use popover elevation constant

---
 components/menu/src/flyout-menu/flyout-menu.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/menu/src/flyout-menu/flyout-menu.js b/components/menu/src/flyout-menu/flyout-menu.js
index 971957b6e8..9b7a5bcd08 100644
--- a/components/menu/src/flyout-menu/flyout-menu.js
+++ b/components/menu/src/flyout-menu/flyout-menu.js
@@ -78,9 +78,8 @@ const FlyoutMenu = ({
             <style jsx>{`
                 div {
                     background: ${colors.white};
-                    border: 1px solid ${colors.grey200};
                     border-radius: 3px;
-                    box-shadow: ${elevations.e300};
+                    box-shadow: ${elevations.popover};
                     display: inline-block;
                     min-width: ${dense ? '128' : '180'}px;
                     max-width: ${maxWidth};

From 14595510ad8c5130029c81b8817db6192f4eb45b Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <33054985+cooper-joe@users.noreply.github.com>
Date: Mon, 14 Apr 2025 15:02:12 +0200
Subject: [PATCH 5/5] fix(calendar): use popover elevation constant

---
 .../calendar/src/calendar-input/calendar-input.js     | 11 ++++-------
 .../calendar/src/calendar/calendar-container.js       |  7 ++-----
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/components/calendar/src/calendar-input/calendar-input.js b/components/calendar/src/calendar-input/calendar-input.js
index ee9303eb09..929bae3818 100644
--- a/components/calendar/src/calendar-input/calendar-input.js
+++ b/components/calendar/src/calendar-input/calendar-input.js
@@ -4,7 +4,6 @@ import {
     validateDateString,
 } from '@dhis2/multi-calendar-dates'
 import { Button } from '@dhis2-ui/button'
-import { Card } from '@dhis2-ui/card'
 import { InputField } from '@dhis2-ui/input'
 import { Layer } from '@dhis2-ui/layer'
 import { Popper } from '@dhis2-ui/popper'
@@ -184,12 +183,10 @@ export const CalendarInput = ({
                         placement="bottom-start"
                         modifiers={[offsetModifier]}
                     >
-                        <Card>
-                            <CalendarContainer
-                                {...calendarProps}
-                                calendarRef={calendarRef}
-                            />
-                        </Card>
+                        <CalendarContainer
+                            {...calendarProps}
+                            calendarRef={calendarRef}
+                        />
                     </Popper>
                 </Layer>
             )}
diff --git a/components/calendar/src/calendar/calendar-container.js b/components/calendar/src/calendar/calendar-container.js
index 4053d574b5..646a4badb1 100644
--- a/components/calendar/src/calendar/calendar-container.js
+++ b/components/calendar/src/calendar/calendar-container.js
@@ -1,4 +1,4 @@
-import { colors } from '@dhis2/ui-constants'
+import { elevations } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React, { useMemo } from 'react'
 import { CalendarTable, CalendarTableProps } from './calendar-table.js'
@@ -7,7 +7,6 @@ import {
     NavigationContainerProps,
 } from './navigation-container.js'
 
-const wrapperBorderColor = colors.grey300
 const backgroundColor = 'none'
 
 export const CalendarContainer = React.memo(function CalendarContainer({
@@ -82,12 +81,10 @@ export const CalendarContainer = React.memo(function CalendarContainer({
                     background-color: ${backgroundColor};
                     display: flex;
                     flex-direction: column;
-                    border: 1px solid ${wrapperBorderColor};
                     border-radius: 3px;
                     min-width: ${width};
                     width: max-content;
-                    box-shadow: 0px 4px 6px -2px #2129340d;
-                    box-shadow: 0px 10px 15px -3px #2129341a;
+                    box-shadow: ${elevations.popover};
                 }
             `}</style>
         </div>