Update documentation describing new theme format.

1 files changed, 77 insertions, 37 deletions

diff --git a/doc/themer.md b/doc/themer.md
index 46e12927..d8a3b943 100644
--- a/doc/themer.md
+++ b/doc/themer.md
@@ -1,67 +1,107 @@
+# Basic Organization 
 
 Each widget has:
 
-* Class: Type of widget. 
+## Class
+
+Class: Type of widget. 
 
 Example: textbox, scrollbar, separator
 
 Class are prefixed with a `@`
 
-* Name: Internal name of the widget.
-
-Sub-widgets are {Parent}.{Child}.
 
-Example: Listview, Listview.Even, Listview.Uneven, Listview.Scrollbar
+List of classes in **rofi**:
 
-Names are prefixed with a `#`
-
-* State: State of widget
-
-Optional flag(s) indicating state. 
-Multiple flags can be set.
+ * @textbox
+ * @scrollbar
+ * @window
+ * @separator
+ * @listview
+ * @box
 
-Example: Highlight Active Urgent 
+## Name
 
-States are prefixed with a `!` 
+Name: Internal name of the widget.
 
-So to set color of Even entry in listview that is highlighted and urgent:
+Sub-widgets are {Parent}.{Child}.
 
-`@textbox #Listview.Even !Urgent !Highlight` 
+Example: listview, listview.element, listview.scrollbar
 
-Or to indicate all textboxes
+Names are prefixed with a `#`
 
-`@textbox !Highlight`
+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.
+
+## State
+
+State: State of widget
 
-Class is manditory, name is optional. Name is split on .s.
+Optional flag(s) indicating state. 
 
+These are appended after the name or class of the widget.
 
-# Internally:
+`@textbox selected.normal` 
+`#listview.element selected.urgent` 
 
-The theme is represented like a tree:
+Currently only the @entrybox has states:
 
-class --> name --> name --> state -> state
+`{visible modifier}.{state}`
 
-The states are sorted alphabetically
+Where `visible modifier` can be:
+ * normal: No modification.
+ * selected: The entry is selected/highlighted by user.
+ * alternate: The entry is at an alternating row. (uneven row) 
 
-So  `@textbox #Listview.Even !Urgent !Highlight` becomes:
+Where `state` is:
+    * normal: No modification.
+    * urgent: This entry is marked urgent.
+    * activE: This entry is marked active.
 
-textbox->listview->even -> highlight -> urgent.
+These can be mixed.
 
-When searching for entries the tree is traversed until deepest node is found.
-Missing states are skipped.
-Then from there properties are searched going up again.
+Example:
+`
+@textbox selected.active { 
+    background: #003642;
+    foreground: #008ed4;
+}
+`
 
-Properties are in the form of:
+Sets all selected textboxes marked active to the given foreground and background color.
 
-`name: value`
-Each property ends with `;` 
-Each property has a type. (Boolean, Integer, String, Color)
+# File structure
 
-A block is enclosed by `{}`
+The file is structured as follow
+`
+/* Global properties, that apply as default to all widgets. */
+{list of properties}
 
-```
-@textbox #Listview.Even !Urgent !Highlight {
-   padding: 3;
-   foreground: #aarrggbb; 
+@{class} {optional state} {
+    {list of properties}
+}
+@{name}.{name} {optional state} {
+    {list of properties}
 }
-```
+`
+
+The global properties has to be at the top of the file, the rest can freeĺy be mixed.