Styling, coloring, sizing issues.

[justnat3]

There are some varying styling issues present, (almost purely in light mode).

• Contrast between button backgrounds and labels
• Some dialogs/context menus contain contrast issues
• Response text from api calls contain no mode dependent styling.

there are some other padding issues throughout, but these are likely the most aggressive.

I believe @Isaac799 may already be working some of these.

Cheers,
-Nate

[Isaac799]

I am :-)

No commits to share - yet. Because I am sill familiarizing myself with the repo and how gioui works.

My approach is to build up and centralize the theming capabilities to make it less painful to manage, and eventually enable user customization.

Here is a sneak peek of what I was thinking:

type ThemeKind int

const (
	ThemeKindPrimary ThemeKind = iota
	ThemeKindAccent
	ThemeKindError
	ThemeKindWarn
	ThemeKindSuccess
	ThemeKindInfo
)

// FgBg provides the foreground and background color given a kind
func (t *Theme) FgBg(kind ThemeKind) (color.NRGBA, color.NRGBA) {
	switch kind {
	case ThemeKindPrimary:
		return t.PrimaryFGColor, t.PrimaryBGColor
	case ThemeKindAccent:
		return t.AccentFGColor, t.AccentBGColor
	case ThemeKindError:
		return t.ErrorFGColor, t.ErrorBGColor
	case ThemeKindWarn:
		return t.WarnFGColor, t.WarnBGColor
	case ThemeKindSuccess:
		return t.SuccessFGColor, t.SuccessBGColor
	case ThemeKindInfo:
		return t.InfoFGColor, t.InfoBGColor
	}
	return t.Theme.Fg, t.Theme.Bg
}

For example, the widget.Button is used everywhere. Now it could use ThemeKind

func Button(theme *chapartheme.Theme, ..., kind chapartheme.ThemeKind) ButtonStyle {
	colorFg, colorBg := theme.FgBg(kind)

	b := ButtonStyle{
		Text:         txt,
		Icon:         icon,
                ...
		Background: colorBg,
		Color:      colorFg,
	}

	return b
}

So instead of defining colors after every single widget, we provide ThemeKind to do this automatically (and consistently). Resulting in several diffs like this.

  layout.Rigid(func(gtx layout.Context) layout.Dimensions {
-         newBtn := widgets.Button(theme.Material(), &v.addButton, widgets.PlusIcon, widgets.IconPositionStart, "Add Proto file")
-         newBtn.Color = theme.ButtonTextColor
-         newBtn.Background = theme.ActionButtonBgColor
+         newBtn := widgets.Button(
+                 theme, &v.addButton, widgets.PlusIcon, widgets.IconPositionStart, "Add Proto file",
+                 chapartheme.ThemeKindSuccess,
+         )
          return newBtn.Layout(gtx, theme)
  }),

[mirzakhany]

Hi 👋 yes your are absolutely right I was kinda lazy when did the styling on light mode. My idea was to at some point make it possible to load themes from file so users can customise their own themes.

@Isaac799 thank you so much for working on this. Please let me know if there is something I can do to help 🙏