Apply Finlio cream/terracotta design system

Re-theme dashboard, suivi, plan, and flux pages plus nav from the
claude.ai/design import: warm cream/terracotta/olive palette, pill
nav/buttons/inputs, Caprasimo display font for headings. Dark mode
variant derived to hold the existing WCAG AA contrast ratios since
the import only specified light.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
jeremy bayse
2026-08-01 21:21:17 +02:00
co-authored by Claude Sonnet 5
parent 97dc7cdb2a
commit 52ebb9bc83
12 changed files with 133 additions and 124 deletions
@@ -1,18 +1,18 @@
<div class="max-w-5xl mx-auto py-6 px-4 sm:px-6 space-y-6">
<div class="flex flex-wrap items-center justify-between gap-4">
<h1 class="text-xl font-semibold text-text">Répartition des flux</h1>
<div class="flex items-center gap-3">
<h1 class="text-3xl font-display text-text">Répartition des flux</h1>
<div class="flex items-center gap-2">
<div>
<label for="sankey-year" class="text-xs text-text-muted">Année</label>
<select id="sankey-year" wire:model.live="year" class="block rounded-md bg-surface border-border-strong text-text text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
<label for="sankey-year" class="sr-only">Année</label>
<select id="sankey-year" wire:model.live="year" class="block rounded-full bg-surface border-border-strong text-text text-sm px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
@foreach (range($year - 3, $year + 3) as $y)
<option value="{{ $y }}">{{ $y }}</option>
@endforeach
</select>
</div>
<div>
<label for="sankey-period" class="text-xs text-text-muted">Période</label>
<select id="sankey-period" wire:model.live="period" class="block rounded-md bg-surface border-border-strong text-text text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
<label for="sankey-period" class="sr-only">Période</label>
<select id="sankey-period" wire:model.live="period" class="block rounded-full bg-surface border-border-strong text-text text-sm px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
<option value="year">Année complète</option>
@foreach (['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'] as $i => $label)
<option value="{{ $i + 1 }}">{{ $label }}</option>
@@ -22,7 +22,7 @@
</div>
</div>
<div class="bg-surface shadow rounded-lg p-4">
<div class="bg-surface shadow rounded-3xl p-6">
@if (! $hasData)
<p class="text-sm text-text-muted py-12 text-center">Aucun revenu suivi sur cette période.</p>
@else