Match listbox items to menu styling

Author: SharonStrats

src/v2/components/forms/shared/listboxStyles.ts

@@ -3,19 +3,19 @@ import { css } from 'lit'
 export const listboxStyles = css`
   :host { /* default theme */
       --input-background: var(--color-background, #F8F9FB);
-      --item-text: var(--color-text, #1A1A1A);
+      --item-text: var(--color-text-heading, #000000);
       --item-selected-text: var(--color-primary, #7c4dff);
-      --item-hover-background: var(--lavender-300, #e6dcff);
-      --item-selected-background: var(--lavender-400, #cbb9ff);
+      --item-hover-background: var(--color-header-menu-item-hover, #e6dcff);
+      --item-selected-background: var(--color-header-menu-item-selected, #cbb9ff);
       --listbox-z-index: 1;
     }
 
     :host([theme='dark']) {
       --input-background: var(--color-background, #1A1A1A);
-      --item-text: var(--color-text, #F8F9FB);
+      --item-text: var(--color-text-heading, #F8F9FB);
       --item-selected-text: var(--color-primary, #7c4dff);
-      --item-hover-background: var(--lavender-300, #e6dcff);
-      --item-selected-background: var(--lavender-400, #cbb9ff);
+      --item-hover-background: var(--color-header-menu-item-hover, #e6dcff);
+      --item-selected-background: var(--color-header-menu-item-selected, #cbb9ff);
       --listbox-z-index: 1;
     }
 
@@ -24,6 +24,9 @@ export const listboxStyles = css`
       top: 0;
       left: 0;
       right: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0.0625rem;
       margin: 0;
       padding: 0;
       list-style: none;
@@ -33,32 +36,38 @@ export const listboxStyles = css`
       background-color: var(--input-background);
       opacity: 1;
       overflow: hidden;
+      padding: 0.25rem;
       z-index: var(--listbox-z-index);
       box-shadow: 0 4px 12px rgba(124, 77, 255, 0.12);
     }
 
     .listbox-item {
       display: flex;
       align-items: center;
+      gap: var(--spacing-2xs, 0.625rem);
       width: 100%;
-      min-height: var(--select-trigger-height, var(--min-touch-target, 44px));
-      padding: var(--spacing-xxs, 0.3125rem) var(--spacing-xs, 0.75rem);
+      min-height: calc(var(--font-size-sm, 0.875rem) + 1rem);
+      padding: 0.5rem var(--spacing-xs, 0.75rem);
       border: none;
-      border-bottom: 1px solid var(--color-border, #E5E7EB);
-      background: var(--input-background);
+      border-radius: var(--border-radius-sm, 0.2rem);
+      background: transparent;
       color: var(--item-text);
       cursor: pointer;
       font: inherit;
+      font-size: var(--font-size-sm, 0.875rem);
+      font-weight: var(--font-weight-normal, 400);
       line-height: normal;
       text-align: left;
+      text-decoration: none;
       box-sizing: border-box;
     }
 
-    .listbox-item:last-child {
-      border-bottom: none;
+    .listbox-item:hover {
+      background: var(--item-hover-background);
+      border-radius: var(--border-radius-sm, 0.2rem);
     }
 
-    .listbox-item:hover {
+    .listbox-item:focus {
       background: var(--item-hover-background);
       border-radius: var(--border-radius-sm, 0.2rem);
     }
@@ -70,10 +79,6 @@ export const listboxStyles = css`
       outline: none;
     }
 
-    .listbox-item-selected {
-      font-weight: var(--font-weight-bold, 600);
-    }
-
     .listbox-item-disabled {
       opacity: 0.55;
       cursor: not-allowed;