Styling Definitions

Relevant source files

The following files were used as context for generating this wiki page:

• main.go
• input.go
• README.md
• go.mod
• go.sum

Styling in this project is primarily managed using the Lip Gloss library, which provides a declarative way to define Terminal User Interface (TUI) aesthetics. The styling definitions control the visual presentation of input fields, borders, and the overall layout of the wizard application. Sources: README.md:16, main.go:10

The application centralizes its visual configuration within a dedicated Styles structure, ensuring consistency across different types of questions and input fields. This system works in tandem with the Bubble Tea framework to render the interface dynamically based on the terminal window size. Sources: main.go:13-24, main.go:88-102

Styling Architecture

The styling architecture is built around a central Styles struct that holds reusable lipgloss.Style definitions. These styles are initialized once and passed through the application's main model to be applied during the rendering phase.

The diagram above illustrates the relationship between the main application state and the styling definitions. Sources: main.go:13-17, main.go:26-33

The Styles Structure

The Styles struct encapsulates the visual attributes of the TUI. Specifically, it defines the color and border characteristics of the interactive input components.

Field	Type	Description
BorderColor	lipgloss.Color	The color used for input field borders, initialized to "36".
InputField	lipgloss.Style	A composite style including borders, padding, and width constraints.

Sources: main.go:13-17, main.go:21-22

Initialization via DefaultStyles

Styles are instantiated through the DefaultStyles function. This function sets up a standard appearance for the wizard's input fields.

func DefaultStyles() *Styles {
	s := new(Styles)
	s.BorderColor = lipgloss.Color("36")
	s.InputField = lipgloss.NewStyle().BorderForeground(s.BorderColor).BorderStyle(lipgloss.NormalBorder()).Padding(1).Width(80)
	return s
}

Sources: main.go:19-24

Layout and Placement Logic

The application uses lipgloss to handle the positioning of styled elements within the terminal window. The View method of the Main model calculates the center of the screen and joins various UI components vertically.

The flow above shows how raw components are styled and then positioned centrally in the terminal. Sources: main.go:102-111

View Rendering Components

The rendering process involves three primary Lip Gloss functions:

1. lipgloss.Place: Positions the entire UI block relative to the terminal dimensions (m.width and m.height).
2. lipgloss.JoinVertical: Aligns the question text and the input field on top of each other.
3. InputField.Render: Applies the defined styles (border, padding, width) to the underlying input component's view.

Sources: main.go:102-111

Input Field Styling

The project supports different input types, such as textinput and textarea, which are wrapped in the Input interface. While the Styles struct provides the outer container styling (the InputField border), the internal behavior of these fields (like the blinking cursor) is managed via Bubble Tea commands. Sources: input.go:9-17, input.go:34-36

Styling Configuration Summary

Component	Style Attribute	Value / Description
Container	Border Style	lipgloss.NormalBorder()
Container	Border Color	Terminal Color 36 (Cyan-like)
Container	Padding	1 cell
Container	Width	80 cells
Alignment	Horizontal	lipgloss.Center
Alignment	Vertical	lipgloss.Center

Sources: main.go:22, main.go:105-106

Conclusion

Styling definitions in the Wizard project are decoupled from the business logic, residing in a dedicated Styles struct. By utilizing Lip Gloss, the project achieves a clean, centered layout with consistent bordering and padding across different input types. This modular approach allows for easy adjustments to the TUI's visual theme without modifying the core application flow. Sources: main.go:19-24, main.go:102-111