fix(menu): update menu item border radius (#3504)

* chore(menu): remove mod property and add fallback for spectrum classic

Author: rubencarvalho

.changeset/shiny-files-chew.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/menu": patch
+---
+
+Updated the menu item border radius in Spectrum 2.

components/menu/dist/metadata.json

@@ -250,6 +250,7 @@
     "--spectrum-menu-item-checkmark-width-medium",
     "--spectrum-menu-item-checkmark-width-small",
     "--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start",
+    "--spectrum-menu-item-corner-radius",
     "--spectrum-menu-item-description-color-default",
     "--spectrum-menu-item-description-color-disabled",
     "--spectrum-menu-item-description-color-down",
@@ -332,6 +333,7 @@
     "--spectrum-component-top-to-text-200",
     "--spectrum-component-top-to-text-300",
     "--spectrum-component-top-to-text-75",
+    "--spectrum-corner-radius-100",
     "--spectrum-disabled-content-color",
     "--spectrum-divider-thickness-medium",
     "--spectrum-divider-thickness-small",
@@ -376,7 +378,8 @@
   "system-theme": [
     "--system-menu-item-background-color-down",
     "--system-menu-item-background-color-hover",
-    "--system-menu-item-background-color-key-focus"
+    "--system-menu-item-background-color-key-focus",
+    "--system-menu-item-corner-radius"
   ],
   "passthroughs": [
     "--mod-checkbox-text-to-control",

components/menu/index.css

@@ -370,6 +370,8 @@
 	position: relative;
 	align-items: center;
 
+	border-radius: var(--spectrum-menu-item-corner-radius);
+
 	box-sizing: border-box;
 
 	background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default)));

components/menu/themes/spectrum-two.css

@@ -16,5 +16,6 @@
 		--spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
 		--spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
 		--spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity));
+		--spectrum-menu-item-corner-radius: var(--spectrum-corner-radius-100);
 	}
 }

components/menu/themes/spectrum.css

@@ -20,5 +20,6 @@
 		--spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
 		--spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
 		--spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity));
+		--spectrum-menu-item-corner-radius: 0;
 	}
 }