From 187da4cb8a7a1b08763708f212fdec7f12907853 Mon Sep 17 00:00:00 2001
From: Pedro Duque Vieira <pedro.duquevieira@pixelduke.com>
Date: Sun, 19 Apr 2020 17:04:33 +0100
Subject: [PATCH] Fixes #150: ColorPicker - Style ColorPicker with a JMetro
 style

---
 .../resources/jfxtras/styles/jmetro/base.css  | 17 +++++++++++++
 .../jfxtras/styles/jmetro/dark_theme.css      | 22 ++++++++++++-----
 .../jfxtras/styles/jmetro/light_theme.css     | 24 +++++++++++++------
 3 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/jmetro/src/main/resources/jfxtras/styles/jmetro/base.css b/jmetro/src/main/resources/jfxtras/styles/jmetro/base.css
index 7ba10948..3a2657d8 100644
--- a/jmetro/src/main/resources/jfxtras/styles/jmetro/base.css
+++ b/jmetro/src/main/resources/jfxtras/styles/jmetro/base.css
@@ -2532,6 +2532,23 @@ totally specific (always using direct child) and cover all cases, which would be
  *                                                                             *
  ******************************************************************************/
 
+.color-palette {
+    -fx-background-radius: 0;
+
+    -fx-background-color: popup_background_color;
+    -fx-border-color: popup_border_color;
+}
+
+/* Custom Color Dialog */
+.custom-color-dialog  {
+    -fx-background-color: dialog_background_color;
+}
+
+.custom-color-dialog .controls-pane .customcolor-controls-background {
+    -fx-background-color: controls_border_color, controls_background_color;
+}
+
+/* With Button styleclass */
 .color-picker.button {
     -fx-border-color: transparent;
     -fx-border-width: 2;
diff --git a/jmetro/src/main/resources/jfxtras/styles/jmetro/dark_theme.css b/jmetro/src/main/resources/jfxtras/styles/jmetro/dark_theme.css
index 0fb197b0..b5ccb9b2 100644
--- a/jmetro/src/main/resources/jfxtras/styles/jmetro/dark_theme.css
+++ b/jmetro/src/main/resources/jfxtras/styles/jmetro/dark_theme.css
@@ -666,9 +666,9 @@ Text {
  *                                                                             *
  ******************************************************************************/
 
- .dialog-pane {
-     -fx-padding: 0.75em 0.5em 0.5em 0.5em;
- }
+.dialog-pane {
+    -fx-padding: 0.75em 0.5em 0.5em 0.5em;
+}
 
 /*******************************************************************************
  *                                                                             *
@@ -676,9 +676,9 @@ Text {
  *                                                                             *
  ******************************************************************************/
 
- .status-bar {
- 	background_color: #252525;
- }
+.status-bar {
+    background_color: #252525;
+}
 
 /*******************************************************************************
  *                                                                             *
@@ -721,6 +721,16 @@ Text {
  *                                                                             *
  ******************************************************************************/
 
+.color-palette {
+    popup_background_color: #2b2b2b;
+    popup_border_color: #767676;
+}
+
+.custom-color-dialog {
+    controls_background_color: #2b2b2b;
+    controls_border_color: #767676;
+}
+
 .color-picker.button {
     button_background_color: #333333;
     background_pressed_color: #666666;
diff --git a/jmetro/src/main/resources/jfxtras/styles/jmetro/light_theme.css b/jmetro/src/main/resources/jfxtras/styles/jmetro/light_theme.css
index 72c0640b..7963a5b0 100644
--- a/jmetro/src/main/resources/jfxtras/styles/jmetro/light_theme.css
+++ b/jmetro/src/main/resources/jfxtras/styles/jmetro/light_theme.css
@@ -692,14 +692,24 @@ Text {
  * ColorPicker                                                                 *
  *                                                                             *
  ******************************************************************************/
+.color-palette {
+    popup_background_color: #f2f2f2;
+    popup_border_color: #cccccc;
+}
 
- .color-picker.button {
-     button_background_color: #cccccc;
-     background_pressed_color: #999999;
+.custom-color-dialog {
+    controls_background_color: #f2f2f2;
+    controls_border_color: #cccccc;
+}
 
-     border_hover_color: #7a7a7a;
+.color-picker.button {
+    button_background_color: #cccccc;
+    background_pressed_color: #999999;
 
-     text_color: #111;
+    border_hover_color: #7a7a7a;
+
+    text_color: #111;
+
+    focus_ring_border_color: white;
+}
 
-     focus_ring_border_color: white;
- }