Merge pull request #1340 from cogentcore/text-size

Set button text size to button font size automatically; make line height automatically scale based on font size

core/button.go

@@ -130,6 +130,7 @@ func (bt *Button) Init() {
 				s.Padding.Right.Dp(16)
 			}
 		}
+		s.Font.Size.Dp(14) // Button font size is used for text font size
 		s.Gap.Zero()
 		s.CenterAll()
 
@@ -226,6 +227,7 @@ func (bt *Button) Init() {
 					s.SetNonSelectable()
 					s.SetTextWrap(false)
 					s.FillMargin = false
+					s.Font.Size = bt.Styles.Font.Size // Directly inherit to override the [Text.Type]-based default
 				})
 				w.Updater(func() {
 					if bt.Type == ButtonMenu {

core/button_test.go

@@ -104,3 +104,12 @@ func TestButtonTypes(t *testing.T) {
 		b.AssertRender(t, "button/type-"+strings.ToLower(typ.String()))
 	}
 }
+
+func TestButtonFontSize(t *testing.T) {
+	b := NewBody()
+	bt := NewButton(b).SetText("Hello")
+	bt.Styler(func(s *styles.Style) {
+		s.Font.Size.Dp(48)
+	})
+	b.AssertRender(t, "button/font-size")
+}

core/meter.go

@@ -88,14 +88,14 @@ func (m *Meter) Init() {
 			s.Min.Set(units.Dp(128))
 			m.Width.Dp(8)
 			s.Font.Size.Dp(32)
-			s.Text.LineHeight.Dp(40)
+			s.Text.LineHeight.Em(40.0 / 32)
 			s.Text.Align = styles.Center
 			s.Text.AlignV = styles.Center
 		case MeterSemicircle:
 			s.Min.Set(units.Dp(112), units.Dp(64))
 			m.Width.Dp(16)
 			s.Font.Size.Dp(22)
-			s.Text.LineHeight.Dp(28)
+			s.Text.LineHeight.Em(28.0 / 22)
 			s.Text.Align = styles.Center
 			s.Text.AlignV = styles.Center
 		}

core/style.go

@@ -106,7 +106,7 @@ func (wb *WidgetBase) runStylers() {
 	})
 }
 
-// resetStyleSettings reverses the effects of [ApplyStyleSettings]
+// resetStyleSettings reverses the effects of [WidgetBase.styleSettings]
 // for the widget's font size so that it does not create cascading
 // inhereted font size values. It only does this for non-root elements,
 // as the root element must receive the larger font size so that
@@ -118,11 +118,10 @@ func (wb *WidgetBase) resetStyleSettings() {
 	}
 	fsz := AppearanceSettings.FontSize / 100
 	wb.Styles.Font.Size.Value /= fsz
-	wb.Styles.Text.LineHeight.Value /= fsz
 }
 
 // styleSettings applies [AppearanceSettingsData.Spacing]
