github-personal/sLogos
1
0
Fork 0
mirror of https://github.com/shadoll/sLogos.git synced 2026-08-28 11:33:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 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.
This commit is contained in:
sha
2025-05-12 20:52:07 +03:00
parent 29383bb6a1
commit bd4c8dca76
11 changed files with 669 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Grid.svelte
+54 -11
View File
@@ -62,6 +62,10 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
path={logo.path}
color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined}
colorConfig={logo.colors ? logo.colorConfig : undefined}
targets={logo.targets}
sets={logo.sets}
colors={logo.colors}
activeSet={logo._activeSet}
alt={logo.name}
/>
{/key}
@@ -105,17 +109,40 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
<path d="M682.843,117.843l-565.686,565.685c-156.209,-156.21 -156.209,-409.476 0,-565.685c156.21,-156.21 409.476,-156.21 565.686,-0Z" style="fill:#33363f;"/>
</svg>
</span>
{#each logo.colors as colorObj}
<span
class="color-circle"
title={colorObj.label}
style="background:{colorObj.value}"
tabindex="0"
role="button"
on:click|stopPropagation={() => logo._activeColor = colorObj.value}
on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorObj.value)}
></span>
{/each}
{#if logo.sets}
{#each Object.entries(logo.sets) as [setName, setConfig], i}
<span
class="color-circle set-circle"
title={`Color Set ${i + 1}`}
tabindex="0"
role="button"
on:click|stopPropagation={() => {
logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length];
logo._activeSet = setName;
}}
on:keydown|stopPropagation={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
logo._activeColor = Object.values(logo.colors)[i % Object.keys(logo.colors).length];
logo._activeSet = setName;
}
}}
>
{i + 1}
</span>
{/each}
{:else}
{#each Object.entries(logo.colors) as [colorName, colorValue], i}
<span
class="color-circle"
title={colorName.replace('_', ' ')}
style="background:{colorValue}"
tabindex="0"
role="button"
on:click|stopPropagation={() => logo._activeColor = colorValue}
on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorValue)}
></span>
{/each}
{/if}
</div>
{/if}
</div>
@@ -189,4 +216,20 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
position: absolute;
bottom: 0;
}
.set-circle {
background: var(--color-border);
color: var(--color-text);
font-size: 10px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
/* Dark theme variation */
:global(.dark-theme) .set-circle {
background: #444;
color: #eee;
}
</style>