From a37481fb71b935f0f42b282fabe6db3c664be5c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= Date: Tue, 30 Jun 2026 12:28:03 +0200 Subject: [PATCH] fix(charts): improve contrast for chart colors 9-10 (#614) ## What Adjust the highest-index chart color variables so adjacent segments stay distinguishable: - **Light mode:** `--chart-9`/`--chart-10` use darker zinc shades (`zinc-700`/`zinc-600`) instead of the near-white `zinc-100`/`zinc-50`, which were invisible against the light background. - **Dark mode:** `--chart-7`/`--chart-8` use lighter zinc shades (`zinc-200`/`zinc-300`) instead of the near-black `zinc-800`/`zinc-900`. ## Why Charts with many categories were rendering low-index and high-index segments at nearly the same value as the background, making them unreadable. --- resources/css/app.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/resources/css/app.css b/resources/css/app.css index 7046300a..47ec817c 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -100,8 +100,8 @@ --chart-6: var(--color-zinc-400); --chart-7: var(--color-zinc-300); --chart-8: var(--color-zinc-200); - --chart-9: var(--color-zinc-100); - --chart-10: var(--color-zinc-50); + --chart-9: var(--color-zinc-700); + --chart-10: var(--color-zinc-600); --spent: var(--color-zinc-800); --allocated: var(--color-zinc-200); --spent-prev: var(--color-zinc-400); @@ -142,8 +142,8 @@ --chart-4: var(--color-zinc-500); --chart-5: var(--color-zinc-600); --chart-6: var(--color-zinc-700); - --chart-7: var(--color-zinc-800); - --chart-8: var(--color-zinc-900); + --chart-7: var(--color-zinc-200); + --chart-8: var(--color-zinc-300); --chart-9: var(--color-zinc-50); --chart-10: var(--color-zinc-100); --spent: var(--color-zinc-200);