From 5dbdf1edde3530f51950ba7f7d0bbe126bd73d5c Mon Sep 17 00:00:00 2001
From: Nicholas Ward <nicholaspward@outlook.com>
Date: Tue, 18 Aug 2026 13:45:16 -0500
Subject: [PATCH] style(home): polish pill and filter hover effects across
 workspaces, filter menu, rule chips, and options

---
 src/styles/components/entity-directory.css | 79 ++++++++++++++++++----
 1 file changed, 67 insertions(+), 12 deletions(-)

diff --git a/src/styles/components/entity-directory.css b/src/styles/components/entity-directory.css
index d8a5e3e..8167bc2 100644
--- a/src/styles/components/entity-directory.css
+++ b/src/styles/components/entity-directory.css
@@ -228,17 +228,26 @@ input[type="search"]::-webkit-search-results-decoration,
   box-shadow: none;
   font-size: 16px;
   font-weight: 400;
-  transition: background-color .15s cubic-bezier(0.4,0,0.2,1), border-color .15s cubic-bezier(0.4,0,0.2,1);
+  transition: background-color .15s cubic-bezier(0.4,0,0.2,1), border-color .15s cubic-bezier(0.4,0,0.2,1), color .15s ease, box-shadow .15s ease;
 }
 
 .application-body .workspace-pills > a:hover {
-  background: #fff;
-  border-color: #ececec;
+  background: #f1f4fe;
+  border-color: #dbe4ff;
+  color: #050841;
+  box-shadow: 0 1px 3px rgba(61, 93, 246, 0.08);
 }
 
 .application-body .workspace-pills > a.active {
   background: #DBE4FF;
   border-color: #DBE4FF;
+  color: #111a49;
+}
+
+.application-body .workspace-pills > a.active:hover {
+  background: #cbd8ff;
+  border-color: #cbd8ff;
+  color: #050841;
 }
 
 .application-body .workspace-pills > a small {
@@ -246,6 +255,11 @@ input[type="search"]::-webkit-search-results-decoration,
   color: #a5a9c1;
   font-size: 13px;
   font-weight: 500;
+  transition: color .15s ease;
+}
+
+.application-body .workspace-pills > a:hover small {
+  color: #8b93a7;
 }
 
 .application-body .workspace-pills > a .workspace-pill-icon {
@@ -321,18 +335,26 @@ input[type="search"]::-webkit-search-results-decoration,
   font-weight: 300;
   cursor: pointer;
   list-style: none;
-  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease;
+  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease, border-color 0.15s ease;
 }
 
 .application-body .workspace-filter-btn:hover {
-  background: rgba(5, 8, 65, 0.04);
+  background: #f1f4fe;
+  border-color: #dbe4ff;
+  color: #3d5df6;
 }
 
 .application-body .workspace-filter-btn.active {
   background: #edf2ff;
   color: #3d5df6;
   border-color: #dbe4ff;
-  font-weight: 400;
+  font-weight: 500;
+}
+
+.application-body .workspace-filter-btn.active:hover {
+  background: #dbe4ff;
+  border-color: #c4d4ff;
+  color: #2b4cd6;
 }
 
 .application-body .workspace-filter-menu-popover {
@@ -381,11 +403,16 @@ input[type="search"]::-webkit-search-results-decoration,
   font-size: 14px;
   font-weight: 400;
   cursor: pointer;
-  transition: background-color 0.12s ease;
+  transition: background-color 0.12s ease, color 0.12s ease;
 }
 
 .application-body .filter-menu-item:hover {
-  background: #f8faff;
+  background: #f1f4fe;
+  color: #3d5df6;
+}
+
+.application-body .filter-menu-item:hover .filter-item-plus {
+  color: #3d5df6;
 }
 
 .application-body .filter-menu-item.active {
@@ -418,6 +445,7 @@ input[type="search"]::-webkit-search-results-decoration,
   width: 18px;
   height: 18px;
   color: #a5a9c1;
+  transition: color 0.12s ease;
 }
 
 .application-body .filter-item-plus svg {
@@ -440,6 +468,12 @@ input[type="search"]::-webkit-search-results-decoration,
   font-weight: 500;
   cursor: pointer;
   padding: 4px 0;
+  transition: color 0.15s ease;
+}
+
+.application-body .filter-clear-all-btn:hover:not(:disabled) {
+  color: #1e3bb8;
+  text-decoration: underline;
 }
 
 .application-body .filter-clear-all-btn:disabled {
@@ -483,8 +517,14 @@ input[type="search"]::-webkit-search-results-decoration,
   transition: all 0.15s ease;
 }
 
+.application-body .filter-rule-chip:hover {
+  border-color: #2b4cd6;
+  box-shadow: 0 2px 6px rgba(61, 93, 246, 0.12);
+}
+
 .application-body .filter-rule-chip.open {
   background: #edf2ff;
+  border-color: #3d5df6;
   box-shadow: 0 0 0 2px rgba(61, 93, 246, 0.18);
 }
 
@@ -501,6 +541,15 @@ input[type="search"]::-webkit-search-results-decoration,
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
+  transition: background-color 0.12s ease;
+}
+
+.application-body .filter-rule-chip-main:hover {
+  background: #f4f7fe;
+}
+
+.application-body .filter-rule-chip.open .filter-rule-chip-main:hover {
+  background: #e2ebff;
 }
 
 .application-body .filter-chip-icon {
@@ -545,11 +594,16 @@ input[type="search"]::-webkit-search-results-decoration,
   background: transparent;
   color: #3d5df6;
   cursor: pointer;
-  transition: background-color 0.12s ease;
+  transition: background-color 0.12s ease, color 0.12s ease;
 }
 
 .application-body .filter-rule-chip-close:hover {
-  background: rgba(61, 93, 246, 0.08);
+  background: #edf2ff;
+  color: #1e3bb8;
+}
+
+.application-body .filter-rule-chip.open .filter-rule-chip-close:hover {
+  background: #dbe4ff;
 }
 
 .application-body .filter-rule-chip-close svg {
@@ -621,11 +675,12 @@ input[type="search"]::-webkit-search-results-decoration,
   font-size: 13px;
   font-weight: 400;
   cursor: pointer;
-  transition: background-color 0.12s ease;
+  transition: background-color 0.12s ease, color 0.12s ease;
 }
 
 .application-body .filter-chip-option-label:hover {
-  background: #f8faff;
+  background: #f1f4fe;
+  color: #3d5df6;
 }
 
 .application-body .filter-chip-option-label input[type="checkbox"] {