widget/material: add focus and hover indicators to Clickable

Signed-off-by: Elias Naur <mail@eliasnaur.com>

internal/f32color/rgba.go

@@ -154,6 +154,10 @@ func Disabled(c color.NRGBA) (d color.NRGBA) {
 // Hovered blends dark colors towards white, and light colors towards
 // black. It is approximate because it operates in non-linear sRGB space.
 func Hovered(c color.NRGBA) (h color.NRGBA) {
+	if c.A == 0 {
+		// Provide a reasonable default for transparent widgets.
+		return color.NRGBA{A: 0x44, R: 0x88, G: 0x88, B: 0x88}
+	}
 	const ratio = 0x20
 	m := color.NRGBA{R: 0xff, G: 0xff, B: 0xff, A: c.A}
 	if approxLuminance(c) > 128 {

widget/material/button.go

@@ -94,6 +94,9 @@ func Clickable(gtx layout.Context, button *widget.Clickable, w layout.Widget) la
 		return layout.Stack{}.Layout(gtx,
 			layout.Expanded(func(gtx layout.Context) layout.Dimensions {
 				defer clip.Rect{Max: gtx.Constraints.Min}.Push(gtx.Ops).Pop()
+				if button.Hovered() || button.Focused() {
+					paint.Fill(gtx.Ops, f32color.Hovered(color.NRGBA{}))
+				}
 				for _, c := range button.History() {
 					drawInk(gtx, c)
 				}