jeremy/suivicpt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply Finlio cream/terracotta design system

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+46 -42
View File
@@ -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;
}