From 4dda6bee0bf6091d348f2977023734f1d4ea269b Mon Sep 17 00:00:00 2001
From: mkpaz <quizynox@gmail.com>
Date: Wed, 17 May 2023 11:09:53 +0400
Subject: [PATCH] Improve toolbar button styling

- Use consistent button size
- Add hover effect for toggle buttons
---
 .../sampler/page/components/ToolBarPage.java  |  6 +--
 styles/src/components/_button.scss            |  2 +-
 styles/src/components/_toolbar.scss           | 37 ++++++++++++++-----
 styles/src/dracula.scss                       |  1 +
 4 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/ToolBarPage.java b/sampler/src/main/java/atlantafx/sampler/page/components/ToolBarPage.java
index aa56f3d..26d1d6a 100644
--- a/sampler/src/main/java/atlantafx/sampler/page/components/ToolBarPage.java
+++ b/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) {
diff --git a/styles/src/components/_button.scss b/styles/src/components/_button.scss
index c2464d8..5b79419 100755
--- a/styles/src/components/_button.scss
+++ b/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 {
diff --git a/styles/src/components/_toolbar.scss b/styles/src/components/_toolbar.scss
index d86c834..5a13899 100755
--- a/styles/src/components/_toolbar.scss
+++ b/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;
+      }
     }
   }
 
diff --git a/styles/src/dracula.scss b/styles/src/dracula.scss
index c427bf4..2a9cba4 100755
--- a/styles/src/dracula.scss
+++ b/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
 );