styles

package
v0.68.4 Latest Latest
Warning

This package is not in the latest version of its module.

Go to latest
Published: Apr 16, 2026 License: MIT Imports: 3 Imported by: 0

README

styles Package

The styles package provides centralized color constants, adaptive color variables, border definitions, and pre-configured lipgloss styles for consistent terminal output across the codebase.

Overview

All colors use compat.AdaptiveColor to automatically choose between light and dark variants based on the terminal's background. The dark palette is inspired by the Dracula theme; the light palette uses darker, more saturated colors for good contrast on light backgrounds.

Adaptive Color Variables

These variables provide compat.AdaptiveColor values that auto-select the correct shade at render time:

Variable Semantic use Light Dark
ColorError Error messages, critical issues #D73737 #FF5555
ColorWarning Warnings, cautionary information #E67E22 #FFB86C
ColorSuccess Success messages, confirmations #27AE60 #50FA7B
ColorInfo Informational messages #2980B9 #8BE9FD
ColorPurple File paths, commands, highlights #8E44AD #BD93F9
ColorYellow Progress, attention-grabbing content #B7950B #F1FA8C
ColorComment Secondary/muted information, line numbers #6C7A89 #6272A4
ColorForeground Primary text content #2C3E50 #F8F8F2
ColorBackground Highlighted backgrounds #ECF0F1 #282A36
ColorBorder Table borders and dividers #BDC3C7 #44475A
ColorTableAltRow Alternating table row backgrounds #F5F5F5 #1A1A1A

Border Definitions

Variable Style Usage
RoundedBorder ╭╮╰╯ rounded corners Tables, boxes, panels (primary)
NormalBorder Straight lines Left-side emphasis, subtle dividers
ThickBorder Thick lines Reserved for maximum visual emphasis

Pre-configured Styles

These lipgloss.Style values are ready to use directly:

Variable Color Usage
Error Red, bold Error messages
Warning Orange, bold Warning messages
Success Green, bold Success confirmations
Info Cyan, bold Informational messages
FilePath Purple File paths
LineNumber Comment/muted Line numbers in diffs
ContextLine Foreground Context lines in diffs
Highlight Yellow, bold Highlighted text
Location Purple, bold Location references
Command Purple CLI commands
Progress Yellow Progress indicators
Prompt Cyan Interactive prompts
Count Yellow, bold Numeric counts
Verbose Comment/muted Verbose/debug output
ListHeader Purple, bold List section headers
ListItem Foreground List items
TableHeader Purple, bold Table column headers
TableCell Foreground Table cell content
TableTotal Yellow, bold Table total/summary rows
TableTitle Purple, bold Table titles
TableBorder Border color Table border lines
ServerName Purple, bold MCP server names
ServerType Comment/muted MCP server type labels
ErrorBox Error color, rounded border Error message boxes
Header Foreground, bold, border Section headers
TreeEnumerator Comment/muted Tree branch characters
TreeNode Foreground Tree node text

Usage

import "github.com/github/gh-aw/pkg/styles"

// Use pre-configured styles
fmt.Println(styles.Error.Render("Something went wrong"))
fmt.Println(styles.Success.Render("Operation completed"))
fmt.Println(styles.Command.Render("gh aw compile"))

// Use adaptive colors for custom styles
customStyle := lipgloss.NewStyle().
    Foreground(styles.ColorInfo).
    Bold(true)
fmt.Println(customStyle.Render("Custom styled text"))

Huh Theme

The package also exports HuhTheme — a huh.ThemeFunc that applies the same Dracula-inspired color palette to interactive forms rendered with the huh library.

import "github.com/github/gh-aw/pkg/styles"

form := huh.NewForm(...).WithTheme(styles.HuhTheme)

Design Notes

  • Colors are defined with both light and dark hex constants (hexColor*Light, hexColor*Dark) so tests can assert exact color values without depending on the lipgloss type system.
  • The package uses charm.land/lipgloss/v2 and charm.land/lipgloss/v2/compat for adaptive color support.
  • For visual examples and detailed usage guidelines, see scratchpad/styles-guide.md.
  • All * styles export pre-configured lipgloss.Style values (not functions), so they can be used with method chaining: styles.Error.Copy().Underline(true).

Documentation

Overview

Package styles provides centralized style and color definitions for terminal output.

Adaptive Color System

This package uses compat.AdaptiveColor to automatically adapt colors based on the terminal background, ensuring good readability in both light and dark terminal themes. Each color constant includes both Light and Dark variants that are automatically selected based on the user's terminal configuration.

