Color Palettes

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 color palettes and visual styling in the Wizard Tutorial project are managed through the Lip Gloss library. This system defines the aesthetic properties of the terminal user interface (TUI), specifically controlling the foreground and background colors of UI components such as borders and input fields.

The project centralizes its styling logic within a dedicated structure that maps specific color values to UI elements. This ensures a consistent visual experience throughout the wizard flow, where questions are presented to the user within styled containers.
Sources: main.go:13-16, README.md:14-16

Style Architecture

The styling system is built around the Styles struct and the DefaultStyles constructor. It leverages ANSI color codes and the Lip Gloss DSL to define the appearance of the application's interactive components.

The Styles Structure

The application defines a specific data structure to hold styling information, which is then injected into the main application state.

Field	Type	Description
BorderColor	lipgloss.Color	The primary color used for component borders (ANSI "36").
InputField	lipgloss.Style	A composite style applied to input wrappers, including padding and borders.

Sources: main.go:13-16

Default Styling Logic

The DefaultStyles function initializes the color palette. It currently uses a specific color index and applies it to a normal border style with specific dimensions.

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

Visual Data Flow

The following diagram illustrates how color and style configurations flow from the initial definition to the final rendering of the TUI.

The Main model receives the Styles during initialization and applies the InputField style during the View cycle to wrap the active input component.
Sources: main.go:56-57, main.go:99-105

Component Styling Implementation

Styles are applied dynamically based on the current state of the wizard. The palette affects how the user perceives the active question area versus the finished summary.

Interactive Input Styling

When a question is active, the InputField style is used to render a border around the input (either textinput or textarea). This border uses the BorderColor defined in the palette.

Layout and Placement

The color palette is integrated into a larger layout system using lipgloss.Place and lipgloss.JoinVertical. This ensures that styled components are centered within the terminal window while maintaining their defined color properties.

Method	Purpose	Source
lipgloss.Place	Centers the styled content in the terminal.	main.go:96-101
Render()	Applies the palette and border to a string.	main.go:104
BorderForeground()	Assigns the specific palette color to the border.	main.go:21

Sources: main.go:96-106

Summary

The styling system in the Wizard Tutorial project is a centralized implementation using Lip Gloss to define a specific color palette (primarily ANSI 36). By encapsulating these definitions in a Styles struct, the project maintains a clear separation between application logic and visual presentation, allowing for consistent rendering of input fields and borders across different question types.
Sources: main.go:13-23, main.go:104