design_element_state.md

@@ -6,11 +6,10 @@ Different 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
-
-
-Grid item
+- active: some buttons acts as as a toggle, which can be activated or de-activated
+- disabled: the button can't be accessed
 
+= Grid item
 
 | state  | light | dark |
 | ------ |------ | ------ |
@@ -22,7 +21,7 @@ Grid item
 | selected + hover/focus | ![Screenshot_20210421_165323](uploads/99662f78549dc859792a1fafe181e687/Screenshot_20210421_165323.png) | ![Screenshot_20210421_165531](uploads/e093dbdc0eaf8bbf0f5e164c0c486104/Screenshot_20210421_165531.png) |
 
 
-List item
+= List item
 
 
 | state  | light  | dark |
@@ -36,7 +35,7 @@ List item
 
 
 
-Tab bar button
+= Tab bar button
 
 | state  | light  | dark |
 | ------ |------ | ------ |
@@ -48,7 +47,7 @@ Tab bar button
 
 
 
-Playlist
+= Playlist
 
 | state  | dark  | light |
 | ------ |------ | ------ |
@@ -60,6 +59,26 @@ Playlist
 | selected + hover/focus |![Screenshot_20210421_171727](uploads/7d6def03a6f34846ff765265480c7471/Screenshot_20210421_171727.png) |![Screenshot_20210421_172054](uploads/745ce157e5777768223bbca199d541df/Screenshot_20210421_172054.png)
 
 
+= playlist buttons
+
+| state  | light  | dark |
+| ------ |------ | ------ |
+| normal | ![Screenshot_20210421_180455](uploads/f7e8ebdd3aeb9d2bee9a94a96ae9530c/Screenshot_20210421_180455.png) | ![Screenshot_20210421_180657](uploads/8723a3f8957a265f9aa1e0685507746a/Screenshot_20210421_180657.png)
+| hover  |![Screenshot_20210421_180509](uploads/f9bc13fa7a8b428ef9ec1e1f55a7860b/Screenshot_20210421_180509.png) | ![Screenshot_20210421_180728](uploads/47b628e783631f94b9798d48218e6241/Screenshot_20210421_180728.png)
+| active | ![Screenshot_20210421_180531](uploads/fab9f4051e42f097c0aed98b0395e602/Screenshot_20210421_180531.png) | ![Screenshot_20210421_180752](uploads/fea9feaa4990674d431a6422fc633138/Screenshot_20210421_180752.png)
+| hover + active  |![Screenshot_20210421_180509](uploads/f9bc13fa7a8b428ef9ec1e1f55a7860b/Screenshot_20210421_180509.png) | ![Screenshot_20210421_180859](uploads/627c3be18f0772a3cdecd8e264a42220/Screenshot_20210421_180859.png)
+| disabled | ![Screenshot_20210421_180455](uploads/f7e8ebdd3aeb9d2bee9a94a96ae9530c/Screenshot_20210421_180455.png) | ![Screenshot_20210421_180657](uploads/8723a3f8957a265f9aa1e0685507746a/Screenshot_20210421_180657.png)
+
+
+= drop-down
+
+fewer state possible only active, and hovered/focused: 
+
+light
+![Screenshot_20210421_181136](uploads/31b6df8a8bc7203303b4770599d980a3/Screenshot_20210421_181136.png)
+dark
+![Screenshot_20210421_181103](uploads/896afd04d863386c0cab12c9f3d309ce/Screenshot_20210421_181103.png)
+
 
 
 | state  | light  | dark |