feat: add generateColorSetCircle utility for SVG color representation

src/components/Grid.svelte

@@ -4,6 +4,7 @@
   import InlineSvg from './InlineSvg.svelte';
   import { onMount, onDestroy } from 'svelte';
   import { getDefaultLogoColor, getThemeColor } from '../utils/colorTheme.js';
+  import { generateColorSetCircle } from "../utils/colorCircles.js";
 
   export let logos = [];
   export let onCopy;
@@ -104,16 +105,13 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
                 on:click|stopPropagation={() => logo._activeColor = undefined}
                 on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)}
               >
-                <svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-                  <circle cx="400" cy="400" r="400" style="fill:#d6d6d6;"/>
-                  <path d="M682.843,117.843l-565.686,565.685c-156.209,-156.21 -156.209,-409.476 0,-565.685c156.21,-156.21 409.476,-156.21 565.686,-0Z" style="fill:#33363f;"/>
-                </svg>
+                <svg width="100%" height="100%" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M400,0c220.766,0 400,179.234 400,400c0,220.766 -179.234,400 -400,400c-220.766,0 -400,-179.234 -400,-400c0,-220.766 179.234,-400 400,-400Zm-251.006,583.082l434.088,-434.088c-51.359,-37.541 -114.652,-59.71 -183.082,-59.71c-171.489,0 -310.716,139.227 -310.716,310.716c0,68.43 22.169,131.723 59.71,183.082Zm502.495,-365.501l-433.908,433.908c51.241,37.248 114.283,59.227 182.419,59.227c171.489,-0 310.716,-139.227 310.716,-310.716c-0,-68.136 -21.979,-131.178 -59.227,-182.419Z" fill="#33363f"/></svg>
               </span>
               {#if logo.sets}
                 {#each Object.entries(logo.sets) as [setName, setConfig], i}
                   <span
                     class="color-circle set-circle"
-                    title={`Color Set ${i + 1}`}
+                    title={`Color Set ${i + 1}: ${setName}`}
                     tabindex="0"
                     role="button"
                     on:click|stopPropagation={() => {
@@ -126,8 +124,9 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
                         logo._activeSet = setName;
                       }
                     }}
+                    style="padding: 0; overflow: hidden;"
                   >
-                    {i + 1}
+                    {@html generateColorSetCircle(logo.colors, setConfig)}
                   </span>
                 {/each}
               {:else}
@@ -215,21 +214,11 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
     font-size: 0.85em;
     position: absolute;
     bottom: 0;
-  }
-
-  .set-circle {
-    background: var(--color-border);
-    color: var(--color-text);
-    font-size: 10px;
-    font-weight: bold;
+  }  .set-circle {
     display: flex;
     align-items: center;
     justify-content: center;
-  }
-
-  /* Dark theme variation */
-  :global(.dark-theme) .set-circle {
-    background: #444;
-    color: #eee;
+    overflow: hidden;
+    padding: 0;
   }
 </style>

src/components/List.svelte

@@ -3,6 +3,7 @@
   import Actions from "./Actions.svelte";
   import InlineSvg from "./InlineSvg.svelte";
   import { getThemeColor, getDefaultLogoColor } from "../utils/colorTheme.js";
+  import { generateColorSetCircle } from "../utils/colorCircles.js";
   import { onMount, onDestroy } from "svelte";
 
   export let logos = [];
@@ -129,28 +130,13 @@
                 (e.key === "Enter" || e.key === " ") &&
                 (logo._activeColor = undefined)}
             >
-              <svg
-                width="100%"
-                height="100%"
-                viewBox="0 0 800 800"
-                version="1.1"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-                xml:space="preserve"
-                style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
-              >
-                <circle cx="400" cy="400" r="400" style="fill:#d6d6d6;" />
-                <path
-                  d="M682.843,117.843l-565.686,565.685c-156.209,-156.21 -156.209,-409.476 0,-565.685c156.21,-156.21 409.476,-156.21 565.686,-0Z"
-                  style="fill:#33363f;"
-                />
-              </svg>
+              <svg width="100%" height="100%" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M400,0c220.766,0 400,179.234 400,400c0,220.766 -179.234,400 -400,400c-220.766,0 -400,-179.234 -400,-400c0,-220.766 179.234,-400 400,-400Zm-251.006,583.082l434.088,-434.088c-51.359,-37.541 -114.652,-59.71 -183.082,-59.71c-171.489,0 -310.716,139.227 -310.716,310.716c0,68.43 22.169,131.723 59.71,183.082Zm502.495,-365.501l-433.908,433.908c51.241,37.248 114.283,59.227 182.419,59.227c171.489,-0 310.716,-139.227 310.716,-310.716c-0,-68.136 -21.979,-131.178 -59.227,-182.419Z" fill="#33363f"/></svg>
             </span>
             {#if logo.sets}
               {#each Object.entries(logo.sets) as [setName, setConfig], i}
                 <span
                   class="color-circle set-circle"
-                  title={`Color Set ${i + 1}`}
+                  title={`Color Set ${i + 1}: ${setName}`}
                   tabindex="0"
                   role="button"
                   on:click|stopPropagation={() => {
@@ -163,8 +149,9 @@
                       logo._activeSet = setName;
                     }
                   }}
+                  style="padding: 0; overflow: hidden;"
                 >
-                  {i + 1}
+                  {@html generateColorSetCircle(logo.colors, setConfig)}
                 </span>
               {/each}
             {:else}
@@ -297,20 +284,11 @@
     align-items: center;
     justify-content: space-between;
     gap: 0.5em;
-  }
-  .set-circle {
-    background: var(--color-border);
-    color: var(--color-text);
-    font-size: 10px;
-    font-weight: bold;
+  }  .set-circle {
     display: flex;
     align-items: center;
     justify-content: center;
-  }
-
-  /* Dark theme variation */
-  :global(.dark-theme) .set-circle {
-    background: #444;
-    color: #eee;
+    overflow: hidden;
+    padding: 0;
   }
 </style>

