feat: add color conversion and target/sets configuration for logos

- Updated Makefile to include a new target for converting logo colors format.
- Added a new script `convertColorsFormat.js` to convert colors from array to object format in `logos.json`.
- Modified `logos.json` structure to use an object for colors and added targets and sets for SVG logos.
- Updated `scanLogos.js` to set default colorConfig, targets, and sets for SVG logos.
- Enhanced Svelte components (`Grid.svelte`, `List.svelte`, `Preview.svelte`, `InlineSvg.svelte`) to support new targets, sets, and colors structure.
- Updated color theme utility functions to handle the new colors object format.
- Removed deprecated `mono_white.svg` logo file.

scripts/convertColorsFormat.js

@@ -0,0 +1,93 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+// Path to logos.json
+const logosJsonPath = path.join(__dirname, '../public/data/logos.json');
+
+// Read the current logos.json file
+console.log('Reading logos.json...');
+const logosData = JSON.parse(fs.readFileSync(logosJsonPath, 'utf8'));
+
+// Convert the colors format and create targets & sets
+console.log('Converting logos format...');
+let convertedColorsCount = 0;
+let convertedConfigCount = 0;
+
+for (const logo of logosData) {
+  // 1. Convert colors array to object if needed
+  if (logo.colors && Array.isArray(logo.colors)) {
+    // Convert array format to object format
+    const newColors = {};
+    for (const colorObj of logo.colors) {
+      // Convert label to lowercase and replace spaces with underscores
+      const key = colorObj.label.toLowerCase().replace(/\s+/g, '_');
+      newColors[key] = colorObj.value;
+    }
+    logo.colors = newColors;
+    convertedColorsCount++;
+  }
+
+  // 2. Convert colorConfig to targets and sets
+  if (logo.colorConfig && !logo.targets) {
+    // Create targets object
+    logo.targets = {};
+
+    // Handle selector or target from colorConfig
+    if (logo.colorConfig.selector) {
+      // Split multiple selectors (e.g., "#text, #logo_int")
+      const selectors = logo.colorConfig.selector.split(',').map(s => s.trim());
+
+      // Create a target for each selector
+      selectors.forEach((selector, index) => {
+        logo.targets[`selector_${index + 1}`] = selector;
+      });
+
+      // Create sets for each color
+      if (logo.colors && Object.keys(logo.colors).length > 0) {
+        logo.sets = {};
+        let setIndex = 1;
+
+        // Create a set for each color
+        for (const [colorName, colorValue] of Object.entries(logo.colors)) {
+          const setName = `set_${setIndex}`;
+          logo.sets[setName] = {};
+
+          // Apply this color to all targets in this set
+          Object.keys(logo.targets).forEach(targetName => {
+            logo.sets[setName][targetName] = colorName;
+          });
+
+          setIndex++;
+        }
+      }
+    } else if (logo.colorConfig.target) {
+      logo.targets.main = logo.colorConfig.target;
+
+      // Create sets for each color
+      if (logo.colors && Object.keys(logo.colors).length > 0) {
+        logo.sets = {};
+        let setIndex = 1;
+
+        // Create a set for each color
+        for (const [colorName, colorValue] of Object.entries(logo.colors)) {
+          const setName = `set_${setIndex}`;
+          logo.sets[setName] = {
+            main: colorName
+          };
+          setIndex++;
+        }
+      }
+    }
+
+    convertedConfigCount++;
+
+    // Keep the original colorConfig for backward compatibility
+  }
+}
+
+// Write the updated data back to logos.json
+console.log('Writing updated logos.json...');
+fs.writeFileSync(logosJsonPath, JSON.stringify(logosData, null, 2));
+console.log(`Conversion complete! Updated colors for ${convertedColorsCount} logos and created targets/sets for ${convertedConfigCount} logos.`);

scripts/scanLogos.js

@@ -171,6 +171,52 @@ function scanLogos() {
       if (!logoObj.brand) logoObj.brand = logoObj.name;
       if (!Array.isArray(logoObj.tags)) logoObj.tags = [];
       if (typeof logoObj.disable !== 'boolean') logoObj.disable = false;
+
+      // Set default colorConfig, targets, and sets for SVGs
+      if (logoObj.format.toLowerCase() === 'svg') {
+        // Maintain backward compatibility
+        if (!logoObj.colorConfig) {
+          logoObj.colorConfig = { target: 'path', attribute: 'fill' };
+        }
+
+        // Add new format targets if not already present
+        if (!logoObj.targets && (logoObj.colorConfig.target || logoObj.colorConfig.selector)) {
+          logoObj.targets = {};
+
+          if (logoObj.colorConfig.selector) {
+            // Split multiple selectors (e.g., "#text, #logo_int")
+            const selectors = logoObj.colorConfig.selector.split(',').map(s => s.trim());
+
+            // Create a target for each selector
+            selectors.forEach((selector, index) => {
+              logoObj.targets[`selector_${index + 1}`] = selector;
+            });
+          } else if (logoObj.colorConfig.target) {
+            logoObj.targets.main = logoObj.colorConfig.target;
+          } else {
+            logoObj.targets.main = 'path';
+          }
+        }
+
+        // Create sets if there are colors but no sets
+        if (logoObj.colors && !logoObj.sets) {
+          logoObj.sets = {};
+          let setIndex = 1;
+
+          // Create a set for each color
+          for (const [colorName, colorValue] of Object.entries(logoObj.colors)) {
+            const setName = `set_${setIndex}`;
+            logoObj.sets[setName] = {};
+
+            // Apply this color to all targets
+            Object.keys(logoObj.targets || {}).forEach(targetName => {
+              logoObj.sets[setName][targetName] = colorName;
+            });
+
+            setIndex++;
+          }
+        }
+      }
     }
 
     return logos;