-// and [AppearanceSettings.FontSize] to the style values for the widget.
+// and [AppearanceSettingsData.FontSize] to the style values for the widget.
 func (wb *WidgetBase) styleSettings() {
 	s := &wb.Styles
 
@@ -140,7 +139,6 @@ func (wb *WidgetBase) styleSettings() {
 
 	fsz := AppearanceSettings.FontSize / 100
 	s.Font.Size.Value *= fsz
-	s.Text.LineHeight.Value *= fsz
 }
 
 // StyleTree calls [WidgetBase.Style] on every widget in tree

core/text.go

@@ -119,82 +119,83 @@ func (tx *Text) Init() {
 		s.GrowWrap = true
 
 		// Text styles based on https://m3.material.io/styles/typography/type-scale-tokens
+		// We use Em for line height so that it scales properly with font size changes.
 		switch tx.Type {
 		case TextLabelLarge:
-			s.Text.LineHeight.Dp(20)
+			s.Text.LineHeight.Em(20.0 / 14)
 			s.Font.Size.Dp(14)
 			s.Text.LetterSpacing.Dp(0.1)
-			s.Font.Weight = styles.WeightMedium // note: excludes all fonts except Go!
+			s.Font.Weight = styles.WeightMedium
 		case TextLabelMedium:
-			s.Text.LineHeight.Dp(16)
+			s.Text.LineHeight.Em(16.0 / 12)
 			s.Font.Size.Dp(12)
 			s.Text.LetterSpacing.Dp(0.5)
 			s.Font.Weight = styles.WeightMedium
 		case TextLabelSmall:
-			s.Text.LineHeight.Dp(16)
+			s.Text.LineHeight.Em(16.0 / 11)
 			s.Font.Size.Dp(11)
 			s.Text.LetterSpacing.Dp(0.5)
 			s.Font.Weight = styles.WeightMedium
 		case TextBodyLarge:
-			s.Text.LineHeight.Dp(24)
+			s.Text.LineHeight.Em(24.0 / 16)
 			s.Font.Size.Dp(16)
 			s.Text.LetterSpacing.Dp(0.5)
 			s.Font.Weight = styles.WeightNormal
 		case TextSupporting:
 			s.Color = colors.Scheme.OnSurfaceVariant
 			fallthrough
 		case TextBodyMedium:
-			s.Text.LineHeight.Dp(20)
+			s.Text.LineHeight.Em(20.0 / 14)
 			s.Font.Size.Dp(14)
 			s.Text.LetterSpacing.Dp(0.25)
 			s.Font.Weight = styles.WeightNormal
 		case TextBodySmall:
-			s.Text.LineHeight.Dp(16)
+			s.Text.LineHeight.Em(16.0 / 12)
 			s.Font.Size.Dp(12)
 			s.Text.LetterSpacing.Dp(0.4)
 			s.Font.Weight = styles.WeightNormal
 		case TextTitleLarge:
-			s.Text.LineHeight.Dp(28)
+			s.Text.LineHeight.Em(28.0 / 22)
 			s.Font.Size.Dp(22)
 			s.Text.LetterSpacing.Zero()
 			s.Font.Weight = styles.WeightNormal
 		case TextTitleMedium:
-			s.Text.LineHeight.Dp(24)
+			s.Text.LineHeight.Em(24.0 / 16)
 			s.Font.Size.Dp(16)
 			s.Text.LetterSpacing.Dp(0.15)
 			s.Font.Weight = styles.WeightMedium
 		case TextTitleSmall:
-			s.Text.LineHeight.Dp(20)
+			s.Text.LineHeight.Em(20.0 / 14)
 			s.Font.Size.Dp(14)
 			s.Text.LetterSpacing.Dp(0.1)
 			s.Font.Weight = styles.WeightMedium
 		case TextHeadlineLarge:
-			s.Text.LineHeight.Dp(40)
+			s.Text.LineHeight.Em(40.0 / 32)
 			s.Font.Size.Dp(32)
 			s.Text.LetterSpacing.Zero()
 			s.Font.Weight = styles.WeightNormal
 		case TextHeadlineMedium:
-			s.Text.LineHeight.Dp(36)
+			s.Text.LineHeight.Em(36.0 / 28)
 			s.Font.Size.Dp(28)
 			s.Text.LetterSpacing.Zero()
 			s.Font.Weight = styles.WeightNormal
 		case TextHeadlineSmall:
-			s.Text.LineHeight.Dp(32)
+			s.Text.LineHeight.Em(32.0 / 24)
 			s.Font.Size.Dp(24)
 			s.Text.LetterSpacing.Zero()
 			s.Font.Weight = styles.WeightNormal
 		case TextDisplayLarge:
-			s.Text.LineHeight.Dp(64)
+			s.Text.LineHeight.Em(64.0 / 57)
 			s.Font.Size.Dp(57)
 			s.Text.LetterSpacing.Dp(-0.25)
 			s.Font.Weight = styles.WeightNormal
 		case TextDisplayMedium:
-			s.Text.LineHeight.Dp(52)
+			s.Text.LineHeight.Em(52.0 / 45)
 			s.Font.Size.Dp(45)
 			s.Text.LetterSpacing.Zero()
 			s.Font.Weight = styles.WeightNormal
 		case TextDisplaySmall:
-			s.Text.LineHeight.Dp(44)
+			s.Text.LineHeight.Em(44.0 / 36)
 			s.Font.Size.Dp(36)
 			s.Text.LetterSpacing.Zero()
 			s.Font.Weight = styles.WeightNormal

styles/text.go

@@ -39,8 +39,10 @@ type Text struct { //types:add
 	// extra space to add between words (inherited)
 	WordSpacing units.Value
 
-	// specified height of a line of text (inherited); text is centered within the overall lineheight;
-	// the standard way to specify line height is in terms of em
+	// LineHeight is the height of a line of text (inherited).
+	// Text is centered within the overall line height.
+	// The standard way to specify line height is in terms of
+	// [units.Em] so that it scales with the font size.
 	LineHeight units.Value
 
 	// WhiteSpace (not inherited) specifies how white space is processed,