Update themer.doc with latest theme changes.

1 files changed, 49 insertions, 76 deletions

diff --git a/doc/themer.md b/doc/themer.md
index 563af9fd..74e8ff1e 100644
--- a/doc/themer.md
+++ b/doc/themer.md
@@ -2,55 +2,38 @@
 
 Each widget has:
 
-## Class
-
-Class: Type of widget.
-
-Example: textbox, scrollbar, separator
-
-Class are prefixed with a `@`
-
-
-List of classes in **rofi**:
-
- * @textbox
- * @scrollbar
- * @window
- * @separator
- * @listview
- * @box
-
 ## Name
 
 Name: Internal name of the widget.
 
 Sub-widgets are {Parent}.{Child}.
 
-Example: listview, listview.element, listview.scrollbar
+Example: window, window.mainbox.listview, window.mainbox.listview.element
 
 Names are prefixed with a `#`
 
 List of names in **rofi**:
 
  * `#window`
- * `#mainbox`
-   * `#mainbox.box`: The main vertical @box
- * `#inputbar`
-   * `#inputbar.box`: The horizontal @box packing the widgets.
-   * `#inputbar.separator`: The separator under/above the inputbar.
-   * `#inputbar.case-indicator`: The case/sort indicator @textbox
-   * `#inputbar.prompt`: The prompt @textbox
-   * `#inputbar.entry`: The main entry @textbox
- * `#listview`
-    * `#listview.scrollbar`: The listview scrollbar
-    * `#listview.element`: The entries in the listview
- * `#sidebar`
-   * `#sidebar.box`: The main horizontal @box packing the buttons.
-   * `#sidebar.button`: The buttons @textbox for each mode.
-   * `#sidebar.separator`: The separator under/above the sidebar.
- * `#message`
-   * `#message.textbox`: The message textbox.
-   * `#message.separator`: The separator under/above the sidebar.
+    * `#window.overlay`: The overlay widget.
+    * `#window.mainbox`
+        * `#window.mainbox.box`: The main vertical @box
+         * `#window.mainbox.inputbar`
+           * `#window.mainbox.inputbar.box`: The horizontal @box packing the widgets.
+           * `#window.mainbox.inputbar.separator`: The separator under/above the inputbar.
+           * `#window.mainbox.inputbar.case-indicator`: The case/sort indicator @textbox
+           * `#window.mainbox.inputbar.prompt`: The prompt @textbox
+           * `#window.mainbox.inputbar.entry`: The main entry @textbox
+         * `#window.mainbox.listview`
+            * `#window.mainbox.listview.scrollbar`: The listview scrollbar
+            * `#window.mainbox.listview.element`: The entries in the listview
+         * `#window.mainbox.sidebar`
+           * `#window.mainbox.sidebar.box`: The main horizontal @box packing the buttons.
+           * `#window.mainbox.sidebar.button`: The buttons @textbox for each mode.
+           * `#window.mainbox.sidebar.separator`: The separator under/above the sidebar.
+         * `#window.mainbox.message`
+           * `#window.mainbox.message.textbox`: The message textbox.
+           * `#window.mainbox.message.separator`: The separator under/above the sidebar.
 
 ## State
 
@@ -60,11 +43,11 @@ Optional flag(s) indicating state.
 
 These are appended after the name or class of the widget.
 
-`@textbox selected.normal { }`
+`#window.mainbox.sidebar.button selected.normal { }`
 
-`#listview.element selected.urgent { }`
+`#window.mainbox.listview.element selected.urgent { }`
 
-Currently only the @entrybox has states:
+Currently only the entrybox and scrollbar has states:
 
 `{visible modifier}.{state}`
 
@@ -82,7 +65,7 @@ These can be mixed.
 
 Example:
 ```
-@textbox selected.active {
+#name.to.textbox selected.active {
     background: #003642;
     foreground: #008ed4;
 }
@@ -90,6 +73,9 @@ Example:
 
 Sets all selected textboxes marked active to the given foreground and background color.
 
+The scrollbar when drawing uses the `handle` state when drawing the small scrollbar handle.
+Allowing overriding of color.
+
 # File structure
 
 The file is structured as follows
@@ -98,15 +84,16 @@ The file is structured as follows
 /* Global properties, that apply as default to all widgets. */
 {list of properties}
 
-@{class} {optional state} {
+#{name} {optional state} {
     {list of properties}
 }
-@{name}.{name} {optional state} {
+#{name}.{optional state} {
     {list of properties}
 }
 ```
 
 The global properties an freeĺy be mixed between entries.
+Name and state can be separated by a comman, or joined using a dot.
 
 Each property is constructed like:
 ```
@@ -126,69 +113,55 @@ Value supports the following formats:
     * `argb:[0-0a-fA-F]{8}`: Old **rofi** argb color style.
     * `rgba\([0-9]{1,3},[0-9]{1,3}, [0-9]{1,3}, {double}\)`: css style rgba color.
     * `rgb\([0-9]{1,3},[0-9]{1,3}, [0-9]{1,3}\)`: css style rgb color.
+ * distance:
+    * `{size}{unit} {line-style}`
+       * unit can be px,em,%. for px `{size}` is an integer number, for %,em it is a positive real.
+       * {line-style} can be `dash` or `solid` and is optional.
+ * padding: `({distance}){1,4}`
 
 Each property is closed by a semi-colon `;`;
 
 The following properties are currently supports:
 
  * all widgets:
-    * spacing:         distance
     * padding:         distance
-    * padding:         distance distance
-    * padding:         distance distance distance
-    * padding:         distance distance distance distance
+    * margin:          distance
+    * border:          distance
+    * background:      color
+    * foreground:      color
+    * end:             boolean
 
  * window:
     * font:            string
-    * background:      color
-    * foreground:      color
-    * border-width:    integer
     * transparency:    string
         - real
         - background
         - screenshot
         - Path to png file
 
- * separator:
-    * line-style:      string
-    * foreground:      color
-
   * scrollbar
     * foreground:      color
+  * scrollbar handle
+    * foreground:      color
 
   * box
+    * spacing:         distance
 
- * textbox:
-   *  background:      color
-   *  foreground:      color
+  * textbox:
+    *  background:      color
+    *  foreground:      color
 
   * listview:
     * columns:         integer
     * fixed-height:    boolean
     * dynamic:         boolean
     * scrollbar:       boolean
-    * scrollbar-width: integer
+    * scrollbar-width: distance
     * cycle:           boolean
+    * spacing:         distance
 
 
 ## Resolving properties
 
-
-Current matching does:
-
- 1. Find exact name match, with exact state match.
-
-    If found return
-
- 1. Find exact class match, with exact state match.
-
-    If found return
-
- 1. Find fuzzy name match, with fuzzy state.
-
-    If found is not root node, return
-
- 1. Find fuzzy class match, with fuzzy state.
-
-    return
+It tries to find the longest match down the dependency tree.