From 8ddf07b68aaab5446414fe7fa91bb619b4477447 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 5 Jul 2021 14:31:10 +0100
Subject: [PATCH] Add placholder color to color picker component to represent
 undefined color choice

---
 .../bbui/src/ColorPicker/ColorPicker.svelte   | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/ColorPicker/ColorPicker.svelte b/packages/bbui/src/ColorPicker/ColorPicker.svelte
index 30dab2ba10..4d248d6190 100644
--- a/packages/bbui/src/ColorPicker/ColorPicker.svelte
+++ b/packages/bbui/src/ColorPicker/ColorPicker.svelte
@@ -13,7 +13,6 @@
 
   let open = false
 
-  $: color = value || "transparent"
   $: customValue = getCustomValue(value)
   $: checkColor = getCheckColor(value)
 
@@ -110,7 +109,11 @@
 
 <div class="container">
   <div class="preview size--{size || 'M'}" on:click={() => (open = true)}>
-    <div class="fill {spectrumTheme || ''}" style="background: {color};" />
+    <div
+      class="fill {spectrumTheme || ''}"
+      style={value ? `background: ${value};` : ""}
+      class:placeholder={!value}
+    />
   </div>
   {#if open}
     <div
@@ -191,6 +194,26 @@
     display: grid;
     place-items: center;
   }
+  .fill.placeholder {
+    background-position: 0 0, 10px 10px;
+    background-size: 20px 20px;
+    background-image: linear-gradient(
+        45deg,
+        #eee 25%,
+        transparent 25%,
+        transparent 75%,
+        #eee 75%,
+        #eee 100%
+      ),
+      linear-gradient(
+        45deg,
+        #eee 25%,
+        white 25%,
+        white 75%,
+        #eee 75%,
+        #eee 100%
+      );
+  }
   .size--S {
     width: 20px;
     height: 20px;