fix/improve skins in website

add the hjson parts. Add the missing styles for
preview and stage

5 files changed, 218 insertions, 37 deletions

diff --git a/website/docs/img/20210424-gruvbox-sdp.png b/website/docs/img/20210424-gruvbox-sdp.png
new file mode 100644
index 0000000..e34e021
--- /dev/null
+++ b/website/docs/img/20210424-gruvbox-sdp.png
diff --git a/website/docs/img/20210424-mycnf.png b/website/docs/img/20210424-mycnf.png
new file mode 100644
index 0000000..b981f66
--- /dev/null
+++ b/website/docs/img/20210424-mycnf.png
diff --git a/website/docs/index.md b/website/docs/index.md
index 1cc833b..3337b0f 100644
--- a/website/docs/index.md
+++ b/website/docs/index.md
@@ -42,7 +42,7 @@ Most useful keys for this:
 
 # Never lose track of file hierarchy while you search
 
-![search](img/20210204-mycnf.png)
+![search](img/20210424-mycnf.png)
 
 broot tries to select the most relevant file. You can still go from one match to another one using <kbd>tab</kbd> or arrow keys.
 
@@ -105,7 +105,7 @@ If your terminal is [kitty](https://sw.kovidgoyal.net/kitty/index.html), then th
 
 ![kitty preview](img/20201127-kitty-preview.png)
 
-# Apply a standard or personal shortcut to a file
+# Apply a standard or personal command to a file
 
 ![size](img/20191112-edit.png)
 
diff --git a/website/docs/skins.md b/website/docs/skins.md
index 8cd7539..846b313 100644
--- a/website/docs/skins.md
+++ b/website/docs/skins.md
@@ -30,6 +30,73 @@ From there, keeping or not the default colors, you may define a whole skin.
 
 For example:
 
+```Hjson
+skin: {
+	default: gray(23) none / gray(20) none
+	tree: ansi(94) None / gray(3) None
+	file: gray(20) None / gray(15) None
+	directory: ansi(208) None Bold / ansi(172) None bold
+	exe: Cyan None
+	link: Magenta None
+	pruning: gray(12) None Italic
+	perm__: gray(5) None
+	perm_r: ansi(94) None
+	perm_w: ansi(132) None
+	perm_x: ansi(65) None
+	owner: ansi(138) None
+	group: ansi(131) None
+	count: ansi(136) gray(3)
+	dates: ansi(66) None
+	sparse: ansi(214) None
+	content_extract: ansi(29) None
+	content_match: ansi(34) None
+	git_branch: ansi(229) None
+	git_insertions: ansi(28) None
+	git_deletions: ansi(160) None
+	git_status_current: gray(5) None
+	git_status_modified: ansi(28) None
+	git_status_new: ansi(94) None Bold
+	git_status_ignored: gray(17) None
+	git_status_conflicted: ansi(88) None
+	git_status_other: ansi(88) None
+	selected_line: None gray(5) / None gray(4)
+	char_match: Yellow None
+	file_error: Red None
+	flag_label: gray(15) None
+	flag_value: ansi(208) None Bold
+	input: White None / gray(15) gray(2)
+	status_error: gray(22) ansi(124)
+	status_job: ansi(220) gray(5)
+	status_normal: gray(20) gray(3) / gray(2) gray(2)
+	status_italic: ansi(208) gray(3) / gray(2) gray(2)
+	status_bold: ansi(208) gray(3) Bold / gray(2) gray(2)
+	status_code: ansi(229) gray(3) / gray(2) gray(2)
+	status_ellipsis: gray(19) gray(1) / gray(2) gray(2)
+	purpose_normal: gray(20) gray(2)
+	purpose_italic: ansi(178) gray(2)
+	purpose_bold: ansi(178) gray(2) Bold
+	purpose_ellipsis: gray(20) gray(2)
+	scrollbar_track: gray(7) None / gray(4) None
+	scrollbar_thumb: gray(22) None / gray(14) None
+	help_paragraph: gray(20) None
+	help_bold: ansi(208) None Bold
+	help_italic: ansi(166) None
+	help_code: gray(21) gray(3)
+	help_headers: ansi(208) None
+	help_table_border: ansi(239) None
+	preview_title: gray(23) None / gray(21) None
+	preview: gray(20) gray(1) / gray(18) gray(2)
+	preview_line_number: gray(12) gray(3)
+	preview_match: None ansi(29)
+	hex_null: gray(11) None
+	hex_ascii_graphic: gray(18) None
+	hex_ascii_whitespace: ansi(143) None
+	hex_ascii_other: ansi(215) None
+	hex_non_ascii: ansi(167) None
+	staging_area_title: gray(22) None / gray(20) None
+	mode_command_mark: gray(5) ansi(204) Bold
+}
+```
 ```toml
 [skin]
 default = "gray(23) none / gray(20) none"
@@ -84,14 +151,17 @@ help_italic = "ansi(166) None"
 help_code = "gray(21) gray(3)"
 help_headers = "ansi(208) None"
 help_table_border = "ansi(239) None"
+preview_title = "gray(23) None / gray(21) None"
 preview = "gray(20) gray(1) / gray(18) gray(2)"
 preview_line_number = "gray(12) gray(3)"
-preview_match = "None ansi(29) Underlined"
-hex_null = "gray(10) None"
+preview_match = "None ansi(29)"
+hex_null = "gray(11) None"
 hex_ascii_graphic = "gray(18) None"
 hex_ascii_whitespace = "ansi(143) None"
 hex_ascii_other = "ansi(215) None"
 hex_non_ascii = "ansi(167) None"
+staging_area_title = "gray(22) None / gray(20) None"
+mode_command_mark = "gray(5) ansi(204) Bold"
 ```
 
 This would look like this:
@@ -156,6 +226,70 @@ This skin has a transparent main background and dark foreground colors.
 
 It is suitable if your terminal has a clear background.
 
+```Hjson
+skin: {
+	default: gray(1) None
+	tree: gray(7) None / gray(18) None
+	file: gray(3) None / gray(8) None
+	directory: ansi(25) None Bold / ansi(25) None
+	exe: ansi(130) None
+	link: Magenta None
+	pruning: gray(12) None Italic
+	perm__: gray(5) None
+	perm_r: ansi(94) None
+	perm_w: ansi(132) None
+	perm_x: ansi(65) None
+	owner: ansi(138) None
+	group: ansi(131) None
+	dates: ansi(66) None
+	sparse: ansi(214) None
+	git_branch: ansi(229) None
+	git_insertions: ansi(28) None
+	git_deletions: ansi(160) None
+	git_status_current: gray(5) None
+	git_status_modified: ansi(28) None
+	git_status_new: ansi(94) None Bold
+	git_status_ignored: gray(17) None
+	git_status_conflicted: ansi(88) None
+	git_status_other: ansi(88) None
+	selected_line: None gray(19) / None gray(21)
+	char_match: ansi(22) None
+	file_error: Red None
+	flag_label: gray(9) None
+	flag_value: ansi(166) None Bold
+	input: gray(1) None / gray(4) gray(20)
+	status_error: gray(22) ansi(124)
+	status_normal: gray(2) gray(20)
+	status_job: ansi(220) gray(5)
+	status_italic: ansi(166) gray(20)
+	status_bold: ansi(166) gray(20)
+	status_code: ansi(17) gray(20)
+	status_ellipsis: gray(19) gray(15)
+	purpose_normal: gray(20) gray(2)
+	purpose_italic: ansi(178) gray(2)
+	purpose_bold: ansi(178) gray(2) Bold
+	purpose_ellipsis: gray(20) gray(2)
+	scrollbar_track: gray(20) none
+	scrollbar_thumb: ansi(238) none
+	help_paragraph: gray(2) none
+	help_bold: ansi(202) none bold
+	help_italic: ansi(202) none italic
+	help_code: gray(5) gray(22)
+	help_headers: ansi(202) none
+	help_table_border: ansi(239) None
+	preview_title: gray(3) None / gray(5) None
+	preview: gray(5) gray(23) / gray(7) gray(23)
+	preview_line_number: gray(6) gray(20)
+	preview_match: None ansi(29) Underlined
+	hex_null: gray(15) None
+	hex_ascii_graphic: gray(2) None
+	hex_ascii_whitespace: ansi(143) None
+	hex_ascii_other: ansi(215) None
+	hex_non_ascii: ansi(167) None
+	staging_area_title: gray(8) None / gray(13) None
+	mode_command_mark: gray(15) ansi(204) Bold
+}
+```
 ```toml
 [skin]
 default = "gray(1) None"
@@ -207,6 +341,7 @@ help_italic = "ansi(202) none italic"
 help_code = "gray(5) gray(22)"
 help_headers = "ansi(202) none"
 help_table_border = "ansi(239) None"
+preview_title = "gray(3) None / gray(5) None"
 preview = "gray(5) gray(23) / gray(7) gray(23)"
 preview_line_number = "gray(6) gray(20)"
 preview_match = "None ansi(29) Underlined"
@@ -215,21 +350,31 @@ hex_ascii_graphic = "gray(2) None"
 hex_ascii_whitespace = "ansi(143) None"
 hex_ascii_other = "ansi(215) None"
 hex_non_ascii = "ansi(167) None"
+staging_area_title = "gray(8) None / gray(13) None"
+mode_command_mark = "gray(15) ansi(204) Bold"
 ```
 
 ![light skin](img/20200526-light-skin.png)
 
-When using this skin in a light terminal, it's recommended to also use a light syntax theme in previews, which can be done by uncommenting this line at the top of the config file:
+When using this skin in a light terminal, it's recommended to also use a light syntax theme in previews, for example:
 
+```Hjson
+syntax_theme: base16-ocean.light
 ```
+```TOML
+# be careful that in TOML this can't be put after the skin,
+# it should be near the start of the file
 syntax_theme = "base16-ocean.light"
 ```
 
-
 # Solarized Dark
 
 *contributed by [@danieltrautmann](https://github.com/danieltrautmann)*
 
+![default](img/skins/solarized_dark/default.png)
+
+![default](img/skins/solarized_dark/panels.png)
+
 The Solarized Dark skin uses RGB values, so it might not work well with some
 terminals. It was tested with iTerm2 3.3 on macOS Catalina with the reported
 terminal type `xterm-256color`. This can be set via:
@@ -241,6 +386,56 @@ Dark color scheme. The values are taken from
 [here](https://github.com/altercation/solarized#the-values). The term `default`
 in the comment refers to the skins default setting.
 
+```Hjson
+skin: {
+	default: "rgb(131, 148, 150) rgb(0, 43, 54) / rgb(131, 148, 150) rgb(7, 54, 66)"  // base0 base03 / base01 base02
+	tree: "rgb(88, 110, 117) none"                                                    // base01 default
+	file: "none none"                                                                 // default default
+	directory: "rgb(38, 139, 210) none bold"                                          // blue default bold
+	exe: "rgb(211, 1, 2) none"                                                        // red default
+	link: "rgb(211, 54, 130) none"                                                    // magenta default
+	pruning: "rgb(88, 110, 117) none italic"                                          // base01 default italic
+	perm__: "rgb(88, 110, 117) none"                                                  // base01 default
+	perm_r: "none none"                                                               // default default
+	perm_w: "none none"                                                               // default default
+	perm_x: "none none"                                                               // default default
+	owner: "rgb(88, 110, 117) none"                                                   // base01 default
+	group: "rgb(88, 110, 117) none"                                                   // base01 default
+	sparse: "none none"                                                               // default default
+	git_branch: "rgb(147, 161, 161) none"                                             // base1 default
+	git_insertions: "rgb(133, 153, 0) none"                                           // green default
+	git_deletions: "rgb(211, 1, 2) none"                                              // red default
+	git_status_current: "none none"                                                   // default default
+	git_status_modified: "rgb(181, 137, 0) none"                                      // yellow default
+	git_status_new: "rgb(133, 153, 0) none"                                           // green default
+	git_status_ignored: "rgb(88, 110, 117) none"                                      // base01 default
+	git_status_conflicted: "rgb(211, 1, 2) none"                                      // red default
+	git_status_other: "rgb(211, 1, 2) none"                                           // red default
+	selected_line: "none rgb(7, 54, 66)"                                              // default base02
+	char_match: "rgb(133, 153, 0) none underlined"                                    // green default underlined
+	file_error: "rgb(203, 75, 22) none italic"                                        // orange default italic
+	flag_label: "none none"                                                           // default default
+	flag_value: "rgb(181, 137, 0) none bold"                                          // yellow default bold
+	input: "none none"                                                                // default default
+	status_error: "rgb(203, 75, 22) rgb(7, 54, 66)"                                   // orange base02
+	status_job: "rgb(108, 113, 196) rgb(7, 54, 66) bold"                              // violet base02 bold
+	status_normal: "none rgb(7, 54, 66)"                                              // default base02
+	status_italic: "rgb(181, 137, 0) rgb(7, 54, 66)"                                  // yellow base02
+	status_bold: "rgb(147, 161, 161) rgb(7, 54, 66) bold"                             // base1 base02 bold
+	status_code: "rgb(108, 113, 196) rgb(7, 54, 66)"                                  // violet base02
+	status_ellipsis: "none rgb(7, 54, 66)"                                            // default base02
+	scrollbar_track: "rgb(7, 54, 66) none"                                            // base02 default
+	scrollbar_thumb: "none none"                                                      // default default
+	help_paragraph: "none none"                                                       // default default
+	help_bold: "rgb(147, 161, 161) none bold"                                         // base1 default bold
+	help_italic: "rgb(147, 161, 161) none italic"                                     // base1 default italic
+	help_code: "rgb(147, 161, 161) rgb(7, 54, 66)"                                    // base1 base02
+	help_headers: "rgb(181, 137, 0) none"                                             // yellow default
+	help_table_border: "none none"                                                    // default default
+	preview_title: "gray(20) rgb(0, 43, 54)"
+	staging_area_title: "gray(22) rgb(0, 43, 54)"
+}
+```
 ```toml
 [skin]
 default = "rgb(131, 148, 150) rgb(0, 43, 54) / rgb(131, 148, 150) rgb(7, 54, 66)"  # base0 base03 / base01 base02
@@ -287,35 +482,18 @@ help_italic = "rgb(147, 161, 161) none italic"
 help_code = "rgb(147, 161, 161) rgb(7, 54, 66)"                                    # base1 base02
 help_headers = "rgb(181, 137, 0) none"                                             # yellow default
 help_table_border = "none none"                                                    # default default
+preview_title = "gray(20) rgb(0, 43, 54)"
+staging_area_title = "gray(22) rgb(0, 43, 54)"
 ```
 
-**Default View**
-
-![default](img/skins/solarized_dark/default.png)
-
-**Search**
-
-![default](img/skins/solarized_dark/search.png)
-
-**Permissions**
-
-![default](img/skins/solarized_dark/perms.png)
-
-**Sizes**
-
-![default](img/skins/solarized_dark/sizes.png)
-
-**Panels**
-
-![default](img/skins/solarized_dark/panels.png)
 
 # Gruvbox
 
-*contributed by @basbebe and discussed [on this GitHub issue](https://github.com/Canop/broot/issues/335)*
+*Initially contributed by @basbebe*
 
-![gruvbox-search](img/20210204-mycnf.png)
+![gruvbox-search](img/20210424-mycnf.png)
 
-![Gruvbox-sdp](img/20210204-gruvbox-sdp.png)
+![Gruvbox-sdp](img/20210424-gruvbox-sdp.png)
 
 The Gruvbox skin uses RGB values, so it might not work well with some
 terminals.
@@ -325,7 +503,7 @@ skin: {
 	default: rgb(235, 219, 178) rgb(40, 40, 40) / rgb(189, 174, 147) rgb(40, 40, 40)
 	tree: rgb(168, 153, 132) None / rgb(102, 92, 84) None
 	file: None None / None  None Italic
-	directory: rgb(69, 133, 136) None Bold / rgb(131, 165, 152) None
+	directory: rgb(131, 165, 152) None Bold / rgb(131, 165, 152) None
 	exe: rgb(184, 187, 38) None
 	link: rgb(104, 157, 106) None
 	pruning: rgb(124, 111, 100) None Italic
@@ -374,6 +552,7 @@ skin: {
 	help_code: rgb(142, 192, 124) rgb(50, 48, 47)
 	help_headers: rgb(254, 128, 25) None Bold
 	help_table_border: rgb(80, 73, 69) None
+	preview_title: rgb(235, 219, 178) rgb(40, 40, 40) / rgb(189, 174, 147) rgb(40, 40, 40)
 	preview: rgb(235, 219, 178) rgb(40, 40, 40) / rgb(235, 219, 178) rgb(40, 40, 40)
 	preview_line_number: rgb(124, 111, 100) None / rgb(124, 111, 100) rgb(40, 40, 40)
 	preview_match: None rgb(80, 73, 69) Bold
@@ -382,6 +561,8 @@ skin: {
 	hex_ascii_whitespace: rgb(152, 151, 26) None
 	hex_ascii_other: rgb(254, 128, 25) None
 	hex_non_ascii: rgb(214, 93, 14) None
+	staging_area_title: rgb(235, 219, 178) rgb(40, 40, 40) / rgb(189, 174, 147) rgb(40, 40, 40)
+	mode_command_mark: gray(5) ansi(204) Bold
 }
 ```
 
diff --git a/website/docs/vim_mode.md b/website/docs/vim_mode.md
index 140d8cf..7736193 100644
--- a/website/docs/vim_mode.md
+++ b/website/docs/vim_mode.md
@@ -1,10 +1,14 @@
 
+# Why
 
-# Warnings
+The "modal mode", which may be familiar to vim users, changes a little the way you interact with broot:
 
-1. DON'T activate this mode until you really tried broot. Broot isn't a text editor and can't be confused with one. This mode may be more comfortable when you constantly jump from vim to broot but only after you understood how broot works.
-1. This isn't really about a "vim mode". This is about a "modal mode" in which single letter key shortcuts are possible because the input at the bottom isn't always focused. You may devise single letter shortcuts without taking inspiration in vim
-1. You may be an avid vim user, as I am, and still prefer not to use modality in broot. Starting in *command* mode means you have one more letter to type before searching, because search is done in *input* mode. And broot is search oriented and often used in very short sessions (less than 5 seconds from intent to launch to being back in the shell in the right directory or editing the right file in your favorite editor)
+- The input at the bottom isn't immediately focused, you must type a space, a `:`, or a `/` to focus it. And you unfocus it with the escape key.
+- The upside is you can use keyboard shortcuts without <kbd>ctrl</kbd>, for example you may move the selection with <kbd>j</kbd> and <kbd>k</kbd>.
+- The downside is you have one letter more to type to start searching, which isn't to dismiss as searching is usually the first thing you do in broot.
+
+I recommand you **don't** activate this mode until you really tried broot. Broot isn't a text editor and can't be confused with one. This mode may be more comfortable when you constantly jump from vim to broot but only after you understood how broot works.
+You may be an avid vim user, as I am, and still prefer not to use modality in broot. Starting in *command* mode means you have one more letter to type before searching, because search is done in *input* mode. And broot is search oriented and often used in very short sessions (less than 5 seconds from intent to launch to being back in the shell in the right directory or editing the right file in your favorite editor)
 
 # Configuration
 
@@ -34,7 +38,3 @@ In *command* mode, you'll find those keys already configured:
 
 You enter *input* mode by typing one of those letters: ` ` (space), `:`, or `/`. You leave it with the `escape` key. You may add other bindings to the `:mode_input` and `:mode_command` verbs.
 
-
-# Experimentation
-
-This "modal mode" is still experimental. If you tried it, or use it, I'd like your feedback on [Miaou](https://miaou.dystroy.org/3490).