Merge pull request #292 from pathsim/fix/color-palette-icon

Use Lucide palette icon for color picker

Author: milanofthe

src/lib/components/dialogs/shared/ColorPicker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { tooltip } from '$lib/components/Tooltip.svelte';
+	import Icon from '$lib/components/icons/Icon.svelte';
 	import { DIALOG_COLOR_PALETTE, DEFAULT_NODE_COLOR } from '$lib/utils/colors';
 
 	interface Props {
@@ -49,13 +50,9 @@
 
 <div class="color-picker-wrapper" data-tour="block-color-picker">
 	<button class="picker-btn" class:ghost={variant === 'ghost'} onclick={toggle} aria-label="Change color" use:tooltip={{ text: 'Color', position: tooltipPosition }}>
-		<svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none" stroke={iconColor || 'currentColor'} stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-			<circle cx="12" cy="12" r="10"/>
-			<circle cx="8" cy="10" r="1.5" fill={iconColor || 'currentColor'}/>
-			<circle cx="12" cy="7" r="1.5" fill={iconColor || 'currentColor'}/>
-			<circle cx="16" cy="10" r="1.5" fill={iconColor || 'currentColor'}/>
-			<circle cx="15" cy="15" r="2" fill={iconColor || 'currentColor'}/>
-		</svg>
+		<span class="icon-wrap" style={iconColor ? `color: ${iconColor};` : ''}>
+			<Icon name="palette" size={iconSize} />
+		</span>
 	</button>
 	{#if isOpen}
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -119,6 +116,10 @@
 		color: var(--text);
 	}
 
+	.icon-wrap {
+		display: inline-flex;
+	}
+
 	/* Ghost variant for annotation nodes - minimal styling */
 	.picker-btn.ghost {
 		width: auto;

src/lib/components/icons/Icon.svelte

@@ -85,6 +85,14 @@
 		<line x1="12" y1="17" x2="12" y2="22"/>
 		<path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z"/>
 	</svg>
+{:else if name === 'palette'}
+	<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+		<path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"/>
+		<circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/>
+		<circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/>
+		<circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/>
+		<circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/>
+	</svg>
 {:else if name === 'pin-filled'}
 	<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 		<line x1="12" y1="17" x2="12" y2="22"/>