chore: adjustments to themes and examples (charmbracelet#18)

* chore(theme): adjust Charm theme colors * chore(example): tidy up taco result printout * fix(theme): allow gaps between fields to be removed * chore(theme): adjust base16 theme * chore(examples): tidy up examples --------- Co-authored-by: Maas Lalani <[email protected]>
kralicky · Oct 25, 2023 · 06edb96 · 06edb96
1 parent 7c685f7
commit 06edb96
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 42 deletions.
diff --git a/examples/gh/create.go b/examples/gh/create.go
@@ -23,9 +23,11 @@ var highlight = lipgloss.NewStyle().Foreground(lipgloss.Color("#00D7D7"))
 
 func main() {
 	var action Action
+	var spinnerStyle = lipgloss.NewStyle().Foreground(lipgloss.Color("4"))
 
 	repo := "charmbracelet/huh"
 	theme := huh.NewBase16Theme()
+	theme.FieldSeparator = lipgloss.NewStyle().SetString("\n")
 
 	f := huh.NewForm(
 		huh.NewGroup(
@@ -48,7 +50,7 @@ func main() {
 
 	switch action {
 	case Push:
-		_ = spinner.New().Title("Pushing to charmbracelet/huh").Run()
+		_ = spinner.New().Title("Pushing to charmbracelet/huh").Style(spinnerStyle).Run()
 		fmt.Println("Pushed to charmbracelet/huh")
 	case Fork:
 		fmt.Println("Creating a fork of charmbracelet/huh...")
@@ -83,7 +85,7 @@ func main() {
 	}
 
 	if nextAction == "Submit" {
-		_ = spinner.New().Title("Submitting...").Run()
+		_ = spinner.New().Title("Submitting...").Style(spinnerStyle).Run()
 		fmt.Println("Pull request submitted!")
 	}
 }
diff --git a/examples/go.mod b/examples/go.mod
@@ -17,6 +17,7 @@ require (
 	github.com/charmbracelet/bubbletea v0.24.2 // indirect
 	github.com/charmbracelet/glamour v0.6.0 // indirect
 	github.com/charmbracelet/x/exp/ordered v0.0.0-20231010190216-1cb11efc897d // indirect
+	github.com/charmbracelet/x/exp/strings v0.0.0-20231025135604-4a717d4fb812 // indirect
 	github.com/containerd/console v1.0.4-0.20230313162750-1ae8d489ac81 // indirect
 	github.com/dlclark/regexp2 v1.4.0 // indirect
 	github.com/fatih/color v1.7.0 // indirect

diff --git a/examples/go.sum b/examples/go.sum
@@ -19,6 +19,8 @@ github.com/charmbracelet/lipgloss v0.9.1 h1:PNyd3jvaJbg4jRHKWXnCj1akQm4rh8dbEzN1
 github.com/charmbracelet/lipgloss v0.9.1/go.mod h1:1mPmG4cxScwUQALAAnacHaigiiHB9Pmr+v1VEawJl6I=
 github.com/charmbracelet/x/exp/ordered v0.0.0-20231010190216-1cb11efc897d h1:+o+e/8hf7cG0SbAzEAm/usJ8qoZPgFXhudLjop+TM0g=
 github.com/charmbracelet/x/exp/ordered v0.0.0-20231010190216-1cb11efc897d/go.mod h1:aoG4bThKYIOnyB55r202eHqo6TkN7ZXV+cu4Do3eoBQ=
+github.com/charmbracelet/x/exp/strings v0.0.0-20231025135604-4a717d4fb812 h1:uHDdPveYek/zYvMUvHiq3suL9hF1jd49OhWV463UgMw=
+github.com/charmbracelet/x/exp/strings v0.0.0-20231025135604-4a717d4fb812/go.mod h1:1xmlxN4FBKA40iKdOD5Q3WbHGOQFCmX1Pe/GSlRe4W0=
 github.com/containerd/console v1.0.4-0.20230313162750-1ae8d489ac81 h1:q2hJAaP1k2wIvVRd/hEHD7lacgqrCPS+k8g1MndzfWY=
 github.com/containerd/console v1.0.4-0.20230313162750-1ae8d489ac81/go.mod h1:YynlIjWYF8myEu6sdkwKIvGQq+cOckRm6So2avqoYAk=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=

diff --git a/examples/taco/main.go b/examples/taco/main.go
@@ -8,6 +8,8 @@ import (
 	"strings"
 
 	"github.com/charmbracelet/huh"
+	"github.com/charmbracelet/lipgloss"
+	xstrings "github.com/charmbracelet/x/exp/strings"
 )
 
 type Spice int
@@ -18,6 +20,19 @@ const (
 	Hot
 )
 
+func (s Spice) String() string {
+	switch s {
+	case Mild:
+		return "mild "
+	case Medium:
+		return "medium-spicy "
+	case Hot:
+		return "hot "
+	default:
+		return ""
+	}
+}
+
 type Order struct {
 	Taco         Taco
 	Name         string
@@ -50,7 +65,7 @@ func main() {
 		huh.NewGroup(
 			huh.NewSelect("Soft", "Hard").
 				Title("Shell?").
-				Description("Our shells are made fresh in-house, every day.").
+				Description("Our tortillas are made fresh in-house, every day.").
 				Validate(func(t string) error {
 					if t == "Hard" {
 						return fmt.Errorf("we're out of hard shells, sorry")
@@ -118,15 +133,38 @@ func main() {
 		log.Fatal(err)
 	}
 
-	fmt.Printf("A %s shell filled with %s and topped with %s.\n", order.Taco.Shell, order.Taco.Base, strings.Join(order.Taco.Toppings, ", "))
-
-	name := order.Name
-	if name != "" {
-		name = ", " + name
-	}
-	fmt.Printf("Thanks for your order%s!\n", name)
-
-	if order.Discount {
-		fmt.Println("Enjoy 15% off.")
+	// Print order summary.
+	{
+		var sb strings.Builder
+		keyword := func(s string) string {
+			return strings.ToLower(lipgloss.NewStyle().Foreground(lipgloss.Color("212")).Render(s))
+		}
+		fmt.Fprintf(&sb,
+			"%s\n\nOne %s%s shell taco filled with %s and topped with %s.",
+			lipgloss.NewStyle().Bold(true).Render("TACO RECEIPT"),
+			keyword(order.Taco.Spice.String()),
+			keyword(order.Taco.Shell),
+			keyword(order.Taco.Base),
+			keyword(xstrings.EnglishJoin(order.Taco.Toppings, true)),
+		)
+
+		name := order.Name
+		if name != "" {
+			name = ", " + name
+		}
+		fmt.Fprintf(&sb, "\n\nThanks for your order%s!", name)
+
+		if order.Discount {
+			fmt.Fprint(&sb, "\n\nEnjoy 15% off.")
+		}
+
+		fmt.Println(
+			lipgloss.NewStyle().
+				Width(40).
+				BorderStyle(lipgloss.RoundedBorder()).
+				BorderForeground(lipgloss.Color("63")).
+				Padding(1, 2).
+				Render(sb.String()),
+		)
 	}
 }
diff --git a/examples/theme/main.go b/examples/theme/main.go
@@ -49,7 +49,7 @@ func main() {
 				huh.NewText().Title("More Thoughts").Placeholder("What else is on your mind?"),
 				huh.NewSelect("A", "B", "C").Title("Colors"),
 				huh.NewMultiSelect("Red", "Green", "Yellow").Title("Letters"),
-				huh.NewConfirm().Title("Again?").Value(&repeat),
+				huh.NewConfirm().Title("Again?").Description("Try another theme").Value(&repeat),
 			),
 		).WithTheme(theme).Run()
 		if err != nil {

diff --git a/group.go b/group.go
@@ -197,7 +197,7 @@ func (g *Group) View() string {
 
 	gap := g.theme.FieldSeparator.String()
 	if gap == "" {
-		gap = "\n\n"
+		gap = "\n"
 	}
 
 	for i, field := range g.fields {
@@ -210,7 +210,6 @@ func (g *Group) View() string {
 	if g.showHelp {
 		s.WriteString(gap)
 		s.WriteString(g.theme.Focused.Help.Render(g.help.ShortHelpView(g.fields[g.current].KeyBinds())))
-		s.WriteString("\n")
 	}
 
 	for _, err := range g.Errors() {

diff --git a/theme.go b/theme.go
@@ -28,7 +28,7 @@ type FieldStyles struct {
 	Base           lipgloss.Style
 	Title          lipgloss.Style
 	Description    lipgloss.Style
-	Help           lipgloss.Style
+	Help           lipgloss.Style // TODO: apply help coloring in theme to help bubble
 	ErrorIndicator lipgloss.Style
 	ErrorMessage   lipgloss.Style
 
@@ -102,6 +102,7 @@ func (f FieldStyles) copy() FieldStyles {
 func NewBaseTheme() *Theme {
 	var t Theme
 
+	t.FieldSeparator = lipgloss.NewStyle().SetString("\n\n")
 	button := lipgloss.NewStyle().Padding(0, 2).MarginRight(1)
 
 	// Focused styles.
@@ -145,27 +146,36 @@ func NewBaseTheme() *Theme {
 func NewCharmTheme() *Theme {
 	t := NewBaseTheme().copy()
 
+	var (
+		normalFg = lipgloss.AdaptiveColor{Light: "235", Dark: "252"}
+		indigo   = lipgloss.AdaptiveColor{Light: "#5A56E0", Dark: "#7571F9"}
+		cream    = lipgloss.AdaptiveColor{Light: "#FFFDF5", Dark: "#FFFDF5"}
+		fuchsia  = lipgloss.Color("#F780E2")
+		green    = lipgloss.AdaptiveColor{Light: "#02BA84", Dark: "#02BF87"}
+		red      = lipgloss.AdaptiveColor{Light: "#FF4672", Dark: "#ED567A"}
+	)
+
 	f := &t.Focused
-	f.Base = f.Base.BorderForeground(lipgloss.Color("8"))
-	f.Title.Foreground(lipgloss.Color("99")).Bold(true)
-	f.Description.Foreground(lipgloss.Color("240"))
+	f.Base = f.Base.BorderForeground(lipgloss.Color("238"))
+	f.Title.Foreground(indigo).Bold(true)
+	f.Description.Foreground(lipgloss.AdaptiveColor{Light: "", Dark: "243"})
 	f.Help.Foreground(lipgloss.Color("8"))
-	f.ErrorIndicator.Foreground(lipgloss.Color("9"))
-	f.ErrorMessage.Foreground(lipgloss.Color("9"))
-	f.SelectSelector.Foreground(lipgloss.Color("212"))
-	f.Option.Foreground(lipgloss.Color("7"))
-	f.MultiSelectSelector.Foreground(lipgloss.Color("212"))
-	f.SelectedOption.Foreground(lipgloss.Color("36"))
-	f.SelectedPrefix = lipgloss.NewStyle().Foreground(lipgloss.Color("29")).SetString("✓ ")
+	f.ErrorIndicator.Foreground(red)
+	f.ErrorMessage.Foreground(red)
+	f.SelectSelector.Foreground(fuchsia)
+	f.Option.Foreground(normalFg)
+	f.MultiSelectSelector.Foreground(fuchsia)
+	f.SelectedOption.Foreground(green)
+	f.SelectedPrefix = lipgloss.NewStyle().Foreground(lipgloss.AdaptiveColor{Light: "#02CF92", Dark: "#02A877"}).SetString("✓ ")
 	f.UnselectedPrefix = lipgloss.NewStyle().SetString("• ")
-	f.UnselectedOption.Foreground(lipgloss.Color("7"))
-	f.FocusedButton.Foreground(lipgloss.Color("#ffffd7")).Background(lipgloss.Color("212"))
-	f.Next.Foreground(lipgloss.Color("#ffff87")).Background(lipgloss.Color("212")).MarginLeft(2).Padding(0, 1)
-	f.BlurredButton.Foreground(lipgloss.Color("7")).Background(lipgloss.Color("0"))
+	f.UnselectedOption.Foreground(normalFg)
+	f.FocusedButton.Foreground(cream).Background(fuchsia)
+	f.Next = f.FocusedButton.Copy()
+	f.BlurredButton.Foreground(normalFg).Background(lipgloss.AdaptiveColor{Light: "252", Dark: "237"})
 
-	f.TextInput.Cursor.Foreground(lipgloss.Color("212"))
-	f.TextInput.Placeholder.Foreground(lipgloss.Color("8"))
-	f.TextInput.Prompt.Foreground(lipgloss.Color("212"))
+	f.TextInput.Cursor.Foreground(green)
+	f.TextInput.Placeholder.Foreground(lipgloss.AdaptiveColor{Light: "248", Dark: "238"})
+	f.TextInput.Prompt.Foreground(fuchsia)
 
 	t.Blurred = f.copy()
 	t.Blurred.Base.BorderStyle(lipgloss.HiddenBorder())
@@ -214,24 +224,24 @@ func NewBase16Theme() *Theme {
 	f.Help.Foreground(lipgloss.Color("8"))
 	f.ErrorIndicator.Foreground(lipgloss.Color("9"))
 	f.ErrorMessage.Foreground(lipgloss.Color("9"))
-	f.SelectSelector.Foreground(lipgloss.Color("6"))
+	f.SelectSelector.Foreground(lipgloss.Color("3"))
 	f.Option.Foreground(lipgloss.Color("7"))
-	f.MultiSelectSelector.Foreground(lipgloss.Color("6"))
-	f.SelectedOption.Foreground(lipgloss.Color("6"))
-	f.SelectedPrefix.Foreground(lipgloss.Color("6"))
+	f.MultiSelectSelector.Foreground(lipgloss.Color("3"))
+	f.SelectedOption.Foreground(lipgloss.Color("2"))
+	f.SelectedPrefix.Foreground(lipgloss.Color("2"))
 	f.UnselectedOption.Foreground(lipgloss.Color("7"))
-	f.FocusedButton.Foreground(lipgloss.Color("0")).Background(lipgloss.Color("6"))
+	f.FocusedButton.Foreground(lipgloss.Color("7")).Background(lipgloss.Color("5"))
 	f.BlurredButton.Foreground(lipgloss.Color("7")).Background(lipgloss.Color("0"))
 
-	f.TextInput.Cursor.Foreground(lipgloss.Color("6"))
+	f.TextInput.Cursor.Foreground(lipgloss.Color("5"))
 	f.TextInput.Placeholder.Foreground(lipgloss.Color("8"))
-	f.TextInput.Prompt.Foreground(lipgloss.Color("6"))
+	f.TextInput.Prompt.Foreground(lipgloss.Color("3"))
 
 	t.Blurred = f.copy()
 	t.Blurred.Base = t.Blurred.Base.BorderStyle(lipgloss.HiddenBorder())
 	t.Blurred.Title.Foreground(lipgloss.Color("8"))
 	t.Blurred.TextInput.Prompt.Foreground(lipgloss.Color("8"))
-	t.Blurred.TextInput.Text.Foreground(lipgloss.Color("8"))
+	t.Blurred.TextInput.Text.Foreground(lipgloss.Color("7"))
 
 	return &t
 }