Design Philosophy

Light Mode Strategy:

  • Uses darker, more saturated colors for visibility on light backgrounds
  • Ensures high contrast ratios for accessibility
  • Colors are muted to reduce visual fatigue

Dark Mode Strategy:

  • Inspired by the Dracula color theme (https://draculatheme.com/)
  • Uses bright, vibrant colors optimized for dark backgrounds
  • Maintains consistency with popular dark terminal themes

Color Palette Overview

The palette includes semantic colors for common CLI use cases:

  • Status colors: Error (red), Warning (orange), Success (green), Info (cyan)
  • Highlight colors: Purple (commands, file paths), Yellow (progress, attention)
  • Structural colors: Comment (muted text), Foreground (primary text), Background, Border

Each color constant is documented with its light/dark hex values and semantic usage. For visual examples and usage guidelines, see scratchpad/styles-guide.md

Usage Example

import "github.com/github/gh-aw/pkg/styles"

// Using pre-configured styles
fmt.Println(styles.Error.Render("Something went wrong"))
fmt.Println(styles.Success.Render("Operation completed"))

// Using color constants for custom styles
customStyle := lipgloss.NewStyle().
	Foreground(styles.ColorInfo).
	Bold(true)
fmt.Println(customStyle.Render("Custom styled text"))

Index

Constants

This section is empty.

Variables

View Source
var (
	// ColorError is used for error messages and critical issues.
	ColorError = compat.AdaptiveColor{
		Light: lipgloss.Color(hexColorErrorLight),
		Dark:  lipgloss.Color(hexColorErrorDark),
	}

	// ColorWarning is used for warning messages and cautionary information.
	ColorWarning = compat.AdaptiveColor{
		Light: lipgloss.Color(hexColorWarningLight),
		Dark:  lipgloss.Color(hexColorWarningDark),
	}

	// ColorSuccess is used for success messages and confirmations.
	ColorSuccess = compat.AdaptiveColor{
		Light: lipgloss.Color(hexColorSuccessLight),
		Dark:  lipgloss.Color(hexColorSuccessDark),
	}

	// ColorInfo is used for informational messages
	ColorInfo = compat.AdaptiveColor{
		Light: lipgloss.Color(hexColorInfoLight),
		Dark:  lipgloss.Color(hexColorInfoDark),
	}

	// ColorPurple is used for file paths, commands, and highlights
	ColorPurple = compat.AdaptiveColor{
		Light: lipgloss.Color(hexColorPurpleLight),
		Dark:  lipgloss.Color(hexColorPurpleDark),
	}

	// ColorYellow is used for progress messages and attention-grabbing content
	ColorYellow = compat.AdaptiveColor{
		Light: lipgloss.Color(hexColorYellowLight),
		Dark:  lipgloss.Color(hexColorYellowDark),
	}

	// ColorComment is used for secondary/muted information like line numbers
	ColorComment = compat.AdaptiveColor{
		Light: lipgloss.Color(hexColorCommentLight),
		Dark:  lipgloss.Color(hexColorCommentDark),
	}

	// ColorForeground is used for primary text content
	ColorForeground = compat.AdaptiveColor{
		Light: lipgloss.Color(hexColorForegroundLight),
		Dark:  lipgloss.Color(hexColorForegroundDark),
	}

	// ColorBackground is used for highlighted backgrounds
	ColorBackground = compat.AdaptiveColor{
		Light: lipgloss.Color(hexColorBackgroundLight),
		Dark:  lipgloss.Color(hexColorBackgroundDark),
	}

	// ColorBorder is used for table borders and dividers
	ColorBorder = compat.AdaptiveColor{
		Light: lipgloss.Color(hexColorBorderLight),
		Dark:  lipgloss.Color(hexColorBorderDark),
	}

	// ColorTableAltRow is used for alternating row backgrounds in tables (zebra striping)
	ColorTableAltRow = compat.AdaptiveColor{
		Light: lipgloss.Color(hexColorTableAltRowLight),
		Dark:  lipgloss.Color(hexColorTableAltRowDark),
	}
)

Adaptive colors that work well in both light and dark terminal themes. Light variants use darker, more saturated colors for visibility on light backgrounds. Dark variants use brighter colors (Dracula theme inspired) for dark backgrounds.

View Source
var (
	// RoundedBorder is the primary border style for most boxes and tables.
	// It provides a softer, more polished appearance with rounded corners (╭╮╰╯).
	// Used for: tables, error boxes, emphasis boxes, and informational panels.
	RoundedBorder = lipgloss.RoundedBorder()

	// NormalBorder is used for subtle borders and section dividers.
	// It provides clean, simple straight lines suitable for left-side emphasis.
	// Used for: info sections with left border, subtle dividers.
	NormalBorder = lipgloss.NormalBorder()

	// ThickBorder is available for special cases requiring extra visual weight.
	// Use sparingly - RoundedBorder with bold/color is usually sufficient for emphasis.
	// Reserved for: future use cases requiring maximum visual impact.
	ThickBorder = lipgloss.ThickBorder()
)

Border definitions for consistent styling across CLI output. These provide a centralized set of border styles that adapt based on context.

View Source
var Command = lipgloss.NewStyle().
	Bold(true).
	Foreground(ColorPurple)

Command style for command execution messages - bold purple

View Source
var ContextLine = lipgloss.NewStyle().
	Foreground(ColorForeground)

ContextLine style for source code context lines

View Source
var Count = lipgloss.NewStyle().
	Bold(true).
	Foreground(ColorInfo)

Count style for count/numeric status messages - bold cyan

View Source
var Error = lipgloss.NewStyle().
	Bold(true).
	Foreground(ColorError)

Error style for error messages - bold red

View Source
var ErrorBox = lipgloss.NewStyle().
	Border(RoundedBorder).
	BorderForeground(ColorError).
	Padding(1).
	Margin(1)

ErrorBox style for error boxes with rounded borders

View Source
var FilePath = lipgloss.NewStyle().
	Bold(true).
	Foreground(ColorPurple)

FilePath style for file paths and locations - bold purple

View Source
var Header = lipgloss.NewStyle().
	Bold(true).
	Foreground(ColorSuccess).
	MarginBottom(1)

Header style for section headers with margin - bold green

View Source
var Highlight = lipgloss.NewStyle().
	Background(ColorError).
	Foreground(ColorBackground)

Highlight style for error highlighting - inverted colors

View Source
var HuhTheme huh.ThemeFunc = func(isDark bool) *huh.Styles {
	t := huh.ThemeBase(isDark)
	lightDark := lipgloss.LightDark(isDark)

	// Map the pkg/styles palette using lipgloss v2's LightDark helper.
	var (
		primary    = lightDark(lipgloss.Color(hexColorPurpleLight), lipgloss.Color(hexColorPurpleDark))
		success    = lightDark(lipgloss.Color(hexColorSuccessLight), lipgloss.Color(hexColorSuccessDark))
		errorColor = lightDark(lipgloss.Color(hexColorErrorLight), lipgloss.Color(hexColorErrorDark))
		warning    = lightDark(lipgloss.Color(hexColorWarningLight), lipgloss.Color(hexColorWarningDark))
		comment    = lightDark(lipgloss.Color(hexColorCommentLight), lipgloss.Color(hexColorCommentDark))
		fg         = lightDark(lipgloss.Color(hexColorForegroundLight), lipgloss.Color(hexColorForegroundDark))
		bg         = lightDark(lipgloss.Color(hexColorBackgroundLight), lipgloss.Color(hexColorBackgroundDark))
		border     = lightDark(lipgloss.Color(hexColorBorderLight), lipgloss.Color(hexColorBorderDark))
	)

	t.Focused.Base = t.Focused.Base.BorderForeground(border)
	t.Focused.Card = t.Focused.Base
	t.Focused.Title = t.Focused.Title.Foreground(primary).Bold(true)
	t.Focused.NoteTitle = t.Focused.NoteTitle.Foreground(primary).Bold(true).MarginBottom(1)
	t.Focused.Directory = t.Focused.Directory.Foreground(primary)
	t.Focused.Description = t.Focused.Description.Foreground(comment)
	t.Focused.ErrorIndicator = t.Focused.ErrorIndicator.Foreground(errorColor)
	t.Focused.ErrorMessage = t.Focused.ErrorMessage.Foreground(errorColor)

	t.Focused.SelectSelector = t.Focused.SelectSelector.Foreground(warning)
	t.Focused.NextIndicator = t.Focused.NextIndicator.Foreground(warning)
	t.Focused.PrevIndicator = t.Focused.PrevIndicator.Foreground(warning)

	t.Focused.Option = t.Focused.Option.Foreground(fg)
	t.Focused.MultiSelectSelector = t.Focused.MultiSelectSelector.Foreground(warning)
	t.Focused.SelectedOption = t.Focused.SelectedOption.Foreground(success)
	t.Focused.SelectedPrefix = t.Focused.SelectedPrefix.Foreground(success)
	t.Focused.UnselectedOption = t.Focused.UnselectedOption.Foreground(fg)
	t.Focused.UnselectedPrefix = t.Focused.UnselectedPrefix.Foreground(comment)

	t.Focused.FocusedButton = t.Focused.FocusedButton.Foreground(bg).Background(primary).Bold(true)
	t.Focused.BlurredButton = t.Focused.BlurredButton.Foreground(fg).Background(bg)
	t.Focused.Next = t.Focused.FocusedButton

	t.Focused.TextInput.Cursor = t.Focused.TextInput.Cursor.Foreground(warning)
	t.Focused.TextInput.Placeholder = t.Focused.TextInput.Placeholder.Foreground(comment)
	t.Focused.TextInput.Prompt = t.Focused.TextInput.Prompt.Foreground(primary)

	t.Blurred = t.Focused
	t.Blurred.Base = t.Focused.Base.BorderStyle(lipgloss.HiddenBorder())
	t.Blurred.Card = t.Blurred.Base
	t.Blurred.NextIndicator = lipgloss.NewStyle()
	t.Blurred.PrevIndicator = lipgloss.NewStyle()

	t.Group.Title = t.Focused.Title
	t.Group.Description = t.Focused.Description

	return t
}

HuhTheme is a huh.ThemeFunc that maps the pkg/styles Dracula-inspired color palette to huh form fields, giving interactive forms the same visual identity as the rest of the CLI output.

View Source
var Info = lipgloss.NewStyle().
	Bold(true).
	Foreground(ColorInfo)

Info style for informational messages - bold cyan

View Source
var LineNumber = lipgloss.NewStyle().
	Foreground(ColorComment)

LineNumber style for line numbers in error context - muted

View Source
var ListHeader = lipgloss.NewStyle().
	Bold(true).
	Underline(true).
	Foreground(ColorSuccess)

ListHeader style for section headers in lists - bold underline green

View Source
var ListItem = lipgloss.NewStyle().
	Foreground(ColorForeground)

ListItem style for items in lists

View Source
var Location = lipgloss.NewStyle().
	Bold(true).
	Foreground(ColorWarning)

Location style for directory/file location messages - bold orange

View Source
var Progress = lipgloss.NewStyle().
	Foreground(ColorYellow)

Progress style for progress/activity messages - yellow

View Source
var Prompt = lipgloss.NewStyle().
	Bold(true).
	Foreground(ColorSuccess)

Prompt style for user prompt messages - bold green

View Source
var ServerName = lipgloss.NewStyle().
	Bold(true).
	Foreground(ColorPurple)

ServerName style for MCP server names - bold purple

View Source
var ServerType = lipgloss.NewStyle().
	Foreground(ColorInfo)

ServerType style for MCP server type information - cyan

View Source
var Success = lipgloss.NewStyle().
	Bold(true).
	Foreground(ColorSuccess)

Success style for success messages - bold green

View Source
var TableBorder = lipgloss.NewStyle().
	Foreground(ColorBorder)

TableBorder style for table borders

View Source
var TableCell = lipgloss.NewStyle().
	Foreground(ColorForeground)

TableCell style for regular table cells

View Source
var TableHeader = lipgloss.NewStyle().
	Bold(true).
	Foreground(ColorComment)

TableHeader style for table headers - bold muted

View Source
var TableTitle = lipgloss.NewStyle().
	Bold(true).
	Foreground(ColorSuccess)

TableTitle style for table titles - bold green

View Source
var TableTotal = lipgloss.NewStyle().
	Bold(true).
	Foreground(ColorSuccess)

TableTotal style for total/summary rows - bold green

View Source
var TreeEnumerator = lipgloss.NewStyle().
	Foreground(ColorBorder)

TreeEnumerator style for tree branch characters (├── └──)

View Source
var TreeNode = lipgloss.NewStyle().
	Foreground(ColorForeground)

TreeNode style for tree node content

View Source
var Verbose = lipgloss.NewStyle().
	Italic(true).
	Foreground(ColorComment)

Verbose style for verbose debugging output - italic muted

View Source
var Warning = lipgloss.NewStyle().
	Bold(true).
	Foreground(ColorWarning)

Warning style for warning messages - bold orange

Functions

This section is empty.

Types

This section is empty.

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL