Skip to content

Commit 5dd4da3

Browse files
korikhinkorikhin
committed
refactor(ui)!: reorganize color config and component styling
- 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
1 parent bce3f6d commit 5dd4da3

File tree

3 files changed

+65
-51
lines changed

3 files changed

+65
-51
lines changed

‎config.go‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,19 @@ type Config struct {
2424

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

27-
PrimaryColor string `env:"NAP_PRIMARY_COLOR" yaml:"primary_color"`
28-
PrimaryColorSubdued string `env:"NAP_PRIMARY_COLOR_SUBDUED" yaml:"primary_color_subdued"`
29-
BrightGreenColor string `env:"NAP_BRIGHT_GREEN" yaml:"bright_green"`
30-
GreenColor string `env:"NAP_GREEN" yaml:"green"`
31-
BrightRedColor string `env:"NAP_BRIGHT_RED" yaml:"bright_red"`
32-
RedColor string `env:"NAP_RED" yaml:"red"`
33-
ForegroundColor string `env:"NAP_FOREGROUND" yaml:"foreground"`
3427
BackgroundColor string `env:"NAP_BACKGROUND" yaml:"background"`
35-
GrayColor string `env:"NAP_GRAY" yaml:"gray"`
28+
ForegroundColor string `env:"NAP_FOREGROUND" yaml:"foreground"`
3629
BlackColor string `env:"NAP_BLACK" yaml:"black"`
30+
GrayColor string `env:"NAP_GRAY" yaml:"gray"`
31+
BrightGrayColor string `env:"NAP_BRIGHT_GRAY" yaml:"bright_gray"`
3732
WhiteColor string `env:"NAP_WHITE" yaml:"white"`
33+
PrimaryColor string `env:"NAP_PRIMARY_COLOR" yaml:"primary_color"`
34+
PrimaryColorSubdued string `env:"NAP_PRIMARY_COLOR_SUBDUED" yaml:"primary_color_subdued"`
35+
RedColor string `env:"NAP_RED" yaml:"red"`
36+
BrightRedColor string `env:"NAP_BRIGHT_RED" yaml:"bright_red"`
37+
GreenColor string `env:"NAP_GREEN" yaml:"green"`
38+
BrightGreenColor string `env:"NAP_BRIGHT_GREEN" yaml:"bright_green"`
39+
StatusColor string `env:"NAP_STATUS_COLOR" yaml:"status_color"`
3840
}
3941

4042
func newConfig() Config {
@@ -43,17 +45,18 @@ func newConfig() Config {
4345
File: "snippets.json",
4446
DefaultLanguage: defaultLanguage,
4547
Theme: "dracula",
48+
BackgroundColor: "235",
49+
ForegroundColor: "15",
50+
BlackColor: "#373B41",
51+
GrayColor: "235",
52+
BrightGrayColor: "241",
53+
WhiteColor: "#FFFFFF",
4654
PrimaryColor: "#AFBEE1",
4755
PrimaryColorSubdued: "#64708D",
48-
BrightGreenColor: "#BCE1AF",
49-
GreenColor: "#527251",
50-
BrightRedColor: "#E49393",
5156
RedColor: "#A46060",
52-
ForegroundColor: "15",
53-
BackgroundColor: "235",
54-
GrayColor: "241",
55-
BlackColor: "#373b41",
56-
WhiteColor: "#FFFFFF",
57+
BrightRedColor: "#E49393",
58+
GreenColor: "#527251",
59+
BrightGreenColor: "#BCE1AF",
5760
}
5861
}
5962

