Do you think you can handle Lip Gloss v2?

We’re really excited for you to try Lip Gloss v2! Read on for new features and a guide to upgrading.

What’s new?

The big changes are that Styles are now deterministic (λipgloss!) and you can be much more intentional with your inputs and outputs. Why does this matter?

Playing nicely with others

v2 gives you precise control over I/O. One of the issues we saw with the Lip Gloss and Bubble Tea v1s is that they could fight over the same inputs and outputs, producing lock-ups. The v2s now operate in lockstep.

Querying the right inputs and outputs

In v1, Lip Gloss defaulted to looking at stdin and stdout when downsampling colors and querying for the background color. This was not always necessarily what you wanted. For example, if your application was writing to stderr while redirecting stdout to a file, the program would erroneously think output was not a TTY and strip colors. Lip Gloss v2 gives you control over this.

Going beyond localhost

Did you know TUIs and CLIs can be served over the network? For example, Wish allows you to serve Bubble Tea and Lip Gloss over SSH. In these cases, you need to work with the input and output of the connected clients as opposed to stdin and stdout, which belong to the server. Lip Gloss v2 gives you flexibility around this in a more natural way.

🧋 Using Lip Gloss with Bubble Tea?

Make sure you get all the latest v2s as they’ve been designed to work together.

# Collect the whole set.
go get github.com/charmbracelet/bubbletea/v2
go get github.com/charmbracelet/bubbles/v2
go get github.com/charmbracelet/lipgloss/v2

🐇 Quick upgrade

If you don't have time for changes and just want to upgrade to Lip Gloss v2 as fast as possible? Here’s a quick guide:

Use the compat package

The compat package provides adaptive colors, complete colors, and complete adaptive colors:

import "github.com/charmbracelet/lipgloss/v2/compat"

// Before
color := lipgloss.AdaptiveColor{Light: "#f1f1f1", Dark: "#cccccc"}

// After
color := compat.AdaptiveColor{Light: lipgloss.Color("#f1f1f1"), Dark: lipgloss.Color("#cccccc")}

compat works by looking at stdin and stdout on a global basis. Want to change the inputs and outputs? Knock yourself out:

import (
	"github.com/charmbracelet/lipgloss/v2/compat"
	"github.com/charmbracelet/colorprofile"
)

func init() {
	// Let’s use stderr instead of stdout.
	compat.HasDarkBackground = lipgloss.HasDarkBackground(os.Stdin, os.Stderr)
	compat.Profile = colorprofile.Detect(os.Stderr, os.Environ())
}

Use the new Lip Gloss writer

If you’re using Bubble Tea with Lip Gloss you can skip this step. If you're using Lip Gloss in a standalone fashion, however, you'll want to use lipgloss.Println (and lipgloss.Printf and so on) when printing your output:

s := someStyle.Render("Fancy Lip Gloss Output")

// Before
fmt.Println(s)

// After
lipgloss.Println(s)

Why? Because lipgloss.Println will automatically downsample colors based on the environment.

That’s it!

Yep, you’re done. All this said, we encourage you to read on to get the full benefit of v2.

👀 What’s changing?

Only a couple main things that are changing in Lip Gloss v2:

• Color downsampling in non-Bubble-Tea uses cases is now a manual proccess (don't worry, it's easy)
• Background color detection and adaptive colors are manual, and intentional (but optional)

🪄 Downsampling colors with a writer

One of the best things about Lip Gloss is that it can automatically downsample colors to the best available profile, stripping colors (and ANSI) entirely when output is not a TTY.

If you're using Lip Gloss with Bubble Tea there's nothing to do here: downsampling is built into Bubble Tea v2. If you're not using Bubble Tea you now need to use a writer to downsample colors. Lip Gloss writers are a drop-in replacement for the usual functions found in the fmt package:

s := someStyle.Render("Hello!")

// Downsample and print to stdout.
lipgloss.Println(s)

// Render to a variable.
downsampled := lipgloss.Sprint(s)

// Print to stderr.
lipgloss.Fprint(os.Stderr, s)

🌛 Background color detection and adaptive colors

Rendering different colors depending on whether the terminal has a light or dark background is an awesome power. Lip Gloss v2 gives you more control over this progress. This especially matters when input and output are not stdin and stdout.

If that doesn’t matter to you and you're only working with stdout you skip this via compat above, though we encourage you to explore this new functionality.

With Bubble Tea

In Bubble Tea, request the background color, listen for a BackgroundColorMsg in your update, and respond accordingly.

// Query for the background color.
func (m model) Init() (tea.Model, tea.Cmd) {
	return m, tea.RequestBackgroundColor
}

// Listen for the response and initialize your styles accordigly.
func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	switch msg := msg.(type) {
	case tea.BackgroundColorMsg:
		// Initialize your styles now that you know the background color.
		m.styles = newStyles(msg.IsDark())
		return m, nil
	}
}

type styles {
    myHotStyle lipgloss.Style
}

func newStyles(bgIsDark bool) (s styles) {
	lightDark := lipgloss.LightDark(bgIsDark) // just a helper function
	return styles{
		myHotStyle := lipgloss.NewStyle().Foreground(lightDark("#f1f1f1", "#333333"))
	}
}

Standalone

If you're not using Bubble Tea you simply can perform the query manually:

// Detect the background color. Notice we're writing to stderr.
hasDarkBG, err := lipgloss.HasDarkBackground(os.Stdin, os.Stderr)
if err != nil {
    log.Fatal("Oof:", err)
}

// Create a helper for choosing the appropriate color.
lightDark := lipgloss.LightDark(hasDarkBG)

// Declare some colors.
thisColor := lightDark("#C5ADF9", "#864EFF")
thatColor := lightDark("#37CD96", "#22C78A")

// Render some styles.
a := lipgloss.NewStyle().Foreground(thisColor).Render("this")
b := lipgloss.NewStyle().Foreground(thatColor).Render("that")

// Print to stderr.
lipgloss.Fprintf(os.Stderr, "my fave colors are %s and %s...for now.", a, b)

🥕 Other stuff

Colors are now color.Color

lipgloss.Color() now produces an idiomatic color.Color, whereas before colors were type lipgloss.TerminalColor. Generally speaking, this is more of an implementation detail, but it’s worth noting the structural differences.

// Before
type TerminalColor interface{/* ... */}
type Color string

// After
func Color(string) color.Color
type RGBColor struct{R, G, B uint8}

func LightDark(isDark bool) LightDarkFunc
type LightDarkFunc func(light, dark color.Color) color.Color
func Complete(colorprofile.Profile) CompleteFunc
type CompleteFunc func(ansi, ansi256, truecolor color.Color) color.Color

🌈 Feedback

That's a wrap! Feel free to reach out, ask questions, and let us know how it's going. We'd love to know what you think.

• Discord
• Matrix
• Email

Part of Charm.

Charm热爱开源 • Charm loves open source • نحنُ نحب المصادر المفتوحة