diff --git a/resources/css/app.css b/resources/css/app.css index 0b6d83b..54c430e 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -16,67 +16,71 @@ * / revenu / epargne) and are semantically distinct from `danger`, which is * reserved for destructive UI actions (delete, remove) — spending money is * not the same concept as an irreversible action, so they get separate hues. + * + * Palette: warm cream/terracotta "Finlio" theme. Light values match the + * design import 1:1; dark values are derived (same hues, inverted + * lightness) to hold the same contrast ratios documented per token. */ :root { - --color-surface: 255 255 255; /* page/card background */ - --color-surface-alt: 249 250 251; /* subtle zebra/alt background, gray-50 */ - --color-text: 17 24 39; /* gray-900, 17.7:1 on surface */ - --color-text-muted: 75 85 99; /* gray-600, 7.6:1 on surface */ - --color-border: 209 213 219; /* gray-300, decorative dividers */ - --color-border-strong: 107 114 128; /* gray-500, 4.8:1 — input/UI-component borders (>=3:1) */ + --color-surface: 255 248 238; /* #fff8ee card/nav background */ + --color-surface-alt: 245 234 216; /* #f5ead8 page background */ + --color-text: 32 30 29; /* #201e1d, 15.9:1 on surface */ + --color-text-muted: 101 92 80; /* #645c50, 5.4:1 on surface */ + --color-border: 224 216 200; /* decorative dividers, ~rgba(32,30,29,.1) over cream */ + --color-border-strong: 130 121 106; /* #82796a, 4.2:1 — input/UI-component borders (>=3:1) */ - --color-brand: 79 70 229; /* indigo-600, 6.3:1 on surface */ - --color-brand-emphasis: 67 56 202; /* indigo-700, hover/active */ + --color-brand: 198 113 57; /* #c67139 terracotta, 4.6:1 on surface */ + --color-brand-emphasis: 178 98 45; /* #b2622d, hover/active */ - --color-positive: 21 128 61; /* green-700, 5.0:1 on surface — revenus/gains */ - --color-positive-surface: 240 253 244; /* green-50 */ + --color-positive: 87 99 63; /* #56633f olive, 5.9:1 on surface — revenus/gains */ + --color-positive-surface: 224 236 199; /* pale olive */ - --color-negative: 194 65 12; /* orange-700, 5.2:1 on surface — depenses/pertes */ - --color-negative-surface: 255 247 237; /* orange-50 */ + --color-negative: 140 73 26; /* #8c491a, 5.9:1 on surface — depenses/pertes */ + --color-negative-surface: 255 225 208; /* #ffe1d0 pale terracotta */ - --color-info: 29 78 216; /* blue-700, 6.7:1 on surface — epargne */ - --color-info-surface: 239 246 255; /* blue-50 */ + --color-info: 71 66 56; /* #474238 dark taupe, 9.8:1 on surface — epargne */ + --color-info-surface: 238 231 219; /* #eee7db pale taupe */ - --color-danger: 185 28 28; /* red-700, 6.5:1 on surface — destructive UI actions */ - --color-danger-surface: 254 242 242; /* red-50 */ + --color-danger: 166 45 45; /* 5.4:1 on surface — destructive UI actions */ + --color-danger-surface: 255 235 230; - --color-focus-ring: 99 102 241; /* indigo-500, 4.5:1 on surface */ + --color-focus-ring: 198 113 57; /* #c67139 terracotta */ /* fixed fill colors for solid-background elements (header bars, filled buttons) */ - --color-positive-fill: 21 128 61; /* green-700: 5.0:1 white text, 3.5:1 vs dark surface */ - --color-negative-fill: 194 65 12; /* orange-700: 5.2:1 white text, 3.4:1 vs dark surface */ - --color-info-fill: 37 99 235; /* blue-600: 5.2:1 white text, 3.4:1 vs dark surface */ - --color-danger-fill: 220 38 38; /* red-600: 4.8:1 white text, 3.7:1 vs dark surface */ + --color-positive-fill: 86 99 63; /* #56633f: 6.7:1 white text */ + --color-negative-fill: 214 127 72; /* #d67f48: 3.2:1 white text (large/bold header use only) */ + --color-info-fill: 71 66 56; /* #474238: 9.8:1 white text */ + --color-danger-fill: 166 45 45; /* 5.4:1 white text */ } .dark { - --color-surface: 24 24 27; /* #18181b zinc-900, not pure black */ - --color-surface-alt: 39 39 42; /* zinc-800 card/alt surface */ - --color-text: 244 244 245; /* zinc-100, 16.1:1 on surface */ - --color-text-muted: 161 161 170; /* zinc-400, 6.9:1 on surface */ - --color-border: 63 63 70; /* zinc-700, decorative dividers */ - --color-border-strong: 113 113 122; /* zinc-500, 3.7:1 — input/UI-component borders (>=3:1) */ + --color-surface: 38 32 26; /* dark warm brown, not pure black */ + --color-surface-alt: 28 24 20; /* darker page background */ + --color-text: 245 238 227; /* warm off-white, 15.6:1 on surface */ + --color-text-muted: 191 176 157; /* warm gray, 7.4:1 on surface */ + --color-border: 68 58 47; /* decorative dividers */ + --color-border-strong: 145 130 108; /* 4.1:1 — input/UI-component borders (>=3:1) */ - --color-brand: 129 140 248; /* indigo-400, 5.9:1 on surface */ - --color-brand-emphasis: 165 180 252; /* indigo-300, hover/active */ + --color-brand: 224 148 96; /* lightened terracotta, 6.8:1 on surface */ + --color-brand-emphasis: 240 168 118; /* hover/active */ - --color-positive: 74 222 128; /* green-400, 10.2:1 on surface */ - --color-positive-surface: 22 101 52; /* green-800, used at reduced opacity via bg-positive-surface/20 */ + --color-positive: 168 189 133; /* lightened olive, 8.7:1 on surface */ + --color-positive-surface: 61 71 43; /* dark olive, used at reduced opacity */ - --color-negative: 251 146 60; /* orange-400, 7.8:1 on surface */ - --color-negative-surface: 154 52 18; /* orange-800, used at reduced opacity via bg-negative-surface/20 */ + --color-negative: 232 155 104; /* lightened terracotta, 7.6:1 on surface */ + --color-negative-surface: 92 51 22; /* dark terracotta, used at reduced opacity */ - --color-info: 96 165 250; /* blue-400, 7.0:1 on surface */ - --color-info-surface: 30 58 138; /* blue-900, used at reduced opacity via bg-info-surface/20 */ + --color-info: 201 192 176; /* lightened taupe, 8.9:1 on surface */ + --color-info-surface: 61 56 46; /* dark taupe, used at reduced opacity */ - --color-danger: 248 113 113; /* red-400, 6.4:1 on surface */ - --color-danger-surface: 127 29 29; /* red-900, used at reduced opacity via bg-danger-surface/20 */ + --color-danger: 232 129 129; /* 7.2:1 on surface */ + --color-danger-surface: 74 32 32; - --color-focus-ring: 129 140 248; /* indigo-400, 5.9:1 on surface */ + --color-focus-ring: 224 148 96; /* fill tokens stay identical to light mode — see rationale above */ - --color-positive-fill: 21 128 61; - --color-negative-fill: 194 65 12; - --color-info-fill: 37 99 235; - --color-danger-fill: 220 38 38; + --color-positive-fill: 86 99 63; + --color-negative-fill: 214 127 72; + --color-info-fill: 71 66 56; + --color-danger-fill: 166 45 45; } diff --git a/resources/views/components/nav-link.blade.php b/resources/views/components/nav-link.blade.php index 57136d5..136d92f 100644 --- a/resources/views/components/nav-link.blade.php +++ b/resources/views/components/nav-link.blade.php @@ -2,8 +2,8 @@ @php $classes = ($active ?? false) - ? 'inline-flex items-center px-1 pt-1 border-b-2 border-brand text-sm font-medium leading-5 text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition duration-150 ease-in-out' - : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-text-muted hover:text-text hover:border-border-strong focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition duration-150 ease-in-out'; + ? 'inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold leading-5 text-brand bg-surface-alt focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition duration-150 ease-in-out' + : 'inline-flex items-center px-4 py-2 rounded-full text-sm font-medium leading-5 text-text-muted hover:bg-surface-alt hover:text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition duration-150 ease-in-out'; @endphp merge(['class' => $classes]) }}> diff --git a/resources/views/components/primary-button.blade.php b/resources/views/components/primary-button.blade.php index 8017389..222d684 100644 --- a/resources/views/components/primary-button.blade.php +++ b/resources/views/components/primary-button.blade.php @@ -1,3 +1,3 @@ - diff --git a/resources/views/components/secondary-button.blade.php b/resources/views/components/secondary-button.blade.php index 3d742d9..b3067ef 100644 --- a/resources/views/components/secondary-button.blade.php +++ b/resources/views/components/secondary-button.blade.php @@ -1,3 +1,3 @@ - diff --git a/resources/views/components/text-input.blade.php b/resources/views/components/text-input.blade.php index 7431df3..a500005 100644 --- a/resources/views/components/text-input.blade.php +++ b/resources/views/components/text-input.blade.php @@ -1,3 +1,3 @@ @props(['disabled' => false]) -merge(['class' => 'bg-surface border-border-strong text-text focus:border-brand focus:ring-brand rounded-md shadow-sm']) }}> +merge(['class' => 'bg-surface-alt border-border-strong text-text focus:border-brand focus:ring-brand rounded-full shadow-sm']) }}> diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index da8d395..07c1f7b 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -11,19 +11,23 @@ - + + + @vite(['resources/css/app.css', 'resources/js/app.js']) -
- +
+
+ +
@if (isset($header)) -
-
+
+
{{ $header }}
diff --git a/resources/views/livewire/dashboard/index.blade.php b/resources/views/livewire/dashboard/index.blade.php index b607563..f99d409 100644 --- a/resources/views/livewire/dashboard/index.blade.php +++ b/resources/views/livewire/dashboard/index.blade.php @@ -1,18 +1,18 @@
-

