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

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

View File

@@ -1,6 +1,8 @@
<script lang="ts">
import { setLocale, getLocale } from '$lib/paraglide/runtime';
let { inverted = false }: { inverted?: boolean } = $props();
const locales = ['DE', 'EN', 'ES'] as const;
const localeMap = { DE: 'de', EN: 'en', ES: 'es' } as const;
const activeLocale = $derived(getLocale().toUpperCase());
@@ -11,7 +13,13 @@ const activeLocale = $derived(getLocale().toUpperCase());
type="button"
onclick={() => setLocale(localeMap[locale])}
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}
</button>