design_element_state.md

+Different states:
+
+- normal: item is in none of below states 
+- selected: item is part of a selection
+- hover: mouse is over the component
+- focused: keyboard has the focus on the element, only one element in the interface can have the focus
+- enabled: some buttons acts as as a toggle, which can be activated or disabled
+
+what folows represent the current state of the application 
+
+Tab bar button
+
+| state  | dark  | light |
+| ------ |------ | ------ |
+| normal | ![Screenshot_20210421_164321](uploads/2c8a4d0c28e3e1828e9b4aaf787a1d7e/Screenshot_20210421_164321.png) | ![Screenshot_20210421_164246](uploads/98acfbdceb6a286868591fbf273e3de9/Screenshot_20210421_164246.png) |
+| hover | ![Screenshot_20210421_164454](uploads/26c2cd3b50fede78985a630fb19037a8/Screenshot_20210421_164454.png) | ![Screenshot_20210421_164348](uploads/40351304cb7a3881a31720fb48d5c0af/Screenshot_20210421_164348.png) |
+| focused | ![Screenshot_20210421_164551](uploads/d0559acb57332e442f3f2f47f610e538/Screenshot_20210421_164551.png) | ![Screenshot_20210421_164631](uploads/43d6bf133b0a8cef50b4a84f1968c17e/Screenshot_20210421_164631.png) |
+| focused+hover | ![Screenshot_20210421_164454](uploads/26c2cd3b50fede78985a630fb19037a8/Screenshot_20210421_164454.png) | ![Screenshot_20210421_164348](uploads/40351304cb7a3881a31720fb48d5c0af/Screenshot_20210421_164348.png) |
+| active | ![Screenshot_20210421_164650](uploads/3cdd831385e7eee9be710ca37493bada/Screenshot_20210421_164650.png) |![Screenshot_20210421_164714](uploads/a2a4ae4112aa02a2cf07ad68c6eee2dd/Screenshot_20210421_164714.png) |
+
+
+