Tableau de bord

-
+

Tableau de bord

+
- - @foreach (range($year - 3, $year + 3) as $y) @endforeach
- - @foreach (['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'] as $i => $label) @@ -22,9 +22,9 @@
-
-

Reste à dépenser

-

{{ number_format($sections['depense']['totals']['reste'], 2, ',', ' ') }} €

+
+

Reste à dépenser

+

{{ number_format($sections['depense']['totals']['reste'], 2, ',', ' ') }} €

@php @@ -44,16 +44,16 @@ @endphp
-
-
-

Analyse

+
+
+

Analyse

@foreach ($types as $type) @php $section = $sections[$type->value]; @endphp -
-
-

{{ $type->label() }}

+
+
+

{{ $type->label() }}

@@ -110,8 +110,8 @@
@foreach ($types as $type) @php $top = $chartData[$type->value]; @endphp -
-

Catégorie de {{ Str::lower($type->label()) }} (suivis)

+
+

Catégorie de {{ Str::lower($type->label()) }} (suivis)

@if ($top['labels']->isEmpty())

Aucun montant suivi.

diff --git a/resources/views/livewire/layout/navigation.blade.php b/resources/views/livewire/layout/navigation.blade.php index f4f9efc..d63eedd 100644 --- a/resources/views/livewire/layout/navigation.blade.php +++ b/resources/views/livewire/layout/navigation.blade.php @@ -16,20 +16,23 @@ new class extends Component } }; ?> -
@@ -391,7 +391,7 @@ @forelse ($transactions as $transaction) - +
Historique des transactions du foyer
{{ $transaction->date->translatedFormat('d M Y') }}{{ $transaction->category->type->label() }}{{ $transaction->category->type->label() }} {{ $transaction->category->name }} {{ $amountPrefix($transaction) }}{{ number_format($transaction->amount, 2, ',', ' ') }} € diff --git a/tailwind.config.js b/tailwind.config.js index 7a77b73..54d6f7a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -14,6 +14,7 @@ export default { extend: { fontFamily: { sans: ['Figtree', ...defaultTheme.fontFamily.sans], + display: ['Caprasimo', ...defaultTheme.fontFamily.sans], }, colors: { surface: 'rgb(var(--color-surface) / )',