Add hover styling to some objects

theme.go

@@ -36,11 +36,13 @@ var outerShadow    = border(0xa4afc0FF, 0xa4afc0FF, 0xa4afc0ff, 0xa4afc0ff, 0, 1
 var buttonColor        = hex(0xe9eaeaFF)
 var buttonColorPressed = hex(0xe3e4e4FF)
 var buttonColorFocused = hex(0xe4e6e8FF)
+var buttonColorHovered = hex(0xf1f3f5FF)
 var dotColor           = hex(0xa4b1c6FF)
 var inputColor         = hex(0xe3e4e4FF)
 var textColor          = hex(0x000000FF)
 var backgroundColor    = hex(0xd6d6d6FF)
 var gutterColor        = hex(0xbfc6d1FF)
+var gutterColorHovered = hex(0xc5cbd6FF)
 
 type Theme struct { }
 
@@ -71,7 +73,8 @@ func (Theme) Apply (object tomo.Object, role theme.Role) event.Cookie {
 	
 	switch role.Object {
 	case "Button":
-		mouseDown := false
+		pressed := false
+		hovered := false
 
 		updateStyle := func () {
 			border := []tomo.Border {
@@ -87,10 +90,12 @@ func (Theme) Apply (object tomo.Object, role theme.Role) event.Cookie {
 				box.SetColor(buttonColorFocused)
 				border[1] = focusedBorder
 			}
-			if mouseDown {
+			if pressed {
 				box.SetColor(buttonColorPressed)
 				border[2] = sunkenShadow
 				box.SetPadding(tomo.I(5, 8, 4, 9))
+			} else if hovered {
+				box.SetColor(buttonColorHovered)
 			}
 			box.SetBorder(border...)
 		}
@@ -98,16 +103,24 @@ func (Theme) Apply (object tomo.Object, role theme.Role) event.Cookie {
 		return event.MultiCookie (
 			box.OnMouseDown(func (button input.Button) {
 				if button != input.ButtonLeft { return }
-				mouseDown = true
+				pressed = true
 				updateStyle()
 			}),
 			box.OnMouseUp(func (button input.Button) {
 				if button != input.ButtonLeft { return }
-				mouseDown = false
+				pressed = false
 				updateStyle()
 			}),
 			box.OnFocusEnter(updateStyle),
-			box.OnFocusLeave(updateStyle))
+			box.OnFocusLeave(updateStyle),
+			box.OnMouseEnter(func () {
+				hovered = true
+				updateStyle()
+			}),
+			box.OnMouseLeave(func () {
+				hovered = false
+				updateStyle()
+			}))
 		
 	case "TextInput", "NumberInput":
 		box.SetPadding(tomo.I(5, 4, 4, 5))
@@ -145,6 +158,9 @@ func (Theme) Apply (object tomo.Object, role theme.Role) event.Cookie {
 		box.SetMinimumSize(image.Pt(2, 2))
 	
 	case "Slider":
+		pressed := false
+		hovered := false
+		
 		updateStyle := func () {
 			border := []tomo.Border {
 				engravedBorder,
@@ -156,13 +172,32 @@ func (Theme) Apply (object tomo.Object, role theme.Role) event.Cookie {
 			if box.Focused() {
 				border[1] = focusedBorder
 			}
+			if hovered && !pressed {
+				box.SetColor(gutterColorHovered)
+			}
 			
 			box.SetBorder(border...)
 		}
 		updateStyle()
 		return event.MultiCookie (
 			box.OnFocusEnter(updateStyle),
-			box.OnFocusLeave(updateStyle))
+			box.OnFocusLeave(updateStyle),
+			box.OnMouseDown(func (button input.Button) {
+				pressed = true
+				updateStyle()
+			}),
+			box.OnMouseUp(func (button input.Button) {
+				pressed = false
+				updateStyle()
+			}),
+			box.OnMouseEnter(func () {
+				hovered = true
+				updateStyle()
+			}),
+			box.OnMouseLeave(func () {
+				hovered = false
+				updateStyle()
+			}))
 	
 	case "SliderHandle":
 		box.SetMinimumSize(image.Pt(12, 12))