palette.md

+# VLC palette
+
+This document is a summary of the colors used in the VLC 4.0 desktop application. It sits between
+the Zeplin high level recommandations and the VLCColors source file. The idea is to have a complete
+listing of the components and their colors / opacity and try to harmonize them before merging them
+into generic colors in the final VLCColors file.
+
+## Colors
+
+| color      | light     | dark      |
+| ---------- | --------- | --------- |
+| accent     | `#ff610a` | `#ff8800` |
+| gridSelect | `#e5e5e5` | `#303030` |
+| listHover  | `#e9e9e9` | `#272727` |
+| tabHover   | `#f2f2f2` | `#303030` |
+| playlist   | `#666666` | `#a6a6a6` |
+| highlight  | `black`   | `white`   |
+| barDefault | `#999999` | `#6f6f6f` |
+| barHover   | `#4c4c4c` | `#b7b7b7` |
+| player     | `#484848` | `#e5e5e5` |
+| playA      | `#f89a06` | `#f89a06` |
+| playB      | `#e25a01` | `#e25a01` |
+| action     | `#e65609` | `#e67a00` |
+| menuHover  | `#303030` | `#303030` |
+| menuSelect | `#2a2a2a` | `#2a2a2a` |
+
+## VideoGrid item
+
+- https://app.zeplin.io/project/5e271dc7628e287e59163571/screen/60869b5dee153a115416d2a0
+- GridItem.qml
+
+![gridItem](pictures/components/gridItem.png)
+
+| state     | color        | light     | dark      |
+| --------- | ------------ | --------- | --------- |
+| select    | `gridSelect` | `#e5e5e5` | `#303030` |
+| border    | `accent`     | `#ff610a` | `#ff8800` |
+
+## VideoList item
+
+- https://app.zeplin.io/project/5e271dc7628e287e59163571/screen/60869b5d7e303110e3168d19
+- TableViewDelegate.qml
+
+![listItem](pictures/components/listItem.png)
+
+| state     | color        | light     | dark      |
+| --------- | ------------ | --------- | --------- |
+| hover     | `listHover`  | `#e9e9e9` | `#272727` |
+| select    | `gridSelect` | `#e5e5e5` | `#303030` |
+
+## TabBar button
+
+- https://app.zeplin.io/project/5e271dc7628e287e59163571/screen/60869b5d7ee2251628a8caa4
+- BannerTabButton.qml
+
+![tabBar](pictures/components/tabBar.png)
+
+| state     | color        | light     | dark      |
+| --------- | ------------ | --------- | --------- |
+| hover     | `tabHover`   | `#f2f2f2` | `#303030` |
+| border    | `accent`     | `#ff610a` | `#ff8800` |
+
+## Playlist item
+
+- https://app.zeplin.io/project/5e271dc7628e287e59163571/screen/60869b5ea716e3120f5e30e4
+- PlaylistDelegate.qml
+
+![playlist](pictures/components/playlist.png)
+
+| state     | color        | light     | dark      |
+| --------- | ------------ | --------- | --------- |
+| hover     | `listHover`  | `#e9e9e9` | `#272727` |
+| select    | `gridSelect` | `#e5e5e5` | `#303030` |
+
+## Playlist button
+
+- https://app.zeplin.io/project/5e271dc7628e287e59163571/screen/60869b63084a7012b374e2c1
+- IconToolButton.qml
+
+![playlistButton](pictures/components/playlistButton.png)
+
+| state     | color        | light     | dark      |
+| --------- | ------------ | --------- | --------- |
+| default   | `playlist`   | `#666666` | `#a6a6a6` |
+| hover     | `highlight`  | `black`   | `white`   |
+| active    | `accent`     | `#ff610a` | `#ff8800` |
+
+## Search bar
+
+- https://app.zeplin.io/project/5e271dc7628e287e59163571/screen/60869b60ded10e1804b076e3
+- DiscoverUrlDisplay.qml
+
+![searchBar](pictures/components/searchBar.png)
+
+| state     | color        | light     | dark      |
+| --------- | ------------ | --------- | --------- |
+| default   | `barDefault` | `#999999` | `#6f6f6f` |
+| hover     | `barHover`   | `#4c4c4c` | `#b7b7b7` |
+| focus     | `accent`     | `#ff610a` | `#ff8800` |
+
+## Player button
+
+- https://app.zeplin.io/project/5e271dc7628e287e59163571/screen/60869b63084a7012b374e2c1
+- IconControlButton.qml
+
+![playerButton](pictures/components/playerButton.png)
+
+| state     | color        | light     | dark      |
+| --------- | ------------ | --------- | --------- |
+| base      | `player`     | `#484848` | `#e5e5e5` |
+| hover     | `highlight`  | `black`   | `white`   |
+| active    | `accent`     | `#ff610a` | `#ff8800` |
+
+## Play button
+
+- https://app.zeplin.io/project/5e271dc7628e287e59163571/screen/60869b64fd3091146ef3800e
+- ControlButtons.qml
+
+![playButton](pictures/components/playButton.png)
+
+| state     | color        | light     | dark      |
+| --------- | ------------ | --------- | --------- |
+| gradientA | `playA`      | `#f89a06` | `#f89a06` |
+| gradientB | `playB`      | `#e25a01` | `#e25a01` |
+
+## Action button (level 1)
+
+- https://app.zeplin.io/project/5e271dc7628e287e59163571/screen/60869b6870f37312252080ef
+- TabButtonExt.qml
+
+![actionButton1](pictures/components/actionButton1.png)
+
+| state     | color        | light     | dark      |
+| --------- | ------------ | --------- | --------- |
+| default   | `accent`     | `#ff610a` | `#ff8800` |
+| hover     | `action`     | `#e65609` | `#e67a00` |
+
+## Action button (level 2)
+
+- https://app.zeplin.io/project/5e271dc7628e287e59163571/screen/60869b6870f37312252080ef
+- TabButtonExt.qml
+
+![actionButton2](pictures/components/actionButton2.png)
+
+| state     | color        | light     | dark      |
+| --------- | ------------ | --------- | --------- |
+| default   | `playlist`   | `#666666` | `#a6a6a6` |
+| hover     | `highlight`  | `black`   | `white`   |
+
+## Dropdown
+
+- https://app.zeplin.io/project/5e271dc7628e287e59163571/screen/6093af207e708132075e799e
+- SortControl.qml
+
+![dropdown](pictures/components/dropdown.png)
+
+| state     | color        | light     | dark      |
+| --------- | ------------ | --------- | --------- |
+| hover     | `listHover`  | `#e9e9e9` | `#272727` |
+
+## Track menu
+
+- https://app.zeplin.io/project/5e271dc7628e287e59163571/screen/6093af20763f0608f007031d
+- LanguageMenu.qml, CheckedDelegate.qml
+
+![trackMenu](pictures/components/trackMenu.png)
+
+| state     | color        | light     | dark      |
+| --------- | ------------ | --------- | --------- |
+| hover     | `menuHover`  | `#303030` | `#303030` |
+| select    | `menuSelect` | `#2a2a2a` | `#2a2a2a` |
+
+## Author
+
+Benjamin Arnaud | <bunjee@omega.gg>