diff --git a/libraries/core-react/src/components/Menu/Menu.tokens.ts b/libraries/core-react/src/components/Menu/Menu.tokens.ts index 25eebb3ff1..e25dcf24eb 100644 --- a/libraries/core-react/src/components/Menu/Menu.tokens.ts +++ b/libraries/core-react/src/components/Menu/Menu.tokens.ts @@ -4,7 +4,6 @@ import type { ComponentToken } from '@equinor/eds-tokens' const { colors: { ui: { - background__light: { rgba: hoverBackground }, background__default: { rgba: background }, }, interactive: { @@ -13,6 +12,7 @@ const { focus: { rgba: focusColor }, disabled__fill: { rgba: disabledIconColor }, disabled__text: { rgba: disabledTextColor }, + table__header__fill_hover: { rgba: hoverBackground }, }, text: { static_icons__default: { rgba: textColor }, diff --git a/libraries/core-react/src/components/Menu/Menu.tsx b/libraries/core-react/src/components/Menu/Menu.tsx index 40b64257df..7c33c9719e 100644 --- a/libraries/core-react/src/components/Menu/Menu.tsx +++ b/libraries/core-react/src/components/Menu/Menu.tsx @@ -19,13 +19,24 @@ type MenuPaperProps = { open: boolean } +const { border } = tokens + const MenuPaper = styled(Paper)` position: absolute; z-index: 150; width: fit-content; min-width: fit-content; - ${bordersTemplate(tokens.border)}; + ${bordersTemplate(border)}; ${({ open }) => css({ visibility: open ? null : 'hidden' })} + + li:first-child { + border-top-left-radius: ${border.type === 'border' && border.radius}; + border-top-right-radius: ${border.type === 'border' && border.radius}; + } + li:last-child { + border-bottom-left-radius: ${border.type === 'border' && border.radius}; + border-bottom-right-radius: ${border.type === 'border' && border.radius}; + } ` type MenuContainerProps = MenuProps & { containerEl: HTMLElement