fix: (aura) adjust visual icon sizes (#10525)

Author: jouni

packages/aura/aura.css

@@ -37,7 +37,9 @@
 :where(:root),
 :where(:host) {
   cursor: default;
-  /* TODO: slightly smaller chevron than the one in base styles - consider if we should do this in base styles */
-  --_vaadin-icon-chevron-down: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
   --vaadin-aura-theme: 1;
 }
+
+vaadin-icon[icon^='vaadin:'] {
+  --vaadin-icon-visual-size: 80%;
+}

packages/aura/src/components/input-container.css

@@ -29,6 +29,11 @@ vaadin-message-input:not([readonly], [disabled]) {
 
 ::part(field-button) {
   transition: color 100ms;
+  --vaadin-icon-visual-size: 90%;
+}
+
+::part(clear-button) {
+  --vaadin-icon-visual-size: 75%;
 }
 
 :not([readonly], [disabled])::part(field-button):active {

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

@@ -4,6 +4,7 @@
   --vaadin-side-nav-label-font-weight: var(--aura-font-weight-medium);
   --vaadin-side-nav-item-font-weight: var(--aura-font-weight-medium);
   --vaadin-side-nav-item-border-width: 1px;
+  --vaadin-side-nav-item-gap: var(--vaadin-gap-xs);
   --vaadin-side-nav-items-gap: var(--vaadin-gap-xs);
 }
 
@@ -42,6 +43,11 @@ vaadin-side-nav-item[current]::part(content) {
   --vaadin-side-nav-item-border-color: var(--aura-accent-border-color);
 }
 
+vaadin-side-nav::part(toggle-button),
+vaadin-side-nav-item::part(toggle-button) {
+  --vaadin-icon-visual-size: 0.9lh;
+}
+
 /* Filled variant */
 
 vaadin-side-nav[theme~='filled'] vaadin-side-nav-item[current]::part(content) {