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,13 +1,31 @@
 <script>
-  import { generateColorSetCircle } from '../utils/colorCircles.js';
+    import {
+        generateColorSetCircle,
+        getNoColorCircle,
+    } from "../utils/colorCircles.js";
     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">
+        {#if showNoColor}
+            <span
+                class="color-circle color-reset"
+                title="Reset to theme color"
+                tabindex="0"
+                role="button"
+                aria-label="Reset to theme color"
+                on:click|stopPropagation={() => onSelect(undefined)}
+                on:keydown|stopPropagation={(e) =>
+                    (e.key === "Enter" || e.key === " ") && onSelect(undefined)}
+            >
+                {@html getNoColorCircle()}
+            </span>
+        {/if}
         {#each Object.entries(sets) as [setName, setConfig], i}
             <span
                 class="color-circle set-circle"
@@ -16,7 +34,8 @@
                 tabindex="0"
                 role="button"
                 on:click|stopPropagation={() => onSelect(setName)}
-        on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && onSelect(setName)}
+                on:keydown|stopPropagation={(e) =>
+                    (e.key === "Enter" || e.key === " ") && onSelect(setName)}
                 style="padding: 0; overflow: hidden;"
             >
                 {@html generateColorSetCircle(colors, sets[setName], 24)}
@@ -46,9 +65,6 @@
         transform: scale(1.1);
     }
     .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>