focus

Author: Templarian

src/pg/menuItem/menuItem.css

@@ -3,6 +3,7 @@
 }
 
 [part=label] {
+  outline: none;
   display: flex;
   align-items: center;
   font-family: var(--pg-font-family);
@@ -25,21 +26,41 @@
 }
 
 [part=label]:not(:disabled):active {
-  background: #2B9CFF;
+  background: var(--pg-menu-item-active-background, #5f516e);
 }
 
 [part=label]:disabled {
-  color: #BBBBBB;
+  color: var(--pg-menu-item-disabled-color, rgb(69, 60, 79, 0.75));
 }
 
 [part=label].checked::before {
   position: absolute;
   translate: -1.5rem 0;
-  content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 17.4999,10.2501L 10.5,17.25L 6.49999,13.25L 7.9142,11.8358L 10.5,14.4216L 16.0857,8.83584L 17.4999,10.2501 Z' fill='white' /></svg>");
+  content: var(--pg-menu-item-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 17.5,10.2501L 10.5,17.25L 6.5,13.25L 7.9,11.8L 10.5,14.4L 16.0857,8.8L 17.5,10.25Z' fill='rgb(69, 60, 79)' /></svg>"));
   width: 1.5rem;
   height: 1.5rem;
 }
 
+[part=label].checked:hover::before {
+  content: var(--pg-menu-item-hover-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 17.5,10.2501L 10.5,17.25L 6.5,13.25L 7.9,11.8L 10.5,14.4L 16.0857,8.8L 17.5,10.25Z' fill='white' /></svg>"));
+}
+
 [part=label].checked:disabled::before {
-  content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 17.4999,10.2501L 10.5,17.25L 6.49999,13.25L 7.9142,11.8358L 10.5,14.4216L 16.0857,8.83584L 17.4999,10.2501 Z' fill='rgb(187, 187, 187)' /></svg>");
+  content: var(--pg-menu-item-hover-check, url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 17.5,10.2501L 10.5,17.25L 6.5,13.25L 7.9,11.8L 10.5,14.4L 16.0857,8.8L 17.5,10.25Z' fill='rgb(69, 60, 79, 0.5)' /></svg>"));
+}
+
+[part=label]:focus {
+  position: relative;
+}
+
+[part=label]:focus::after {
+  pointer-events: none;
+  content: '';
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  border-radius: 0.25rem;
+  box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.5));
 }

src/theme-ui3.css

@@ -22,4 +22,8 @@
   --pg-menu-item-color: #FFFFFF;
   --pg-menu-item-background: transparent;
   --pg-menu-item-selected-background: #248BE5;
+  --pg-menu-item-disabled-color: #BBBBBB;
+  --pg-menu-item-check: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 17.4999,10.2501L 10.5,17.25L 6.49999,13.25L 7.9142,11.8358L 10.5,14.4216L 16.0857,8.83584L 17.4999,10.2501 Z' fill='white' /></svg>");
+  --pg-menu-item-hover-check: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M 17.4999,10.2501L 10.5,17.25L 6.49999,13.25L 7.9142,11.8358L 10.5,14.4216L 16.0857,8.83584L 17.4999,10.2501 Z' fill='rgb(187, 187, 187)' /></svg>");
+  --pg-menu-item-active-background: #2B9CFF;
 }