From 56d438631b587fde517165c221e0242b836fbade Mon Sep 17 00:00:00 2001 From: Alexander Bocken Date: Tue, 21 Apr 2026 12:37:46 +0200 Subject: [PATCH] feat(fitness): tinted body-part icons with semantic accents Unifies PNG and SVG body-part images behind a single CSS-mask render path, so both now colorize with a --accent CSS variable. Accent splits by measurement type: --blue for proportion parts (chest, shoulders, waist, hips) and --nord8 for muscle parts (neck, biceps, forearms, thighs, calves). Stats cards gain a matching 8%-tint fill and accent-colored hover border. History page header image enlarged. Thigh SVG stroke-width bumped to 11 for better mask legibility. --- package.json | 2 +- src/lib/js/fitnessBodyParts.ts | 6 +++ .../body-parts/+page.svelte | 39 ++++++----------- .../fitness/[stats=fitnessStats]/+page.svelte | 43 ++++++++++--------- .../[part]/+page.svelte | 37 ++++++---------- static/fitness/measure/thigh.svg | 2 +- 6 files changed, 57 insertions(+), 72 deletions(-) diff --git a/package.json b/package.json index 99d56b9d..797947bf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "homepage", - "version": "1.40.5", + "version": "1.40.6", "private": true, "type": "module", "scripts": { diff --git a/src/lib/js/fitnessBodyParts.ts b/src/lib/js/fitnessBodyParts.ts index 14541b5e..56ecc936 100644 --- a/src/lib/js/fitnessBodyParts.ts +++ b/src/lib/js/fitnessBodyParts.ts @@ -36,3 +36,9 @@ export function findBodyPart(slug: string): BodyPartCard | null { export function bodyPartSlug(card: BodyPartCard, lang: string): string { return lang === 'de' ? card.slugDe : card.key; } + +const PROPORTION_KEYS: ReadonlySet = new Set(['chest', 'shoulders', 'waist', 'hips']); + +export function bodyPartAccent(key: string): string { + return PROPORTION_KEYS.has(key) ? 'var(--blue)' : 'var(--nord8)'; +} diff --git a/src/routes/fitness/[measure=fitnessMeasure]/body-parts/+page.svelte b/src/routes/fitness/[measure=fitnessMeasure]/body-parts/+page.svelte index 20ef8ac2..8baa07a8 100644 --- a/src/routes/fitness/[measure=fitnessMeasure]/body-parts/+page.svelte +++ b/src/routes/fitness/[measure=fitnessMeasure]/body-parts/+page.svelte @@ -8,6 +8,7 @@ import { toast } from '$lib/js/toast.svelte'; import DatePicker from '$lib/components/DatePicker.svelte'; import SaveFab from '$lib/components/SaveFab.svelte'; + import { bodyPartAccent } from '$lib/js/fitnessBodyParts'; let { data } = $props(); @@ -360,18 +361,14 @@ {#if !done} {#key step.key}
-
+
{#if step.img} - {#if step.img.endsWith('.svg')} - - {:else} - - {/if} + {:else}