refactor: Clean up unused styles and improve color switcher functionality

src/components/CardFull.svelte

@@ -323,13 +323,6 @@
       overflow-y: auto;
     }
 
-    .preview_body {
-      flex-direction: column;
-      align-items: stretch;
-      overflow: visible;
-      min-height: auto;
-    }
-
     .preview-container {
       flex: none;
       width: 100%;

src/components/CardSmall.svelte

@@ -209,11 +209,6 @@
       align-items: flex-start;
     }
 
-    .color-switcher-container {
-      margin-left: 0;
-      margin-top: 0.5rem;
-    }
-
     .logo-actions {
       flex-wrap: wrap;
     }

src/components/ColorSwitcher.svelte

@@ -2,7 +2,6 @@
   import { generateColorSetCircle, getNoColorCircle } from '../utils/colorCircles.js';
   import ColorsVariants from './ColorsVariants.svelte';
   export let logo;
-  export let theme;
   export let mode = 'standard'; // 'standard' or 'compact'
   export let onSelect = (color, setName) => {};
 
@@ -67,20 +66,8 @@
           on:blur={handleDropdownBlur}
         >
           <div class="color-switcher-preview">
-            <span
-              class="color-circle color-reset"
-              class:active={isActive(undefined, undefined)}
-              title="Reset to theme color"
-              tabindex="0"
-              role="button"
-              aria-label="Reset to theme color"
-              on:click|stopPropagation={(e) => handleCircleClick(undefined, undefined, e)}
-              on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && handleCircleClick(undefined, undefined, e)}
-            >
-              {@html getNoColorCircle()}
-            </span>
             {#if logo.sets}
-              <ColorsVariants sets={logo.sets} colors={logo.colors} activeSet={logo._activeSet} onSelect={(setName) => handleCircleClick(Object.values(logo.colors)[Object.keys(logo.sets).indexOf(setName) % Object.keys(logo.colors).length], setName)} />
+              <ColorsVariants sets={logo.sets} colors={logo.colors} activeSet={logo._activeSet} showNoColor={true} onSelect={(setName) => handleCircleClick(setName ? Object.values(logo.colors)[Object.keys(logo.sets).indexOf(setName) % Object.keys(logo.colors).length] : undefined, setName)} />
             {/if}
           </div>
         </div>
@@ -88,20 +75,8 @@
     </div>
   {:else}
     <div class="color-switcher-preview">
-      <span
-        class="color-circle color-reset"
-        class:active={isActive(undefined, undefined)}
-        title="Reset to theme color"
-        tabindex="0"
-        role="button"
-        aria-label="Reset to theme color"
-        on:click|stopPropagation={(e) => handleCircleClick(undefined, undefined, e)}
-        on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && handleCircleClick(undefined, undefined, e)}
-      >
-        {@html getNoColorCircle()}
-      </span>
       {#if logo.sets}
-        <ColorsVariants sets={logo.sets} colors={logo.colors} activeSet={logo._activeSet} onSelect={(setName) => handleCircleClick(Object.values(logo.colors)[Object.keys(logo.sets).indexOf(setName) % Object.keys(logo.colors).length], setName)} />
+        <ColorsVariants sets={logo.sets} colors={logo.colors} activeSet={logo._activeSet} showNoColor={true} onSelect={(setName) => handleCircleClick(setName ? Object.values(logo.colors)[Object.keys(logo.sets).indexOf(setName) % Object.keys(logo.colors).length] : undefined, setName)} />
       {/if}
     </div>
   {/if}
@@ -131,9 +106,6 @@
   .color-circle:hover {
     transform: scale(1.1);
   }
-  .color-circle.active {
-    box-shadow: 0 0 8px 7px rgba(70, 25, 194, 0.68);
-  }
   .color-dropdown {
     position: absolute;
     bottom: 32px;
@@ -150,10 +122,7 @@
     min-width: 120px;
     flex-wrap: wrap;
   }
-  .color-option {
+
-    border: 1px solid var(--color-border, #ddd);
-    margin: 0 2px 2px 0;
-  }
   .color-reset {
     background: none !important;
     width: 24px;

src/components/ColorsVariants.svelte

@@ -1,54 +1,70 @@
 <script>
-  import { generateColorSetCircle } from '../utils/colorCircles.js';
+    import {
-  export let sets = {};
+        generateColorSetCircle,
-  export let colors = {};
+        getNoColorCircle,
-  export let activeSet = undefined;
+    } from "../utils/colorCircles.js";
-  export let onSelect = (setName) => {};
+    export let sets = {};
+    export let colors = {};
+    export let activeSet = undefined;
+    export let onSelect = (setName) => {};
+    export let showNoColor = true;
 </script>
 
 {#if sets && Object.keys(sets).length}
-  <div class="colors-variants-list">
+    <div class="colors-variants-list">
-    {#each Object.entries(sets) as [setName, setConfig], i}
+        {#if showNoColor}
-      <span
+            <span
-        class="color-circle set-circle"
+                class="color-circle color-reset"
-        class:active={activeSet === setName}
+                title="Reset to theme color"
-        title={`Color Set ${i + 1}: ${setName}`}
+                tabindex="0"
-        tabindex="0"
+                role="button"
-        role="button"
+                aria-label="Reset to theme color"
-        on:click|stopPropagation={() => onSelect(setName)}
+                on:click|stopPropagation={() => onSelect(undefined)}
-        on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && onSelect(setName)}
+                on:keydown|stopPropagation={(e) =>
-        style="padding: 0; overflow: hidden;"
+                    (e.key === "Enter" || e.key === " ") && onSelect(undefined)}
-      >
+            >
-        {@html generateColorSetCircle(colors, sets[setName], 24)}
+                {@html getNoColorCircle()}
-      </span>
+            </span>
-    {/each}
+        {/if}
-  </div>
+        {#each Object.entries(sets) as [setName, setConfig], i}
+            <span
+                class="color-circle set-circle"
+                class:active={activeSet === setName}
+                title={`Color Set ${i + 1}: ${setName}`}
+                tabindex="0"
+                role="button"
+                on:click|stopPropagation={() => onSelect(setName)}
+                on:keydown|stopPropagation={(e) =>
+                    (e.key === "Enter" || e.key === " ") && onSelect(setName)}
+                style="padding: 0; overflow: hidden;"
+            >
+                {@html generateColorSetCircle(colors, sets[setName], 24)}
+            </span>
+        {/each}
+    </div>
 {/if}
 
 <style>
-  .colors-variants-list {
+    .colors-variants-list {
-    display: flex;
+        display: flex;
-    gap: 0.4em;
+        gap: 0.4em;
-    align-items: center;
+        align-items: center;
-    justify-content: center;
+        justify-content: center;
-  }
+    }
-  .color-circle {
+    .color-circle {
-    width: 24px;
+        width: 24px;
-    height: 24px;
+        height: 24px;
-    border-radius: 50%;
+        border-radius: 50%;
-    border: 1px solid var(--color-border, #ddd);
+        border: 1px solid var(--color-border, #ddd);
-    cursor: pointer;
+        cursor: pointer;
-    transition: transform 0.2s;
+        transition: transform 0.2s;
-    box-sizing: border-box;
+        box-sizing: border-box;
-    display: inline-block;
+        display: inline-block;
-  }
+    }
-  .color-circle:hover {
+    .color-circle:hover {
-    transform: scale(1.1);
+        transform: scale(1.1);
-  }
+    }
-  .color-circle.active {
+    .color-circle.active {
-    outline: 2px solid var(--color-accent);
+        box-shadow: 0 0 10px 5px var(--color-accent);
-    outline-offset: 2px;
+    }
-    box-shadow: 0 0 0 2px var(--color-accent), 0 1px 4px rgba(0,0,0,0.12);
-    background: rgba(var(--color-accent-rgb, 70,25,194), 0.08);
-  }
 </style>