diff --git a/packages/fast-components-styles-msft/src/context-menu-item/index.ts b/packages/fast-components-styles-msft/src/context-menu-item/index.ts index 94d35913919..4410f8a309c 100644 --- a/packages/fast-components-styles-msft/src/context-menu-item/index.ts +++ b/packages/fast-components-styles-msft/src/context-menu-item/index.ts @@ -15,6 +15,7 @@ import { import { applyFocusVisible } from "@microsoft/fast-jss-utilities"; import { applyTypeRampConfig } from "../utilities/typography"; import typographyPattern from "../patterns/typography"; +import { toPx } from "@microsoft/fast-jss-utilities"; const styles: ComponentStyles = { contextMenuItem: { @@ -32,7 +33,11 @@ const styles: ComponentStyles = cursor: "default", ...applyTypeRampConfig("t7"), background: backgroundColor, - borderRadius: "2px", + borderRadius: (config: DesignSystem): string => { + const designSystem: DesignSystem = withDesignSystemDefaults(config); + + return toPx(designSystem.cornerRadius); + }, border: "2px solid transparent", ...applyFocusVisible({ borderColor: ensureForegroundNormal, diff --git a/packages/fast-components-styles-msft/src/context-menu/index.ts b/packages/fast-components-styles-msft/src/context-menu/index.ts index 7827d74dd44..cde2df5be29 100644 --- a/packages/fast-components-styles-msft/src/context-menu/index.ts +++ b/packages/fast-components-styles-msft/src/context-menu/index.ts @@ -6,6 +6,7 @@ import { ComponentStyles, ComponentStyleSheet } from "@microsoft/fast-jss-manage import { ContextMenuClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; import { foregroundLarge } from "../utilities/colors"; import { elevation, ElevationMultiplier } from "../utilities/elevation"; +import { toPx } from "@microsoft/fast-jss-utilities"; const styles: ComponentStyles = ( config: DesignSystem @@ -21,7 +22,7 @@ const styles: ComponentStyles = ( padding: "4px 0", maxWidth: "368px", minWidth: "64px", - borderRadius: "4px", + borderRadius: toPx(designSystem.cornerRadius * 2), }, }; };