Improve menu item focus color

docs/getting-started/changelog.md

@@ -6,6 +6,10 @@ Components with the <sl-badge type="warning" pill>Experimental</sl-badge> badge
 
 _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
 
+## Next
+
+- Updated `sl-menu-item` focus styles
+
 ## 2.0.0-beta.26
 
 - 🚨 BREAKING CHANGE: Fixed animations bloat

src/components/menu-item/menu-item.scss

@@ -15,16 +15,18 @@
   letter-spacing: var(--sl-letter-spacing-normal);
   text-align: left;
   color: var(--sl-color-gray-700);
+  border-radius: var(--sl-border-radius-medium);
   padding: var(--sl-spacing-xx-small) var(--sl-spacing-x-large);
   transition: var(--sl-transition-fast) fill;
   user-select: none;
   white-space: nowrap;
   cursor: pointer;
+  margin: 0 var(--sl-spacing-x-small);
 
   &.menu-item--focused:not(.menu-item--disabled) {
     outline: none;
-    background-color: var(--sl-color-primary-50);
+    background-color: var(--sl-color-primary-500);
-    color: var(--sl-color-primary-500);
+    color: var(--sl-color-white);
   }
 
   &.menu-item--disabled {

themes/dark.css

@@ -185,8 +185,8 @@
 }
 
 .sl-theme-dark sl-menu-item::part(base):focus {
-  background-color: var(--sl-color-primary-950);
+  background-color: var(--sl-color-primary-600);
-  color: var(--sl-color-primary-500);
+  color: var(--sl-color-white);
 }
 
 .sl-theme-dark sl-menu-item[disabled]::part(base) {