Skip to content

Commit

Permalink
refactor(ui)!: reorganize color config and component styling
Browse files Browse the repository at this point in the history 
- Improved component styling for lists, folders, and content
- Enhanced visual consistency across focused/blurred states

BREAKING CHANGES:
- Restructured color configuration in Config struct
- Updated default color values and their application
  • Loading branch information
@korikhin
korikhin committed Dec 29, 2024
1 parent bce3f6d commit 5dd4da3
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 51 deletions.
35 changes: 19 additions & 16 deletions config.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,19 @@ type Config struct {

Theme string `env:"NAP_THEME" yaml:"theme"`

PrimaryColor string `env:"NAP_PRIMARY_COLOR" yaml:"primary_color"`
PrimaryColorSubdued string `env:"NAP_PRIMARY_COLOR_SUBDUED" yaml:"primary_color_subdued"`
BrightGreenColor string `env:"NAP_BRIGHT_GREEN" yaml:"bright_green"`
GreenColor string `env:"NAP_GREEN" yaml:"green"`
BrightRedColor string `env:"NAP_BRIGHT_RED" yaml:"bright_red"`
RedColor string `env:"NAP_RED" yaml:"red"`
ForegroundColor string `env:"NAP_FOREGROUND" yaml:"foreground"`
BackgroundColor string `env:"NAP_BACKGROUND" yaml:"background"`
GrayColor string `env:"NAP_GRAY" yaml:"gray"`
ForegroundColor string `env:"NAP_FOREGROUND" yaml:"foreground"`
BlackColor string `env:"NAP_BLACK" yaml:"black"`
GrayColor string `env:"NAP_GRAY" yaml:"gray"`
BrightGrayColor string `env:"NAP_BRIGHT_GRAY" yaml:"bright_gray"`
WhiteColor string `env:"NAP_WHITE" yaml:"white"`
PrimaryColor string `env:"NAP_PRIMARY_COLOR" yaml:"primary_color"`
PrimaryColorSubdued string `env:"NAP_PRIMARY_COLOR_SUBDUED" yaml:"primary_color_subdued"`
RedColor string `env:"NAP_RED" yaml:"red"`
BrightRedColor string `env:"NAP_BRIGHT_RED" yaml:"bright_red"`
GreenColor string `env:"NAP_GREEN" yaml:"green"`
BrightGreenColor string `env:"NAP_BRIGHT_GREEN" yaml:"bright_green"`
StatusColor string `env:"NAP_STATUS_COLOR" yaml:"status_color"`
}

func newConfig() Config {
Expand All @@ -43,17 +45,18 @@ func newConfig() Config {
File: "snippets.json",
DefaultLanguage: defaultLanguage,
Theme: "dracula",
BackgroundColor: "235",
ForegroundColor: "15",
BlackColor: "#373B41",
GrayColor: "235",
BrightGrayColor: "241",
WhiteColor: "#FFFFFF",
PrimaryColor: "#AFBEE1",
PrimaryColorSubdued: "#64708D",
BrightGreenColor: "#BCE1AF",
GreenColor: "#527251",
BrightRedColor: "#E49393",
RedColor: "#A46060",
ForegroundColor: "15",
BackgroundColor: "235",
GrayColor: "241",
BlackColor: "#373b41",
WhiteColor: "#FFFFFF",
BrightRedColor: "#E49393",
GreenColor: "#527251",
BrightGreenColor: "#BCE1AF",
}
}

