Improve toolbar button styling

- Use consistent button size
- Add hover effect for toggle buttons

sampler/src/main/java/atlantafx/sampler/page/components/ToolBarPage.java

@@ -340,9 +340,9 @@ public class ToolBarPage extends OutlinePage {
             result.add(new Button("Undo"));
             result.add(new Button("Redo"));
             result.add(new Separator());
-            result.add(toggleIconButton(Feather.BOLD, true, Styles.LEFT_PILL));
-            result.add(toggleIconButton(Feather.ITALIC, Styles.CENTER_PILL));
-            result.add(toggleIconButton(Feather.UNDERLINE, Styles.RIGHT_PILL));
+            result.add(toggleIconButton(Feather.BOLD, true));
+            result.add(toggleIconButton(Feather.ITALIC));
+            result.add(toggleIconButton(Feather.UNDERLINE));
         }
 
         if (orientation == Orientation.VERTICAL) {

styles/src/components/_button.scss

@@ -157,7 +157,7 @@ $color-shadow: -color-shadow-default !default;
   }
 
   // Button calculates its height based on the internal text font size.
-  // So, button that has no text (or icon) will appear lower than regulat
+  // So, button that has no text (or icon) will appear lower than regular
   // buttons. There're no workarounds, but you can set escape char like
   // \s or \f as button text.
   &.button-icon {

styles/src/components/_toolbar.scss

@@ -4,9 +4,11 @@
 @use "../settings/icons";
 @use "../settings/utils";
 
-$color-bg:          -color-bg-subtle    !default;
-$color-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !default;
-$color-separator:   -color-border-muted !default;
+$color-bg:           -color-bg-subtle    !default;
+$color-bg-hover:     if(cfg.$darkMode, -color-base-6, -color-base-2) !default;
+$color-border-hover: -color-accent-muted !default;
+$color-bg-selected:  $color-bg-hover     !default;
+$color-separator:    -color-border-muted !default;
 
 $padding-x:    0.3em !default;
 $padding-y:    4px   !default;
@@ -26,21 +28,38 @@ $border-width: cfg.$border-width !default;
     >.menu-button,
     >.split-menu-button {
       -color-button-bg: $color-bg;
+      -color-button-bg-hover: $color-bg-hover;
+      -color-button-border-hover: $color-border-hover;
+      -color-button-border-focused: $color-border-hover;
       -fx-background-insets: 0;
       -fx-effect: none;
+
+      &:hover {
+        -fx-background-insets: 0, cfg.$border-width;
+      }
+
+      &.button-icon {
+        // all toolbar buttons should have the same size
+        -fx-padding: cfg.$padding-y cfg.$padding-x cfg.$padding-y cfg.$padding-x;
+      }
     }
 
     .toggle-button {
       -color-button-bg: $color-bg;
-      -color-button-bg-selected: $color-bg-selected;
-      -color-button-fg-selected: -color-fg-default;
+      -color-button-border-hover: $color-border-hover;
+      -color-button-bg-selected:  $color-bg-selected;
+      -color-button-fg-selected:  -color-fg-default;
       -fx-background-insets: 0;
       -fx-effect: none;
-    }
 
-    >.separator {
-      -fx-orientation:  vertical;
-      -color-separator: $color-separator;
+      &:hover {
+        -fx-background-insets: 0, cfg.$border-width;
+        -fx-background-color: -color-button-border-hover, $color-bg;
+      }
+
+      &:hover:selected {
+        -fx-background-color: -color-button-border-hover, $color-bg-selected;
+      }
     }
   }
 

styles/src/dracula.scss

@@ -261,6 +261,7 @@ $ui-yellowLight:     hsla(60, 100%, 75%, 5%);
 );
 
 @forward "components/toolbar" as toolbar-* with (
+  $color-bg-hover:    -color-base-5,
   $color-bg-selected: -color-base-4,
   $color-separator:   -color-accent-8
 );