diff --git a/public/data/logos.json b/public/data/logos.json index 9e5afb6..dbe2a04 100644 --- a/public/data/logos.json +++ b/public/data/logos.json @@ -9,22 +9,7 @@ "clothing", "sports", "footwear" - ], - "colors": [ - { - "label": "Black", - "value": "#000", - "theme": "light" - }, - { - "label": "White", - "value": "#fff", - "theme": "dark" - } - ], - "colorConfig": { - "target": "path" - } + ] }, { "name": "Amazon", @@ -34,22 +19,7 @@ "brand": "Amazon", "tags": [ "retail" - ], - "colors": [ - { - "label": "Black", - "value": "#000", - "theme": "light" - }, - { - "label": "White", - "value": "#fff", - "theme": "dark" - } - ], - "colorConfig": { - "selector": "#text" - } + ] }, { "name": "Apple", @@ -67,14 +37,6 @@ { "label": "Silver", "value": "#999" - }, - { - "label": "White", - "value": "#fff" - }, - { - "label": "Black", - "value": "#000" } ], "colorConfig": { @@ -123,22 +85,7 @@ "tags": [ "entertainment", "streaming" - ], - "colors": [ - { - "label": "Black", - "value": "#000", - "theme": "light" - }, - { - "label": "White", - "value": "#fff", - "theme": "dark" - } - ], - "colorConfig": { - "target": "path" - } + ] }, { "name": "Dodge", @@ -159,11 +106,6 @@ { "label": "Red", "value": "#e22b28" - }, - { - "label": "White", - "value": "#fff", - "theme": "dark" } ], "colorConfig": { @@ -229,16 +171,6 @@ { "label": "Green", "value": "#424d07" - }, - { - "label": "Black", - "value": "#000", - "theme": "light" - }, - { - "label": "White", - "value": "#fff", - "theme": "dark" } ], "colorConfig": { @@ -265,22 +197,7 @@ "tags": [ "telecom", "mobile" - ], - "colors": [ - { - "label": "Black", - "value": "#000", - "theme": "light" - }, - { - "label": "White", - "value": "#fff", - "theme": "dark" - } - ], - "colorConfig": { - "selector": "#text" - } + ] }, { "name": "Lifecell Logo", @@ -293,6 +210,14 @@ "mobile" ] }, + { + "name": "Meest", + "path": "logos/meest.svg", + "format": "SVG", + "disable": false, + "tags": [], + "brand": "Meest" + }, { "name": "Mikrotik", "path": "logos/mikrotik.svg", @@ -362,22 +287,7 @@ "tags": [ "bank", "finance" - ], - "colors": [ - { - "label": "Black", - "value": "#000", - "theme": "light" - }, - { - "label": "White", - "value": "#fff", - "theme": "dark" - } - ], - "colorConfig": { - "selector": "#text1" - } + ] }, { "name": "Nationwide", @@ -449,6 +359,14 @@ "finance" ] }, + { + "name": "Nvidia", + "path": "logos/nvidia.svg", + "format": "SVG", + "disable": false, + "tags": [], + "brand": "Nvidia" + }, { "name": "Privat24", "path": "logos/privat24.svg", @@ -514,22 +432,7 @@ "clothing", "sports", "footwear" - ], - "colors": [ - { - "label": "Black", - "value": "#000", - "theme": "light" - }, - { - "label": "White", - "value": "#fff", - "theme": "dark" - } - ], - "colorConfig": { - "target": "path" - } + ] }, { "name": "Revolut", @@ -541,25 +444,10 @@ "bank", "finance", "transfer" - ], - "colors": [ - { - "label": "Black", - "value": "#000", - "theme": "light" - }, - { - "label": "White", - "value": "#fff", - "theme": "dark" - } - ], - "colorConfig": { - "target": "path" - } + ] }, { - "name": "Roomerin", + "name": "RoomerIN", "path": "logos/roomerin.svg", "format": "SVG", "disable": false, @@ -575,21 +463,12 @@ { "label": "Green", "value": "#859310" - }, - { - "label": "Black", - "value": "#000" - }, - { - "label": "White", - "value": "#fff", - "theme": "dark" } ], "colorConfig": { "target": "#text" }, - "brand": "Roomerin" + "brand": "RoomerIN" }, { "name": "Sendpulse", @@ -619,22 +498,7 @@ "format": "SVG", "disable": false, "brand": "shadoll", - "tags": [], - "colors": [ - { - "label": "Black", - "value": "#000", - "theme": "light" - }, - { - "label": "White", - "value": "#fff", - "theme": "dark" - } - ], - "colorConfig": { - "selector": "#l" - } + "tags": [] }, { "name": "Shkafnik", @@ -686,6 +550,16 @@ "communication" ] }, + { + "name": "Vintage", + "path": "logos/vintage.svg", + "format": "SVG", + "disable": false, + "tags": [ + "furniture" + ], + "brand": "Vintage" + }, { "name": "Vodafone", "path": "logos/vodafone.svg", @@ -708,4 +582,4 @@ "transfer" ] } -] \ No newline at end of file +] diff --git a/public/global.css b/public/global.css index 9011d33..533b6cf 100644 --- a/public/global.css +++ b/public/global.css @@ -213,6 +213,7 @@ button:hover { align-items: center; gap: 1em; margin-bottom: 0.5em; + justify-content: space-between; } /* Direct logo image size constraints that will work with any component structure */ diff --git a/public/logos/adidas.svg b/public/logos/adidas.svg index bcf1d4d..781ed8d 100644 --- a/public/logos/adidas.svg +++ b/public/logos/adidas.svg @@ -1,9 +1,6 @@ - - - - - + + + + diff --git a/public/logos/amazon.svg b/public/logos/amazon.svg index 98af86a..af5b5ef 100644 --- a/public/logos/amazon.svg +++ b/public/logos/amazon.svg @@ -5,7 +5,7 @@ - + + fill="currentColor" /> diff --git a/public/logos/color-mode-svgrepo-com.svg b/public/logos/color-mode-svgrepo-com.svg new file mode 100644 index 0000000..cf6b239 --- /dev/null +++ b/public/logos/color-mode-svgrepo-com.svg @@ -0,0 +1 @@ + diff --git a/public/logos/disney.svg b/public/logos/disney.svg index 518f947..a0ef35d 100644 --- a/public/logos/disney.svg +++ b/public/logos/disney.svg @@ -1,4 +1,4 @@ - diff --git a/public/logos/dodge.svg b/public/logos/dodge.svg index 793f94f..c4ffd92 100644 --- a/public/logos/dodge.svg +++ b/public/logos/dodge.svg @@ -13,7 +13,7 @@ - + - + - + diff --git a/public/logos/meest.svg b/public/logos/meest.svg new file mode 100644 index 0000000..21829dd --- /dev/null +++ b/public/logos/meest.svg @@ -0,0 +1,8 @@ + + + + diff --git a/public/logos/monobank_text.svg b/public/logos/monobank_text.svg index 4aa12e3..b791290 100644 --- a/public/logos/monobank_text.svg +++ b/public/logos/monobank_text.svg @@ -1,5 +1,5 @@ - + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + diff --git a/public/logos/nvidia.svg b/public/logos/nvidia.svg new file mode 100644 index 0000000..f353d38 --- /dev/null +++ b/public/logos/nvidia.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/public/logos/reebok.svg b/public/logos/reebok.svg index cef73a0..1af7335 100644 --- a/public/logos/reebok.svg +++ b/public/logos/reebok.svg @@ -1,53 +1,54 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/logos/revolut.svg b/public/logos/revolut.svg index 8066242..65e46c2 100644 --- a/public/logos/revolut.svg +++ b/public/logos/revolut.svg @@ -1,4 +1,4 @@ - - + + diff --git a/public/logos/roomerin.svg b/public/logos/roomerin.svg index aa6febf..1abc0f9 100644 --- a/public/logos/roomerin.svg +++ b/public/logos/roomerin.svg @@ -2,7 +2,7 @@ + fill="currentColor" /> diff --git a/public/logos/shadoll.svg b/public/logos/shadoll.svg index c020949..a40f645 100644 --- a/public/logos/shadoll.svg +++ b/public/logos/shadoll.svg @@ -1,5 +1,5 @@ - diff --git a/public/logos/vintage.svg b/public/logos/vintage.svg new file mode 100644 index 0000000..9bb5ff8 --- /dev/null +++ b/public/logos/vintage.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/components/InlineSvg.svelte b/src/components/InlineSvg.svelte index 796871c..73b5428 100644 --- a/src/components/InlineSvg.svelte +++ b/src/components/InlineSvg.svelte @@ -10,12 +10,12 @@ async function fetchAndColorSvg() { const res = await fetch(path); let text = await res.text(); - if (!color || !colorConfig) { - // No colorization, render as-is + if (!color) { + // No user-selected color, render as-is (SVG uses fill="currentColor") svgHtml = text; return; } - // Parse and update color + // Parse and update color only if user selected const parser = new DOMParser(); const doc = parser.parseFromString(text, 'image/svg+xml'); // 1. Parse

{logo.name}

Format: {logo.format} - {#if isSvgLogo(logo) && logo.colors} - + {#if logo.colors} +
+ logo._activeColor = undefined} + on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)} + > + + + + + {#each logo.colors as colorObj} getDefaultLogoColor(logo.colors, theme); style="background:{colorObj.value}" tabindex="0" role="button" - aria-label={"Switch color to " + colorObj.label} on:click|stopPropagation={() => logo._activeColor = colorObj.value} - on:keydown|stopPropagation={(e) => { - if (e.key === 'Enter' || e.key === ' ') { - logo._activeColor = colorObj.value; - e.preventDefault(); - } - }} + on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorObj.value)} > {/each} - +
{/if}
@@ -153,4 +162,35 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme); padding: 2rem; color: #666; } + .color-circle.color-reset { + background: none !important; + width: 24px; + height: 24px; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + margin: 0; + border: none; + } + .color-circle.color-reset svg { + pointer-events: none; + } + .color-circle { + width: 24px; + height: 24px; + border-radius: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + margin-right: 4px; + cursor: pointer; + box-sizing: border-box; + padding: 0; + } + .color-switcher-preview.align-right { + display: flex; + align-items: center; + justify-content: flex-end; + } diff --git a/src/components/LogoList.svelte b/src/components/LogoList.svelte index 8c59cbd..22fc4d7 100644 --- a/src/components/LogoList.svelte +++ b/src/components/LogoList.svelte @@ -93,23 +93,32 @@
Format: {logo.format}
- {#if isSvgLogo(logo) && logo.colors} -
+ {#if logo.colors} +
+ logo._activeColor = undefined} + on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)} + > + + + + + {#each logo.colors as colorObj} logo._activeColor = colorObj.value} - on:keydown|stopPropagation={(e) => { - if (e.key === 'Enter' || e.key === ' ') { - logo._activeColor = colorObj.value; - e.preventDefault(); - } - }} + on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorObj.value)} > {/each}
@@ -158,4 +167,21 @@ padding: 2rem; color: #666; } + .color-circle { + width: 24px; + height: 24px; + border-radius: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + margin-right: 4px; + cursor: pointer; + box-sizing: border-box; + } + .color-switcher-preview.align-left { + justify-content: flex-start; + } + .color-circle.color-reset { + background: none !important; + } diff --git a/src/components/LogoModal.svelte b/src/components/LogoModal.svelte index 1de440a..96fcf95 100644 --- a/src/components/LogoModal.svelte +++ b/src/components/LogoModal.svelte @@ -78,11 +78,26 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
{#if isSvgLogo(logo) && logo.colors}
+ logo._activeColor = undefined} + on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)} + > + + + + + {#each logo.colors as colorObj} logo._activeColor = colorObj.value} @@ -204,4 +219,24 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme); gap: 0.5rem; } + .color-switcher-preview { + display: flex; + align-items: center; + } + + .color-circle.color-reset { + background: none !important; + } + + .color-circle { + width: 24px; + height: 24px; + border-radius: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + margin-right: 4px; + cursor: pointer; + box-sizing: border-box; + }