Expand Down
13 changes: 5 additions & 8 deletions main.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,8 +358,8 @@ func runInteractiveMode(config Config, snippets []Snippet) error {
folderList.SetFilteringEnabled(false)
folderList.SetShowStatusBar(false)
folderList.DisableQuitKeybindings()
folderList.Styles.NoItems = lipgloss.NewStyle().Margin(0, 2).Foreground(lipgloss.Color(config.GrayColor))
folderList.SetStatusBarItemName("folder", "folders")
folderList.Styles.NoItems = lipgloss.NewStyle().Margin(0, 2).Foreground(lipgloss.Color(config.GrayColor))

for idx, folder := range foldersSlice {
if string(folder) == state.CurrentFolder {
Expand Down Expand Up @@ -394,14 +394,10 @@ func runInteractiveMode(config Config, snippets []Snippet) error {
ListStyle: defaultStyles.Snippets.Focused,
FoldersStyle: defaultStyles.Folders.Blurred,
keys: DefaultKeyMap,
help: help.New(),
config: config,
inputs: []textinput.Model{
newTextInput(defaultSnippetFolder + " "),
newTextInput(defaultSnippetName + " "),
newTextInput(config.DefaultLanguage),
},
tagsInput: newTextInput("Tags"),
inputs: snippetInputs(config),
tagsInput: newTextInput("Tags"),
help: defaultHelp(config),
}
p := tea.NewProgram(m, tea.WithAltScreen())
model, err := p.Run()
Expand Down Expand Up @@ -437,6 +433,7 @@ func newList(items []list.Item, height int, styles SnippetsBaseStyle) *list.Mode
snippetList.Styles.Title = styles.Title
snippetList.Styles.TitleBar = styles.TitleBar
snippetList.Styles.StatusEmpty = styles.DeletedSubtitle
snippetList.Styles.StatusBar = styles.StatusBar
snippetList.Styles.StatusBarFilterCount = styles.UnselectedSubtitle
snippetList.Styles.NoItems = styles.UnselectedSubtitle.Margin(0, 2).MaxWidth(35 - 2)
snippetList.Styles.DividerDot = snippetList.Styles.DividerDot.Foreground(styles.UnselectedSubtitle.GetForeground())
Expand Down
68 changes: 41 additions & 27 deletions style.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ type SnippetsBaseStyle struct {
Base lipgloss.Style
Title lipgloss.Style
TitleBar lipgloss.Style
StatusBar lipgloss.Style
SelectedSubtitle lipgloss.Style
UnselectedSubtitle lipgloss.Style
SelectedTitle lipgloss.Style
Expand Down Expand Up @@ -74,79 +75,92 @@ var marginStyle = lipgloss.NewStyle().Margin(1, 0, 0, 1)
// DefaultStyles is the default implementation of the styles struct for all
// styling in the application.
func DefaultStyles(config Config) Styles {
white := lipgloss.Color(config.WhiteColor)
background := lipgloss.Color(config.BackgroundColor)
black := lipgloss.Color(config.BlackColor)
gray := lipgloss.Color(config.GrayColor)
black := lipgloss.Color(config.BackgroundColor)
brightBlack := lipgloss.Color(config.BlackColor)
brightGray := lipgloss.Color(config.BrightGrayColor)
white := lipgloss.Color(config.WhiteColor)
red := lipgloss.Color(config.RedColor)
brightRed := lipgloss.Color(config.BrightRedColor)
green := lipgloss.Color(config.GreenColor)
brightGreen := lipgloss.Color(config.BrightGreenColor)
brightBlue := lipgloss.Color(config.PrimaryColor)
blue := lipgloss.Color(config.PrimaryColorSubdued)
red := lipgloss.Color(config.RedColor)
brightRed := lipgloss.Color(config.BrightRedColor)
brightBlue := lipgloss.Color(config.PrimaryColor)

// Extra styles
var status lipgloss.Color
if s := config.StatusColor; s != "" {
status = lipgloss.Color(s)
} else {
status = gray
}

return Styles{
Snippets: SnippetsStyle{
Focused: SnippetsBaseStyle{
Base: lipgloss.NewStyle().Width(35),
TitleBar: lipgloss.NewStyle().Background(blue).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1).Foreground(white),
SelectedSubtitle: lipgloss.NewStyle().Foreground(blue),
UnselectedSubtitle: lipgloss.NewStyle().Foreground(lipgloss.Color("237")),
Title: lipgloss.NewStyle().Foreground(white),
TitleBar: lipgloss.NewStyle().Background(blue).Foreground(white).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1),
StatusBar: lipgloss.NewStyle().Foreground(status).MaxWidth(35-2).Margin(1, 2),
SelectedTitle: lipgloss.NewStyle().Foreground(brightBlue),
UnselectedTitle: lipgloss.NewStyle().Foreground(gray),
CopiedTitleBar: lipgloss.NewStyle().Background(green).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1).Foreground(white),
UnselectedTitle: lipgloss.NewStyle().Foreground(brightGray),
SelectedSubtitle: lipgloss.NewStyle().Foreground(blue),
UnselectedSubtitle: lipgloss.NewStyle().Foreground(gray),
CopiedTitle: lipgloss.NewStyle().Foreground(brightGreen),
CopiedTitleBar: lipgloss.NewStyle().Background(green).Foreground(white).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1),
CopiedSubtitle: lipgloss.NewStyle().Foreground(green),
DeletedTitleBar: lipgloss.NewStyle().Background(red).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1).Foreground(white),
DeletedTitle: lipgloss.NewStyle().Foreground(brightRed),
DeletedTitleBar: lipgloss.NewStyle().Background(red).Foreground(white).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1),
DeletedSubtitle: lipgloss.NewStyle().Foreground(red),
},
Blurred: SnippetsBaseStyle{
Base: lipgloss.NewStyle().Width(35),
TitleBar: lipgloss.NewStyle().Background(black).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1).Foreground(gray),
Title: lipgloss.NewStyle().Foreground(brightGray),
TitleBar: lipgloss.NewStyle().Background(background).Foreground(brightGray).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1),
StatusBar: lipgloss.NewStyle().Foreground(status).MaxWidth(35-2).Margin(1, 2),
SelectedTitle: lipgloss.NewStyle().Foreground(brightBlue),
UnselectedTitle: lipgloss.NewStyle().Foreground(gray),
SelectedSubtitle: lipgloss.NewStyle().Foreground(blue),
UnselectedSubtitle: lipgloss.NewStyle().Foreground(black),
SelectedTitle: lipgloss.NewStyle().Foreground(brightBlue),
UnselectedTitle: lipgloss.NewStyle().Foreground(lipgloss.Color("237")),
CopiedTitleBar: lipgloss.NewStyle().Background(green).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1),
CopiedTitle: lipgloss.NewStyle().Foreground(brightGreen),
CopiedTitleBar: lipgloss.NewStyle().Background(green).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1),
CopiedSubtitle: lipgloss.NewStyle().Foreground(green),
DeletedTitleBar: lipgloss.NewStyle().Background(red).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1),
DeletedTitle: lipgloss.NewStyle().Foreground(brightRed),
DeletedTitleBar: lipgloss.NewStyle().Background(red).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1),
DeletedSubtitle: lipgloss.NewStyle().Foreground(red),
},
},
Folders: FoldersStyle{
Focused: FoldersBaseStyle{
Base: lipgloss.NewStyle().Width(22),
Title: lipgloss.NewStyle().Padding(0, 1).Foreground(white),
Title: lipgloss.NewStyle().Foreground(white).Padding(0, 1),
TitleBar: lipgloss.NewStyle().Background(blue).Width(22-2).Margin(0, 1, 1, 1),
Selected: lipgloss.NewStyle().Foreground(brightBlue),
Unselected: lipgloss.NewStyle().Foreground(gray),
Unselected: lipgloss.NewStyle().Foreground(brightGray),
},
Blurred: FoldersBaseStyle{
Base: lipgloss.NewStyle().Width(22),
Title: lipgloss.NewStyle().Padding(0, 1).Foreground(gray),
TitleBar: lipgloss.NewStyle().Background(black).Width(22-2).Margin(0, 1, 1, 1),
Title: lipgloss.NewStyle().Foreground(brightGray).Padding(0, 1),
TitleBar: lipgloss.NewStyle().Background(background).Width(22-2).Margin(0, 1, 1, 1),
Selected: lipgloss.NewStyle().Foreground(brightBlue),
Unselected: lipgloss.NewStyle().Foreground(lipgloss.Color("237")),
Unselected: lipgloss.NewStyle().Foreground(gray),
},
},
Content: ContentStyle{
Focused: ContentBaseStyle{
Base: lipgloss.NewStyle().Margin(0, 1),
Title: lipgloss.NewStyle().Background(blue).Foreground(white).Margin(0, 0, 1, 1).Padding(0, 1),
Separator: lipgloss.NewStyle().Foreground(white).Margin(0, 0, 1, 1),
LineNumber: lipgloss.NewStyle().Foreground(brightBlack),
EmptyHint: lipgloss.NewStyle().Foreground(gray),
LineNumber: lipgloss.NewStyle().Foreground(gray),
EmptyHint: lipgloss.NewStyle().Foreground(brightGray),
EmptyHintKey: lipgloss.NewStyle().Foreground(brightBlue),
},
Blurred: ContentBaseStyle{
Base: lipgloss.NewStyle().Margin(0, 1),
Title: lipgloss.NewStyle().Background(black).Foreground(gray).Margin(0, 0, 1, 1).Padding(0, 1),
Separator: lipgloss.NewStyle().Foreground(gray).Margin(0, 0, 1, 1),
Title: lipgloss.NewStyle().Background(background).Foreground(brightGray).Margin(0, 0, 1, 1).Padding(0, 1),
Separator: lipgloss.NewStyle().Foreground(brightGray).Margin(0, 0, 1, 1),
LineNumber: lipgloss.NewStyle().Foreground(black),
EmptyHint: lipgloss.NewStyle().Foreground(gray),
EmptyHint: lipgloss.NewStyle().Foreground(brightGray),
EmptyHintKey: lipgloss.NewStyle().Foreground(brightBlue),
},
},
Expand Down

0 comments on commit 5dd4da3

Please sign in to comment.