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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user