From b10f1ebe0e00fdb9a3a57ef607a2caf84a8de056 Mon Sep 17 00:00:00 2001
From: Brian Ernesto <bernesto@neoreef.com>
Date: Tue, 12 Mar 2024 22:35:03 -0600
Subject: [PATCH 1/2] Update Spectrum palette to launch in the body instead of
 the editor

This enables the palette to be displayed over any InputColor on the page.
---
 src/domain_abstract/ui/InputColor.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/domain_abstract/ui/InputColor.ts b/src/domain_abstract/ui/InputColor.ts
index 75b9ce8fc..c2917a8e1 100644
--- a/src/domain_abstract/ui/InputColor.ts
+++ b/src/domain_abstract/ui/InputColor.ts
@@ -103,7 +103,7 @@ export default class InputColor extends Input {
 
       var colorEl = $(`<div class="${this.ppfx}field-color-picker"></div>`);
       var cpStyle = colorEl.get(0)!.style;
-      var elToAppend = em && em.config ? em.config.el : '';
+      var elToAppend = $('body');
       var colorPickerConfig = (em && em.getConfig && em.getConfig().colorPicker) || {};
 
       this.movedColor = '';
@@ -123,7 +123,7 @@ export default class InputColor extends Input {
       // @ts-ignore
       colorEl.spectrum({
         color: model.getValue() || false,
-        containerClassName: `${ppfx}one-bg ${ppfx}two-color`,
+        containerClassName: `${ppfx}one-bg ${ppfx}two-color ${ppfx}editor-sp`,
         appendTo: elToAppend || 'body',
         maxSelectionSize: 8,
         showPalette: true,

From a9728a8c3909a637302aec4f3c93abb1e15c000d Mon Sep 17 00:00:00 2001
From: Brian Ernesto <bernesto@neoreef.com>
Date: Tue, 12 Mar 2024 22:37:07 -0600
Subject: [PATCH 2/2] Update main.scss to match new class wrapper for
 InputColor

---
 src/styles/scss/main.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/styles/scss/main.scss b/src/styles/scss/main.scss
index a76f15a5a..ec75d31be 100644
--- a/src/styles/scss/main.scss
+++ b/src/styles/scss/main.scss
@@ -444,7 +444,13 @@ $colorsAll: (one, var(--gjs-primary-color)),
 
 /********* Spectrum **********/
 
-.#{$app-prefix}editor-cont {
+.#{$app-prefix}editor-sp {
+  border: 1px solid var(--gjs-main-dark-color);
+  box-shadow: 0 0 7px var(--gjs-main-dark-color);
+  border-radius: 3px;
+}
+
+.#{$app-prefix}editor-sp {
   .sp-hue, .sp-slider{ cursor: row-resize;}
   .sp-color, .sp-dragger{ cursor: crosshair;}
   .sp-alpha-inner, .sp-alpha-handle{cursor: col-resize;}