Improve custom toolbar design

Sources/ColibriComponents/Model/Data/ToolbarAction.swift

@@ -57,7 +57,6 @@ public struct ToolbarAction: Identifiable {
                 icon
             }
             .customToolbarItem(padding: padding)
-            .foregroundColor(isOn ? .accentColor : .primary)
         }
         .buttonStyle(CustomToolbarButton())
         .help(title)

Sources/ColibriComponents/Model/Data/ToolbarGroup.swift

@@ -31,18 +31,9 @@ public struct ToolbarGroup: Identifiable, View {
             }
         }
         .background(
-            .thickMaterial.opacity(hover ? 1 : .toolbarGroupBackground),
+            .secondary.opacity((hover || actions.allSatisfy { $0.isOn }) ? .toolbarGroupSecondaryBackground : 0),
             in: rectangle
         )
-        .background(.secondary.opacity(hover ? .toolbarGroupSecondaryBackground : 0), in: rectangle)
-        .animation(
-            .default.speed(.hoverAnimationSpeed).delay(hover ? .toolbarGroupAnimationDelay : 0),
-            value: hover
-        )
-        .overlay {
-            rectangle
-                .stroke(.secondary.opacity(.toolbarStrokeOpacity))
-        }
         .onHover { hover = $0 }
         if addSpacer {
             Spacer()

Sources/ColibriComponents/Model/Extensions/Array.swift

@@ -75,6 +75,7 @@ extension Array: View where Element == ToolbarGroup {
         }
         .padding(.customToolbarPadding)
         .frame(height: .customToolbarHeight)
+        .offset(y: .customToolbarOffsetCorrection)
     }
 
 }
@@ -105,7 +106,11 @@ struct Array_Previews: PreviewProvider, View {
         }
         ToolbarGroup {
             ToolbarAction(.init(), systemSymbol: .circle) {
-                testCount = 0
+                if testCount == 0 {
+                    testCount = 1
+                } else {
+                    testCount = 0
+                }
             }
             .isOn(testCount == 0)
         }

Sources/ColibriComponents/Model/Extensions/CGFloat.swift

@@ -13,11 +13,11 @@ extension CGFloat {
     /// The side length of a custom toolbar item.
     internal static var customToolbarSideLength: Self { 20 }
     /// The padding of a custom toolbar.
-    internal static var customToolbarPadding: Self { 10 }
+    internal static var customToolbarPadding: Self { 5 }
     /// The corner radius in many user interface elements.
     public static var colibriCornerRadius: Self { 10 }
     /// The height of a custom toolbar.
-    internal static var customToolbarHeight: Self { 40 }
+    internal static var customToolbarHeight: Self { 20 }
     /// The scale of the button of a custom toolbar action that is not pressed.
     internal static var customToolbarButtonNotPressedScale: Self { 0.6 }
     /// The minimum width of an item in a ``SelectionItemPicker``.
@@ -38,6 +38,8 @@ extension CGFloat {
     internal static var freeformBackgroundSidelength: Self { 22 }
     /// The sidelength of the image in the foreground of a Freeform toolbar.
     internal static var freeformForegroundSidelength: Self { 13 }
+    /// An offset for the custom toolbar.
+    internal static var customToolbarOffsetCorrection: Self { 2 }
 
 }
 

Sources/ColibriComponents/Model/Extensions/Double.swift

@@ -13,13 +13,11 @@ extension Double {
     /// The opacity of the background of a custom toolbar group that is not hovered.
     internal static var toolbarGroupBackground: Self { 0.5 }
     /// The opacity of the secondary background of a custom toolbar group that is hovered.
-    internal static var toolbarGroupSecondaryBackground: Self { 0.2 }
+    internal static var toolbarGroupSecondaryBackground: Self { 0.05 }
     /// The speed of hover animations.
     public static var hoverAnimationSpeed: Self { 2 }
     /// The delay of the hover animation in a custom toolbar group when the hovering starts.
     internal static var toolbarGroupAnimationDelay: Self { 0.2 }
-    /// The opacity of the stroke in custom toolbars.
-    internal static var toolbarStrokeOpacity: Self { 0.2 }
     /// The opacity of the background of a selection item if selected.
     internal static var selectionSymbolBackgroundOpacity: Self { 0.1 }
     /// The opacity of the background of a selection item if hovered.