From 63eb5a773f0a9806ab066899e0c3bd968bfe5bd1 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 20 Jan 2021 12:06:03 -0500
Subject: [PATCH] Improve menu item focus color

---
 docs/getting-started/changelog.md       | 4 ++++
 src/components/menu-item/menu-item.scss | 6 ++++--
 themes/dark.css                         | 4 ++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md
index 015e760c..391ba1b0 100644
--- a/docs/getting-started/changelog.md
+++ b/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
diff --git a/src/components/menu-item/menu-item.scss b/src/components/menu-item/menu-item.scss
index 5f321128..4c802e6a 100644
--- a/src/components/menu-item/menu-item.scss
+++ b/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);
-    color: var(--sl-color-primary-500);
+    background-color: var(--sl-color-primary-500);
+    color: var(--sl-color-white);
   }
 
   &.menu-item--disabled {
diff --git a/themes/dark.css b/themes/dark.css
index 388e00f7..417cf355 100644
--- a/themes/dark.css
+++ b/themes/dark.css
@@ -185,8 +185,8 @@
 }
 
 .sl-theme-dark sl-menu-item::part(base):focus {
-  background-color: var(--sl-color-primary-950);
-  color: var(--sl-color-primary-500);
+  background-color: var(--sl-color-primary-600);
+  color: var(--sl-color-white);
 }
 
 .sl-theme-dark sl-menu-item[disabled]::part(base) {