diff --git a/src/components/Grid.svelte b/src/components/Grid.svelte
index a315381..dcc1edc 100644
--- a/src/components/Grid.svelte
+++ b/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)}
>
-
+
{#if logo.sets}
{#each Object.entries(logo.sets) as [setName, setConfig], i}
{
@@ -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)}
{/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;
}
diff --git a/src/components/List.svelte b/src/components/List.svelte
index 6833ecd..0e3b3bb 100644
--- a/src/components/List.svelte
+++ b/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)}
>
-
+
{#if logo.sets}
{#each Object.entries(logo.sets) as [setName, setConfig], i}
{
@@ -163,8 +149,9 @@
logo._activeSet = setName;
}
}}
+ style="padding: 0; overflow: hidden;"
>
- {i + 1}
+ {@html generateColorSetCircle(logo.colors, setConfig)}
{/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;
}
diff --git a/src/components/Preview.svelte b/src/components/Preview.svelte
index 9b545d3..02a5730 100644
--- a/src/components/Preview.svelte
+++ b/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)}
>
-
+
{#if logo.sets}
{#each Object.entries(logo.sets) as [setName, setConfig], i}
{
@@ -187,8 +185,9 @@
logo._activeSet = setName;
}
}}
+ style="padding: 0; overflow: hidden;"
>
- {i + 1}
+ {@html generateColorSetCircle(logo.colors, setConfig)}
{/each}
{:else}
diff --git a/src/utils/colorCircles.js b/src/utils/colorCircles.js
new file mode 100644
index 0000000..e8cb818
--- /dev/null
+++ b/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 ``;
+ }
+
+ // 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(``);
+ });
+
+ return ``;
+}