feat(ui): apply bleu theme to huh forms

- created HuhTheme() matching bleu color scheme
- bright cyan for focused elements and selectors
- success green for selected checkmarks
- dimmed text for blurred/inactive elements
- ocean blue background for focused buttons
- FormBuilder now applies custom theme to all forms

commit: d2eb1b323c317ea934c9a20e6935ab8f8be79540
author: bnema · 12mo ago · 2025-10-26 11:41 UTC
parent: 539e660
signature: unsigned

2 files · +52 -3

M internal/ui/components/forms.go +8 -3

@@ -1,6 +1,9 @@
1	1		package components
2	2
3		-	import "github.com/charmbracelet/huh"
	3	+	import (
	4	+	"github.com/charmbracelet/huh"
	5	+	"github.com/bnema/archup/internal/ui/styles"
	6	+	)
4	7
5	8		// FormBuilder provides reusable form components
6	9		type FormBuilder struct {

@@ -69,9 +72,11 @@ func (fb FormBuilder) Confirm(title, affirmative, negative string, value bool)
69	72		Value(value)
70	73		}
71	74
72		-	// CreateForm creates a form with accessibility settings
	75	+	// CreateForm creates a form with accessibility settings and custom theme
73	76		func (fb FormBuilder) CreateForm(groups ...huh.Group) *huh.Form {
74		-	form := huh.NewForm(groups...)
	77	+	form := huh.NewForm(groups...).
	78	+	WithTheme(styles.HuhTheme())
	79	+
75	80		if fb.accessible {
76	81		form.WithAccessible(true)
77	82		}

 package components
-import "github.com/charmbracelet/huh"
+import (
+	"github.com/charmbracelet/huh"
+	"github.com/bnema/archup/internal/ui/styles"
+)
 // FormBuilder provides reusable form components
 type FormBuilder struct {
 		Value(value)
 }
-// CreateForm creates a form with accessibility settings
+// CreateForm creates a form with accessibility settings and custom theme
 func (fb *FormBuilder) CreateForm(groups ...*huh.Group) *huh.Form {
-	form := huh.NewForm(groups...)
+	form := huh.NewForm(groups...).
+		WithTheme(styles.HuhTheme())
 	if fb.accessible {
 		form.WithAccessible(true)
 	}

M internal/ui/styles/theme.go +44 -0

@@ -1,6 +1,7 @@
1	1		package styles
2	2
3	3		import (
	4	+	"github.com/charmbracelet/huh"
4	5		"github.com/charmbracelet/lipgloss"
5	6		)
6	7

@@ -257,3 +258,46 @@ func RenderHelp(bindings map[string]string) string {
257	258		}
258	259		return HelpStyle.Render(help)
259	260		}
	261	+
	262	+	// HuhTheme returns a custom huh.Theme matching the bleu color scheme
	263	+	func HuhTheme() *huh.Theme {
	264	+	theme := huh.ThemeBase()
	265	+
	266	+	// Form and Group styles
	267	+	theme.Form.Base = lipgloss.NewStyle()
	268	+	theme.Group.Base = lipgloss.NewStyle()
	269	+	theme.Group.Title = TitleStyle
	270	+	theme.Group.Description = SubtitleStyle
	271	+
	272	+	// Focused field styles
	273	+	theme.Focused.Base = lipgloss.NewStyle()
	274	+	theme.Focused.Title = lipgloss.NewStyle().Foreground(ColorBrightCyan).Bold(true)
	275	+	theme.Focused.Description = lipgloss.NewStyle().Foreground(ColorPureBlue)
	276	+	theme.Focused.SelectSelector = lipgloss.NewStyle().Foreground(ColorBrightCyan).SetString("> ")
	277	+	theme.Focused.Option = lipgloss.NewStyle().Foreground(ColorPrimaryText)
	278	+	theme.Focused.MultiSelectSelector = lipgloss.NewStyle().Foreground(ColorBrightCyan).SetString("> ")
	279	+	theme.Focused.SelectedOption = lipgloss.NewStyle().Foreground(ColorBrightCyan)
	280	+	theme.Focused.SelectedPrefix = lipgloss.NewStyle().Foreground(ColorSuccessGreen).SetString("✓ ")
	281	+	theme.Focused.UnselectedOption = lipgloss.NewStyle().Foreground(ColorPrimaryText)
	282	+	theme.Focused.UnselectedPrefix = lipgloss.NewStyle().Foreground(ColorDimmedText).SetString("○ ")
	283	+	theme.Focused.FocusedButton = lipgloss.NewStyle().Foreground(ColorPureWhite).Background(ColorOceanBlue).Padding(0, 2).Bold(true)
	284	+	theme.Focused.BlurredButton = lipgloss.NewStyle().Foreground(ColorDimmedText).Padding(0, 2)
	285	+
	286	+	// Blurred field styles
	287	+	theme.Blurred.Base = lipgloss.NewStyle()
	288	+	theme.Blurred.Title = lipgloss.NewStyle().Foreground(ColorDimmedText)
	289	+	theme.Blurred.Description = lipgloss.NewStyle().Foreground(ColorDimmedText)
	290	+	theme.Blurred.SelectSelector = lipgloss.NewStyle().Foreground(ColorDimmedText).SetString("> ")
	291	+	theme.Blurred.Option = lipgloss.NewStyle().Foreground(ColorDimmedText)
	292	+
	293	+	// Text input styles
	294	+	theme.Focused.TextInput.Cursor = lipgloss.NewStyle().Foreground(ColorBrightCyan)
	295	+	theme.Focused.TextInput.Placeholder = PlaceholderStyle
	296	+	theme.Focused.TextInput.Prompt = PromptStyle
	297	+
	298	+	// Error styles
	299	+	theme.Focused.ErrorIndicator = lipgloss.NewStyle().Foreground(ColorSoftRed).SetString("✗ ")
	300	+	theme.Focused.ErrorMessage = ErrorStyle
	301	+
	302	+	return theme
	303	+	}

@@ -1,6 +1,7 @@
1	package styles	1		package styles
2		2
3	import (	3		import (
		4	+	"github.com/charmbracelet/huh"
4	"github.com/charmbracelet/lipgloss"	5		"github.com/charmbracelet/lipgloss"
5	)	6		)
6		7

@@ -257,3 +258,46 @@ func RenderHelp(bindings map[string]string) string {
257	}	258		}
258	return HelpStyle.Render(help)	259		return HelpStyle.Render(help)
259	}	260		}
		261	+
		262	+	// HuhTheme returns a custom huh.Theme matching the bleu color scheme
		263	+	func HuhTheme() *huh.Theme {
		264	+	theme := huh.ThemeBase()
		265	+
		266	+	// Form and Group styles
		267	+	theme.Form.Base = lipgloss.NewStyle()
		268	+	theme.Group.Base = lipgloss.NewStyle()
		269	+	theme.Group.Title = TitleStyle
		270	+	theme.Group.Description = SubtitleStyle
		271	+
		272	+	// Focused field styles
		273	+	theme.Focused.Base = lipgloss.NewStyle()
		274	+	theme.Focused.Title = lipgloss.NewStyle().Foreground(ColorBrightCyan).Bold(true)
		275	+	theme.Focused.Description = lipgloss.NewStyle().Foreground(ColorPureBlue)
		276	+	theme.Focused.SelectSelector = lipgloss.NewStyle().Foreground(ColorBrightCyan).SetString("> ")
		277	+	theme.Focused.Option = lipgloss.NewStyle().Foreground(ColorPrimaryText)
		278	+	theme.Focused.MultiSelectSelector = lipgloss.NewStyle().Foreground(ColorBrightCyan).SetString("> ")
		279	+	theme.Focused.SelectedOption = lipgloss.NewStyle().Foreground(ColorBrightCyan)
		280	+	theme.Focused.SelectedPrefix = lipgloss.NewStyle().Foreground(ColorSuccessGreen).SetString("✓ ")
		281	+	theme.Focused.UnselectedOption = lipgloss.NewStyle().Foreground(ColorPrimaryText)
		282	+	theme.Focused.UnselectedPrefix = lipgloss.NewStyle().Foreground(ColorDimmedText).SetString("○ ")
		283	+	theme.Focused.FocusedButton = lipgloss.NewStyle().Foreground(ColorPureWhite).Background(ColorOceanBlue).Padding(0, 2).Bold(true)
		284	+	theme.Focused.BlurredButton = lipgloss.NewStyle().Foreground(ColorDimmedText).Padding(0, 2)
		285	+
		286	+	// Blurred field styles
		287	+	theme.Blurred.Base = lipgloss.NewStyle()
		288	+	theme.Blurred.Title = lipgloss.NewStyle().Foreground(ColorDimmedText)
		289	+	theme.Blurred.Description = lipgloss.NewStyle().Foreground(ColorDimmedText)
		290	+	theme.Blurred.SelectSelector = lipgloss.NewStyle().Foreground(ColorDimmedText).SetString("> ")
		291	+	theme.Blurred.Option = lipgloss.NewStyle().Foreground(ColorDimmedText)
		292	+
		293	+	// Text input styles
		294	+	theme.Focused.TextInput.Cursor = lipgloss.NewStyle().Foreground(ColorBrightCyan)
		295	+	theme.Focused.TextInput.Placeholder = PlaceholderStyle
		296	+	theme.Focused.TextInput.Prompt = PromptStyle
		297	+
		298	+	// Error styles
		299	+	theme.Focused.ErrorIndicator = lipgloss.NewStyle().Foreground(ColorSoftRed).SetString("✗ ")
		300	+	theme.Focused.ErrorMessage = ErrorStyle
		301	+
		302	+	return theme
		303	+	}