Improved piano styling

elements/fun/piano.go

@@ -128,8 +128,10 @@ func (element *Piano) SetConfig (new config.Config) {
 }
 
 func (element *Piano) updateMinimumSize () {
+	inset := element.theme.Inset(theme.PatternSunken)
 	element.core.SetMinimumSize (
-		pianoKeyWidth * 7 * element.countOctaves(), 64)
+		pianoKeyWidth * 7 * element.countOctaves() + inset[1] + inset[3],
+		64 + inset[0] + inset[2])
 }
 
 func (element *Piano) countOctaves () int {
@@ -155,7 +157,9 @@ func (element *Piano) recalculate () {
 	element.flatKeys  = make([]pianoKey, element.countFlats())
 	element.sharpKeys = make([]pianoKey, element.countSharps())
 
-	bounds := element.Bounds()
+	inset  := element.theme.Inset(theme.PatternSunken)
+	bounds := inset.Apply(element.Bounds())
+
 	dot := bounds.Min
 	note := element.low.Note(0)
 	limit := element.high.Note(12)
@@ -181,6 +185,11 @@ func (element *Piano) recalculate () {
 }
 
 func (element *Piano) draw () {
+	state := theme.PatternState { }
+	pattern := element.theme.Pattern(theme.PatternSunken, state)
+	// inset   := element.theme.Inset(theme.PatternSunken)
+	artist.FillRectangle(element, pattern, element.Bounds())
+
 	for _, key := range element.flatKeys {
 		element.drawFlat (
 			key.Rectangle,
@@ -199,7 +208,8 @@ func (element *Piano) drawFlat (bounds image.Rectangle, pressed bool) {
 	state := theme.PatternState {
 		Pressed: pressed,
 	}
-	pattern := element.theme.Pattern(theme.PatternButton, state)
+	pattern := element.theme.Theme.Pattern (
+		theme.PatternButton, theme.C("fun", "flatKey"), state)
 	artist.FillRectangle(element, pattern, bounds)
 }
 
@@ -207,6 +217,7 @@ func (element *Piano) drawSharp (bounds image.Rectangle, pressed bool) {
 	state := theme.PatternState {
 		Pressed: pressed,
 	}
-	pattern := element.theme.Pattern(theme.PatternButton, state)
+	pattern := element.theme.Theme.Pattern (
+		theme.PatternButton, theme.C("fun", "sharpKey"), state)
 	artist.FillRectangle(element, pattern, bounds)
 }

examples/piano/main.go

@@ -45,7 +45,7 @@ func run () {
 	controlBar.Adopt(waveformButton, false)
 	container.Adopt(controlBar, false)
 	
-	piano := fun.NewPiano(3, 5)
+	piano := fun.NewPiano(2, 5)
 	container.Adopt(piano, true)
 	piano.OnPress(playNote)
 	piano.OnRelease(stopNote)

theme/default.go

@@ -95,6 +95,13 @@ func (Default) Pattern (
 	case PatternButton:
 		if state.Disabled {
 			return disabledButtonPattern
+		} else {
+			if c == C("fun", "sharpKey") {
+				if state.Pressed {
+					return pressedDarkButtonPattern
+				} else {
+					return darkButtonPattern
+				}	
 			} else {
 				if state.Pressed || state.On && c == C("basic", "checkbox") {
 					if state.Focused {
@@ -110,6 +117,7 @@ func (Default) Pattern (
 					}
 				}
 			}
+		}
 	case PatternInput:
 		if state.Disabled {
 			return disabledInputPattern
@@ -156,19 +164,24 @@ func (Default) Inset (pattern Pattern, c Case) Inset {
 		if c == C("basic", "listEntry") {
 			return Inset { 4, 6, 4, 6 }
 		} else {
-			return Inset { 1, 1, 1, 1 }
+			return Inset { 2, 2, 2, 2 }
 		}
+		
 	case PatternSunken:
 		if c == C("basic", "list") {
 			return Inset { 2, 1, 2, 1 }
 		} else if c == C("basic", "progressBar") {
 			return Inset { 2, 1, 1, 2 }
 		} else {
-			return Inset { 1, 1, 1, 1 }
+			return Inset { 2, 2, 2, 2 }
 		}
 
-	case PatternInput, PatternButton, PatternHandle, PatternPinboard:
+	case PatternPinboard:
-		return Inset { 1, 1, 1, 1}
+		return Inset { 2, 2, 2, 2 }
+	
+	case PatternInput, PatternButton, PatternHandle:
+		return Inset { 2, 2, 2, 2}
+
 	default: return Inset { }
 	}
 }

theme/defaultpatterns.go

@@ -93,7 +93,6 @@ var selectedButtonPattern = artist.NewMultiBordered (
 	},
 	artist.Stroke { Weight: 1, Pattern: accentPattern },
 	artist.Stroke { Pattern: artist.NewUniform(hex(0x8D9894FF)) })
-
 var pressedButtonPattern = artist.NewMultiBordered (
 	artist.Stroke { Weight: 1, Pattern: strokePattern },
 	artist.Stroke {
@@ -118,6 +117,27 @@ var disabledButtonPattern = artist.NewMultiBordered (
 	artist.Stroke { Weight: 1, Pattern: weakForegroundPattern },
 	artist.Stroke { Pattern: backgroundPattern })
 
+var darkButtonPattern = artist.NewMultiBordered (
+	artist.Stroke { Weight: 1, Pattern: strokePattern },
+	artist.Stroke {
+		Weight: 1,
+		Pattern: artist.Beveled {
+			artist.NewUniform(hex(0xaebdb9FF)),
+			artist.NewUniform(hex(0x3b4947FF)),
+		},
+	},
+	artist.Stroke { Pattern: artist.NewUniform(hex(0x6b7a75FF)) })
+var pressedDarkButtonPattern = artist.NewMultiBordered (
+	artist.Stroke { Weight: 1, Pattern: strokePattern },
+	artist.Stroke {
+		Weight: 1,
+		Pattern: artist.Beveled {
+			artist.NewUniform(hex(0x3b4947FF)),
+			artist.NewUniform(hex(0x6b7a75FF)),
+		},
+	},
+	artist.Stroke { Pattern: artist.NewUniform(hex(0x6b7a75FF)) })
+
 var inputPattern = artist.NewMultiBordered (
 	artist.Stroke { Weight: 1, Pattern: strokePattern },
 	artist.Stroke {