Merge pull request #1 from oliviergoulet5/fix/command-palette-light-mode-broken

fix: command palette shows dark background in light mode

Author: erdalkaraca

packages/extension-command-palette/src/docks-command-palette.ts

@@ -330,22 +330,16 @@ export class DocksCommandPalette extends DocksWidget {
       left: 0;
       right: 0;
       margin-top: 4px;
-      background: var(--wa-color-neutral-05);
-      border: 1px solid var(--wa-color-neutral-25);
+      background: var(--wa-color-surface-raised);
+      border: 1px solid var(--wa-color-surface-border);
       border-radius: 4px;
       max-height: 400px;
       overflow-y: auto;
       z-index: 1000;
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
+      box-shadow: 0 8px 24px var(--wa-color-shadow);
       display: none;
     }
 
-    :host-context(.wa-light) .commands-container {
-      background: var(--wa-color-neutral-95);
-      border: 1px solid var(--wa-color-neutral-75);
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-    }
-
     .commands-container.open {
       display: block;
     }
@@ -357,23 +351,15 @@ export class DocksCommandPalette extends DocksWidget {
       padding: 10px 16px;
       cursor: pointer;
       transition: background-color 0.15s;
-      border-bottom: 1px solid var(--wa-color-neutral-15);
-    }
-
-    :host-context(.wa-light) .command-item {
-      border-bottom: 1px solid var(--wa-color-neutral-85);
+      border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
     }
 
     .command-item:last-child {
       border-bottom: none;
     }
 
     .command-item:hover {
-      background: var(--wa-color-neutral-20);
-    }
-
-    :host-context(.wa-light) .command-item:hover {
-      background: var(--wa-color-neutral-80);
+      background: var(--wa-color-neutral-fill-normal);
     }
 
     .command-icon {
@@ -413,27 +399,18 @@ export class DocksCommandPalette extends DocksWidget {
       flex-shrink: 0;
       margin-left: auto;
       padding: 2px 8px;
-      background: var(--wa-color-neutral-15);
-      border: 1px solid var(--wa-color-neutral-25);
+      background: var(--wa-color-neutral-fill-quiet);
+      border: 1px solid var(--wa-color-neutral-border-quiet);
       border-radius: 3px;
       font-size: 11px;
       font-family: monospace;
       opacity: 0.7;
     }
 
-    :host-context(.wa-light) .command-keybinding {
-      background: var(--wa-color-neutral-85);
-      border: 1px solid var(--wa-color-neutral-75);
-    }
-
     .no-results {
       padding: 20px;
       text-align: center;
-      color: var(--wa-color-neutral-60);
-    }
-
-    :host-context(.wa-light) .no-results {
-      color: var(--wa-color-neutral-40);
+      color: var(--wa-color-neutral-text-subtle);
     }
 
     wa-dialog::part(panel) {