Revert "Merge pull request #2353 from daschuer/lp1850644"

This reverts commit 35da91b786eb7979d4cacf1c7e650978c33ea499, reversing
changes made to 7b1f4d106b14b5be9bee1a2e3d192c07a5ec5055.

105 files changed, 1118 insertions, 777 deletions

diff --git a/build/depends.py b/build/depends.py
index 41c3a605a4..5298cf87b7 100644
--- a/build/depends.py
+++ b/build/depends.py
@@ -781,7 +781,6 @@ class MixxxCore(Feature):
                    "src/preferences/effectsettingsmodel.cpp",
                    "src/preferences/broadcastprofile.cpp",
                    "src/preferences/upgrade.cpp",
-                   "src/preferences/hotcuecolorpalettesettings.cpp",
                    "src/preferences/dlgpreferencepage.cpp",
 
                    "src/effects/effectmanifest.cpp",
@@ -1260,7 +1259,6 @@ class MixxxCore(Feature):
                    "src/util/movinginterquartilemean.cpp",
                    "src/util/console.cpp",
                    "src/util/color/color.cpp",
-                   "src/util/color/colorpalette.cpp",
                    "src/util/db/dbconnection.cpp",
                    "src/util/db/dbconnectionpool.cpp",
                    "src/util/db/dbconnectionpooler.cpp",
@@ -1287,7 +1285,8 @@ class MixxxCore(Feature):
                    "src/util/desktophelper.cpp",
                    "src/util/widgetrendertimer.cpp",
                    "src/util/workerthread.cpp",
