Customizing Styles

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

The wizard-tutorial project utilizes the Lip Gloss library to manage the visual representation of terminal-based components. Styling in this context involves defining colors, borders, padding, and layout positioning to enhance the user experience of the terminal wizard.

The styling system is centralized within a dedicated structure that governs how input fields and borders appear to the user. This approach allows for consistent UI updates across different types of questions (short and long answers) while maintaining a clean separation between the data model and its visual representation.
Sources: main.go:13-16, README.md:14-16

Style Architecture

The project organizes styling through a Styles struct and a default constructor. This structure holds the definitions for border colors and the specific lipgloss.Style applied to the input components of the wizard.

The Styles Structure

The Styles struct is the primary container for UI configuration. It is used by the Main model to render the interactive portions of the application.

Field	Type	Description
BorderColor	lipgloss.Color	Defines the color used for UI borders.
InputField	lipgloss.Style	A composite style defining borders, padding, and width for input fields.

Sources: main.go:13-16

Default Styling Configuration

The DefaultStyles function initializes the UI with predefined values. It sets a specific color (ANSI "36") and applies structural constraints to the input field, such as a normal border and a fixed width.

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:18-23

Layout and Positioning

The application uses lipgloss to handle the positioning of elements within the terminal window. The View method of the Main struct calculates the center of the terminal to place the wizard interface.

The following diagram illustrates how styles are applied during the rendering process:

The rendering logic uses lipgloss.Place to anchor the UI to the center of the terminal based on the width and height received from the tea.WindowSizeMsg.
Sources: main.go:88-106

Component Layout Properties

The layout is constructed vertically using lipgloss.JoinVertical. The question text and the input field are stacked, with the input field being wrapped in the InputField style.

Property	Value	Source
Vertical Alignment	Center	main.go:97
Horizontal Alignment	Center	main.go:98
Internal Alignment	Left	main.go:100
Border Style	Normal	main.go:21
Padding	1	main.go:21
Width	80 cells	main.go:21

Component-Specific Styling

While the Main model handles the container styling, the individual input components (Short Answer and Long Answer) have their own internal configurations managed via the bubbles library.

Input Field Visuals

The shortAnswerField and longAnswerField components provide the raw view that is later styled by the Main model. These components define placeholders to guide the user.

• Placeholder Text: Both NewShortAnswerField and NewLongAnswerField set a default placeholder string "Your answer here".
• Focus: Components are configured to Focus() upon initialization, which typically triggers visual cues like a blinking cursor.
  Sources: input.go:28-30, input.go:76-78

Summary of Styling Flow

1. Initialization: DefaultStyles() creates the theme.
2. Model Binding: The New() function attaches these styles to the Main model.
3. Update: The system captures window dimensions to ensure the styles are applied relative to the terminal size.
4. Render: The View() function executes m.styles.InputField.Render(current.input.View()), which applies the border and padding to the raw input component.
   Sources: main.go:56-59, main.go:77-79, main.go:102