‎main.go‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -358,8 +358,8 @@ func runInteractiveMode(config Config, snippets []Snippet) error {
358358
folderList.SetFilteringEnabled(false)
359359
folderList.SetShowStatusBar(false)
360360
folderList.DisableQuitKeybindings()
361-
folderList.Styles.NoItems = lipgloss.NewStyle().Margin(0, 2).Foreground(lipgloss.Color(config.GrayColor))
362361
folderList.SetStatusBarItemName("folder", "folders")
362+
folderList.Styles.NoItems = lipgloss.NewStyle().Margin(0, 2).Foreground(lipgloss.Color(config.GrayColor))
363363

364364
for idx, folder := range foldersSlice {
365365
if string(folder) == state.CurrentFolder {
@@ -394,14 +394,10 @@ func runInteractiveMode(config Config, snippets []Snippet) error {
394394
ListStyle: defaultStyles.Snippets.Focused,
395395
FoldersStyle: defaultStyles.Folders.Blurred,
396396
keys: DefaultKeyMap,
397-
help: help.New(),
398397
config: config,
399-
inputs: []textinput.Model{
400-
newTextInput(defaultSnippetFolder + " "),
401-
newTextInput(defaultSnippetName + " "),
402-
newTextInput(config.DefaultLanguage),
403-
},
404-
tagsInput: newTextInput("Tags"),
398+
inputs: snippetInputs(config),
399+
tagsInput: newTextInput("Tags"),
400+
help: defaultHelp(config),
405401
}
406402
p := tea.NewProgram(m, tea.WithAltScreen())
407403
model, err := p.Run()
@@ -437,6 +433,7 @@ func newList(items []list.Item, height int, styles SnippetsBaseStyle) *list.Mode
437433
snippetList.Styles.Title = styles.Title
438434
snippetList.Styles.TitleBar = styles.TitleBar
439435
snippetList.Styles.StatusEmpty = styles.DeletedSubtitle
436+
snippetList.Styles.StatusBar = styles.StatusBar
440437
snippetList.Styles.StatusBarFilterCount = styles.UnselectedSubtitle
441438
snippetList.Styles.NoItems = styles.UnselectedSubtitle.Margin(0, 2).MaxWidth(35 - 2)
442439
snippetList.Styles.DividerDot = snippetList.Styles.DividerDot.Foreground(styles.UnselectedSubtitle.GetForeground())

‎style.go‎

Lines changed: 41 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ type SnippetsBaseStyle struct {
2929
Base lipgloss.Style
3030
Title lipgloss.Style
3131
TitleBar lipgloss.Style
32+
StatusBar lipgloss.Style
3233
SelectedSubtitle lipgloss.Style
3334
UnselectedSubtitle lipgloss.Style
3435
SelectedTitle lipgloss.Style
@@ -74,79 +75,92 @@ var marginStyle = lipgloss.NewStyle().Margin(1, 0, 0, 1)
7475
// DefaultStyles is the default implementation of the styles struct for all
7576
// styling in the application.
7677
func DefaultStyles(config Config) Styles {
77-
white := lipgloss.Color(config.WhiteColor)
78+
background := lipgloss.Color(config.BackgroundColor)
79+
black := lipgloss.Color(config.BlackColor)
7880
gray := lipgloss.Color(config.GrayColor)
79-
black := lipgloss.Color(config.BackgroundColor)
80-
brightBlack := lipgloss.Color(config.BlackColor)
81+
brightGray := lipgloss.Color(config.BrightGrayColor)
82+
white := lipgloss.Color(config.WhiteColor)
83+
red := lipgloss.Color(config.RedColor)
84+
brightRed := lipgloss.Color(config.BrightRedColor)
8185
green := lipgloss.Color(config.GreenColor)
8286
brightGreen := lipgloss.Color(config.BrightGreenColor)
83-
brightBlue := lipgloss.Color(config.PrimaryColor)
8487
blue := lipgloss.Color(config.PrimaryColorSubdued)
85-
red := lipgloss.Color(config.RedColor)
86-
brightRed := lipgloss.Color(config.BrightRedColor)
88+
brightBlue := lipgloss.Color(config.PrimaryColor)
89+
90+
// Extra styles
91+
var status lipgloss.Color
92+
if s := config.StatusColor; s != "" {
93+
status = lipgloss.Color(s)
94+
} else {
95+
status = gray
96+
}
8797

8898
return Styles{
8999
Snippets: SnippetsStyle{
90100
Focused: SnippetsBaseStyle{
91101
Base: lipgloss.NewStyle().Width(35),
92-
TitleBar: lipgloss.NewStyle().Background(blue).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1).Foreground(white),
93-
SelectedSubtitle: lipgloss.NewStyle().Foreground(blue),
94-
UnselectedSubtitle: lipgloss.NewStyle().Foreground(lipgloss.Color("237")),
102+
Title: lipgloss.NewStyle().Foreground(white),
103+
TitleBar: lipgloss.NewStyle().Background(blue).Foreground(white).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1),
104+
StatusBar: lipgloss.NewStyle().Foreground(status).MaxWidth(35-2).Margin(1, 2),
95105
SelectedTitle: lipgloss.NewStyle().Foreground(brightBlue),
96-
UnselectedTitle: lipgloss.NewStyle().Foreground(gray),
97-
CopiedTitleBar: lipgloss.NewStyle().Background(green).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1).Foreground(white),
106+
UnselectedTitle: lipgloss.NewStyle().Foreground(brightGray),
107+
SelectedSubtitle: lipgloss.NewStyle().Foreground(blue),
108+
UnselectedSubtitle: lipgloss.NewStyle().Foreground(gray),
98109
CopiedTitle: lipgloss.NewStyle().Foreground(brightGreen),
110+
CopiedTitleBar: lipgloss.NewStyle().Background(green).Foreground(white).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1),
99111
CopiedSubtitle: lipgloss.NewStyle().Foreground(green),
100-
DeletedTitleBar: lipgloss.NewStyle().Background(red).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1).Foreground(white),
101112
DeletedTitle: lipgloss.NewStyle().Foreground(brightRed),
113+
DeletedTitleBar: lipgloss.NewStyle().Background(red).Foreground(white).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1),
102114
DeletedSubtitle: lipgloss.NewStyle().Foreground(red),
103115
},
104116
Blurred: SnippetsBaseStyle{
105117
Base: lipgloss.NewStyle().Width(35),
106-
TitleBar: lipgloss.NewStyle().Background(black).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1).Foreground(gray),
118+
Title: lipgloss.NewStyle().Foreground(brightGray),
119+
TitleBar: lipgloss.NewStyle().Background(background).Foreground(brightGray).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1),
120+
StatusBar: lipgloss.NewStyle().Foreground(status).MaxWidth(35-2).Margin(1, 2),
121+
SelectedTitle: lipgloss.NewStyle().Foreground(brightBlue),
122+
UnselectedTitle: lipgloss.NewStyle().Foreground(gray),
107123
SelectedSubtitle: lipgloss.NewStyle().Foreground(blue),
108124
UnselectedSubtitle: lipgloss.NewStyle().Foreground(black),
109-
SelectedTitle: lipgloss.NewStyle().Foreground(brightBlue),
110-
UnselectedTitle: lipgloss.NewStyle().Foreground(lipgloss.Color("237")),
111-
CopiedTitleBar: lipgloss.NewStyle().Background(green).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1),
112125
CopiedTitle: lipgloss.NewStyle().Foreground(brightGreen),
126+
CopiedTitleBar: lipgloss.NewStyle().Background(green).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1),
113127
CopiedSubtitle: lipgloss.NewStyle().Foreground(green),
114-
DeletedTitleBar: lipgloss.NewStyle().Background(red).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1),
115128
DeletedTitle: lipgloss.NewStyle().Foreground(brightRed),
129+
DeletedTitleBar: lipgloss.NewStyle().Background(red).Width(35-2).Margin(0, 1, 1, 1).Padding(0, 1),
116130
DeletedSubtitle: lipgloss.NewStyle().Foreground(red),
117131
},
118132
},
119133
Folders: FoldersStyle{
120134
Focused: FoldersBaseStyle{
121135
Base: lipgloss.NewStyle().Width(22),
122-
Title: lipgloss.NewStyle().Padding(0, 1).Foreground(white),
136+
Title: lipgloss.NewStyle().Foreground(white).Padding(0, 1),
123137
TitleBar: lipgloss.NewStyle().Background(blue).Width(22-2).Margin(0, 1, 1, 1),
124138
Selected: lipgloss.NewStyle().Foreground(brightBlue),
125-
Unselected: lipgloss.NewStyle().Foreground(gray),
139+
Unselected: lipgloss.NewStyle().Foreground(brightGray),
126140
},
127141
Blurred: FoldersBaseStyle{
128142
Base: lipgloss.NewStyle().Width(22),
129-
Title: lipgloss.NewStyle().Padding(0, 1).Foreground(gray),
130-
TitleBar: lipgloss.NewStyle().Background(black).Width(22-2).Margin(0, 1, 1, 1),
143+
Title: lipgloss.NewStyle().Foreground(brightGray).Padding(0, 1),
144+
TitleBar: lipgloss.NewStyle().Background(background).Width(22-2).Margin(0, 1, 1, 1),
131145
Selected: lipgloss.NewStyle().Foreground(brightBlue),
132-
Unselected: lipgloss.NewStyle().Foreground(lipgloss.Color("237")),
146+
Unselected: lipgloss.NewStyle().Foreground(gray),
133147
},
134148
},
135149
Content: ContentStyle{
136150
Focused: ContentBaseStyle{
137151
Base: lipgloss.NewStyle().Margin(0, 1),
138152
Title: lipgloss.NewStyle().Background(blue).Foreground(white).Margin(0, 0, 1, 1).Padding(0, 1),
139153
Separator: lipgloss.NewStyle().Foreground(white).Margin(0, 0, 1, 1),
140-
LineNumber: lipgloss.NewStyle().Foreground(brightBlack),
141-
EmptyHint: lipgloss.NewStyle().Foreground(gray),
154+
LineNumber: lipgloss.NewStyle().Foreground(gray),
155+
EmptyHint: lipgloss.NewStyle().Foreground(brightGray),
142156
EmptyHintKey: lipgloss.NewStyle().Foreground(brightBlue),
143157
},
144158
Blurred: ContentBaseStyle{
145159
Base: lipgloss.NewStyle().Margin(0, 1),
146-
Title: lipgloss.NewStyle().Background(black).Foreground(gray).Margin(0, 0, 1, 1).Padding(0, 1),
147-
Separator: lipgloss.NewStyle().Foreground(gray).Margin(0, 0, 1, 1),
160+
Title: lipgloss.NewStyle().Background(background).Foreground(brightGray).Margin(0, 0, 1, 1).Padding(0, 1),
161+
Separator: lipgloss.NewStyle().Foreground(brightGray).Margin(0, 0, 1, 1),
148162
LineNumber: lipgloss.NewStyle().Foreground(black),
149-
EmptyHint: lipgloss.NewStyle().Foreground(gray),
163+
EmptyHint: lipgloss.NewStyle().Foreground(brightGray),
150164
EmptyHintKey: lipgloss.NewStyle().Foreground(brightBlue),
151165
},
152166
},

0 commit comments

Comments
 (0)