-                   "src/util/workerthreadscheduler.cpp"
+                   "src/util/workerthreadscheduler.cpp",
+                   "src/util/color/predefinedcolor.cpp"
                    ]
 
         proto_args = {
diff --git a/res/controllers/Roland_DJ-505-scripts.js b/res/controllers/Roland_DJ-505-scripts.js
index 2e2777c0e8..e2600dacba 100644
--- a/res/controllers/Roland_DJ-505-scripts.js
+++ b/res/controllers/Roland_DJ-505-scripts.js
@@ -1499,7 +1499,7 @@ DJ505.PitchPlayMode = function (deck, offset) {
         this.number = n + 1;
         this.on = this.color + DJ505.PadColor.DIM_MODIFIER;
         this.colors = pitchplayColors;
-        this.colorKey = 'hotcue_' + this.number + '_color';
+        this.colorIdKey = 'hotcue_' + this.number + '_color_id';
         components.Button.call(this);
     };
     this.PerformancePad.prototype = new components.Button({
@@ -1561,8 +1561,8 @@ DJ505.PitchPlayMode = function (deck, offset) {
             this.outKey = "hotcue_" + this.number + "_enabled";
             this.output = function (value, group, control) {
                 var outval = this.outValueScale(value);
-                if (this.colorKey !== undefined && outval !== this.off) {
-                    this.outputColor(engine.getValue(this.group, this.colorKey));
+                if (this.colorIdKey !== undefined && outval !== this.off) {
+                    this.outputColor(engine.getValue(this.group, this.colorIdKey));
                 } else {
                     this.send(DJ505.PadColor.OFF);
                 }
@@ -1572,13 +1572,13 @@ DJ505.PitchPlayMode = function (deck, offset) {
                     var previous_cuepoint = this.mode.cuepoint;
                     this.mode.cuepoint = this.number;
                     this.mode.pads[previous_cuepoint - 1].trigger();
-                    this.outputColor(engine.getValue(this.group, this.colorKey));
+                    this.outputColor(engine.getValue(this.group, this.colorIdKey));
                 }
             };
             this.connect = function() {
                 components.Button.prototype.connect.call(this); // call parent connect
-                if (undefined !== this.group && this.colorKey !== undefined) {
-                    this.connections[1] = engine.makeConnection(this.group, this.colorKey, function (id) {
+                if (undefined !== this.group && this.colorIdKey !== undefined) {
+                    this.connections[1] = engine.makeConnection(this.group, this.colorIdKey, function (id) {
                         if (engine.getValue(this.group, this.outKey)) {
                             this.outputColor(id);
                         }
diff --git a/res/controllers/midi-components-0.0.js b/res/controllers/midi-components-0.0.js
index 1893768c2a..7bb5c00957 100644
--- a/res/controllers/midi-components-0.0.js
+++ b/res/controllers/midi-components-0.0.js
@@ -295,9 +295,9 @@
             return;
         }
         if (options.colors !== undefined || options.sendRGB !== undefined) {
-            this.colorKey = 'hotcue_' + options.number + '_color';
+            this.colorIdKey = 'hotcue_' + options.number + '_color_id';
             if (options.colors === undefined) {
-                options.colors = color.hotcueColorPalette();
+                options.colors = color.predefinedColorsList();
             }
         }
         this.number = options.number;
@@ -312,8 +312,8 @@
             this.inKey = 'hotcue_' + this.number + '_clear';
         },
         getColor: function() {
-            if (this.colorKey !== undefined) {
-                return color.colorFromHexCode(engine.getValue(this.group,this.colorKey));
+            if (this.colorIdKey !== undefined) {
+                return color.predefinedColorFromId(engine.getValue(this.group,this.colorIdKey));
             } else {
                 return null;
             }
@@ -324,8 +324,8 @@
             // and there is no hotcueColor for turning the LED
             // off. So the `send()` function is responsible for turning the 
             // actual LED off.
-            if (this.colorKey !== undefined && outval !== this.off) {
-                this.outputColor(engine.getValue(this.group, this.colorKey));
+            if (this.colorIdKey !== undefined && outval !== this.off) {
+                this.outputColor(engine.getValue(this.group, this.colorIdKey));
             } else {
                 this.send(outval);
             }
@@ -348,8 +348,8 @@
         },
         connect: function() {
             Button.prototype.connect.call(this); // call parent connect
-            if (undefined !== this.group && this.colorKey !== undefined) {
-                this.connections[1] = engine.makeConnection(this.group, this.colorKey, function (id) {
+            if (undefined !== this.group && this.colorIdKey !== undefined) {
+                this.connections[1] = engine.makeConnection(this.group, this.colorIdKey, function (id) {
                     if (engine.getValue(this.group,this.outKey)) {
                         this.outputColor(id);
                     }
diff --git a/res/schema.xml b/res/schema.xml
index 4940729fe1..d5babba85a 100644
--- a/res/schema.xml
+++ b/res/schema.xml
@@ -480,30 +480,5 @@ METADATA
         position INTEGER
         );
     </sql>
-  </revision>
-  <revision version="31" min_compatible="3">
-    <description>
-      Convert the PredefinedColor id to the actual RGBA value.
-    </description>
-    <sql>
-      <!-- No Color becomes black-->
-      UPDATE cues SET color=4278190080 WHERE color=0;
-      <!-- Red -->
-      UPDATE cues SET color=4291103240 WHERE color=1;
-      <!-- Green -->
-      UPDATE cues SET color=4281515588 WHERE color=2;
-      <!-- Blue -->
-      UPDATE cues SET color=4278207743 WHERE color=3;
-      <!-- Yellow -->
-      UPDATE cues SET color=4294496768 WHERE color=4;
-      <!-- Celeste -->
-      UPDATE cues SET color=4282569972 WHERE color=5;
-      <!-- Magenta -->
-      UPDATE cues SET color=4289659084 WHERE color=6;
-      <!-- Pink -->
-      UPDATE cues SET color=4294747863 WHERE color=7;
-      <!-- White -->
-      UPDATE cues SET color=4294111999 WHERE color=8;
-    </sql>
-  </revision>
+  </revision>  
 </schema>
diff --git a/res/skins/Deere/hotcue_button.xml b/res/skins/Deere/hotcue_button.xml
index 19ba4bb08b..f5e4777622 100644
--- a/res/skins/Deere/hotcue_button.xml
+++ b/res/skins/Deere/hotcue_button.xml
@@ -46,8 +46,8 @@
       <ConnectValueFromWidget>false</ConnectValueFromWidget>
     </Connection>
     <Connection>
-      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="hotcue"/>_color</ConfigKey>
-      <BindProperty>backgroundColorRgba</BindProperty>
+      <ConfigKey><Variable name="group"/>,hotcue_<Variable name="hotcue"/>_color_id</ConfigKey>
+      <BindProperty>highlight</BindProperty>
     </Connection>
   </PushButton>
 </Template>
diff --git a/res/skins/Deere/style.qss b/res/skins/Deere/style.qss
index 944870dd38..c89a5eca6b 100644
--- a/res/skins/Deere/style.qss
+++ b/res/skins/Deere/style.qss
@@ -1583,6 +1583,7 @@ WPushButton:hover {
 /*"Pressed" state*/
 WPushButton[value="1"],
 WPushButton[value="2"] {
+    /*color: #FDFDFD;*/
     color: #FDFDFD;
     background-color: #006596;
     border: 0px solid #006596;
@@ -1595,17 +1596,129 @@ WPushButton[value="2"]:hover {
     border: 0px solid #0080BE;
 }
 
-#HotcueButton {
-    qproperty-shouldHighlightBackgroundOnHover: true;
+/* Hotcue Color: No Color */
+#HotcueButton[value="1"][highlight="0"],
+#HotcueButton[value="2"][highlight="0"] {
+    background-color: #006596;
+}
+
+#HotcueButton[value="1"][highlight="0"]:hover,
+#HotcueButton[value="2"][highlight="0"]:hover {
+    background-color: #0080BE;
+}
+
+/* Hotcue Color: Red */
+#HotcueButton[value="1"][highlight="1"],
+#HotcueButton[value="2"][highlight="1"] {
+    background-color: #c50a08;
+}
+
+#HotcueButton[value="1"][highlight="1"]:hover,
+#HotcueButton[value="2"][highlight="1"]:hover {
+    background-color: #e50c08;
+}
+
+/* Hotcue Color: Green */
+#HotcueButton[value="1"][highlight="2"],
+#HotcueButton[value="2"][highlight="2"] {
+    background-color: #32be44;
+}
+
+#HotcueButton[value="1"][highlight="2"]:hover,
+#HotcueButton[value="2"][highlight="2"]:hover {
+    background-color: #52de64;
+}
+
+/* Hotcue Color: Blue */
+#HotcueButton[value="1"][highlight="3"],
+#HotcueButton[value="2"][highlight="3"] {
+    background-color: #0044ff;
+}
+
+#HotcueButton[value="1"][highlight="3"]:hover,
+#HotcueButton[value="2"][highlight="3"]:hover {
+    background-color: #0064ff;
+}
+
+/* Hotcue Color: Yellow */
+#HotcueButton[value="1"][highlight="4"],
+#HotcueButton[value="2"][highlight="4"] {
+    color: #4B4B4B;
+    background-color: #f8d200;
+}
+
+#HotcueButton[value="1"][highlight="4"]:hover,
+#HotcueButton[value="2"][highlight="4"]:hover {
+    color: #4B4B4B;
+    background-color: #f8f200;
+}
+
+/* Hotcue Color: Celeste */
+#HotcueButton[value="1"][highlight="5"],
+#HotcueButton[value="2"][highlight="5"] {
+    color: #4B4B4B;
+    background-color: #42d4f4;
 }
 
-#HotcueButton[backgroundIsDark=true][hasBackgroundColor=true] {
+#HotcueButton[value="1"][highlight="5"]:hover,
+#HotcueButton[value="2"][highlight="5"]:hover {
+    color: #4B4B4B;
+    background-color: #62f4f4;
+}
+
+/* Hotcue Color: Purple */
+#HotcueButton[value="1"][highlight="6"],
+#HotcueButton[value="2"][highlight="6"] {
+    background-color: #af00cc;
+}
+
+#Hot