Improve command bar styles

sleepyfran · Jan 21, 2025 · b7c129d · b7c129d
1 parent 4e4b273
commit b7c129d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/packages/components/command-bar/src/command-bar.ts b/packages/components/command-bar/src/command-bar.ts
@@ -44,6 +44,7 @@ export class CommandBar extends LitElement {
 
     div.search-results {
       background-color: var(--background-color-muted);
+      box-shadow: var(--large-shadow);
     }
   `;
 
@@ -155,11 +156,10 @@ class CommandBarResult extends LitElement {
       text-decoration: none;
       color: inherit;
       padding: 0.5rem;
-      width: 100%;
     }
 
     a:hover {
-      background-color: var(--background-color);
+      background-color: var(--background-selected-color);
     }
 
     img {

diff --git a/packages/web/index.css b/packages/web/index.css
@@ -92,11 +92,12 @@ https://jakelazaroff.com/words/my-modern-css-reset
     /* Colors. */
     --font-family: "DepartureMono", monospace;
     --background-color: #f4f4f9;
+    --background-selected-color: #d1d1dc;
     --background-color-muted: #e9e9f3;
     --border-color: #e9e9f3;
     --border-prominent-color: #007bff;
     --disabled-background-color: #cccccc;
-    --primary-text-color: #333333;
+    --primary-text-color: #280505;
     --secondary-text-color: #555555;
     --accent-color: #ff6f61;
     --error-color: #dc3545;
@@ -122,6 +123,7 @@ https://jakelazaroff.com/words/my-modern-css-reset
   @media (prefers-color-scheme: dark) {
     :root {
       --background-color: #2e2e2e;
+      --background-selected-color: #434343;
       --background-color-muted: #3c3c3c;
       --border-color: #3c3c3c;
       --warning-color: #91731b;