- {#each category.colors as color}
-
{
- onChange(`var(--spectrum-global-color-static-${color})`)
- }}
- class="color"
- style="background: var(--spectrum-global-color-static-{color}); color: {checkColor};"
- title={prettyPrint(color)}
- >
- {#if value === `var(--spectrum-global-color-static-${color})`}
-
- {/if}
-
- {/each}
+ class="preview"
+ style="background: {color};"
+ on:click={() => (open = true)}
+ />
+ {#if open}
+
(open = false)}
+ transition:fly={{ y: -20, duration: 200 }}
+ class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+ >
+ {#each categories as category}
+
+
{category.label}
+
+ {#each category.colors as color}
+
{
+ onChange(`var(--spectrum-global-color-static-${color})`)
+ }}
+ class="color"
+ style="background: var(--spectrum-global-color-static-{color}); color: {checkColor};"
+ title={prettyPrint(color)}
+ >
+ {#if value === `var(--spectrum-global-color-static-${color})`}
+
+ {/if}
+
+ {/each}
+
+
+ {/each}
+
+
Custom
+
+
+ onChange(null)}
+ />
- {/each}
-
-
Custom
-
-
- onChange(null)} />
-
-
-{/if}
+ {/if}
+