Move more styles.

Author: Templarian

src/pg/menu/menu.css

@@ -6,9 +6,10 @@
   display: flex;
   flex-direction: column;
   padding: var(--pg-menu-padding, 0.25rem);
-  border-width: var(--pg-menu-border-width, 0);
+  border-width: var(--pg-menu-border-width, 1px);
+  border-color: var(--pg-menu-border-color, #453C4F);
   border-style: solid;
   border-radius: 0.5rem;
-  background-color: var(--pg-menu-background-color, #1E1E1E);
+  background-color: var(--pg-menu-background-color, #FFFFFF);
   box-shadow: var(--pg-menu-box-shadow, none);
 }

src/pg/menuItem/menuItem.css

@@ -16,12 +16,11 @@
   border-top-right-radius: var(--pg-menu-item-border-radius-top, 0.25rem);
   border-bottom-left-radius: var(--pg-menu-item-border-radius-bottom, 0.25rem);
   border-bottom-right-radius: var(--pg-menu-item-border-radius-bottom, 0.25rem);
-  color: var(--pg-menu-item-color, #FFFFFF);
+  color: var(--pg-menu-item-color, #453C4F);
 }
 
-[part=label]:not(:disabled):hover
-/*[part=label]:not(:disabled):focus*/ {
-  background: #248BE5;
+[part=label]:not(:disabled):hover {
+  background: var(--pg-menu-item-selected-background, #453C4F);
   color: #FFFFFF;
 }
 

src/theme-ui3.css

@@ -14,4 +14,12 @@
   --pg-button-hover-background-color: #453C4F;
   --pg-button-hover-color: #FFFFFF;
   --pg-button-hover-color: #FFFFFF;
+  /* Menu */
+  --pg-menu-padding: 0.25rem;
+  --pg-menu-border-width: 0;
+  --pg-menu-border-color: transparent;
+  /* Menu Item */
+  --pg-menu-item-color: #FFFFFF;
+  --pg-menu-item-background: transparent;
+  --pg-menu-item-selected-background: #248BE5;
 }