From 3e11dc2327d70e860b3ad32db386aadd549393b3 Mon Sep 17 00:00:00 2001 From: Phil Jones Date: Mon, 21 Nov 2022 23:08:51 +0000 Subject: Overhaul text theming. Each piece of text is now individually themable, with foreground and background colours and optionally rounded background corners. --- doc/config | 81 +++++++++++++++++++++------- doc/tofi.5.md | 163 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ doc/tofi.5.scd | 129 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 355 insertions(+), 18 deletions(-) (limited to 'doc') diff --git a/doc/config b/doc/config index 3e28eac..a008fbd 100644 --- a/doc/config +++ b/doc/config @@ -45,32 +45,71 @@ hint-font = true # -### Colors +### Text theming # - # Window background - background-color = #1B1D1E - - # Border outlines - outline-color = #080800 + # Default text color + # + # All text defaults to this color if not otherwise specified. + text-color = #FFFFFF - # Border - border-color = #F92672 + # All pieces of text have the same theming attributes available: + # + # *-color + # Foreground color + # + # *-background + # Background color + # + # *-background-padding + # Background padding in pixels (comma-delimited, CSS-style list). + # See "DIRECTIONAL VALUES" under `man 5 tofi` for more info. + # + # *-background-corner-radius + # Radius of background box corners in pixels - # Default text - text-color = #FFFFFF + # Prompt text theme + # prompt-color = #FFFFFF + prompt-background = #00000000 + prompt-background-padding = 0 + prompt-background-corner-radius = 0 - # Placeholder input text + # Placeholder text theme placeholder-color = #FFFFFFA8 + placeholder-background = #00000000 + placeholder-background-padding = 0 + placeholder-background-corner-radius = 0 + + # Input text theme + # input-color = #FFFFFF + input-background = #00000000 + input-background-padding = 0 + input-background-corner-radius = 0 + + # Default result text theme + # default-result-color = #FFFFFF + default-result-background = #00000000 + default-result-background-padding = 0 + default-result-background-corner-radius = 0 + + # Alternate (even-numbered) result text theme + # + # If unspecified, these all default to the corresponding + # default-result-* attribute. + # + # alternate-result-color = #FFFFFF + # alternate-result-background = #00000000 + # alternate-result-background-padding = 0 + # alternate-result-background-corner-radius = 0 # Selection text selection-color = #F92672 + selection-background = #00000000 + selection-background-padding = 0 + selection-background-corner-radius = 0 # Matching portion of selection text selection-match-color = #00000000 - # Selection background - selection-background = #00000000 - # ### Text layout # @@ -96,22 +135,28 @@ # Minimum width of input in horizontal mode. min-input-width = 0 - # Extra horizontal padding of the selection background in pixels. - selection-padding = 0 - # -### Window layout +### Window theming # # Width and height of the window. Can be pixels or a percentage. width = 1280 height = 720 + # Window background color + background-color = #1B1D1E + # Width of the border outlines in pixels. outline-width = 4 + # Border outline color + outline-color = #080800 + # Width of the border in pixels. border-width = 12 + # Border color + border-color = #F92672 + # Radius of window corners in pixels. corner-radius = 0 diff --git a/doc/tofi.5.md b/doc/tofi.5.md index e5f947b..d87e232 100644 --- a/doc/tofi.5.md +++ b/doc/tofi.5.md @@ -222,6 +222,31 @@ options. > > Default: 0 +**prompt-color**=*color* + +> Color of prompt text. See **COLORS** for more information. +> +> Default: Same as **text-color** + +**prompt-background**=*color* + +> Background color of prompt. See **COLORS** for more information. +> +> Default: \#00000000 + +**prompt-background-padding**=*directional* + +> Extra padding of the prompt background. See **DIRECTIONAL VALUES** for +> more information. +> +> Default: 0 + +**prompt-background-corner-radius**=*px* + +> Corner radius of the prompt background. +> +> Default: 0 + **placeholder-text**=*string* > Placeholder input text. @@ -234,6 +259,104 @@ options. > > Default: \#FFFFFFA8 +**placeholder-background**=*color* + +> Background color of placeholder input text. See **COLORS** for more +> information. +> +> Default: \#00000000 + +**placeholder-background-padding**=*directional* + +> Extra padding of the placeholder input text background. See +> **DIRECTIONAL** VALUES for more information. +> +> Default: 0 + +**placeholder-background-corner-radius**=*px* + +> Corner radius of the placeholder input text background. +> +> Default: 0 + +**input-color**=*color* + +> Color of input text. See **COLORS** for more information. +> +> Default: Same as **text-color** + +**input-background**=*color* + +> Background color of input. See **COLORS** for more information. +> +> Default: \#00000000 + +**input-background-padding**=*directional* + +> Extra padding of the input background. See **DIRECTIONAL VALUES** for +> more information. +> +> Default: 0 + +**input-background-corner-radius**=*px* + +> Corner radius of the input background. +> +> Default: 0 + +**default-result-color**=*color* + +> Default color of result text. See **COLORS** for more information. +> +> Default: Same as **text-color** + +**default-result-background**=*color* + +> Default background color of results. See **COLORS** for more +> information. +> +> Default: \#00000000 + +**default-result-background-padding**=*directional* + +> Default extra padding of result backgrounds. See **DIRECTIONAL +> VALUES** for more information. +> +> Default: 0 + +**default-result-background-corner-radius**=*px* + +> Default corner radius of result backgrounds. +> +> Default: 0 + +**alternate-result-color**=*color* + +> Color of alternate (even-numbered) result text. See **COLORS** for +> more information. +> +> Default: same as **default-result-color** + +**alternate-result-background**=*color* + +> Background color of alternate (even-numbered) results. See **COLORS** +> for more information. +> +> Default: same as **default-result-background** + +**alternate-result-background-padding**=*directional* + +> Extra padding of alternate (even-numbered) result backgrounds. See +> **DIRECTIONAL VALUES** for more information. +> +> Default: same as **default-result-background-padding** + +**alternate-result-background-corner-radius**=*px* + +> Corner radius of alternate (even-numbered) result backgrounds. +> +> Default: same as **default-result-background-corner-radius** + **num-results**=*n* > Maximum number of results to display. If *n* = 0, tofi will draw as @@ -258,6 +381,10 @@ options. **selection-padding**=*px* +> **WARNING**: This option is deprecated, and will be removed in a +> future version of tofi. You should use the +> **selection-background-padding** option instead. +> > Extra horizontal padding of the selection background. If *px* = -1, > the padding will fill the whole window width. > @@ -270,6 +397,17 @@ options. > > Default: \#00000000 +**selection-background-padding**=*directional* + +> Extra padding of the selected result background. See **DIRECTIONAL +> VALUES** for more information. +> +> Default: 0 + +**selection-background-corner-radius**=*px* + +> Corner radius of the selected result background. Default: 0 + **result-spacing**=*px* > Spacing between results. Can be negative. @@ -421,6 +559,31 @@ Some pixel values can optionally have a % suffix, like so: This will be interpreted as a percentage of the screen resolution in the relevant direction. +# DIRECTIONAL VALUES + +The background box padding of a type of text can be specified by one to +four comma separated values, with meanings similar to the CSS padding +property: + +> · +> +> One value sets all edges. + +> · +> +> Two values set (top & bottom), (left & right) edges. + +> · +> +> Three values set (top), (left & right), (bottom) edges. + +> · +> +> Four values set (top), (right), (bottom), (left) edges. + +Specifying -1 for any of the values will pad as far as possible in that +direction. + # AUTHORS Philip Jones \ diff --git a/doc/tofi.5.scd b/doc/tofi.5.scd index acdb16a..53bdc68 100644 --- a/doc/tofi.5.scd +++ b/doc/tofi.5.scd @@ -191,6 +191,27 @@ options. Default: 0 +*prompt-color*=_color_ + Color of prompt text. See *COLORS* for more information. + + Default: Same as *text-color* + +*prompt-background*=_color_ + Background color of prompt. See *COLORS* for more information. + + Default: #00000000 + +*prompt-background-padding*=_directional_ + Extra padding of the prompt background. See *DIRECTIONAL VALUES* for more + information. + + Default: 0 + +*prompt-background-corner-radius*=_px_ + Corner radius of the prompt background. + + Default: 0 + *placeholder-text*=_string_ Placeholder input text. @@ -201,6 +222,88 @@ options. Default: #FFFFFFA8 +*placeholder-background*=_color_ + Background color of placeholder input text. See *COLORS* for more + information. + + Default: #00000000 + +*placeholder-background-padding*=_directional_ + Extra padding of the placeholder input text background. See *DIRECTIONAL + VALUES* for more information. + + Default: 0 + +*placeholder-background-corner-radius*=_px_ + Corner radius of the placeholder input text background. + + Default: 0 + +*input-color*=_color_ + Color of input text. See *COLORS* for more information. + + Default: Same as *text-color* + +*input-background*=_color_ + Background color of input. See *COLORS* for more information. + + Default: #00000000 + +*input-background-padding*=_directional_ + Extra padding of the input background. See *DIRECTIONAL VALUES* for more + information. + + Default: 0 + +*input-background-corner-radius*=_px_ + Corner radius of the input background. + + Default: 0 + +*default-result-color*=_color_ + Default color of result text. See *COLORS* for more information. + + Default: Same as *text-color* + +*default-result-background*=_color_ + Default background color of results. See *COLORS* for more information. + + Default: #00000000 + +*default-result-background-padding*=_directional_ + Default extra padding of result backgrounds. See *DIRECTIONAL VALUES* for + more information. + + Default: 0 + +*default-result-background-corner-radius*=_px_ + Default corner radius of result backgrounds. + + Default: 0 + +*alternate-result-color*=_color_ + Color of alternate (even-numbered) result text. See *COLORS* for more + information. + + Default: same as *default-result-color* + +*alternate-result-background*=_color_ + Background color of alternate (even-numbered) results. See *COLORS* for more + information. + + Default: same as *default-result-background* + +*alternate-result-background-padding*=_directional_ + Extra padding of alternate (even-numbered) result backgrounds. See + *DIRECTIONAL VALUES* for more information. + + Default: same as *default-result-background-padding* + +*alternate-result-background-corner-radius*=_px_ + Corner radius of alternate (even-numbered) result backgrounds. + + Default: same as *default-result-background-corner-radius* + *num-results*=_n_ Maximum number of results to display. If _n_ = 0, tofi will draw as many results as it can fit in the window. @@ -221,6 +324,9 @@ options. Default: #00000000 *selection-padding*=_px_ + *WARNING*: This option is deprecated, and will be removed in a future version + of tofi. You should use the *selection-background-padding* option instead. + Extra horizontal padding of the selection background. If _px_ = -1, the padding will fill the whole window width. @@ -231,6 +337,16 @@ options. Default: #00000000 +*selection-background-padding*=_directional_ + Extra padding of the selected result background. See *DIRECTIONAL VALUES* for + more information. + + Default: 0 + +*selection-background-corner-radius*=_px_ + Corner radius of the selected result background. + Default: 0 + *result-spacing*=_px_ Spacing between results. Can be negative. @@ -362,6 +478,19 @@ Some pixel values can optionally have a % suffix, like so: This will be interpreted as a percentage of the screen resolution in the relevant direction. +# DIRECTIONAL VALUES + +The background box padding of a type of text can be specified by one to four +comma separated values, with meanings similar to the CSS padding property: + +- One value sets all edges. +- Two values set (top & bottom), (left & right) edges. +- Three values set (top), (left & right), (bottom) edges. +- Four values set (top), (right), (bottom), (left) edges. + +Specifying -1 for any of the values will pad as far as possible in that +direction. + # AUTHORS Philip Jones -- cgit v1.2.3