marcel/familienarchiv
1
0
Fork 0
Code Issues 102 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(LanguageSwitcher): add inverted prop for dark-header context

Browse Source 
When inverted=true, buttons render white text instead of ink tokens,
suitable for placement on brand-navy background.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-30 21:57:01 +02:00
parent fd2a7a8e96
commit 3dfaf69fb1
1 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/lib/components/LanguageSwitcher.svelte
View File

@@ -1,6 +1,8 @@
<script lang="ts"> <script lang="ts">
import { setLocale, getLocale } from '$lib/paraglide/runtime'; import { setLocale, getLocale } from '$lib/paraglide/runtime';
let { inverted = false }: { inverted?: boolean } = $props();
const locales = ['DE', 'EN', 'ES'] as const; const locales = ['DE', 'EN', 'ES'] as const;
const localeMap = { DE: 'de', EN: 'en', ES: 'es' } as const; const localeMap = { DE: 'de', EN: 'en', ES: 'es' } as const;
const activeLocale = $derived(getLocale().toUpperCase()); const activeLocale = $derived(getLocale().toUpperCase());
@@ -11,7 +13,13 @@ const activeLocale = $derived(getLocale().toUpperCase());
type="button" type="button"
onclick={() => setLocale(localeMap[locale])} onclick={() => setLocale(localeMap[locale])}
class="font-sans tracking-widest transition-colors class="font-sans tracking-widest transition-colors
{activeLocale === locale ? 'font-bold text-ink' : 'font-normal text-ink-3 hover:text-ink'}" {activeLocale === locale
? inverted
? 'font-bold text-white'
: 'font-bold text-ink'
: inverted
? 'font-normal text-white/55 hover:text-white/85'
: 'font-normal text-ink-3 hover:text-ink'}"
> >
{locale} {locale}
</button> </button>