From 2aa829b782fedba25150f79731cfa82151674829 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 29 Jun 2021 08:20:34 +0100
Subject: [PATCH] Allow color picker to have spectrum theme overridden

---
 .../bbui/src/ColorPicker/ColorPicker.svelte   | 38 +++++++++++--------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/packages/bbui/src/ColorPicker/ColorPicker.svelte b/packages/bbui/src/ColorPicker/ColorPicker.svelte
index 77c29dc2f4..957efa4067 100644
--- a/packages/bbui/src/ColorPicker/ColorPicker.svelte
+++ b/packages/bbui/src/ColorPicker/ColorPicker.svelte
@@ -11,8 +11,6 @@
   export let size = "M"
   export let spectrumTheme
 
-  $: console.log(spectrumTheme)
-
   let open = false
 
   $: color = value || "transparent"
@@ -111,12 +109,8 @@
 </script>
 
 <div class="container">
-  <div class="spectrum-wrapper {spectrumTheme || ''}">
-    <div
-      class="preview size--{size || 'M'}"
-      style="background: {color};"
-      on:click={() => (open = true)}
-    />
+  <div class="preview size--{size || 'M'}" on:click={() => (open = true)}>
+    <div class="fill {spectrumTheme || ''}" style="background: {color};" />
   </div>
   {#if open}
     <div
@@ -129,14 +123,16 @@
           <div class="heading">{category.label}</div>
           <div class="colors">
             {#each category.colors as color}
-              <div class="spectrum-wrapper {spectrumTheme || ''}">
+              <div
+                on:click={() => {
+                  onChange(`var(--spectrum-global-color-${color})`)
+                }}
+                class="color"
+                title={prettyPrint(color)}
+              >
                 <div
-                  on:click={() => {
-                    onChange(`var(--spectrum-global-color-${color})`)
-                  }}
-                  class="color"
+                  class="fill {spectrumTheme || ''}"
                   style="background: var(--spectrum-global-color-{color}); color: {checkColor};"
-                  title={prettyPrint(color)}
                 >
                   {#if value === `var(--spectrum-global-color-${color})`}
                     <Icon name="Checkmark" size="S" />
@@ -177,6 +173,7 @@
     width: 32px;
     height: 32px;
     border-radius: 100%;
+    position: relative;
     transition: border-color 130ms ease-in-out;
     box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300);
   }
@@ -184,6 +181,16 @@
     cursor: pointer;
     box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300);
   }
+  .fill {
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: grid;
+    place-items: center;
+  }
   .size--S {
     width: 20px;
     height: 20px;
@@ -226,8 +233,7 @@
     width: 16px;
     border-radius: 100%;
     box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300);
-    display: grid;
-    place-items: center;
+    position: relative;
   }
   .color:hover {
     cursor: pointer;