refactor: side-nav-item surface color, icon color, and text transition (#10668) (#10670)

Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>

Author: vaadin-bot

packages/aura/src/components/side-nav.css

@@ -13,11 +13,17 @@ vaadin-side-nav + vaadin-side-nav {
 
 vaadin-side-nav::part(label) {
   gap: var(--vaadin-gap-xs);
+  transition: color 80ms;
+}
+
+vaadin-side-nav::part(label):hover {
+  color: var(--vaadin-text-color);
 }
 
 vaadin-side-nav-item::part(content) {
-  --aura-surface-level: 4;
-  --aura-surface-opacity: 0.6;
+  --aura-surface-level: 6;
+  --aura-surface-opacity: 0.3;
+  transition: color 80ms;
 }
 
 vaadin-side-nav-item:not([disabled], [current])::part(content):active {
@@ -26,7 +32,6 @@ vaadin-side-nav-item:not([disabled], [current])::part(content):active {
 
 @media (any-hover: hover) {
   vaadin-side-nav-item:not([disabled], [current])::part(content):hover {
-    transition: color 120ms;
     --vaadin-side-nav-item-text-color: var(--vaadin-text-color);
   }
 }
@@ -55,3 +60,7 @@ vaadin-side-nav[theme~='filled'] vaadin-side-nav-item[current]::part(content) {
   --vaadin-icon-color: var(--aura-accent-contrast-color);
   outline-offset: 2px;
 }
+
+vaadin-side-nav-item:not([current]) > vaadin-icon[slot='prefix'] {
+  opacity: 0.8;
+}