src/components/Preview.svelte

@@ -2,6 +2,7 @@
   import { onMount, onDestroy, createEventDispatcher } from 'svelte';
   import InlineSvg from './InlineSvg.svelte';
   import { getDefaultLogoColor, getThemeColor } from '../utils/colorTheme.js';
+  import { generateColorSetCircle } from "../utils/colorCircles.js";
 
   export let show = false;
   export let logo = null;
@@ -165,16 +166,13 @@
                 on:click|stopPropagation={() => logo._activeColor = undefined}
                 on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)}
               >
-                <svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-                  <circle cx="400" cy="400" r="400" style="fill:#d6d6d6;"/>
-                  <path d="M682.843,117.843l-565.686,565.685c-156.209,-156.21 -156.209,-409.476 0,-565.685c156.21,-156.21 409.476,-156.21 565.686,-0Z" style="fill:#33363f;"/>
-                </svg>
+                <svg width="100%" height="100%" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M400,0c220.766,0 400,179.234 400,400c0,220.766 -179.234,400 -400,400c-220.766,0 -400,-179.234 -400,-400c0,-220.766 179.234,-400 400,-400Zm-251.006,583.082l434.088,-434.088c-51.359,-37.541 -114.652,-59.71 -183.082,-59.71c-171.489,0 -310.716,139.227 -310.716,310.716c0,68.43 22.169,131.723 59.71,183.082Zm502.495,-365.501l-433.908,433.908c51.241,37.248 114.283,59.227 182.419,59.227c171.489,-0 310.716,-139.227 310.716,-310.716c-0,-68.136 -21.979,-131.178 -59.227,-182.419Z" fill="#33363f"/></svg>
               </span>
               {#if logo.sets}
                 {#each Object.entries(logo.sets) as [setName, setConfig], i}
                   <span
                     class="color-circle set-circle"
-                    title={`Color Set ${i + 1}`}
+                    title={`Color Set ${i + 1}: ${setName}`}
                     tabindex="0"
                     role="button"
                     on:click|stopPropagation={() => {
@@ -187,8 +185,9 @@
                         logo._activeSet = setName;
                       }
                     }}
+                    style="padding: 0; overflow: hidden;"
                   >
-                    {i + 1}
+                    {@html generateColorSetCircle(logo.colors, setConfig)}
                   </span>
                 {/each}
               {:else}

src/utils/colorCircles.js

@@ -0,0 +1,51 @@
+/**
+ * Generates an SVG pie chart representing the colors in a set
+ * @param {Object} colors - The colors object from the logo
+ * @param {Object} setConfig - The specific set configuration (mapping targets to colors)
+ * @param {Number} size - The size of the circle in pixels
+ * @return {String} SVG markup for the color circle
+ */
+export function generateColorSetCircle(colors, setConfig, size = 24) {
+  // Get unique colors from the set (values in the setConfig)
+  const colorNames = [...new Set(Object.values(setConfig))];
+
+  // Limit to max 4 colors
+  const limitedColorNames = colorNames.slice(0, 4);
+
+  // If we have only one color, create a simple circle
+  if (limitedColorNames.length === 1) {
+    const colorValue = colors[limitedColorNames[0]];
+    return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+      <circle cx="${size/2}" cy="${size/2}" r="${size/2}" fill="${colorValue}" />
+    </svg>`;
+  }
+
+  // For multiple colors, create pie segments
+  const segments = [];
+  const totalColors = limitedColorNames.length;
+  const radius = size / 2;
+  const center = { x: radius, y: radius };
+
+  // Calculate segments for each color
+  limitedColorNames.forEach((colorName, index) => {
+    const colorValue = colors[colorName];
+    const startAngle = (index / totalColors) * 2 * Math.PI;
+    const endAngle = ((index + 1) / totalColors) * 2 * Math.PI;
+
+    // Calculate points
+    const startX = center.x + radius * Math.cos(startAngle);
+    const startY = center.y + radius * Math.sin(startAngle);
+    const endX = center.x + radius * Math.cos(endAngle);
+    const endY = center.y + radius * Math.sin(endAngle);
+
+    // Create path for the segment
+    const largeArcFlag = endAngle - startAngle <= Math.PI ? 0 : 1;
+    const path = `M${center.x},${center.y} L${startX},${startY} A${radius},${radius} 0 ${largeArcFlag},1 ${endX},${endY} Z`;
+
+    segments.push(`<path d="${path}" fill="${colorValue}" />`);
+  });
+
+  return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+    ${segments.join('\n    ')}
+  </svg>`;
+}